@atom-learning/components 11.5.0 → 12.0.0-beta.1

package/dist/components/side-bar/SideBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme, cn } from '../../styled'\nimport { SideBarContext } from './SideBar.context'\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\n\nconst light = {\n  '--background': 'white',\n  '--text': 'var(--color-grey-800)',\n  '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-(--background)',\n    'border-r',\n    'border-r-(--border)',\n    'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[shadow,width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nconst SideBarComponent = ({\n  theme,\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  const sideBarContextValue = React.useMemo(\n    () => ({ isExpanded }),\n    [isExpanded]\n  )\n\n  return (\n    <SideBarContext value={sideBarContextValue}>\n      <Theme theme={theme || light}>\n        <Root\n          {...rest}\n          style={{ ...style, '--offset': offset }}\n          type={type}\n          className={cn(\n            'h-[calc(100svh-var(--offset))]',\n            'top-(--offset)',\n            className\n          )}\n        >\n          <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n            {children}\n            {/**\n             * When the SideBar is collapsed, ensure that the initial tap event\n             * is used to expand the nav first before making the items available\n             */}\n            {type === 'expandable' && (\n              <PointerBlocker isVisible={!isHovered && !isExpanded} />\n            )}\n          </Content>\n        </Root>\n      </Theme>\n    </SideBarContext>\n  )\n}\n\nexport const SideBar = /* @__PURE__ */ Object.assign(SideBarComponent, {\n  Brand: SideBarBrand,\n  BrandLogo: SideBarBrandLogo,\n  BrandName: SideBarBrandName,\n  Header: SideBarHeader,\n  Body: SideBarBody,\n  Footer: SideBarFooter,\n  displayName: 'SideBar'\n})\n"],"mappings":";;;;;;;;AAcA,IAAM,QAAQ;CACZ,gBAAgB;CAChB,UAAU;CACV,YAAY;AACd;AAEA,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,KAAK;CACtB,UAAU,EACR,MAAM;EACJ,QAAQ,CAAC;EACT,YAAY,CAAC,MAAM;CACrB,EACF;AACF,CAAC;AAED,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,QAAQ,CAAC;GACT,YAAY,CAAC;EACf;EACA,YAAY;GACV,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,MAAM;EAChB;CACF;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,4CAA4C;CACtD,CACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,SAAS;EAC3B,OAAO,CAAC,YAAY,WAAW;CACjC,EACF;AACF,CAAC;AAOD,IAAM,oBAAoB,EACxB,OACA,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,SAAS,QAAQ;CACpE,MAAM,MAAM,QAAM,OAAuB,IAAI;CAE7C,mBAAmB;EACjB;EACA,yBAAyB,cAAc,KAAK;CAC9C,CAAC;CACD,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,IAAI;EACvC,oBAAoB,cAAc,KAAK;CACzC,CAAC;CACD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,IAAI;EACtC,kBAAkB,cAAc,KAAK;CACvC,CAAC;CACD,MAAM,aAAa,EACjB,kBAAkB,cAAc,IAAI,EACtC;CAEA,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;CACF,IACA,CAAC;CAOP,OACE,oBAAC,gBAAD;EAAgB,OANU,QAAM,eACzB,EAAE,WAAW,IACpB,CAAC,UAAU,CAIY;YACrB,oBAAC,OAAD;GAAO,OAAO,SAAS;aACrB,oBAAC,MAAD;IACE,GAAI;IACJ,OAAO;KAAE,GAAG;KAAO,YAAY;IAAO;IAChC;IACN,WAAW,GACT,kCACA,kBACA,SACF;cAEA,qBAAC,SAAD;KAAS,GAAI;KAA6B;KAAkB;eAA5D,CACG,UAKA,SAAS,gBACR,oBAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,WAAa,CAAA,CAElD;;GACL,CAAA;EACD,CAAA;CACO,CAAA;AAEpB;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,OAAO;CACP,WAAW;CACX,WAAW;CACX,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,aAAa;AACf,CAAC"}
+{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, cn } from '../../styled'\nimport { SideBarContext } from './SideBar.context'\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-surface',\n    'text-default',\n    'border-r',\n    'border-r-subtle',\n    // Transparent so the expanded edge shadow transitions in\n    'shadow-[4px_0_4px_-2px_transparent]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[shadow,width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-(--shadow-edge-end)']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n}\n\nconst SideBarComponent = ({\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  const sideBarContextValue = React.useMemo(\n    () => ({ isExpanded }),\n    [isExpanded]\n  )\n\n  return (\n    <SideBarContext value={sideBarContextValue}>\n      <Root\n        {...rest}\n        style={{ ...style, '--offset': offset }}\n        type={type}\n        className={cn(\n          'h-[calc(100svh-var(--offset))]',\n          'top-(--offset)',\n          className\n        )}\n      >\n        <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n          {children}\n          {/**\n           * When the SideBar is collapsed, ensure that the initial tap event\n           * is used to expand the nav first before making the items available\n           */}\n          {type === 'expandable' && (\n            <PointerBlocker isVisible={!isHovered && !isExpanded} />\n          )}\n        </Content>\n      </Root>\n    </SideBarContext>\n  )\n}\n\nexport const SideBar = /* @__PURE__ */ Object.assign(SideBarComponent, {\n  Brand: SideBarBrand,\n  BrandLogo: SideBarBrandLogo,\n  BrandName: SideBarBrandName,\n  Header: SideBarHeader,\n  Body: SideBarBody,\n  Footer: SideBarFooter,\n  displayName: 'SideBar'\n})\n"],"mappings":";;;;;;;;AAcA,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,KAAK;CACtB,UAAU,EACR,MAAM;EACJ,QAAQ,CAAC;EACT,YAAY,CAAC,MAAM;CACrB,EACF;AACF,CAAC;AAED,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,QAAQ,CAAC;GACT,YAAY,CAAC;EACf;EACA,YAAY;GACV,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,MAAM;EAChB;CACF;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,4BAA4B;CACtC,CACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,SAAS;EAC3B,OAAO,CAAC,YAAY,WAAW;CACjC,EACF;AACF,CAAC;AAOD,IAAM,oBAAoB,EACxB,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,SAAS,QAAQ;CACpE,MAAM,MAAM,QAAM,OAAuB,IAAI;CAE7C,mBAAmB;EACjB;EACA,yBAAyB,cAAc,KAAK;CAC9C,CAAC;CACD,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,IAAI;EACvC,oBAAoB,cAAc,KAAK;CACzC,CAAC;CACD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,IAAI;EACtC,kBAAkB,cAAc,KAAK;CACvC,CAAC;CACD,MAAM,aAAa,EACjB,kBAAkB,cAAc,IAAI,EACtC;CAEA,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;CACF,IACA,CAAC;CAOP,OACE,oBAAC,gBAAD;EAAgB,OANU,QAAM,eACzB,EAAE,WAAW,IACpB,CAAC,UAAU,CAIY;YACrB,oBAAC,MAAD;GACE,GAAI;GACJ,OAAO;IAAE,GAAG;IAAO,YAAY;GAAO;GAChC;GACN,WAAW,GACT,kCACA,kBACA,SACF;aAEA,qBAAC,SAAD;IAAS,GAAI;IAA6B;IAAkB;cAA5D,CACG,UAKA,SAAS,gBACR,oBAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,WAAa,CAAA,CAElD;;EACL,CAAA;CACQ,CAAA;AAEpB;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,OAAO;CACP,WAAW;CACX,WAAW;CACX,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,aAAa;AACf,CAAC"}

package/dist/components/side-bar/SideBarComponents.js

@@ -5,7 +5,7 @@ import "react";
 //#region src/components/side-bar/SideBarComponents.tsx
 var SideBarHeader = styled("div", { base: [
 	"border-b",
-	"border-b-(--border)",
+	"border-b-subtle",
 	"p-4",
 	"w-full"
 ] });
@@ -18,13 +18,12 @@ var SideBarBody = styled("div", { base: [
 ] });
 var SideBarFooter = styled("div", { base: [
 	"border-t",
-	"border-t-(--border)",
+	"border-t-subtle",
 	"p-4",
 	"w-full"
 ] });
 var SideBarBrand = /* @__PURE__ */ styled("a", { base: [
 	"items-end",
-	"text-text",
 	"flex",
 	"gap-4",
 	"no-underline",
@@ -32,7 +31,7 @@ var SideBarBrand = /* @__PURE__ */ styled("a", { base: [
 	"focus:no-underline"
 ] });
 var SideBarBrandLogo = Image;
-var SideBarBrandName = styled(Text, { base: ["text-text", "whitespace-nowrap"] });
+var SideBarBrandName = styled(Text, { base: ["whitespace-nowrap"] });
 //#endregion
 export { SideBarBody, SideBarBrand, SideBarBrandLogo, SideBarBrandName, SideBarFooter, SideBarHeader };
 

package/dist/components/side-bar/SideBarComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideBarComponents.js","names":[],"sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const SideBarHeader = styled('div', {\n  base: ['border-b', 'border-b-(--border)', 'p-4', 'w-full']\n})\n\nexport const SideBarBody = styled('div', {\n  base: ['grow', 'overflow-y-auto', 'overflow-x-hidden', 'p-4', 'w-full']\n})\n\nexport const SideBarFooter = styled('div', {\n  base: ['border-t', 'border-t-(--border)', 'p-4', 'w-full']\n})\n\nconst StyledSideBarBrand = /* @__PURE__ */ styled('a', {\n  base: [\n    'items-end',\n    'text-text',\n    'flex',\n    'gap-4',\n    'no-underline',\n    'hover:no-underline',\n    'focus:no-underline'\n  ]\n})\n\nexport const SideBarBrand = StyledSideBarBrand as React.FC<\n  React.ComponentPropsWithRef<'a'> & { as?: React.ElementType }\n>\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n  base: ['text-text', 'whitespace-nowrap']\n})\n"],"mappings":";;;;;AAMA,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAuB;CAAO;AAAQ,EAC3D,CAAC;AAED,IAAa,cAAc,OAAO,OAAO,EACvC,MAAM;CAAC;CAAQ;CAAmB;CAAqB;CAAO;AAAQ,EACxE,CAAC;AAED,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAuB;CAAO;AAAQ,EAC3D,CAAC;AAcD,IAAa,eAAe,gBAZe,OAAO,KAAK,EACrD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAE4B;AAI5B,IAAa,mBAAmB;AAEhC,IAAa,mBAAmB,OAAO,MAAM,EAC3C,MAAM,CAAC,aAAa,mBAAmB,EACzC,CAAC"}
+{"version":3,"file":"SideBarComponents.js","names":[],"sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const SideBarHeader = styled('div', {\n  base: ['border-b', 'border-b-subtle', 'p-4', 'w-full']\n})\n\nexport const SideBarBody = styled('div', {\n  base: ['grow', 'overflow-y-auto', 'overflow-x-hidden', 'p-4', 'w-full']\n})\n\nexport const SideBarFooter = styled('div', {\n  base: ['border-t', 'border-t-subtle', 'p-4', 'w-full']\n})\n\nconst StyledSideBarBrand = /* @__PURE__ */ styled('a', {\n  base: [\n    'items-end',\n    'flex',\n    'gap-4',\n    'no-underline',\n    'hover:no-underline',\n    'focus:no-underline'\n  ]\n})\n\nexport const SideBarBrand = StyledSideBarBrand as React.FC<\n  React.ComponentPropsWithRef<'a'> & { as?: React.ElementType }\n>\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n  base: ['whitespace-nowrap']\n})\n"],"mappings":";;;;;AAMA,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAmB;CAAO;AAAQ,EACvD,CAAC;AAED,IAAa,cAAc,OAAO,OAAO,EACvC,MAAM;CAAC;CAAQ;CAAmB;CAAqB;CAAO;AAAQ,EACxE,CAAC;AAED,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAmB;CAAO;AAAQ,EACvD,CAAC;AAaD,IAAa,eAAe,gBAXe,OAAO,KAAK,EACrD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAE4B;AAI5B,IAAa,mBAAmB;AAEhC,IAAa,mBAAmB,OAAO,MAAM,EAC3C,MAAM,CAAC,mBAAmB,EAC5B,CAAC"}

package/dist/components/skeleton-loader/Skeleton.js

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
 //#region src/components/skeleton-loader/Skeleton.tsx
 var SkeletonLoader = styled("div", { base: [
-	"bg-grey-300",
+	"bg-neutral",
 	"size-16",
 	"animate-shimmer"
 ] });

package/dist/components/skeleton-loader/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/skeleton-loader/Skeleton.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const SkeletonLoader = styled('div', {\n  base: ['bg-grey-300', 'size-16', 'animate-shimmer']\n})\n\nSkeletonLoader.displayName = 'Skeleton'\n"],"mappings":";;AAEA,IAAa,iBAAiB,OAAO,OAAO,EAC1C,MAAM;CAAC;CAAe;CAAW;AAAiB,EACpD,CAAC;AAED,eAAe,cAAc"}
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/skeleton-loader/Skeleton.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const SkeletonLoader = styled('div', {\n  base: ['bg-neutral', 'size-16', 'animate-shimmer']\n})\n\nSkeletonLoader.displayName = 'Skeleton'\n"],"mappings":";;AAEA,IAAa,iBAAiB,OAAO,OAAO,EAC1C,MAAM;CAAC;CAAc;CAAW;AAAiB,EACnD,CAAC;AAED,eAAe,cAAc"}

package/dist/components/skeleton-loader/SkeletonCard.js

@@ -12,7 +12,7 @@ var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__
 		className: "align-center flex w-full gap-6",
 		children: [withChart && /* @__PURE__ */ jsx(SkeletonDoughnutChart, {}), /* @__PURE__ */ jsx("div", {
 			className: "flex grow flex-col gap-6",
-			children: Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ jsx(SkeletonLoader, { className: "bg-grey-200 h-10 w-full min-w-25 rounded-md" }, rowNumber))
+			children: Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ jsx(SkeletonLoader, { className: "bg-neutral h-10 w-full min-w-25 rounded-md" }, rowNumber))
 		})]
 	}), /* @__PURE__ */ jsx(SkeletonButton, {})]
 });

package/dist/components/skeleton-loader/SkeletonCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n  numberOfRows = 3,\n  withChart,\n  className\n}: {\n  numberOfRows?: number\n  withChart?: boolean\n  className?: string\n}) => (\n  <Tile\n    className={cn(\n      'relative',\n      'w-full',\n      'flex-col',\n      'items-center',\n      'gap-6',\n      'p-6',\n      className\n    )}\n  >\n    <div className=\"align-center flex w-full gap-6\">\n      {withChart && <SkeletonDoughnutChart />}\n      <div className=\"flex grow flex-col gap-6\">\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowNumber) => (\n            <SkeletonLoader\n              key={rowNumber}\n              className=\"bg-grey-200 h-10 w-full min-w-25 rounded-md\"\n            />\n          )\n        )}\n      </div>\n    </div>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;;AAQA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,qBAAC,MAAD;CACE,WAAW,GACT,YACA,UACA,YACA,gBACA,SACA,OACA,SACF;WATF,CAWE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,aAAa,oBAAC,uBAAD,CAAwB,CAAA,GACtC,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,cACC,oBAAC,gBAAD,EAEE,WAAU,8CACX,GAFM,SAEN,CAEL;EACG,CAAA,CACF;KACL,oBAAC,gBAAD,CAAiB,CAAA,CACb"}
+{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n  numberOfRows = 3,\n  withChart,\n  className\n}: {\n  numberOfRows?: number\n  withChart?: boolean\n  className?: string\n}) => (\n  <Tile\n    className={cn(\n      'relative',\n      'w-full',\n      'flex-col',\n      'items-center',\n      'gap-6',\n      'p-6',\n      className\n    )}\n  >\n    <div className=\"align-center flex w-full gap-6\">\n      {withChart && <SkeletonDoughnutChart />}\n      <div className=\"flex grow flex-col gap-6\">\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowNumber) => (\n            <SkeletonLoader\n              key={rowNumber}\n              className=\"bg-neutral h-10 w-full min-w-25 rounded-md\"\n            />\n          )\n        )}\n      </div>\n    </div>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;;AAQA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,qBAAC,MAAD;CACE,WAAW,GACT,YACA,UACA,YACA,gBACA,SACA,OACA,SACF;WATF,CAWE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,aAAa,oBAAC,uBAAD,CAAwB,CAAA,GACtC,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,cACC,oBAAC,gBAAD,EAEE,WAAU,6CACX,GAFM,SAEN,CAEL;EACG,CAAA,CACF;KACL,oBAAC,gBAAD,CAAiB,CAAA,CACb"}

package/dist/components/skeleton-loader/SkeletonDoughnutChart.js

@@ -10,9 +10,9 @@ var buildConicGradient = () => {
 	const stops = [];
 	let current = 0;
 	Array.from({ length: numberOfSegments }).forEach(() => {
-		stops.push(`var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`);
+		stops.push(`var(--background-color-neutral) ${current}deg ${current + segmentAngle}deg`);
 		current += segmentAngle;
-		stops.push(`white ${current}deg ${current + gap}deg`);
+		stops.push(`var(--background-color-surface) ${current}deg ${current + gap}deg`);
 		current += gap;
 	});
 	return `conic-gradient(${stops.join(", ")})`;
@@ -22,7 +22,7 @@ var SkeletonDoughnutChart = ({ className }) => /* @__PURE__ */ jsx(Tile, {
 	children: /* @__PURE__ */ jsx("div", {
 		className: "animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding",
 		style: { "--gradient": buildConicGradient() },
-		children: /* @__PURE__ */ jsx("div", { className: "mt-[20%] ml-[20%] size-[60%] rounded-full bg-white" })
+		children: /* @__PURE__ */ jsx("div", { className: "bg-surface mt-[20%] ml-[20%] size-[60%] rounded-full" })
 	})
 });
 //#endregion

package/dist/components/skeleton-loader/SkeletonDoughnutChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonDoughnutChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonDoughnutChart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\n\nconst buildConicGradient = () => {\n  const numberOfSegments = 5\n  const gap = 4\n  const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments\n  const stops: string[] = []\n  let current = 0\n\n  Array.from({ length: numberOfSegments }).forEach(() => {\n    stops.push(\n      `var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`\n    )\n    current += segmentAngle\n    stops.push(`white ${current}deg ${current + gap}deg`)\n    current += gap\n  })\n\n  return `conic-gradient(${stops.join(', ')})`\n}\n\nexport const SkeletonDoughnutChart = ({\n  className\n}: {\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'size-60', className)}>\n    <div\n      className=\"animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding\"\n      style={{ '--gradient': buildConicGradient() }}\n    >\n      <div className=\"mt-[20%] ml-[20%] size-[60%] rounded-full bg-white\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAKA,IAAM,2BAA2B;CAC/B,MAAM,mBAAmB;CACzB,MAAM,MAAM;CACZ,MAAM,gBAAgB,MAAM,mBAAmB,OAAO;CACtD,MAAM,QAAkB,CAAC;CACzB,IAAI,UAAU;CAEd,MAAM,KAAK,EAAE,QAAQ,iBAAiB,CAAC,CAAC,CAAC,cAAc;EACrD,MAAM,KACJ,yBAAyB,QAAQ,MAAM,UAAU,aAAa,IAChE;EACA,WAAW;EACX,MAAM,KAAK,SAAS,QAAQ,MAAM,UAAU,IAAI,IAAI;EACpD,WAAW;CACb,CAAC;CAED,OAAO,kBAAkB,MAAM,KAAK,IAAI,EAAE;AAC5C;AAEA,IAAa,yBAAyB,EACpC,gBAIA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,WAAW,SAAS;WAC7C,oBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,cAAc,mBAAmB,EAAE;YAE5C,oBAAC,OAAD,EAAK,WAAU,qDAAsD,CAAA;CAClE,CAAA;AACD,CAAA"}
+{"version":3,"file":"SkeletonDoughnutChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonDoughnutChart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\n\nconst buildConicGradient = () => {\n  const numberOfSegments = 5\n  const gap = 4\n  const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments\n  const stops: string[] = []\n  let current = 0\n\n  Array.from({ length: numberOfSegments }).forEach(() => {\n    stops.push(\n      `var(--background-color-neutral) ${current}deg ${current + segmentAngle}deg`\n    )\n    current += segmentAngle\n    stops.push(\n      `var(--background-color-surface) ${current}deg ${current + gap}deg`\n    )\n    current += gap\n  })\n\n  return `conic-gradient(${stops.join(', ')})`\n}\n\nexport const SkeletonDoughnutChart = ({\n  className\n}: {\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'size-60', className)}>\n    <div\n      className=\"animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding\"\n      style={{ '--gradient': buildConicGradient() }}\n    >\n      <div className=\"bg-surface mt-[20%] ml-[20%] size-[60%] rounded-full\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAKA,IAAM,2BAA2B;CAC/B,MAAM,mBAAmB;CACzB,MAAM,MAAM;CACZ,MAAM,gBAAgB,MAAM,mBAAmB,OAAO;CACtD,MAAM,QAAkB,CAAC;CACzB,IAAI,UAAU;CAEd,MAAM,KAAK,EAAE,QAAQ,iBAAiB,CAAC,CAAC,CAAC,cAAc;EACrD,MAAM,KACJ,mCAAmC,QAAQ,MAAM,UAAU,aAAa,IAC1E;EACA,WAAW;EACX,MAAM,KACJ,mCAAmC,QAAQ,MAAM,UAAU,IAAI,IACjE;EACA,WAAW;CACb,CAAC;CAED,OAAO,kBAAkB,MAAM,KAAK,IAAI,EAAE;AAC5C;AAEA,IAAa,yBAAyB,EACpC,gBAIA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,WAAW,SAAS;WAC7C,oBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,cAAc,mBAAmB,EAAE;YAE5C,oBAAC,OAAD,EAAK,WAAU,uDAAwD,CAAA;CACpE,CAAA;AACD,CAAA"}

package/dist/components/skeleton-loader/SkeletonPanelList.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var SkeletonPanelList = ({ className }) => /* @__PURE__ */ jsx(Tile, {
 	className: cn("px-6", "flex-col", "w-full", className),
 	children: /* @__PURE__ */ jsxs("div", {
-		className: "border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0",
+		className: "border-subtlest flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0",
 		children: [
 			/* @__PURE__ */ jsx(SkeletonLoader, { className: "size-10 rounded-full" }),
 			/* @__PURE__ */ jsx("div", {

package/dist/components/skeleton-loader/SkeletonPanelList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonPanelList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonPanelList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonPanelList = ({ className }: { className?: string }) => (\n  <Tile className={cn('px-6', 'flex-col', 'w-full', className)}>\n    <div className=\"border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0\">\n      <SkeletonLoader className=\"size-10 rounded-full\" />\n      <div className=\"grow\">\n        <SkeletonLoader className=\"h-4 w-2/3 rounded-full\" />\n      </div>\n      <SkeletonLoader className=\"h-8 w-28 rounded-md\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;;AAMA,IAAa,qBAAqB,EAAE,gBAClC,oBAAC,MAAD;CAAM,WAAW,GAAG,QAAQ,YAAY,UAAU,SAAS;WACzD,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA;GAClD,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA;GACjD,CAAA;GACL,oBAAC,gBAAD,EAAgB,WAAU,sBAAuB,CAAA;EAC9C;;AACD,CAAA"}
+{"version":3,"file":"SkeletonPanelList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonPanelList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonPanelList = ({ className }: { className?: string }) => (\n  <Tile className={cn('px-6', 'flex-col', 'w-full', className)}>\n    <div className=\"border-subtlest flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0\">\n      <SkeletonLoader className=\"size-10 rounded-full\" />\n      <div className=\"grow\">\n        <SkeletonLoader className=\"h-4 w-2/3 rounded-full\" />\n      </div>\n      <SkeletonLoader className=\"h-8 w-28 rounded-md\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;;AAMA,IAAa,qBAAqB,EAAE,gBAClC,oBAAC,MAAD;CAAM,WAAW,GAAG,QAAQ,YAAY,UAAU,SAAS;WACzD,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA;GAClD,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA;GACjD,CAAA;GACL,oBAAC,gBAAD,EAAgB,WAAU,sBAAuB,CAAA;EAC9C;;AACD,CAAA"}

package/dist/components/skeleton-loader/SkeletonTable.js

@@ -10,7 +10,7 @@ var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, class
 	children: /* @__PURE__ */ jsxs(Table, {
 		size: "md",
 		children: [/* @__PURE__ */ jsx(Table.Header, {
-			theme: "white",
+			appearance: "surface",
 			children: /* @__PURE__ */ jsx(Table.Row, { children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx(SkeletonLoader, {
 				style: { "--width": columnWidth?.[columnIndex] || "100px" },
 				className: "h-4 w-(--width) rounded-xl"
@@ -21,7 +21,7 @@ var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, class
 				className: "border-none",
 				children: /* @__PURE__ */ jsx(SkeletonLoader, {
 					style: { "--width": columnWidth?.[columnIndex] || "100px" },
-					className: "bg-grey-200 h-4 w-(--width) rounded-xl"
+					className: "bg-neutral h-4 w-(--width) rounded-xl"
 				})
 			}, columnIndex)) }, rowIndex))
 		})]

package/dist/components/skeleton-loader/SkeletonTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n  numberOfColumns = 4,\n  numberOfRows = 4,\n  columnWidth,\n  className\n}: {\n  numberOfColumns?: number\n  numberOfRows?: number\n  columnWidth?: Record<number, string>\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-row', 'gap-4', 'relative', className)}>\n    <Table size=\"md\">\n      <Table.Header theme=\"white\">\n        {/* A <thead> may only contain <tr>, so the cells need a Table.Row\n            around them as they do in Table.Body below. */}\n        <Table.Row>\n          {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n            (columnIndex) => (\n              <Table.HeaderCell key={columnIndex}>\n                <SkeletonLoader\n                  style={{ '--width': columnWidth?.[columnIndex] || '100px' }}\n                  className=\"h-4 w-(--width) rounded-xl\"\n                />\n              </Table.HeaderCell>\n            )\n          )}\n        </Table.Row>\n      </Table.Header>\n      <Table.Body striped={false}>\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowIndex) => (\n            <Table.Row key={rowIndex}>\n              {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n                (columnIndex) => (\n                  <Table.Cell key={columnIndex} className=\"border-none\">\n                    <SkeletonLoader\n                      style={{\n                        '--width': columnWidth?.[columnIndex] || '100px'\n                      }}\n                      className=\"bg-grey-200 h-4 w-(--width) rounded-xl\"\n                    />\n                  </Table.Cell>\n                )\n              )}\n            </Table.Row>\n          )\n        )}\n      </Table.Body>\n    </Table>\n  </Tile>\n)\n"],"mappings":";;;;;;;AAOA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,gBAOA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,YAAY,SAAS;WACnE,qBAAC,OAAD;EAAO,MAAK;YAAZ,CACE,oBAAC,MAAM,QAAP;GAAc,OAAM;aAGlB,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,YAAP,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,WAAW,cAAc,gBAAgB,QAAQ;IAC1D,WAAU;GACX,CAAA,EACe,GALK,WAKL,CAEtB,EACS,CAAA;EACC,CAAA,GACd,oBAAC,MAAM,MAAP;GAAY,SAAS;aAClB,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,aACC,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,MAAP;IAA8B,WAAU;cACtC,oBAAC,gBAAD;KACE,OAAO,EACL,WAAW,cAAc,gBAAgB,QAC3C;KACA,WAAU;IACX,CAAA;GACS,GAPK,WAOL,CAEhB,EACS,GAbK,QAaL,CAEf;EACU,CAAA,CACP;;AACH,CAAA"}
+{"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n  numberOfColumns = 4,\n  numberOfRows = 4,\n  columnWidth,\n  className\n}: {\n  numberOfColumns?: number\n  numberOfRows?: number\n  columnWidth?: Record<number, string>\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-row', 'gap-4', 'relative', className)}>\n    <Table size=\"md\">\n      <Table.Header appearance=\"surface\">\n        {/* A <thead> may only contain <tr>, so the cells need a Table.Row\n            around them as they do in Table.Body below. */}\n        <Table.Row>\n          {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n            (columnIndex) => (\n              <Table.HeaderCell key={columnIndex}>\n                <SkeletonLoader\n                  style={{ '--width': columnWidth?.[columnIndex] || '100px' }}\n                  className=\"h-4 w-(--width) rounded-xl\"\n                />\n              </Table.HeaderCell>\n            )\n          )}\n        </Table.Row>\n      </Table.Header>\n      <Table.Body striped={false}>\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowIndex) => (\n            <Table.Row key={rowIndex}>\n              {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n                (columnIndex) => (\n                  <Table.Cell key={columnIndex} className=\"border-none\">\n                    <SkeletonLoader\n                      style={{\n                        '--width': columnWidth?.[columnIndex] || '100px'\n                      }}\n                      className=\"bg-neutral h-4 w-(--width) rounded-xl\"\n                    />\n                  </Table.Cell>\n                )\n              )}\n            </Table.Row>\n          )\n        )}\n      </Table.Body>\n    </Table>\n  </Tile>\n)\n"],"mappings":";;;;;;;AAOA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,gBAOA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,YAAY,SAAS;WACnE,qBAAC,OAAD;EAAO,MAAK;YAAZ,CACE,oBAAC,MAAM,QAAP;GAAc,YAAW;aAGvB,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,YAAP,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,WAAW,cAAc,gBAAgB,QAAQ;IAC1D,WAAU;GACX,CAAA,EACe,GALK,WAKL,CAEtB,EACS,CAAA;EACC,CAAA,GACd,oBAAC,MAAM,MAAP;GAAY,SAAS;aAClB,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,aACC,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,MAAP;IAA8B,WAAU;cACtC,oBAAC,gBAAD;KACE,OAAO,EACL,WAAW,cAAc,gBAAgB,QAC3C;KACA,WAAU;IACX,CAAA;GACS,GAPK,WAOL,CAEhB,EACS,GAbK,QAaL,CAEf;EACU,CAAA,CACP;;AACH,CAAA"}

package/dist/components/slider/Slider.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 declare const StyledTrack: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderTrackProps & React.RefAttributes<HTMLSpanElement>>, {
-    theme?: "light" | "tonal" | undefined;
+    appearance?: "light" | "tonal" | undefined;
 }>;
 declare const StyledSlider: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>>, unknown>;
-export type SliderProps = React.ComponentProps<typeof StyledSlider> & Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>;
-export declare const Slider: (({ ref, value, defaultValue, min, max, theme, className, children, ...rest }: SliderProps) => React.JSX.Element) & {
+export type SliderProps = React.ComponentProps<typeof StyledSlider> & Pick<React.ComponentProps<typeof StyledTrack>, 'appearance'>;
+export declare const Slider: (({ ref, value, defaultValue, min, max, appearance, className, children, ...rest }: SliderProps) => React.JSX.Element) & {
     Value: ({ value, outputLabel }: import("./SliderValue").SliderValueType & {
         value?: number[];
     }) => React.JSX.Element;

package/dist/components/slider/Slider.js

@@ -14,9 +14,9 @@ var StyledTrack = styled(Track, {
 		"data-[orientation=horizontal]:h-1",
 		"data-[orientation=vertical]:w-1"
 	],
-	variants: { theme: {
-		light: ["bg-white"],
-		tonal: ["bg-grey-600"]
+	variants: { appearance: {
+		light: ["bg-surface"],
+		tonal: ["bg-neutral-solid"]
 	} }
 });
 var StyledSlider = styled(Root, { base: [
@@ -33,7 +33,7 @@ var StyledSlider = styled(Root, { base: [
 	"disabled:opacity-30"
 ] });
 var StyledRange = styled(Range, { base: [
-	"bg-primary-800",
+	"bg-accent-solid",
 	"rounded-full",
 	"h-full",
 	"absolute",
@@ -41,19 +41,19 @@ var StyledRange = styled(Range, { base: [
 	"disabled:opacity-30"
 ] });
 var StyledThumb = styled(Thumb, { base: [
-	"bg-primary-900",
+	"bg-accent-solid-hover",
 	"rounded-full",
 	"block",
 	"size-4",
-	"hover:bg-primary-1000",
-	"focus:outline-2",
-	"focus:outline-offset-2",
-	"focus:outline-primary-900",
-	"focus:outline-solid",
+	"hover:bg-accent-solid-active",
+	"focus-visible:outline-2",
+	"focus-visible:outline-offset-2",
+	"focus-visible:outline-focus",
+	"focus-visible:outline-solid",
 	"disabled:cursor-not-allowed",
 	"disabled:opacity-30"
 ] });
-var SliderComponent = ({ ref, value, defaultValue, min = 0, max = 100, theme = "tonal", className, children, ...rest }) => {
+var SliderComponent = ({ ref, value, defaultValue, min = 0, max = 100, appearance = "tonal", className, children, ...rest }) => {
 	const values = value || defaultValue;
 	return /* @__PURE__ */ jsxs(CSSWrapper, {
 		className,
@@ -65,7 +65,7 @@ var SliderComponent = ({ ref, value, defaultValue, min = 0, max = 100, theme = "
 			ref,
 			...rest,
 			children: [/* @__PURE__ */ jsx(StyledTrack, {
-				theme,
+				appearance,
 				children: /* @__PURE__ */ jsx(StyledRange, {})
 			}), values?.length && values.map((_, i) => /* @__PURE__ */ jsx(StyledThumb, {}, `thumb${i}`))]
 		}), children]

package/dist/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-full',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    theme: {\n      light: ['bg-white'],\n      tonal: ['bg-grey-600']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-primary-800',\n    'rounded-full',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-primary-900',\n    'rounded-full',\n    'block',\n    'size-4',\n    'hover:bg-primary-1000',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-900',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>\n\nconst SliderComponent = ({\n  ref,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  theme = 'tonal',\n  className,\n  children,\n  ...rest\n}: SliderProps) => {\n  const values = value || defaultValue\n  return (\n    <CSSWrapper className={className}>\n      <StyledSlider\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        ref={ref}\n        {...rest}\n      >\n        <StyledTrack theme={theme}>\n          <StyledRange />\n        </StyledTrack>\n        {values?.length &&\n          // Thumbs are positional and can share a value, so the index is their\n          // stable identity.\n          // eslint-disable-next-line react/no-array-index-key\n          values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n      </StyledSlider>\n      {children}\n    </CSSWrapper>\n  )\n}\n\nexport const Slider = /* @__PURE__ */ Object.assign(SliderComponent, {\n  Value: SliderValue,\n  Steps: SliderSteps\n})\n"],"mappings":";;;;;;;;AAQA,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,OAAO,CAAC,UAAU;EAClB,OAAO,CAAC,aAAa;CACvB,EACF;AACF,CAAC;AAED,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAKD,IAAM,mBAAmB,EACvB,KACA,OACA,cACA,MAAM,GACN,MAAM,KACN,QAAQ,SACR,WACA,UACA,GAAG,WACc;CACjB,MAAM,SAAS,SAAS;CACxB,OACE,qBAAC,YAAD;EAAuB;YAAvB,CACE,qBAAC,cAAD;GACgB;GACP;GACF;GACA;GACA;GACL,GAAI;aANN,CAQE,oBAAC,aAAD;IAAoB;cAClB,oBAAC,aAAD,CAAc,CAAA;GACH,CAAA,GACZ,QAAQ,UAIP,OAAO,KAAK,GAAG,MAAM,oBAAC,aAAD,CAAgC,GAAd,QAAQ,GAAM,CAAC,CAC5C;MACb,QACS;;AAEhB;AAEA,IAAa,SAAyB,uBAAO,OAAO,iBAAiB;CACnE,OAAO;CACP,OAAO;AACT,CAAC"}
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-full',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    appearance: {\n      light: ['bg-surface'],\n      tonal: ['bg-neutral-solid']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-accent-solid',\n    'rounded-full',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-accent-solid-hover',\n    'rounded-full',\n    'block',\n    'size-4',\n    'hover:bg-accent-solid-active',\n    'focus-visible:outline-2',\n    'focus-visible:outline-offset-2',\n    'focus-visible:outline-focus',\n    'focus-visible:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  Pick<React.ComponentProps<typeof StyledTrack>, 'appearance'>\n\nconst SliderComponent = ({\n  ref,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  appearance = 'tonal',\n  className,\n  children,\n  ...rest\n}: SliderProps) => {\n  const values = value || defaultValue\n  return (\n    <CSSWrapper className={className}>\n      <StyledSlider\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        ref={ref}\n        {...rest}\n      >\n        <StyledTrack appearance={appearance}>\n          <StyledRange />\n        </StyledTrack>\n        {values?.length &&\n          // Thumbs are positional and can share a value, so the index is their\n          // stable identity.\n          // eslint-disable-next-line react/no-array-index-key\n          values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n      </StyledSlider>\n      {children}\n    </CSSWrapper>\n  )\n}\n\nexport const Slider = /* @__PURE__ */ Object.assign(SliderComponent, {\n  Value: SliderValue,\n  Steps: SliderSteps\n})\n"],"mappings":";;;;;;;;AAQA,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,YAAY;EACV,OAAO,CAAC,YAAY;EACpB,OAAO,CAAC,kBAAkB;CAC5B,EACF;AACF,CAAC;AAED,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAKD,IAAM,mBAAmB,EACvB,KACA,OACA,cACA,MAAM,GACN,MAAM,KACN,aAAa,SACb,WACA,UACA,GAAG,WACc;CACjB,MAAM,SAAS,SAAS;CACxB,OACE,qBAAC,YAAD;EAAuB;YAAvB,CACE,qBAAC,cAAD;GACgB;GACP;GACF;GACA;GACA;GACL,GAAI;aANN,CAQE,oBAAC,aAAD;IAAyB;cACvB,oBAAC,aAAD,CAAc,CAAA;GACH,CAAA,GACZ,QAAQ,UAIP,OAAO,KAAK,GAAG,MAAM,oBAAC,aAAD,CAAgC,GAAd,QAAQ,GAAM,CAAC,CAC5C;MACb,QACS;;AAEhB;AAEA,IAAa,SAAyB,uBAAO,OAAO,iBAAiB;CACnE,OAAO;CACP,OAAO;AACT,CAAC"}

package/dist/components/slider/SliderSteps.js

@@ -21,7 +21,7 @@ var SliderSteps = ({ min, max, steps = [] }) => {
 				"--left": `${getPercentValue(step.value, min, max)}%`,
 				"--translate-x": `-${getTransformValue(step.value, min, max)}%`
 			},
-			className: "text-grey-700 absolute left-(--left) translate-x-(--translate-x)",
+			className: "text-subtlest absolute left-(--left) translate-x-(--translate-x)",
 			children: step.label
 		}, step.value))
 	});

package/dist/components/slider/SliderSteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <div className=\"relative mt-3 h-3 w-full\">\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;AAaA,IAAM,mBAAmB,OAAe,KAAa,QAAwB;CAC3E,QAAS,QAAQ,QAAQ,MAAM,OAAQ;AACzC;AAEA,IAAM,qBAAqB,OAAe,KAAa,QAAwB;CAC7E,MAAM,aAAa,gBAAgB,OAAO,KAAK,GAAG;CAElD,IAAI,cAAc,IAAI,OAAO;CAC7B,IAAI,cAAc,IAAI,OAAO;CAC7B,OAAO;AACT;AAEA,IAAa,eAAe,EAAE,KAAK,KAAK,QAAQ,CAAC,QAA0B;CACzE,IAAI,MAAM,WAAW,GAAG,OAAO;CAE/B,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,SACV,oBAAC,MAAD;GACE,IAAG;GAEH,OAAO;IACL,UAAU,GAAG,gBAAgB,KAAK,OAAO,KAAK,GAAG,EAAE;IACnD,iBAAiB,IAAI,kBAAkB,KAAK,OAAO,KAAK,GAAG,EAAE;GAC/D;GACA,WAAU;aAET,KAAK;EACF,GARC,KAAK,KAQN,CACP;CACE,CAAA;AAET"}
+{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <div className=\"relative mt-3 h-3 w-full\">\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-subtlest absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;AAaA,IAAM,mBAAmB,OAAe,KAAa,QAAwB;CAC3E,QAAS,QAAQ,QAAQ,MAAM,OAAQ;AACzC;AAEA,IAAM,qBAAqB,OAAe,KAAa,QAAwB;CAC7E,MAAM,aAAa,gBAAgB,OAAO,KAAK,GAAG;CAElD,IAAI,cAAc,IAAI,OAAO;CAC7B,IAAI,cAAc,IAAI,OAAO;CAC7B,OAAO;AACT;AAEA,IAAa,eAAe,EAAE,KAAK,KAAK,QAAQ,CAAC,QAA0B;CACzE,IAAI,MAAM,WAAW,GAAG,OAAO;CAE/B,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,SACV,oBAAC,MAAD;GACE,IAAG;GAEH,OAAO;IACL,UAAU,GAAG,gBAAgB,KAAK,OAAO,KAAK,GAAG,EAAE;IACnD,iBAAiB,IAAI,kBAAkB,KAAK,OAAO,KAAK,GAAG,EAAE;GAC/D;GACA,WAAU;aAET,KAAK;EACF,GARC,KAAK,KAQN,CACP;CACE,CAAA;AAET"}

package/dist/components/slider/SliderValue.js

@@ -3,7 +3,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/slider/SliderValue.tsx
 var SliderValue = ({ value = [], outputLabel = (value) => `Current value is ${value}` }) => /* @__PURE__ */ jsx(Text, {
-	className: "text-grey-700 mt-4 w-full",
+	className: "text-subtlest mt-4 w-full",
 	children: outputLabel(value.length === 1 ? value[0] : value)
 });
 //#endregion

package/dist/components/slider/SliderValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderValue.js","names":[],"sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => (\n  <Text className=\"text-grey-700 mt-4 w-full\">\n    {outputLabel(value.length === 1 ? value[0] : value)}\n  </Text>\n)\n"],"mappings":";;;;AAYA,IAAa,eAAe,EAC1B,QAAQ,CAAC,GACT,eAAe,UAAU,oBAAoB,cAE7C,oBAAC,MAAD;CAAM,WAAU;WACb,YAAY,MAAM,WAAW,IAAI,MAAM,KAAK,KAAK;AAC9C,CAAA"}
+{"version":3,"file":"SliderValue.js","names":[],"sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => (\n  <Text className=\"text-subtlest mt-4 w-full\">\n    {outputLabel(value.length === 1 ? value[0] : value)}\n  </Text>\n)\n"],"mappings":";;;;AAYA,IAAa,eAAe,EAC1B,QAAQ,CAAC,GACT,eAAe,UAAU,oBAAoB,cAE7C,oBAAC,MAAD;CAAM,WAAU;WACb,YAAY,MAAM,WAAW,IAAI,MAAM,KAAK,KAAK;AAC9C,CAAA"}

package/dist/components/sortable/Handle.d.ts

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { Icon } from '../icon/Icon';
-export declare const StyledHandle: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<{
-    theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+export declare const StyledHandle: import("../..").PolymorphicComponent<({ ref, children, tone, inverse, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<Omit<{
+    colorRole?: ("accent" | "inverse" | "neutral" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "accent" | "inverse" | "neutral">>) | undefined;
     appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
     size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
     as?: never;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "colorRole" | "isRounded" | "size">, "colorRole">, "as" | "children" | "hasTooltip" | "href" | "inverse" | "label" | "reloadDocument" | "tone" | "tooltipSide"> & {
+    tone?: "danger" | "neutral" | "success" | "warning";
+    inverse?: boolean;
     as?: React.ElementType;
     children: React.ReactNode;
     href?: string;

package/dist/components/stepper/StepperStepBullet.js

@@ -10,27 +10,27 @@ var StepperStepBullet = styled("div", {
 		"size-8",
 		"rounded-[50%]",
 		"border-0",
-		"bg-grey-200",
+		"bg-neutral",
 		"z-1",
 		"flex-none"
 	],
 	variants: { status: {
-		default: ["bg-grey-200", "text-grey-700"],
+		default: ["bg-neutral", "text-subtlest"],
 		active: [
-			"bg-white",
+			"bg-surface",
 			"border-2",
 			"border-current",
-			"text-primary-900"
+			"text-accent-hover"
 		],
 		viewed: [
-			"bg-white",
+			"bg-surface",
 			"border-2",
-			"border-grey-600",
-			"text-grey-1000"
+			"border-neutral-solid",
+			"text-default"
 		],
-		completed: ["bg-primary-800", "text-white"],
-		reviewed: ["bg-primary-900", "text-white"],
-		success: ["bg-success", "text-white"]
+		completed: ["bg-accent-solid", "text-on-accent"],
+		reviewed: ["bg-accent-solid-hover", "text-on-accent"],
+		success: ["bg-success-solid", "text-on-success"]
 	} }
 });
 //#endregion

package/dist/components/stepper/StepperStepBullet.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStepBullet.js","names":[],"sources":["../../../src/components/stepper/StepperStepBullet.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const StepperStepBullet = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'p-2',\n    'justify-center',\n    'items-center',\n    'size-8',\n    'rounded-[50%]',\n    'border-0',\n    'bg-grey-200',\n    'z-1',\n    'flex-none'\n  ],\n  variants: {\n    status: {\n      default: ['bg-grey-200', 'text-grey-700'],\n      active: ['bg-white', 'border-2', 'border-current', 'text-primary-900'],\n      viewed: ['bg-white', 'border-2', 'border-grey-600', 'text-grey-1000'],\n      completed: ['bg-primary-800', 'text-white'],\n      reviewed: ['bg-primary-900', 'text-white'],\n      success: ['bg-success', 'text-white']\n    }\n  }\n})\n"],"mappings":";;AAEA,IAAa,oBAAoB,OAAO,OAAO;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,QAAQ;EACN,SAAS,CAAC,eAAe,eAAe;EACxC,QAAQ;GAAC;GAAY;GAAY;GAAkB;EAAkB;EACrE,QAAQ;GAAC;GAAY;GAAY;GAAmB;EAAgB;EACpE,WAAW,CAAC,kBAAkB,YAAY;EAC1C,UAAU,CAAC,kBAAkB,YAAY;EACzC,SAAS,CAAC,cAAc,YAAY;CACtC,EACF;AACF,CAAC"}
+{"version":3,"file":"StepperStepBullet.js","names":[],"sources":["../../../src/components/stepper/StepperStepBullet.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const StepperStepBullet = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'p-2',\n    'justify-center',\n    'items-center',\n    'size-8',\n    'rounded-[50%]',\n    'border-0',\n    'bg-neutral',\n    'z-1',\n    'flex-none'\n  ],\n  variants: {\n    status: {\n      default: ['bg-neutral', 'text-subtlest'],\n      active: ['bg-surface', 'border-2', 'border-current', 'text-accent-hover'],\n      viewed: [\n        'bg-surface',\n        'border-2',\n        'border-neutral-solid',\n        'text-default'\n      ],\n      completed: ['bg-accent-solid', 'text-on-accent'],\n      reviewed: ['bg-accent-solid-hover', 'text-on-accent'],\n      success: ['bg-success-solid', 'text-on-success']\n    }\n  }\n})\n"],"mappings":";;AAEA,IAAa,oBAAoB,OAAO,OAAO;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,QAAQ;EACN,SAAS,CAAC,cAAc,eAAe;EACvC,QAAQ;GAAC;GAAc;GAAY;GAAkB;EAAmB;EACxE,QAAQ;GACN;GACA;GACA;GACA;EACF;EACA,WAAW,CAAC,mBAAmB,gBAAgB;EAC/C,UAAU,CAAC,yBAAyB,gBAAgB;EACpD,SAAS,CAAC,oBAAoB,iBAAiB;CACjD,EACF;AACF,CAAC"}

package/dist/components/stepper/StepperStepContainer.js

@@ -33,10 +33,10 @@ var StepperStepContainer = styled("div", {
 			]
 		},
 		separator: {
-			default: ["not-last:after:bg-grey-200"],
-			active: ["not-last:after:bg-primary-800"],
-			success: ["not-last:after:bg-success"],
-			viewed: ["not-last:after:bg-grey-600"]
+			default: ["not-last:after:bg-(--border-color-subtle)"],
+			active: ["not-last:after:bg-accent-solid"],
+			success: ["not-last:after:bg-success-solid"],
+			viewed: ["not-last:after:bg-neutral-solid"]
 		},
 		status: {
 			completed: [],
@@ -52,49 +52,49 @@ var StepperStepContainer = styled("div", {
 			canInteract: true,
 			status: "completed",
 			class: [
-				"focus-visible:first:outline-2",
-				"focus-visible:first:outline-offset-2",
-				"focus-visible:first:outline-primary-800",
-				"focus-visible:first:outline-solid",
-				"hover:first:bg-primary-900",
-				"hover:first:text-white!",
-				"hover:last:text-primary-900"
+				"focus-visible:*:first:outline-2",
+				"focus-visible:*:first:outline-offset-2",
+				"focus-visible:*:first:outline-focus",
+				"focus-visible:*:first:outline-solid",
+				"hover:*:first:bg-accent-solid-hover",
+				"hover:*:first:text-on-accent!",
+				"hover:*:last:text-accent-hover"
 			]
 		},
 		{
 			canInteract: true,
 			status: "active",
 			class: [
-				"focus-visible:first:outline-2",
-				"focus-visible:first:outline-offset-2",
-				"focus-visible:first:outline-primary-800",
-				"focus-visible:first:outline-solid",
-				"hover:first:border-grey-800",
-				"hover:first:text-grey-1000",
-				"hover:last:text-grey-1000"
+				"focus-visible:*:first:outline-2",
+				"focus-visible:*:first:outline-offset-2",
+				"focus-visible:*:first:outline-focus",
+				"focus-visible:*:first:outline-solid",
+				"hover:*:first:border-strong",
+				"hover:*:first:text-default",
+				"hover:*:last:text-default"
 			]
 		},
 		{
 			canInteract: true,
 			status: "viewed",
 			class: [
-				"focus-visible:first:outline-2!",
-				"focus-visible:first:outline-offset-2!",
-				"focus-visible:first:outline-primary-800!",
-				"focus-visible:first:outline-solid!",
-				"hover:first:border-grey-800",
-				"hover:first:text-grey-1000",
-				"hover:last:text-grey-1000"
+				"focus-visible:*:first:outline-2!",
+				"focus-visible:*:first:outline-offset-2!",
+				"focus-visible:*:first:outline-focus!",
+				"focus-visible:*:first:outline-solid!",
+				"hover:*:first:border-strong",
+				"hover:*:first:text-default",
+				"hover:*:last:text-default"
 			]
 		},
 		{
 			canInteract: true,
 			status: "reviewed",
 			class: [
-				"focus-visible:first:outline-2!",
-				"focus-visible:first:outline-offset-2!",
-				"focus-visible:first:outline-primary-800!",
-				"focus-visible:first:outline-solid!"
+				"focus-visible:*:first:outline-2!",
+				"focus-visible:*:first:outline-offset-2!",
+				"focus-visible:*:first:outline-focus!",
+				"focus-visible:*:first:outline-solid!"
 			]
 		}
 	]

package/dist/components/stepper/StepperStepContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStepContainer.js","names":[],"sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const StepperStepContainer = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'font-body',\n    'font-semibold',\n    'text-md',\n    'items-center',\n    'not-last:after:absolute',\n    \"not-last:after:content-['']\",\n    'focus-visible:outline-none'\n  ],\n  variants: {\n    canInteract: {\n      true: []\n    },\n    direction: {\n      vertical: [\n        'flex-row',\n        'not-last:after:h-full',\n        'not-last:after:left-3.5',\n        'not-last:after:top-1/2',\n        'not-last:after:w-1',\n        'py-3'\n      ],\n      horizontal: [\n        'flex-col',\n        'not-last:after:h-1',\n        'not-last:after:left-1/2',\n        'not-last:after:top-3.5',\n        'not-last:after:w-full',\n        'px-2'\n      ]\n    },\n    separator: {\n      default: ['not-last:after:bg-grey-200'],\n      active: ['not-last:after:bg-primary-800'],\n      success: ['not-last:after:bg-success'],\n      viewed: ['not-last:after:bg-grey-600']\n    },\n    status: {\n      completed: [],\n      active: [],\n      default: [],\n      viewed: [],\n      success: [],\n      reviewed: []\n    }\n  },\n  compoundVariants: [\n    {\n      canInteract: true,\n      status: 'completed',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:bg-primary-900',\n        'hover:first:text-white!',\n        'hover:last:text-primary-900'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'active',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'viewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'reviewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!'\n      ]\n    }\n  ]\n})\n"],"mappings":";;AAEA,IAAa,uBAAuB,OAAO,OAAO;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,aAAa,EACX,MAAM,CAAC,EACT;EACA,WAAW;GACT,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;GACF;GACA,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,SAAS,CAAC,4BAA4B;GACtC,QAAQ,CAAC,+BAA+B;GACxC,SAAS,CAAC,2BAA2B;GACrC,QAAQ,CAAC,4BAA4B;EACvC;EACA,QAAQ;GACN,WAAW,CAAC;GACZ,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,UAAU,CAAC;EACb;CACF;CACA,kBAAkB;EAChB;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;CACF;AACF,CAAC"}
+{"version":3,"file":"StepperStepContainer.js","names":[],"sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const StepperStepContainer = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'font-body',\n    'font-semibold',\n    'text-md',\n    'items-center',\n    'not-last:after:absolute',\n    \"not-last:after:content-['']\",\n    'focus-visible:outline-none'\n  ],\n  variants: {\n    canInteract: {\n      true: []\n    },\n    direction: {\n      vertical: [\n        'flex-row',\n        'not-last:after:h-full',\n        'not-last:after:left-3.5',\n        'not-last:after:top-1/2',\n        'not-last:after:w-1',\n        'py-3'\n      ],\n      horizontal: [\n        'flex-col',\n        'not-last:after:h-1',\n        'not-last:after:left-1/2',\n        'not-last:after:top-3.5',\n        'not-last:after:w-full',\n        'px-2'\n      ]\n    },\n    separator: {\n      default: ['not-last:after:bg-(--border-color-subtle)'],\n      active: ['not-last:after:bg-accent-solid'],\n      success: ['not-last:after:bg-success-solid'],\n      viewed: ['not-last:after:bg-neutral-solid']\n    },\n    status: {\n      completed: [],\n      active: [],\n      default: [],\n      viewed: [],\n      success: [],\n      reviewed: []\n    }\n  },\n  compoundVariants: [\n    {\n      canInteract: true,\n      status: 'completed',\n      class: [\n        'focus-visible:*:first:outline-2',\n        'focus-visible:*:first:outline-offset-2',\n        'focus-visible:*:first:outline-focus',\n        'focus-visible:*:first:outline-solid',\n        'hover:*:first:bg-accent-solid-hover',\n        'hover:*:first:text-on-accent!',\n        'hover:*:last:text-accent-hover'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'active',\n      class: [\n        'focus-visible:*:first:outline-2',\n        'focus-visible:*:first:outline-offset-2',\n        'focus-visible:*:first:outline-focus',\n        'focus-visible:*:first:outline-solid',\n        'hover:*:first:border-strong',\n        'hover:*:first:text-default',\n        'hover:*:last:text-default'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'viewed',\n      class: [\n        'focus-visible:*:first:outline-2!',\n        'focus-visible:*:first:outline-offset-2!',\n        'focus-visible:*:first:outline-focus!',\n        'focus-visible:*:first:outline-solid!',\n        'hover:*:first:border-strong',\n        'hover:*:first:text-default',\n        'hover:*:last:text-default'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'reviewed',\n      class: [\n        'focus-visible:*:first:outline-2!',\n        'focus-visible:*:first:outline-offset-2!',\n        'focus-visible:*:first:outline-focus!',\n        'focus-visible:*:first:outline-solid!'\n      ]\n    }\n  ]\n})\n"],"mappings":";;AAEA,IAAa,uBAAuB,OAAO,OAAO;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,aAAa,EACX,MAAM,CAAC,EACT;EACA,WAAW;GACT,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;GACF;GACA,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,SAAS,CAAC,2CAA2C;GACrD,QAAQ,CAAC,gCAAgC;GACzC,SAAS,CAAC,iCAAiC;GAC3C,QAAQ,CAAC,iCAAiC;EAC5C;EACA,QAAQ;GACN,WAAW,CAAC;GACZ,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,UAAU,CAAC;EACb;CACF;CACA,kBAAkB;EAChB;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;CACF;AACF,CAAC"}

package/dist/components/stepper/StepperStepLabel.js

@@ -9,10 +9,10 @@ var StepperStepLabel = styled(Text, {
 			horizontal: ["mt-3", "text-center"]
 		},
 		status: {
-			default: ["font-normal", "text-grey-700"],
-			active: ["text-primary-900"],
-			viewed: ["text-grey-1000"],
-			completed: ["text-primary-800"],
+			default: ["font-normal", "text-subtlest"],
+			active: ["text-accent-hover"],
+			viewed: ["text-default"],
+			completed: ["text-accent"],
 			success: ["text-success"],
 			reviewed: []
 		}

package/dist/components/stepper/StepperStepLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStepLabel.js","names":[],"sources":["../../../src/components/stepper/StepperStepLabel.tsx"],"sourcesContent":["import { styled } from '../../styled'\nimport { Text } from '../text/Text'\n\nexport const StepperStepLabel = styled(Text, {\n  base: ['font-semibold'],\n  variants: {\n    direction: {\n      vertical: ['ml-3', 'text-left'],\n      horizontal: ['mt-3', 'text-center']\n    },\n    status: {\n      default: ['font-normal', 'text-grey-700'],\n      active: ['text-primary-900'],\n      viewed: ['text-grey-1000'],\n      completed: ['text-primary-800'],\n      success: ['text-success'],\n      reviewed: []\n    }\n  }\n})\n"],"mappings":";;;AAGA,IAAa,mBAAmB,OAAO,MAAM;CAC3C,MAAM,CAAC,eAAe;CACtB,UAAU;EACR,WAAW;GACT,UAAU,CAAC,QAAQ,WAAW;GAC9B,YAAY,CAAC,QAAQ,aAAa;EACpC;EACA,QAAQ;GACN,SAAS,CAAC,eAAe,eAAe;GACxC,QAAQ,CAAC,kBAAkB;GAC3B,QAAQ,CAAC,gBAAgB;GACzB,WAAW,CAAC,kBAAkB;GAC9B,SAAS,CAAC,cAAc;GACxB,UAAU,CAAC;EACb;CACF;AACF,CAAC"}
+{"version":3,"file":"StepperStepLabel.js","names":[],"sources":["../../../src/components/stepper/StepperStepLabel.tsx"],"sourcesContent":["import { styled } from '../../styled'\nimport { Text } from '../text/Text'\n\nexport const StepperStepLabel = styled(Text, {\n  base: ['font-semibold'],\n  variants: {\n    direction: {\n      vertical: ['ml-3', 'text-left'],\n      horizontal: ['mt-3', 'text-center']\n    },\n    status: {\n      default: ['font-normal', 'text-subtlest'],\n      active: ['text-accent-hover'],\n      viewed: ['text-default'],\n      completed: ['text-accent'],\n      success: ['text-success'],\n      reviewed: []\n    }\n  }\n})\n"],"mappings":";;;AAGA,IAAa,mBAAmB,OAAO,MAAM;CAC3C,MAAM,CAAC,eAAe;CACtB,UAAU;EACR,WAAW;GACT,UAAU,CAAC,QAAQ,WAAW;GAC9B,YAAY,CAAC,QAAQ,aAAa;EACpC;EACA,QAAQ;GACN,SAAS,CAAC,eAAe,eAAe;GACxC,QAAQ,CAAC,mBAAmB;GAC5B,QAAQ,CAAC,cAAc;GACvB,WAAW,CAAC,aAAa;GACzB,SAAS,CAAC,cAAc;GACxB,UAAU,CAAC;EACb;CACF;AACF,CAAC"}