@autoguru/overdrive 4.43.9-next.0 → 4.43.10-next.0

package/dist/styles/sprinkles.css.js

@@ -6,16 +6,18 @@ import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/styles/sprinkles.css.ts", "@autoguru/overdrive");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/* eslint-disable sonarjs/no-duplicate-string */
 import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
 import { mapValues } from 'es-toolkit';
 import { breakpoints } from "../themes/makeTheme.js";
 import { overdriveTokens as tokens } from "../themes/theme.css.js";
 import { arrayFromKeys } from "../utils/object.js";
-import { cssLayerUtil } from "./layers.css.js";
+import { cssLayerStyleprops } from "./layers.css.js";
 import { gapVar } from "./vars.css.js";
 const {
   space
 } = tokens;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const {
     none
   } = space,
@@ -73,6 +75,8 @@ const gapSizesWithVar = mapValues(space, value => ({
   },
   gap: value
 }));
+
+// --- MAPPED COLOURS ---
 const mappedBackgroundColours = mapValues(backgroundColours, backgroundColor => ({
   backgroundColor
 }));
@@ -91,9 +95,22 @@ const mappedBorderTopColours = mapValues(borderColours, borderTopColor => ({
 const mappedColours = mapValues(colours, color => ({
   color
 }));
+
+// --- VALUE ARRAYS ---
+// (Useful for Storybook controls, etc.)
+export const valueArrays = {
+  borderColors: arrayFromKeys(borderColors),
+  gapSizesWithVar: arrayFromKeys(gapSizesWithVar),
+  intentBackgroundColoursStandard: arrayFromKeys(intentBackgroundColoursStandard),
+  intentBorderColours: arrayFromKeys(intentBorderColours),
+  intentForegroundColours: arrayFromKeys(intentForegroundColours)
+};
+
+// --- BASE SPRINKLES (NON-RESPONSIVE) ---
 const baseProperties = defineProperties({
-  '@layer': cssLayerUtil,
+  '@layer': cssLayerStyleprops,
   properties: {
+    // Borders
     borderBottomColor: borderColors,
     borderLeftColor: borderColors,
     borderRightColor: borderColors,
@@ -106,6 +123,7 @@ const baseProperties = defineProperties({
     borderBottomStyle: ['none', 'solid'],
     borderRightStyle: ['none', 'solid'],
     borderTopStyle: ['none', 'solid'],
+    // Color
     color: tokens.color.content,
     colour: mappedColours,
     backgroundColor: _objectSpread(_objectSpread({}, tokens.color.surface), {}, {
@@ -113,13 +131,16 @@ const baseProperties = defineProperties({
     }),
     backgroundColour: mappedBackgroundColours,
     opacity: [0, '1', '0'],
+    // Typography
     lineHeight: mapValues(tokens.typography.size, size => size.lineHeight),
     fontSize: mapValues(tokens.typography.size, size => size.fontSize),
     fontWeight: tokens.typography.fontWeight,
     textTransform: ['capitalize', 'lowercase', 'uppercase'],
     textWrap: ['balance', 'pretty', 'stable', 'nowrap'],
     wordBreak: ['break-all', 'break-word', 'keep-all'],
+    // Shadows
     boxShadow: tokens.elevation,
+    // Misc
     pointerEvents: ['auto', 'none'],
     userSelect: ['auto', 'text', 'none'],
     useVar: {
@@ -145,6 +166,8 @@ const baseProperties = defineProperties({
     borderStyleTop: ['borderTopStyle']
   }
 });
+
+// --- RESPONSIVE SPRINKLES ---
 export const responsiveConditions = {
   mobile: {},
   tablet: {
@@ -158,7 +181,7 @@ export const responsiveConditions = {
   }
 };
 const responsiveProperties = defineProperties({
-  '@layer': cssLayerUtil,
+  '@layer': cssLayerStyleprops,
   conditions: responsiveConditions,
   defaultCondition: 'mobile',
   responsiveArray: ['mobile', 'tablet', 'desktop', 'largeDesktop'],
@@ -185,11 +208,13 @@ const responsiveProperties = defineProperties({
       centre: 'center',
       right: 'right'
     },
+    // Borders
     borderRadius: tokens.border.radius,
     borderLeftWidth: tokens.border.width,
     borderBottomWidth: tokens.border.width,
     borderRightWidth: tokens.border.width,
     borderTopWidth: tokens.border.width,
+    // Size
     height: _objectSpread(_objectSpread({}, spaceWithoutNone), {}, {
       'fit-content': 'fit-content',
       'max-content': 'max-content',
@@ -212,25 +237,31 @@ const responsiveProperties = defineProperties({
     gap: gapSizesWithVar,
     columnGap: space,
     rowGap: space,
+    // Alignment
     alignContent: flexAlignmentsWithSpace,
     alignItems: _objectSpread(_objectSpread({}, flexAlignments), {}, {
       baseline: 'baseline'
     }),
     alignSelf: flexAlignments,
     justifyContent: _objectSpread({}, flexAlignmentsWithSpace),
+    // Flexbox
     flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
     flexGrow: [0, '0', '1'],
     flexShrink: [0, '0', '1'],
     flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
     order: [0, '0', '1', '2', '3', '4'],
+    // Grid
     gridAutoColumns: ['auto', '1fr', 'min-content', 'max-content'],
     gridAutoRows: ['auto', '1fr'],
     gridAutoFlow: ['row', 'column', 'row dense', 'column dense'],
     gridColumns: ['1', 'auto'],
+    // Note: original had ['1', 'auto'], assuming this is correct
+    // Padding
     paddingBottom: tokens.space,
     paddingLeft: tokens.space,
     paddingRight: tokens.space,
     paddingTop: tokens.space,
+    // Margin
     marginBottom: tokens.space,
     marginLeft: _objectSpread(_objectSpread({}, tokens.space), {}, {
       auto: 'auto'
@@ -273,15 +304,9 @@ const responsiveProperties = defineProperties({
   }
 });
 export const sprinkles = createSprinkles(baseProperties, responsiveProperties);
-export const valueArrays = {
-  alignItems: arrayFromKeys(responsiveProperties.styles.alignItems.values),
-  borderColors: arrayFromKeys(borderColors),
-  gapSizesWithVar: arrayFromKeys(gapSizesWithVar),
-  intentBackgroundColoursStandard: arrayFromKeys(intentBackgroundColoursStandard),
-  intentBorderColours: arrayFromKeys(intentBorderColours),
-  intentForegroundColours: arrayFromKeys(intentForegroundColours),
-  justifyContent: arrayFromKeys(responsiveProperties.styles.justifyContent.values),
-  spaceWithNone: arrayFromKeys(space),
-  width: arrayFromKeys(responsiveProperties.styles.width.values)
-};
+
+/**
+ * Legacy colours are not a discreet combination of all colours as many typeography colour
+ * tokens are overwritten by the intentional colour sets
+ */
 __vanilla_filescope__.endFileScope();

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

@@ -6,6 +6,10 @@ export declare const sprinklesLegacyText: ((props: {
     properties: Set<"color">;
 };
 export type LegacyTextColours = Parameters<typeof sprinklesLegacyText>[0]['color'];
+/**
+ * The global typography style function. Currently responsive values are not supported.
+ * To allow for responsive styles, use the `sprinkles` directly.
+ */
 export declare const typographyStyles: import("@vanilla-extract/recipes").RuntimeFn<{
     as: {
         label: string;
@@ -51,16 +55,26 @@ export declare const typographyStyles: import("@vanilla-extract/recipes").Runtim
 }>;
 export type TypographyVariants = NonNullable<RecipeVariants<typeof typographyStyles>>;
 export interface TypographyStyleProps {
+    /** Aligns text horizontally */
     align?: Sprinkles['textAlign'];
+    /** Forces long words to break */
     breakWord?: TypographyVariants['breakWord'];
+    /** Set the text colour */
     color?: Sprinkles['color'];
+    /** _in transistion_ Prefer `color` */
     colour?: TypographyVariants['colour'];
+    /** @deprecated prefer `textWrap` prop as it supports all wrapping values */
     noWrap?: TypographyVariants['noWrap'];
+    /** Font size of the text */
     size?: TypographyVariants['size'];
     strong?: TypographyVariants['strong'];
+    /** Applies text capitalisation style */
     transform?: TypographyVariants['transform'];
+    /** The font weight */
     weight?: TypographyVariants['weight'];
+    /** Control the text wrapping */
     wrap?: Sprinkles['textWrap'];
+    /** Control word break during wrapping */
     wordBreak?: Sprinkles['wordBreak'];
 }
 //# sourceMappingURL=typography.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"typography.css.d.ts","sourceRoot":"","sources":["../../lib/styles/typography.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAQlE,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAY5D,eAAO,MAAM,mBAAmB;;;;CAAwC,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAAG,UAAU,CACzC,OAAO,mBAAmB,CAC1B,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;AAMd,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgF3B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAC3C,cAAc,CAAC,OAAO,gBAAgB,CAAC,CACvC,CAAC;AAEF,MAAM,WAAW,oBAAoB;IAEpC,KAAK,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAE/B,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAE5C,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAE3B,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAEtC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAEtC,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAEtC,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAE5C,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAEtC,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAE7B,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACnC"}
+{"version":3,"file":"typography.css.d.ts","sourceRoot":"","sources":["../../lib/styles/typography.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAQlE,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAY5D,eAAO,MAAM,mBAAmB;;;;CAAwC,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAAG,UAAU,CACzC,OAAO,mBAAmB,CAC1B,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;AAEd;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgF3B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAC3C,cAAc,CAAC,OAAO,gBAAgB,CAAC,CACvC,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACpC,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/B,iCAAiC;IACjC,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,sCAAsC;IACtC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,4EAA4E;IAC5E,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,wCAAwC;IACxC,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,sBAAsB;IACtB,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,gCAAgC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC7B,yCAAyC;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACnC"}

package/dist/styles/typography.css.js

@@ -21,6 +21,10 @@ const legacyTextProperties = defineProperties({
   }
 });
 export const sprinklesLegacyText = createSprinkles(legacyTextProperties);
+/**
+ * The global typography style function. Currently responsive values are not supported.
+ * To allow for responsive styles, use the `sprinkles` directly.
+ */
 export const typographyStyles = recipe({
   base: {
     '@layer': {
@@ -46,6 +50,7 @@ export const typographyStyles = recipe({
     color: mapValues(tokens.color.content, (_, color) => sprinkles({
       color
     })),
+    // map legacy typography colours to this prop spelling
     colour: _objectSpread(_objectSpread({}, mapValues(tokens.typography.colour, (_, color) => sprinklesLegacyText({
       color
     }))), {}, {

package/dist/styles/vars.css.js

@@ -3,5 +3,7 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/styles/vars.css.ts", "@autoguru/overdrive");
 import { createGlobalVar } from '@vanilla-extract/css';
+
+// --- CSS variables for export
 export const gapVar = createGlobalVar('od-var-gap');
 __vanilla_filescope__.endFileScope();

package/dist/themes/base/theme.css.js

@@ -5,7 +5,9 @@ __vanilla_filescope__.setFileScope("lib/themes/base/theme.css.ts", "@autoguru/ov
 import { createTheme, createGlobalTheme } from '@vanilla-extract/css';
 import { themeTokensWithLayer } from "../makeTheme.js";
 import { overdriveTokens } from "../theme.css.js";
-import { tokens } from "./tokens.js";
+import { tokens } from "./tokens.js"; // global themes -- all themes can be declared here as they do not require exporting
 export const baseThemeLight = createGlobalTheme(':root, [data-od-theme=base], [data-od-theme=base][data-od-color-mode=light]', overdriveTokens, themeTokensWithLayer(tokens));
+
+// base theme
 export const baseThemeClassName = createTheme(overdriveTokens, themeTokensWithLayer(tokens), 'OD_Base');
 __vanilla_filescope__.endFileScope();

package/dist/themes/base/tokens.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Here lie the global tokens for theming Overdrive
+ */
 export declare const tokens: {
     mode: string;
     body: {

package/dist/themes/base/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6QI,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AASA;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6QI,CAAC"}

package/dist/themes/base/tokens.js

@@ -6,6 +6,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { buildColourGamut } from "../makeTheme.js";
 import { overdriveTokens } from "../theme.css.js";
 import { colourMap, colourMapWithoutWhite, secondaryForeground } from "./colours.js";
+/**
+ * Here lie the global tokens for theming Overdrive
+ */
 export const tokens = {
   mode: 'light',
   body: {

package/dist/themes/helpers.d.ts

@@ -1,4 +1,26 @@
 import type { CSSVarFunction } from '@vanilla-extract/private';
+/**
+ * Utility type that extracts the raw token type from a vanilla-extract theme contract.
+ * This allows you to use the same type structure as the theme contract but with raw values
+ * instead of CSS var functions.
+ *
+ * @example
+ * ```ts
+ * import { overdriveTokens } from './theme.css';
+ *
+ * type Tokens = TokensFromContract<typeof overdriveTokens>;
+ *
+ * // Now you can use this type for your token objects
+ * const myTokens: Tokens = {
+ *   mode: 'light',
+ *   body: {
+ *     backgroundColour: '#ffffff',
+ *     colour: '#000000'
+ *   }
+ *   // ... rest of the tokens
+ * };
+ * ```
+ */
 export type TokensFromContract<T> = {
     [P in keyof T]: T[P] extends CSSVarFunction ? string : T[P] extends Record<string, unknown> ? TokensFromContract<T[P]> : T[P];
 };

package/dist/themes/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../lib/themes/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAyB/D,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI;KAClC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,cAAc,GACxC,MAAM,GACN,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACnC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GACxB,CAAC,CAAC,CAAC,CAAC;CACR,CAAC;AAEF,UAAU,iBAAiB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,GAAI,8DAM1B,iBAAiB,KAAG,MAiBtB,CAAC;AAEF,KAAK,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC;AAE7D,eAAO,MAAM,QAAQ,GAAI,KAAK,MAAM,KAAG,UAYtC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,KAAG,UAOzC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,UAAU,MAAM,KAAG,UACwB,CAAC;AAEzE,eAAO,MAAM,kBAAkB,GAAI,KAAK,UAAU,WAQjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,EAAE,SAAS,MAAM,KAAG,MAMnE,CAAC;AAEF,KAAK,kBAAkB,GAAG,IAAI,GAAG,KAAK,CAAC;AACvC,KAAK,qBAAqB,GAAG,OAAO,GAAG,OAAO,CAAC;AAE/C,eAAO,MAAM,2BAA2B,GAAI,wCAKzC;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,qBAAqB,CAAC;CAChC,KAAG,OAQH,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../lib/themes/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG/D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI;KAClC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,cAAc,GACxC,MAAM,GACN,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACnC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GACxB,CAAC,CAAC,CAAC,CAAC;CACR,CAAC;AAEF,UAAU,iBAAiB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,GAAI,8DAM1B,iBAAiB,KAAG,MAiBtB,CAAC;AAEF,KAAK,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC;AAE7D,eAAO,MAAM,QAAQ,GAAI,KAAK,MAAM,KAAG,UAYtC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,KAAG,UAOzC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,UAAU,MAAM,KAAG,UACwB,CAAC;AAEzE,eAAO,MAAM,kBAAkB,GAAI,KAAK,UAAU,WAQjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,EAAE,SAAS,MAAM,KAAG,MAMnE,CAAC;AAEF,KAAK,kBAAkB,GAAG,IAAI,GAAG,KAAK,CAAC;AACvC,KAAK,qBAAqB,GAAG,OAAO,GAAG,OAAO,CAAC;AAE/C,eAAO,MAAM,2BAA2B,GAAI,wCAKzC;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,qBAAqB,CAAC;CAChC,KAAG,OAQH,CAAC"}

package/dist/themes/helpers.js

@@ -1,6 +1,30 @@
 "use strict";
 
 import { colord } from 'colord';
+
+/**
+ * Utility type that extracts the raw token type from a vanilla-extract theme contract.
+ * This allows you to use the same type structure as the theme contract but with raw values
+ * instead of CSS var functions.
+ *
+ * @example
+ * ```ts
+ * import { overdriveTokens } from './theme.css';
+ *
+ * type Tokens = TokensFromContract<typeof overdriveTokens>;
+ *
+ * // Now you can use this type for your token objects
+ * const myTokens: Tokens = {
+ *   mode: 'light',
+ *   body: {
+ *     backgroundColour: '#ffffff',
+ *     colour: '#000000'
+ *   }
+ *   // ... rest of the tokens
+ * };
+ * ```
+ */
+
 export const shadedColour = _ref => {
   let {
     colour,

package/dist/themes/makeTheme.d.ts

@@ -1,6 +1,9 @@
 import type { BreakPoints, ColourMap, FlattenedColours, ThemeTokens } from '.';
 export declare const breakpoints: BreakPoints;
 export declare const mediaQuery: Record<import("./types").DeviceSize, string>;
+/**
+ * Wraps theme tokens with `theme` CSS layer using the vanilla-extract method
+ */
 export declare const themeTokensWithLayer: (tokens: ThemeTokens) => {
     mode: string;
     body: import("./helpers").TokensFromContract<{

package/dist/themes/makeTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"makeTheme.d.ts","sourceRoot":"","sources":["../../lib/themes/makeTheme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAE/E,eAAO,MAAM,WAAW,EAAE,WAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,8CAGtB,CAAC;AAKF,eAAO,MAAM,oBAAoB,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGtD,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAC7B,qBAAoB,WAAyB;;CAG5C,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEjE,eAAO,MAAM,gBAAgB,GAAI,SAAS,SAAS,KAAG,gBAepD,CAAC"}
+{"version":3,"file":"makeTheme.d.ts","sourceRoot":"","sources":["../../lib/themes/makeTheme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAE/E,eAAO,MAAM,WAAW,EAAE,WAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,8CAGtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGtD,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAC7B,qBAAoB,WAAyB;;CAG5C,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEjE,eAAO,MAAM,gBAAgB,GAAI,SAAS,SAAS,KAAG,gBAepD,CAAC"}

package/dist/themes/makeTheme.js

@@ -8,10 +8,16 @@ import { cssLayerTheme } from "../styles/layers.css.js";
 export const breakpoints = {
   mobile: '0px',
   tablet: '768px',
+  // IPad mini width (1024 - 25%)
   desktop: '1024px',
-  largeDesktop: '1920px'
+  // IPad Pro width (1366 - 25%)
+  largeDesktop: '1920px' // 1080p width (1920 - 25%)
 };
 export const mediaQuery = mapValues(breakpoints, breakpoint => `screen and (min-width: ${breakpoint})`);
+
+/**
+ * Wraps theme tokens with `theme` CSS layer using the vanilla-extract method
+ */
 export const themeTokensWithLayer = tokens => _objectSpread({
   '@layer': cssLayerTheme
 }, tokens);

package/dist/themes/theme.css.d.ts

@@ -68,6 +68,9 @@ declare const colours: {
     };
 };
 export type Colours = typeof colours;
+/**
+ * The global Overdrive tokens generated by the vanilla-extract theme contract
+ */
 export declare const overdriveTokens: {
     mode: `var(--${string})`;
     body: {
@@ -461,5 +464,6 @@ export declare const overdriveTokens: {
 };
 export { overdriveTokens as themeContractVars };
 export type ThemeTokens = TokensFromContract<typeof overdriveTokens>;
+/** *Reccomend replace usage*: `container` should be impored from `lib/reset/reset.css` */
 export declare const container: string;
 //# sourceMappingURL=theme.css.d.ts.map

package/dist/themes/theme.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.css.d.ts","sourceRoot":"","sources":["../../lib/themes/theme.css.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAKpD,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEQ,CAAC;AAEtB,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC;AAiSrC,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAI3B,CAAC;AAGF,OAAO,EAAE,eAAe,IAAI,iBAAiB,EAAE,CAAC;AAEhD,MAAM,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,eAAe,CAAC,CAAC;AAGrE,eAAO,MAAM,SAAS,QAKpB,CAAC"}
+{"version":3,"file":"theme.css.d.ts","sourceRoot":"","sources":["../../lib/themes/theme.css.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAKpD,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEQ,CAAC;AAEtB,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC;AA8RrC;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAI3B,CAAC;AAGF,OAAO,EAAE,eAAe,IAAI,iBAAiB,EAAE,CAAC;AAEhD,MAAM,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,eAAe,CAAC,CAAC;AAErE,0FAA0F;AAC1F,eAAO,MAAM,SAAS,QAKpB,CAAC"}

package/dist/themes/theme.css.js

@@ -78,6 +78,12 @@ const colours = {
 const coloursWithWhite = _objectSpread(_objectSpread({}, colours), {}, {
   white: 'color-gamut-white'
 });
+
+/**
+ * Overdrive master theme contract is IN TRANSISTION. Where values are present, they create a global CSS var
+ * mapping for the corresponding key. Where values are null, these keys are being phased out and do not exist
+ * in global CSS vars.
+ */
 const THEME_CONTRACT = {
   mode: 'mode',
   body: {
@@ -101,6 +107,7 @@ const THEME_CONTRACT = {
     '9': 'space-9',
     none: 'space-none'
   },
+  // new colour token structure 2025
   color: {
     gamut: coloursWithWhite,
     surface: {
@@ -136,6 +143,7 @@ const THEME_CONTRACT = {
       focusOutline: 'color-interactive-focus-outline'
     }
   },
+  // existing colours for compatability
   colours: {
     gamut: _objectSpread(_objectSpread({}, buildColourGamut(colours)), {}, {
       white: 'color-gamut-white'
@@ -306,6 +314,7 @@ const THEME_CONTRACT = {
         lineHeight: 'typography-size-9-line-height'
       }
     },
+    // phase out: typography specific colours for backwards compatibility
     colour: {
       primary: null,
       brand: null,
@@ -347,8 +356,15 @@ const THEME_CONTRACT = {
     overlayBg: 'opacity-overlay-bg'
   }
 };
+
+/**
+ * The global Overdrive tokens generated by the vanilla-extract theme contract
+ */
 export const overdriveTokens = createGlobalThemeContract(THEME_CONTRACT, (cssVarName, path) => cssVarName === null ? `od-${path.join('-')}` : `od-${cssVarName}`);
+
+// phase out: Export overdriveTokens alias as it's in use by the original themes and components
 export { overdriveTokens as themeContractVars };
+/** *Reccomend replace usage*: `container` should be impored from `lib/reset/reset.css` */
 export const container = style({
   fontFamily: overdriveTokens.typography.fontFamily,
   fontSize: overdriveTokens.typography.size[4].fontSize,

package/dist/types/index.d.ts

@@ -1,8 +1,17 @@
 export interface OdComponent {
+    /**
+     * Output a data attribute with a component name in the markup, mainly used for the root element of a component
+     */
     odComponent?: string;
 }
 export interface TestId {
+    /**
+     * The test ID will be rendered as a data attribute on the element for e2e testing purposes
+     */
     testId?: string;
 }
+/**
+ * Adds a testId property to the given type
+ */
 export type WithTestId<T = unknown> = T & TestId;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAI3B,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,MAAM;IAItB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAKD,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,MAAM;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG,MAAM,CAAC"}

package/dist/utils/css.d.ts

@@ -6,5 +6,20 @@ export type InteractionStyleProps = Partial<Record<SelectorStates, StyleRule>>;
 export declare const notDisabled = ":not(:disabled,[data-disabled])";
 export declare const notFocused = ":not(:focus,[data-focus],[data-focused])";
 export declare const notSelected = ":not(:checked,[data-checked],[data-selected])";
+/**
+ * Creates style variants for different interaction states that can be spread
+ * within vanilla-extract `style` object.
+ *
+ * @example
+ * const buttonStyle = style({
+ *   backgroundColor: tokens.colours.background.primary,
+ *   color: tokens.colours.text.primary,
+ *   ...interactionStyle({
+ *     initial: { background: 'white', color: 'black' },
+ *     hover: { background: 'lightgray' },
+ *     disabled: { opacity: 0.5 }
+ *   })
+ * });
+ */
 export declare const interactionStyle: (selectors: InteractionStyleProps) => StyleRule;
 //# sourceMappingURL=css.d.ts.map

package/dist/utils/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../lib/utils/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAItD,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,WAIzC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC9B,aAAa,MAAM,GAAG,IAAI,EAC1B,QAAQ,MAAM,GAAG,IAAI,KACnB,MAQF,CAAC;AAEF,MAAM,MAAM,cAAc,GACvB,MAAM,GACN,QAAQ,GACR,SAAS,GACT,UAAU,GACV,UAAU,GACV,OAAO,GACP,cAAc,GACd,OAAO,GACP,eAAe,GACf,kBAAkB,CAAC;AACtB,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC;AAG/E,eAAO,MAAM,WAAW,oCAAoC,CAAC;AAC7D,eAAO,MAAM,UAAU,6CAA6C,CAAC;AACrE,eAAO,MAAM,WAAW,kDAAkD,CAAC;AAiB3E,eAAO,MAAM,gBAAgB,GAC5B,WAAW,qBAAqB,KAC9B,SAwBF,CAAC"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../lib/utils/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAItD,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,WAIzC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC9B,aAAa,MAAM,GAAG,IAAI,EAC1B,QAAQ,MAAM,GAAG,IAAI,KACnB,MAQF,CAAC;AAEF,MAAM,MAAM,cAAc,GACvB,MAAM,GACN,QAAQ,GACR,SAAS,GACT,UAAU,GACV,UAAU,GACV,OAAO,GACP,cAAc,GACd,OAAO,GACP,eAAe,GACf,kBAAkB,CAAC;AACtB,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC;AAG/E,eAAO,MAAM,WAAW,oCAAoC,CAAC;AAC7D,eAAO,MAAM,UAAU,6CAA6C,CAAC;AACrE,eAAO,MAAM,WAAW,kDAAkD,CAAC;AAE3E;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,GAC5B,WAAW,qBAAqB,KAC9B,SAwBF,CAAC"}

package/dist/utils/css.js

@@ -21,6 +21,22 @@ export const getThemeTokenValue = (themeClass, token) => {
 export const notDisabled = ':not(:disabled,[data-disabled])';
 export const notFocused = ':not(:focus,[data-focus],[data-focused])';
 export const notSelected = ':not(:checked,[data-checked],[data-selected])';
+
+/**
+ * Creates style variants for different interaction states that can be spread
+ * within vanilla-extract `style` object.
+ *
+ * @example
+ * const buttonStyle = style({
+ *   backgroundColor: tokens.colours.background.primary,
+ *   color: tokens.colours.text.primary,
+ *   ...interactionStyle({
+ *     initial: { background: 'white', color: 'black' },
+ *     hover: { background: 'lightgray' },
+ *     disabled: { opacity: 0.5 }
+ *   })
+ * });
+ */
 export const interactionStyle = selectors => {
   const {
       base = {}
@@ -39,6 +55,8 @@ export const interactionStyle = selectors => {
     focusVisible: '&:focus-visible, &[data-focus-visible]',
     disabled: '&:disabled, &[data-disabled]'
   };
+
+  // Add selectors for each interaction state that has styles
   Object.entries(interactionStyles).forEach(_ref => {
     let [state, stateStyles] = _ref;
     if (state in rules && stateStyles) {

package/dist/utils/dataAttrs.d.ts

@@ -1,6 +1,9 @@
 export interface DataAttributes {
     [key: string]: string | boolean | undefined;
 }
+/**
+ * Consistent mapping of props to data attributes
+ */
 export declare function dataAttrs(attrs: DataAttributes): {
     [key: string]: string;
 };

package/dist/utils/dataAttrs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dataAttrs.d.ts","sourceRoot":"","sources":["../../lib/utils/dataAttrs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CAC5C;AAKD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc;;EAW9C"}
+{"version":3,"file":"dataAttrs.d.ts","sourceRoot":"","sources":["../../lib/utils/dataAttrs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CAC5C;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc;;EAW9C"}

package/dist/utils/dataAttrs.js

@@ -1,5 +1,8 @@
 "use strict";
 
+/**
+ * Consistent mapping of props to data attributes
+ */
 export function dataAttrs(attrs) {
   return Object.entries(attrs).reduce((acc, _ref) => {
     let [key, value] = _ref;

package/dist/utils/estimateTextWidth.js

@@ -1,9 +1,10 @@
 "use strict";
 
+// Estimate input width based on the width of each character in the value prop
 const narrowChars = /[!"'()*+,./:;<=>?I[\\\]^_`b-vx-z{|}~-]/g;
 const wideChars = /[\dA-HJ-Z]/g;
-const narrowCharWidth = 0.5;
-const defaultCharWidth = 0.8;
+const narrowCharWidth = 0.5; // Fraction of ch to assign to narrow characters
+const defaultCharWidth = 0.8; // Fraction of ch to assign to narrow characters
 export const estimateTextWidth = value => {
   if (!value) return '0ch';
   const charWidths = value.split('').map(char => {

package/dist/utils/index.d.ts

@@ -7,15 +7,36 @@ export declare const useUncontrolledState: <T extends unknown>(value: T, onChang
 export declare const useInputControlledState: <T, H>(incomingValue: T, incomingOnChange?: H) => [T, H];
 export declare const useId: (idFromProps?: string) => string | null;
 export declare const setRef: <T>(ref: Ref<T>, value: T) => void;
+/**
+ * Used to merge multiple refs into a single ref callback
+ * @param refs an array of refs
+ */
 export declare function mergeRefs<T>(refs: Array<Ref<T> | undefined | null>): RefCallback<T>;
 export declare const isHtmlElement: (element: unknown) => element is Element;
 export declare const hex2rgba: (c: any, alpha?: string) => string;
 export declare const ownerDocument: (node?: Node) => Document;
 export declare const ownerWindow: (node?: Node) => Window;
+/**
+ * A method to be used when dealing with callbacks that depend on data, but you don't want to trigger re-renders.
+ *
+ * @see {@link https://github.com/facebook/react/issues/14099#issuecomment-440013892|facebook/react#14099}
+ *
+ * @param fn
+ */
 export declare const useEventCallback: <T extends Function>(fn: T) => (...args: any[]) => undefined;
 export declare const animate: <T extends HTMLElement>(element: T, property: keyof T, to: number, duration?: number) => (() => void) | void;
 export type Alignment = 'left' | 'right' | 'center';
 export declare const alignmentToFlexAlignment: (align: Alignment) => Sprinkles["justifyContent"];
+/**
+ * A function that returns the first item in the array, if the index exceeds its maximum length
+ *
+ * @example
+ * ```js
+ *  const sortFlowRingLookup = arrayRingLookup(['asc', 'desc', 'none']);
+ *
+ *  expect(sortFlowRingLookup(4)).toBe('desc');
+ * ```
+ */
 export declare const arrayRingLookup: <T extends ArrayLike<unknown>>(collection: T) => (index: any) => unknown;
 export declare const noop: () => void;
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AACzD,OAAO,EAEN,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,eAAO,MAAM,SAAS,SAAgC,CAAC;AAEvD,eAAO,MAAM,sBAAsB,kBAA0C,CAAC;AAG9E,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,OAAO,EACrD,OAAO,CAAC,EACR,WAAW,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,KAC3B,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAMxB,CAAC;AAGF,eAAO,MAAM,uBAAuB,GAAI,CAAC,EAAE,CAAC,EAC3C,eAAe,CAAC,EAChB,mBAAmB,CAAC,KAClB,CAAC,CAAC,EAAE,CAAC,CAWP,CAAC;AAaF,eAAO,MAAM,KAAK,GAAI,cAAc,MAAM,KAAG,MAAM,GAAG,IAkBrD,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,SAM9C,CAAC;AAOF,wBAAgB,SAAS,CAAC,CAAC,EAC1B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAUhB;AAED,eAAO,MAAM,aAAa,GAAI,SAAS,OAAO,KAAG,OAAO,IAAI,OACF,CAAC;AAE3D,eAAO,MAAM,QAAQ,GAAI,MAAC,EAAE,cAAW,WAII,CAAC;AAE5C,eAAO,MAAM,aAAa,GAAI,OAAO,IAAI,KAAG,QACZ,CAAC;AAEjC,eAAO,MAAM,WAAW,GAAI,OAAO,IAAI,KAAG,MACC,CAAC;AAU5C,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,QAAQ,EAAE,IAAI,CAAC,kCAOzD,CAAC;AAMF,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,EAC5C,SAAS,CAAC,EACV,UAAU,MAAM,CAAC,EACjB,IAAI,MAAM,EACV,iBAAc,KACZ,CAAC,MAAM,IAAI,CAAC,GAAG,IA8BjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpD,eAAO,MAAM,wBAAwB,GAAI,OAAO,SAAS,KAK3C,SAAS,CAAC,gBAAgB,CAAC,CAAC;AAY1C,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,SAAS,CAAC,OAAO,CAAC,EAC3D,YAAY,CAAC,MAGL,UAAK,YACb,CAAC;AAEF,eAAO,MAAM,IAAI,YAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AACzD,OAAO,EAEN,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,eAAO,MAAM,SAAS,SAAgC,CAAC;AAEvD,eAAO,MAAM,sBAAsB,kBAA0C,CAAC;AAG9E,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,OAAO,EACrD,OAAO,CAAC,EACR,WAAW,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,KAC3B,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAMxB,CAAC;AAGF,eAAO,MAAM,uBAAuB,GAAI,CAAC,EAAE,CAAC,EAC3C,eAAe,CAAC,EAChB,mBAAmB,CAAC,KAClB,CAAC,CAAC,EAAE,CAAC,CAWP,CAAC;AAaF,eAAO,MAAM,KAAK,GAAI,cAAc,MAAM,KAAG,MAAM,GAAG,IAkBrD,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,SAM9C,CAAC;AAEF;;;GAGG;AAEH,wBAAgB,SAAS,CAAC,CAAC,EAC1B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAUhB;AAED,eAAO,MAAM,aAAa,GAAI,SAAS,OAAO,KAAG,OAAO,IAAI,OACF,CAAC;AAE3D,eAAO,MAAM,QAAQ,GAAI,MAAC,EAAE,cAAW,WAII,CAAC;AAE5C,eAAO,MAAM,aAAa,GAAI,OAAO,IAAI,KAAG,QACZ,CAAC;AAEjC,eAAO,MAAM,WAAW,GAAI,OAAO,IAAI,KAAG,MACC,CAAC;AAE5C;;;;;;GAMG;AAEH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,QAAQ,EAAE,IAAI,CAAC,kCAOzD,CAAC;AAMF,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,EAC5C,SAAS,CAAC,EACV,UAAU,MAAM,CAAC,EACjB,IAAI,MAAM,EACV,iBAAc,KACZ,CAAC,MAAM,IAAI,CAAC,GAAG,IA8BjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpD,eAAO,MAAM,wBAAwB,GAAI,OAAO,SAAS,KAK3C,SAAS,CAAC,gBAAgB,CAAC,CAAC;AAE1C;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,SAAS,CAAC,OAAO,CAAC,EAC3D,YAAY,CAAC,MAGL,UAAK,YACb,CAAC;AAEF,eAAO,MAAM,IAAI,YAAW,CAAC"}