Merge branch 'rebranding/master' into anu/rebranding-whitelabel-fix

razorpay · Jan 11, 2024 · 6b92f3c · 6b92f3c
2 parents ccf1c1d + a1fbac3
commit 6b92f3c
Show file tree

Hide file tree

Showing 78 changed files with 3,300 additions and 1,398 deletions.
diff --git a/.github/workflows/blade-interaction-tests.yml b/.github/workflows/blade-interaction-tests.yml
@@ -0,0 +1,37 @@
+name: Blade Interaction Tests
+
+# Runs the action when 
+# 1. 'Run Interaction Tests' label is added to PR 
+# 2. Workflow is trigerred manually
+# 3. PR is merged to master
+
+on:
+  workflow_dispatch:
+  pull_request:
+    types: [labeled]
+  push:
+    branches:
+      - 'master'
+
+env:
+  GITHUB_ACCESS_TOKEN: ${{ secrets.CI_BOT_TOKEN }}
+
+jobs:
+  interaction-tests:
+    name: Run Interaction Tests
+    runs-on: ubuntu-latest # nosemgrep: non-self-hosted-runner
+    if: ${{ github.event_name == 'workflow_dispatch' || github.event.label.name == 'Run Interaction Tests' || github.event_name == 'push' }}
+    steps:
+      - name: Checkout Codebase
+        uses: actions/checkout@v3
+      - name: Use Node v18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.12.1
+      - name: Setup Cache & Install Dependencies
+        uses: ./.github/actions/install-dependencies
+      - name: Run Interaction Tests
+        run: |
+          npx playwright install chromium firefox webkit --with-deps
+          yarn test:react:interaction:ci 
+        working-directory: packages/blade
diff --git a/.github/workflows/blade-validate.yml b/.github/workflows/blade-validate.yml
@@ -46,7 +46,7 @@ jobs:
           node-version: 18.12.1
       - name: Setup Cache & Install Dependencies
         uses: ./.github/actions/install-dependencies
-      - name: Run React & React Native Tests
+      - name: Run Unit Tests
         run: yarn test
         working-directory: packages/blade
         env:

diff --git a/packages/blade-coverage-extension/yarn.lock b/packages/blade-coverage-extension/yarn.lock
@@ -4589,9 +4589,9 @@ flatted@^3.1.0:
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
 follow-redirects@^1.0.0:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
-  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+  version "1.15.4"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
+  integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
 
 for-each@^0.3.3:
   version "0.3.3"

diff --git a/packages/blade/.storybook/react-native/storybook.requires.js b/packages/blade/.storybook/react-native/storybook.requires.js
@@ -57,6 +57,7 @@ const getStories = () => {
     './src/components/Button/IconButton/IconButton.stories.tsx': require('../../src/components/Button/IconButton/IconButton.stories.tsx'),
     './src/components/Card/Card.stories.tsx': require('../../src/components/Card/Card.stories.tsx'),
     './src/components/Card/CardInteractive.stories.tsx': require('../../src/components/Card/CardInteractive.stories.tsx'),
+    './src/components/Carousel/__tests__/Carousel.test.stories.tsx': require('../../src/components/Carousel/__tests__/Carousel.test.stories.tsx'),
     './src/components/Carousel/Carousel.stories.tsx': require('../../src/components/Carousel/Carousel.stories.tsx'),
     './src/components/Checkbox/Checkbox.stories.tsx': require('../../src/components/Checkbox/Checkbox.stories.tsx'),
     './src/components/Checkbox/CheckboxGroup.stories.tsx': require('../../src/components/Checkbox/CheckboxGroup.stories.tsx'),

diff --git a/packages/blade/.storybook/react/main.ts b/packages/blade/.storybook/react/main.ts
@@ -42,6 +42,8 @@ const config: StorybookConfig = {
     '../../src/components/Modal/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Radio/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Popover/**/**/*.stories.@(ts|tsx|js|jsx)',
+    '../../src/components/Skeleton/**/**/*.stories.@(ts|tsx|js|jsx)',
+    '../../src/components/Switch/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Checkbox/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../docs/**/*.stories.mdx',
     '../../docs/**/*.stories.@(ts|tsx|js|jsx)',
@@ -56,6 +58,7 @@ const config: StorybookConfig = {
     '@storybook/addon-docs',
     '@storybook/addon-a11y',
     '@storybook/preset-create-react-app',
+    '@storybook/addon-interactions',
   ],
   framework: {
     name: '@storybook/react-webpack5',

diff --git a/packages/blade/.storybook/react/preview.tsx b/packages/blade/.storybook/react/preview.tsx
@@ -9,6 +9,7 @@ import { INTERNAL_STORY_ADDON_PARAM } from './constants';
 const { GlobalStyle } = global;
 import { DocsContainer } from '@storybook/addon-docs';
 import React from 'react';
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 import './global.css';
 
 export const parameters = {
@@ -27,6 +28,19 @@ export const parameters = {
       disable: true,
     },
   },
+  viewport: {
+    viewports: {
+      ...MINIMAL_VIEWPORTS,
+      iPhone6: {
+        name: 'iPhone 6',
+        styles: {
+          height: '667px',
+          width: '375px',
+        },
+        type: 'mobile',
+      },
+    },
+  },
   // on development setting it to undefined so that on 'live reload' it won't switch
   // to docs panel while developing the component
   viewMode: process.env.NODE_ENV === 'development' ? undefined : 'docs',
@@ -58,7 +72,7 @@ export const parameters = {
           'useTheme',
         ],
         'Components',
-        ['*', 'KitchenSink'],
+        ['*', 'Interaction Tests', 'KitchenSink'],
         'Recipes',
       ],
     },

diff --git a/packages/blade/CHANGELOG.md b/packages/blade/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @razorpay/blade
 
+## 10.23.2
+
+### Patch Changes
+
+- bd7d8dc5: feat(Skeleton): add minHeight and minWidth prop
+
+## 10.23.1
+
+### Patch Changes
+
+- 6f89de9f: fix(Table): handle case where currentPage is greater than total pages
+
 ## 10.23.0
 
 ### Minor Changes

diff --git a/packages/blade/package.json b/packages/blade/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "10.23.0",
+  "version": "10.23.2",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -109,8 +109,12 @@
     "react-native:storybook:ios": "yarn react-native:get-stories && cross-env FRAMEWORK=REACT_NATIVE react-native run-ios",
     "react-native:storybook:start": "yarn react-native:get-stories && cross-env NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT_NATIVE react-native start --reset-cache",
     "react": "yarn run react:storybook",
-    "react:storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT storybook dev -c ./.storybook/react -p 9009",
-    "react:storybook:build": "cross-env NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT storybook build -c ./.storybook/react -o storybook-site",
+    "react:storybook": "cross-env FRAMEWORK=REACT storybook dev -c ./.storybook/react -p 9009",
+    "react:storybook:build": "cross-env FRAMEWORK=REACT storybook build -c ./.storybook/react -o storybook-site --quiet",
+    "react:storybook:serve": "http-server storybook-site --port 9009 --silent",
+    "react:storybook:serve:test": "wait-on http://127.0.0.1:9009/ && yarn test:react:interaction",
+    "test:react:interaction": "cross-env FRAMEWORK=REACT test-storybook -c ./.storybook/react --url http://127.0.0.1:9009/",
+    "test:react:interaction:ci": "yarn react:storybook:build && run-p react:storybook:serve react:storybook:serve:test --race",
     "test:react": "cross-env FRAMEWORK=REACT jest -c ./jest.web.config.js --shard=$SHARD --forceExit",
     "test:react-native": "cross-env FRAMEWORK=REACT_NATIVE jest -c ./jest.native.config.js --shard=$SHARD --forceExit",
     "start:ios": "cross-env NODE_OPTIONS=--openssl-legacy-provider run-p react-native:storybook:start react-native:storybook:ios",
@@ -139,6 +143,13 @@
     "tinycolor2": "1.6.0"
   },
   "devDependencies": {
+    "http-server": "14.1.1",
+    "wait-on": "7.2.0",
+    "@storybook/addon-interactions": "7.6.6",
+    "@storybook/testing-library": "0.2.2",
+    "@storybook/test-runner": "0.16.0",
+    "@storybook/jest": "0.2.3",
+    "playwright": "1.40.1",
     "chromatic": "6.22.0",
     "@babel/cli": "7.23.0",
     "@babel/core": "7.20.2",

diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js
@@ -30,6 +30,8 @@ const rebrandedComponents = [
   'SkipNav',
   'VisuallyHidden',
   'Tooltip',
+  'Skeleton',
+  'Switch',
   'Radio',
   'Checkbox',
 ];

diff --git a/...blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap b/...blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap
@@ -272,11 +272,11 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                     data-blade-component="button"
                     defaultBackgroundColor="hsla(0, 0%, 100%, 0)"
                     defaultBorderColor="hsla(227, 100%, 59%, 1)"
-                    focusBackgroundColor="hsla(227, 100%, 59%, 0.18)"
+                    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
                     focusBorderColor="hsla(227, 100%, 59%, 1)"
-                    focusRingColor="hsla(227, 100%, 59%, 0.18)"
+                    focusRingColor="hsla(227, 100%, 59%, 0.09)"
                     focusable={true}
-                    hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)"
+                    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
                     hoverBorderColor="hsla(227, 100%, 59%, 1)"
                     isFullWidth={true}
                     isLoading={false}
@@ -361,7 +361,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                         style={
                           [
                             {
-                              "color": "hsla(227, 71%, 51%, 1)",
+                              "color": "hsla(227, 100%, 59%, 1)",
                               "fontFamily": "Inter",
                               "fontSize": 14,
                               "fontStyle": "normal",
@@ -1308,11 +1308,11 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                     data-blade-component="button"
                     defaultBackgroundColor="hsla(0, 0%, 100%, 0)"
                     defaultBorderColor="hsla(227, 100%, 59%, 1)"
-                    focusBackgroundColor="hsla(227, 100%, 59%, 0.18)"
+                    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
                     focusBorderColor="hsla(227, 100%, 59%, 1)"
-                    focusRingColor="hsla(227, 100%, 59%, 0.18)"
+                    focusRingColor="hsla(227, 100%, 59%, 0.09)"
                     focusable={true}
-                    hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)"
+                    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
                     hoverBorderColor="hsla(227, 100%, 59%, 1)"
                     isFullWidth={true}
                     isLoading={false}
@@ -1397,7 +1397,7 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                         style={
                           [
                             {
-                              "color": "hsla(227, 71%, 51%, 1)",
+                              "color": "hsla(227, 100%, 59%, 1)",
                               "fontFamily": "Inter",
                               "fontSize": 14,
                               "fontStyle": "normal",

diff --git a/...es/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap b/...es/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BottomSheet /> should render a BottomSheet ssr 1`] = `"<div id="root"><div data-testid="bottomsheet-backdrop" opacity="1" data-blade-component="base-box" class="BaseBox-bmPWx BottomSheetBackdropweb__StyledBottomSheetBackdrop-sc-198k9f6-0 jkMvvn iDnIUr"></div><div data-blade-component="bottom-sheet" data-testid="bottomsheet-surface" aria-modal="true" role="dialog" style="opacity:1;pointer-events:all;height:0;bottom:0;top:auto;z-index:101" class="BottomSheetweb__BottomSheetSurface-qlloie-0 blXGyU"><div data-blade-component="base-box" class="BaseBox-bmPWx gWSczs"><div data-blade-component="BottomSheetGrabHandle" class="BottomSheetGrabHandleweb__BottomSheetGrabHandle-mo12ak-0 iHfLFm"></div><div data-blade-component="bottom-sheet-header" class="BaseBox-bmPWx bONxzW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">Address Details</p><div data-blade-component="base-box" class="BaseBox-bmPWx jOqpMP"><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div data-blade-component="counter" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 igYNjO iHlsLG"><div data-blade-component="base-box" class="BaseBox-bmPWx iUxudu"><p class="StyledBaseText-dVBfTO dhHIoL" data-blade-component="text">2</p></div></div></div></div></div></div><p class="StyledBaseText-dVBfTO bcGqUR" data-blade-component="text">Saving addresses will improve your checkout experience</p></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><button type="button" aria-label="Close" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 jjvxDl"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div><div data-blade-component="bottom-sheet-body" data-testid="bottomsheet-body" style="-webkit-tap-highlight-color:revert;-webkit-touch-callout:revert;-webkit-user-select:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;user-select:auto;overflow:auto;touch-action:none" class="BaseBox-bmPWx eaEeoi"><div data-blade-component="base-box" class="BaseBox-bmPWx iaqkon"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">BottomSheet body</p></div></div><div data-blade-component="bottom-sheet-footer" class="BaseBox-bmPWx hZLBAO"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="base-box" class="BaseBox-bmPWx dJEYFx"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 iwPrRC"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO jSJOXK" data-blade-component="base-text">Remove address</div></div></button></div></div></div></div></div>"`;
+exports[`<BottomSheet /> should render a BottomSheet ssr 1`] = `"<div id="root"><div data-testid="bottomsheet-backdrop" opacity="1" data-blade-component="base-box" class="BaseBox-bmPWx BottomSheetBackdropweb__StyledBottomSheetBackdrop-sc-198k9f6-0 jkMvvn iDnIUr"></div><div data-blade-component="bottom-sheet" data-testid="bottomsheet-surface" aria-modal="true" role="dialog" style="opacity:1;pointer-events:all;height:0;bottom:0;top:auto;z-index:101" class="BottomSheetweb__BottomSheetSurface-qlloie-0 blXGyU"><div data-blade-component="base-box" class="BaseBox-bmPWx gWSczs"><div data-blade-component="BottomSheetGrabHandle" class="BottomSheetGrabHandleweb__BottomSheetGrabHandle-mo12ak-0 iHfLFm"></div><div data-blade-component="bottom-sheet-header" class="BaseBox-bmPWx bONxzW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">Address Details</p><div data-blade-component="base-box" class="BaseBox-bmPWx jOqpMP"><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div data-blade-component="counter" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 igYNjO iHlsLG"><div data-blade-component="base-box" class="BaseBox-bmPWx iUxudu"><p class="StyledBaseText-dVBfTO dhHIoL" data-blade-component="text">2</p></div></div></div></div></div></div><p class="StyledBaseText-dVBfTO bcGqUR" data-blade-component="text">Saving addresses will improve your checkout experience</p></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><button type="button" aria-label="Close" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 jlRABJ"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div><div data-blade-component="bottom-sheet-body" data-testid="bottomsheet-body" style="-webkit-tap-highlight-color:revert;-webkit-touch-callout:revert;-webkit-user-select:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;user-select:auto;overflow:auto;touch-action:none" class="BaseBox-bmPWx eaEeoi"><div data-blade-component="base-box" class="BaseBox-bmPWx iaqkon"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">BottomSheet body</p></div></div><div data-blade-component="bottom-sheet-footer" class="BaseBox-bmPWx hZLBAO"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="base-box" class="BaseBox-bmPWx dJEYFx"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 fQAjze"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO dtZpXd" data-blade-component="base-text">Remove address</div></div></button></div></div></div></div></div>"`;
 
 exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 .c3.c3.c3.c3.c3 {
@@ -248,7 +248,7 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 
 .c24.c24.c24.c24.c24:focus-visible {
   outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
   color: hsla(211,26%,34%,1);
 }
 
@@ -341,7 +341,7 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 }
 
 .c35.c35.c35.c35.c35 {
-  color: hsla(227,71%,51%,1);
+  color: hsla(227,100%,59%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 500;
@@ -529,20 +529,20 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 }
 
 .c32.c32.c32.c32.c32:hover {
-  background-color: hsla(227,100%,59%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
   border-color: hsla(227,100%,59%,1);
 }
 
 .c32.c32.c32.c32.c32:active {
-  background-color: hsla(227,100%,59%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
   border-color: hsla(227,100%,59%,1);
 }
 
 .c32.c32.c32.c32.c32:focus-visible {
-  background-color: hsla(227,100%,59%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
   border-color: hsla(227,100%,59%,1);
   outline: 1px solid hsla(227,100%,59%,0.09);
-  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c32.c32.c32.c32.c32 * {