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

package/dist/components/StarRating/StarRating.js

@@ -12,12 +12,12 @@ import { Text } from "../Text/Text.js";
 import * as styles from "./StarRating.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const totalStars = 5;
-export let EStarRatingSize = function (EStarRatingSize) {
+export let EStarRatingSize = /*#__PURE__*/function (EStarRatingSize) {
   EStarRatingSize["Medium"] = "medium";
   EStarRatingSize["Small"] = "small";
   return EStarRatingSize;
 }({});
-var EStarType = function (EStarType) {
+var EStarType = /*#__PURE__*/function (EStarType) {
   EStarType[EStarType["Full"] = 0] = "Full";
   EStarType[EStarType["Half"] = 1] = "Half";
   EStarType[EStarType["Empty"] = 2] = "Empty";
@@ -25,30 +25,30 @@ var EStarType = function (EStarType) {
 }(EStarType || {});
 const starSizeMap = new Map([[EStarRatingSize.Medium, 'medium'], [EStarRatingSize.Small, 'small']]);
 const labelSizeMap = new Map([[EStarRatingSize.Small, '3'], [EStarRatingSize.Medium, '4']]);
-export const StarRating = memo(_ref => {
+export const StarRating = /*#__PURE__*/memo(_ref => {
   let {
     className = '',
     rating,
     label = rating,
     size = EStarRatingSize.Medium
   } = _ref;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     className: className,
     odComponent: "star-rating",
-    children: _jsxs(Inline, {
+    children: /*#__PURE__*/_jsxs(Inline, {
       space: "4",
       alignY: "center",
-      children: [_jsx(Inline, {
+      children: [/*#__PURE__*/_jsx(Inline, {
         space: "none",
         alignY: "center",
         children: Array.from({
           length: totalStars
-        }).fill(0).map((_, index) => _jsx(Star, {
+        }).fill(0).map((_, index) => /*#__PURE__*/_jsx(Star, {
           index: index,
           rating: rating,
           size: size
         }, index))
-      }), label === null ? null : _jsx(Text, {
+      }), label === null ? null : /*#__PURE__*/_jsx(Text, {
         size: labelSizeMap.get(size),
         testId: "star-rating-label",
         children: label
@@ -59,9 +59,11 @@ export const StarRating = memo(_ref => {
 StarRating.displayName = 'StarRating';
 const getStarIconType = (index, rating) => {
   if (index + 1 <= Math.floor(rating)) {
+    // Is definitely full star
     return EStarType.Full;
   }
   if (index + 1 > Math.ceil(rating)) {
+    // Is definitely empty star
     return EStarType.Empty;
   }
   const decimalPart = Math.round((rating - index) * 1e1);
@@ -81,7 +83,7 @@ const Star = _ref2 => {
   } = _ref2;
   const starType = getStarIconType(index, rating);
   const star = starType === EStarType.Half ? StarHalfIcon : StarIcon;
-  return _jsx(Icon, {
+  return /*#__PURE__*/_jsx(Icon, {
     icon: star,
     size: starSizeMap.get(size),
     className: clsx(sprinkles({

package/dist/components/Stepper/Stepper.js

@@ -31,7 +31,7 @@ const Handle = _ref2 => {
     label,
     onClick
   } = _ref2;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     as: "button",
     className: [styles.handle.default, {
       [styles.handle.disabled]: disabled
@@ -48,7 +48,7 @@ const Handle = _ref2 => {
     disabled: disabled,
     tabIndex: -1,
     onClick: onClick,
-    children: _jsx(Icon, {
+    children: /*#__PURE__*/_jsx(Icon, {
       icon: icon,
       size: "small"
     })
@@ -109,7 +109,7 @@ export const Stepper = _ref3 => {
         }
     }
   }, [min, max, onDecrement, onIncrement, onChange]);
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     className: clsx(className, styles.root, disabled && styles.disabled),
     userSelect: "none",
     "aria-disabled": disabled,
@@ -122,18 +122,18 @@ export const Stepper = _ref3 => {
     minWidth: "fit-content",
     onKeyDown: keyDownHandler,
     odComponent: "stepper",
-    children: _jsxs(Inline, {
+    children: /*#__PURE__*/_jsxs(Inline, {
       alignX: "space-between",
       noWrap: true,
-      children: [_jsx(Box, {
-        children: _jsx(Handle, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(Handle, {
           icon: MinusIcon,
           label: "step down",
           disabled: disabled,
           onClick: onDecrement
         })
-      }), _jsx(Box, {
-        children: _jsx(Text, {
+      }), /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(Text, {
           as: "span",
           colour: "dark",
           display: "block",
@@ -141,8 +141,8 @@ export const Stepper = _ref3 => {
           size: "4",
           children: Number.isFinite(value) ? format(value) : ''
         })
-      }), _jsx(Box, {
-        children: _jsx(Handle, {
+      }), /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(Handle, {
           icon: PlusIcon,
           label: "step up",
           disabled: disabled,

package/dist/components/StickyBox/StickyBox.js

@@ -33,18 +33,19 @@ export const StickyBox = _ref => {
     const onScroll = () => {
       setWithShadow(parentElement.scrollTop > 3);
     };
+    // clean up code
     parentElement.removeEventListener('scroll', onScroll);
     parentElement.addEventListener('scroll', onScroll, {
       passive: true
     });
     return () => parentElement.removeEventListener('scroll', onScroll);
   }, [(_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.parentElement]);
-  return noPopShadow ? _jsx(Box, _objectSpread(_objectSpread({
+  return noPopShadow ? /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
     className: [className, styles.simpleRoot, styles.top[top], styles.zIndex[zIndex]],
     odComponent: "sticky-box"
   }, rest), {}, {
     children: children
-  })) : _jsx(Box, _objectSpread(_objectSpread({
+  })) : /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
     ref: containerRef,
     overflow: "hidden",
     className: clsx(className, styles.root, styles.top[top], styles.zIndex[zIndex]),
@@ -52,7 +53,7 @@ export const StickyBox = _ref => {
     boxShadow: withShadow ? boxShadow || '3' : void 0,
     odComponent: "sticky-box"
   }, rest), {}, {
-    children: _jsx(Box, {
+    children: /*#__PURE__*/_jsx(Box, {
       className: clsx(className, styles.content, {
         [styles.popped]: withShadow
       }),

package/dist/components/Switch/Switch.d.ts

@@ -9,8 +9,19 @@ export interface SwitchProps extends AriaSwitchProps, TestId {
     isSelected?: AriaSwitchProps['isSelected'];
     onChange?: AriaSwitchProps['onChange'];
     className?: string;
+    /**
+     * @deprecated use isDisabled instead
+     */
     disabled?: boolean;
+    /**
+     * @deprecated use isSelected instead
+     */
     toggled?: boolean;
 }
+/**
+ * The Switch component should be used with a label. The text that describes the switch can be passed in as children
+ * where it will be associated with the switch automatically. If it a more complex layout is and the text label is
+ * located outside the component ensure that `<Switch>` has an `id` and the label element has an `htmlFor` with that id.
+ */
 export declare const Switch: ({ className, disabled, toggled, isSelected, isDisabled, testId, ...incomingProps }: SwitchProps) => React.JSX.Element;
 //# sourceMappingURL=Switch.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAA2B,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAE3E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAQ1C,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,MAAM;IAC3D,iBAAiB,CAAC,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IACvD,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAInB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAOD,eAAO,MAAM,MAAM,GAAI,oFAQpB,WAAW,sBA2Cb,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAA2B,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAE3E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAQ1C,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,MAAM;IAC3D,iBAAiB,CAAC,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IACvD,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,oFAQpB,WAAW,sBA2Cb,CAAC"}

package/dist/components/Switch/Switch.js

@@ -14,6 +14,11 @@ import { textStyles } from "../Text/textStyles.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import * as styles from "./Switch.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The Switch component should be used with a label. The text that describes the switch can be passed in as children
+ * where it will be associated with the switch automatically. If it a more complex layout is and the text label is
+ * located outside the component ensure that `<Switch>` has an `id` and the label element has an `htmlFor` with that id.
+ */
 export const Switch = _ref => {
   let {
       className,
@@ -37,15 +42,15 @@ export const Switch = _ref => {
     isFocusVisible,
     focusProps
   } = useFocusRing();
-  return _jsxs(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     as: "label",
     className: [styles.base, className],
     testId: testId,
-    children: [_jsx(VisuallyHidden, {
-      children: _jsx("input", _objectSpread(_objectSpread(_objectSpread({}, inputProps), focusProps), {}, {
+    children: [/*#__PURE__*/_jsx(VisuallyHidden, {
+      children: /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread(_objectSpread({}, inputProps), focusProps), {}, {
         ref: ref
       }))
-    }), _jsx(Box, _objectSpread(_objectSpread({
+    }), /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
       className: [styles.toggle, textStyles({
         size: '5'
       }), {
@@ -57,7 +62,7 @@ export const Switch = _ref => {
       active: state.isSelected,
       'focus-visible': isFocusVisible
     })), {}, {
-      children: _jsx(Box, {
+      children: /*#__PURE__*/_jsx(Box, {
         className: [styles.handle.default, {
           [styles.handle.active]: state.isSelected
         }]

package/dist/components/Table/Table.css.js

@@ -7,6 +7,10 @@ export const root = style({
   display: 'grid',
   gridGap: '0',
   alignItems: 'stretch',
+  /*
+  This is here as our header row _could_ be position: sticky. When this is the
+  	case our table rows's still need their fancy row hover states.
+   */
   clipPath: 'inset(0)',
   clip: 'rect(0px, auto, auto, 0px)'
 }, "root");

package/dist/components/Table/Table.js

@@ -6,17 +6,23 @@ import { Box } from "../Box/Box.js";
 import * as styles from "./Table.css.js";
 import { TableContextProvider } from "./context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Table = forwardRef((_ref, ref) => {
+/*
+Worth noting we use the aria role grid here instead of table, as we have areas
+	of interactivity, ie our potential buttons, or sorter headers.
+
+@see https://www.w3.org/TR/wai-aria-1.1/#table
+ */
+export const Table = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     padding = '4',
     stickyHead = false,
     columnTemplate
   } = _ref;
-  return _jsx(TableContextProvider, {
+  return /*#__PURE__*/_jsx(TableContextProvider, {
     padding: padding,
     stickyHead: stickyHead,
-    children: _jsx(Box, {
+    children: /*#__PURE__*/_jsx(Box, {
       ref: ref,
       role: "grid",
       width: "full",

package/dist/components/Table/TableCell.css.js

@@ -6,6 +6,11 @@ import { style } from '@vanilla-extract/css';
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 export const root = style({
   borderBottomColor: vars.colours.gamut.black100,
+  /*
+  We do this hack, as our row's have no distinct element. Once subgrid is
+  	supported across browsers we can revisit this approach.
+  	@see https://caniuse.com/#feat=css-subgrid
+   */
   ':before': {
     display: 'block',
     content: '""',

package/dist/components/Table/TableCell.js

@@ -8,7 +8,7 @@ import { Text } from "../Text/Text.js";
 import * as styles from "./TableCell.css.js";
 import { useTableContext } from "./context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const TableCell = forwardRef((_ref, ref) => {
+export const TableCell = /*#__PURE__*/forwardRef((_ref, ref) => {
   var _ref2;
   let {
     padding: incomingPadding,
@@ -18,9 +18,12 @@ export const TableCell = forwardRef((_ref, ref) => {
   } = _ref;
   const tableContext = useTableContext();
   const padding = (_ref2 = incomingPadding !== null && incomingPadding !== void 0 ? incomingPadding : tableContext === null || tableContext === void 0 ? void 0 : tableContext.padding) !== null && _ref2 !== void 0 ? _ref2 : 'none';
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     ref: ref,
-    role: "gridcell",
+    role: "gridcell"
+    // TODO: look into use of `scope` prop on non table headinging cells
+    // scope="row"
+    ,
     display: "flex",
     alignItems: "center",
     position: "relative",
@@ -29,7 +32,7 @@ export const TableCell = forwardRef((_ref, ref) => {
     borderBottomWidth: "1",
     "aria-label": ariaLabel,
     className: styles.root,
-    children: typeof children === 'string' || typeof children === 'number' ? _jsx(Text, {
+    children: typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/_jsx(Text, {
       as: "span",
       colour: "dark",
       display: "block",

package/dist/components/Table/TableHeadCell.js

@@ -18,7 +18,7 @@ const sortToAria = sort => {
   if (sort === 'desc') return 'descending';
   return 'none';
 };
-export const TableHeadCell = forwardRef((_ref, ref) => {
+export const TableHeadCell = /*#__PURE__*/forwardRef((_ref, ref) => {
   var _ref2;
   let {
     align = 'left',
@@ -36,27 +36,27 @@ export const TableHeadCell = forwardRef((_ref, ref) => {
     }
   }, [onSort]);
   const shouldSort = typeof sort === 'string';
-  const sorter = _jsx(Icon, {
+  const sorter = /*#__PURE__*/_jsx(Icon, {
     icon: ArrowUpIcon,
     size: "small",
     className: clsx([styles.sorter.root, styles.sorter[sort !== null && sort !== void 0 ? sort : 'none']])
   });
-  const child = _jsxs(Inline, {
+  const child = /*#__PURE__*/_jsxs(Inline, {
     alignY: "center",
     alignX: alignmentToFlexAlignment(align),
     space: "1",
-    children: [align === 'right' && shouldSort ? sorter : null, _jsxs(Text, {
+    children: [align === 'right' && shouldSort ? sorter : null, /*#__PURE__*/_jsxs(Text, {
       strong: true,
       size: "3",
       as: "span",
       className: styles.text,
-      children: [children, shouldSort ? _jsxs(VisuallyHidden, {
+      children: [children, shouldSort ? /*#__PURE__*/_jsxs(VisuallyHidden, {
         as: "span",
         children: [' ', "sorted ", sortToAria(sort)]
       }) : null]
     }), (align === 'left' || align === 'center') && shouldSort ? sorter : null]
   });
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     as: "th",
     ref: ref,
     role: "columnheader",
@@ -71,7 +71,7 @@ export const TableHeadCell = forwardRef((_ref, ref) => {
     "aria-label": ariaLabel,
     className: tableContext.stickyHead && styles.sticky,
     onClick: sort ? sortClickHandler : undefined,
-    children: sort ? _jsx(Box, {
+    children: sort ? /*#__PURE__*/_jsx(Box, {
       as: "button",
       display: "block",
       width: "full",

package/dist/components/Table/TableRow.js

@@ -4,12 +4,12 @@ import * as React from 'react';
 import { forwardRef } from 'react';
 import { Box } from "../Box/Box.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const TableRow = forwardRef((_ref, ref) => {
+export const TableRow = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     onClick
   } = _ref;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     ref: ref,
     display: "contents",
     role: "row",

package/dist/components/Table/TableRowGroup.js

@@ -4,11 +4,11 @@ import * as React from 'react';
 import { forwardRef } from 'react';
 import { Box } from "../Box/Box.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const TableRowGroup = forwardRef((_ref, ref) => {
+export const TableRowGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     ref: ref,
     role: "rowgroup",
     display: "contents",

package/dist/components/Table/context.js

@@ -4,7 +4,7 @@ import { invariant } from '@autoguru/utilities';
 import * as React from 'react';
 import { createContext, useContext, useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-const tableContext = createContext(null);
+const tableContext = /*#__PURE__*/createContext(null);
 export const TableContextProvider = _ref => {
   let {
     padding,
@@ -15,7 +15,7 @@ export const TableContextProvider = _ref => {
     padding,
     stickyHead
   }), [padding, stickyHead]);
-  return _jsx(tableContext.Provider, {
+  return /*#__PURE__*/_jsx(tableContext.Provider, {
     value: value,
     children: children
   });

package/dist/components/Tabs/Tab.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { ElementType, ReactElement, ReactNode } from 'react';
-export interface TabProps {
+export interface Props {
     children?: ReactNode;
     id?: string;
-    as?: ElementType | ReactElement;
+    is?: ElementType | ReactElement;
     indication?: number;
 }
-export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Tab: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default Tab;
 //# sourceMappingURL=Tab.d.ts.map

package/dist/components/Tabs/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGN,WAAW,EAGX,YAAY,EACZ,SAAS,EAET,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,QAAQ;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,GAAG,iFA+Ef,CAAC;AAIF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGN,WAAW,EAGX,YAAY,EACZ,SAAS,EAET,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,KAAK;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,GAAG,8EA+Ef,CAAC;AAIF,eAAe,GAAG,CAAC"}

package/dist/components/Tabs/Tab.js

@@ -12,12 +12,12 @@ import * as styles from "./Tab.css.js";
 import { TabListContext } from "./TabList.js";
 import { TabsContext } from "./Tabs.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Tab = forwardRef((_ref, ref) => {
+export const Tab = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     id: incomingId = null,
     indication = null,
-    as: Component = 'button'
+    is: Component = 'button'
   } = _ref;
   const tabsContext = useContext(TabsContext);
   const tabListContext = useContext(TabListContext);
@@ -52,15 +52,15 @@ export const Tab = forwardRef((_ref, ref) => {
     },
     ref
   };
-  const child = _jsxs(Inline, {
+  const child = /*#__PURE__*/_jsxs(Inline, {
     noWrap: true,
     space: "2",
     alignY: "center",
     alignX: "center",
-    children: [_jsx("span", {
+    children: [/*#__PURE__*/_jsx("span", {
       className: styles.item,
       children: children
-    }), typeof indication === 'number' && _jsx(Text, {
+    }), typeof indication === 'number' && /*#__PURE__*/_jsx(Text, {
       strong: true,
       as: "span",
       size: "2",
@@ -74,7 +74,7 @@ export const Tab = forwardRef((_ref, ref) => {
       children: indication
     })]
   });
-  return isValidElement(Component) ? cloneElement(Component, props, child) : createElement(Component, props, child);
+  return /*#__PURE__*/isValidElement(Component) ? /*#__PURE__*/cloneElement(Component, props, child) : /*#__PURE__*/createElement(Component, props, child);
 });
 Tab.displayName = 'Tab';
 export default Tab;

package/dist/components/Tabs/TabList.js

@@ -16,7 +16,7 @@ const defaultEnglish = {
   next: 'scroll tabs right',
   prev: 'scroll tabs left'
 };
-export const TabListContext = createContext(null);
+export const TabListContext = /*#__PURE__*/createContext(null);
 export const TabList = _ref => {
   let {
     children,
@@ -27,8 +27,8 @@ export const TabList = _ref => {
   const wrapperRef = useRef(null);
   const innerRef = useRef(null);
   const tabs = Children.map(flattenChildren(children), (child, index) => {
-    if (!isValidElement(child)) return null;
-    return _jsx(TabListContext.Provider, {
+    if (! /*#__PURE__*/isValidElement(child)) return null;
+    return /*#__PURE__*/_jsx(TabListContext.Provider, {
       value: index,
       children: child
     });
@@ -86,13 +86,13 @@ export const TabList = _ref => {
     updateScrollButtonState();
   }, [children, updateScrollButtonState]);
   const shouldShowScrollButtons = scrollable && (displayScroll.start || displayScroll.end);
-  return _jsxs(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     alignItems: "center",
     className: styles.styledTabList({
       appearance,
       scroll: scrollable
     }),
-    children: [shouldShowScrollButtons ? _jsx(Button, {
+    children: [shouldShowScrollButtons ? /*#__PURE__*/_jsx(Button, {
       minimal: true,
       rounded: true,
       withDoubleClicks: true,
@@ -100,14 +100,14 @@ export const TabList = _ref => {
       disabled: !displayScroll.start,
       onClick: handleStartButton,
       "aria-label": defaultEnglish.prev,
-      children: _jsx(Icon, {
+      children: /*#__PURE__*/_jsx(Icon, {
         icon: ArrowLeftIcon
       })
-    }) : null, _jsx(Box, {
+    }) : null, /*#__PURE__*/_jsx(Box, {
       ref: wrapperRef,
       className: [scrollable && styles.listWrapperScroll],
       onScroll: handleOnScroll,
-      children: _jsx(Box, {
+      children: /*#__PURE__*/_jsx(Box, {
         ref: innerRef,
         display: stretch ? 'flex' : 'block',
         flexWrap: "nowrap",
@@ -119,7 +119,7 @@ export const TabList = _ref => {
         }),
         children: tabs
       })
-    }), shouldShowScrollButtons ? _jsx(Button, {
+    }), shouldShowScrollButtons ? /*#__PURE__*/_jsx(Button, {
       minimal: true,
       rounded: true,
       withDoubleClicks: true,
@@ -127,7 +127,7 @@ export const TabList = _ref => {
       disabled: !displayScroll.end,
       onClick: handleEndButton,
       "aria-label": defaultEnglish.next,
-      children: _jsx(Icon, {
+      children: /*#__PURE__*/_jsx(Icon, {
         icon: ArrowRightIcon
       })
     }) : null]

package/dist/components/Tabs/TabPane.js

@@ -22,7 +22,7 @@ export const TabPane = _ref => {
   } = tabPanesContext;
   const myId = typeof incomingId === 'string' ? incomingId : `${tabsContext.id}-${paneIndex}-tab`;
   const isActive = tabsContext.activeIndex === paneIndex;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     display: isActive ? undefined : 'none',
     "aria-hidden": isActive ? undefined : true,
     className: styles.root,

package/dist/components/Tabs/TabPanes.d.ts

@@ -8,6 +8,7 @@ interface TabPanesContextValue {
 }
 export declare const TabPanesContext: React.Context<TabPanesContextValue | null>;
 interface TabPanesProps extends Pick<ComponentProps<typeof Box>, 'paddingTop' | 'paddingBottom'> {
+    /** Render tab panels even when visually hidden. */
     renderInactivePanes?: boolean;
     children?: ReactNode;
 }

package/dist/components/Tabs/TabPanes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanes.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabPanes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA2B,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAIjC,UAAU,oBAAoB;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,4CAAmD,CAAC;AAEhF,UAAU,aACT,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,YAAY,GAAG,eAAe,CAAC;IAExE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAuBrD,CAAC"}
+{"version":3,"file":"TabPanes.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabPanes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA2B,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAIjC,UAAU,oBAAoB;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,4CAAmD,CAAC;AAEhF,UAAU,aACT,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,YAAY,GAAG,eAAe,CAAC;IACxE,mDAAmD;IACnD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAuBrD,CAAC"}

package/dist/components/Tabs/TabPanes.js

@@ -6,7 +6,7 @@ import flattenChildren from 'react-keyed-flatten-children';
 import { Box } from "../Box/Box.js";
 import * as styles from "./TabPanes.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const TabPanesContext = createContext(null);
+export const TabPanesContext = /*#__PURE__*/createContext(null);
 export const TabPanes = _ref => {
   let {
     renderInactivePanes = false,
@@ -14,12 +14,12 @@ export const TabPanes = _ref => {
     paddingTop = '6',
     paddingBottom = '6'
   } = _ref;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     paddingTop: paddingTop,
     paddingBottom: paddingBottom,
     className: styles.root,
     width: "full",
-    children: Children.map(flattenChildren(children), (child, index) => _jsx(TabPanesContext.Provider, {
+    children: Children.map(flattenChildren(children), (child, index) => /*#__PURE__*/_jsx(TabPanesContext.Provider, {
       value: {
         paneIndex: index,
         renderInactive: renderInactivePanes

package/dist/components/Tabs/Tabs.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { createContext, useMemo } from 'react';
 import { useId, useUncontrolledState } from "../../utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const TabsContext = createContext(null);
+export const TabsContext = /*#__PURE__*/createContext(null);
 export const Tabs = _ref => {
   let {
     id: incomingId,
@@ -15,7 +15,7 @@ export const Tabs = _ref => {
   } = _ref;
   const [activeState, setActiveState] = useUncontrolledState(active, onChange);
   const id = useId(incomingId !== null && incomingId !== void 0 ? incomingId : undefined);
-  return _jsx(TabsContext.Provider, {
+  return /*#__PURE__*/_jsx(TabsContext.Provider, {
     value: useMemo(() => ({
       id,
       activeIndex: activeState,

package/dist/components/Text/Text.d.ts

@@ -1,12 +1,10 @@
-import type { ClassValue as ClassName } from 'clsx';
-import React, { type ComponentProps } from 'react';
+import React from 'react';
 import { type Sprinkles } from '../../styles/sprinkles.css';
 import type { TestId } from '../../types';
 import type { TextStyleProps } from './textStyles';
-type ElementAttributes = React.ComponentPropsWithoutRef<'p'> & Pick<ComponentProps<'label'>, 'htmlFor'>;
+type ElementAttributes = React.ComponentPropsWithoutRef<'p'> & Pick<React.ComponentProps<'label'>, 'htmlFor'>;
 type AdditionalStyleProps = Pick<Sprinkles, 'display' | 'm' | 'mb' | 'ml' | 'mr' | 'mt' | 'mx' | 'my' | 'margin' | 'marginBottom' | 'marginLeft' | 'marginRight' | 'marginTop' | 'marginX' | 'marginY' | 'p' | 'pb' | 'pl' | 'pr' | 'pt' | 'px' | 'py' | 'padding' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'paddingX' | 'paddingY'>;
-export interface TextProps extends Omit<ElementAttributes, 'className' | 'color' | 'is'>, AdditionalStyleProps, TextStyleProps, TestId {
-    className?: ClassName;
+export interface TextProps extends Omit<ElementAttributes, 'color' | 'is'>, AdditionalStyleProps, TextStyleProps, TestId {
 }
 export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAG1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,KAAK,iBAAiB,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAC3D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;AAE1C,KAAK,oBAAoB,GAAG,IAAI,CAC/B,SAAS,EACP,SAAS,GACT,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,aAAa,GACb,WAAW,GACX,SAAS,GACT,SAAS,GACT,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,SAAS,GACT,eAAe,GACf,aAAa,GACb,cAAc,GACd,YAAY,GACZ,UAAU,GACV,UAAU,CACZ,CAAC;AAEF,MAAM,WAAW,SAChB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC,EAC5D,oBAAoB,EACpB,cAAc,EACd,MAAM;IACP,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB;AAmBD,eAAO,MAAM,IAAI,+EA+ChB,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAG1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,KAAK,iBAAiB,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAC3D,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;AAEhD,KAAK,oBAAoB,GAAG,IAAI,CAC/B,SAAS,EACP,SAAS,GACT,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,aAAa,GACb,WAAW,GACX,SAAS,GACT,SAAS,GACT,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,SAAS,GACT,eAAe,GACf,aAAa,GACb,cAAc,GACd,YAAY,GACZ,UAAU,GACV,UAAU,CACZ,CAAC;AAEF,MAAM,WAAW,SAChB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,IAAI,CAAC,EAC9C,oBAAoB,EACpB,cAAc,EACd,MAAM;CAAG;AAEX,eAAO,MAAM,IAAI,+EA+ChB,CAAC"}