@autoguru/overdrive 4.3.4 → 4.4.0

package/dist/components/Switch/Switch.css.js

@@ -1,57 +1,49 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Switch/Switch.css.ts", "@autoguru/overdrive");
-
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
+import { vars } from '../../themes/base/vars.css';
 const handleSize = '24px';
 const handleOffset = '2px';
 const borderSize = '1px';
 export const root = style({
-  width: "calc((2 * ".concat(handleSize, ") + ").concat(handleOffset, " - 2 * ").concat(borderSize, ")"),
-  height: "calc(".concat(handleSize, " + (").concat(handleOffset, " * 2))"),
-  transition: 'background-color 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
-  border: "".concat(borderSize, " solid ").concat(vars.border.colours.light)
-}, "root");
+    width: `calc((2 * ${handleSize}) + ${handleOffset} - 2 * ${borderSize})`,
+    height: `calc(${handleSize} + (${handleOffset} * 2))`,
+    transition: 'background-color 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
+    border: `${borderSize} solid ${vars.border.colours.light}`,
+});
 export const handle = styleVariants({
-  default: {
-    borderColor: vars.border.colours.gray,
-    top: "calc(".concat(handleOffset, " - ").concat(borderSize, ")"),
-    left: "calc(".concat(handleOffset, " - ").concat(borderSize, ")"),
-    width: "".concat(handleSize),
-    height: "".concat(handleSize),
-    transition: 'transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
-    willChange: 'transform'
-  },
-  transition: {
-    transform: "translateX(calc(".concat(handleSize, " - (2 * ").concat(handleOffset, ")))"),
-    borderColor: vars.colours.intent.primary.background.strong
-  }
-}, "handle");
+    default: {
+        borderColor: vars.border.colours.gray,
+        top: `calc(${handleOffset} - ${borderSize})`,
+        left: `calc(${handleOffset} - ${borderSize})`,
+        width: `${handleSize}`,
+        height: `${handleSize}`,
+        transition: 'transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
+        willChange: 'transform',
+    },
+    transition: {
+        transform: `translateX(calc(${handleSize} - (2 * ${handleOffset})))`,
+        borderColor: vars.colours.intent.primary.background.strong,
+    },
+});
 export const toggled = style({
-  borderColor: vars.colours.intent.primary.background.strong,
-  backgroundColor: vars.colours.intent.primary.background.standard
-}, "toggled");
+    borderColor: vars.colours.intent.primary.background.strong,
+    backgroundColor: vars.colours.intent.primary.background.standard,
+});
 export const disabled = styleVariants({
-  default: {
-    selectors: {
-      '&[aria-disabled=true]': {
-        cursor: 'not-allowed',
-        borderColor: vars.border.colours.light,
-        backgroundColor: vars.border.colours.light
-      }
-    }
-  },
-  toggled: {
-    selectors: {
-      '&[aria-disabled=true]': {
-        borderColor: vars.border.colours.light,
-        backgroundColor: vars.colours.intent.primary.background.mild
-      }
-    }
-  }
-}, "disabled");
-
-__vanilla_filescope__.endFileScope();
+    default: {
+        selectors: {
+            '&[aria-disabled=true]': {
+                cursor: 'not-allowed',
+                borderColor: vars.border.colours.light,
+                backgroundColor: vars.border.colours.light,
+            },
+        },
+    },
+    toggled: {
+        selectors: {
+            '&[aria-disabled=true]': {
+                borderColor: vars.border.colours.light,
+                backgroundColor: vars.colours.intent.primary.background.mild,
+            },
+        },
+    },
+});

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

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+export interface Props {
+    className?: string;
+    disabled?: boolean;
+    toggled?: boolean;
+    onChange?(value: boolean): void;
+}
+export declare const Switch: FunctionComponent<Props>;
+//# sourceMappingURL=Switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAOjE,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CA+D3C,CAAC"}

package/dist/components/Switch/Switch.js

@@ -1,66 +1,31 @@
-"use strict";
-
 import clsx from 'clsx';
 import * as React from 'react';
 import { useCallback, useState } from 'react';
-import { Box, useBoxStyles } from "../Box/index.js";
-import { useTextStyles } from "../Text/index.js";
-import * as styles from "./Switch.css.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Switch = _ref => {
-  let {
-    className = '',
-    disabled = false,
-    toggled: incomingToggled = false,
-    onChange
-  } = _ref;
-  const [toggled, setToggled] = useState(incomingToggled);
-  const [prevValue, setPrevValue] = useState(incomingToggled);
-  const onToggle = useCallback(() => {
-    if (disabled) {
-      return;
+import { Box, useBoxStyles } from '../Box';
+import { useTextStyles } from '../Text';
+import * as styles from './Switch.css';
+export const Switch = ({ className = '', disabled = false, toggled: incomingToggled = false, onChange, }) => {
+    const [toggled, setToggled] = useState(incomingToggled);
+    const [prevValue, setPrevValue] = useState(incomingToggled);
+    const onToggle = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        if (typeof onChange === 'function') {
+            onChange(!toggled);
+        }
+        setToggled(!toggled);
+    }, [incomingToggled, disabled, toggled]);
+    if (prevValue !== incomingToggled) {
+        setToggled(incomingToggled);
+        setPrevValue(incomingToggled);
     }
-
-    if (typeof onChange === 'function') {
-      onChange(!toggled);
-    }
-
-    setToggled(!toggled);
-  }, [incomingToggled, disabled, toggled]);
-
-  if (prevValue !== incomingToggled) {
-    setToggled(incomingToggled);
-    setPrevValue(incomingToggled);
-  }
-
-  return _jsx(Box, {
-    is: "button",
-    className: clsx(styles.root, useTextStyles({
-      size: '5'
-    }), {
-      [styles.toggled]: toggled,
-      [styles.disabled.default]: disabled,
-      [styles.disabled.toggled]: toggled && disabled
-    }, className),
-    borderRadius: "pill",
-    position: "relative",
-    "aria-disabled": disabled,
-    "aria-label": "toggle ".concat(toggled ? 'on' : 'off'),
-    onClick: onToggle,
-    children: _jsx(Box, {
-      borderWidth: "1",
-      position: "absolute",
-      borderRadius: "pill",
-      backgroundColour: "white",
-      padding: "none",
-      boxShadow: "2",
-      className: clsx(styles.handle.default, useBoxStyles({
-        is: 'button'
-      }), useTextStyles({
-        colour: 'white'
-      }), {
-        [styles.handle.transition]: toggled
-      })
-    })
-  });
-};
+    return (React.createElement(Box, { is: "button", className: clsx(styles.root, useTextStyles({ size: '5' }), {
+            [styles.toggled]: toggled,
+            [styles.disabled.default]: disabled,
+            [styles.disabled.toggled]: toggled && disabled,
+        }, className), borderRadius: "pill", position: "relative", "aria-disabled": disabled, "aria-label": `toggle ${toggled ? 'on' : 'off'}`, onClick: onToggle },
+        React.createElement(Box, { borderWidth: "1", position: "absolute", borderRadius: "pill", backgroundColour: "white", padding: "none", boxShadow: "2", className: clsx(styles.handle.default, useBoxStyles({ is: 'button' }), useTextStyles({ colour: 'white' }), {
+                [styles.handle.transition]: toggled,
+            }) })));
+};

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

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Switch/index.js

@@ -1,3 +1 @@
-"use strict";
-
-export { Switch } from "./Switch.js";
+export { Switch } from './Switch';

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

@@ -0,0 +1,2 @@
+export declare const root: string;
+//# sourceMappingURL=Table.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/Table.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAUf,CAAC"}

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

@@ -1,16 +1,8 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Table/Table.css.ts", "@autoguru/overdrive");
-
 import { style } from '@vanilla-extract/css';
 export const root = style({
-  display: 'grid',
-  gridGap: '0',
-  alignItems: 'stretch',
-  clipPath: 'inset(0)',
-  clip: 'rect(0px, auto, auto, 0px)'
-}, "root");
-
-__vanilla_filescope__.endFileScope();
+    display: 'grid',
+    gridGap: '0',
+    alignItems: 'stretch',
+    clipPath: 'inset(0)',
+    clip: 'rect(0px, auto, auto, 0px)',
+});

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import * as React from 'react';
+import type { TableContext } from './context';
+export interface Props extends Partial<TableContext> {
+    columnTemplate: string;
+    children: ReactNode | ReactNode[];
+}
+export declare const Table: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,MAAM,WAAW,KAAM,SAAQ,OAAO,CAAC,YAAY,CAAC;IACnD,cAAc,EAAE,MAAM,CAAC;IAEvB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAQD,eAAO,MAAM,KAAK,8EAajB,CAAC"}

package/dist/components/Table/Table.js

@@ -1,30 +1,7 @@
-"use strict";
-
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { Box } from "../Box/index.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) => {
-  let {
-    children,
-    padding = '4',
-    stickyHead = false,
-    columnTemplate
-  } = _ref;
-  return _jsx(TableContextProvider, {
-    padding: padding,
-    stickyHead: stickyHead,
-    children: _jsx(Box, {
-      ref: ref,
-      role: "grid",
-      width: "full",
-      style: {
-        gridTemplateColumns: columnTemplate
-      },
-      className: styles.root,
-      children: children
-    })
-  });
-});
+import { Box } from '../Box';
+import * as styles from './Table.css';
+import { TableContextProvider } from './context';
+export const Table = forwardRef(({ children, padding = '4', stickyHead = false, columnTemplate }, ref) => (React.createElement(TableContextProvider, { padding: padding, stickyHead: stickyHead },
+    React.createElement(Box, { ref: ref, role: "grid", width: "full", style: { gridTemplateColumns: columnTemplate }, className: styles.root }, children))));

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

@@ -0,0 +1,2 @@
+export declare const root: string;
+//# sourceMappingURL=TableCell.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableCell.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QA2Bf,CAAC"}

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

@@ -1,30 +1,22 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Table/TableCell.css.ts", "@autoguru/overdrive");
-
 import { style } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
+import { vars } from '../../themes/base/vars.css';
 export const root = style({
-  position: 'relative',
-  ':before': {
-    display: 'block',
-    content: '""',
-    position: 'absolute',
-    zIndex: -1,
-    top: 0,
-    bottom: 0,
-    left: '-1000%',
-    right: '-1000%',
-    transition: "background-color 0.2s ".concat(vars.animation.easing.accelerate)
-  },
-  selectors: {
-    '&:hover:before': {
-      transitionTimingFunction: vars.animation.easing.decelerate,
-      backgroundColor: vars.border.colours.light
-    }
-  }
-}, "root");
-
-__vanilla_filescope__.endFileScope();
+    position: 'relative',
+    ':before': {
+        display: 'block',
+        content: '""',
+        position: 'absolute',
+        zIndex: -1,
+        top: 0,
+        bottom: 0,
+        left: '-1000%',
+        right: '-1000%',
+        transition: `background-color 0.2s ${vars.animation.easing.accelerate}`,
+    },
+    selectors: {
+        '&:hover:before': {
+            transitionTimingFunction: vars.animation.easing.decelerate,
+            backgroundColor: vars.border.colours.light,
+        },
+    },
+});

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import * as React from 'react';
+import { AriaAttributes } from 'react';
+import { Tokens } from '../../themes/tokens';
+import type { Alignment } from '../../utils';
+export interface Props extends Partial<Pick<AriaAttributes, 'aria-label'>> {
+    align?: Alignment;
+    padding?: keyof Tokens['space'];
+    children?: ReactNode | null;
+}
+export declare const TableCell: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=TableCell.d.ts.map

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

@@ -0,0 +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,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,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,8EA2CrB,CAAC"}

package/dist/components/Table/TableCell.js

@@ -1,43 +1,13 @@
-"use strict";
-
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { alignmentToFlexAlignment } from "../../utils/index.js";
-import { Box } from "../Box/index.js";
-import { Text } from "../Text/index.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) => {
-  var _ref2;
-
-  let {
-    padding: incomingPadding,
-    align = 'left',
-    'aria-label': ariaLabel,
-    children
-  } = _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, {
-    ref: ref,
-    role: "gridcell",
-    scope: "row",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: alignmentToFlexAlignment(align),
-    padding: padding,
-    borderColourBottom: "light",
-    borderWidthBottom: "1",
-    "aria-label": ariaLabel,
-    className: styles.root,
-    children: typeof children === 'string' || typeof children === 'number' ? _jsx(Text, {
-      is: "span",
-      align: align,
-      colour: "dark",
-      display: "block",
-      size: "3",
-      children: children
-    }) : children
-  });
-});
+import { alignmentToFlexAlignment } from '../../utils';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import * as styles from './TableCell.css';
+import { useTableContext } from './context';
+export const TableCell = forwardRef(({ padding: incomingPadding, align = 'left', 'aria-label': ariaLabel, children, }, ref) => {
+    const tableContext = useTableContext();
+    const padding = incomingPadding ?? tableContext?.padding ?? 'none';
+    return (React.createElement(Box, { ref: ref, role: "gridcell", scope: "row", display: "flex", alignItems: "center", justifyContent: alignmentToFlexAlignment(align), padding: padding, borderColourBottom: "light", borderWidthBottom: "1", "aria-label": ariaLabel, className: styles.root }, typeof children === 'string' ||
+        typeof children === 'number' ? (React.createElement(Text, { is: "span", align: align, colour: "dark", display: "block", size: "3" }, children)) : (children)));
+});

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

@@ -0,0 +1,10 @@
+export declare const sorterButton: string;
+export declare const text: string;
+export declare const sorter: {
+    none: string;
+    desc: string;
+    asc: string;
+    root: string[];
+};
+export declare const sticky: string;
+//# sourceMappingURL=TableHeadCell.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeadCell.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableHeadCell.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,QAAgC,CAAC;AAE1D,eAAO,MAAM,IAAI,QAOf,CAAC;AASH,eAAO,MAAM,MAAM;;;;;CAiClB,CAAC;AAEF,eAAO,MAAM,MAAM,QAIjB,CAAC"}

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

@@ -1,66 +1,55 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Table/TableHeadCell.css.ts", "@autoguru/overdrive");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
-export const sorterButton = style({
-  userSelect: 'text'
-}, "sorterButton");
+import { vars } from '../../themes/base/vars.css';
+export const sorterButton = style({ userSelect: 'text' });
 export const text = style({
-  color: vars.typography.colour.muted,
-  selectors: {
-    ["".concat(sorterButton, ":hover &")]: {
-      color: vars.typography.colour.dark
-    }
-  }
-}, "text");
-const sorterRoot = style({
-  transformOrigin: 'center',
-  transitionProperty: 'transform',
-  transitionDuration: '0.3s',
-  willChange: 'transform'
-}, "sorterRoot");
-export const sorter = _objectSpread({
-  root: [sorterRoot, style({
     color: vars.typography.colour.muted,
-    transitionTimingFunction: vars.animation.easing.standard,
-    selectors: {
-      ["".concat(sorterButton, ":hover &")]: {
-        color: vars.typography.colour.dark
-      }
-    }
-  }, "sorter_root")]
-}, styleVariants({
-  none: {
-    opacity: '0',
-    transform: 'translateY(10%) rotateX(0)',
-    transitionProperty: 'transform, opacity',
     selectors: {
-      ["".concat(sorterButton, ":hover &")]: {
-        opacity: '0.50',
-        transform: 'translateY(0px) rotateX(0)'
-      }
-    }
-  },
-  asc: {
-    transform: 'translateY(0px) rotateY(0)'
-  },
-  desc: {
-    transform: 'translateY(0px) rotateX(180deg)'
-  }
-}, "sorter"));
+        [`${sorterButton}:hover &`]: {
+            color: vars.typography.colour.dark,
+        },
+    },
+});
+const sorterRoot = style({
+    transformOrigin: 'center',
+    transitionProperty: 'transform',
+    transitionDuration: '0.3s',
+    willChange: 'transform',
+});
+export const sorter = {
+    root: [
+        sorterRoot,
+        style({
+            color: vars.typography.colour.muted,
+            transitionTimingFunction: vars.animation.easing.standard,
+            selectors: {
+                [`${sorterButton}:hover &`]: {
+                    color: vars.typography.colour.dark,
+                },
+            },
+        }),
+    ],
+    ...styleVariants({
+        none: {
+            opacity: '0',
+            transform: 'translateY(10%) rotateX(0)',
+            transitionProperty: 'transform, opacity',
+            selectors: {
+                [`${sorterButton}:hover &`]: {
+                    opacity: '0.50',
+                    transform: 'translateY(0px) rotateX(0)',
+                },
+            },
+        },
+        asc: {
+            transform: 'translateY(0px) rotateY(0)',
+        },
+        desc: {
+            transform: 'translateY(0px) rotateX(180deg)',
+        },
+    }),
+};
 export const sticky = style({
-  position: 'sticky',
-  top: 0,
-  zIndex: 1
-}, "sticky");
-
-__vanilla_filescope__.endFileScope();
+    position: 'sticky',
+    top: 0,
+    zIndex: 1,
+});

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

@@ -0,0 +1,14 @@
+import type { AriaAttributes, ComponentProps } from 'react';
+import * as React from 'react';
+import { Alignment } from '../../utils';
+import { Box } from '../Box';
+declare type Sort = 'asc' | 'desc' | 'none';
+export interface Props extends Partial<Pick<AriaAttributes, 'aria-label'>>, Pick<ComponentProps<typeof Box>, 'padding'> {
+    align?: Alignment;
+    sort?: Sort;
+    onSort?: (event: MouseEvent) => void;
+    children?: string | null;
+}
+export declare const TableHeadCell: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=TableHeadCell.d.ts.map

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

@@ -0,0 +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,aAAK,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,8EA2FzB,CAAC"}