braid-design-system 33.10.0-deprecate-apac-20250704003714 → 33.10.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # braid-design-system
 
-## 33.10.0-deprecate-apac-20250704003714
+## 33.10.0
 
 ### Minor Changes
 
@@ -12,6 +12,29 @@
   <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.
@@ -19,6 +42,10 @@
 
 ### 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:**
@@ -32,6 +59,16 @@
   + <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

package/dist/css.cjs

@@ -4,6 +4,7 @@ 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 {
@@ -48,6 +49,7 @@ 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, responsiveStyle, vars } from './index.js';
+export { Breakpoint, atoms, breakpoints, colorModeStyle, globalHeadingStyle, globalTextStyle, outlineStyle, responsiveStyle, vars } from './index.js';

package/dist/css.d.ts

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

package/dist/css.mjs

@@ -2,6 +2,7 @@ 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 {
@@ -48,6 +49,7 @@ export {
   colorModeStyle,
   globalHeadingStyle,
   globalTextStyle,
+  outlineStyle,
   responsiveStyle,
   vars
 };

package/dist/index.d.mts

@@ -2194,7 +2194,7 @@ declare const responsiveAtomicProperties: {
 declare const sprinkles: ((props: {
     readonly overflow?: "hidden" | "scroll" | "visible" | "auto" | undefined;
     readonly userSelect?: "none" | undefined;
-    readonly outline?: "none" | undefined;
+    readonly outline?: "none" | "focus" | undefined;
     readonly opacity?: 0 | undefined;
     readonly zIndex?: 0 | 2 | 1 | "dropdownBackdrop" | "dropdown" | "sticky" | "modalBackdrop" | "modal" | "notification" | undefined;
     readonly cursor?: "default" | "pointer" | undefined;
@@ -4384,6 +4384,16 @@ 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;
@@ -5340,5 +5350,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, 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, outlineStyle, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
 export type { Breakpoint, LinkComponent };

package/dist/index.d.ts

@@ -2194,7 +2194,7 @@ declare const responsiveAtomicProperties: {
 declare const sprinkles: ((props: {
     readonly overflow?: "hidden" | "scroll" | "visible" | "auto" | undefined;
     readonly userSelect?: "none" | undefined;
-    readonly outline?: "none" | undefined;
+    readonly outline?: "none" | "focus" | undefined;
     readonly opacity?: 0 | undefined;
     readonly zIndex?: 0 | 2 | 1 | "dropdownBackdrop" | "dropdown" | "sticky" | "modalBackdrop" | "modal" | "notification" | undefined;
     readonly cursor?: "default" | "pointer" | undefined;
@@ -4384,6 +4384,16 @@ 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;
@@ -5340,5 +5350,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, 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, outlineStyle, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
 export type { Breakpoint, LinkComponent };

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

@@ -7,14 +7,12 @@ 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 = {
@@ -86,45 +84,33 @@ 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.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, { 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.jsx(lib_components_Box_Box_cjs.Box, { display: expanded ? "block" : "none", ...contentProps, children })
   ] });
 };

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

@@ -1,22 +1,16 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const cssUtils = require("@vanilla-extract/css-utils");
+const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
 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({
-  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");
+const focusRing = css.style([{
+  outlineOffset: lib_themes_vars_css_cjs.vars.space.xxsmall
+}, lib_css_atoms_atoms_cjs.atoms({
+  borderRadius: "small"
+})], "focusRing");
 fileScope.endFileScope();
 exports.button = button;
 exports.focusRing = focusRing;

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

@@ -1,21 +1,15 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { calc } from "@vanilla-extract/css-utils";
+import { atoms } from "../../css/atoms/atoms.mjs";
 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({
-  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");
+const focusRing = style([{
+  outlineOffset: vars.space.xxsmall
+}, atoms({
+  borderRadius: "small"
+})], "focusRing");
 endFileScope();
 export {
   button,

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

@@ -6,14 +6,12 @@ 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",
@@ -83,45 +81,33 @@ const AccordionItem = ({
     buildDataAttributes({ data, validateRestProps: restProps });
   }
   return /* @__PURE__ */ jsxs(Stack, { space: itemSpace, data, children: [
-    /* @__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, { 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__ */ jsx(Box, { display: expanded ? "block" : "none", ...contentProps, children })
   ] });
 };

package/dist/lib/components/Alert/Alert.cjs

@@ -76,7 +76,6 @@ const Alert = ({
               cursor: "pointer",
               position: "relative",
               onClick: onClose,
-              outline: "none",
               transition: "touchable",
               transform: { active: "touchable" },
               display: "flex",
@@ -84,17 +83,6 @@ const Alert = ({
               justifyContent: "center",
               className: [lib_components_Alert_Alert_css_cjs.closeButton, lib_hooks_useIcon_index_cjs.iconContainerSize()],
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  lib_components_private_Overlay_Overlay_cjs.Overlay,
-                  {
-                    component: "span",
-                    boxShadow: "outlineFocus",
-                    transition: "fast",
-                    onlyVisibleForKeyboardNavigation: true,
-                    borderRadius: "full",
-                    className: lib_components_Alert_Alert_css_cjs.closeButtonFocus
-                  }
-                ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   lib_components_private_Overlay_Overlay_cjs.Overlay,
                   {

package/dist/lib/components/Alert/Alert.css.cjs

@@ -4,13 +4,6 @@ const css = require("@vanilla-extract/css");
 const lib_components_private_touchable_virtualTouchable_css_cjs = require("../private/touchable/virtualTouchable.css.cjs");
 fileScope.setFileScope("src/lib/components/Alert/Alert.css.ts", "braid-design-system");
 const closeButton = css.style([{}, lib_components_private_touchable_virtualTouchable_css_cjs.virtualTouchable], "closeButton");
-const closeButtonFocus = css.style({
-  selectors: {
-    [`${closeButton}:focus &`]: {
-      opacity: 1
-    }
-  }
-}, "closeButtonFocus");
 const closeButtonHover = css.style({
   selectors: {
     [`${closeButton}:focus &, ${closeButton}:hover &`]: {
@@ -20,5 +13,4 @@ const closeButtonHover = css.style({
 }, "closeButtonHover");
 fileScope.endFileScope();
 exports.closeButton = closeButton;
-exports.closeButtonFocus = closeButtonFocus;
 exports.closeButtonHover = closeButtonHover;

package/dist/lib/components/Alert/Alert.css.mjs

@@ -3,13 +3,6 @@ import { style } from "@vanilla-extract/css";
 import { virtualTouchable } from "../private/touchable/virtualTouchable.css.mjs";
 setFileScope("src/lib/components/Alert/Alert.css.ts", "braid-design-system");
 const closeButton = style([{}, virtualTouchable], "closeButton");
-const closeButtonFocus = style({
-  selectors: {
-    [`${closeButton}:focus &`]: {
-      opacity: 1
-    }
-  }
-}, "closeButtonFocus");
 const closeButtonHover = style({
   selectors: {
     [`${closeButton}:focus &, ${closeButton}:hover &`]: {
@@ -20,6 +13,5 @@ const closeButtonHover = style({
 endFileScope();
 export {
   closeButton,
-  closeButtonFocus,
   closeButtonHover
 };

package/dist/lib/components/Alert/Alert.mjs

@@ -7,7 +7,7 @@ import { Column } from "../Column/Column.mjs";
 import { Columns } from "../Columns/Columns.mjs";
 import { Overlay } from "../private/Overlay/Overlay.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
-import { closeButton, closeButtonFocus, closeButtonHover } from "./Alert.css.mjs";
+import { closeButton, closeButtonHover } from "./Alert.css.mjs";
 import { textAlignedToIcon } from "../../css/textAlignedToIcon.css.mjs";
 import { IconCritical } from "../icons/IconCritical/IconCritical.mjs";
 import { IconCaution } from "../icons/IconCaution/IconCaution.mjs";
@@ -75,7 +75,6 @@ const Alert = ({
               cursor: "pointer",
               position: "relative",
               onClick: onClose,
-              outline: "none",
               transition: "touchable",
               transform: { active: "touchable" },
               display: "flex",
@@ -83,17 +82,6 @@ const Alert = ({
               justifyContent: "center",
               className: [closeButton, iconContainerSize()],
               children: [
-                /* @__PURE__ */ jsx(
-                  Overlay,
-                  {
-                    component: "span",
-                    boxShadow: "outlineFocus",
-                    transition: "fast",
-                    onlyVisibleForKeyboardNavigation: true,
-                    borderRadius: "full",
-                    className: closeButtonFocus
-                  }
-                ),
                 /* @__PURE__ */ jsx(
                   Overlay,
                   {

package/dist/lib/components/BraidProvider/BraidProvider.cjs

@@ -5,7 +5,6 @@ const dedent = require("dedent");
 const react = require("react");
 const lib_css_reset_resetTracker_cjs = require("../../css/reset/resetTracker.cjs");
 const lib_components_BraidTestProvider_BraidTestProviderContext_cjs = require("../BraidTestProvider/BraidTestProviderContext.cjs");
-const lib_components_private_hideFocusRings_useHideFocusRings_cjs = require("../private/hideFocusRings/useHideFocusRings.cjs");
 const lib_components_BraidProvider_BraidThemeContext_cjs = require("./BraidThemeContext.cjs");
 const lib_components_BraidProvider_BreakpointContext_cjs = require("./BreakpointContext.cjs");
 const lib_components_BraidProvider_VanillaThemeContainer_cjs = require("./VanillaThemeContainer.cjs");
@@ -45,7 +44,6 @@ const BraidProvider = ({
   const alreadyInBraidProvider = Boolean(react.useContext(lib_components_BraidProvider_BraidThemeContext_cjs.BraidThemeContext));
   const inTestProvider = react.useContext(lib_components_BraidTestProvider_BraidTestProviderContext_cjs.BraidTestProviderContext);
   const linkComponentFromContext = react.useContext(LinkComponentContext);
-  lib_components_private_hideFocusRings_useHideFocusRings_cjs.useHideFocusRings(!(alreadyInBraidProvider || inTestProvider));
   assert__default.default(
     inTestProvider || typeof navigator === "undefined" || navigator.userAgent === void 0 || navigator.userAgent.indexOf("jsdom") === -1,
     `Rendering 'BraidProvider' in Jest is not supported as it expects a browser environment. Please switch to 'BraidTestProvider'. See the docs for more info: https://seek-oss.github.io/braid-design-system/components/BraidTestProvider`

package/dist/lib/components/BraidProvider/BraidProvider.mjs

@@ -4,7 +4,6 @@ import dedent from "dedent";
 import { forwardRef, useContext, createContext } from "react";
 import { ensureResetImported } from "../../css/reset/resetTracker.mjs";
 import { BraidTestProviderContext } from "../BraidTestProvider/BraidTestProviderContext.mjs";
-import { useHideFocusRings } from "../private/hideFocusRings/useHideFocusRings.mjs";
 import { BraidThemeContext } from "./BraidThemeContext.mjs";
 import { BreakpointProvider } from "./BreakpointContext.mjs";
 import { VanillaThemeContainer } from "./VanillaThemeContainer.mjs";
@@ -41,7 +40,6 @@ const BraidProvider = ({
   const alreadyInBraidProvider = Boolean(useContext(BraidThemeContext));
   const inTestProvider = useContext(BraidTestProviderContext);
   const linkComponentFromContext = useContext(LinkComponentContext);
-  useHideFocusRings(!(alreadyInBraidProvider || inTestProvider));
   assert(
     inTestProvider || typeof navigator === "undefined" || navigator.userAgent === void 0 || navigator.userAgent.indexOf("jsdom") === -1,
     `Rendering 'BraidProvider' in Jest is not supported as it expects a browser environment. Please switch to 'BraidTestProvider'. See the docs for more info: https://seek-oss.github.io/braid-design-system/components/BraidTestProvider`

package/dist/lib/components/Button/Button.cjs

@@ -171,7 +171,6 @@ const resolveToneAndVariant = ({
 const ButtonOverlays = ({
   variant: variantProp,
   tone: toneProp,
-  keyboardFocusable = true,
   forceActive = false,
   radius = buttonRadius
 }) => {
@@ -184,15 +183,6 @@ const ButtonOverlays = ({
   const colorContrast = lib_components_Box_BackgroundContext_cjs.useColorContrast();
   const lightness = lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    keyboardFocusable ? /* @__PURE__ */ jsxRuntime.jsx(
-      lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
-      {
-        borderRadius: radius,
-        variant: "focus",
-        onlyVisibleForKeyboardNavigation: true,
-        className: lib_components_Button_Button_css_cjs.focusOverlay
-      }
-    ) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
       {
@@ -342,7 +332,6 @@ const useButtonStyles = ({
       alignItems: "center",
       justifyContent: "center",
       transition: "touchable",
-      outline: "none",
       textAlign: "center",
       userSelect: "none",
       background: stylesForVariant.background && typeof stylesForVariant.background !== "string" ? colorContrast(stylesForVariant.background) : stylesForVariant.background,