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

package/dist/components/Box/Box.js

@@ -8,14 +8,21 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { forwardRef } from 'react';
 import { componentStyles } from "../../styles/componentStyles.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
+/**
+ * Use CommonBoxProps to help consistently define additional utility props of a component
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Box = forwardRef((_ref, ref) => {
+/**
+ * Box is a general purpose container with no specific semantics.
+ */
+export const Box = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as = 'div',
       children,
       className,
       odComponent,
       testId,
+      // style props
       display,
       height,
       maxWidth,
@@ -34,7 +41,9 @@ export const Box = forwardRef((_ref, ref) => {
       backgroundColour,
       boxShadow,
       color,
+      // modern semantic colour tokens
       colour,
+      // legacy colours
       fg,
       opacity,
       fontSize,
@@ -225,7 +234,7 @@ export const Box = forwardRef((_ref, ref) => {
     paddingRight,
     paddingTop
   });
-  return _jsx(Component, _objectSpread(_objectSpread(_objectSpread({}, allOtherProps), dataAttrs({
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread(_objectSpread({}, allOtherProps), dataAttrs({
     'od-component': odComponent === null || odComponent === void 0 ? void 0 : odComponent.toLocaleLowerCase(),
     testid: testId
   })), {}, {

package/dist/components/Box/newBox/NewBox.d.ts

@@ -1,5 +1,28 @@
 import React, { type ElementType } from 'react';
 import { type UseBoxProps } from './useBox';
+/**
+ * A polymorphic Box component that provides a flexible container with styling capabilities, defaulting to a `<div>` element.
+ * Use the `as` prop to control the rendered HTML tag. The box component exposes design system tokens relative to each style
+ * prop.
+ *
+ * An alternative to the `as` prop is `asComponent` which allows a React element to render with the custom props
+ *
+ * Props include:
+ * - Sprinkles props (spacing, colors, layout, etc.)
+ * - Responsive props (arrays for different breakpoints)
+ * - Also accepts valid HTML attributes for the chosen HTML tag
+ *
+ * @example
+ * <Box as="section" mx="5" py="5" backgroundColor="accent">
+ *   Section content
+ * </Box>
+ *
+ * @example
+ * <Box display={['block', 'flex']} p={['3', '6', '8']}>Responsive padding</Box>
+ *
+ * @example
+ * <Box asComponent={<MyCustomThing />} borderColor="info" borderWidth="1" />
+ */
 export declare const NewBox: {
     <E extends ElementType = "div">({ children, ...props }: UseBoxProps<E>): React.JSX.Element;
     displayName: string;

package/dist/components/Box/newBox/NewBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewBox.d.ts","sourceRoot":"","sources":["../../../../lib/components/Box/newBox/NewBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAyBpD,eAAO,MAAM,MAAM;KAAI,CAAC,SAAS,WAAW,kCAGzC,WAAW,CAAC,CAAC,CAAC;;CAUhB,CAAC"}
+{"version":3,"file":"NewBox.d.ts","sourceRoot":"","sources":["../../../../lib/components/Box/newBox/NewBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;KAAI,CAAC,SAAS,WAAW,kCAGzC,WAAW,CAAC,CAAC,CAAC;;CAUhB,CAAC"}

package/dist/components/Box/newBox/NewBox.js

@@ -7,6 +7,29 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 import React, { cloneElement } from 'react';
 import { useBox } from "./useBox.js";
+/**
+ * A polymorphic Box component that provides a flexible container with styling capabilities, defaulting to a `<div>` element.
+ * Use the `as` prop to control the rendered HTML tag. The box component exposes design system tokens relative to each style
+ * prop.
+ *
+ * An alternative to the `as` prop is `asComponent` which allows a React element to render with the custom props
+ *
+ * Props include:
+ * - Sprinkles props (spacing, colors, layout, etc.)
+ * - Responsive props (arrays for different breakpoints)
+ * - Also accepts valid HTML attributes for the chosen HTML tag
+ *
+ * @example
+ * <Box as="section" mx="5" py="5" backgroundColor="accent">
+ *   Section content
+ * </Box>
+ *
+ * @example
+ * <Box display={['block', 'flex']} p={['3', '6', '8']}>Responsive padding</Box>
+ *
+ * @example
+ * <Box asComponent={<MyCustomThing />} borderColor="info" borderWidth="1" />
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const NewBox = _ref => {
   let {
@@ -19,9 +42,9 @@ export const NewBox = _ref => {
     reactElement
   } = useBox(props);
   if (reactElement) {
-    return cloneElement(reactElement, componentProps, children);
+    return /*#__PURE__*/cloneElement(reactElement, componentProps, children);
   }
-  return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
     children: children
   }));
 };

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

@@ -4,17 +4,41 @@ import type { Sprinkles } from '../../../styles/sprinkles.css';
 import type { CommonBoxProps } from '../Box';
 export type BoxStylesProps<E extends ElementType = 'div'> = AsPolyProp<E> & Pick<ComponentStylesProps, 'className'> & Sprinkles;
 export type BoxStylesReturn<P extends object> = [string, P];
+/** Extract the ref type for a polymorphic component based on the provided element type */
 export type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];
+/** `as` prop for polymorphic components, allowing specification of the rendered element type */
 export type AsPolyProp<C extends ElementType> = {
     as?: C | ReactElement;
 };
+/** `ref` prop for polymorphic components, using the extracted `PolymorphicRef` type */
 export type RefPolyProp<C extends ElementType> = {
     ref?: PolymorphicRef<C>;
 };
+/** Helps to omit base component's props when creating polymorphic props */
 export type PropsToOmit<C extends ElementType, P> = keyof (AsPolyProp<C> & P);
+/**
+ * Constructs the props type for a polymorphic component.
+ * It combines base props (`Props`), the `as` prop, and the `ref` prop,
+ * while omitting conflicting keys from the base element's intrinsic props.
+ */
 export type PolymorphicComponentProps<C extends ElementType, Props = object> = PropsWithChildren<Props & AsPolyProp<C> & RefPolyProp<C>> & Omit<ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+/** Polymorphic box props that merge sprinkles style props and the HTML element props */
 export type UseBoxProps<E extends ElementType = 'div'> = PolymorphicComponentProps<E, CommonBoxProps & Sprinkles>;
+/**
+ * Define custom props similar to Box with polymorphic, common and style props.
+ * Component props will take take precedent over style props and can overwrite them
+ */
 export type BoxLikeProps<E extends ElementType, P = object> = PolymorphicComponentProps<E, Omit<Sprinkles, keyof P> & CommonBoxProps & P>;
+/**
+ * The Overdrive component primitive to expose a flexible HTML element as a fully typesafe React component
+ * that provides intrinsic props as well as style props from vanilla-extract sprinkles.
+ *
+ * The return value must be checked for `reactElement` being defined.
+ *
+ * @returns `{ Component, reactElement, componentProps, SemanticChild }` where `reactElement` is only defined
+ * if JSX was passed in the `as` prop and `cloneElement` will need to be used. `SemanticChild` is only defined
+ * depending on the HTML tag.
+ */
 export declare const useBox: <E extends ElementType = "div">({ as: _as, className: _className, odComponent, testId, ...props }: UseBoxProps<E>) => {
     Component: ElementType;
     componentProps: ComponentPropsWithRef<E>;

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

@@ -1 +1 @@
-{"version":3,"file":"useBox.d.ts","sourceRoot":"","sources":["../../../../lib/components/Box/newBox/useBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEhB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAEN,KAAK,oBAAoB,EACzB,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAG/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAQ7C,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GACxE,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,GACvC,SAAS,CAAC;AAEX,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAG5D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAC/C,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AAGjC,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,IAAI;IAC/C,EAAE,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC;CAGtB,CAAC;AAGF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI;IAChD,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CACxB,CAAC;AAGF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAO9E,MAAM,MAAM,yBAAyB,CACpC,CAAC,SAAS,WAAW,EACrB,KAAK,GAAG,MAAM,IACX,iBAAiB,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,GAC5D,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AAG1D,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACpD,yBAAyB,CAAC,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC,CAAC;AAM1D,MAAM,MAAM,YAAY,CACvB,CAAC,SAAS,WAAW,EACrB,CAAC,GAAG,MAAM,IACP,yBAAyB,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,GAAG,cAAc,GAAG,CAAC,CAAC,CAAC;AAYhF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,mEAMnD,WAAW,CAAC,CAAC,CAAC;;;;;CAmChB,CAAC"}
+{"version":3,"file":"useBox.d.ts","sourceRoot":"","sources":["../../../../lib/components/Box/newBox/useBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEhB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAEN,KAAK,oBAAoB,EACzB,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAG/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAQ7C,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GACxE,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,GACvC,SAAS,CAAC;AAEX,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAE5D,0FAA0F;AAC1F,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAC/C,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AAEjC,gGAAgG;AAChG,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,IAAI;IAC/C,EAAE,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC;CAGtB,CAAC;AAEF,uFAAuF;AACvF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI;IAChD,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CACxB,CAAC;AAEF,2EAA2E;AAC3E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9E;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,CACpC,CAAC,SAAS,WAAW,EACrB,KAAK,GAAG,MAAM,IACX,iBAAiB,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,GAC5D,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AAE1D,wFAAwF;AACxF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACpD,yBAAyB,CAAC,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC,CAAC;AAE1D;;;GAGG;AACH,MAAM,MAAM,YAAY,CACvB,CAAC,SAAS,WAAW,EACrB,CAAC,GAAG,MAAM,IACP,yBAAyB,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,GAAG,cAAc,GAAG,CAAC,CAAC,CAAC;AAEhF;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,mEAMnD,WAAW,CAAC,CAAC,CAAC;;;;;CAmChB,CAAC"}

package/dist/components/Box/newBox/useBox.js

@@ -10,10 +10,43 @@ import { useDeepCompareMemo } from "../../../hooks/index.js";
 import { componentStyles } from "../../../styles/componentStyles.js";
 import { dataAttrs } from "../../../utils/dataAttrs.js";
 import { filterPropsWithStyles } from "../../../utils/sprinkles.js";
+// defaults
 const DEFAULT_TAG = 'div';
 const LIST_ITEM_TAG = 'li';
 const LIST_TAGS = ['ul', 'ol'];
 const OD_COMPONENT_ATTR = 'od-component';
+
+/** Extract the ref type for a polymorphic component based on the provided element type */
+
+/** `as` prop for polymorphic components, allowing specification of the rendered element type */
+
+/** `ref` prop for polymorphic components, using the extracted `PolymorphicRef` type */
+
+/** Helps to omit base component's props when creating polymorphic props */
+
+/**
+ * Constructs the props type for a polymorphic component.
+ * It combines base props (`Props`), the `as` prop, and the `ref` prop,
+ * while omitting conflicting keys from the base element's intrinsic props.
+ */
+
+/** Polymorphic box props that merge sprinkles style props and the HTML element props */
+
+/**
+ * Define custom props similar to Box with polymorphic, common and style props.
+ * Component props will take take precedent over style props and can overwrite them
+ */
+
+/**
+ * The Overdrive component primitive to expose a flexible HTML element as a fully typesafe React component
+ * that provides intrinsic props as well as style props from vanilla-extract sprinkles.
+ *
+ * The return value must be checked for `reactElement` being defined.
+ *
+ * @returns `{ Component, reactElement, componentProps, SemanticChild }` where `reactElement` is only defined
+ * if JSX was passed in the `as` prop and `cloneElement` will need to be used. `SemanticChild` is only defined
+ * depending on the HTML tag.
+ */
 export const useBox = _ref => {
   let {
       as: _as,
@@ -22,11 +55,15 @@ export const useBox = _ref => {
       testId
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const isReactElement = typeof _as !== 'string' && isValidElement(_as);
+  const isReactElement = typeof _as !== 'string' && /*#__PURE__*/isValidElement(_as);
   const as = isReactElement ? undefined : _as !== null && _as !== void 0 ? _as : DEFAULT_TAG;
   const Component = as !== null && as !== void 0 ? as : DEFAULT_TAG;
+
+  // logic to promote semantic HTML and ensure a child tag is correct for the `as` prop
   const isList = LIST_TAGS.includes(Component);
   const SemanticChild = isList ? LIST_ITEM_TAG : undefined;
+
+  // deep compare is mainly to attempt to stop rerenders arrising from responsive style props
   const {
     className,
     baseProps

package/dist/components/BulletList/Bullet.js

@@ -33,10 +33,10 @@ export const Bullet = _ref => {
     children,
     className
   } = _ref;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     as: "li",
     className: [styles.root.default, (_getBulletCls = getBulletCls(styles, bulletMap[useContext(BulletListContext)])) !== null && _getBulletCls !== void 0 ? _getBulletCls : '', {
-      [styles.noDot]: isValidElement(children) && children.type === BulletList
+      [styles.noDot]: /*#__PURE__*/isValidElement(children) && children.type === BulletList
     }, className],
     children: children
   });

package/dist/components/BulletList/BulletList.js

@@ -13,13 +13,13 @@ export const BulletList = _ref => {
     className
   } = _ref;
   const stack = useContext(BulletListContext);
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     as: "ul",
     className: clsx(className, styles.root, {
       [styles.firstOccurrence]: stack === -1
     }),
     odComponent: "bullet-list",
-    children: _jsx(BulletListContext.Provider, {
+    children: /*#__PURE__*/_jsx(BulletListContext.Provider, {
       value: stack + 1 >= bulletMap.length ? 0 : stack + 1,
       children: children
     })

package/dist/components/BulletList/context.js

@@ -2,4 +2,4 @@
 
 import { createContext } from 'react';
 export const bulletMap = ['circle', 'square', 'disc'];
-export const BulletListContext = createContext(-1);
+export const BulletListContext = /*#__PURE__*/createContext(-1);

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

@@ -1 +1 @@
-{"version":3,"file":"BulletText.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletText/BulletText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAMhD,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAChD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,GAAI,4CAKxB,eAAe,sBA8CjB,CAAC"}
+{"version":3,"file":"BulletText.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletText/BulletText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAMhD,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAChD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,GAAI,4CAKxB,eAAe,sBA2CjB,CAAC"}

package/dist/components/BulletText/BulletText.js

@@ -1,5 +1,6 @@
 "use strict";
 
+import clsx from 'clsx';
 import React, { isValidElement } from 'react';
 import { Box } from "../Box/Box.js";
 import { Inline } from "../Inline/Inline.js";
@@ -13,39 +14,39 @@ export const BulletText = _ref => {
     children,
     bullet: Bullet = '•'
   } = _ref;
-  return _jsxs(Inline, {
+  return /*#__PURE__*/_jsxs(Inline, {
     as: as,
     noWrap: true,
     space: "3",
     alignX: "start",
     alignY: "center",
-    children: [isValidElement(Bullet) ? _jsx(Box, {
+    children: [/*#__PURE__*/isValidElement(Bullet) ? /*#__PURE__*/_jsx(Box, {
       position: "relative",
       flexShrink: 0,
       children: Bullet
-    }) : _jsx(Box, {
+    }) : /*#__PURE__*/_jsx(Box, {
       position: "relative",
-      flexShrink: "0",
+      flexShrink: 0,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      className: [styles.bullet, {
+      className: clsx(styles.bullet, {
         [styles.primary]: variant === 'primary',
         [styles.secondary]: variant !== 'primary'
-      }],
+      }),
       borderRadius: "pill",
-      children: _jsx(Text, {
-        className: {
+      children: /*#__PURE__*/_jsx(Text, {
+        className: clsx({
           [styles.primaryText]: variant === 'primary',
           [styles.secondaryText]: variant !== 'primary'
-        },
+        }),
         as: "span",
         size: "2",
         children: Bullet
       })
-    }), _jsx(Box, {
-      flexGrow: "1",
-      children: _jsx(Text, {
+    }), /*#__PURE__*/_jsx(Box, {
+      flexGrow: 1,
+      children: /*#__PURE__*/_jsx(Text, {
         as: "span",
         size: "4",
         display: "block",

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

@@ -90,8 +90,17 @@ export type ButtonShape = ButtonRecipeProps['shape'];
 export type ButtonIntent = ButtonRecipeProps['intent'];
 export type ButtonMinimal = ButtonRecipeProps['minimal'];
 export interface StyledButtonProps {
+    /**
+     * Button sizing
+     */
     size?: ButtonSize;
+    /**
+     * Button intentional colour scheme
+     */
     variant?: ButtonIntent;
+    /**
+     * Present a borderless minimal appearance
+     */
     minimal?: ButtonMinimal;
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAWlE,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,aAAa,QAExB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAGH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+OjB,CAAC;AAEH,KAAK,iBAAiB,GAAG,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AACvD,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AAEzD,MAAM,WAAW,iBAAiB;IAIjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAIlB,OAAO,CAAC,EAAE,YAAY,CAAC;IAIvB,OAAO,CAAC,EAAE,aAAa,CAAC;CACxB"}
+{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAWlE,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,aAAa,QAExB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAGH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+OjB,CAAC;AAEH,KAAK,iBAAiB,GAAG,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AACvD,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AAEzD,MAAM,WAAW,iBAAiB;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACxB"}

package/dist/components/Button/Button.css.js

@@ -20,6 +20,8 @@ export const hiddenContent = style({
 export const spinner = style({
   margin: '0 auto'
 }, "spinner");
+
+// Button recipe with all variants
 export const button = recipe({
   base: [{
     transitionTimingFunction: vars.animation.easing.standard,
@@ -41,6 +43,7 @@ export const button = recipe({
     }
   }, focusOutlineStyle],
   variants: {
+    // Size variants
     size: {
       small: {
         height: smallHeight
@@ -52,11 +55,13 @@ export const button = recipe({
         padding: `2px ${vars.space['2']}`
       }
     },
+    // Shape variants
     shape: {
       default: {},
       rounded: {},
       iconOnly: {}
     },
+    // Intent (color scheme) variants
     intent: {
       primary: {
         color: intentColors.primary.foreground,
@@ -113,6 +118,7 @@ export const button = recipe({
         }
       }
     },
+    // Miminal appearance variant
     minimal: {
       true: {
         color: vars.typography.colour.neutral,
@@ -122,7 +128,9 @@ export const button = recipe({
       false: []
     }
   },
-  compoundVariants: [{
+  compoundVariants: [
+  // Size and shape compound variants
+  {
     variants: {
       size: 'small',
       shape: 'default'
@@ -172,7 +180,9 @@ export const button = recipe({
     style: {
       width: vars.space['8']
     }
-  }, {
+  },
+  // Minimal compound variants per intent
+  {
     variants: {
       intent: 'primary',
       minimal: true

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

@@ -9,14 +9,23 @@ declare const defaultEnglish: {
     readonly loading: "loading";
 };
 type TextContent = keyof typeof defaultEnglish;
-export interface ButtonProps extends Pick<ButtonPrimitive, 'id' | 'onClick' | 'type' | 'className'>, Pick<AriaAttributes, 'aria-label'>, StyledButtonProps, TestId {
+export interface ButtonProps extends Pick<ButtonPrimitive, 'id' | 'onBlur' | 'onClick' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'type' | 'className'>, Pick<AriaAttributes, 'aria-label'>, StyledButtonProps, TestId {
     children: AllowedChildren | AllowedChildren[];
+    /**
+     * Disabling the button will prevent it from receiving keyboard focus or click events
+     */
     disabled?: boolean;
-    as?: ElementType | ReactElement;
+    is?: ElementType | ReactElement;
     isLoading?: boolean;
     isFullWidth?: boolean;
+    /**
+     * Pill shaped button appearance
+     */
     rounded?: boolean;
     withDoubleClicks?: boolean;
+    /**
+     * Language content override
+     */
     lang?: Partial<Record<TextContent, string>>;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EASN,KAAK,cAAc,EAEnB,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAEhB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAO1C,OAAO,KAAK,EAAc,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAElE,KAAK,eAAe,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AACvD,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAIzC,QAAA,MAAM,cAAc;;CAEV,CAAC;AAEX,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAE/C,MAAM,WAAW,WAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,EAClC,iBAAiB,EACjB,MAAM;IACP,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAI9C,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;IAItB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAI3B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;CAC5C;AA2BD,eAAO,MAAM,MAAM,uFA4KlB,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EASN,KAAK,cAAc,EAEnB,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAEhB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAO1C,OAAO,KAAK,EAAc,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAElE,KAAK,eAAe,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AACvD,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAIzC,QAAA,MAAM,cAAc;;CAEV,CAAC;AAEX,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAE/C,MAAM,WAAW,WAChB,SAAQ,IAAI,CACV,eAAe,EACb,IAAI,GACJ,QAAQ,GACR,SAAS,GACT,SAAS,GACT,cAAc,GACd,cAAc,GACd,MAAM,GACN,WAAW,CACb,EACD,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,EAClC,iBAAiB,EACjB,MAAM;IACP,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAC9C;;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,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;CAC5C;AA2BD,eAAO,MAAM,MAAM,uFAoLlB,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/components/Button/Button.js

@@ -34,19 +34,23 @@ const fontWeight = {
   small: 'semiBold',
   medium: 'semiBold'
 };
-export const Button = forwardRef((_ref, ref) => {
+export const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     className = '',
     disabled = false,
     id,
-    as: Component = 'button',
+    is: Component = 'button',
     withDoubleClicks = false,
     isLoading = false,
     isFullWidth = false,
     lang,
     minimal = false,
+    onBlur,
     onClick: incomingOnClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
     rounded = false,
     size = 'medium',
     type = 'button',
@@ -59,7 +63,9 @@ export const Button = forwardRef((_ref, ref) => {
     isSingleIconChild,
     props: maybeIconProps
   } = useMemo(() => {
-    const maybeIcon = isValidElement(children) && children.type === Icon;
+    const maybeIcon =
+    // @ts-expect-error This comparison appears to be unintentional
+    /*#__PURE__*/isValidElement(children) && children.type === Icon;
     const maybeProps = children;
     return maybeIcon ? {
       isSingleIconChild: true,
@@ -73,6 +79,8 @@ export const Button = forwardRef((_ref, ref) => {
     if (!withDoubleClicks) setFunctionallyDisabled(true);
     if (typeof incomingOnClick === 'function') incomingOnClick(event);
   }, [withDoubleClicks, incomingOnClick]);
+
+  // Determine shape based on rounded and iconOnly status
   const shape = useMemo(() => {
     if (isSingleIconChild) return 'iconOnly';
     if (rounded) return 'rounded';
@@ -81,7 +89,11 @@ export const Button = forwardRef((_ref, ref) => {
   const props = _objectSpread(_objectSpread({
     type: Component === 'button' ? type : undefined,
     id,
+    onBlur,
     onClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
     disabled: disabled || isLoading,
     'aria-label': isLoading ? language.loading : ariaLabel,
     className: clsx(componentStyles({
@@ -113,8 +125,8 @@ export const Button = forwardRef((_ref, ref) => {
   });
   const buttonContents = useMemo(() => {
     var _maybeIconProps$size;
-    return _jsx(_Fragment, {
-      children: isSingleIconChild && maybeIconProps ? _jsx(Icon, _objectSpread({
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: isSingleIconChild && maybeIconProps ? /*#__PURE__*/_jsx(Icon, _objectSpread({
         size: ((_maybeIconProps$size = maybeIconProps.size) !== null && _maybeIconProps$size !== void 0 ? _maybeIconProps$size : size === 'small') ? 'small' : 'medium'
       }, maybeIconProps)) : children
     });
@@ -124,39 +136,39 @@ export const Button = forwardRef((_ref, ref) => {
     if (functionallyDisabled) timeout = setTimeout(() => setFunctionallyDisabled(false), DOUBLE_CLICK_DETECTION_PERIOD);
     return () => timeout ? clearTimeout(timeout) : void 0;
   }, [functionallyDisabled]);
-  const child = isLoading ? _jsxs(Box, {
+  const child = isLoading ? /*#__PURE__*/_jsxs(Box, {
     display: "flex",
     justifyContent: "center",
     position: "relative",
     alignItems: "center",
     width: "full",
     height: "full",
-    children: [_jsx(Box, {
+    children: [/*#__PURE__*/_jsx(Box, {
       position: "absolute",
       alignItems: "center",
       justifyContent: "center",
       display: "flex",
       width: "full",
       height: "full",
-      children: _jsx(ProgressSpinner, {
+      children: /*#__PURE__*/_jsx(ProgressSpinner, {
         className: styles.spinner,
         colour: getSpinnerColour(variant, minimal)
       })
-    }), _jsx(Box, {
+    }), /*#__PURE__*/_jsx(Box, {
       height: "full",
       alignItems: "center",
       justifyContent: "center",
       className: [styles.body, styles.hiddenContent],
       children: buttonContents
     })]
-  }) : _jsx(Box, {
+  }) : /*#__PURE__*/_jsx(Box, {
     height: "full",
     alignItems: "center",
     justifyContent: "center",
     className: styles.body,
     children: buttonContents
   });
-  return isValidElement(Component) ? cloneElement(Component, _objectSpread({}, props), child) : createElement(Component, _objectSpread({}, props), child);
+  return /*#__PURE__*/isValidElement(Component) ? /*#__PURE__*/cloneElement(Component, _objectSpread({}, props), child) : /*#__PURE__*/createElement(Component, _objectSpread({}, props), child);
 });
 Button.displayName = 'Button';
 export default Button;

package/dist/components/CheckBox/CheckBox.d.ts

@@ -3,6 +3,10 @@ export interface CheckboxProps {
     className?: string;
     checked?: boolean;
     disabled?: boolean;
+    /**
+     * Used to set an individual checkbox to an inbetween state and sets `indeterminate` accordingly on the native
+     * input control. Toggling logic is left up to the parent component
+     */
     isIndeterminate?: boolean;
     name?: string;
     value: string;

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAqB,MAAM,OAAO,CAAC;AAWxE,MAAM,WAAW,aAAa;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,wFA0DpB,CAAC"}
+{"version":3,"file":"CheckBox.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAqB,MAAM,OAAO,CAAC;AAWxE,MAAM,WAAW,aAAa;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,wFA0DpB,CAAC"}

package/dist/components/CheckBox/CheckBox.js

@@ -14,7 +14,7 @@ import { CheckableBase } from "../private/CheckableBase/CheckableBase.js";
 import { checkableIndicator } from "../private/CheckableBase/CheckableBase.css.js";
 import * as styles from "./CheckBox.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const CheckBox = forwardRef((_ref, ref) => {
+export const CheckBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     value,
     className = '',
@@ -32,7 +32,7 @@ export const CheckBox = forwardRef((_ref, ref) => {
       internalRef.current.indeterminate = isIndeterminate;
     }
   }, [isIndeterminate]);
-  return _jsx(CheckableBase, {
+  return /*#__PURE__*/_jsx(CheckableBase, {
     ref: mergeRefs([ref, internalRef]),
     inputType: "checkbox",
     className: className,
@@ -43,14 +43,14 @@ export const CheckBox = forwardRef((_ref, ref) => {
     checked: checked,
     handleClick: onClick,
     handleChange: onChange,
-    children: _jsx(Box, _objectSpread(_objectSpread({
+    children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
       className: clsx(styles.checkbox.default, checkableIndicator, {
         [styles.checkbox.selected]: checked || isIndeterminate
       })
     }, dataAttrs({
       indeterminate: isIndeterminate
     })), {}, {
-      children: _jsx(Icon, {
+      children: /*#__PURE__*/_jsx(Icon, {
         icon: isIndeterminate ? MinusIcon : CheckIcon,
         size: "medium",
         className: styles.icon

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

@@ -1 +1 @@
-{"version":3,"file":"ColourInput.d.ts","sourceRoot":"","sources":["../../../lib/components/ColourInput/ColourInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,WAAW,8TAyEvB,CAAC"}
+{"version":3,"file":"ColourInput.d.ts","sourceRoot":"","sources":["../../../lib/components/ColourInput/ColourInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,WAAW,8TAyEvB,CAAC"}