braid-design-system 33.10.0 → 34.0.0-seperate-codemod-20250618035833

package/CHANGELOG.md

@@ -1,111 +1,18 @@
 # braid-design-system
 
-## 33.10.0
+## 34.0.0-seperate-codemod-20250618035833
 
-### Minor Changes
-
-- **Box, atoms**: Add `sticky` to `position`. ([#1806](https://github.com/seek-oss/braid-design-system/pull/1806))
-
-  **EXAMPLE USAGE:**
-
-  ```jsx
-  <Box position="sticky" top={0} ... />
-  ```
-
-- **Box, atoms**: Deprecate `outline` value `none`, and `boxShadow` value `outlineFocus`. ([#1810](https://github.com/seek-oss/braid-design-system/pull/1810))
-
-  Previously it was recommended to hide an element's `outline` in favour of using `boxShadow="outlineFocus"`.
-
-  Braid now leverages the `outline` property directly, managing focus rings of interactive elements as part of its scoped CSS reset.
-
-  **MIGRATION GUIDE:**
-
-  For styling the focus ring via `Box`:
-
-  1. Remove usage of `outline="none"` and `boxShadow="outlineFocus"`
-  2. Refer to [`focus outlines`] for guidance on leveraging Braid's focus outline styles.
-
-  ```diff
-  - <Box outline="none" className={styles.customFocusStyles} />
-  + <Box />
-  ```
-
-  For styling the focus outline of an element based on the focus of another element, see [`outlineStyle`].
-
-  [`focus outlines`]: https://seek-oss.github.io/braid-design-system/components/Box#focus-outlines
-  [`outlineStyle`]: https://seek-oss.github.io/braid-design-system/css/outlineStyle
-
-- **seekBusiness:** Migrate to updated visual language ([#1819](https://github.com/seek-oss/braid-design-system/pull/1819))
-
-  Migrate `seekBusiness` theme to new visual language.
-  Adopts the `seekJobs` theme for the latest design standards, rather than the legacy `apac` theme, while retaining the `seekBusiness` brand accent colour.
-
-### Patch Changes
-
-- **ButtonIcon**: Ensure the focus outline is styled consistently with other components. ([#1810](https://github.com/seek-oss/braid-design-system/pull/1810))
-
-  Fix issue which caused the Braid focus outline to show along with the native browser focus outline.
-
-- **apac:** Deprecate theme in favour of `seekJobs` theme ([#1820](https://github.com/seek-oss/braid-design-system/pull/1820))
-
-  **MIGRATION GUIDE:**
-
-  ```diff
-  # App.tsx
-  - import apac from 'braid-design-system/themes/apac';
-  + import seekJobs from 'braid-design-system/themes/seekJobs';
-
-  - <BraidProvider theme={apac} ...>
-  + <BraidProvider theme={seekJobs} ...>
-  ```
-
-- Migrate from custom focus ring visibility to native `:focus-visible` behaviour. ([#1810](https://github.com/seek-oss/braid-design-system/pull/1810))
-
-  Previously Braid would change the presentation of focus ring outlines based on the user input, i.e. mouse or keyboard,
-  to prevent showing focus rings on click.
-  With the updated Browser Support Policy, we can now leverage the native `:focus-visible` pseudo class instead.
-
-- **Dialog, Drawer**: Ensure the focus outline is correctly applied to the title. ([#1810](https://github.com/seek-oss/braid-design-system/pull/1810))
-
-  Fix issue where focus outline would not be long enough to wrap the entire title text in certain situations.
-
-## 33.9.1
-
-### Patch Changes
-
-- **ButtonIcon, TooltipRenderer:** Remove unnecessary intermediary element around the tooltip trigger. ([#1814](https://github.com/seek-oss/braid-design-system/pull/1814))
-
-- **BraidTestProvider:** Use stubs instead of mocks to fill missing APIs in jsdom ([#1809](https://github.com/seek-oss/braid-design-system/pull/1809))
-
-  This change allows the BraidTestProvider to be framework agnostic for tests and discourages testing the stubbed browser APIs directly.
-
-## 33.9.0
-
-### Minor Changes
+### Major Changes
 
 - @braid-design-system/codemod has been moved to its own package. ([#1801](https://github.com/seek-oss/braid-design-system/pull/1801))
 
-  **Note: This is technically a breaking change for local migrations, but we expect minimal impact so are releasing this as a minor version change.**
-
-  The `braid-upgrade` command is now no longer part of the `braid-design-system` package. Instead, `braid-upgrade` can be run via the `@braid-design-system/codemod` package.
+  The `braid-upgrade` command is now no longer apart of the core Braid Design System. Instead, `braid-upgrade` can be run via the `@braid-design-system/codemod` package.
 
   #### Example
 
   ```bash
-  pnpm dlx @braid-design-system/codemod v31.11 "**/*.{ts,tsx}"
-  ```
-
-### Patch Changes
-
-- **BraidTestProvider:** Provide `ResizeObserver` & `IntersectionObserver` stubs to jsdom ([#1811](https://github.com/seek-oss/braid-design-system/pull/1811))
-
-  Fixes an issue where rendering certain Braid components within a test environment could throw errors due to missing APIs in jsdom, causing tests to fail with the following error:
-
+  pnpm --package=@braid-design-system/codemod dlx braid-upgrade v31.11 "**/*.{ts,tsx}
   ```
-  ReferenceError: IntersectionObserver is not defined
-  ```
-
-## 33.8.0
 
 ### Minor Changes
 
@@ -146,8 +53,6 @@
 
   Fixes an issue where the close button inside the `Dialog` or `Drawer` was incorrectly inside an `aria-hidden` region.
 
-- **useToast**: Simplify internal logic, refining how the theme is applied to Toasts ([#1797](https://github.com/seek-oss/braid-design-system/pull/1797))
-
 - **Autosuggest**: Ensure suggestions dropdown is visible, even when `Autosuggest` is inside a container with overflow hidden. ([#1738](https://github.com/seek-oss/braid-design-system/pull/1738))
 
 ## 33.7.0

package/dist/css.cjs

@@ -4,7 +4,6 @@ const lib_css_atoms_atoms_cjs = require("./lib/css/atoms/atoms.cjs");
 const lib_css_breakpoints_cjs = require("./lib/css/breakpoints.cjs");
 const lib_css_colorModeStyle_cjs = require("./lib/css/colorModeStyle.cjs");
 const lib_css_globalTypographyStyles_cjs = require("./lib/css/globalTypographyStyles.cjs");
-const lib_css_outlineStyle_cjs = require("./lib/css/outlineStyle.cjs");
 const lib_css_responsiveStyle_cjs = require("./lib/css/responsiveStyle.cjs");
 const lib_themes_vars_css_cjs = require("./lib/themes/vars.css.cjs");
 const {
@@ -49,7 +48,6 @@ exports.breakpoints = lib_css_breakpoints_cjs.breakpoints;
 exports.colorModeStyle = lib_css_colorModeStyle_cjs.colorModeStyle;
 exports.globalHeadingStyle = lib_css_globalTypographyStyles_cjs.globalHeadingStyle;
 exports.globalTextStyle = lib_css_globalTypographyStyles_cjs.globalTextStyle;
-exports.outlineStyle = lib_css_outlineStyle_cjs.outlineStyle;
 exports.responsiveStyle = lib_css_responsiveStyle_cjs.responsiveStyle;
 exports.atoms = atoms;
 exports.vars = vars;

package/dist/css.d.mts

@@ -1 +1 @@
-export { Breakpoint, atoms, breakpoints, colorModeStyle, globalHeadingStyle, globalTextStyle, outlineStyle, responsiveStyle, vars } from './index.js';
+export { Breakpoint, atoms, breakpoints, colorModeStyle, globalHeadingStyle, globalTextStyle, responsiveStyle, vars } from './index.js';

package/dist/css.d.ts

@@ -1 +1 @@
-export { Breakpoint, atoms, breakpoints, colorModeStyle, globalHeadingStyle, globalTextStyle, outlineStyle, responsiveStyle, vars } from './index.js';
+export { Breakpoint, atoms, breakpoints, colorModeStyle, globalHeadingStyle, globalTextStyle, responsiveStyle, vars } from './index.js';

package/dist/css.mjs

@@ -2,7 +2,6 @@ import { atoms as atoms$1 } from "./lib/css/atoms/atoms.mjs";
 import { breakpoints } from "./lib/css/breakpoints.mjs";
 import { colorModeStyle } from "./lib/css/colorModeStyle.mjs";
 import { globalHeadingStyle, globalTextStyle } from "./lib/css/globalTypographyStyles.mjs";
-import { outlineStyle } from "./lib/css/outlineStyle.mjs";
 import { responsiveStyle } from "./lib/css/responsiveStyle.mjs";
 import { vars as vars$1 } from "./lib/themes/vars.css.mjs";
 const {
@@ -49,7 +48,6 @@ export {
   colorModeStyle,
   globalHeadingStyle,
   globalTextStyle,
-  outlineStyle,
   responsiveStyle,
   vars
 };

package/dist/index.d.mts

@@ -976,15 +976,6 @@ declare const responsiveAtomicProperties: {
                 length: 4;
             };
             values: {
-                sticky: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
                 relative: {
                     defaultClass: string;
                     conditions: {
@@ -2194,7 +2185,7 @@ declare const responsiveAtomicProperties: {
 declare const sprinkles: ((props: {
     readonly overflow?: "hidden" | "scroll" | "visible" | "auto" | undefined;
     readonly userSelect?: "none" | undefined;
-    readonly outline?: "none" | "focus" | undefined;
+    readonly outline?: "none" | undefined;
     readonly opacity?: 0 | undefined;
     readonly zIndex?: 0 | 2 | 1 | "dropdownBackdrop" | "dropdown" | "sticky" | "modalBackdrop" | "modal" | "notification" | undefined;
     readonly cursor?: "default" | "pointer" | undefined;
@@ -2216,12 +2207,12 @@ declare const sprinkles: ((props: {
         desktop?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
         wide?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 4 | 3, "none" | "flex" | "block" | "inline" | "inlineBlock" | null>;
-    readonly position?: ("sticky" | "relative" | "absolute" | "fixed" | {
-        mobile?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-        tablet?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-        desktop?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-        wide?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 4 | 3, "sticky" | "relative" | "absolute" | "fixed" | null>;
+    readonly position?: ("relative" | "absolute" | "fixed" | {
+        mobile?: "relative" | "absolute" | "fixed" | undefined;
+        tablet?: "relative" | "absolute" | "fixed" | undefined;
+        desktop?: "relative" | "absolute" | "fixed" | undefined;
+        wide?: "relative" | "absolute" | "fixed" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 4 | 3, "relative" | "absolute" | "fixed" | null>;
     readonly borderRadius?: ("small" | "large" | "xlarge" | "standard" | "none" | "full" | {
         mobile?: "small" | "large" | "xlarge" | "standard" | "none" | "full" | undefined;
         tablet?: "small" | "large" | "xlarge" | "standard" | "none" | "full" | undefined;
@@ -4384,16 +4375,6 @@ interface GlobalHeadingProps {
 }
 declare const globalHeadingStyle: ({ weight, level, }: GlobalHeadingProps) => StyleRule;
 
-declare const outlineStyle: (selector: string) => {
-    outline: string;
-    transition: string;
-    selectors: {
-        [x: string]: {
-            outlineColor: `var(--${string})`;
-        };
-    };
-};
-
 type CSSProps = Omit<StyleRule, '@media' | '@supports'>;
 interface ResponsiveStyle {
     mobile?: CSSProps;
@@ -4532,11 +4513,6 @@ declare const vars: {
 };
 declare function atoms(props: Omit<Atoms, 'background'>): string;
 
-/**
- * @deprecated the `apac` theme is deprecated and will be removed in a future release.
- *
- * Use the `seekJobs` theme instead.
- */
 declare const _default$6: {
     vanillaTheme: string;
     name: string;
@@ -5350,5 +5326,5 @@ declare const _default: {
     code: string;
 }[];
 
-export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, PublicBox as Box, Box as Box$1, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Spread$1 as Spread, Spread as Spread$1, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer, _default$1 as _default, _default as _default$1, _default$6 as _default$2, _default$2 as _default$3, _default$4, _default$5, _default$3 as _default$6, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent, outlineStyle, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
+export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, PublicBox as Box, Box as Box$1, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Spread$1 as Spread, Spread as Spread$1, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer, _default$1 as _default, _default as _default$1, _default$6 as _default$2, _default$2 as _default$3, _default$4, _default$5, _default$3 as _default$6, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
 export type { Breakpoint, LinkComponent };

package/dist/index.d.ts

@@ -976,15 +976,6 @@ declare const responsiveAtomicProperties: {
                 length: 4;
             };
             values: {
-                sticky: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
                 relative: {
                     defaultClass: string;
                     conditions: {
@@ -2194,7 +2185,7 @@ declare const responsiveAtomicProperties: {
 declare const sprinkles: ((props: {
     readonly overflow?: "hidden" | "scroll" | "visible" | "auto" | undefined;
     readonly userSelect?: "none" | undefined;
-    readonly outline?: "none" | "focus" | undefined;
+    readonly outline?: "none" | undefined;
     readonly opacity?: 0 | undefined;
     readonly zIndex?: 0 | 2 | 1 | "dropdownBackdrop" | "dropdown" | "sticky" | "modalBackdrop" | "modal" | "notification" | undefined;
     readonly cursor?: "default" | "pointer" | undefined;
@@ -2216,12 +2207,12 @@ declare const sprinkles: ((props: {
         desktop?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
         wide?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 4 | 3, "none" | "flex" | "block" | "inline" | "inlineBlock" | null>;
-    readonly position?: ("sticky" | "relative" | "absolute" | "fixed" | {
-        mobile?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-        tablet?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-        desktop?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-        wide?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 4 | 3, "sticky" | "relative" | "absolute" | "fixed" | null>;
+    readonly position?: ("relative" | "absolute" | "fixed" | {
+        mobile?: "relative" | "absolute" | "fixed" | undefined;
+        tablet?: "relative" | "absolute" | "fixed" | undefined;
+        desktop?: "relative" | "absolute" | "fixed" | undefined;
+        wide?: "relative" | "absolute" | "fixed" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 4 | 3, "relative" | "absolute" | "fixed" | null>;
     readonly borderRadius?: ("small" | "large" | "xlarge" | "standard" | "none" | "full" | {
         mobile?: "small" | "large" | "xlarge" | "standard" | "none" | "full" | undefined;
         tablet?: "small" | "large" | "xlarge" | "standard" | "none" | "full" | undefined;
@@ -4384,16 +4375,6 @@ interface GlobalHeadingProps {
 }
 declare const globalHeadingStyle: ({ weight, level, }: GlobalHeadingProps) => StyleRule;
 
-declare const outlineStyle: (selector: string) => {
-    outline: string;
-    transition: string;
-    selectors: {
-        [x: string]: {
-            outlineColor: `var(--${string})`;
-        };
-    };
-};
-
 type CSSProps = Omit<StyleRule, '@media' | '@supports'>;
 interface ResponsiveStyle {
     mobile?: CSSProps;
@@ -4532,11 +4513,6 @@ declare const vars: {
 };
 declare function atoms(props: Omit<Atoms, 'background'>): string;
 
-/**
- * @deprecated the `apac` theme is deprecated and will be removed in a future release.
- *
- * Use the `seekJobs` theme instead.
- */
 declare const _default$6: {
     vanillaTheme: string;
     name: string;
@@ -5350,5 +5326,5 @@ declare const _default: {
     code: string;
 }[];
 
-export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, PublicBox as Box, Box as Box$1, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Spread$1 as Spread, Spread as Spread$1, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer, _default$1 as _default, _default as _default$1, _default$6 as _default$2, _default$2 as _default$3, _default$4, _default$5, _default$3 as _default$6, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent, outlineStyle, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
+export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, PublicBox as Box, Box as Box$1, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Spread$1 as Spread, Spread as Spread$1, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer, _default$1 as _default, _default as _default$1, _default$6 as _default$2, _default$2 as _default$3, _default$4, _default$5, _default$3 as _default$6, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
 export type { Breakpoint, LinkComponent };

package/dist/lib/color/palette.cjs

@@ -18,7 +18,8 @@ const palette = {
   },
   seekBlue: {
     700: "#051A49",
-    500: "#0D3880"
+    500: "#0D3880",
+    300: "#7795C2"
   },
   seekBlueLight: {
     700: "#1E47A9",

package/dist/lib/color/palette.mjs

@@ -17,7 +17,8 @@ const palette = {
   },
   seekBlue: {
     700: "#051A49",
-    500: "#0D3880"
+    500: "#0D3880",
+    300: "#7795C2"
   },
   seekBlueLight: {
     700: "#1E47A9",

package/dist/lib/components/Accordion/AccordionItem.cjs

@@ -7,12 +7,14 @@ const lib_components_Disclosure_useDisclosure_cjs = require("../Disclosure/useDi
 const lib_components_Spread_Spread_cjs = require("../Spread/Spread.cjs");
 const lib_components_Stack_Stack_cjs = require("../Stack/Stack.cjs");
 const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
+const lib_components_private_Overlay_Overlay_cjs = require("../private/Overlay/Overlay.cjs");
 const lib_components_private_badgeSlotSpace_cjs = require("../private/badgeSlotSpace.cjs");
 const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
 const lib_components_Accordion_Accordion_cjs = require("./Accordion.cjs");
 const lib_components_Accordion_AccordionContext_cjs = require("./AccordionContext.cjs");
 const lib_components_Accordion_AccordionItem_css_cjs = require("./AccordionItem.css.cjs");
 const lib_components_icons_IconChevron_IconChevron_cjs = require("../icons/IconChevron/IconChevron.cjs");
+const lib_components_private_hideFocusRings_hideFocusRings_css_cjs = require("../private/hideFocusRings/hideFocusRings.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
 const itemSpaceForSize = {
@@ -84,33 +86,45 @@ const AccordionItem = ({
     lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Stack_Stack_cjs.Stack, { space: itemSpace, data, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { position: "relative", display: "flex", children: /* @__PURE__ */ jsxRuntime.jsx(
-      lib_components_Box_Box_cjs.Box,
-      {
-        component: "button",
-        type: "button",
-        cursor: "pointer",
-        className: [lib_components_Accordion_AccordionItem_css_cjs.button, lib_components_Accordion_AccordionItem_css_cjs.focusRing],
-        width: "full",
-        textAlign: "left",
-        ...buttonProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", position: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Spread_Spread_cjs.Spread, { component: "span", space: itemSpace, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Text_Text_cjs.Text, { size, weight, tone, icon, children: [
-            badge ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", paddingRight: lib_components_private_badgeSlotSpace_cjs.badgeSlotSpace, children: label }) : label,
-            badge ? react.cloneElement(badge, {}) : null
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            lib_components_Text_Text_cjs.Text,
-            {
-              size,
-              weight,
-              tone: tone === "neutral" ? "secondary" : tone,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconChevron_IconChevron_cjs.IconChevron, { direction: expanded ? "up" : "down" })
-            }
-          )
-        ] }) })
-      }
-    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { position: "relative", display: "flex", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        lib_components_Box_Box_cjs.Box,
+        {
+          component: "button",
+          type: "button",
+          cursor: "pointer",
+          className: lib_components_Accordion_AccordionItem_css_cjs.button,
+          outline: "none",
+          width: "full",
+          textAlign: "left",
+          ...buttonProps,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", position: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Spread_Spread_cjs.Spread, { component: "span", space: itemSpace, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Text_Text_cjs.Text, { size, weight, tone, icon, children: [
+              badge ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", paddingRight: lib_components_private_badgeSlotSpace_cjs.badgeSlotSpace, children: label }) : label,
+              badge ? react.cloneElement(badge, {}) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              lib_components_Text_Text_cjs.Text,
+              {
+                size,
+                weight,
+                tone: tone === "neutral" ? "secondary" : tone,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconChevron_IconChevron_cjs.IconChevron, { direction: expanded ? "up" : "down" })
+              }
+            )
+          ] }) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        lib_components_private_Overlay_Overlay_cjs.Overlay,
+        {
+          boxShadow: "outlineFocus",
+          borderRadius: "standard",
+          transition: "fast",
+          className: [lib_components_Accordion_AccordionItem_css_cjs.focusRing, lib_components_private_hideFocusRings_hideFocusRings_css_cjs.hideFocusRingsClassName]
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { display: expanded ? "block" : "none", ...contentProps, children })
   ] });
 };

package/dist/lib/components/Accordion/AccordionItem.css.cjs

@@ -1,16 +1,22 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
+const cssUtils = require("@vanilla-extract/css-utils");
 const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
 const lib_components_private_touchable_virtualTouchable_css_cjs = require("../private/touchable/virtualTouchable.css.cjs");
 fileScope.setFileScope("src/lib/components/Accordion/AccordionItem.css.ts", "braid-design-system");
 const button = css.style([{}, lib_components_private_touchable_virtualTouchable_css_cjs.virtualTouchable], "button");
-const focusRing = css.style([{
-  outlineOffset: lib_themes_vars_css_cjs.vars.space.xxsmall
-}, lib_css_atoms_atoms_cjs.atoms({
-  borderRadius: "small"
-})], "focusRing");
+const focusRing = css.style({
+  top: cssUtils.calc.negate(lib_themes_vars_css_cjs.vars.space.xsmall),
+  bottom: cssUtils.calc.negate(lib_themes_vars_css_cjs.vars.space.xsmall),
+  left: cssUtils.calc.negate(lib_themes_vars_css_cjs.vars.space.xxsmall),
+  right: cssUtils.calc.negate(lib_themes_vars_css_cjs.vars.space.xxsmall),
+  selectors: {
+    [`${button}:focus ~ &`]: {
+      opacity: 1
+    }
+  }
+}, "focusRing");
 fileScope.endFileScope();
 exports.button = button;
 exports.focusRing = focusRing;

package/dist/lib/components/Accordion/AccordionItem.css.mjs

@@ -1,15 +1,21 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { atoms } from "../../css/atoms/atoms.mjs";
+import { calc } from "@vanilla-extract/css-utils";
 import { vars } from "../../themes/vars.css.mjs";
 import { virtualTouchable } from "../private/touchable/virtualTouchable.css.mjs";
 setFileScope("src/lib/components/Accordion/AccordionItem.css.ts", "braid-design-system");
 const button = style([{}, virtualTouchable], "button");
-const focusRing = style([{
-  outlineOffset: vars.space.xxsmall
-}, atoms({
-  borderRadius: "small"
-})], "focusRing");
+const focusRing = style({
+  top: calc.negate(vars.space.xsmall),
+  bottom: calc.negate(vars.space.xsmall),
+  left: calc.negate(vars.space.xxsmall),
+  right: calc.negate(vars.space.xxsmall),
+  selectors: {
+    [`${button}:focus ~ &`]: {
+      opacity: 1
+    }
+  }
+}, "focusRing");
 endFileScope();
 export {
   button,

package/dist/lib/components/Accordion/AccordionItem.mjs

@@ -6,12 +6,14 @@ import { useDisclosure } from "../Disclosure/useDisclosure.mjs";
 import { Spread } from "../Spread/Spread.mjs";
 import { Stack } from "../Stack/Stack.mjs";
 import { Text } from "../Text/Text.mjs";
+import { Overlay } from "../private/Overlay/Overlay.mjs";
 import { badgeSlotSpace } from "../private/badgeSlotSpace.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
 import { defaultSize } from "./Accordion.mjs";
 import { AccordionContext, validTones } from "./AccordionContext.mjs";
 import { button, focusRing } from "./AccordionItem.css.mjs";
 import { IconChevron } from "../icons/IconChevron/IconChevron.mjs";
+import { hideFocusRingsClassName } from "../private/hideFocusRings/hideFocusRings.css.mjs";
 const itemSpaceForSize = {
   xsmall: "small",
   small: "small",
@@ -81,33 +83,45 @@ const AccordionItem = ({
     buildDataAttributes({ data, validateRestProps: restProps });
   }
   return /* @__PURE__ */ jsxs(Stack, { space: itemSpace, data, children: [
-    /* @__PURE__ */ jsx(Box, { position: "relative", display: "flex", children: /* @__PURE__ */ jsx(
-      Box,
-      {
-        component: "button",
-        type: "button",
-        cursor: "pointer",
-        className: [button, focusRing],
-        width: "full",
-        textAlign: "left",
-        ...buttonProps,
-        children: /* @__PURE__ */ jsx(Box, { component: "span", position: "relative", children: /* @__PURE__ */ jsxs(Spread, { component: "span", space: itemSpace, children: [
-          /* @__PURE__ */ jsxs(Text, { size, weight, tone, icon, children: [
-            badge ? /* @__PURE__ */ jsx(Box, { component: "span", paddingRight: badgeSlotSpace, children: label }) : label,
-            badge ? cloneElement(badge, {}) : null
-          ] }),
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              size,
-              weight,
-              tone: tone === "neutral" ? "secondary" : tone,
-              children: /* @__PURE__ */ jsx(IconChevron, { direction: expanded ? "up" : "down" })
-            }
-          )
-        ] }) })
-      }
-    ) }),
+    /* @__PURE__ */ jsxs(Box, { position: "relative", display: "flex", children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "button",
+          type: "button",
+          cursor: "pointer",
+          className: button,
+          outline: "none",
+          width: "full",
+          textAlign: "left",
+          ...buttonProps,
+          children: /* @__PURE__ */ jsx(Box, { component: "span", position: "relative", children: /* @__PURE__ */ jsxs(Spread, { component: "span", space: itemSpace, children: [
+            /* @__PURE__ */ jsxs(Text, { size, weight, tone, icon, children: [
+              badge ? /* @__PURE__ */ jsx(Box, { component: "span", paddingRight: badgeSlotSpace, children: label }) : label,
+              badge ? cloneElement(badge, {}) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                size,
+                weight,
+                tone: tone === "neutral" ? "secondary" : tone,
+                children: /* @__PURE__ */ jsx(IconChevron, { direction: expanded ? "up" : "down" })
+              }
+            )
+          ] }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Overlay,
+        {
+          boxShadow: "outlineFocus",
+          borderRadius: "standard",
+          transition: "fast",
+          className: [focusRing, hideFocusRingsClassName]
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(Box, { display: expanded ? "block" : "none", ...contentProps, children })
   ] });
 };