@atom-learning/components 6.0.0-beta.3 → 6.0.0-beta.4

package/dist/components/action-icon/ActionIcon.d.ts

@@ -4,7 +4,7 @@ import { NavigatorActions } from '../../types';
 import { Override } from '../../utilities';
 import type { TOptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper';
 declare const StyledButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"button", {
-    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
+    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;

package/dist/components/action-icon/ActionIcon.js

@@ -1,2 +1,2 @@
-import u from"invariant";import*as n from"react";import{styled as w}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as k}from"../../utilities/style/disabledStyle.js";import{getExternalAnchorProps as D}from"../../utilities/uri/index.js";import{Icon as m}from"../icon/Icon.js";import{ActionIconSizeMap as v}from"./ActionIcon.constants.js";import{OptionalTooltipWrapper as z}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const o=(r,a,i,e)=>({theme:r,appearance:"simple",css:{bg:"transparent",color:a,"&:not(:disabled):hover, &:not(:disabled):focus":{color:i},"&:not(:disabled):active":{color:e}}}),t=(r,a,i,e)=>({theme:r,appearance:"solid",css:{bg:a,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:i,color:"white"},"&:not(:disabled):active":{bg:e}}}),p=(r,a,i,e)=>({theme:r,appearance:"outline",css:{border:"1px solid",borderColor:"currentColor",color:a,"&:not(:disabled):hover, &:not(:disabled):focus":{color:i},"&:not(:disabled):active":{color:e}}}),M=w("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$1",boxSizing:"border-box",cursor:"pointer",display:"flex",flexShrink:0,justifyContent:"center",p:"unset",transition:"all 100ms ease-out","&[disabled]":k,variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{}},appearance:{simple:{},outline:{},solid:{}},size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[o("neutral","$grey700","$primary900","$primary1000"),o("primary","$primary800","$primary900","$primary1000"),o("primaryDark","$primary1000","$primary1100","$primary1200"),o("success","$success","$successMid","$successDark"),o("warning","$warning","$warningMid","$warningDark"),o("danger","$danger","$dangerMid","$dangerDark"),t("primary","$primary800","$primary900","$primary1000"),t("primaryDark","$primary1000","$primary1100","$primary1200"),t("success","$success","$successMid","$successDark"),t("warning","$warning","$warningMid","$warningDark"),t("danger","$danger","$dangerMid","$dangerDark"),p("primary","$primary800","$primary900","$primary1000"),p("primaryDark","$primary1000","$primary1100","$primary1200"),p("success","$success","$successMid","$successDark"),p("warning","$warning","$warningMid","$warningDark"),p("danger","$danger","$dangerMid","$dangerDark")]}),d=n.forwardRef(({children:r,theme:a="primary",appearance:i="simple",size:e="sm",label:$,href:l,disabled:c,hasTooltip:g=!0,tooltipSide:b,...h},f)=>{const y=`A single ${m.displayName} component is permitted as a child of ${d.displayName}`;return u(n.Children.count(r)===1,y),n.createElement(z,{hasTooltip:g,label:$,tooltipSide:b},n.createElement(M,{...l?{as:"a",href:c?null:l,onClick:void 0,"aria-disabled":!!c}:{type:"button"},...D(l),...h,"aria-label":$,theme:a,appearance:i,size:e,ref:f,disabled:c},n.Children.map(r,s=>{if(!n.isValidElement(s))throw new Error(y);return u(s.type===m,`Children of type ${s==null?void 0:s.type} aren't permitted. Only an ${m.displayName} component is allowed in ${d.displayName}`),n.cloneElement(s,{size:v[e],css:{...s.props.css?s.props.css:{}}})})))});d.displayName="ActionIcon";export{d as ActionIcon};
+import f from"invariant";import*as s from"react";import{styled as w}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as k}from"../../utilities/style/disabledStyle.js";import{getExternalAnchorProps as D}from"../../utilities/uri/index.js";import{Icon as m}from"../icon/Icon.js";import{ActionIconSizeMap as v}from"./ActionIcon.constants.js";import{OptionalTooltipWrapper as z}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const o=(r,i,a,e)=>({theme:r,appearance:"simple",css:{bg:"transparent",color:i,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:e}}}),p=(r,i,a,e)=>({theme:r,appearance:"solid",css:{bg:i,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:a,color:"white"},"&:not(:disabled):active":{bg:e}}}),t=(r,i,a,e)=>({theme:r,appearance:"outline",css:{bg:"unset",border:"1px solid",borderColor:"currentColor",color:i,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:e}}}),M=w("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$1",boxSizing:"border-box",cursor:"pointer",display:"flex",flexShrink:0,justifyContent:"center",p:"unset",transition:"all 100ms ease-out","&[disabled]":k,variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{},white:{}},appearance:{simple:{},outline:{},solid:{}},size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[o("neutral","$grey700","$primary900","$primary1000"),o("primary","$primary800","$primary900","$primary1000"),o("primaryDark","$primary1000","$primary1100","$primary1200"),o("success","$success","$successMid","$successDark"),o("warning","$warning","$warningMid","$warningDark"),o("danger","$danger","$dangerMid","$dangerDark"),o("white","#fff","#fff","#fff"),p("primary","$primary800","$primary900","$primary1000"),p("primaryDark","$primary1000","$primary1100","$primary1200"),p("success","$success","$successMid","$successDark"),p("warning","$warning","$warningMid","$warningDark"),p("danger","$danger","$dangerMid","$dangerDark"),t("primary","$primary800","$primary900","$primary1000"),t("primaryDark","$primary1000","$primary1100","$primary1200"),t("success","$success","$successMid","$successDark"),t("warning","$warning","$warningMid","$warningDark"),t("danger","$danger","$dangerMid","$dangerDark"),t("white","#fff","#fff","#fff")]}),d=s.forwardRef(({children:r,theme:i="primary",appearance:a="simple",size:e="sm",label:$,href:l,disabled:c,hasTooltip:u=!0,tooltipSide:g,...b},h)=>{const y=`A single ${m.displayName} component is permitted as a child of ${d.displayName}`;return f(s.Children.count(r)===1,y),s.createElement(z,{hasTooltip:u,label:$,tooltipSide:g},s.createElement(M,{...l?{as:"a",href:c?null:l,onClick:void 0,"aria-disabled":!!c}:{type:"button"},...D(l),...b,"aria-label":$,theme:i,appearance:a,size:e,ref:h,disabled:c},s.Children.map(r,n=>{if(!s.isValidElement(n))throw new Error(y);return f(n.type===m,`Children of type ${n==null?void 0:n.type} aren't permitted. Only an ${m.displayName} component is allowed in ${d.displayName}`),s.cloneElement(n,{size:v[e],css:{...n.props.css?n.props.css:{}}})})))});d.displayName="ActionIcon";export{d as ActionIcon};
 //# sourceMappingURL=ActionIcon.js.map

package/dist/components/action-icon/ActionIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst getSimpleVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  theme,\n  appearance: 'simple',\n  css: {\n    bg: 'transparent',\n    color: base,\n    '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n    '&:not(:disabled):active': { color: active }\n  }\n})\n\nconst getSolidVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  theme,\n  appearance: 'solid',\n  css: {\n    bg: base,\n    color: 'white',\n    '&:not(:disabled):hover, &:not(:disabled):focus': {\n      bg: interact,\n      color: 'white'\n    },\n    '&:not(:disabled):active': { bg: active }\n  }\n})\n\nconst getOutlineVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  theme,\n  appearance: 'outline',\n  css: {\n    border: '1px solid',\n    borderColor: 'currentColor',\n    color: base,\n    '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n    '&:not(:disabled):active': { color: active }\n  }\n})\n\nconst StyledButton = styled('button', {\n  alignItems: 'center',\n  appearance: 'none',\n  bg: 'white',\n  border: 'unset',\n  borderRadius: '$1',\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  p: 'unset',\n  transition: 'all 100ms ease-out',\n  '&[disabled]': disabledStyle,\n  variants: {\n    theme: {\n      neutral: {},\n      primary: {},\n      success: {},\n      warning: {},\n      danger: {}\n    },\n    appearance: {\n      simple: {},\n      outline: {},\n      solid: {}\n    },\n    size: {\n      xs: { size: '$2' },\n      sm: { size: '$3' },\n      md: { size: '$4' },\n      lg: { size: '$5' }\n    },\n    isRounded: {\n      true: {\n        borderRadius: '$round'\n      }\n    }\n  },\n\n  // prettier-ignore\n  compoundVariants: [\n    getSimpleVariant('neutral', '$grey700', '$primary900', '$primary1000'),\n    getSimpleVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getSimpleVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n    getSimpleVariant('success', '$success', '$successMid', '$successDark'),\n    getSimpleVariant('warning', '$warning', '$warningMid', '$warningDark'),\n    getSimpleVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n\n    getSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getSolidVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n    getSolidVariant('success', '$success', '$successMid', '$successDark'),\n    getSolidVariant('warning', '$warning', '$warningMid', '$warningDark'),\n    getSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n\n    getOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getOutlineVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n    getOutlineVariant('success', '$success', '$successMid', '$successDark'),\n    getOutlineVariant('warning', '$warning', '$warningMid', '$warningDark'),\n    getOutlineVariant('danger', '$danger', '$dangerMid', '$dangerDark')\n  ]\n})\n\ntype ActionIconProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  VariantProps<typeof StyledButton> & {\n    as?: string | React.ReactNode\n    children: React.ReactNode\n    label: string\n  } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n    NavigatorActions\n>\n\nexport const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps> =\n  React.forwardRef(\n    (\n      {\n        children,\n        theme = 'primary',\n        appearance = 'simple',\n        size = 'sm',\n        label,\n        href,\n        disabled,\n        hasTooltip = true,\n        tooltipSide,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n      invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n      const optionalLinkProps = href\n        ? ({\n            as: 'a',\n            href: disabled ? null : href,\n            onClick: undefined,\n            'aria-disabled': !!disabled\n          } as const)\n        : ({ type: 'button' } as const)\n\n      return (\n        <OptionalTooltipWrapper\n          hasTooltip={hasTooltip}\n          label={label}\n          tooltipSide={tooltipSide}\n        >\n          <StyledButton\n            {...optionalLinkProps}\n            {...getExternalAnchorProps(href)}\n            {...remainingProps}\n            aria-label={label}\n            theme={theme}\n            appearance={appearance}\n            size={size}\n            ref={ref}\n            disabled={disabled}\n          >\n            {React.Children.map(children, (child) => {\n              // TS needs this check for any following code to access child.type\n              // even with optional chaining\n              if (!React.isValidElement(child)) {\n                throw new Error(INVALID_CHILDREN_MESSAGE)\n              }\n\n              invariant(\n                child.type === Icon,\n                `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n              )\n\n              return React.cloneElement(\n                child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n                {\n                  size: ActionIconSizeMap[size as string],\n                  css: { ...(child.props.css ? child.props.css : {}) }\n                }\n              )\n            })}\n          </StyledButton>\n        </OptionalTooltipWrapper>\n      )\n    }\n  )\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","theme","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","disabledStyle","ActionIcon","React","children","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","getExternalAnchorProps","child","ActionIconSizeMap"],"mappings":"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"}
+{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst getSimpleVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  theme,\n  appearance: 'simple',\n  css: {\n    bg: 'transparent',\n    color: base,\n    '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n    '&:not(:disabled):active': { color: active }\n  }\n})\n\nconst getSolidVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  theme,\n  appearance: 'solid',\n  css: {\n    bg: base,\n    color: 'white',\n    '&:not(:disabled):hover, &:not(:disabled):focus': {\n      bg: interact,\n      color: 'white'\n    },\n    '&:not(:disabled):active': { bg: active }\n  }\n})\n\nconst getOutlineVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  theme,\n  appearance: 'outline',\n  css: {\n    bg: 'unset',\n    border: '1px solid',\n    borderColor: 'currentColor',\n    color: base,\n    '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n    '&:not(:disabled):active': { color: active }\n  }\n})\n\nconst StyledButton = styled('button', {\n  alignItems: 'center',\n  appearance: 'none',\n  bg: 'white',\n  border: 'unset',\n  borderRadius: '$1',\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  p: 'unset',\n  transition: 'all 100ms ease-out',\n  '&[disabled]': disabledStyle,\n  variants: {\n    theme: {\n      neutral: {},\n      primary: {},\n      success: {},\n      warning: {},\n      danger: {},\n      white: {}\n    },\n    appearance: {\n      simple: {},\n      outline: {},\n      solid: {}\n    },\n    size: {\n      xs: { size: '$2' },\n      sm: { size: '$3' },\n      md: { size: '$4' },\n      lg: { size: '$5' }\n    },\n    isRounded: {\n      true: {\n        borderRadius: '$round'\n      }\n    }\n  },\n\n  // prettier-ignore\n  compoundVariants: [\n    getSimpleVariant('neutral', '$grey700', '$primary900', '$primary1000'),\n    getSimpleVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getSimpleVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n    getSimpleVariant('success', '$success', '$successMid', '$successDark'),\n    getSimpleVariant('warning', '$warning', '$warningMid', '$warningDark'),\n    getSimpleVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n    getSimpleVariant('white', '#fff', '#fff', '#fff'),\n\n    getSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getSolidVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n    getSolidVariant('success', '$success', '$successMid', '$successDark'),\n    getSolidVariant('warning', '$warning', '$warningMid', '$warningDark'),\n    getSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n\n    getOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getOutlineVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n    getOutlineVariant('success', '$success', '$successMid', '$successDark'),\n    getOutlineVariant('warning', '$warning', '$warningMid', '$warningDark'),\n    getOutlineVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n    getOutlineVariant('white', '#fff', '#fff', '#fff')\n  ]\n})\n\ntype ActionIconProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  VariantProps<typeof StyledButton> & {\n    as?: string | React.ReactNode\n    children: React.ReactNode\n    label: string\n  } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n    NavigatorActions\n>\n\nexport const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps> =\n  React.forwardRef(\n    (\n      {\n        children,\n        theme = 'primary',\n        appearance = 'simple',\n        size = 'sm',\n        label,\n        href,\n        disabled,\n        hasTooltip = true,\n        tooltipSide,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n      invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n      const optionalLinkProps = href\n        ? ({\n            as: 'a',\n            href: disabled ? null : href,\n            onClick: undefined,\n            'aria-disabled': !!disabled\n          } as const)\n        : ({ type: 'button' } as const)\n\n      return (\n        <OptionalTooltipWrapper\n          hasTooltip={hasTooltip}\n          label={label}\n          tooltipSide={tooltipSide}\n        >\n          <StyledButton\n            {...optionalLinkProps}\n            {...getExternalAnchorProps(href)}\n            {...remainingProps}\n            aria-label={label}\n            theme={theme}\n            appearance={appearance}\n            size={size}\n            ref={ref}\n            disabled={disabled}\n          >\n            {React.Children.map(children, (child) => {\n              // TS needs this check for any following code to access child.type\n              // even with optional chaining\n              if (!React.isValidElement(child)) {\n                throw new Error(INVALID_CHILDREN_MESSAGE)\n              }\n\n              invariant(\n                child.type === Icon,\n                `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n              )\n\n              return React.cloneElement(\n                child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n                {\n                  size: ActionIconSizeMap[size as string],\n                  css: { ...(child.props.css ? child.props.css : {}) }\n                }\n              )\n            })}\n          </StyledButton>\n        </OptionalTooltipWrapper>\n      )\n    }\n  )\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","theme","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","disabledStyle","ActionIcon","React","children","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","getExternalAnchorProps","child","ActionIconSizeMap"],"mappings":"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"}

package/dist/components/banner/banner-regular/BannerRegular.d.ts

@@ -1156,17 +1156,17 @@ export declare const BannerRegular: {
                     marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
                 };
             }> | undefined;
-            theme?: "success" | "danger" | "warning" | "neutral" | "primary" | ({
-                "@sm"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@md"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@lg"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@xl"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@reducedMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@allowMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@hover"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@initial"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
+            theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | ({
+                "@sm"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@md"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@lg"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@xl"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@reducedMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@allowMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@hover"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@initial"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
             } & {
-                [x: string]: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
+                [x: string]: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
             }) | undefined;
             prefix?: string | undefined;
             form?: string | undefined;

package/dist/components/banner/banner-regular/BannerRegularDismiss.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
+    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;
@@ -377,7 +377,7 @@ declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-
         };
     }> | undefined;
 }, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
+    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;

package/dist/components/banner/banner-slim/BannerSlim.d.ts

@@ -1153,17 +1153,17 @@ export declare const BannerSlim: {
                     marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
                 };
             }> | undefined;
-            theme?: "success" | "danger" | "warning" | "neutral" | "primary" | ({
-                "@sm"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@md"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@lg"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@xl"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@reducedMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@allowMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@hover"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
-                "@initial"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
+            theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | ({
+                "@sm"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@md"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@lg"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@xl"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@reducedMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@allowMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@hover"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+                "@initial"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
             } & {
-                [x: string]: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
+                [x: string]: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
             }) | undefined;
             prefix?: string | undefined;
             form?: string | undefined;

package/dist/components/banner/banner-slim/BannerSlimDismiss.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
+    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;
@@ -377,7 +377,7 @@ declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-
         };
     }> | undefined;
 }, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
+    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;

package/dist/components/chip/Chip.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Box as x}from"../box/Box.js";import{Flex as C}from"../flex/Flex.js";import{Icon as l}from"../icon/Icon.js";import{getTextVariant as s}from"../text/Text.js";import{styled as c}from"../../stitches.js";import{overrideStitchesVariantValue as g}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const p={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},d=c("span",{display:"inline-flex",alignItems:"center",px:"$1",flexGrow:1,...p,"& > *:not(:last-child)":{mr:"$1"}}),z={sm:"sm",md:"sm",lg:"md"},m=t=>{const r=e.useContext(a),{size:o}=r,n=e.useMemo(()=>g(o,i=>z[i]),[o]);return e.createElement(l,{...t,size:n})},u=({children:t,...r})=>{const o=e.Children.toArray(t),n=o.length<=1;return e.createElement(d,{...r},o.map((i,$)=>!n&&typeof i=="string"?e.createElement(x,{as:"span",css:p,key:i},i):e.isValidElement(i)&&i.type===l?e.createElement(m,{key:`icon-${$}`,...i.props}):i))},h=c(C,{px:"$2",border:"1px solid",borderRadius:"$0",alignItems:"center",fontFamily:"$body",maxWidth:"100%",borderColor:"$primary800",color:"$primary900",bg:"$primary100","&[disabled]":{opacity:"0.3",pointerEvents:"none"},variants:{size:{sm:{height:"$2",...s({size:"sm"})},md:{height:"$3",...s({size:"sm"})},lg:{height:"$4",...s({size:"md"})}}}}),a=e.createContext({}),y=({size:t,children:r})=>{const o=e.useMemo(()=>({size:t}),[t]);return e.createElement(a.Provider,{value:o},r)},f=e.forwardRef(({size:t="md",...r},o)=>e.createElement(y,{size:t},e.createElement(h,{ref:o,size:t,...r}))),E=Object.assign(f,{Content:u,Icon:m});f.displayName="Chip";export{E as Chip,m as ChipIcon,a as ChipRootContext,y as ChipRootProvider,d as StyledChipContent,h as StyledRoot};
+import*as e from"react";import{Box as x}from"../box/Box.js";import{Flex as C}from"../flex/Flex.js";import{Icon as l}from"../icon/Icon.js";import{getTextVariant as s}from"../text/Text.js";import{styled as c}from"../../stitches.js";import{overrideStitchesVariantValue as g}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const p={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},d=c("span",{display:"inline-flex",alignItems:"center",px:"$1",flexGrow:1,...p,"& > *:not(:last-child)":{mr:"$1"}}),z={sm:"sm",md:"sm",lg:"md"},m=t=>{const r=e.useContext(a),{size:o}=r,n=e.useMemo(()=>g(o,i=>z[i]),[o]);return e.createElement(l,{...t,size:n})},u=({children:t,...r})=>{const o=e.Children.toArray(t),n=o.length<=1;return e.createElement(d,{...r},o.map((i,$)=>!n&&typeof i=="string"?e.createElement(x,{as:"span",css:p,key:i},i):e.isValidElement(i)&&i.type===l?e.createElement(m,{key:`icon-${$}`,...i.props}):i))},h=c(C,{px:"$2",border:"1px solid",borderRadius:"$1",alignItems:"center",fontFamily:"$body",maxWidth:"100%",borderColor:"$primary800",color:"$primary900",bg:"$primary100","&[disabled]":{opacity:"0.3",pointerEvents:"none"},variants:{size:{sm:{height:"$2",...s({size:"sm"})},md:{height:"$3",...s({size:"sm"})},lg:{height:"$4",...s({size:"md"})}}}}),a=e.createContext({}),y=({size:t,children:r})=>{const o=e.useMemo(()=>({size:t}),[t]);return e.createElement(a.Provider,{value:o},r)},f=e.forwardRef(({size:t="md",...r},o)=>e.createElement(y,{size:t},e.createElement(h,{ref:o,size:t,...r}))),E=Object.assign(f,{Content:u,Icon:m});f.displayName="Chip";export{E as Chip,m as ChipIcon,a as ChipRootContext,y as ChipRootProvider,d as StyledChipContent,h as StyledRoot};
 //# sourceMappingURL=Chip.js.map

package/dist/components/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { getTextVariant } from '~/components/text'\nimport { styled } from '~/stitches'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nconst overflowElipsis = {\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap'\n}\nexport const StyledChipContent = styled('span', {\n  display: 'inline-flex',\n  alignItems: 'center',\n  px: '$1',\n  flexGrow: 1,\n  ...overflowElipsis,\n  '& > *:not(:last-child)': {\n    mr: '$1'\n  }\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n  const rootContext = React.useContext(ChipRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n  return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  return (\n    <StyledChipContent {...rest}>\n      {\n        childrenArray.map((child, index) => {\n          if (!isSingleChild && typeof child === 'string')\n            return (\n              <Box as=\"span\" css={overflowElipsis} key={child}>\n                {child}\n              </Box>\n            )\n          if (React.isValidElement(child) && child.type === Icon) {\n            return <ChipIcon key={`icon-${index}`} {...child.props} />\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </StyledChipContent>\n  )\n}\n\nexport const StyledRoot = styled(Flex, {\n  px: '$2',\n  border: '1px solid',\n  borderRadius: '$0',\n  alignItems: 'center',\n  fontFamily: '$body',\n  maxWidth: '100%',\n  borderColor: '$primary800',\n  color: '$primary900',\n  bg: '$primary100',\n  '&[disabled]': {\n    opacity: '0.3',\n    pointerEvents: 'none'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$2',\n        ...getTextVariant({ size: 'sm' })\n      },\n      md: {\n        height: '$3',\n        ...getTextVariant({ size: 'sm' })\n      },\n      lg: {\n        height: '$4',\n        ...getTextVariant({ size: 'md' })\n      }\n    }\n  }\n})\n\nexport type TChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type TChipRootProviderProps = TChipRootContext\n\nexport const ChipRootContext = React.createContext<TChipRootContext>({})\n\nexport const ChipRootProvider = ({\n  size,\n  children\n}: TChipRootProviderProps) => {\n  const value = React.useMemo<TChipRootContext>(() => ({ size }), [size])\n  return (\n    <ChipRootContext.Provider value={value}>\n      {children}\n    </ChipRootContext.Provider>\n  )\n}\n\nexport type TChipRootProps = TChipRootProviderProps\n\nconst ChipRoot: React.ForwardRefExoticComponent<TChipRootProps> =\n  React.forwardRef(({ size = 'md', ...rest }, ref) => {\n    return (\n      <ChipRootProvider size={size}>\n        <StyledRoot ref={ref} size={size} {...rest} />\n      </ChipRootProvider>\n    )\n  })\n\nexport const Chip = Object.assign(ChipRoot, {\n  Content: ChipContent,\n  Icon: ChipIcon\n})\n\nChipRoot.displayName = 'Chip'\n"],"names":["overflowElipsis","StyledChipContent","styled","toIconSize","ChipIcon","props","rootContext","React","ChipRootContext","size","iconSize","overrideStitchesVariantValue","s","Icon","ChipContent","children","rest","childrenArray","isSingleChild","child","index","Box","StyledRoot","Flex","getTextVariant","ChipRootProvider","value","ChipRoot","ref","Chip"],"mappings":"qWASA,MAAMA,EAAkB,CACtB,SAAU,SACV,aAAc,WACd,WAAY,QACd,EACaC,EAAoBC,EAAO,OAAQ,CAC9C,QAAS,cACT,WAAY,SACZ,GAAI,KACJ,SAAU,EACV,GAAGF,EACH,yBAA0B,CACxB,GAAI,IACN,CACF,CAAC,EAEKG,EAAa,CAAE,GAAI,KAAM,GAAI,KAAM,GAAI,IAAK,EAErCC,EAAYC,GAA6C,CACpE,MAAMC,EAAcC,EAAM,WAAWC,CAAe,EAC9C,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA6BF,EAAOG,GAAMT,EAAWS,EAAE,EAC7D,CAACH,CAAI,CACP,EACA,OAAOF,EAAA,cAACM,EAAA,CAAM,GAAGR,EAAO,KAAMK,EAAU,CAC1C,EAEMI,EAAc,CAAC,CAAE,SAAAC,KAAaC,CAAK,IAAM,CAC7C,MAAMC,EAAgBV,EAAM,SAAS,QAAQQ,CAAQ,EAC/CG,EAAgBD,EAAc,QAAU,EAC9C,OACEV,EAAA,cAACN,GAAmB,GAAGe,CAAAA,EAEnBC,EAAc,IAAI,CAACE,EAAOC,IACpB,CAACF,GAAiB,OAAOC,GAAU,SAEnCZ,EAAA,cAACc,EAAA,CAAI,GAAG,OAAO,IAAKrB,EAAiB,IAAKmB,CACvCA,EAAAA,CACH,EAEAZ,EAAM,eAAeY,CAAK,GAAKA,EAAM,OAASN,EACzCN,EAAA,cAACH,EAAA,CAAS,IAAK,QAAQgB,IAAU,GAAGD,EAAM,KAAO,CAAA,EAEnDA,CACR,CAEL,CAEJ,EAEaG,EAAapB,EAAOqB,EAAM,CACrC,GAAI,KACJ,OAAQ,YACR,aAAc,KACd,WAAY,SACZ,WAAY,QACZ,SAAU,OACV,YAAa,cACb,MAAO,cACP,GAAI,cACJ,cAAe,CACb,QAAS,MACT,cAAe,MACjB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,GAAGC,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,CACF,CACF,CACF,CAAC,EAKYhB,EAAkBD,EAAM,cAAgC,CAAA,CAAE,EAE1DkB,EAAmB,CAAC,CAC/B,KAAAhB,EACA,SAAAM,CACF,IAA8B,CAC5B,MAAMW,EAAQnB,EAAM,QAA0B,KAAO,CAAE,KAAAE,CAAK,GAAI,CAACA,CAAI,CAAC,EACtE,OACEF,EAAA,cAACC,EAAgB,SAAhB,CAAyB,MAAOkB,GAC9BX,CACH,CAEJ,EAIMY,EACJpB,EAAM,WAAW,CAAC,CAAE,KAAAE,EAAO,QAASO,CAAK,EAAGY,IAExCrB,EAAA,cAACkB,GAAiB,KAAMhB,CAAAA,EACtBF,EAAA,cAACe,EAAA,CAAW,IAAKM,EAAK,KAAMnB,EAAO,GAAGO,EAAM,CAC9C,CAEH,EAEUa,EAAO,OAAO,OAAOF,EAAU,CAC1C,QAASb,EACT,KAAMV,CACR,CAAC,EAEDuB,EAAS,YAAc"}
+{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { getTextVariant } from '~/components/text'\nimport { styled } from '~/stitches'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nconst overflowElipsis = {\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap'\n}\nexport const StyledChipContent = styled('span', {\n  display: 'inline-flex',\n  alignItems: 'center',\n  px: '$1',\n  flexGrow: 1,\n  ...overflowElipsis,\n  '& > *:not(:last-child)': {\n    mr: '$1'\n  }\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n  const rootContext = React.useContext(ChipRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n  return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  return (\n    <StyledChipContent {...rest}>\n      {\n        childrenArray.map((child, index) => {\n          if (!isSingleChild && typeof child === 'string')\n            return (\n              <Box as=\"span\" css={overflowElipsis} key={child}>\n                {child}\n              </Box>\n            )\n          if (React.isValidElement(child) && child.type === Icon) {\n            return <ChipIcon key={`icon-${index}`} {...child.props} />\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </StyledChipContent>\n  )\n}\n\nexport const StyledRoot = styled(Flex, {\n  px: '$2',\n  border: '1px solid',\n  borderRadius: '$1',\n  alignItems: 'center',\n  fontFamily: '$body',\n  maxWidth: '100%',\n  borderColor: '$primary800',\n  color: '$primary900',\n  bg: '$primary100',\n  '&[disabled]': {\n    opacity: '0.3',\n    pointerEvents: 'none'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$2',\n        ...getTextVariant({ size: 'sm' })\n      },\n      md: {\n        height: '$3',\n        ...getTextVariant({ size: 'sm' })\n      },\n      lg: {\n        height: '$4',\n        ...getTextVariant({ size: 'md' })\n      }\n    }\n  }\n})\n\nexport type TChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type TChipRootProviderProps = TChipRootContext\n\nexport const ChipRootContext = React.createContext<TChipRootContext>({})\n\nexport const ChipRootProvider = ({\n  size,\n  children\n}: TChipRootProviderProps) => {\n  const value = React.useMemo<TChipRootContext>(() => ({ size }), [size])\n  return (\n    <ChipRootContext.Provider value={value}>\n      {children}\n    </ChipRootContext.Provider>\n  )\n}\n\nexport type TChipRootProps = TChipRootProviderProps\n\nconst ChipRoot: React.ForwardRefExoticComponent<TChipRootProps> =\n  React.forwardRef(({ size = 'md', ...rest }, ref) => {\n    return (\n      <ChipRootProvider size={size}>\n        <StyledRoot ref={ref} size={size} {...rest} />\n      </ChipRootProvider>\n    )\n  })\n\nexport const Chip = Object.assign(ChipRoot, {\n  Content: ChipContent,\n  Icon: ChipIcon\n})\n\nChipRoot.displayName = 'Chip'\n"],"names":["overflowElipsis","StyledChipContent","styled","toIconSize","ChipIcon","props","rootContext","React","ChipRootContext","size","iconSize","overrideStitchesVariantValue","s","Icon","ChipContent","children","rest","childrenArray","isSingleChild","child","index","Box","StyledRoot","Flex","getTextVariant","ChipRootProvider","value","ChipRoot","ref","Chip"],"mappings":"qWASA,MAAMA,EAAkB,CACtB,SAAU,SACV,aAAc,WACd,WAAY,QACd,EACaC,EAAoBC,EAAO,OAAQ,CAC9C,QAAS,cACT,WAAY,SACZ,GAAI,KACJ,SAAU,EACV,GAAGF,EACH,yBAA0B,CACxB,GAAI,IACN,CACF,CAAC,EAEKG,EAAa,CAAE,GAAI,KAAM,GAAI,KAAM,GAAI,IAAK,EAErCC,EAAYC,GAA6C,CACpE,MAAMC,EAAcC,EAAM,WAAWC,CAAe,EAC9C,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA6BF,EAAOG,GAAMT,EAAWS,EAAE,EAC7D,CAACH,CAAI,CACP,EACA,OAAOF,EAAA,cAACM,EAAA,CAAM,GAAGR,EAAO,KAAMK,EAAU,CAC1C,EAEMI,EAAc,CAAC,CAAE,SAAAC,KAAaC,CAAK,IAAM,CAC7C,MAAMC,EAAgBV,EAAM,SAAS,QAAQQ,CAAQ,EAC/CG,EAAgBD,EAAc,QAAU,EAC9C,OACEV,EAAA,cAACN,GAAmB,GAAGe,CAAAA,EAEnBC,EAAc,IAAI,CAACE,EAAOC,IACpB,CAACF,GAAiB,OAAOC,GAAU,SAEnCZ,EAAA,cAACc,EAAA,CAAI,GAAG,OAAO,IAAKrB,EAAiB,IAAKmB,CACvCA,EAAAA,CACH,EAEAZ,EAAM,eAAeY,CAAK,GAAKA,EAAM,OAASN,EACzCN,EAAA,cAACH,EAAA,CAAS,IAAK,QAAQgB,IAAU,GAAGD,EAAM,KAAO,CAAA,EAEnDA,CACR,CAEL,CAEJ,EAEaG,EAAapB,EAAOqB,EAAM,CACrC,GAAI,KACJ,OAAQ,YACR,aAAc,KACd,WAAY,SACZ,WAAY,QACZ,SAAU,OACV,YAAa,cACb,MAAO,cACP,GAAI,cACJ,cAAe,CACb,QAAS,MACT,cAAe,MACjB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,GAAGC,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,CACF,CACF,CACF,CAAC,EAKYhB,EAAkBD,EAAM,cAAgC,CAAA,CAAE,EAE1DkB,EAAmB,CAAC,CAC/B,KAAAhB,EACA,SAAAM,CACF,IAA8B,CAC5B,MAAMW,EAAQnB,EAAM,QAA0B,KAAO,CAAE,KAAAE,CAAK,GAAI,CAACA,CAAI,CAAC,EACtE,OACEF,EAAA,cAACC,EAAgB,SAAhB,CAAyB,MAAOkB,GAC9BX,CACH,CAEJ,EAIMY,EACJpB,EAAM,WAAW,CAAC,CAAE,KAAAE,EAAO,QAASO,CAAK,EAAGY,IAExCrB,EAAA,cAACkB,GAAiB,KAAMhB,CAAAA,EACtBF,EAAA,cAACe,EAAA,CAAW,IAAKM,EAAK,KAAMnB,EAAO,GAAGO,EAAM,CAC9C,CAEH,EAEUa,EAAO,OAAO,OAAOF,EAAU,CAC1C,QAASb,EACT,KAAMV,CACR,CAAC,EAEDuB,EAAS,YAAc"}

package/dist/components/combobox/ComboboxInput.js

@@ -1,2 +1,2 @@
-import{ComboboxInput as n}from"@reach/combobox";import*as o from"react";import{styled as a,theme as d}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as l}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";const e=a(n,{boxShadow:"none",appearance:"none",backgroundImage:l(d.colors.grey700.value,"chevron"),backgroundPosition:"right $space$3 top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"20px auto, 100%",border:"1px solid $grey700",borderRadius:"$0",boxSizing:"border-box",color:"$grey1000",cursor:"text",display:"block",fontFamily:"$body",height:"$4",pl:"$3",pr:"$6",transition:"all 100ms ease-out",width:"100%","&::placeholder":{color:"$grey700",opacity:1},"&:focus-within":{borderColor:"$primary800",outline:"none"},"&[disabled]":{backgroundColor:"$grey200",color:"$grey800",cursor:"not-allowed"},variants:{size:{sm:{height:"$3",fontSize:"$sm",lineHeight:1.7},md:{height:"$4",fontSize:"$md",lineHeight:2},lg:{height:"$5",fontSize:"$md",lineHeight:2}},state:{error:{border:"1px solid $danger"}}}}),p=o.forwardRef(({size:r="md",...t},i)=>o.createElement(e,{size:r,...t,ref:i}));export{p as ComboboxInput,e as StyledComboboxInput};
+import{ComboboxInput as n}from"@reach/combobox";import*as o from"react";import{styled as a,theme as d}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as l}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";const e=a(n,{boxShadow:"none",appearance:"none",backgroundImage:l(d.colors.grey700.value,"chevron"),backgroundPosition:"right $space$3 top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"20px auto, 100%",border:"1px solid $grey700",borderRadius:"$1",boxSizing:"border-box",color:"$grey1000",cursor:"text",display:"block",fontFamily:"$body",height:"$4",pl:"$3",pr:"$6",transition:"all 100ms ease-out",width:"100%","&::placeholder":{color:"$grey700",opacity:1},"&:focus-within":{borderColor:"$primary800",outline:"none"},"&[disabled]":{backgroundColor:"$grey200",color:"$grey800",cursor:"not-allowed"},variants:{size:{sm:{height:"$3",fontSize:"$sm",lineHeight:1.7},md:{height:"$4",fontSize:"$md",lineHeight:2},lg:{height:"$5",fontSize:"$md",lineHeight:2}},state:{error:{border:"1px solid $danger"}}}}),p=o.forwardRef(({size:r="md",...t},i)=>o.createElement(e,{size:r,...t,ref:i}));export{p as ComboboxInput,e as StyledComboboxInput};
 //# sourceMappingURL=ComboboxInput.js.map

package/dist/components/combobox/ComboboxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.js","sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n  boxShadow: 'none', // prevent default iOS default styling\n  appearance: 'none',\n  backgroundImage: encodeBackgroundIcon(theme.colors.grey700.value, 'chevron'),\n  backgroundPosition: 'right $space$3 top 50%, 0 0',\n  backgroundRepeat: 'no-repeat, repeat',\n  backgroundSize: '20px auto, 100%',\n  border: '1px solid $grey700',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  color: '$grey1000',\n  cursor: 'text',\n  display: 'block',\n  fontFamily: '$body',\n  height: '$4',\n  pl: '$3',\n  pr: '$6',\n  transition: 'all 100ms ease-out',\n  width: '100%',\n  '&::placeholder': {\n    color: '$grey700',\n    opacity: 1\n  },\n  '&:focus-within': {\n    borderColor: '$primary800',\n    outline: 'none'\n  },\n  '&[disabled]': {\n    backgroundColor: '$grey200',\n    color: '$grey800',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$3',\n        fontSize: '$sm',\n        lineHeight: 1.7\n      },\n      md: {\n        height: '$4',\n        fontSize: '$md',\n        lineHeight: 2\n      },\n      lg: {\n        height: '$5',\n        fontSize: '$md',\n        lineHeight: 2\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n  typeof StyledComboboxInput\n>\n\nexport const ComboboxInput: React.ForwardRefExoticComponent<ComboboxInputProps> =\n  React.forwardRef(({ size = 'md', ...rest }, ref) => (\n    <StyledComboboxInput size={size} {...rest} ref={ref} />\n  ))\n"],"names":["StyledComboboxInput","styled","BaseComboboxInput","encodeBackgroundIcon","theme","ComboboxInput","React","size","rest","ref"],"mappings":"6XAOO,MAAMA,EAAsBC,EAAOC,EAAmB,CAC3D,UAAW,OACX,WAAY,OACZ,gBAAiBC,EAAqBC,EAAM,OAAO,QAAQ,MAAO,SAAS,EAC3E,mBAAoB,8BACpB,iBAAkB,oBAClB,eAAgB,kBAChB,OAAQ,qBACR,aAAc,KACd,UAAW,aACX,MAAO,YACP,OAAQ,OACR,QAAS,QACT,WAAY,QACZ,OAAQ,KACR,GAAI,KACJ,GAAI,KACJ,WAAY,qBACZ,MAAO,OACP,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,iBAAkB,CAChB,YAAa,cACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,WACjB,MAAO,WACP,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,GACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAMYC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAK,EAAGC,IAC1CH,EAAA,cAACN,EAAA,CAAoB,KAAMO,EAAO,GAAGC,EAAM,IAAKC,EAAK,CACtD"}
+{"version":3,"file":"ComboboxInput.js","sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n  boxShadow: 'none', // prevent default iOS default styling\n  appearance: 'none',\n  backgroundImage: encodeBackgroundIcon(theme.colors.grey700.value, 'chevron'),\n  backgroundPosition: 'right $space$3 top 50%, 0 0',\n  backgroundRepeat: 'no-repeat, repeat',\n  backgroundSize: '20px auto, 100%',\n  border: '1px solid $grey700',\n  borderRadius: '$1',\n  boxSizing: 'border-box',\n  color: '$grey1000',\n  cursor: 'text',\n  display: 'block',\n  fontFamily: '$body',\n  height: '$4',\n  pl: '$3',\n  pr: '$6',\n  transition: 'all 100ms ease-out',\n  width: '100%',\n  '&::placeholder': {\n    color: '$grey700',\n    opacity: 1\n  },\n  '&:focus-within': {\n    borderColor: '$primary800',\n    outline: 'none'\n  },\n  '&[disabled]': {\n    backgroundColor: '$grey200',\n    color: '$grey800',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$3',\n        fontSize: '$sm',\n        lineHeight: 1.7\n      },\n      md: {\n        height: '$4',\n        fontSize: '$md',\n        lineHeight: 2\n      },\n      lg: {\n        height: '$5',\n        fontSize: '$md',\n        lineHeight: 2\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n  typeof StyledComboboxInput\n>\n\nexport const ComboboxInput: React.ForwardRefExoticComponent<ComboboxInputProps> =\n  React.forwardRef(({ size = 'md', ...rest }, ref) => (\n    <StyledComboboxInput size={size} {...rest} ref={ref} />\n  ))\n"],"names":["StyledComboboxInput","styled","BaseComboboxInput","encodeBackgroundIcon","theme","ComboboxInput","React","size","rest","ref"],"mappings":"6XAOO,MAAMA,EAAsBC,EAAOC,EAAmB,CAC3D,UAAW,OACX,WAAY,OACZ,gBAAiBC,EAAqBC,EAAM,OAAO,QAAQ,MAAO,SAAS,EAC3E,mBAAoB,8BACpB,iBAAkB,oBAClB,eAAgB,kBAChB,OAAQ,qBACR,aAAc,KACd,UAAW,aACX,MAAO,YACP,OAAQ,OACR,QAAS,QACT,WAAY,QACZ,OAAQ,KACR,GAAI,KACJ,GAAI,KACJ,WAAY,qBACZ,MAAO,OACP,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,iBAAkB,CAChB,YAAa,cACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,WACjB,MAAO,WACP,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,GACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAMYC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAK,EAAGC,IAC1CH,EAAA,cAACN,EAAA,CAAoB,KAAMO,EAAO,GAAGC,EAAM,IAAKC,EAAK,CACtD"}

package/dist/components/combobox/ComboboxPopover.js

@@ -1,2 +1,2 @@
-import{ComboboxPopover as o}from"@reach/combobox";import{styled as r}from"../../stitches.js";const e=r(o,{bg:"white",border:"solid 1px $grey200",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",fontFamily:"$body",fontSize:"$md",outline:"none",p:"$1",transform:"translateY($space$2)"});export{e as ComboboxPopover};
+import{ComboboxPopover as o}from"@reach/combobox";import{styled as r}from"../../stitches.js";const e=r(o,{bg:"white",border:"solid 1px $grey200",borderRadius:"$1",boxShadow:"$1",boxSizing:"border-box",fontFamily:"$body",fontSize:"$md",outline:"none",p:"$1",transform:"translateY($space$2)"});export{e as ComboboxPopover};
 //# sourceMappingURL=ComboboxPopover.js.map

package/dist/components/combobox/ComboboxPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxPopover.js","sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/stitches'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n  bg: 'white',\n  border: 'solid 1px $grey200',\n  borderRadius: '$0',\n  boxShadow: '$1',\n  boxSizing: 'border-box',\n  fontFamily: '$body',\n  fontSize: '$md',\n  outline: 'none',\n  p: '$1',\n  transform: 'translateY($space$2)'\n})\n"],"names":["ComboboxPopover","styled","BaseComboboxPopover"],"mappings":"6FAIa,MAAAA,EAAkBC,EAAOC,EAAqB,CACzD,GAAI,QACJ,OAAQ,qBACR,aAAc,KACd,UAAW,KACX,UAAW,aACX,WAAY,QACZ,SAAU,MACV,QAAS,OACT,EAAG,KACH,UAAW,sBACb,CAAC"}
+{"version":3,"file":"ComboboxPopover.js","sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/stitches'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n  bg: 'white',\n  border: 'solid 1px $grey200',\n  borderRadius: '$1',\n  boxShadow: '$1',\n  boxSizing: 'border-box',\n  fontFamily: '$body',\n  fontSize: '$md',\n  outline: 'none',\n  p: '$1',\n  transform: 'translateY($space$2)'\n})\n"],"names":["ComboboxPopover","styled","BaseComboboxPopover"],"mappings":"6FAIa,MAAAA,EAAkBC,EAAOC,EAAqB,CACzD,GAAI,QACJ,OAAQ,qBACR,aAAc,KACd,UAAW,KACX,UAAW,aACX,WAAY,QACZ,SAAU,MACV,QAAS,OACT,EAAG,KACH,UAAW,sBACb,CAAC"}

package/dist/components/create-password-field/CreatePasswordField.js

@@ -1,2 +1,2 @@
-import E from"invariant";import*as a from"react";import{useFormContext as k}from"react-hook-form";import{throttle as B}from"throttle-debounce";import{Box as P}from"../box/Box.js";import{Flex as D}from"../flex/Flex.js";import{InlineMessage as I}from"../inline-message/InlineMessage.js";import{PasswordField as M}from"../password-field/PasswordField.js";const p=({validate:u,defaultValidation:f,messageDirection:v="row",label:b="Create a password",name:r="password",css:w,validation:y,appearance:C,...x})=>{var i;const{formState:o,control:n}=k(),[s,m]=a.useState(!1),[c,d]=a.useState(f),F=o.touched[r],g=((i=o.errors[r])==null?void 0:i.type)==="validate"||Object.values(c).every(e=>!e),l=a.useCallback(async e=>{const t=await u(e);return t?(E(typeof t=="object","The validate function must return an object"),d(t),Object.values(t).every(S=>S)):!1},[d]),h=a.useCallback(B(500,l),[l]),j=(e,t)=>e?"success":t?"neutral":"error",O=n.mode.isOnBlur&&(s||F)||n.mode.isOnSubmit&&(s||o.isSubmitted&&g);return a.createElement(P,{css:w},a.createElement(M,{label:b,name:r,onChange:e=>h(e.target.value),onBlur:()=>m(!1),onFocus:()=>m(!0),validation:{...y,validate:l},appearance:C,...x}),O&&a.createElement(D,{css:{mt:"$2",gap:"$2",flexWrap:"wrap",flexDirection:v}},Object.entries(c).map(([e,t])=>a.createElement(I,{key:e,theme:j(t,s)},e))))};p.displayName="CreatePasswordField";export{p as CreatePasswordField};
+import E from"invariant";import*as a from"react";import{useFormContext as k}from"react-hook-form";import{throttle as B}from"throttle-debounce";import{Box as P}from"../box/Box.js";import{Flex as D}from"../flex/Flex.js";import{InlineMessage as $}from"../inline-message/InlineMessage.js";import{PasswordField as I}from"../password-field/PasswordField.js";const p=({validate:u,defaultValidation:f,messageDirection:v="row",label:b="Create a password",name:r="password",css:w,validation:y,appearance:C,...x})=>{var i;const{formState:o,control:n}=k(),[s,m]=a.useState(!1),[c,d]=a.useState(f),F=o.touched[r],h=((i=o.errors[r])==null?void 0:i.type)==="validate"||Object.values(c).every(e=>!e),l=a.useCallback(async e=>{const t=await u(e);return t?(E(typeof t=="object","The validate function must return an object"),d(t),Object.values(t).every(S=>S)):!1},[d]),g=a.useCallback(B(500,l),[l]),j=(e,t)=>e?"success":t?"neutral":"error",O=n.mode.isOnBlur&&(s||F)||n.mode.isOnSubmit&&(s||o.isSubmitted&&h);return a.createElement(P,{css:w},a.createElement(I,{label:b,name:r,onChange:e=>g(e.target.value),onBlur:()=>m(!1),onFocus:()=>m(!0),validation:{...y,validate:l},appearance:C,...x}),O&&a.createElement(D,{css:{mt:"$2",gap:"$2",flexWrap:"wrap",flexDirection:v}},Object.entries(c).map(([e,t])=>a.createElement($,{key:e,theme:j(t,s)},e))))};p.displayName="CreatePasswordField";export{p as CreatePasswordField};
 //# sourceMappingURL=CreatePasswordField.js.map

package/dist/components/data-table/DataTable.d.ts

@@ -410,7 +410,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
     /**
      * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop
      */
-    DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, css, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
+    DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, css, ...props }: Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
         ref?: ((instance: HTMLTableElement | null) => void) | import("react").RefObject<HTMLTableElement> | null | undefined;
     }, "size" | "css" | "corners"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
         size?: "md" | "lg" | "xl" | undefined;
@@ -790,7 +790,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         scrollContainerCss?: import("../..").CSS;
         scrollContainerkey?: string;
         maxRowDepth?: number;
-    }, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+    }, "ref"> & import("react").RefAttributes<HTMLTableElement>, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
         ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
     }, "css" | "theme" | "isSticky"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
         theme?: "light" | "primary" | "white" | "primaryDark" | "primaryLight" | undefined;
@@ -1168,6 +1168,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
     }, "children"> & {
         sortable?: boolean;
         isSticky?: boolean;
+        stickyOffset?: number;
         headerCss?: import("../..").CSS;
     }, "theme" | "sortable">> & Partial<Pick<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
         ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
@@ -1546,6 +1547,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
     }, "striped">> & {
         scrollOptions?: {
             hasStickyHeader?: boolean;
+            stickyHeaderOffset?: number;
             headerCss?: import("../..").CSS;
             numberOfStickyColumns?: number;
             scrollContainerCss?: import("../..").CSS;
@@ -1994,7 +1996,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * If you need more customisation options, you can build your own implementation
      * with `useDataTable` and the UI-only `Table` components.
      */
-    Head: ({ sortable, theme, isSticky, css, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+    Head: ({ sortable, theme, isSticky, stickyOffset, css, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
         ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
     }, "css" | "theme" | "isSticky"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
         theme?: "light" | "primary" | "white" | "primaryDark" | "primaryLight" | undefined;
@@ -2372,8 +2374,9 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
     }, "children"> & {
         sortable?: boolean;
         isSticky?: boolean;
+        stickyOffset?: number;
         headerCss?: import("../..").CSS;
-    }) => import("react").JSX.Element;
+    }) => import("react").ReactElement;
     /** Default header implementation for `DataTable`
      *
      * Can be configured to make the column sortable. If you need more customisation options,
@@ -3166,7 +3169,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * scratch with `useDataTable` and the UI-only `Table` components.
      *
      */
-    Table: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: import("./DataTableTable").DataTableTableProps) => import("react").JSX.Element | null;
+    Table: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: import("./DataTableTable").DataTableTableProps) => JSX.Element | null;
     /** Default loading implementation for remote data
      *
      * Renders a loading component while fetching the paginated data using `getAsyncData`.
@@ -4316,16 +4319,16 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             };
         }> | undefined;
     }) => import("react").JSX.Element | null;
-    /** Empty state implementation for `DataTable`.
+    /** Select all rows checkbox.
      *
      * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows
      */
     SelectAllRowsCheckbox: ({ label }: {
         label?: string;
     }) => import("react").JSX.Element;
-    /** Empty state implementation for `DataTable`.
+    /** Individual row selection checkbox.
      *
-     * Renders a checkbox on the header, allowing for individual selection/deselection of any selectable row
+     * Renders a checkbox on each row, allowing for individual selection/deselection of any selectable row
      */
     RowSelectionCheckbox: ({ row, checked, onCheckedChange, label }: {
         row: import("@tanstack/table-core").Row<Record<string, unknown>>;
@@ -4333,9 +4336,9 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         onCheckedChange: (value: boolean) => void;
         label?: string;
     }) => import("react").ReactElement;
-    /** Empty state implementation for `DataTable`.
+    /** Bulk actions for selected rows.
      *
-     * Renders a checkbox on the header, allowing for individual selection/deselection of any selectable row
+     * Renders a toolbar with actions that can be applied to all selected rows
      */
     BulkActions: (({ children, ...rest }: {
         css?: import("../..").CSS;
@@ -4359,4 +4362,18 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             children: import("react").ReactNode;
         }) => import("react").JSX.Element | null;
     };
+    /** Bulk actions for selected rows.
+     *
+     * Renders a toolbar with actions that can be applied to all selected rows
+     */
+    BulkActionsFloating: (({ css, children, ...rest }: {
+        css?: import("../..").CSS;
+        children: import("react").ReactNode;
+    }) => import("react").JSX.Element | null) & {
+        SelectedRowActions: ({ cancelLabel, showDividers, children }: {
+            cancelLabel?: string;
+            showDividers?: boolean;
+            children: import("react").ReactNode;
+        }) => import("react").JSX.Element | null;
+    };
 };

package/dist/components/data-table/DataTable.js

@@ -1,2 +1,2 @@
-import{DataTableBody as a}from"./DataTableBody.js";import{DataTableBulkActions as o}from"./DataTableBulkActions.js";import{DataTableProvider as t}from"./DataTableContext.js";import{DataTableDataCell as e}from"./DataTableDataCell.js";import{DataTableEmptyState as r}from"./DataTableEmptyState.js";import{DataTableError as l}from"./DataTableError.js";import{DataTableGlobalFilter as m}from"./DataTableGlobalFilter.js";import{DataTableHead as i}from"./DataTableHead.js";import{DataTableHeaderCell as b}from"./DataTableHeaderCell.js";import{DataTableLoading as D}from"./DataTableLoading.js";import{DataTableMetaData as p}from"./DataTableMetaData.js";import{DataTableRow as T}from"./DataTableRow.js";import{DataTableRowSelectionCheckbox as f}from"./DataTableRowSelectionCheckbox.js";import{DataTableSelectAllRowsCheckbox as n}from"./DataTableSelectAllRowsCheckbox.js";import{DataTableTable as c}from"./DataTableTable.js";import{DragAndDropTable as d}from"./drag-and-drop/DragAndDropTable.js";import{Pagination as C}from"./pagination/Pagination.js";const g=Object.assign(t,{Body:a,DataCell:e,DragAndDropTable:d,GlobalFilter:m,Head:i,HeaderCell:b,MetaData:p,Pagination:C,Row:T,Table:c,Loading:D,Error:l,EmptyState:r,SelectAllRowsCheckbox:n,RowSelectionCheckbox:f,BulkActions:o});export{g as DataTable};
+import{DataTableBody as a}from"./DataTableBody.js";import{DataTableBulkActions as o}from"./DataTableBulkActions.js";import{DataTableBulkActionsFloating as t}from"./DataTableBulkActionsFloating.js";import{DataTableProvider as r}from"./DataTableContext.js";import{DataTableDataCell as e}from"./DataTableDataCell.js";import{DataTableEmptyState as l}from"./DataTableEmptyState.js";import{DataTableError as m}from"./DataTableError.js";import{DataTableGlobalFilter as i}from"./DataTableGlobalFilter.js";import{DataTableHead as b}from"./DataTableHead.js";import{DataTableHeaderCell as D}from"./DataTableHeaderCell.js";import{DataTableLoading as p}from"./DataTableLoading.js";import{DataTableMetaData as T}from"./DataTableMetaData.js";import{DataTableRow as f}from"./DataTableRow.js";import{DataTableRowSelectionCheckbox as n}from"./DataTableRowSelectionCheckbox.js";import{DataTableSelectAllRowsCheckbox as c}from"./DataTableSelectAllRowsCheckbox.js";import{DataTableTable as d}from"./DataTableTable.js";import{DragAndDropTable as g}from"./drag-and-drop/DragAndDropTable.js";import{Pagination as s}from"./pagination/Pagination.js";const k=Object.assign(r,{Body:a,DataCell:e,DragAndDropTable:g,GlobalFilter:i,Head:b,HeaderCell:D,MetaData:T,Pagination:s,Row:f,Table:d,Loading:p,Error:m,EmptyState:l,SelectAllRowsCheckbox:c,RowSelectionCheckbox:n,BulkActions:o,BulkActionsFloating:t});export{k as DataTable};
 //# sourceMappingURL=DataTable.js.map

package/dist/components/data-table/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { DataTableBody } from './DataTableBody'\nimport { DataTableBulkActions } from './DataTableBulkActions'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableMetaData } from './DataTableMetaData'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop'\nimport { Pagination } from './pagination'\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable = Object.assign(DataTableProvider, {\n  /** Default table body implementation for `DataTable`.\n   *\n   * Can be configured with alternating colours of rows. If you need more customisation options,\n   * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n   */\n  Body: DataTableBody,\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: DataTableDataCell,\n\n  /**\n   * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n   */\n  DragAndDropTable: DragAndDropTable,\n\n  /** Default global search implementation for `DataTable`\n   *\n   * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n   */\n  GlobalFilter: DataTableGlobalFilter,\n\n  /** Default table head implementation\n   *\n   * Can be configured to be sortable and with different visual themes.\n   * If you need more customisation options, you can build your own implementation\n   * with `useDataTable` and the UI-only `Table` components.\n   */\n  Head: DataTableHead,\n\n  /** Default header implementation for `DataTable`\n   *\n   * Can be configured to make the column sortable. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  HeaderCell: DataTableHeaderCell,\n\n  /** Default pagination implementation for `DataTable`\n   *\n   * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n   * you can build your own implementation with `useDataTable` and other UI components.\n   *\n   */\n  MetaData: DataTableMetaData,\n\n  /** Default display of amount of items and current sorting status for 'DataTable'\n   *\n   */\n  Pagination: Pagination,\n\n  /** Default row implementation for `DataTable`\n   *\n   * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  Row: DataTableRow,\n\n  /** Default table implementation for `DataTable`.\n   *\n   * Can be configured with sortable columns and different visual themes.\n   *\n   * If you need more customisation options, you can compose your own implementation with\n   * lower-level `DataTable` components or build the whole thing from\n   * scratch with `useDataTable` and the UI-only `Table` components.\n   *\n   */\n  Table: DataTableTable,\n\n  /** Default loading implementation for remote data\n   *\n   * Renders a loading component while fetching the paginated data using `getAsyncData`.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState`\n   * can be retrieved from `useDataTable`\n   */\n  Loading: DataTableLoading,\n\n  /** Default error implementation for remote data\n   *\n   * Renders an error component when `getAsyncData` promise rejects.\n   * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n   * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n   * and sorting parameters or your own custom paginated options.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n   * can be retrieved from `useDataTable`\n   *\n   */\n  Error: DataTableError,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: DataTableEmptyState,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows\n   */\n  SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Renders a checkbox on the header, allowing for individual selection/deselection of any selectable row\n   */\n  RowSelectionCheckbox: DataTableRowSelectionCheckbox,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Renders a checkbox on the header, allowing for individual selection/deselection of any selectable row\n   */\n  BulkActions: DataTableBulkActions\n})\n"],"names":["DataTable","DataTableProvider","DataTableBody","DataTableDataCell","DragAndDropTable","DataTableGlobalFilter","DataTableHead","DataTableHeaderCell","DataTableMetaData","Pagination","DataTableRow","DataTableTable","DataTableLoading","DataTableError","DataTableEmptyState","DataTableSelectAllRowsCheckbox","DataTableRowSelectionCheckbox","DataTableBulkActions"],"mappings":"mhCAuBO,MAAMA,EAAY,OAAO,OAAOC,EAAmB,CAMxD,KAAMC,EAMN,SAAUC,EAKV,iBAAkBC,EAMlB,aAAcC,EAQd,KAAMC,EAON,WAAYC,EAQZ,SAAUC,EAKV,WAAYC,EAOZ,IAAKC,EAWL,MAAOC,EASP,QAASC,EAaT,MAAOC,EAMP,WAAYC,EAMZ,sBAAuBC,EAMvB,qBAAsBC,EAMtB,YAAaC,CACf,CAAC"}
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { DataTableBody } from './DataTableBody'\nimport { DataTableBulkActions } from './DataTableBulkActions'\nimport { DataTableBulkActionsFloating } from './DataTableBulkActionsFloating'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableMetaData } from './DataTableMetaData'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop'\nimport { Pagination } from './pagination'\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable = Object.assign(DataTableProvider, {\n  /** Default table body implementation for `DataTable`.\n   *\n   * Can be configured with alternating colours of rows. If you need more customisation options,\n   * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n   */\n  Body: DataTableBody,\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: DataTableDataCell,\n\n  /**\n   * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n   */\n  DragAndDropTable: DragAndDropTable,\n\n  /** Default global search implementation for `DataTable`\n   *\n   * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n   */\n  GlobalFilter: DataTableGlobalFilter,\n\n  /** Default table head implementation\n   *\n   * Can be configured to be sortable and with different visual themes.\n   * If you need more customisation options, you can build your own implementation\n   * with `useDataTable` and the UI-only `Table` components.\n   */\n  Head: DataTableHead,\n\n  /** Default header implementation for `DataTable`\n   *\n   * Can be configured to make the column sortable. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  HeaderCell: DataTableHeaderCell,\n\n  /** Default pagination implementation for `DataTable`\n   *\n   * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n   * you can build your own implementation with `useDataTable` and other UI components.\n   *\n   */\n  MetaData: DataTableMetaData,\n\n  /** Default display of amount of items and current sorting status for 'DataTable'\n   *\n   */\n  Pagination: Pagination,\n\n  /** Default row implementation for `DataTable`\n   *\n   * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  Row: DataTableRow,\n\n  /** Default table implementation for `DataTable`.\n   *\n   * Can be configured with sortable columns and different visual themes.\n   *\n   * If you need more customisation options, you can compose your own implementation with\n   * lower-level `DataTable` components or build the whole thing from\n   * scratch with `useDataTable` and the UI-only `Table` components.\n   *\n   */\n  Table: DataTableTable,\n\n  /** Default loading implementation for remote data\n   *\n   * Renders a loading component while fetching the paginated data using `getAsyncData`.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState`\n   * can be retrieved from `useDataTable`\n   */\n  Loading: DataTableLoading,\n\n  /** Default error implementation for remote data\n   *\n   * Renders an error component when `getAsyncData` promise rejects.\n   * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n   * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n   * and sorting parameters or your own custom paginated options.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n   * can be retrieved from `useDataTable`\n   *\n   */\n  Error: DataTableError,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: DataTableEmptyState,\n\n  /** Select all rows checkbox.\n   *\n   * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows\n   */\n  SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,\n\n  /** Individual row selection checkbox.\n   *\n   * Renders a checkbox on each row, allowing for individual selection/deselection of any selectable row\n   */\n  RowSelectionCheckbox: DataTableRowSelectionCheckbox,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActions: DataTableBulkActions,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActionsFloating: DataTableBulkActionsFloating\n})\n"],"names":["DataTable","DataTableProvider","DataTableBody","DataTableDataCell","DragAndDropTable","DataTableGlobalFilter","DataTableHead","DataTableHeaderCell","DataTableMetaData","Pagination","DataTableRow","DataTableTable","DataTableLoading","DataTableError","DataTableEmptyState","DataTableSelectAllRowsCheckbox","DataTableRowSelectionCheckbox","DataTableBulkActions","DataTableBulkActionsFloating"],"mappings":"omCAwBO,MAAMA,EAAY,OAAO,OAAOC,EAAmB,CAMxD,KAAMC,EAMN,SAAUC,EAKV,iBAAkBC,EAMlB,aAAcC,EAQd,KAAMC,EAON,WAAYC,EAQZ,SAAUC,EAKV,WAAYC,EAOZ,IAAKC,EAWL,MAAOC,EASP,QAASC,EAaT,MAAOC,EAMP,WAAYC,EAMZ,sBAAuBC,EAMvB,qBAAsBC,EAMtB,YAAaC,EAMb,oBAAqBC,CACvB,CAAC"}

package/dist/components/data-table/DataTable.types.d.ts

@@ -18,6 +18,12 @@ export type TAsyncDataOptions = {
     globalFilter?: string;
 };
 export type TGetAsyncData = (options: TAsyncDataOptions) => Promise<TAsyncDataResult | undefined>;
+export type TablePosition = {
+    top: number | null;
+    bottom: number | null;
+    offsetTop: number;
+    isVisible: boolean;
+};
 export type DataTableContextType<T = unknown> = Table<T> & {
     setIsSortable: React.Dispatch<React.SetStateAction<boolean>>;
     applyPagination: () => void;
@@ -28,6 +34,8 @@ export type DataTableContextType<T = unknown> = Table<T> & {
     disabledRows?: Record<string, boolean>;
     enableRowSelection?: boolean | ((row: Row<unknown>) => boolean);
     rowSelection: RowSelectionState;
+    tablePosition?: TablePosition;
+    setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>;
     data: TAsyncDataResult;
     columns: any;
     tableId: string;

package/dist/components/data-table/DataTable.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.types.js","sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  ColumnOrderTableState,\n  ColumnPinningTableState,\n  ColumnSizingTableState,\n  ExpandedTableState,\n  FiltersTableState,\n  GroupingTableState,\n  PaginationTableState,\n  Row,\n  RowSelectionState,\n  RowSelectionTableState,\n  SortDirection,\n  SortingTableState,\n  Table,\n  VisibilityTableState\n} from '@tanstack/react-table'\nimport * as React from 'react'\nexport enum AsyncDataState {\n  NONE = 'none',\n  PENDING = 'pending',\n  FULFILLED = 'fulfilled',\n  REJECTED = 'rejected'\n}\n\nexport type TAsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type TAsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type TGetAsyncData = (\n  options: TAsyncDataOptions\n) => Promise<TAsyncDataResult | undefined>\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n  setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n  applyPagination: () => void\n  getTotalRows: () => number\n  isSortable: boolean\n  asyncDataState?: AsyncDataState\n  runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  rowSelection: RowSelectionState\n  data: TAsyncDataResult\n  columns: any\n  tableId: string\n  /**\n   * Directly update the data array that the table rows are built from.\n   * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n   *\n   *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n   *  — it's probably best to only use one of those two methods for any given table.\n   */\n  setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\nexport type InitialState = Partial<\n  VisibilityTableState &\n    ColumnOrderTableState &\n    ColumnPinningTableState &\n    FiltersTableState &\n    SortingTableState &\n    ExpandedTableState &\n    GroupingTableState &\n    ColumnSizingTableState &\n    PaginationTableState &\n    RowSelectionTableState\n>\n\nexport type TDefaultSort = { column: string; direction: SortDirection }\n"],"names":["AsyncDataState"],"mappings":"AAiBO,IAAKA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,SAAW,WAJDA,IAAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"DataTable.types.js","sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  ColumnOrderTableState,\n  ColumnPinningTableState,\n  ColumnSizingTableState,\n  ExpandedTableState,\n  FiltersTableState,\n  GroupingTableState,\n  PaginationTableState,\n  Row,\n  RowSelectionState,\n  RowSelectionTableState,\n  SortDirection,\n  SortingTableState,\n  Table,\n  VisibilityTableState\n} from '@tanstack/react-table'\nimport * as React from 'react'\nexport enum AsyncDataState {\n  NONE = 'none',\n  PENDING = 'pending',\n  FULFILLED = 'fulfilled',\n  REJECTED = 'rejected'\n}\n\nexport type TAsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type TAsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type TGetAsyncData = (\n  options: TAsyncDataOptions\n) => Promise<TAsyncDataResult | undefined>\n\nexport type TablePosition = {\n  top: number | null\n  bottom: number | null\n  offsetTop: number\n  isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n  setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n  applyPagination: () => void\n  getTotalRows: () => number\n  isSortable: boolean\n  asyncDataState?: AsyncDataState\n  runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  rowSelection: RowSelectionState\n  tablePosition?: TablePosition\n  setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n  data: TAsyncDataResult\n  columns: any\n  tableId: string\n  /**\n   * Directly update the data array that the table rows are built from.\n   * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n   *\n   *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n   *  — it's probably best to only use one of those two methods for any given table.\n   */\n  setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\nexport type InitialState = Partial<\n  VisibilityTableState &\n    ColumnOrderTableState &\n    ColumnPinningTableState &\n    FiltersTableState &\n    SortingTableState &\n    ExpandedTableState &\n    GroupingTableState &\n    ColumnSizingTableState &\n    PaginationTableState &\n    RowSelectionTableState\n>\n\nexport type TDefaultSort = { column: string; direction: SortDirection }\n"],"names":["AsyncDataState"],"mappings":"AAiBO,IAAKA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,SAAW,WAJDA,IAAAA,GAAA,CAAA,CAAA"}

package/dist/components/data-table/DataTableBulkActionsFloating.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSS } from '../../stitches';
+export declare const DataTableBulkActionsFloating: (({ css, children, ...rest }: {
+    css?: CSS;
+    children: React.ReactNode;
+}) => React.JSX.Element | null) & {
+    SelectedRowActions: ({ cancelLabel, showDividers, children }: {
+        cancelLabel?: string;
+        showDividers?: boolean;
+        children: React.ReactNode;
+    }) => React.JSX.Element | null;
+};

package/dist/components/data-table/DataTableBulkActionsFloating.js

@@ -0,0 +1,2 @@
+import{Close as a}from"@atom-learning/icons";import*as e from"react";import{styled as i}from"../../stitches.js";import{ActionIcon as p}from"../action-icon/ActionIcon.js";import{Badge as f}from"../badge/Badge.js";import{Flex as t}from"../flex/Flex.js";import{Icon as d}from"../icon/Icon.js";import{Text as x}from"../text/Text.js";import{BulkActionsSelectedRowActions as $}from"./DataTableBulkActionsSelectedRowActions.js";import{useDataTable as g}from"./DataTableContext.js";const h=i("div",{}),u=i(t,{p:"$2 $1 $2 $3",mb:"$4",mt:"$2",justifyContent:"space-between",alignItems:"center",borderRadius:"$3",bg:"$primary800",pointerEvents:"all",zIndex:2,width:"100%",mx:"$4",boxShadow:"$2","@sm":{maxWidth:"800px"},"@lg":{p:"$3 $1 $3 $4",mb:"$5",maxWidth:"1000px"},"@xl":{p:"$4 $2 $4 $24",mb:"$5",maxWidth:"1400px"}}),b=Object.assign(({css:w,children:l,...n})=>{const{rowSelection:o,toggleAllPageRowsSelected:m}=g(),r=e.useRef(null),s=e.useMemo(()=>Object.keys(o||{}).length,[o]),c=()=>m(!1);return s===0?null:e.createElement(h,{ref:r,css:{left:0,bottom:0,display:"flex",justifyContent:"center",position:"sticky",pointerEvents:"none"}},e.createElement(u,{...n},e.createElement(t,{justify:"flex-start",align:"center",gap:2,css:{flex:"auto"}},e.createElement(f,{theme:"success",size:"xs",emphasis:"subtle",css:{minWidth:"24px",height:"24px"}},s),e.createElement(x,{size:"sm",weight:"bold",css:{color:"white"}},"selected")),e.createElement(t,{justify:"flex-end",align:"center",gap:3,css:{flex:"auto"}},l,e.createElement(p,{appearance:"simple",theme:"white",size:"md",onClick:c,label:"close"},e.createElement(d,{is:a})))))},{SelectedRowActions:$});export{b as DataTableBulkActionsFloating};
+//# sourceMappingURL=DataTableBulkActionsFloating.js.map

package/dist/components/data-table/DataTableBulkActionsFloating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableBulkActionsFloating.js","sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Badge } from '../badge'\nimport { Button } from '../button'\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Text } from '../text'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\nimport { useDataTable } from './DataTableContext'\n\nconst ActionBarPositioner = styled('div', {})\n\nconst StyledContainer = styled(Flex, {\n  p: '$2 $1 $2 $3',\n  mb: '$4',\n  mt: '$2',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  borderRadius: '$3',\n  bg: '$primary800',\n  pointerEvents: 'all',\n  zIndex: 2,\n  width: '100%',\n  mx: '$4',\n  boxShadow: '$2',\n  '@sm': {\n    maxWidth: '800px'\n  },\n  '@lg': {\n    p: '$3 $1 $3 $4',\n    mb: '$5',\n    maxWidth: '1000px'\n  },\n  '@xl': {\n    p: '$4 $2 $4 $24',\n    mb: '$5',\n    maxWidth: '1400px'\n  }\n})\n\nexport const DataTableBulkActionsFloating = Object.assign(\n  ({ css, children, ...rest }: { css?: CSS; children: React.ReactNode }) => {\n    const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n    const actionBarRef = React.useRef<HTMLDivElement>(null)\n\n    const numberOfSelectedRows = React.useMemo(() => {\n      return Object.keys(rowSelection || {}).length\n    }, [rowSelection])\n\n    const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n    if (numberOfSelectedRows === 0) return null\n\n    return (\n      <ActionBarPositioner\n        ref={actionBarRef}\n        css={{\n          left: 0,\n          bottom: 0,\n          display: 'flex',\n          justifyContent: 'center',\n          position: 'sticky',\n          pointerEvents: 'none'\n        }}\n      >\n        <StyledContainer {...rest}>\n          <Flex\n            justify=\"flex-start\"\n            align=\"center\"\n            gap={2}\n            css={{ flex: 'auto' }}\n          >\n            <Badge\n              theme=\"success\"\n              size=\"xs\"\n              emphasis=\"subtle\"\n              css={{ minWidth: '24px', height: '24px' }}\n            >\n              {numberOfSelectedRows}\n            </Badge>\n            <Text size=\"sm\" weight=\"bold\" css={{ color: 'white' }}>\n              selected\n            </Text>\n          </Flex>\n\n          <Flex\n            justify=\"flex-end\"\n            align=\"center\"\n            gap={3}\n            css={{ flex: 'auto' }}\n          >\n            {children}\n\n            <ActionIcon\n              appearance=\"simple\"\n              theme=\"white\"\n              size=\"md\"\n              onClick={handleDeselectAllPageRows}\n              label=\"close\"\n            >\n              <Icon is={Close} />\n            </ActionIcon>\n          </Flex>\n        </StyledContainer>\n      </ActionBarPositioner>\n    )\n  },\n  {\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"names":["ActionBarPositioner","styled","StyledContainer","Flex","DataTableBulkActionsFloating","css","children","rest","rowSelection","toggleAllPageRowsSelected","useDataTable","actionBarRef","React","numberOfSelectedRows","handleDeselectAllPageRows","Badge","Text","ActionIcon","Icon","Close","BulkActionsSelectedRowActions"],"mappings":"0dAcA,MAAMA,EAAsBC,EAAO,MAAO,CAAA,CAAE,EAEtCC,EAAkBD,EAAOE,EAAM,CACnC,EAAG,cACH,GAAI,KACJ,GAAI,KACJ,eAAgB,gBAChB,WAAY,SACZ,aAAc,KACd,GAAI,cACJ,cAAe,MACf,OAAQ,EACR,MAAO,OACP,GAAI,KACJ,UAAW,KACX,MAAO,CACL,SAAU,OACZ,EACA,MAAO,CACL,EAAG,cACH,GAAI,KACJ,SAAU,QACZ,EACA,MAAO,CACL,EAAG,eACH,GAAI,KACJ,SAAU,QACZ,CACF,CAAC,EAEYC,EAA+B,OAAO,OACjD,CAAC,CAAE,IAAAC,EAAK,SAAAC,KAAaC,CAAK,IAAgD,CACxE,KAAM,CAAE,aAAAC,EAAc,0BAAAC,CAA0B,EAAIC,EAAAA,EAE9CC,EAAeC,EAAM,OAAuB,IAAI,EAEhDC,EAAuBD,EAAM,QAAQ,IAClC,OAAO,KAAKJ,GAAgB,CAAA,CAAE,EAAE,OACtC,CAACA,CAAY,CAAC,EAEXM,EAA4B,IAAML,EAA0B,EAAK,EAEvE,OAAII,IAAyB,EAAU,KAGrCD,EAAA,cAACZ,EAAA,CACC,IAAKW,EACL,IAAK,CACH,KAAM,EACN,OAAQ,EACR,QAAS,OACT,eAAgB,SAChB,SAAU,SACV,cAAe,MACjB,CAEAC,EAAAA,EAAA,cAACV,EAAA,CAAiB,GAAGK,CACnBK,EAAAA,EAAA,cAACT,EAAA,CACC,QAAQ,aACR,MAAM,SACN,IAAK,EACL,IAAK,CAAE,KAAM,MAAO,CAEpBS,EAAAA,EAAA,cAACG,EAAA,CACC,MAAM,UACN,KAAK,KACL,SAAS,SACT,IAAK,CAAE,SAAU,OAAQ,OAAQ,MAAO,CAAA,EAEvCF,CACH,EACAD,EAAA,cAACI,EAAA,CAAK,KAAK,KAAK,OAAO,OAAO,IAAK,CAAE,MAAO,OAAQ,CAAA,EAAG,UAEvD,CACF,EAEAJ,EAAA,cAACT,EAAA,CACC,QAAQ,WACR,MAAM,SACN,IAAK,EACL,IAAK,CAAE,KAAM,MAAO,CAEnBG,EAAAA,EAEDM,EAAA,cAACK,EAAA,CACC,WAAW,SACX,MAAM,QACN,KAAK,KACL,QAASH,EACT,MAAM,OAENF,EAAAA,EAAA,cAACM,EAAA,CAAK,GAAIC,EAAO,CACnB,CACF,CACF,CACF,CAEJ,EACA,CACE,mBAAoBC,CACtB,CACF"}

package/dist/components/data-table/DataTableBulkActionsSelectedRowActions.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const BulkActionsSelectedRowActions: ({ cancelLabel, showDividers, children }: {
+    cancelLabel?: string;
+    showDividers?: boolean;
+    children: React.ReactNode;
+}) => React.JSX.Element | null;

package/dist/components/data-table/DataTableBulkActionsSelectedRowActions.js

@@ -0,0 +1,2 @@
+import*as e from"react";import{Button as i}from"../button/Button.js";import{Divider as a}from"../divider/Divider.js";import{useDataTable as m}from"./DataTableContext.js";const s=({cancelLabel:l="Cancel",showDividers:n=!0,children:t})=>{const{toggleAllPageRowsSelected:o,rowSelection:r}=m(),c=()=>o(!1);return Object.keys(r||{}).length===0?null:e.createElement(e.Fragment,null,t,n&&e.Children.count(t)>0&&e.createElement(a,{orientation:"vertical",css:{mx:"$4"}}),e.createElement(i,{theme:"neutral",onClick:c},l))};export{s as BulkActionsSelectedRowActions};
+//# sourceMappingURL=DataTableBulkActionsSelectedRowActions.js.map

package/dist/components/data-table/DataTableBulkActionsSelectedRowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableBulkActionsSelectedRowActions.js","sources":["../../../src/components/data-table/DataTableBulkActionsSelectedRowActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button'\nimport { Divider } from '../divider'\nimport { useDataTable } from './DataTableContext'\n\nexport const BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  showDividers = true,\n  children\n}: {\n  cancelLabel?: string\n  showDividers?: boolean\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {showDividers && React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" css={{ mx: '$4' }} />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n"],"names":["BulkActionsSelectedRowActions","cancelLabel","showDividers","children","toggleAllPageRowsSelected","rowSelection","useDataTable","handleDeselectAllPageRows","React","Divider","Button"],"mappings":"gLAMaA,EAAgC,CAAC,CAC5C,YAAAC,EAAc,SACd,aAAAC,EAAe,GACf,SAAAC,CACF,IAIM,CACJ,KAAM,CAAE,0BAAAC,EAA2B,aAAAC,CAAa,EAAIC,EAAa,EAE3DC,EAA4B,IAAMH,EAA0B,EAAK,EAEvE,OAAI,OAAO,KAAKC,GAAgB,CAAA,CAAE,EAAE,SAAW,EAAU,KAGvDG,EAAA,cAAAA,EAAA,SAAA,KACGL,EACAD,GAAgBM,EAAM,SAAS,MAAML,CAAQ,EAAI,GAChDK,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,GAAI,IAAK,CAAG,CAAA,EAErDD,EAAA,cAACE,EAAA,CAAO,MAAM,UAAU,QAASH,CAC9BN,EAAAA,CACH,CACF,CAEJ"}