braid-design-system 32.4.0 → 32.5.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # braid-design-system
 
+## 32.5.0
+
+### Minor Changes
+
+- Hide field borders in dark containers ([#1294](https://github.com/seek-oss/braid-design-system/pull/1294))
+
+  Reduce visual noise when a form field is displayed in a dark container by hiding the default border.
+  As fields are light on light backgrounds, the border is used to delineate its bounds against the container, which is not relevant in a dark container.
+
+- Add `seekJobs` theme ([#1281](https://github.com/seek-oss/braid-design-system/pull/1281))
+
+  The `seekJobs` theme encapsulates the system changes necessary to apply and deliver the updated visual design language for SEEK Jobs.
+  Through the development of this theme, we have been able improve the fidelity of the various scales in our tokens, while also ensuring that the tokens themselves are consumed and applied more consistently throughout the system itself.
+
+  **EXAMPLE USAGE:**
+
+  ```tsx
+  import seekJobs from 'braid-design-system/themes/seekJobs';
+
+  <BraidProvider theme={seekJobs}>...</BraidProvider>;
+  ```
+
+  **MIGRATION**
+
+  Consumers of the `apac` theme are not recommended to migrate independently. The `seekJobs` theme represents an uplifted visual identity that is part of a wider visual uplift.
+  Instead, we’ll be guiding the initial teams through a staged migration in coordination with the centralised team process.
+  There are some differences in how certain concepts are applied, whether it's the space scale, or `Card` usage, etc., and we will be documenting these in due course.
+
+  If you would like to talk about migrating, please reach out to us in our **#braid-support** channel on slack.
+
+## 32.4.1
+
+### Patch Changes
+
+- **Text, Heading:** Only show truncate deprecation message when true ([#1289](https://github.com/seek-oss/braid-design-system/pull/1289))
+
+  Only show the truncate deprecation message when `truncate` is provided and set to `true`
+
+- **TextLink, TextLinkButton:** Improve underline position for wrapping text ([#1290](https://github.com/seek-oss/braid-design-system/pull/1290))
+
+  Refine the underline position to be consistent across the whole typographic hierarchy, ensuring it does not interfere with wrapping lines of text.
+
 ## 32.4.0
 
 ### Minor Changes

package/dist/ToastContext.chunk.cjs

@@ -675,7 +675,7 @@ const Typography = ({
   const lines = truncate ? 1 : maxLines;
   const contents = typeof lines === "number" ? /* @__PURE__ */ jsxRuntime.jsx(MaxLines, { lines, children }) : children;
   if (process.env.NODE_ENV !== "production") {
-    if (typeof truncate !== "undefined") {
+    if (truncate) {
       console.warn(
         dedent__default.default`
           The "truncate" prop has been deprecated and will be removed in a future version. Use "maxLines" instead.
@@ -1491,10 +1491,12 @@ const ButtonText = ({
 }) => {
   const lightness = useBackgroundLightness();
   const actionsContext = React.useContext(ActionsContext);
+  const isLegacyTheme = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy;
   const size = sizeProp ?? (actionsContext == null ? void 0 : actionsContext.size) ?? "standard";
   const stylesForVariant = variants[variant][tone ?? "default"];
   const shouldReducePaddingX = size === "small" || variant === "transparent";
-  const labelPaddingX = shouldReducePaddingX ? transparentPaddingX : "medium";
+  const labelPaddingXForTheme = isLegacyTheme ? "medium" : "gutter";
+  const labelPaddingX = shouldReducePaddingX ? transparentPaddingX : labelPaddingXForTheme;
   assert__default.default(
     !icon || icon.props.size === void 0 && icon.props.tone === void 0,
     "Icons cannot set the 'size' or 'tone' prop when passed to a Button component"

package/dist/ToastContext.chunk.mjs

@@ -668,7 +668,7 @@ const Typography = ({
   const lines = truncate ? 1 : maxLines;
   const contents = typeof lines === "number" ? /* @__PURE__ */ jsx(MaxLines, { lines, children }) : children;
   if (process.env.NODE_ENV !== "production") {
-    if (typeof truncate !== "undefined") {
+    if (truncate) {
       console.warn(
         dedent`
           The "truncate" prop has been deprecated and will be removed in a future version. Use "maxLines" instead.
@@ -1484,10 +1484,12 @@ const ButtonText = ({
 }) => {
   const lightness = useBackgroundLightness();
   const actionsContext = useContext(ActionsContext);
+  const isLegacyTheme = useBraidTheme().legacy;
   const size2 = sizeProp ?? (actionsContext == null ? void 0 : actionsContext.size) ?? "standard";
   const stylesForVariant = variants[variant][tone2 ?? "default"];
   const shouldReducePaddingX = size2 === "small" || variant === "transparent";
-  const labelPaddingX = shouldReducePaddingX ? transparentPaddingX : "medium";
+  const labelPaddingXForTheme = isLegacyTheme ? "medium" : "gutter";
+  const labelPaddingX = shouldReducePaddingX ? transparentPaddingX : labelPaddingXForTheme;
   assert(
     !icon || icon.props.size === void 0 && icon.props.tone === void 0,
     "Icons cannot set the 'size' or 'tone' prop when passed to a Button component"

package/dist/Toggle.chunk.cjs

@@ -2263,6 +2263,7 @@ const Alert = ({
   onClose,
   ...restProps
 }) => {
+  const isLegacyTheme = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy;
   const parentBackground = ToastContext.useBackground();
   const Icon = icons$1[tone];
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2338,7 +2339,7 @@ const Alert = ({
             }
           ) }) : null
         ] }),
-        parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsxRuntime.jsx(
+        isLegacyTheme && parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsxRuntime.jsx(
           ToastContext.Overlay,
           {
             borderRadius: borderRadius$3,
@@ -2543,12 +2544,16 @@ const Field = ({
   const hasValue = typeof value === "string" ? value.length > 0 : value != null;
   const hasVisualLabelOrDescription = "label" in restProps || description;
   const showSecondaryIcon = alwaysShowSecondaryIcon || secondaryIcon && hasValue;
+  const { lightMode } = ToastContext.useBackgroundLightness();
   const overlays = /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       ToastContext.FieldOverlay,
       {
         variant: disabled ? "disabled" : "default",
-        visible: tone !== "critical" || disabled
+        visible: tone !== "critical" || disabled,
+        className: {
+          [styles_lib_components_private_Field_Field_css_cjs.hideBorderOnDarkBackgroundInLightMode]: lightMode === "dark"
+        }
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -3803,6 +3808,7 @@ const Card = ({
     validCardComponents.includes(component),
     `Invalid Card component: '${component}'. Should be one of [${validCardComponents.map((c) => `'${c}'`).join(", ")}]`
   );
+  const isLegacyTheme = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy;
   let resolvedRounding;
   if ("rounded" in restProps) {
     resolvedRounding = borderRadius$2;
@@ -3815,6 +3821,7 @@ const Card = ({
       roundedOnWide ? borderRadius$2 : "none"
     ]);
   }
+  const roundingForTheme = !isLegacyTheme ? borderRadius$2 : resolvedRounding;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ToastContext.Box,
     {
@@ -3822,11 +3829,12 @@ const Card = ({
       position: "relative",
       background: "surface",
       padding: "gutter",
-      borderRadius: resolvedRounding,
+      borderRadius: roundingForTheme,
+      boxShadow: !isLegacyTheme ? "borderNeutralLight" : void 0,
       height: height === "full" ? height : void 0,
       ...ToastContext.buildDataAttributes({ data, validateRestProps: restProps }),
       children: [
-        tone ? /* @__PURE__ */ jsxRuntime.jsx(Keyline, { tone, borderRadius: resolvedRounding }) : null,
+        tone ? /* @__PURE__ */ jsxRuntime.jsx(Keyline, { tone, borderRadius: roundingForTheme }) : null,
         children
       ]
     }
@@ -3927,6 +3935,7 @@ const StyledInput = React.forwardRef(
         indeterminateRef.current = isMixed;
       }
     }, [ref, isMixed, isCheckbox]);
+    const { lightMode } = ToastContext.useBackgroundLightness();
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         ToastContext.Box,
@@ -3979,7 +3988,10 @@ const StyledInput = React.forwardRef(
               {
                 variant: disabled ? "disabled" : defaultBorder,
                 borderRadius: fieldBorderRadius,
-                visible: tone !== "critical" || disabled
+                visible: tone !== "critical" || disabled,
+                className: {
+                  [styles_lib_components_private_InlineField_InlineField_css_cjs.hideBorderOnDarkBackgroundInLightMode]: lightMode === "dark"
+                }
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -5931,6 +5943,7 @@ const PageNav = ({
 const tabletButtonSpacing = "xxsmall";
 const Page = ({ number, current }) => {
   const parentBackground = ToastContext.useBackground();
+  const isLegacyTheme = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ToastContext.Box,
     {
@@ -5960,8 +5973,8 @@ const Page = ({ number, current }) => {
             borderRadius,
             boxShadow: "borderFormAccent",
             className: {
-              [styles_lib_components_Pagination_Pagination_css_cjs.lightModeCurrentKeyline]: parentBackground.lightMode !== "surface" && current,
-              [styles_lib_components_Pagination_Pagination_css_cjs.darkModeCurrentKeyline]: parentBackground.darkMode !== "surface" && current
+              [styles_lib_components_Pagination_Pagination_css_cjs.lightModeCurrentKeyline]: isLegacyTheme && parentBackground.lightMode !== "surface" && current,
+              [styles_lib_components_Pagination_Pagination_css_cjs.darkModeCurrentKeyline]: current
             }
           }
         ),
@@ -8037,7 +8050,6 @@ const Toggle = React.forwardRef(
                   {
                     position: "absolute",
                     background: "surface",
-                    boxShadow: on ? "borderFormAccent" : "borderField",
                     transition: "fast",
                     display: "flex",
                     alignItems: "center",
@@ -8045,6 +8057,17 @@ const Toggle = React.forwardRef(
                     borderRadius: "full",
                     className: styles_lib_components_Toggle_Toggle_css_cjs.slider[size],
                     children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        ToastContext.FieldOverlay,
+                        {
+                          variant: on ? "formAccent" : "default",
+                          borderRadius: "full",
+                          visible: true,
+                          className: {
+                            [styles_lib_components_Toggle_Toggle_css_cjs.hideBorderOnDarkBackgroundInLightMode]: lightness.lightMode === "dark"
+                          }
+                        }
+                      ),
                       /* @__PURE__ */ jsxRuntime.jsx(ToastContext.FieldOverlay, { className: styles_lib_components_Toggle_Toggle_css_cjs.icon, children: /* @__PURE__ */ jsxRuntime.jsx(IconTick, { tone: "formAccent", size: "fill" }) }),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         ToastContext.FieldOverlay,

package/dist/Toggle.chunk.mjs

@@ -1,4 +1,4 @@
-import { useThemeName, useResponsiveValue, Stack, Box, buildDataAttributes, Divider, useIcon, virtualTouchable, Columns, Column, Inline, Text, Overlay, ActionsContext, useBackground, iconContainerSize, IconClear, IconPositive, IconCritical, TextContext, HeadingContext, textStyles, FieldOverlay, ButtonIcon, Bleed, useColoredBoxClasses, BackgroundProvider, ButtonContainer, useButtonStyles, ButtonOverlays, ButtonText, useBackgroundLightness, resolveResponsiveRangeProps, optimizeResponsiveArray, Typography, BraidPortal, TextLinkButton, AvoidWidowIcon, useDefaultTextProps, flattenChildren, DefaultTextPropsProvider, iconSize, Hidden, useSpace, negativeMargin, resolveResponsiveProp } from "./ToastContext.chunk.mjs";
+import { useThemeName, useResponsiveValue, Stack, Box, buildDataAttributes, Divider, useIcon, virtualTouchable, Columns, Column, Inline, Text, Overlay, ActionsContext, useBackground, iconContainerSize, IconClear, IconPositive, IconCritical, TextContext, HeadingContext, useBackgroundLightness, textStyles, FieldOverlay, ButtonIcon, Bleed, useColoredBoxClasses, BackgroundProvider, ButtonContainer, useButtonStyles, ButtonOverlays, ButtonText, resolveResponsiveRangeProps, optimizeResponsiveArray, Typography, BraidPortal, TextLinkButton, AvoidWidowIcon, useDefaultTextProps, flattenChildren, DefaultTextPropsProvider, iconSize, Hidden, useSpace, negativeMargin, resolveResponsiveProp } from "./ToastContext.chunk.mjs";
 import { useBraidTheme, useLinkComponent } from "./side-effects/lib/components/BraidProvider/BraidProvider.mjs";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import assert from "assert";
@@ -35,7 +35,7 @@ import { isMobile } from "is-mobile";
 import { field as field$1 } from "./styles/lib/components/Dropdown/Dropdown.css.mjs";
 import { nativeInput } from "./styles/lib/components/MonthPicker/MonthPicker.css.mjs";
 import { hover, background, current, lightModeCurrentKeyline, darkModeCurrentKeyline } from "./styles/lib/components/Pagination/Pagination.css.mjs";
-import { realField, sizeVars, isMixed, fakeField, selected, focusOverlay as focusOverlay$1, hoverOverlay as hoverOverlay$1, checkboxIndicator, radioIndicator, labelOffset, children } from "./styles/lib/components/private/InlineField/InlineField.css.mjs";
+import { realField, sizeVars, isMixed, fakeField, hideBorderOnDarkBackgroundInLightMode as hideBorderOnDarkBackgroundInLightMode$1, selected, focusOverlay as focusOverlay$1, hoverOverlay as hoverOverlay$1, checkboxIndicator, radioIndicator, labelOffset, children } from "./styles/lib/components/private/InlineField/InlineField.css.mjs";
 import { starSpacing, textSpacing, lightModeStarColor, darkModeStarColor } from "./styles/lib/components/Rating/Rating.css.mjs";
 import { step, tone as tone$2, progressTrack, progressTrackCentered, progressLine, progressUnfilled, indicatorContainer, focusOverlay as focusOverlay$2, indicator, highlight, complete, active, inner, tick, stretch, stretchLastAboveTablet } from "./styles/lib/components/Stepper/Stepper.css.mjs";
 import { tab, cropToIconX, hoveredTab, tabFocusRing, scroll as scroll$1, nowrap, mask, marginAuto, divider, tabUnderline, tabUnderlineActiveDarkMode, underlineLeft, underlineWidth, tabPanel, tabPanelFocusRing } from "./styles/lib/components/Tabs/Tabs.css.mjs";
@@ -45,9 +45,9 @@ import { root as root$4, caution, critical } from "./styles/lib/components/Texta
 import { highlights, field as field$2 } from "./styles/lib/components/Textarea/Textarea.css.mjs";
 import { select, focusOverlay as focusOverlay$3 } from "./styles/lib/components/TextDropdown/TextDropdown.css.mjs";
 import { root as root$1, up, left, right } from "./styles/lib/components/icons/IconChevron/IconChevron.css.mjs";
-import { secondaryIconSpace, field, placeholderColor, iconSpace, verticalDivider, focusOverlay, hoverOverlay } from "./styles/lib/components/private/Field/Field.css.mjs";
+import { secondaryIconSpace, field, placeholderColor, iconSpace, verticalDivider, hideBorderOnDarkBackgroundInLightMode, focusOverlay, hoverOverlay } from "./styles/lib/components/private/Field/Field.css.mjs";
 import { columnsWide, columnsDesktop, columnsTablet, columnsMobile } from "./styles/lib/components/Tiles/Tiles.css.mjs";
-import { root as root$5, realField as realField$1, realFieldPosition, fieldSize, slideContainer, slideContainerSize, slideTrack, slideTrackMask, slideTrackBgLightMode, slideTrackBgDarkMode, slideTrackSelected, slider, icon as icon$1, focusOverlay as focusOverlay$4, hoverOverlay as hoverOverlay$2, label } from "./styles/lib/components/Toggle/Toggle.css.mjs";
+import { root as root$5, realField as realField$1, realFieldPosition, fieldSize, slideContainer, slideContainerSize, slideTrack, slideTrackMask, slideTrackBgLightMode, slideTrackBgDarkMode, slideTrackSelected, slider, hideBorderOnDarkBackgroundInLightMode as hideBorderOnDarkBackgroundInLightMode$2, icon as icon$1, focusOverlay as focusOverlay$4, hoverOverlay as hoverOverlay$2, label } from "./styles/lib/components/Toggle/Toggle.css.mjs";
 const ThemeNameConsumer = ({ children: children2 }) => children2(useThemeName());
 const useColor = () => useBraidTheme().color;
 const useBreakpoint = () => {
@@ -2255,6 +2255,7 @@ const Alert = ({
   onClose,
   ...restProps
 }) => {
+  const isLegacyTheme = useBraidTheme().legacy;
   const parentBackground = useBackground();
   const Icon = icons$1[tone2];
   return /* @__PURE__ */ jsxs(
@@ -2330,7 +2331,7 @@ const Alert = ({
             }
           ) }) : null
         ] }),
-        parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsx(
+        isLegacyTheme && parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsx(
           Overlay,
           {
             borderRadius: borderRadius$3,
@@ -2535,12 +2536,16 @@ const Field = ({
   const hasValue = typeof value === "string" ? value.length > 0 : value != null;
   const hasVisualLabelOrDescription = "label" in restProps || description;
   const showSecondaryIcon = alwaysShowSecondaryIcon || secondaryIcon && hasValue;
+  const { lightMode: lightMode2 } = useBackgroundLightness();
   const overlays = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       FieldOverlay,
       {
         variant: disabled ? "disabled" : "default",
-        visible: tone2 !== "critical" || disabled
+        visible: tone2 !== "critical" || disabled,
+        className: {
+          [hideBorderOnDarkBackgroundInLightMode]: lightMode2 === "dark"
+        }
       }
     ),
     /* @__PURE__ */ jsx(
@@ -3795,6 +3800,7 @@ const Card = ({
     validCardComponents.includes(component),
     `Invalid Card component: '${component}'. Should be one of [${validCardComponents.map((c) => `'${c}'`).join(", ")}]`
   );
+  const isLegacyTheme = useBraidTheme().legacy;
   let resolvedRounding;
   if ("rounded" in restProps) {
     resolvedRounding = borderRadius$2;
@@ -3807,6 +3813,7 @@ const Card = ({
       roundedOnWide ? borderRadius$2 : "none"
     ]);
   }
+  const roundingForTheme = !isLegacyTheme ? borderRadius$2 : resolvedRounding;
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -3814,11 +3821,12 @@ const Card = ({
       position: "relative",
       background: "surface",
       padding: "gutter",
-      borderRadius: resolvedRounding,
+      borderRadius: roundingForTheme,
+      boxShadow: !isLegacyTheme ? "borderNeutralLight" : void 0,
       height: height === "full" ? height : void 0,
       ...buildDataAttributes({ data, validateRestProps: restProps }),
       children: [
-        tone2 ? /* @__PURE__ */ jsx(Keyline, { tone: tone2, borderRadius: resolvedRounding }) : null,
+        tone2 ? /* @__PURE__ */ jsx(Keyline, { tone: tone2, borderRadius: roundingForTheme }) : null,
         children2
       ]
     }
@@ -3919,6 +3927,7 @@ const StyledInput = forwardRef(
         indeterminateRef.current = isMixed$1;
       }
     }, [ref, isMixed$1, isCheckbox]);
+    const { lightMode: lightMode2 } = useBackgroundLightness();
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
         Box,
@@ -3971,7 +3980,10 @@ const StyledInput = forwardRef(
               {
                 variant: disabled ? "disabled" : defaultBorder,
                 borderRadius: fieldBorderRadius,
-                visible: tone2 !== "critical" || disabled
+                visible: tone2 !== "critical" || disabled,
+                className: {
+                  [hideBorderOnDarkBackgroundInLightMode$1]: lightMode2 === "dark"
+                }
               }
             ),
             /* @__PURE__ */ jsx(
@@ -5923,6 +5935,7 @@ const PageNav = ({
 const tabletButtonSpacing = "xxsmall";
 const Page = ({ number, current: current$1 }) => {
   const parentBackground = useBackground();
+  const isLegacyTheme = useBraidTheme().legacy;
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -5952,8 +5965,8 @@ const Page = ({ number, current: current$1 }) => {
             borderRadius,
             boxShadow: "borderFormAccent",
             className: {
-              [lightModeCurrentKeyline]: parentBackground.lightMode !== "surface" && current$1,
-              [darkModeCurrentKeyline]: parentBackground.darkMode !== "surface" && current$1
+              [lightModeCurrentKeyline]: isLegacyTheme && parentBackground.lightMode !== "surface" && current$1,
+              [darkModeCurrentKeyline]: current$1
             }
           }
         ),
@@ -8029,7 +8042,6 @@ const Toggle = forwardRef(
                   {
                     position: "absolute",
                     background: "surface",
-                    boxShadow: on ? "borderFormAccent" : "borderField",
                     transition: "fast",
                     display: "flex",
                     alignItems: "center",
@@ -8037,6 +8049,17 @@ const Toggle = forwardRef(
                     borderRadius: "full",
                     className: slider[size2],
                     children: [
+                      /* @__PURE__ */ jsx(
+                        FieldOverlay,
+                        {
+                          variant: on ? "formAccent" : "default",
+                          borderRadius: "full",
+                          visible: true,
+                          className: {
+                            [hideBorderOnDarkBackgroundInLightMode$2]: lightness.lightMode === "dark"
+                          }
+                        }
+                      ),
                       /* @__PURE__ */ jsx(FieldOverlay, { className: icon$1, children: /* @__PURE__ */ jsx(IconTick, { tone: "formAccent", size: "fill" }) }),
                       /* @__PURE__ */ jsx(
                         FieldOverlay,

package/dist/playroom/components.cjs

@@ -4,6 +4,7 @@ const dedent = require("dedent");
 const jsxRuntime = require("react/jsx-runtime");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../styles/lib/css/atoms/sprinkles.css.cjs");
 require("../styles/lib/themes/apac/apacTheme.css.cjs");
+require("../styles/lib/themes/seekJobs/seekJobs.css.cjs");
 require("../styles/lib/themes/seekBusiness/seekBusinessTheme.css.cjs");
 const styles_lib_themes_wireframe_wireframeTheme_css_cjs = require("../styles/lib/themes/wireframe/wireframeTheme.css.cjs");
 require("../styles/lib/themes/docs/docsTheme.css.cjs");

package/dist/playroom/components.mjs

@@ -2,6 +2,7 @@ import dedent from "dedent";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mapResponsiveValue, sprinkles } from "../styles/lib/css/atoms/sprinkles.css.mjs";
 import "../styles/lib/themes/apac/apacTheme.css.mjs";
+import "../styles/lib/themes/seekJobs/seekJobs.css.mjs";
 import "../styles/lib/themes/seekBusiness/seekBusinessTheme.css.mjs";
 import { wireframe } from "../styles/lib/themes/wireframe/wireframeTheme.css.mjs";
 import "../styles/lib/themes/docs/docsTheme.css.mjs";

package/dist/reset.d.ts

@@ -33,6 +33,14 @@ type FontWeight = 'regular' | 'medium' | 'strong';
 interface BraidTokens {
     name: string;
     displayName: string;
+    /**
+     * The boundary for making updated design decisions without disturbing
+     * existing consumers. Updated decisions can be assessed as part of
+     * migrating between themes.
+     *
+     * This token will be removed when the `apac` theme is retired.
+     */
+    legacy: boolean;
     typography: {
         fontFamily: string;
         webFont: string | null;
@@ -197,6 +205,7 @@ declare const makeBraidTheme: (tokens: BraidTokens) => {
     vanillaTheme: string;
     name: string;
     displayName: string;
+    legacy: boolean;
     background: {
         lightMode: string;
         darkMode: string;
@@ -4222,10 +4231,149 @@ declare const vars: {
 };
 declare function atoms(props: Omit<Atoms, 'background'>): string;
 
+declare const _default$6: {
+    vanillaTheme: string;
+    name: string;
+    displayName: string;
+    legacy: boolean;
+    background: {
+        lightMode: string;
+        darkMode: string;
+    };
+    webFonts: {
+        linkTag: string;
+    }[];
+    space: {
+        grid: number;
+        space: {
+            gutter: number;
+            xxsmall: number;
+            xsmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xlarge: number;
+            xxlarge: number;
+            xxxlarge: number;
+        };
+    };
+    color: {
+        foreground: {
+            brandAccentLight: string;
+            brandAccent: string;
+            cautionLight: string;
+            caution: string;
+            criticalLight: string;
+            critical: string;
+            formAccentLight: string;
+            formAccent: string;
+            infoLight: string;
+            info: string;
+            linkLight: string;
+            link: string;
+            linkHover: string;
+            linkVisited: string;
+            linkLightVisited: string;
+            neutral: string;
+            neutralInverted: string;
+            positiveLight: string;
+            positive: string;
+            promoteLight: string;
+            promote: string;
+            rating: string;
+            secondary: string;
+            secondaryInverted: string;
+        };
+        background: {
+            body: string;
+            bodyDark: string;
+            brand: string;
+            brandAccent: string;
+            brandAccentActive: string;
+            brandAccentHover: string;
+            brandAccentSoft: string;
+            brandAccentSoftActive: string;
+            brandAccentSoftHover: string;
+            caution: string;
+            cautionLight: string;
+            critical: string;
+            criticalActive: string;
+            criticalHover: string;
+            criticalLight: string;
+            criticalSoft: string;
+            criticalSoftActive: string;
+            criticalSoftHover: string;
+            formAccent: string;
+            formAccentActive: string;
+            formAccentHover: string;
+            formAccentSoft: string;
+            formAccentSoftActive: string;
+            formAccentSoftHover: string;
+            info: string;
+            infoLight: string;
+            neutral: string;
+            neutralActive: string;
+            neutralHover: string;
+            neutralLight: string;
+            neutralSoft: string;
+            neutralSoftActive: string;
+            neutralSoftHover: string;
+            positive: string;
+            positiveLight: string;
+            promote: string;
+            promoteLight: string;
+            surface: string;
+            surfaceDark: string;
+        };
+    };
+    backgroundLightness: {
+        body: "light" | "dark";
+        bodyDark: "light" | "dark";
+        brand: "light" | "dark";
+        brandAccent: "light" | "dark";
+        brandAccentActive: "light" | "dark";
+        brandAccentHover: "light" | "dark";
+        brandAccentSoft: "light" | "dark";
+        brandAccentSoftActive: "light" | "dark";
+        brandAccentSoftHover: "light" | "dark";
+        caution: "light" | "dark";
+        cautionLight: "light" | "dark";
+        critical: "light" | "dark";
+        criticalActive: "light" | "dark";
+        criticalHover: "light" | "dark";
+        criticalLight: "light" | "dark";
+        criticalSoft: "light" | "dark";
+        criticalSoftActive: "light" | "dark";
+        criticalSoftHover: "light" | "dark";
+        formAccent: "light" | "dark";
+        formAccentActive: "light" | "dark";
+        formAccentHover: "light" | "dark";
+        formAccentSoft: "light" | "dark";
+        formAccentSoftActive: "light" | "dark";
+        formAccentSoftHover: "light" | "dark";
+        info: "light" | "dark";
+        infoLight: "light" | "dark";
+        neutral: "light" | "dark";
+        neutralActive: "light" | "dark";
+        neutralHover: "light" | "dark";
+        neutralLight: "light" | "dark";
+        neutralSoft: "light" | "dark";
+        neutralSoftActive: "light" | "dark";
+        neutralSoftHover: "light" | "dark";
+        positive: "light" | "dark";
+        positiveLight: "light" | "dark";
+        promote: "light" | "dark";
+        promoteLight: "light" | "dark";
+        surface: "light" | "dark";
+        surfaceDark: "light" | "dark";
+    };
+};
+
 declare const _default$5: {
     vanillaTheme: string;
     name: string;
     displayName: string;
+    legacy: boolean;
     background: {
         lightMode: string;
         darkMode: string;
@@ -4363,6 +4511,7 @@ declare const _default$4: {
     vanillaTheme: string;
     name: string;
     displayName: string;
+    legacy: boolean;
     background: {
         lightMode: string;
         darkMode: string;
@@ -4500,6 +4649,7 @@ declare const _default$3: {
     vanillaTheme: string;
     name: string;
     displayName: string;
+    legacy: boolean;
     background: {
         lightMode: string;
         darkMode: string;
@@ -4637,6 +4787,7 @@ declare const _default$2: {
     vanillaTheme: string;
     name: string;
     displayName: string;
+    legacy: boolean;
     background: {
         lightMode: string;
         darkMode: string;
@@ -4772,9 +4923,10 @@ declare const _default$2: {
 
 declare namespace themes {
   export {
-    _default$5 as apac,
+    _default$6 as apac,
     _default$2 as docs,
     _default$4 as seekBusiness,
+    _default$5 as seekJobs,
     _default$3 as wireframe,
   };
 }
@@ -5094,4 +5246,4 @@ 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, Box, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Breakpoint, 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, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconFilter, IconFlag, IconGrid, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconLanguage, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconRecommended, IconRefresh, IconRenderer, IconResume, IconSearch, IconSecurity, IconSend, IconSent, IconSettings, IconShare, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTwitter, IconSocialYouTube, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, LinkComponent, 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$1 as OverflowMenu, OverflowMenu as OverflowMenu$1, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, PublicBox, Radio$1 as Radio, Radio as Radio$1, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider$1 as TabsProvider, TabsProvider as TabsProvider$1, 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$1 as TooltipRenderer, TooltipRenderer as TooltipRenderer$1, _default$1 as _default, _default as _default$1, _default$5 as _default$2, _default$2 as _default$3, _default$4, _default$3 as _default$5, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent, responsiveStyle, useBreakpoint, 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, Box, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Breakpoint, 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, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconFilter, IconFlag, IconGrid, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconLanguage, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconRecommended, IconRefresh, IconRenderer, IconResume, IconSearch, IconSecurity, IconSend, IconSent, IconSettings, IconShare, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTwitter, IconSocialYouTube, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, LinkComponent, 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$1 as OverflowMenu, OverflowMenu as OverflowMenu$1, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, PublicBox, Radio$1 as Radio, Radio as Radio$1, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider$1 as TabsProvider, TabsProvider as TabsProvider$1, 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$1 as TooltipRenderer, TooltipRenderer as TooltipRenderer$1, _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, useBreakpoint, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };