From 2b6d5828f8e9cb7b3532711d97f91165834ba738 Mon Sep 17 00:00:00 2001
From: Jake Moxey <jakemoxey@gmail.com>
Date: Thu, 16 Sep 2021 13:28:22 +1000
Subject: [PATCH] native: Add filled variant to Input

---
 packages/bumbag-native/package.json           |  1 +
 .../__snapshots__/Button.test.tsx.snap        |  4 ++
 .../bumbag-native/src/Input/Input.styles.ts   | 65 +++++++++++++++----
 packages/bumbag-native/src/Input/Input.tsx    | 14 +++-
 .../__snapshots__/Input.test.tsx.snap         |  3 +
 .../__snapshots__/Level.test.tsx.snap         | 54 +++++++--------
 .../__snapshots__/Menu.test.tsx.snap          |  2 +
 .../__snapshots__/Switch.test.tsx.snap        | 64 +++++++++---------
 website/pages/docs/native/form/input.mdx      |  3 +
 yarn.lock                                     | 50 +++++++++++++-
 10 files changed, 185 insertions(+), 75 deletions(-)

diff --git a/packages/bumbag-native/package.json b/packages/bumbag-native/package.json
index 94860ed55..02267a81e 100644
--- a/packages/bumbag-native/package.json
+++ b/packages/bumbag-native/package.json
@@ -39,6 +39,7 @@
     "bumbag": "^2.6.0",
     "react-native": "0.65.1",
     "react-native-svg": "12.1.0",
+    "react-native-web": "^0.17.1",
     "react-test-renderer": "16.8.6"
   },
   "author": "Jake Moxey",
diff --git a/packages/bumbag-native/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/bumbag-native/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
index d157fd15a..6a813fe5d 100644
--- a/packages/bumbag-native/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/packages/bumbag-native/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -37,6 +37,7 @@ exports[`overrides Button.disabled should render correctly 1`] = `
   aria-disabled="true"
   class="css-view-1dbjc4n r-pointerEvents-1qm0v8d"
   style="align-items: center; background-color: rgb(239, 68, 68); border-bottom-color: rgba(217,217,225,1.00); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-width: 1px; border-left-color: rgba(217,217,225,1.00); border-left-width: 1px; border-right-color: rgba(217,217,225,1.00); border-right-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgba(217,217,225,1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-width: 1px; cursor: not-allowed; flex-direction: row; justify-content: center; min-height: 44px; opacity: 0.7; padding: 0px 16px 0px 16px; text-decoration-color: rgba(0,0,0,1.00); text-decoration: none; text-decoration-style: solid; transition-duration: 0s; transition-property: opacity; user-select: none;"
+  tabindex="-1"
 >
   <div
     class="css-text-901oao"
@@ -269,6 +270,7 @@ exports[`props disabled should render a disabled button correctly 1`] = `
   aria-disabled="true"
   class="css-view-1dbjc4n r-pointerEvents-1qm0v8d"
   style="align-items: center; background-color: rgb(252, 252, 253); border-bottom-color: rgba(217,217,225,1.00); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-width: 1px; border-left-color: rgba(217,217,225,1.00); border-left-width: 1px; border-right-color: rgba(217,217,225,1.00); border-right-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgba(217,217,225,1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-width: 1px; cursor: not-allowed; flex-direction: row; justify-content: center; min-height: 44px; opacity: 0.7; padding: 0px 16px 0px 16px; text-decoration-color: rgba(0,0,0,1.00); text-decoration: none; text-decoration-style: solid; transition-duration: 0s; transition-property: opacity; user-select: none;"
+  tabindex="-1"
 >
   <div
     class="css-text-901oao"
@@ -285,6 +287,7 @@ exports[`props disabled should render correctly with overrides 1`] = `
   aria-disabled="true"
   class="css-view-1dbjc4n r-pointerEvents-1qm0v8d"
   style="align-items: center; background-color: rgb(239, 68, 68); border-bottom-color: rgba(217,217,225,1.00); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-width: 1px; border-left-color: rgba(217,217,225,1.00); border-left-width: 1px; border-right-color: rgba(217,217,225,1.00); border-right-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgba(217,217,225,1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-width: 1px; cursor: not-allowed; flex-direction: row; justify-content: center; min-height: 44px; opacity: 0.7; padding: 0px 16px 0px 16px; text-decoration-color: rgba(0,0,0,1.00); text-decoration: none; text-decoration-style: solid; transition-duration: 0s; transition-property: opacity; user-select: none;"
+  tabindex="-1"
 >
   <div
     class="css-text-901oao"
@@ -961,6 +964,7 @@ exports[`theming Button.disabled should render correctly 1`] = `
   aria-disabled="true"
   class="css-view-1dbjc4n r-pointerEvents-1qm0v8d"
   style="align-items: center; background-color: rgb(239, 68, 68); border-bottom-color: rgba(217,217,225,1.00); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-width: 1px; border-left-color: rgba(217,217,225,1.00); border-left-width: 1px; border-right-color: rgba(217,217,225,1.00); border-right-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgba(217,217,225,1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-width: 1px; cursor: not-allowed; flex-direction: row; justify-content: center; min-height: 44px; opacity: 0.7; padding: 0px 16px 0px 16px; text-decoration-color: rgba(0,0,0,1.00); text-decoration: none; text-decoration-style: solid; transition-duration: 0s; transition-property: opacity; user-select: none;"
+  tabindex="-1"
 >
   <div
     class="css-text-901oao"
diff --git a/packages/bumbag-native/src/Input/Input.styles.ts b/packages/bumbag-native/src/Input/Input.styles.ts
index 8b719f37b..fd50a0ef2 100644
--- a/packages/bumbag-native/src/Input/Input.styles.ts
+++ b/packages/bumbag-native/src/Input/Input.styles.ts
@@ -18,7 +18,6 @@ export const StyledInput = styled.TextInput`
   height: ${(props: any) => `${space(2.75, props.styledFontSize)(props)}px`};
 
   ${getVariantStyles}
-  ${getDisabledStyles}
   ${getSizeStyles}
   ${getIconPaddingStyles}
 
@@ -33,6 +32,16 @@ function getVariantStyles(props) {
       border-radius: ${borderRadius('default')(props)};
       padding: ${space(0.4, props.styledFontSize)(props)}px ${space(0.8, props.styledFontSize)(props)}px;
 
+      ${
+        props.disabled
+          ? `
+      background-color: ${palette('white700', { dark: 'black200' })(props)};
+      color: ${palette('text100')(props)};
+      padding: ${space(0.4, props.styledFontSize)(props)}px ${space(0.8, props.styledFontSize)(props)}px;
+      `
+          : ''
+      }
+
       ${
         props.focus
           ? `
@@ -52,6 +61,16 @@ function getVariantStyles(props) {
       border-radius: 0px;
       padding: ${space(0.4, props.styledFontSize)(props)}px 0px;
 
+      ${
+        props.disabled
+          ? `
+      background-color: ${palette('white700', { dark: 'black200' })(props)};
+      color: ${palette('text100')(props)};
+      padding: ${space(0.4, props.styledFontSize)(props)}px ${space(0.8, props.styledFontSize)(props)}px;
+      `
+          : ''
+      }
+
       ${
         props.focus
           ? `
@@ -68,22 +87,39 @@ function getVariantStyles(props) {
     return `
       padding: ${space(0.4, props.styledFontSize)(props)}px 0px;
 
+      ${
+        props.disabled
+          ? `
+      background-color: ${palette('white700', { dark: 'black200' })(props)};
+      color: ${palette('text100')(props)};
+      padding: ${space(0.4, props.styledFontSize)(props)}px ${space(0.8, props.styledFontSize)(props)}px;
+      `
+          : ''
+      }
+
       ${theme('native.Input.variants.borderless', `styles.base`)(props)};
     `;
   }
-  return '';
-}
-
-function getDisabledStyles(props) {
-  return props.disabled
-    ? `
-      background-color: ${palette('white700', { dark: 'black200' })(props)};
-      color: ${palette('text100')(props)};
+  if (props.variant === 'filled') {
+    return `
+      background-color: ${palette('white700', { dark: 'black300' })(props)};
+      border: 2px solid transparent;
+      border-radius: ${borderRadius('default')(props)};
       padding: ${space(0.4, props.styledFontSize)(props)}px ${space(0.8, props.styledFontSize)(props)}px;
 
-      ${theme('native.Input', `styles.disabled`)(props)};
-    `
-    : '';
+      ${
+        props.focus
+          ? `
+            background-color: ${palette('white', { dark: 'black100' })(props)};
+            border: 2px solid ${palette(props.palette || 'primary')(props)};
+          `
+          : ''
+      }
+
+      ${theme('native.Input.variants.filled', `styles.base`)(props)};
+    `;
+  }
+  return '';
 }
 
 function getSizeStyles(props) {
@@ -234,6 +270,11 @@ function getAnimatedLabelVariantStyles(props) {
       ${theme('native.Input.variants.borderless', 'Label.styles.base')(props)};
     `;
   }
+  if (props.variant === 'filled') {
+    return `
+      ${theme('native.Input.variants.filled', 'Label.styles.base')(props)};
+    `;
+  }
   return '';
 }
 
diff --git a/packages/bumbag-native/src/Input/Input.tsx b/packages/bumbag-native/src/Input/Input.tsx
index 8e7facd08..7b9b49c7a 100644
--- a/packages/bumbag-native/src/Input/Input.tsx
+++ b/packages/bumbag-native/src/Input/Input.tsx
@@ -44,7 +44,7 @@ export type LocalInputProps = {
 };
 export type InputProps = BoxProps & RNTextInputProps & LocalInputProps;
 
-const defaultProps = { placeholderTextColor: 'gray300', size: 'default', variant: 'bordered' };
+const defaultProps = { placeholderTextColor: 'gray300', size: 'default', variant: 'bordered', _focus: true };
 
 const useProps = createHook<InputProps>(
   (props) => {
@@ -65,7 +65,17 @@ const useProps = createHook<InputProps>(
 export const Input = createComponent<InputProps>(
   (_props) => {
     const props = { ..._props, ..._props.inputProps };
-    const { colorMode, iconAfter, iconAfterProps, iconBefore, iconBeforeProps, label, labelProps, size } = props;
+    const {
+      colorMode,
+      disabled,
+      iconAfter,
+      iconAfterProps,
+      iconBefore,
+      iconBeforeProps,
+      label,
+      labelProps,
+      size,
+    } = props;
     const defaultFontSize = props.fontSize || styles.SIZES[size];
 
     /////////////////////////////////////////////////////////////////////
diff --git a/packages/bumbag-native/src/Input/__tests__/__snapshots__/Input.test.tsx.snap b/packages/bumbag-native/src/Input/__tests__/__snapshots__/Input.test.tsx.snap
index f5d8571ba..5893385fe 100644
--- a/packages/bumbag-native/src/Input/__tests__/__snapshots__/Input.test.tsx.snap
+++ b/packages/bumbag-native/src/Input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -426,6 +426,7 @@ exports[`theming Input.IconWrapper.styles.base should render correctly 1`] = `
       <div
         class="css-text-901oao"
         dir="auto"
+        id="animatedComponent"
         style="background-color: rgb(252, 252, 253); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; color: rgb(145, 154, 169); cursor: text; font-size: 16px; font-weight: 400; padding: 0px 4px 0px 4px; position: absolute;"
       >
         Username
@@ -463,6 +464,7 @@ exports[`theming Input.Label.styles.base should render correctly 1`] = `
       <div
         class="css-text-901oao"
         dir="auto"
+        id="animatedComponent"
         style="background-color: rgb(239, 68, 68); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; color: rgb(145, 154, 169); cursor: text; font-size: 16px; font-weight: 400; padding: 0px 4px 0px 4px; position: absolute;"
       >
         Username
@@ -500,6 +502,7 @@ exports[`theming Input.LabelWrapper.styles.base should render correctly 1`] = `
       <div
         class="css-text-901oao"
         dir="auto"
+        id="animatedComponent"
         style="background-color: rgb(252, 252, 253); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; color: rgb(145, 154, 169); cursor: text; font-size: 16px; font-weight: 400; padding: 0px 4px 0px 4px; position: absolute;"
       >
         Username
diff --git a/packages/bumbag-native/src/Level/__tests__/__snapshots__/Level.test.tsx.snap b/packages/bumbag-native/src/Level/__tests__/__snapshots__/Level.test.tsx.snap
index 7c26f632b..f81d64042 100644
--- a/packages/bumbag-native/src/Level/__tests__/__snapshots__/Level.test.tsx.snap
+++ b/packages/bumbag-native/src/Level/__tests__/__snapshots__/Level.test.tsx.snap
@@ -3,19 +3,19 @@
 exports[`applyTheme renders correctly 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="background-color: rgb(239, 68, 68); box-shadow: 0px 1px 4px rgba(0,0,0,0.15); flex-direction: row; justify-content: space-between; padding: 16px 16px 16px 16px;"
+  style="align-items: center; background-color: rgb(239, 68, 68); box-shadow: 0px 1px 4px rgba(0,0,0,0.15); display: flex; flex-direction: column; justify-content: flex-start; padding: 16px 16px 16px 16px;"
 />
 `;
 
 exports[`defaultProps should render correctly for color 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="color: rgb(87, 79, 235); flex-direction: row; justify-content: space-between;"
+  style="align-items: center; color: rgb(87, 79, 235); display: flex; flex-direction: column; justify-content: flex-start;"
 >
   <div
     class="css-text-901oao"
     dir="auto"
-    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400;"
+    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400; margin-bottom: 16px;"
   >
     hello world
   </div>
@@ -32,19 +32,19 @@ exports[`defaultProps should render correctly for color 1`] = `
 exports[`modes renders correctly for applyTheme 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="background-color: rgb(239, 68, 68); box-shadow: 0px 1px 4px rgba(0,0,0,0.15); color: rgb(238, 237, 253); flex-direction: row; justify-content: space-between; padding: 16px 16px 16px 16px;"
+  style="align-items: center; background-color: rgb(239, 68, 68); box-shadow: 0px 1px 4px rgba(0,0,0,0.15); color: rgb(238, 237, 253); display: flex; flex-direction: column; justify-content: flex-start; padding: 16px 16px 16px 16px;"
 />
 `;
 
 exports[`modes renders correctly for overrides 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="background-color: rgb(239, 68, 68); box-shadow: 0px 1px 4px rgba(0,0,0,0.15); flex-direction: row; justify-content: space-between; padding: 16px 16px 16px 16px;"
+  style="align-items: center; background-color: rgb(239, 68, 68); box-shadow: 0px 1px 4px rgba(0,0,0,0.15); display: flex; flex-direction: column; justify-content: flex-start; padding: 16px 16px 16px 16px;"
 >
   <div
     class="css-text-901oao"
     dir="auto"
-    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400;"
+    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400; margin-bottom: 16px;"
   >
     Hello world
   </div>
@@ -61,12 +61,12 @@ exports[`modes renders correctly for overrides 1`] = `
 exports[`modes should render correctly when colorMode is set globally 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="background-color: rgb(239, 68, 68); color: rgb(238, 237, 253); flex-direction: row; justify-content: space-between;"
+  style="align-items: center; background-color: rgb(239, 68, 68); color: rgb(238, 237, 253); display: flex; flex-direction: column; justify-content: flex-start;"
 >
   <div
     class="css-text-901oao"
     dir="auto"
-    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400;"
+    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400; margin-bottom: 16px;"
   >
     Hello world
   </div>
@@ -83,12 +83,12 @@ exports[`modes should render correctly when colorMode is set globally 1`] = `
 exports[`modes should render correctly when colorMode set as prop 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="background-color: rgb(239, 68, 68); color: rgb(238, 237, 253); flex-direction: row; justify-content: space-between;"
+  style="align-items: center; background-color: rgb(239, 68, 68); color: rgb(238, 237, 253); display: flex; flex-direction: column; justify-content: flex-start;"
 >
   <div
     class="css-text-901oao"
     dir="auto"
-    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400;"
+    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400; margin-bottom: 16px;"
   >
     Hello world
   </div>
@@ -105,12 +105,12 @@ exports[`modes should render correctly when colorMode set as prop 1`] = `
 exports[`overrides should render correctly 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="background-color: rgb(239, 68, 68); box-shadow: 0px 1px 4px rgba(0,0,0,0.15); flex-direction: row; justify-content: space-between; padding: 16px 16px 16px 16px;"
+  style="align-items: center; background-color: rgb(239, 68, 68); box-shadow: 0px 1px 4px rgba(0,0,0,0.15); display: flex; flex-direction: column; justify-content: flex-start; padding: 16px 16px 16px 16px;"
 >
   <div
     class="css-text-901oao"
     dir="auto"
-    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400;"
+    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400; margin-bottom: 16px;"
   >
     Hello world
   </div>
@@ -127,12 +127,12 @@ exports[`overrides should render correctly 1`] = `
 exports[`props should render correctly 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="flex-direction: row; justify-content: space-between;"
+  style="align-items: center; display: flex; flex-direction: column; justify-content: flex-start;"
 >
   <div
     class="css-text-901oao"
     dir="auto"
-    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400;"
+    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400; margin-bottom: 16px;"
   >
     Hello world
   </div>
@@ -171,12 +171,12 @@ exports[`props should render correctly for orientation 1`] = `
 exports[`props should render correctly for spacing 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="flex-direction: row; justify-content: space-between;"
+  style="align-items: center; display: flex; flex-direction: column; justify-content: flex-start;"
 >
   <div
     class="css-text-901oao"
     dir="auto"
-    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400;"
+    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400; margin-bottom: 40px;"
   >
     Hello world
   </div>
@@ -193,12 +193,12 @@ exports[`props should render correctly for spacing 1`] = `
 exports[`props should render correctly with CSS props 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="color: rgb(87, 79, 235); flex-direction: row; justify-content: space-between;"
+  style="align-items: center; color: rgb(87, 79, 235); display: flex; flex-direction: column; justify-content: flex-start;"
 >
   <div
     class="css-text-901oao"
     dir="auto"
-    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400;"
+    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400; margin-bottom: 16px;"
   >
     Hello world
   </div>
@@ -215,12 +215,12 @@ exports[`props should render correctly with CSS props 1`] = `
 exports[`theming Level.styles.base should render correctly 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="background-color: rgb(239, 68, 68); flex-direction: row; justify-content: space-between;"
+  style="align-items: center; background-color: rgb(239, 68, 68); display: flex; flex-direction: column; justify-content: flex-start;"
 >
   <div
     class="css-text-901oao"
     dir="auto"
-    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400;"
+    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400; margin-bottom: 16px;"
   >
     hello world
   </div>
@@ -237,12 +237,12 @@ exports[`theming Level.styles.base should render correctly 1`] = `
 exports[`theming Level.styles.base should render correctly 2`] = `
 <div
   class="css-view-1dbjc4n"
-  style="flex-direction: row; justify-content: space-between;"
+  style="align-items: center; display: flex; flex-direction: column; justify-content: flex-start;"
 >
   <div
     class="css-text-901oao"
     dir="auto"
-    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400;"
+    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400; margin-bottom: 16px;"
   >
     Hello world
   </div>
@@ -259,19 +259,19 @@ exports[`theming Level.styles.base should render correctly 2`] = `
 exports[`variants renders correctly for applyTheme 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="box-shadow: 0px 1px 4px rgba(0,0,0,0.15); color: rgb(239, 68, 68); flex-direction: row; justify-content: space-between; padding: 16px 16px 16px 16px;"
+  style="align-items: center; box-shadow: 0px 1px 4px rgba(0,0,0,0.15); color: rgb(239, 68, 68); display: flex; flex-direction: column; justify-content: flex-start; padding: 16px 16px 16px 16px;"
 />
 `;
 
 exports[`variants renders correctly for overrides 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="background-color: rgb(239, 68, 68); box-shadow: 0px 1px 4px rgba(0,0,0,0.15); flex-direction: row; justify-content: space-between; padding: 16px 16px 16px 16px;"
+  style="align-items: center; background-color: rgb(239, 68, 68); box-shadow: 0px 1px 4px rgba(0,0,0,0.15); display: flex; flex-direction: column; justify-content: flex-start; padding: 16px 16px 16px 16px;"
 >
   <div
     class="css-text-901oao"
     dir="auto"
-    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400;"
+    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400; margin-bottom: 16px;"
   >
     Hello world
   </div>
@@ -288,12 +288,12 @@ exports[`variants renders correctly for overrides 1`] = `
 exports[`variants styles.base should render correctly 1`] = `
 <div
   class="css-view-1dbjc4n"
-  style="background-color: rgb(239, 68, 68); flex-direction: row; justify-content: space-between;"
+  style="align-items: center; background-color: rgb(239, 68, 68); display: flex; flex-direction: column; justify-content: flex-start;"
 >
   <div
     class="css-text-901oao"
     dir="auto"
-    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400;"
+    style="color: rgb(22, 30, 46); font-size: 16px; font-weight: 400; margin-bottom: 16px;"
   >
     Hello world
   </div>
diff --git a/packages/bumbag-native/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap b/packages/bumbag-native/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
index bb8e66804..f0200d372 100644
--- a/packages/bumbag-native/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/packages/bumbag-native/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -904,6 +904,7 @@ exports[`props should render correctly with disabled items 1`] = `
     aria-disabled="true"
     class="css-view-1dbjc4n"
     style="flex-direction: row; padding-left: 16px; transition-duration: 0s; transition-property: opacity; user-select: none; width: 100%;"
+    tabindex="-1"
   >
     <div
       class="css-view-1dbjc4n"
@@ -1492,6 +1493,7 @@ exports[`props should render correctly with static items 1`] = `
   <div
     class="css-view-1dbjc4n"
     style="cursor: unset; flex-direction: row; padding-left: 16px; transition-duration: 0s; transition-property: opacity; user-select: none; width: 100%;"
+    tabindex="-1"
   >
     <div
       class="css-view-1dbjc4n"
diff --git a/packages/bumbag-native/src/Switch/__tests__/__snapshots__/Switch.test.tsx.snap b/packages/bumbag-native/src/Switch/__tests__/__snapshots__/Switch.test.tsx.snap
index 457affcf1..5b3c8a6a7 100644
--- a/packages/bumbag-native/src/Switch/__tests__/__snapshots__/Switch.test.tsx.snap
+++ b/packages/bumbag-native/src/Switch/__tests__/__snapshots__/Switch.test.tsx.snap
@@ -14,11 +14,11 @@ exports[`applyTheme renders correctly 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -51,11 +51,11 @@ exports[`defaultProps should render correctly for color 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -80,11 +80,11 @@ exports[`modes renders correctly for applyTheme 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -109,11 +109,11 @@ exports[`modes renders correctly for overrides 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -138,11 +138,11 @@ exports[`modes should render correctly when colorMode is set globally 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -167,11 +167,11 @@ exports[`modes should render correctly when colorMode set as prop 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -196,11 +196,11 @@ exports[`overrides should render correctly 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -233,11 +233,11 @@ exports[`props should render correctly 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -270,11 +270,11 @@ exports[`theming Switch.Label.styles.base should render correctly 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -307,11 +307,11 @@ exports[`theming Switch.Toggle.styles.base should render correctly 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -344,11 +344,11 @@ exports[`theming Switch.styles.base should render correctly 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -381,11 +381,11 @@ exports[`variants renders correctly for applyTheme 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -410,11 +410,11 @@ exports[`variants renders correctly for overrides 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -439,11 +439,11 @@ exports[`variants should render correctly for default variant 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -476,11 +476,11 @@ exports[`variants should render correctly for ghost variant 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
@@ -513,11 +513,11 @@ exports[`variants styles.base should render correctly 1`] = `
   >
     <div
       class="css-view-1dbjc4n"
-      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
+      style="background-color: rgb(217, 217, 225); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; bottom: 0px; forced-color-adjust: none; height: 70%; left: 0px; margin: auto auto auto auto; position: absolute; right: 0px; top: 0px; transition-duration: 0.1s; width: 100%;"
     />
     <div
       class="css-view-1dbjc4n"
-      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
+      style="align-self: flex-start; background-color: rgb(255, 255, 255); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); forced-color-adjust: none; height: 20px; left: 0%; margin-left: 0px; transform: translateZ(0px); transition-duration: 0.1s; width: 20px;"
     />
     <input
       role="switch"
diff --git a/website/pages/docs/native/form/input.mdx b/website/pages/docs/native/form/input.mdx
index 7caba3fbb..e6b742afb 100644
--- a/website/pages/docs/native/form/input.mdx
+++ b/website/pages/docs/native/form/input.mdx
@@ -14,6 +14,9 @@ import { Input, InputField } from 'bumbag-native'
 ###tab=Default,type=jsx-live
 <Input placeholder="Enter your name here..." />###
 
+###tab=Filled,type=jsx-live
+<Input placeholder="Enter your name here..." variant="filled" />###
+
 ###tab=Borderless,type=jsx-live
 <Input placeholder="Enter your name here..." variant="borderless" />###
 
diff --git a/yarn.lock b/yarn.lock
index c3e55959f..b49a0fb16 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3821,7 +3821,7 @@ array-filter@~0.0.0:
   resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
   integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw=
 
-array-find-index@^1.0.1:
+array-find-index@^1.0.1, array-find-index@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
   integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
@@ -5008,6 +5008,14 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
+create-react-class@^15.7.0:
+  version "15.7.0"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
+  integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 cross-fetch@^3.0.4:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.0.tgz#6447c13cc8887fa2a66caef92888d7fdaab6e0d1"
@@ -5040,6 +5048,14 @@ css-color-keywords@^1.0.0:
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
   integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
 
+css-in-js-utils@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
+  integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+    isobject "^3.0.1"
+
 css-select@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
@@ -6712,6 +6728,11 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
+hyphenate-style-name@^1.0.2, hyphenate-style-name@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -6844,6 +6865,13 @@ init-package-json@^1.10.3:
     validate-npm-package-license "^3.0.1"
     validate-npm-package-name "^3.0.0"
 
+inline-style-prefixer@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.0.tgz#f73d5dbf2855733d6b153a4d24b7b47a73e9770b"
+  integrity sha512-XTHvRUS4ZJNzC1GixJRmOlWSS45fSt+DJoyQC9ytj0WxQfcgofQtDtyKKYxHUqEsWCs+LIWftPF1ie7+i012Fg==
+  dependencies:
+    css-in-js-utils "^2.0.0"
+
 inquirer@^6.2.0:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.2.tgz#ad50942375d036d327ff528c08bd5fab089928ca"
@@ -8106,7 +8134,7 @@ logkitty@^0.7.1:
     dayjs "^1.8.15"
     yargs "^15.1.0"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -8944,6 +8972,11 @@ nopt@^4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
+normalize-css-color@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/normalize-css-color/-/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d"
+  integrity sha1-Apkel8zOxmI/5XOvu/Deah8+n40=
+
 normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, normalize-package-data@^2.4.0, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -9930,6 +9963,19 @@ react-native-web-hooks@3.0.1:
   resolved "https://registry.yarnpkg.com/react-native-web-hooks/-/react-native-web-hooks-3.0.1.tgz#d680c7638a51b573f1a3f756ba59589fcefde06f"
   integrity sha512-k1GLtdFo7OA6DBVu0ydbLwq7Ds32oz1dJJkeeYRuxqcs5K8PQFIYxRyEpiW36Fcol+NffeziT2ITkbdIXI0etA==
 
+react-native-web@^0.17.1:
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.17.1.tgz#90d473c89dd99b88bc9830b2a9fcdd2fc5f04902"
+  integrity sha512-lUnn+2O8ynQ6/gJKylSxm7DLi2vHw6AujdDV1+LSa8Epe1bYFJNUcJTEhJf0jNYUFGOujzMtuG8Mkz3HdWTkag==
+  dependencies:
+    array-find-index "^1.0.2"
+    create-react-class "^15.7.0"
+    fbjs "^3.0.0"
+    hyphenate-style-name "^1.0.4"
+    inline-style-prefixer "^6.0.0"
+    normalize-css-color "^1.0.2"
+    prop-types "^15.6.0"
+
 react-native@0.65.1:
   version "0.65.1"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.65.1.tgz#bd8cd313e0eb8ddcf08e61e3f8b54b7fc31a418c"