@autoguru/overdrive 4.60.0 → 4.62.0

package/dist/components/Alert/Alert.js

@@ -75,7 +75,7 @@ export const Alert = ({
           onClick: onRequestClose,
           children: /*#__PURE__*/_jsx(Icon, {
             className: sprinkles({
-              color: 'tertiaryInactive'
+              color: 'tertiary'
             }),
             icon: XIcon,
             size: "medium"

package/dist/components/Box/useBox/useBox.d.ts

@@ -12,6 +12,7 @@ export declare const useBox: ({ as, className: incomingClassName, odComponent, t
         placeholder?: string | undefined | undefined;
         default?: boolean | undefined | undefined;
         selected?: boolean | undefined | undefined;
+        disabled?: boolean | undefined | undefined;
         min?: number | string | undefined | undefined;
         muted?: boolean | undefined | undefined;
         step?: number | string | undefined | undefined;
@@ -23,7 +24,6 @@ export declare const useBox: ({ as, className: incomingClassName, odComponent, t
         wrap?: string | undefined | undefined;
         open?: boolean | undefined | undefined;
         multiple?: boolean | undefined | undefined;
-        disabled?: boolean | undefined | undefined;
         span?: number | undefined | undefined;
         label?: string | undefined | undefined;
         cite?: string | undefined | undefined;

package/dist/components/Button/Button.d.ts

@@ -6,7 +6,7 @@ declare const LOCALE_TEXT_DEFAULT: {
     readonly loading: "loading";
 };
 type LocaleText = Partial<Record<keyof typeof LOCALE_TEXT_DEFAULT, string>>;
-export interface ButtonProps extends Pick<ButtonPrimitive, 'children' | 'id' | 'onBlur' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave' | 'type' | 'className'>, Pick<AriaAttributes, 'aria-label' | 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>, StyledButtonProps, TestIdProp {
+export interface ButtonProps extends Pick<ButtonPrimitive, 'children' | 'id' | 'onBlur' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave' | 'type' | 'className'>, Pick<AriaAttributes, 'aria-label' | 'aria-controls' | 'aria-describedby' | 'aria-expanded' | 'aria-haspopup'>, StyledButtonProps, TestIdProp {
     /**
      * Disabling the button will prevent it from receiving keyboard focus or click events
      */

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EASb,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EAIhB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,KAAK,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAOhD,QAAA,MAAM,mBAAmB;;CAEf,CAAC;AAEX,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,MAAM,WAAW,WAChB,SAAQ,IAAI,CACV,eAAe,EACb,UAAU,GACV,IAAI,GACJ,QAAQ,GACR,SAAS,GACT,SAAS,GACT,WAAW,GACX,cAAc,GACd,cAAc,GACd,MAAM,GACN,WAAW,CACb,EACD,IAAI,CACH,cAAc,EACd,YAAY,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,CAClE,EACD,iBAAiB,EACjB,UAAU;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACxB;AAcD,eAAO,MAAM,YAAY,GAAI,MAAM,WAAW,CAAC,MAAM,CAAC,uBACnB,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,MAAM,uFAsIlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EASb,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EAIhB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,KAAK,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAOhD,QAAA,MAAM,mBAAmB;;CAEf,CAAC;AAEX,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,MAAM,WAAW,WAChB,SAAQ,IAAI,CACV,eAAe,EACb,UAAU,GACV,IAAI,GACJ,QAAQ,GACR,SAAS,GACT,SAAS,GACT,WAAW,GACX,cAAc,GACd,cAAc,GACd,MAAM,GACN,WAAW,CACb,EACD,IAAI,CACH,cAAc,EACZ,YAAY,GACZ,eAAe,GACf,kBAAkB,GAClB,eAAe,GACf,eAAe,CACjB,EACD,iBAAiB,EACjB,UAAU;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACxB;AAcD,eAAO,MAAM,YAAY,GAAI,MAAM,WAAW,CAAC,MAAM,CAAC,uBACnB,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,MAAM,uFAwIlB,CAAC"}

package/dist/components/Button/Button.js

@@ -78,6 +78,7 @@ export const Button = /*#__PURE__*/forwardRef(({
   onMouseLeave,
   'aria-label': ariaLabel,
   'aria-controls': ariaControls,
+  'aria-describedby': ariaDescribedBy,
   'aria-expanded': ariaExpanded,
   'aria-haspopup': ariaHasPopup
 }, ref) => {
@@ -111,6 +112,7 @@ export const Button = /*#__PURE__*/forwardRef(({
     pointerEvents: functionallyDisabled ? 'none' : undefined,
     'aria-label': isLoading ? language.loading : ariaLabel,
     'aria-controls': ariaControls,
+    'aria-describedby': ariaDescribedBy,
     'aria-expanded': ariaExpanded,
     'aria-haspopup': ariaHasPopup,
     'data-loading': isLoading ? '' : undefined,

package/dist/components/DateInput/DateInput.js

@@ -172,7 +172,7 @@ export const DateInput = withEnhancedInput(({
       gap: '2',
       spaceBetween: true
     }), disabled && sprinkles({
-      color: 'tertiaryInactive'
+      color: 'tertiary'
     })),
     children: [/*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, fieldProps), {}, {
       className: styles.verticalCenterStyle,

package/dist/components/EditableText/EditableText.css.js

@@ -7,7 +7,7 @@ globalLayer(LAYER_ORDER);
 export const root = style({
   '@layer': {
     [cssLayerComponent]: {
-      boxShadow: `inset 0 -1px 0 0 ${vars.color.foreground.tertiaryInactive}`,
+      boxShadow: `inset 0 -1px 0 0 ${vars.color.foreground.tertiary}`,
       transitionDelay: '0s',
       transitionDuration: '0.2s',
       transitionProperty: 'box-shadow',

package/dist/components/StandardModal/StandardModal.js

@@ -112,7 +112,7 @@ export const StandardModal = ({
             onClick: closeButtonHandler,
             children: /*#__PURE__*/_jsx(Icon, {
               className: textStyles({
-                color: 'tertiaryInactive'
+                color: 'tertiary'
               }),
               icon: XIcon,
               size: "medium"

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,14 +1,12 @@
 import React, { type ReactNode } from 'react';
 import type { TestIdProp } from '../../types';
 import { EAlignment } from '../Positioner/alignment';
-import { type ToolTipSize } from './useTooltip/useTooltip';
-export interface TooltipProps extends TestIdProp {
+import { type PositionedTooltipContentProps, type ToolTipSize } from './useTooltip/useTooltip';
+interface TooltipBaseProps extends TestIdProp {
     /** Size of the tooltip text */
     size?: ToolTipSize;
     /** Whether the tooltip is open. When provided, the tooltip becomes controlled */
     isOpen?: boolean;
-    /** Text content displayed in the tooltip */
-    label: string;
     /** Position of the tooltip relative to the trigger element */
     alignment?: EAlignment;
     /** The element(s) that trigger the tooltip on hover or focus */
@@ -18,6 +16,7 @@ export interface TooltipProps extends TestIdProp {
     /** An HTML tag to wrap the tooltip trigger with if children do not contain a keyboard focusable element */
     wrapper?: boolean | keyof React.JSX.IntrinsicElements;
 }
+export type TooltipProps = TooltipBaseProps & PositionedTooltipContentProps;
 /**
  * Renders a tooltip that appears when the user hovers over or focuses on the trigger element.
  *
@@ -29,7 +28,8 @@ export interface TooltipProps extends TestIdProp {
  * - In controlled mode, its visibility is managed externally via the `isOpen` prop.
  */
 export declare const Tooltip: {
-    ({ alignment, isOpen, label, children, size, closeAfter, testId, wrapper, }: TooltipProps): React.JSX.Element;
+    ({ alignment, content, isOpen, label, children, size, closeAfter, testId, wrapper, }: TooltipProps): React.JSX.Element;
     displayName: string;
 };
+export {};
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAIb,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEvE,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC/C,+BAA+B;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,gEAAgE;IAChE,QAAQ,EAAE,SAAS,CAAC;IACpB,6FAA6F;IAC7F,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,2GAA2G;IAC3G,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC;CACtD;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO;iFASjB,YAAY;;CAwDd,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAIb,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAEN,KAAK,6BAA6B,EAClC,KAAK,WAAW,EAChB,MAAM,yBAAyB,CAAC;AAEjC,UAAU,gBAAiB,SAAQ,UAAU;IAC5C,+BAA+B;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,gEAAgE;IAChE,QAAQ,EAAE,SAAS,CAAC;IACpB,6FAA6F;IAC7F,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,2GAA2G;IAC3G,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC;CACtD;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,6BAA6B,CAAC;AAE5E;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO;0FAUjB,YAAY;;CAmEd,CAAC"}

package/dist/components/Tooltip/Tooltip.js

@@ -20,6 +20,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  */
 export const Tooltip = ({
   alignment = EAlignment.RIGHT,
+  content,
   isOpen,
   label,
   children,
@@ -36,11 +37,21 @@ export const Tooltip = ({
     isOpen,
     closeAfter
   });
-
-  // return early if no label provided
-  if (!label) return /*#__PURE__*/_jsx(_Fragment, {
-    children: children
-  });
+  !(label === undefined || content === undefined) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Tooltip accepts either `label` or `content`, not both') : invariant(false) : void 0;
+  let positionedTooltipContent;
+  if (content === undefined) {
+    // Return children unchanged when the text label is empty.
+    if (!label) return /*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    });
+    positionedTooltipContent = {
+      label
+    };
+  } else {
+    positionedTooltipContent = {
+      content
+    };
+  }
 
   // return wrapped output
   if (wrapper) {
@@ -54,24 +65,22 @@ export const Tooltip = ({
         testid: testId
       })), {}, {
         children: children
-      })), /*#__PURE__*/_jsx(PositionedTooltip, {
+      })), /*#__PURE__*/_jsx(PositionedTooltip, _objectSpread(_objectSpread({}, positionedTooltipContent), {}, {
         alignment: alignment,
         className: styles.root,
-        label: label,
         size: size
-      })]
+      }))]
     });
   }
   !(Children.count(children) === 1 && /*#__PURE__*/isValidElement(Children.only(children))) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Tooltips without a wrapper should have a single React element as a child') : invariant(false) : void 0;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/cloneElement(Children.only(children), _objectSpread(_objectSpread({}, triggerProps), {}, {
       ref: triggerRef
-    })), /*#__PURE__*/_jsx(PositionedTooltip, {
+    })), /*#__PURE__*/_jsx(PositionedTooltip, _objectSpread(_objectSpread({}, positionedTooltipContent), {}, {
       alignment: alignment,
       className: styles.root,
-      label: label,
       size: size
-    })]
+    }))]
   });
 };
 Tooltip.displayName = 'Tooltip';

package/dist/components/Tooltip/index.d.ts

@@ -1,3 +1,3 @@
 export { Tooltip, type TooltipProps } from './Tooltip';
-export { useTooltip, type UseTooltipProps, type ToolTipSize, } from './useTooltip/useTooltip';
+export { useTooltip, type PositionedTooltipProps, type UseTooltipProps, type ToolTipSize, } from './useTooltip/useTooltip';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EACN,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,WAAW,GAChB,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EACN,UAAU,EACV,KAAK,sBAAsB,EAC3B,KAAK,eAAe,EACpB,KAAK,WAAW,GAChB,MAAM,yBAAyB,CAAC"}

package/dist/components/Tooltip/useTooltip/useTooltip.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import { EAlignment } from '../../Positioner/alignment';
 export type ToolTipSize = 'medium' | 'large';
 export interface UseTooltipProps {
@@ -15,6 +15,21 @@ export interface UseTooltipProps {
      */
     onOpenChange?: (isOpen: boolean) => void;
 }
+interface PositionedTooltipBaseProps {
+    alignment?: EAlignment;
+    className?: string;
+    size?: ToolTipSize;
+}
+export type PositionedTooltipContentProps = {
+    /** Text rendered with the standard tooltip surface */
+    label: string;
+    content?: never;
+} | {
+    /** Custom tooltip surface and content */
+    content: ReactNode;
+    label?: never;
+};
+export type PositionedTooltipProps = PositionedTooltipBaseProps & PositionedTooltipContentProps;
 /**
  * Hook for managing tooltip state and interactions
  */
@@ -28,11 +43,7 @@ export declare const useTooltip: ({ isOpen: controlledIsOpen, closeAfter, onOpen
         onBlur: () => void;
         'aria-describedby': string | undefined;
     };
-    PositionedTooltip: ({ alignment, className, label, size, }: {
-        alignment?: EAlignment;
-        className?: string;
-        label: string;
-        size?: ToolTipSize;
-    }) => React.JSX.Element;
+    PositionedTooltip: ({ alignment, className, content, label, size, }: PositionedTooltipProps) => React.JSX.Element;
 };
+export {};
 //# sourceMappingURL=useTooltip.d.ts.map

package/dist/components/Tooltip/useTooltip/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../lib/components/Tooltip/useTooltip/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAI/E,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,MAAM,WAAW,eAAe;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAOD;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,yDAIxB,eAAe;;;;;;;;;;gEAmFb;QACF,SAAS,CAAC,EAAE,UAAU,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,WAAW,CAAC;KACnB;CAwCF,CAAC"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../lib/components/Tooltip/useTooltip/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACb,KAAK,SAAS,EAMd,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,MAAM,WAAW,eAAe;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAED,UAAU,0BAA0B;IACnC,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,MAAM,6BAA6B,GACtC;IACA,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC;CACf,GACD;IACA,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACb,CAAC;AAEL,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,GAC9D,6BAA6B,CAAC;AAO/B;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,yDAIxB,eAAe;;;;;;;;;;yEAoFb,sBAAsB;CA+C1B,CAAC"}

package/dist/components/Tooltip/useTooltip/useTooltip.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState, useId } from 'react';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { Box } from "../../Box/Box.js";
 import { Positioner } from "../../Positioner/Positioner.js";
 import { EAlignment } from "../../Positioner/alignment.js";
@@ -82,10 +82,12 @@ export const useTooltip = ({
   const PositionedTooltip = useCallback(({
     alignment = EAlignment.RIGHT,
     className,
+    content,
     label,
     size = 'medium'
   }) => {
     const textSize = sizeMap[size];
+    const hasCustomContent = content !== undefined;
     return /*#__PURE__*/_jsx(Positioner, {
       triggerRef: triggerRef,
       alignment: alignment,
@@ -94,17 +96,17 @@ export const useTooltip = ({
         className: className,
         id: tooltipId,
         ref: tooltipRef,
-        width: "full",
+        width: hasCustomContent ? undefined : 'full',
         pointerEvents: "none",
         userSelect: "none",
-        overflow: "hidden",
-        borderRadius: "1",
-        boxShadow: "4",
-        backgroundColor: "gray900",
-        paddingY: "2",
-        paddingX: "3",
+        overflow: hasCustomContent ? undefined : 'hidden',
+        borderRadius: hasCustomContent ? undefined : '1',
+        boxShadow: hasCustomContent ? undefined : '4',
+        backgroundColor: hasCustomContent ? undefined : 'gray900',
+        paddingY: hasCustomContent ? undefined : '2',
+        paddingX: hasCustomContent ? undefined : '3',
         role: "tooltip",
-        children: /*#__PURE__*/_jsx(Text, {
+        children: hasCustomContent ? content : /*#__PURE__*/_jsx(Text, {
           size: textSize,
           color: "white",
           children: label

package/dist/components/private/InputBase/InputState.css.js

@@ -19,7 +19,7 @@ export const disabled = styleVariants({
 export const natural = {
   default: {
     colour: style({
-      color: vars.color.foreground.tertiaryInactive
+      color: vars.color.foreground.tertiary
     }, "natural_default_colour"),
     borderColour: style({
       borderColor: vars.border.colours.gray

package/dist/components/private/InputBase/NotchedBase.css.js

@@ -157,7 +157,7 @@ export const placeholder = styleVariants({
     color: vars.colours.background.neutral
   },
   mutedLabelStyles: {
-    color: vars.color.foreground.tertiaryInactive
+    color: vars.color.foreground.tertiary
   }
 }, "placeholder");
 const calcPlaceholderTranslate = (notched, prefixed, size) => {

package/dist/components/private/InputBase/withEnhancedInput.css.js

@@ -14,7 +14,7 @@ export const input = {
           cursor: 'not-allowed'
         },
         '&::placeholder': {
-          color: vars.color.foreground.tertiaryInactive,
+          color: vars.color.foreground.tertiary,
           fontSize: vars.typography.size['4'].fontSize,
           lineHeight: vars.typography.size['4'].lineHeight,
           opacity: 1

package/dist/styles/sprinkles.css.d.ts

@@ -26,10 +26,10 @@ export declare const responsiveConditions: {
     };
 };
 export declare const sprinkles: ((props: {
-    borderBottomColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
-    borderLeftColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
-    borderRightColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
-    borderTopColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
+    borderBottomColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
+    borderLeftColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
+    borderRightColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
+    borderTopColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
     borderBottomColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
     borderLeftColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
     borderRightColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
@@ -38,9 +38,9 @@ export declare const sprinkles: ((props: {
     borderBottomStyle?: "none" | "solid" | undefined;
     borderRightStyle?: "none" | "solid" | undefined;
     borderTopStyle?: "none" | "solid" | undefined;
-    color?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "soft" | "success" | "info" | "danger" | "warning" | "normal" | "inverse" | "primary" | "secondary" | "reverse" | "tertiaryInactive" | "tertiaryInactiveLight" | "unset" | "infoText" | "infoForeground" | "successText" | "successForeground" | "warningText" | "warningForeground" | "alertText" | "alertForeground" | undefined;
+    color?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "soft" | "success" | "info" | "danger" | "warning" | "normal" | "inverse" | "placeholder" | "primary" | "secondary" | "reverse" | "tertiary" | "unset" | "infoText" | "infoForeground" | "successText" | "successForeground" | "warningText" | "warningForeground" | "alertText" | "alertForeground" | undefined;
     colour?: "link" | "white" | "body" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | "muted" | "unset" | undefined;
-    backgroundColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "reverse" | "default" | "inactive" | "emphasisInactive" | "transparent" | "infoBackground" | "successBackgroundDark" | "successBackgroundLight" | "warningBackgroundDark" | "warningBackgroundLight" | "alertBackground" | undefined;
+    backgroundColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "reverse" | "default" | "inactive" | "emphasisInactive" | "emphasisLight" | "modal" | "transparent" | "infoBackgroundStrong" | "infoBackgroundSubtle" | "successBackgroundStrong" | "successBackgroundSubtle" | "warningBackgroundStrong" | "warningBackgroundSubtle" | "alertBackgroundStrong" | "alertBackgroundSubtle" | undefined;
     backgroundColour?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information" | "transparent" | "black900" | undefined;
     opacity?: number | "0" | "1" | undefined;
     fontWeight?: "bold" | "medium" | "normal" | "semiBold" | undefined;
@@ -51,11 +51,11 @@ export declare const sprinkles: ((props: {
     pointerEvents?: "none" | "auto" | undefined;
     userSelect?: "none" | "text" | "auto" | undefined;
     useVar?: "gap" | undefined;
-    bg?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "reverse" | "default" | "inactive" | "emphasisInactive" | "transparent" | "infoBackground" | "successBackgroundDark" | "successBackgroundLight" | "warningBackgroundDark" | "warningBackgroundLight" | "alertBackground" | undefined;
-    fg?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "soft" | "success" | "info" | "danger" | "warning" | "normal" | "inverse" | "primary" | "secondary" | "reverse" | "tertiaryInactive" | "tertiaryInactiveLight" | "unset" | "infoText" | "infoForeground" | "successText" | "successForeground" | "warningText" | "warningForeground" | "alertText" | "alertForeground" | undefined;
-    borderColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
-    borderColorX?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
-    borderColorY?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
+    bg?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "reverse" | "default" | "inactive" | "emphasisInactive" | "emphasisLight" | "modal" | "transparent" | "infoBackgroundStrong" | "infoBackgroundSubtle" | "successBackgroundStrong" | "successBackgroundSubtle" | "warningBackgroundStrong" | "warningBackgroundSubtle" | "alertBackgroundStrong" | "alertBackgroundSubtle" | undefined;
+    fg?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "soft" | "success" | "info" | "danger" | "warning" | "normal" | "inverse" | "placeholder" | "primary" | "secondary" | "reverse" | "tertiary" | "unset" | "infoText" | "infoForeground" | "successText" | "successForeground" | "warningText" | "warningForeground" | "alertText" | "alertForeground" | undefined;
+    borderColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
+    borderColorX?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
+    borderColorY?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
     borderColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
     borderColourX?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
     borderColourY?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
@@ -502,7 +502,7 @@ export type Sprinkles = Parameters<typeof sprinkles>[0];
 export type SprinklesLegacyColours = Pick<Sprinkles, 'backgroundColour' | 'borderColour' | 'borderBottomColour' | 'borderLeftColour' | 'borderRightColour' | 'borderTopColour' | 'colour'>;
 export declare const valueArrays: {
     alignItems: ("stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart")[];
-    borderColors: ("page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "muted" | "disabled")[];
+    borderColors: ("page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "disabled" | "muted")[];
     gapSizesWithVar: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "none")[];
     intentBackgroundColoursStandard: ("success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information")[];
     intentBorderColours: ("success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information")[];

package/dist/styles/sprinkles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AAiDA;;;;;GAKG;AACH,eAAO,MAAM,mCAAmC;IAC/C;;;;;OAKG;;CAEH,CAAC;AAuMF,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAOhC,CAAC;AA2IF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwD,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,SAAS,EACP,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,iBAAiB,GACjB,QAAQ,CACV,CAAC;AAIF,eAAO,MAAM,WAAW;;;;;;;;;;CAcvB,CAAC"}
+{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AAiDA;;;;;GAKG;AACH,eAAO,MAAM,mCAAmC;IAC/C;;;;;OAKG;;CAEH,CAAC;AAyMF,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAOhC,CAAC;AA2IF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwD,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,SAAS,EACP,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,iBAAiB,GACjB,QAAQ,CACV,CAAC;AAIF,eAAO,MAAM,WAAW;;;;;;;;;;CAcvB,CAAC"}

package/dist/styles/sprinkles.css.js

@@ -84,7 +84,7 @@ const semanticGamut = buildColourGamut({
 
 // `color` (text/foreground) semantic value space
 const semanticColor = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, tokens.color.content), tokens.color.foreground), {}, {
-  // primary, secondary, reverse, tertiaryInactive, tertiaryInactiveLight (W1-P1)
+  // primary, secondary, reverse, tertiary, placeholder (W1-P1)
   infoText: tokens.color.info.text,
   infoForeground: tokens.color.info.foreground,
   successText: tokens.color.success.text,
@@ -101,13 +101,15 @@ const semanticColor = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}
 
 // `backgroundColor` semantic value space
 const semanticBackgroundColor = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, tokens.color.surface), tokens.color.background), {}, {
-  // default, reverse, inactive, emphasisInactive (W1-P1)
-  infoBackground: tokens.color.info.background,
-  successBackgroundDark: tokens.color.success.backgroundDark,
-  successBackgroundLight: tokens.color.success.backgroundLight,
-  warningBackgroundDark: tokens.color.warning.backgroundDark,
-  warningBackgroundLight: tokens.color.warning.backgroundLight,
-  alertBackground: tokens.color.alert.background
+  // default, reverse, inactive, emphasisInactive, emphasisLight, modal (W1-P1)
+  infoBackgroundStrong: tokens.color.info.backgroundStrong,
+  infoBackgroundSubtle: tokens.color.info.backgroundSubtle,
+  successBackgroundStrong: tokens.color.success.backgroundStrong,
+  successBackgroundSubtle: tokens.color.success.backgroundSubtle,
+  warningBackgroundStrong: tokens.color.warning.backgroundStrong,
+  warningBackgroundSubtle: tokens.color.warning.backgroundSubtle,
+  alertBackgroundStrong: tokens.color.alert.backgroundStrong,
+  alertBackgroundSubtle: tokens.color.alert.backgroundSubtle
 }, semanticGamut), {}, {
   white: tokens.color.gamut.white,
   transparent: 'transparent'