@autoguru/overdrive 4.42.0-next.1 → 4.43.0-next.0

package/dist/components/Stepper/Stepper.css.js

@@ -3,26 +3,18 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Stepper/Stepper.css.ts", "@autoguru/overdrive");
 import { style, styleVariants } from '@vanilla-extract/css';
+import { sprinklesResponsive } from "../../styles/sprinkles.css.js";
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 export const disabled = style({
   cursor: 'not-allowed'
 }, "disabled");
 export const root = style({
-  width: 'max-content',
   selectors: {
     [`&:not(${disabled}):focus`]: {
       borderColor: vars.colours.intent.information.background.standard
     }
   }
 }, "root");
-export const width = styleVariants({
-  full: {
-    width: '100%'
-  },
-  default: {
-    width: 'max-content'
-  }
-}, "width");
 export const handle = styleVariants({
   default: {
     width: vars.space[6],
@@ -41,7 +33,10 @@ export const handle = styleVariants({
     cursor: 'not-allowed'
   }
 }, "handle");
-export const label = style({
-  minWidth: vars.space['8']
-}, "label");
+export const label = [sprinklesResponsive({
+  textAlign: 'center',
+  width: 'full'
+}), style({
+  minWidth: vars.space['6']
+}, "label")];
 __vanilla_filescope__.endFileScope();

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

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../lib/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAIA,OAAO,EACN,iBAAiB,EAIjB,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAkDD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAiI5C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../lib/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAIA,OAAO,EACN,iBAAiB,EAIjB,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAkDD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAsH5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Stepper/Stepper.js

@@ -6,9 +6,9 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { useCallback } from 'react';
 import { addWithSafeDecimal } from "../../utils/number.js";
-import { Box, useBoxStyles } from "../Box/index.js";
-import { Column, Columns } from "../Columns/index.js";
+import { Box, boxStyles } from "../Box/index.js";
 import { Icon } from "../Icon/index.js";
+import { Inline } from "../Inline/index.js";
 import { Text, useTextStyles } from "../Text/index.js";
 import * as styles from "./Stepper.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -31,7 +31,7 @@ const Handle = _ref2 => {
     onClick
   } = _ref2;
   return _jsx(Box, {
-    is: "button",
+    as: "button",
     className: [styles.handle.default, {
       [styles.handle.disabled]: disabled
     }, useTextStyles({
@@ -109,12 +109,9 @@ export const Stepper = _ref3 => {
     }
   }, [min, max, onDecrement, onIncrement, onChange]);
   return _jsx(Box, {
-    className: clsx(className, styles.root, useBoxStyles({
-      is: 'button'
-    }), disabled && styles.disabled, {
-      [styles.width.default]: !isFullWidth,
-      [styles.width.full]: isFullWidth
-    }),
+    className: clsx(className, styles.root, boxStyles({
+      as: 'button'
+    }), disabled && styles.disabled),
     userSelect: "none",
     "aria-disabled": disabled,
     tabIndex: 0,
@@ -122,41 +119,29 @@ export const Stepper = _ref3 => {
     borderColour: "gray",
     padding: "3",
     borderRadius: "1",
-    boxShadow: "2",
+    width: isFullWidth ? 'full' : 'fit-content',
+    minWidth: "fit-content",
     onKeyDown: keyDownHandler,
-    children: _jsxs(Columns, {
+    children: _jsxs(Inline, {
+      alignX: "space-between",
       noWrap: true,
-      width: "full",
-      children: [_jsx(Column, {
-        noShrink: true,
-        alignSelf: "centre",
+      children: [_jsx(Box, {
         children: _jsx(Handle, {
           icon: MinusIcon,
           label: "step down",
           disabled: disabled,
           onClick: onDecrement
         })
-      }), _jsx(Column, {
-        noShrink: true,
-        grow: true,
-        width: "auto",
-        alignSelf: "centre",
+      }), _jsx(Box, {
         children: _jsx(Text, {
-          is: "span",
-          align: "center",
+          as: "span",
           colour: "dark",
           display: "block",
-          className: clsx(useBoxStyles({
-            paddingX: '2',
-            width: 'full',
-            is: 'span'
-          }), styles.label),
+          className: clsx(styles.label),
           size: "4",
           children: Number.isFinite(value) ? format(value) : ''
         })
-      }), _jsx(Column, {
-        noShrink: true,
-        alignSelf: "centre",
+      }), _jsx(Box, {
         children: _jsx(Handle, {
           icon: PlusIcon,
           label: "step up",

package/dist/components/Table/TableCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAQ7C,MAAM,WAAW,KAAM,SAAQ,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAEhC,QAAQ,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,8EA4CrB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAQ7C,MAAM,WAAW,KAAM,SAAQ,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAEhC,QAAQ,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,8EA6CrB,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/dist/components/Table/TableCell.js

@@ -21,12 +21,11 @@ export const TableCell = forwardRef((_ref, ref) => {
   return _jsx(Box, {
     ref: ref,
     role: "gridcell",
-    scope: "row",
     display: "flex",
     alignItems: "center",
     justifyContent: alignmentToFlexAlignment(align),
     padding: padding,
-    borderWidthBottom: "1",
+    borderBottomWidth: "1",
     "aria-label": ariaLabel,
     className: styles.root,
     children: typeof children === 'string' || typeof children === 'number' ? _jsx(Text, {
@@ -39,4 +38,5 @@ export const TableCell = forwardRef((_ref, ref) => {
     }) : children
   });
 });
+TableCell.displayName = 'TableCell';
 export default TableCell;

package/dist/components/Table/TableHeadCell.d.ts

@@ -9,6 +9,6 @@ export interface Props extends Partial<Pick<AriaAttributes, 'aria-label'>>, Pick
     onSort?: (event: MouseEvent) => void;
     children?: string | null;
 }
-export declare const TableHeadCell: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export declare const TableHeadCell: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLTableCellElement>>;
 export default TableHeadCell;
 //# sourceMappingURL=TableHeadCell.d.ts.map

package/dist/components/Table/TableHeadCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableHeadCell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,EAA4B,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAS7B,KAAK,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpC,MAAM,WAAW,KAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,SAAS,CAAC;IAC5C,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAErC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAUD,eAAO,MAAM,aAAa,8EA6FzB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TableHeadCell.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableHeadCell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,EAA4B,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAS7B,KAAK,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpC,MAAM,WAAW,KAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,SAAS,CAAC;IAC5C,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAErC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAUD,eAAO,MAAM,aAAa,oFA8FzB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/dist/components/Table/TableHeadCell.js

@@ -57,6 +57,7 @@ export const TableHeadCell = forwardRef((_ref, ref) => {
     }), (align === 'left' || align === 'center') && shouldSort ? sorter : null]
   });
   return _jsx(Box, {
+    as: "th",
     ref: ref,
     role: "columnheader",
     scope: "col",
@@ -64,8 +65,8 @@ export const TableHeadCell = forwardRef((_ref, ref) => {
     alignItems: "center",
     justifyContent: alignmentToFlexAlignment(align),
     padding: sort ? undefined : padding,
-    borderColourBottom: "dark",
-    borderWidthBottom: "1",
+    borderBottomColour: "dark",
+    borderBottomWidth: "1",
     "aria-sort": shouldSort ? sortToAria(sort) : undefined,
     "aria-label": ariaLabel,
     className: tableContext.stickyHead && styles.sticky,
@@ -81,4 +82,5 @@ export const TableHeadCell = forwardRef((_ref, ref) => {
     }) : child
   });
 });
+TableHeadCell.displayName = 'TableHeadCell';
 export default TableHeadCell;

package/dist/components/Tabs/Tab.js

@@ -4,7 +4,7 @@ import { invariant } from '@autoguru/utilities';
 import clsx from 'clsx';
 import * as React from 'react';
 import { cloneElement, createElement, forwardRef, isValidElement, useContext } from 'react';
-import { useBoxStyles } from "../Box/index.js";
+import { boxStyles } from "../Box/index.js";
 import { Inline } from "../Inline/index.js";
 import { Text, useTextStyles } from "../Text/index.js";
 import * as styles from "./Tab.css.js";
@@ -27,11 +27,11 @@ export const Tab = forwardRef((_ref, ref) => {
   const isActive = tabsContext.activeIndex === tabListContext;
   const controlsId = typeof incomingId === 'string' ? incomingId : `${tabsContext.id}-${tabListContext}-tab`;
   const props = {
-    className: clsx(useBoxStyles({
-      is: typeof Component === 'string' ? Component : 'button',
-      display: 'inlineFlex',
+    className: clsx(boxStyles({
+      as: typeof Component === 'string' ? Component : 'button',
+      display: 'inline-flex',
       justifyContent: 'center',
-      backgroundColour: 'transparent'
+      backgroundColor: 'transparent'
     }), useTextStyles({
       noWrap: true,
       size: '3',

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

@@ -1,9 +1,11 @@
 import React from 'react';
-import type { BoxStyleProps } from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
+import type { UseBoxProps } from '../Box';
 import { TextStyleProps } from './useTextStyles';
-type Display = Extract<BoxStyleProps['display'], 'inline' | 'inlineBlock' | 'block'>;
+type Display = Extract<UseBoxProps['display'], 'inline' | 'inline-block' | 'block'>;
 type ElementAttributes = React.ComponentPropsWithoutRef<'p'> & Pick<React.ComponentProps<'label'>, 'htmlFor'>;
 export interface TextProps extends Omit<ElementAttributes, 'color' | 'is'>, TextStyleProps {
+    color?: Sprinkles['color'];
     strong?: boolean;
     display?: Display;
 }

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,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAiB,MAAM,iBAAiB,CAAC;AAEhE,KAAK,OAAO,GAAG,OAAO,CACrB,aAAa,CAAC,SAAS,CAAC,EACxB,QAAQ,GAAG,aAAa,GAAG,OAAO,CAClC,CAAC;AACF,KAAK,iBAAiB,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAC3D,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;AAEhD,MAAM,WAAW,SAChB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,IAAI,CAAC,EAC9C,cAAc;IAEf,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,IAAI,8GA6ChB,CAAC;AAIF,eAAe,IAAI,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,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAGvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAG1C,OAAO,EAAE,cAAc,EAAiB,MAAM,iBAAiB,CAAC;AAEhE,KAAK,OAAO,GAAG,OAAO,CACrB,WAAW,CAAC,SAAS,CAAC,EACtB,QAAQ,GAAG,cAAc,GAAG,OAAO,CACnC,CAAC;AACF,KAAK,iBAAiB,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAC3D,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;AAEhD,MAAM,WAAW,SAChB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,IAAI,CAAC,EAC9C,cAAc;IAEf,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAE3B,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,IAAI,8GA0ChB,CAAC;AAIF,eAAe,IAAI,CAAC"}

package/dist/components/Text/Text.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "className", "is", "as", "testId", "align", "colour", "color", "display", "fontWeight", "transform", "breakWord", "noWrap", "size", "strong"];
+const _excluded = ["children", "className", "is", "as", "testId", "colour", "display", "fontWeight", "transform", "breakWord", "noWrap", "size", "strong"];
 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; }
 import React from 'react';
@@ -17,9 +17,7 @@ export const Text = React.forwardRef((_ref, ref) => {
       is = 'span',
       as = is,
       testId,
-      align = 'left',
       colour,
-      color = colour,
       display,
       fontWeight = 'normal',
       transform,
@@ -33,11 +31,10 @@ export const Text = React.forwardRef((_ref, ref) => {
     as: as,
     ref: ref,
     display: display,
-    textAlign: align,
     className: [useTextStyles({
       as,
       size,
-      color: color !== null && color !== void 0 ? color : strong ? 'dark' : undefined,
+      colour: colour !== null && colour !== void 0 ? colour : strong ? 'dark' : undefined,
       fontWeight: strong ? 'bold' : fontWeight,
       transform,
       noWrap,

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

@@ -1 +1 @@
-{"version":3,"file":"Text.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/Text.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAS9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAe3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAKF,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC"}
+{"version":3,"file":"Text.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/Text.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAS9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAe3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAKF,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC"}

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

@@ -1,6 +1,6 @@
 export declare const root: string;
 export declare const sizes: Record<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9", string>;
-export declare const colours: Record<"link" | "white" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | "muted", string>;
+export declare const colours: Record<"link" | "white" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | "muted" | "unset", string>;
 export declare const fontWeight: Record<"bold" | "normal" | "semiBold", string>;
 export declare const noWrap: string;
 export declare const breakWord: string;

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

@@ -1 +1 @@
-{"version":3,"file":"useTextStyles.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/useTextStyles.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,KAAK,qEAWjB,CAAC;AAEF,eAAO,MAAM,OAAO,4KAEnB,CAAC;AAEF,eAAO,MAAM,UAAU,gDAEtB,CAAC;AAEF,eAAO,MAAM,MAAM,QAAkC,CAAC;AACtD,eAAO,MAAM,SAAS,QAAqC,CAAC;AAE5D,eAAO,MAAM,SAAS,4CAKrB,CAAC"}
+{"version":3,"file":"useTextStyles.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/useTextStyles.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,KAAK,qEAWjB,CAAC;AAEF,eAAO,MAAM,OAAO,sLAKlB,CAAC;AAEH,eAAO,MAAM,UAAU,gDAEtB,CAAC;AAEF,eAAO,MAAM,MAAM,QAAkC,CAAC;AACtD,eAAO,MAAM,SAAS,QAAqC,CAAC;AAE5D,eAAO,MAAM,SAAS,4CAKrB,CAAC"}

package/dist/components/Text/useTextStyles.css.js

@@ -25,7 +25,11 @@ export const sizes = styleVariants(Object.entries(vars.typography.size).reduce((
     }
   });
 }, {}), "sizes");
-export const colours = styleVariants(mapTokenToProperty(vars.typography.colour, 'color'), "colours");
+export const colours = styleVariants(_objectSpread(_objectSpread({}, mapTokenToProperty(vars.typography.colour, 'color')), {}, {
+  unset: {
+    color: 'unset'
+  }
+}), "colours");
 export const fontWeight = styleVariants(mapTokenToProperty(vars.typography.fontWeight, 'fontWeight'), "fontWeight");
 export const noWrap = style({
   whiteSpace: 'nowrap'

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

@@ -1,14 +1,13 @@
-import type { BoxStyleProps } from '../Box';
+import type { UseBoxProps } from '../Box';
 import * as styles from './useTextStyles.css';
-export type TextColor = keyof typeof styles.colours | 'unset';
+export type TextColor = keyof typeof styles.colours;
 export type TextFontWeight = keyof typeof styles.fontWeight;
 export type TextSize = keyof typeof styles.sizes;
 export type TextTransform = keyof typeof styles.transform;
 export type TextTags = 'p' | 'label' | 'span';
 export interface TextStyleProps {
-    align?: BoxStyleProps['textAlign'];
+    align?: UseBoxProps['textAlign'];
     as?: TextTags;
-    color?: TextColor;
     colour?: TextColor;
     fontWeight?: TextFontWeight;
     is?: TextTags;
@@ -17,6 +16,6 @@ export interface TextStyleProps {
     size?: TextSize;
     transform?: TextTransform;
 }
-export declare const useTextStyles: ({ align, colour, color, fontWeight, is, as, noWrap, breakWord, size, transform, }: TextStyleProps) => string;
+export declare const useTextStyles: ({ align, colour, fontWeight, is, as, noWrap, breakWord, size, transform, }: TextStyleProps) => string;
 export default useTextStyles;
 //# sourceMappingURL=useTextStyles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTextStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/useTextStyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;AAC5D,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,cAAc;IAE9B,KAAK,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAEnC,EAAE,CAAC,EAAE,QAAQ,CAAC;IAEd,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,UAAU,CAAC,EAAE,cAAc,CAAC;IAE5B,EAAE,CAAC,EAAE,QAAQ,CAAC;IAEd,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,eAAO,MAAM,aAAa,GAAI,mFAW3B,cAAc,WAWhB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"useTextStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/useTextStyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAG1C,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAG9C,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;AACpD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;AAC5D,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,cAAc;IAE9B,KAAK,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEjC,EAAE,CAAC,EAAE,QAAQ,CAAC;IAEd,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,UAAU,CAAC,EAAE,cAAc,CAAC;IAE5B,EAAE,CAAC,EAAE,QAAQ,CAAC;IAEd,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,eAAO,MAAM,aAAa,GAAI,4EAU3B,cAAc,WAWhB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/Text/useTextStyles.js

@@ -1,13 +1,12 @@
 "use strict";
 
 import clsx from 'clsx';
-import { useBoxStyles } from "../Box/index.js";
+import { boxStyles } from "../Box/index.js";
 import * as styles from "./useTextStyles.css.js";
 export const useTextStyles = _ref => {
   let {
     align,
     colour,
-    color = colour,
     fontWeight,
     is,
     as = is,
@@ -16,9 +15,9 @@ export const useTextStyles = _ref => {
     size,
     transform
   } = _ref;
-  return clsx(styles.root, useBoxStyles({
+  return clsx(styles.root, boxStyles({
     as,
     textAlign: align
-  }), color !== 'unset' && styles.colours[color !== null && color !== void 0 ? color : 'neutral'], fontWeight && styles.fontWeight[fontWeight], noWrap && styles.noWrap, breakWord && styles.breakWord, size && styles.sizes[size], transform && styles.transform[transform]);
+  }), colour !== 'unset' && styles.colours[colour !== null && colour !== void 0 ? colour : 'neutral'], fontWeight && styles.fontWeight[fontWeight], noWrap && styles.noWrap, breakWord && styles.breakWord, size && styles.sizes[size], transform && styles.transform[transform]);
 };
 export default useTextStyles;

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

@@ -1 +1 @@
-{"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../../lib/components/TextAreaInput/TextAreaInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,eAAO,MAAM,aAAa,yXA2BzB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../../lib/components/TextAreaInput/TextAreaInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,eAAO,MAAM,aAAa,yXA4BzB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/TextAreaInput/TextAreaInput.js

@@ -21,12 +21,13 @@ export const TextAreaInput = withEnhancedInput(_ref => {
       size
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return _jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    as: "textarea"
-  }, eventHandlers), field), rest), {}, {
-    autoComplete: "off",
-    maxLength: rest.maxLength || MAX_TEXT_AREA_INPUT_LENGTH
-  }));
+  return (_jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      as: "textarea"
+    }, eventHandlers), field), rest), {}, {
+      autoComplete: "off",
+      maxLength: rest.maxLength || MAX_TEXT_AREA_INPUT_LENGTH
+    }))
+  );
 }, {
   primitiveType: 'textarea',
   withSuffixIcon: false,

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

@@ -1 +1 @@
-{"version":3,"file":"TextBubble.d.ts","sourceRoot":"","sources":["../../../lib/components/TextBubble/TextBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,GAAG,EAAgB,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,MAAM,WAAW,KAChB,SAAQ,IAAI,CACX,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,cAAc,GAAG,UAAU,GAAG,SAAS,CACvC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAaD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CAoD/C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"TextBubble.d.ts","sourceRoot":"","sources":["../../../lib/components/TextBubble/TextBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,GAAG,EAAa,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,MAAM,WAAW,KAChB,SAAQ,IAAI,CACX,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,cAAc,GAAG,UAAU,GAAG,SAAS,CACvC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAaD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CAoD/C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/TextBubble/TextBubble.js

@@ -8,7 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import clsx from 'clsx';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { Box, useBoxStyles } from "../Box/index.js";
+import { Box, boxStyles } from "../Box/index.js";
 import { Text } from "../Text/index.js";
 import * as styles from "./TextBubble.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -49,7 +49,7 @@ export const TextBubble = _ref => {
   return _jsx(Box, _objectSpread(_objectSpread({
     borderRadius: "full",
     backgroundColour: "gray900",
-    display: "inlineBlock",
+    display: "inline-block",
     position: "relative",
     padding: valuePaddingMap[size]
   }, boxProps), {}, {
@@ -58,7 +58,7 @@ export const TextBubble = _ref => {
       strong: true,
       noWrap: true,
       align: "center",
-      className: clsx(styles.bubbleText, useBoxStyles({
+      className: clsx(styles.bubbleText, boxStyles({
         position: 'absolute',
         overflow: 'hidden',
         width: 'full',

package/dist/components/TextContainer/TextContainer.d.ts

@@ -6,5 +6,4 @@ export interface Props {
     children: ReactElement | ReactElement[];
 }
 export declare const TextContainer: FunctionComponent<Props>;
-export default TextContainer;
 //# sourceMappingURL=TextContainer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextContainer.d.ts","sourceRoot":"","sources":["../../../lib/components/TextContainer/TextContainer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAKxD,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;CACxC;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,KAAK,CAUlD,CAAC;AAWF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TextContainer.d.ts","sourceRoot":"","sources":["../../../lib/components/TextContainer/TextContainer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAKxD,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;CACxC;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,KAAK,CAkBlD,CAAC"}

package/dist/components/TextContainer/TextContainer.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import * as React from 'react';
-import { Column, Columns } from "../Columns/index.js";
+import { Box } from "../Box/index.js";
 import { Stack } from "../Stack/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const TextContainer = _ref => {
@@ -12,31 +12,19 @@ export const TextContainer = _ref => {
     action
   } = _ref;
   return _jsxs(Stack, {
+    as: "article",
     space: "2",
-    is: "article",
     className: className,
-    children: [_jsx(TextContainerHeading, {
-      heading: heading,
-      action: action
+    children: [_jsxs(Box, {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "space-between",
+      width: "full",
+      children: [_jsx(Box, {
+        children: heading
+      }), action && _jsx(Box, {
+        children: action
+      })]
     }), children]
   });
-};
-const TextContainerHeading = _ref2 => {
-  let {
-    heading,
-    action
-  } = _ref2;
-  return _jsxs(Columns, {
-    noWrap: true,
-    align: "centre",
-    space: "4",
-    children: [_jsx(Column, {
-      grow: true,
-      children: heading
-    }), action ? _jsx(Column, {
-      width: "auto",
-      children: action
-    }) : null]
-  });
-};
-export default TextContainer;
+};

package/dist/components/TextContainer/TextContainer.stories.d.ts

@@ -4,12 +4,9 @@ import { TextContainer } from '.';
 declare const meta: {
     title: string;
     component: React.FunctionComponent<import("./TextContainer").Props>;
-    decorators: ((story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        heading?: React.ReactElement | undefined;
-        action?: React.ReactElement | undefined;
-        className?: string | undefined;
-        children: React.ReactElement | React.ReactElement[];
-    }>) => React.JSX.Element)[];
+    args: {
+        children: React.JSX.Element;
+    };
     argTypes: {
         children: {
             control: {

package/dist/components/TextContainer/TextContainer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextContainer.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/TextContainer/TextContainer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAElC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAqB4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAiB7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAiBjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAC"}
+{"version":3,"file":"TextContainer.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/TextContainer/TextContainer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAElC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;CA8B4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KASjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAS3B,CAAC"}

package/dist/components/TextLink/TextLink.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { AnchorHTMLAttributes, ComponentProps, ElementType, ReactElement, ReactNode } from 'react';
 import { Text } from '../Text';
 type TextProps = Omit<ComponentProps<typeof Text>, 'is' | 'colour'>;
-type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'style' | 'is' | keyof TextProps>;
+type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'color' | 'style' | 'is' | keyof TextProps>;
 export interface Props extends TextProps, AnchorProps {
     children?: ReactNode;
     className?: string;
@@ -12,5 +12,5 @@ export interface Props extends TextProps, AnchorProps {
     icon?: IconType;
 }
 export declare const TextLink: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-export default TextLink;
+export {};
 //# sourceMappingURL=TextLink.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,oBAAoB,EAEpB,cAAc,EAEd,WAAW,EAGX,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC,CAAC;AACpE,KAAK,WAAW,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,SAAS,CAC7C,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,WAAW;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,8FAyEpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,oBAAoB,EAEpB,cAAc,EAEd,WAAW,EAGX,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC,CAAC;AACpE,KAAK,WAAW,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,SAAS,CACvD,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,WAAW;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,8FAyEpB,CAAC"}

package/dist/components/TextLink/TextLink.js

@@ -9,7 +9,7 @@ import { invariant } from '@autoguru/utilities';
 import clsx from 'clsx';
 import * as React from 'react';
 import { cloneElement, createElement, forwardRef, isValidElement } from 'react';
-import { Box, useBoxStyles } from "../Box/index.js";
+import { Box, boxStyles } from "../Box/index.js";
 import { Icon } from "../Icon/index.js";
 import { Text } from "../Text/index.js";
 import * as styles from "./TextLink.css.js";
@@ -29,13 +29,13 @@ export const TextLink = forwardRef((_ref, ref) => {
     props = _objectWithoutProperties(_ref, _excluded);
   !!(Component !== undefined && props.href !== undefined) ? process.env.NODE_ENV !== "production" ? invariant(false, 'You cannot have both href and as defined.') : invariant(false) : void 0;
   const body = _jsxs(Text, {
-    is: "span",
+    as: "span",
     colour: muted ? 'muted' : 'link',
     size: size,
     fontWeight: fontWeight,
     strong: strong,
-    className: clsx(useBoxStyles({
-      is: 'span',
+    className: clsx(boxStyles({
+      as: 'span',
       pointerEvents: 'none',
       position: 'relative',
       paddingRight: icon ? '5' : void 0
@@ -45,8 +45,8 @@ export const TextLink = forwardRef((_ref, ref) => {
     children: [children, icon ? _jsx(Icon, {
       icon: icon,
       size: "small",
-      display: "inlineBlock",
-      className: clsx(styles.icon, useBoxStyles({
+      display: "inline-block",
+      className: clsx(styles.icon, boxStyles({
         position: 'absolute'
       }))
     }) : null]
@@ -58,7 +58,7 @@ export const TextLink = forwardRef((_ref, ref) => {
   });
   if (Component === undefined) {
     return _jsx(Box, _objectSpread(_objectSpread({
-      is: "a",
+      as: "a",
       className: [className, styles.root]
     }, allProps), {}, {
       children: body
@@ -66,4 +66,4 @@ export const TextLink = forwardRef((_ref, ref) => {
   }
   return isValidElement(Component) ? cloneElement(Component, allProps, body) : createElement(Component, allProps, body);
 });
-export default TextLink;
+TextLink.displayName = 'TextLink';