@atom-learning/components 11.1.0 → 11.2.0

package/dist/components/accordion/Accordion.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { AccordionContent } from "./AccordionContent.js";
 import { AccordionItem } from "./AccordionItem.js";
 import { AccordionTrigger } from "./AccordionTrigger.js";

package/dist/components/avatar/Avatar.js

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { AvatarRootContext } from "./Avatar.context.js";
 import { AvatarIcon } from "./AvatarIcon.js";
 import { AvatarPlaceholder } from "./AvatarPlaceholder.js";

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport type { AvatarRootContextValue } from './Avatar.context'\nimport { AvatarRootContext } from './Avatar.context'\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = [\n  'flex',\n  'justify-center',\n  'items-center',\n  'text-grey-800',\n  'rounded-full',\n  'border-2',\n  'border-grey-200',\n  'bg-(--bg-color)',\n  'overflow-hidden'\n]\n\nconst StyledDiv = /* @__PURE__ */ styled('div', {\n  base: avatarRootStyles,\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    },\n    emphasis: {\n      bold: ['border-0', '[&>p]:text-white'],\n      subtle: ['border-0'],\n      white: []\n    }\n  }\n})\n\nconst StyledButton = /* @__PURE__ */ styled('button', {\n  base: [\n    ...avatarRootStyles,\n    'not-disabled:active:bg-grey-200',\n    'not-disabled:active:border-primary-800',\n    'not-disabled:hover:bg-grey-100',\n    'not-disabled:hover:border-grey-800',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    },\n    emphasis: {\n      bold: ['border-0', '[&>p]:text-white'],\n      subtle: ['border-0'],\n      white: []\n    }\n  }\n})\n\ntype AvatarProps = React.ComponentProps<\n  typeof StyledDiv | typeof StyledButton\n> & {\n  name?: string\n} & (\n    | {\n        onClick: React.MouseEventHandler<HTMLButtonElement>\n        disabled?: boolean\n      }\n    | { onClick?: never; disabled?: never }\n  )\n\nexport { AvatarRootContext }\nexport type { AvatarRootContextValue }\n\nexport const AvatarRootProvider = ({ children, name, size }: AvatarProps) => {\n  const value = React.useMemo<AvatarRootContextValue>(\n    () => ({ name, size }),\n    [name, size]\n  )\n\n  return <AvatarRootContext value={value}>{children}</AvatarRootContext>\n}\n\nconst DS_COLORS = [\n  'maroon',\n  'red',\n  'magenta',\n  'pink',\n  'purple',\n  'lapis',\n  'blue',\n  'cyan',\n  'teal',\n  'green',\n  'lime',\n  'yellow',\n  'orange'\n] as const\n\nconst getBackgroundColor = ({\n  emphasis,\n  name\n}: Pick<AvatarProps, 'emphasis' | 'name'>) => {\n  if (emphasis === 'white' || !name) return 'white'\n  const index = name.toLocaleUpperCase().charCodeAt(0) % DS_COLORS.length\n  return `var(--color-${DS_COLORS[index]}-${emphasis === 'bold' ? 700 : 300})`\n}\n\nexport const AvatarRoot = ({\n  children,\n  size = 'lg',\n  name,\n  emphasis = 'white',\n  disabled = false,\n  onClick\n}: AvatarProps) => {\n  const backgroundColor = getBackgroundColor({ emphasis, name })\n  return (\n    <AvatarRootProvider name={name} size={size}>\n      {onClick ? (\n        <StyledButton\n          size={size}\n          style={{\n            '--bg-color': backgroundColor\n          }}\n          disabled={disabled}\n          onClick={disabled ? undefined : onClick}\n          className={cn(disabled ? 'cursor-auto' : 'cursor-pointer')}\n          emphasis={emphasis}\n        >\n          {children}\n        </StyledButton>\n      ) : (\n        <StyledDiv\n          size={size}\n          style={{\n            '--bg-color': backgroundColor\n          }}\n          emphasis={emphasis}\n        >\n          {children}\n        </StyledDiv>\n      )}\n    </AvatarRootProvider>\n  )\n}\n\nexport const Avatar = /* @__PURE__ */ Object.assign(AvatarRoot, {\n  Image: AvatarImage,\n  Initial: AvatarInitial,\n  Placeholder: AvatarPlaceholder,\n  Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"mappings":";;;;;;;;;AAUA,IAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,YAA4B,uBAAO,OAAO;CAC9C,MAAM;CACN,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,KAAK,CAAC,SAAS;EACjB;EACA,UAAU;GACR,MAAM,CAAC,YAAY,kBAAkB;GACrC,QAAQ,CAAC,UAAU;GACnB,OAAO,CAAC;EACV;CACF;AACF,CAAC;AAED,IAAM,eAA+B,uBAAO,UAAU;CACpD,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,KAAK,CAAC,SAAS;EACjB;EACA,UAAU;GACR,MAAM,CAAC,YAAY,kBAAkB;GACrC,QAAQ,CAAC,UAAU;GACnB,OAAO,CAAC;EACV;CACF;AACF,CAAC;AAiBD,IAAa,sBAAsB,EAAE,UAAU,MAAM,WAAwB;CAM3E,OAAO,oBAAC,mBAAD;EAA0B,OALnB,QAAM,eACX;GAAE;GAAM;EAAK,IACpB,CAAC,MAAM,IAAI,CAGoB;EAAQ;CAA4B,CAAA;AACvE;AAEA,IAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,sBAAsB,EAC1B,UACA,WAC4C;CAC5C,IAAI,aAAa,WAAW,CAAC,MAAM,OAAO;CAE1C,OAAO,eAAe,UADR,KAAK,kBAAkB,CAAC,CAAC,WAAW,CAAC,IAAI,UAAU,QAC1B,GAAG,aAAa,SAAS,MAAM,IAAI;AAC5E;AAEA,IAAa,cAAc,EACzB,UACA,OAAO,MACP,MACA,WAAW,SACX,WAAW,OACX,cACiB;CACjB,MAAM,kBAAkB,mBAAmB;EAAE;EAAU;CAAK,CAAC;CAC7D,OACE,oBAAC,oBAAD;EAA0B;EAAY;YACnC,UACC,oBAAC,cAAD;GACQ;GACN,OAAO,EACL,cAAc,gBAChB;GACU;GACV,SAAS,WAAW,KAAA,IAAY;GAChC,WAAW,GAAG,WAAW,gBAAgB,gBAAgB;GAC/C;GAET;EACW,CAAA,IAEd,oBAAC,WAAD;GACQ;GACN,OAAO,EACL,cAAc,gBAChB;GACU;GAET;EACQ,CAAA;CAEK,CAAA;AAExB;AAEA,IAAa,SAAyB,uBAAO,OAAO,YAAY;CAC9D,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;AACR,CAAC;AAED,WAAW,cAAc"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport type { AvatarRootContextValue } from './Avatar.context'\nimport { AvatarRootContext } from './Avatar.context'\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = [\n  'flex',\n  'justify-center',\n  'items-center',\n  'text-grey-800',\n  'rounded-full',\n  'border-2',\n  'border-grey-200',\n  'bg-(--bg-color)',\n  'overflow-hidden'\n]\n\nconst StyledDiv = /* @__PURE__ */ styled('div', {\n  base: avatarRootStyles,\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    },\n    emphasis: {\n      bold: ['border-0', '[&>p]:text-white'],\n      subtle: ['border-0'],\n      white: []\n    }\n  }\n})\n\nconst StyledButton = /* @__PURE__ */ styled('button', {\n  base: [\n    ...avatarRootStyles,\n    'not-disabled:active:bg-grey-200',\n    'not-disabled:active:border-primary-800',\n    'not-disabled:hover:bg-grey-100',\n    'not-disabled:hover:border-grey-800',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    },\n    emphasis: {\n      bold: ['border-0', '[&>p]:text-white'],\n      subtle: ['border-0'],\n      white: []\n    }\n  }\n})\n\ntype AvatarProps = React.ComponentProps<\n  typeof StyledDiv | typeof StyledButton\n> & {\n  name?: string\n} & (\n    | {\n        onClick: React.MouseEventHandler<HTMLButtonElement>\n        disabled?: boolean\n      }\n    | { onClick?: never; disabled?: never }\n  )\n\nexport { AvatarRootContext }\nexport type { AvatarRootContextValue }\n\nexport const AvatarRootProvider = ({ children, name, size }: AvatarProps) => {\n  const value = React.useMemo<AvatarRootContextValue>(\n    () => ({ name, size }),\n    [name, size]\n  )\n\n  return <AvatarRootContext value={value}>{children}</AvatarRootContext>\n}\n\nconst DS_COLORS = [\n  'maroon',\n  'red',\n  'magenta',\n  'pink',\n  'purple',\n  'lapis',\n  'blue',\n  'cyan',\n  'teal',\n  'green',\n  'lime',\n  'yellow',\n  'orange'\n] as const\n\nconst getBackgroundColor = ({\n  emphasis,\n  name\n}: Pick<AvatarProps, 'emphasis' | 'name'>) => {\n  if (emphasis === 'white' || !name) return 'white'\n  const index = name.toLocaleUpperCase().charCodeAt(0) % DS_COLORS.length\n  return `var(--color-${DS_COLORS[index]}-${emphasis === 'bold' ? 700 : 300})`\n}\n\nexport const AvatarRoot = ({\n  children,\n  size = 'lg',\n  name,\n  emphasis = 'white',\n  disabled = false,\n  onClick\n}: AvatarProps) => {\n  const backgroundColor = getBackgroundColor({ emphasis, name })\n  return (\n    <AvatarRootProvider name={name} size={size}>\n      {onClick ? (\n        <StyledButton\n          size={size}\n          style={{\n            '--bg-color': backgroundColor\n          }}\n          disabled={disabled}\n          onClick={disabled ? undefined : onClick}\n          className={cn(disabled ? 'cursor-auto' : 'cursor-pointer')}\n          emphasis={emphasis}\n        >\n          {children}\n        </StyledButton>\n      ) : (\n        <StyledDiv\n          size={size}\n          style={{\n            '--bg-color': backgroundColor\n          }}\n          emphasis={emphasis}\n        >\n          {children}\n        </StyledDiv>\n      )}\n    </AvatarRootProvider>\n  )\n}\n\nexport const Avatar = /* @__PURE__ */ Object.assign(AvatarRoot, {\n  Image: AvatarImage,\n  Initial: AvatarInitial,\n  Placeholder: AvatarPlaceholder,\n  Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"mappings":";;;;;;;;;;AAUA,IAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,YAA4B,uBAAO,OAAO;CAC9C,MAAM;CACN,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,KAAK,CAAC,SAAS;EACjB;EACA,UAAU;GACR,MAAM,CAAC,YAAY,kBAAkB;GACrC,QAAQ,CAAC,UAAU;GACnB,OAAO,CAAC;EACV;CACF;AACF,CAAC;AAED,IAAM,eAA+B,uBAAO,UAAU;CACpD,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,KAAK,CAAC,SAAS;EACjB;EACA,UAAU;GACR,MAAM,CAAC,YAAY,kBAAkB;GACrC,QAAQ,CAAC,UAAU;GACnB,OAAO,CAAC;EACV;CACF;AACF,CAAC;AAiBD,IAAa,sBAAsB,EAAE,UAAU,MAAM,WAAwB;CAM3E,OAAO,oBAAC,mBAAD;EAA0B,OALnB,QAAM,eACX;GAAE;GAAM;EAAK,IACpB,CAAC,MAAM,IAAI,CAGoB;EAAQ;CAA4B,CAAA;AACvE;AAEA,IAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,sBAAsB,EAC1B,UACA,WAC4C;CAC5C,IAAI,aAAa,WAAW,CAAC,MAAM,OAAO;CAE1C,OAAO,eAAe,UADR,KAAK,kBAAkB,CAAC,CAAC,WAAW,CAAC,IAAI,UAAU,QAC1B,GAAG,aAAa,SAAS,MAAM,IAAI;AAC5E;AAEA,IAAa,cAAc,EACzB,UACA,OAAO,MACP,MACA,WAAW,SACX,WAAW,OACX,cACiB;CACjB,MAAM,kBAAkB,mBAAmB;EAAE;EAAU;CAAK,CAAC;CAC7D,OACE,oBAAC,oBAAD;EAA0B;EAAY;YACnC,UACC,oBAAC,cAAD;GACQ;GACN,OAAO,EACL,cAAc,gBAChB;GACU;GACV,SAAS,WAAW,KAAA,IAAY;GAChC,WAAW,GAAG,WAAW,gBAAgB,gBAAgB;GAC/C;GAET;EACW,CAAA,IAEd,oBAAC,WAAD;GACQ;GACN,OAAO,EACL,cAAc,gBAChB;GACU;GAET;EACQ,CAAA;CAEK,CAAA;AAExB;AAEA,IAAa,SAAyB,uBAAO,OAAO,YAAY;CAC9D,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;AACR,CAAC;AAED,WAAW,cAAc"}

package/dist/components/banner/banner-regular/BannerRegularActions.js

@@ -1,4 +1,4 @@
-import { cn } from "../../../styled.js";
+import { cn } from "../../../utilities/tw-merge/index.js";
 import { useBannerContext } from "../Banner.context.js";
 import { BannerRegularButton } from "./BannerRegularButton.js";
 import * as React$1 from "react";

package/dist/components/banner/banner-slim/BannerSlimButton.js

@@ -1,4 +1,4 @@
-import { cn } from "../../../styled.js";
+import { cn } from "../../../utilities/tw-merge/index.js";
 import { Button } from "../../button/Button.js";
 import { overrideStyledVariantValue } from "../../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
 import { useBannerContext } from "../Banner.context.js";

package/dist/components/banner/banner-slim/BannerSlimContainer.js

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../../styled.js";
+import { cn } from "../../../utilities/tw-merge/index.js";
+import { styled } from "../../../styled.js";
 import { useBannerContext } from "../Banner.context.js";
 import { BannerContainer } from "../BannerContainer.js";
 import "react";

package/dist/components/banner/banner-slim/BannerSlimContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimContainer.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../../styled'\nimport { useBannerContext } from '../Banner.context'\nimport { BannerContainer } from '../BannerContainer'\n\nconst toDirection = {\n  sm: 'flex-col',\n  md: 'flex-row'\n}\n\nconst toAlign = {\n  sm: 'items-start',\n  md: 'items-center'\n}\n\nconst toWrap = {\n  sm: 'flex-wrap',\n  md: 'flex-nowrap'\n}\n\nconst StyledBannerSlimContainer = styled(\n  BannerContainer,\n  {\n    base: ['p-4'],\n    variants: {\n      sizeWorkaround: {\n        sm: [],\n        md: ['px-6']\n      }\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\ntype BannerSlimContainerProps = React.ComponentProps<\n  typeof StyledBannerSlimContainer\n>\n\nexport const BannerSlimContainer = ({\n  className,\n  ...rest\n}: BannerSlimContainerProps) => {\n  const { size } = useBannerContext()\n\n  const direction =\n    typeof size === 'string' ? toDirection[size] : 'flex-col md:flex-row'\n\n  const align =\n    typeof size === 'string' ? toAlign[size] : 'items-start md:items-center'\n\n  const wrap =\n    typeof size === 'string' ? toWrap[size] : 'flex-wrap md:flex-nowrap'\n\n  return (\n    <StyledBannerSlimContainer\n      {...rest}\n      sizeWorkaround={size}\n      className={cn(direction, align, 'gap-4', wrap, className)}\n    />\n  )\n}\n\nBannerSlimContainer.displayName = 'BannerSlimContainer'\n"],"mappings":";;;;;;AAMA,IAAM,cAAc;CAClB,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,SAAS;CACb,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,4BAA4B,OAChC,iBACA;CACE,MAAM,CAAC,KAAK;CACZ,UAAU,EACR,gBAAgB;EACd,IAAI,CAAC;EACL,IAAI,CAAC,MAAM;CACb,EACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAMA,IAAa,uBAAuB,EAClC,WACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,SAAS,iBAAiB;CAElC,MAAM,YACJ,OAAO,SAAS,WAAW,YAAY,QAAQ;CAEjD,MAAM,QACJ,OAAO,SAAS,WAAW,QAAQ,QAAQ;CAE7C,MAAM,OACJ,OAAO,SAAS,WAAW,OAAO,QAAQ;CAE5C,OACE,oBAAC,2BAAD;EACE,GAAI;EACJ,gBAAgB;EAChB,WAAW,GAAG,WAAW,OAAO,SAAS,MAAM,SAAS;CACzD,CAAA;AAEL;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"BannerSlimContainer.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../../styled'\nimport { useBannerContext } from '../Banner.context'\nimport { BannerContainer } from '../BannerContainer'\n\nconst toDirection = {\n  sm: 'flex-col',\n  md: 'flex-row'\n}\n\nconst toAlign = {\n  sm: 'items-start',\n  md: 'items-center'\n}\n\nconst toWrap = {\n  sm: 'flex-wrap',\n  md: 'flex-nowrap'\n}\n\nconst StyledBannerSlimContainer = styled(\n  BannerContainer,\n  {\n    base: ['p-4'],\n    variants: {\n      sizeWorkaround: {\n        sm: [],\n        md: ['px-6']\n      }\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\ntype BannerSlimContainerProps = React.ComponentProps<\n  typeof StyledBannerSlimContainer\n>\n\nexport const BannerSlimContainer = ({\n  className,\n  ...rest\n}: BannerSlimContainerProps) => {\n  const { size } = useBannerContext()\n\n  const direction =\n    typeof size === 'string' ? toDirection[size] : 'flex-col md:flex-row'\n\n  const align =\n    typeof size === 'string' ? toAlign[size] : 'items-start md:items-center'\n\n  const wrap =\n    typeof size === 'string' ? toWrap[size] : 'flex-wrap md:flex-nowrap'\n\n  return (\n    <StyledBannerSlimContainer\n      {...rest}\n      sizeWorkaround={size}\n      className={cn(direction, align, 'gap-4', wrap, className)}\n    />\n  )\n}\n\nBannerSlimContainer.displayName = 'BannerSlimContainer'\n"],"mappings":";;;;;;;AAMA,IAAM,cAAc;CAClB,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,SAAS;CACb,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,4BAA4B,OAChC,iBACA;CACE,MAAM,CAAC,KAAK;CACZ,UAAU,EACR,gBAAgB;EACd,IAAI,CAAC;EACL,IAAI,CAAC,MAAM;CACb,EACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAMA,IAAa,uBAAuB,EAClC,WACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,SAAS,iBAAiB;CAElC,MAAM,YACJ,OAAO,SAAS,WAAW,YAAY,QAAQ;CAEjD,MAAM,QACJ,OAAO,SAAS,WAAW,QAAQ,QAAQ;CAE7C,MAAM,OACJ,OAAO,SAAS,WAAW,OAAO,QAAQ;CAE5C,OACE,oBAAC,2BAAD;EACE,GAAI;EACJ,gBAAgB;EAChB,WAAW,GAAG,WAAW,OAAO,SAAS,MAAM,SAAS;CACzD,CAAA;AAEL;AAEA,oBAAoB,cAAc"}

package/dist/components/button/Button.js

@@ -21,6 +21,9 @@ var StyledButton = styled("button", {
 		"ease-out",
 		"whitespace-nowrap",
 		"w-max",
+		"select-none",
+		"[-webkit-touch-callout:none]",
+		"[-webkit-tap-highlight-color:transparent]",
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30"
 	],

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Loader } from '../loader/Loader'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\n\nexport const StyledButton = styled(\n  'button',\n  {\n    base: [\n      'items-center',\n      'bg-[unset]',\n      'rounded-md',\n      'cursor-pointer',\n      'flex',\n      'font-body',\n      'font-semibold',\n      'justify-center',\n      'no-underline',\n      'transition-all',\n      'duration-100',\n      'ease-out',\n      'whitespace-nowrap',\n      'w-max',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      theme: {\n        primary: [\n          '[--base:var(--color-primary-800)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1000)]'\n        ],\n        secondary: [\n          '[--base:var(--color-primary-1000)]',\n          '[--interact:var(--color-primary-1100)]',\n          '[--active:var(--color-primary-1200)]'\n        ],\n        success: [\n          '[--base:var(--color-success)]',\n          '[--interact:var(--color-success-mid)]',\n          '[--active:var(--color-success-dark)]'\n        ],\n        warning: [\n          '[--base:var(--color-warning)]',\n          '[--interact:var(--color-warning-mid)]',\n          '[--active:var(--color-warning-dark)]',\n          '[--text:var(--color-grey-800)]'\n        ],\n        danger: [\n          '[--base:var(--color-danger)]',\n          '[--interact:var(--color-danger-mid)]',\n          '[--active:var(--color-danger-dark)]'\n        ],\n        neutral: [\n          '[--base:white]',\n          '[--interact:rgba(255,255,255,0.9)]',\n          '[--active:rgba(255,255,255,0.75)]',\n          '[--text:var(--color-primary-800)]'\n        ]\n      },\n      appearance: {\n        solid: [\n          'bg-(--base)',\n          'text-(--text,white)',\n          'disabled:opacity-30',\n          'disabled:cursor-not-allowed',\n          'not-disabled:hover:bg-(--interact)',\n          'not-disabled:hover:text-(--text,white)',\n          'not-disabled:focus:bg-(--interact)',\n          'not-disabled:focus:text-(--text,white)',\n          'not-disabled:active:bg-(--active)'\n        ],\n        outline: [\n          'border',\n          'border-current',\n          'text-(--base)',\n          'disabled:opacity-30',\n          'disabled:cursor-not-allowed',\n          'not-disabled:hover:no-underline',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:no-underline',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ]\n      },\n      size: {\n        sm: [\n          'text-sm',\n          'leading-[1.53]',\n          'h-8',\n          'px-4',\n          'gap-2',\n          '[&_svg]:size-4'\n        ],\n        md: [\n          'text-md',\n          'leading-normal',\n          'h-10',\n          'px-8',\n          'gap-3',\n          '[&_svg]:size-5'\n        ],\n        lg: [\n          'text-lg',\n          'leading-normal',\n          'h-12',\n          'px-8',\n          'gap-3',\n          '[&_svg]:size-[22px]'\n        ],\n        xl: [\n          'text-lg',\n          'leading-normal',\n          'h-16',\n          'px-8',\n          'gap-3',\n          '[&_svg]:size-[22px]'\n        ]\n      },\n      isLoading: {\n        true: ['cursor-not-allowed', 'opacity-60', 'pointer-events-none']\n      },\n      fullWidth: {\n        true: ['w-full'],\n        false: ['w-max']\n      }\n    },\n    defaultVariants: {\n      appearance: 'solid',\n      size: 'md',\n      theme: 'primary'\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\n// @__PURE__ keeps this tree-shakable for consumers importing only\n// StyledButton from this module.\nconst LoaderContentsWrapper = /* @__PURE__ */ styled(\n  'span',\n  {\n    base: ['items-center', 'flex', 'justify-center', 'invisible'],\n    variants: {\n      size: {\n        sm: ['gap-2'],\n        md: ['gap-3'],\n        lg: ['gap-3'],\n        xl: ['gap-3']\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\nconst WithLoader = ({\n  size,\n  children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n  <>\n    <Loader className=\"absolute\" />\n    <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n  </>\n)\n\ntype ButtonCustomProps = {\n  children: React.ReactNode\n  href?: string\n  isLoading?: boolean\n  reloadDocument?: boolean\n}\n\ntype ButtonProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  ButtonCustomProps & { as?: React.ElementType }\n>\n\n// Re-expose StyledButton's variant props merged with our own, so the public\n// polymorphic type re-checks props against whatever `as` target is passed\ntype StyledButtonOwnProps =\n  typeof StyledButton extends PolymorphicComponent<\n    infer _Element extends React.ElementType,\n    infer OwnProps\n  >\n    ? OwnProps\n    : never\n\ntype ButtonOwnProps = Override<StyledButtonOwnProps, ButtonCustomProps>\n\nexport const Button = (({\n  ref,\n  children,\n  as,\n  href,\n  isLoading = false,\n  onClick,\n  disabled,\n  reloadDocument,\n  ...rest\n}: ButtonProps) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n  return (\n    <StyledButton\n      as={as || routerLinkProps.as || (href ? 'a' : undefined)}\n      {...(!disabled && !isLoading && { href, onClick })}\n      isLoading={isLoading}\n      type={!href ? 'button' : undefined}\n      disabled={disabled}\n      {...rest}\n      {...getExternalAnchorProps(href)}\n      ref={ref}\n    >\n      {isLoading ? (\n        <WithLoader size={rest.size}>{children}</WithLoader>\n      ) : (\n        children\n      )}\n    </StyledButton>\n  )\n}) as PolymorphicComponent<'button', ButtonOwnProps>\n"],"mappings":";;;;;;;AAQA,IAAa,eAAe,OAC1B,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;GACF;EACF;EACA,YAAY;GACV,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW,EACT,MAAM;GAAC;GAAsB;GAAc;EAAqB,EAClE;EACA,WAAW;GACT,MAAM,CAAC,QAAQ;GACf,OAAO,CAAC,OAAO;EACjB;CACF;CACA,iBAAiB;EACf,YAAY;EACZ,MAAM;EACN,OAAO;CACT;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;;AAIA,IAAM,wBAAwC,uBAC5C,QACA;CACE,MAAM;EAAC;EAAgB;EAAQ;EAAkB;CAAW;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;CACd,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAM,cAAc,EAClB,MACA,eAEA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAQ,WAAU,WAAY,CAAA,GAC9B,oBAAC,uBAAD;CAA6B;CAAO;AAAgC,CAAA,CACpE,EAAA,CAAA;AA2BJ,IAAa,WAAW,EACtB,KACA,UACA,IACA,MACA,YAAY,OACZ,SACA,UACA,gBACA,GAAG,WACc;CACjB,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,OACE,oBAAC,cAAD;EACE,IAAI,MAAM,gBAAgB,OAAO,OAAO,MAAM,KAAA;EAC9C,GAAK,CAAC,YAAY,CAAC,aAAa;GAAE;GAAM;EAAQ;EACrC;EACX,MAAM,CAAC,OAAO,WAAW,KAAA;EACf;EACV,GAAI;EACJ,GAAI,uBAAuB,IAAI;EAC1B;YAEJ,YACC,oBAAC,YAAD;GAAY,MAAM,KAAK;GAAO;EAAqB,CAAA,IAEnD;CAEU,CAAA;AAElB"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Loader } from '../loader/Loader'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\n\nexport const StyledButton = styled(\n  'button',\n  {\n    base: [\n      'items-center',\n      'bg-[unset]',\n      'rounded-md',\n      'cursor-pointer',\n      'flex',\n      'font-body',\n      'font-semibold',\n      'justify-center',\n      'no-underline',\n      'transition-all',\n      'duration-100',\n      'ease-out',\n      'whitespace-nowrap',\n      'w-max',\n      // On isLoading the children swap (label → Loader) underneath an active\n      // touch; iOS WKWebView's touch-selection heuristic then paints the OS\n      // selection highlight over the loading dots. Desktop UA stylesheets give\n      // <button> user-select:none implicitly, WKWebView does not — so assert it\n      // (harmless on a button, covers every state, not just loading). See #892.\n      'select-none',\n      '[-webkit-touch-callout:none]',\n      '[-webkit-tap-highlight-color:transparent]',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      theme: {\n        primary: [\n          '[--base:var(--color-primary-800)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1000)]'\n        ],\n        secondary: [\n          '[--base:var(--color-primary-1000)]',\n          '[--interact:var(--color-primary-1100)]',\n          '[--active:var(--color-primary-1200)]'\n        ],\n        success: [\n          '[--base:var(--color-success)]',\n          '[--interact:var(--color-success-mid)]',\n          '[--active:var(--color-success-dark)]'\n        ],\n        warning: [\n          '[--base:var(--color-warning)]',\n          '[--interact:var(--color-warning-mid)]',\n          '[--active:var(--color-warning-dark)]',\n          '[--text:var(--color-grey-800)]'\n        ],\n        danger: [\n          '[--base:var(--color-danger)]',\n          '[--interact:var(--color-danger-mid)]',\n          '[--active:var(--color-danger-dark)]'\n        ],\n        neutral: [\n          '[--base:white]',\n          '[--interact:rgba(255,255,255,0.9)]',\n          '[--active:rgba(255,255,255,0.75)]',\n          '[--text:var(--color-primary-800)]'\n        ]\n      },\n      appearance: {\n        solid: [\n          'bg-(--base)',\n          'text-(--text,white)',\n          'disabled:opacity-30',\n          'disabled:cursor-not-allowed',\n          'not-disabled:hover:bg-(--interact)',\n          'not-disabled:hover:text-(--text,white)',\n          'not-disabled:focus:bg-(--interact)',\n          'not-disabled:focus:text-(--text,white)',\n          'not-disabled:active:bg-(--active)'\n        ],\n        outline: [\n          'border',\n          'border-current',\n          'text-(--base)',\n          'disabled:opacity-30',\n          'disabled:cursor-not-allowed',\n          'not-disabled:hover:no-underline',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:no-underline',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ]\n      },\n      size: {\n        sm: [\n          'text-sm',\n          'leading-[1.53]',\n          'h-8',\n          'px-4',\n          'gap-2',\n          '[&_svg]:size-4'\n        ],\n        md: [\n          'text-md',\n          'leading-normal',\n          'h-10',\n          'px-8',\n          'gap-3',\n          '[&_svg]:size-5'\n        ],\n        lg: [\n          'text-lg',\n          'leading-normal',\n          'h-12',\n          'px-8',\n          'gap-3',\n          '[&_svg]:size-[22px]'\n        ],\n        xl: [\n          'text-lg',\n          'leading-normal',\n          'h-16',\n          'px-8',\n          'gap-3',\n          '[&_svg]:size-[22px]'\n        ]\n      },\n      isLoading: {\n        true: ['cursor-not-allowed', 'opacity-60', 'pointer-events-none']\n      },\n      fullWidth: {\n        true: ['w-full'],\n        false: ['w-max']\n      }\n    },\n    defaultVariants: {\n      appearance: 'solid',\n      size: 'md',\n      theme: 'primary'\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\n// @__PURE__ keeps this tree-shakable for consumers importing only\n// StyledButton from this module.\nconst LoaderContentsWrapper = /* @__PURE__ */ styled(\n  'span',\n  {\n    base: ['items-center', 'flex', 'justify-center', 'invisible'],\n    variants: {\n      size: {\n        sm: ['gap-2'],\n        md: ['gap-3'],\n        lg: ['gap-3'],\n        xl: ['gap-3']\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\nconst WithLoader = ({\n  size,\n  children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n  <>\n    <Loader className=\"absolute\" />\n    <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n  </>\n)\n\ntype ButtonCustomProps = {\n  children: React.ReactNode\n  href?: string\n  isLoading?: boolean\n  reloadDocument?: boolean\n}\n\ntype ButtonProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  ButtonCustomProps & { as?: React.ElementType }\n>\n\n// Re-expose StyledButton's variant props merged with our own, so the public\n// polymorphic type re-checks props against whatever `as` target is passed\ntype StyledButtonOwnProps =\n  typeof StyledButton extends PolymorphicComponent<\n    infer _Element extends React.ElementType,\n    infer OwnProps\n  >\n    ? OwnProps\n    : never\n\ntype ButtonOwnProps = Override<StyledButtonOwnProps, ButtonCustomProps>\n\nexport const Button = (({\n  ref,\n  children,\n  as,\n  href,\n  isLoading = false,\n  onClick,\n  disabled,\n  reloadDocument,\n  ...rest\n}: ButtonProps) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n  return (\n    <StyledButton\n      as={as || routerLinkProps.as || (href ? 'a' : undefined)}\n      {...(!disabled && !isLoading && { href, onClick })}\n      isLoading={isLoading}\n      type={!href ? 'button' : undefined}\n      disabled={disabled}\n      {...rest}\n      {...getExternalAnchorProps(href)}\n      ref={ref}\n    >\n      {isLoading ? (\n        <WithLoader size={rest.size}>{children}</WithLoader>\n      ) : (\n        children\n      )}\n    </StyledButton>\n  )\n}) as PolymorphicComponent<'button', ButtonOwnProps>\n"],"mappings":";;;;;;;AAQA,IAAa,eAAe,OAC1B,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAMA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;GACF;EACF;EACA,YAAY;GACV,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW,EACT,MAAM;GAAC;GAAsB;GAAc;EAAqB,EAClE;EACA,WAAW;GACT,MAAM,CAAC,QAAQ;GACf,OAAO,CAAC,OAAO;EACjB;CACF;CACA,iBAAiB;EACf,YAAY;EACZ,MAAM;EACN,OAAO;CACT;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;;AAIA,IAAM,wBAAwC,uBAC5C,QACA;CACE,MAAM;EAAC;EAAgB;EAAQ;EAAkB;CAAW;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;CACd,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAM,cAAc,EAClB,MACA,eAEA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAQ,WAAU,WAAY,CAAA,GAC9B,oBAAC,uBAAD;CAA6B;CAAO;AAAgC,CAAA,CACpE,EAAA,CAAA;AA2BJ,IAAa,WAAW,EACtB,KACA,UACA,IACA,MACA,YAAY,OACZ,SACA,UACA,gBACA,GAAG,WACc;CACjB,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,OACE,oBAAC,cAAD;EACE,IAAI,MAAM,gBAAgB,OAAO,OAAO,MAAM,KAAA;EAC9C,GAAK,CAAC,YAAY,CAAC,aAAa;GAAE;GAAM;EAAQ;EACrC;EACX,MAAM,CAAC,OAAO,WAAW,KAAA;EACf;EACV,GAAI;EACJ,GAAI,uBAAuB,IAAI;EAC1B;YAEJ,YACC,oBAAC,YAAD;GAAY,MAAM,KAAK;GAAO;EAAqB,CAAA,IAEnD;CAEU,CAAA;AAElB"}

package/dist/components/calendar/Calendar.js

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { Button } from "../button/Button.js";

package/dist/components/calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","names":[],"sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from './constants'\nimport { Day } from './Day'\n\nconst StyledButton = styled(Button, {\n  base: ['text-grey-1000', 'p-3', 'w-16'],\n  variants: {\n    selected: {\n      false: [\n        'disabled:bg-white!',\n        'font-normal',\n        'hover:bg-grey-200!',\n        'hover:text-grey-1000!',\n        'text-grey-1000!'\n      ]\n    }\n  }\n})\n\nexport type CalendarTranslationProps = {\n  monthNames?: string[]\n  weekdayNames?: string[]\n  labels?: {\n    open: string\n    next: string\n    previous: string\n    nextYear: string\n    previousYear: string\n  }\n}\n\ntype CalendarProps = DayzedInterface &\n  CalendarTranslationProps & {\n    refDateToday?: React.RefObject<HTMLButtonElement | null>\n    refDateSelected?: React.RefObject<HTMLButtonElement | null>\n    setYear: (date: Date) => Promise<void>\n    className?: string\n  }\n\nconst offsetWeekdayNames = (\n  weekdayNames: string[],\n  firstDayOfWeek: number\n): string[] => {\n  const start = weekdayNames.slice(0, firstDayOfWeek)\n  const end = weekdayNames.slice(firstDayOfWeek)\n  return [...end, ...start]\n}\n\nexport const Calendar = ({\n  className,\n  refDateSelected,\n  refDateToday,\n  firstDayOfWeek = 0,\n  monthNames = monthNamesShort,\n  weekdayNames = weekdayNamesShort,\n  labels = DEFAULT_LABELS,\n  date: dateProp,\n  minDate,\n  maxDate,\n  setYear,\n  ...rest\n}: CalendarProps) => {\n  // `new Date()` as a default parameter runs on every render (impure render,\n  // and a server/client hydration divergence near midnight) — capture the\n  // fallback once instead.\n  const [fallbackDate] = React.useState(() => new Date())\n  const date = dateProp ?? fallbackDate\n\n  const [showYears, setShowYears] = React.useState<boolean>(false)\n  const [currentYear, setCurrentYear] = React.useState<number>(\n    date?.getFullYear()\n  )\n\n  const handleSetYear = (year: number): void => {\n    // Copy before setFullYear — mutating the `date` prop in place changes the\n    // caller's object.\n    const newDate = new Date(date)\n    newDate.setFullYear(year)\n    setYear(newDate)\n    setShowYears(false)\n  }\n\n  const isAtMinYear = minDate && currentYear - 16 <= minDate.getFullYear()\n  const isAtMaxYear = maxDate && currentYear >= maxDate.getFullYear()\n\n  const yearList = Array.from({ length: 16 }, (_, i) => {\n    const year = currentYear - i\n    if (\n      (maxDate && year > maxDate.getFullYear()) ||\n      (minDate && year < minDate.getFullYear())\n    )\n      return 0\n    return year\n  })\n\n  const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({\n    firstDayOfWeek,\n    showOutsideDays: true,\n    date,\n    minDate,\n    maxDate,\n    ...rest\n  })\n\n  if (!calendars.length) return null\n\n  return (\n    <div className={cn('relative', 'w-fit', '-mt-1', className)}>\n      <div className=\"absolute top-0 -right-1 flex\">\n        <ActionIcon\n          label={labels[showYears ? 'previousYear' : 'previous']}\n          theme=\"neutral\"\n          size=\"md\"\n          {...(!showYears && getBackProps({ calendars }))}\n          {...(showYears && {\n            onClick: () => setCurrentYear(currentYear - 16)\n          })}\n          disabled={showYears && isAtMinYear}\n        >\n          <Icon is={ChevronLeft} />\n        </ActionIcon>\n        <ActionIcon\n          label={labels[showYears ? 'nextYear' : 'next']}\n          theme=\"neutral\"\n          size=\"md\"\n          {...(!showYears && getForwardProps({ calendars }))}\n          {...(showYears && {\n            onClick: () => setCurrentYear(currentYear + 16)\n          })}\n          disabled={showYears && isAtMaxYear}\n        >\n          <Icon is={ChevronRight} />\n        </ActionIcon>\n      </div>\n      {showYears && (\n        <div className=\"grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]\">\n          {yearList.map((year, i) => {\n            const isCurrentYear = year === date.getFullYear()\n            // Out-of-range slots render as empty placeholders in a fixed 16-cell\n            // grid; several share the same `0` value, so the slot index is their\n            // only stable identity.\n            // eslint-disable-next-line react/no-array-index-key\n            if (!year) return <div key={i} className=\"h-10 w-16\" />\n\n            return (\n              <StyledButton\n                key={year}\n                theme={isCurrentYear ? 'primary' : 'neutral'}\n                onClick={() => handleSetYear(year)}\n                selected={isCurrentYear}\n              >\n                {year}\n              </StyledButton>\n            )\n          })}\n        </div>\n      )}\n      {!showYears &&\n        calendars.map(({ month, year, weeks }) => (\n          <div key={`${month}${year}`}>\n            <div className=\"mb-4 flex h-10 items-center\">\n              <Button\n                theme=\"neutral\"\n                onClick={() => setShowYears(true)}\n                className=\"text-grey-1000 px-0\"\n              >\n                {monthNames[month]} {year}\n              </Button>\n            </div>\n            <div className=\"mb-3 grid grid-cols-7 gap-x-2 gap-y-1\">\n              {offsetWeekdayNames(weekdayNames, firstDayOfWeek).map(\n                (weekday) => (\n                  <Text\n                    as=\"span\"\n                    size=\"sm\"\n                    weight=\"bold\"\n                    key={`${month}${year}${weekday}`}\n                    className=\"text-center\"\n                  >\n                    {weekday}\n                  </Text>\n                )\n              )}\n            </div>\n            <div className=\"grid grid-cols-7 gap-x-2 gap-y-1\">\n              {weeks.map((week, weekIndex) =>\n                week.map((dateObj, index) => {\n                  const key = `${month}${year}${weekIndex}${index}`\n\n                  if (!dateObj) return <div key={key} />\n\n                  const { date, selected, today, prevMonth, nextMonth } =\n                    dateObj\n\n                  return (\n                    <Day\n                      isOutsideMonth={prevMonth || nextMonth}\n                      isSelected={selected}\n                      isToday={today}\n                      key={key}\n                      ref={\n                        selected ? refDateSelected : today ? refDateToday : null\n                      }\n                      {...getDateProps({ dateObj })}\n                      type=\"button\"\n                    >\n                      {date.getDate()}\n                    </Day>\n                  )\n                })\n              )}\n            </div>\n          </div>\n        ))}\n    </div>\n  )\n}\n\nCalendar.displayName = 'Calendar'\n"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","names":[],"sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from './constants'\nimport { Day } from './Day'\n\nconst StyledButton = styled(Button, {\n  base: ['text-grey-1000', 'p-3', 'w-16'],\n  variants: {\n    selected: {\n      false: [\n        'disabled:bg-white!',\n        'font-normal',\n        'hover:bg-grey-200!',\n        'hover:text-grey-1000!',\n        'text-grey-1000!'\n      ]\n    }\n  }\n})\n\nexport type CalendarTranslationProps = {\n  monthNames?: string[]\n  weekdayNames?: string[]\n  labels?: {\n    open: string\n    next: string\n    previous: string\n    nextYear: string\n    previousYear: string\n  }\n}\n\ntype CalendarProps = DayzedInterface &\n  CalendarTranslationProps & {\n    refDateToday?: React.RefObject<HTMLButtonElement | null>\n    refDateSelected?: React.RefObject<HTMLButtonElement | null>\n    setYear: (date: Date) => Promise<void>\n    className?: string\n  }\n\nconst offsetWeekdayNames = (\n  weekdayNames: string[],\n  firstDayOfWeek: number\n): string[] => {\n  const start = weekdayNames.slice(0, firstDayOfWeek)\n  const end = weekdayNames.slice(firstDayOfWeek)\n  return [...end, ...start]\n}\n\nexport const Calendar = ({\n  className,\n  refDateSelected,\n  refDateToday,\n  firstDayOfWeek = 0,\n  monthNames = monthNamesShort,\n  weekdayNames = weekdayNamesShort,\n  labels = DEFAULT_LABELS,\n  date: dateProp,\n  minDate,\n  maxDate,\n  setYear,\n  ...rest\n}: CalendarProps) => {\n  // `new Date()` as a default parameter runs on every render (impure render,\n  // and a server/client hydration divergence near midnight) — capture the\n  // fallback once instead.\n  const [fallbackDate] = React.useState(() => new Date())\n  const date = dateProp ?? fallbackDate\n\n  const [showYears, setShowYears] = React.useState<boolean>(false)\n  const [currentYear, setCurrentYear] = React.useState<number>(\n    date?.getFullYear()\n  )\n\n  const handleSetYear = (year: number): void => {\n    // Copy before setFullYear — mutating the `date` prop in place changes the\n    // caller's object.\n    const newDate = new Date(date)\n    newDate.setFullYear(year)\n    setYear(newDate)\n    setShowYears(false)\n  }\n\n  const isAtMinYear = minDate && currentYear - 16 <= minDate.getFullYear()\n  const isAtMaxYear = maxDate && currentYear >= maxDate.getFullYear()\n\n  const yearList = Array.from({ length: 16 }, (_, i) => {\n    const year = currentYear - i\n    if (\n      (maxDate && year > maxDate.getFullYear()) ||\n      (minDate && year < minDate.getFullYear())\n    )\n      return 0\n    return year\n  })\n\n  const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({\n    firstDayOfWeek,\n    showOutsideDays: true,\n    date,\n    minDate,\n    maxDate,\n    ...rest\n  })\n\n  if (!calendars.length) return null\n\n  return (\n    <div className={cn('relative', 'w-fit', '-mt-1', className)}>\n      <div className=\"absolute top-0 -right-1 flex\">\n        <ActionIcon\n          label={labels[showYears ? 'previousYear' : 'previous']}\n          theme=\"neutral\"\n          size=\"md\"\n          {...(!showYears && getBackProps({ calendars }))}\n          {...(showYears && {\n            onClick: () => setCurrentYear(currentYear - 16)\n          })}\n          disabled={showYears && isAtMinYear}\n        >\n          <Icon is={ChevronLeft} />\n        </ActionIcon>\n        <ActionIcon\n          label={labels[showYears ? 'nextYear' : 'next']}\n          theme=\"neutral\"\n          size=\"md\"\n          {...(!showYears && getForwardProps({ calendars }))}\n          {...(showYears && {\n            onClick: () => setCurrentYear(currentYear + 16)\n          })}\n          disabled={showYears && isAtMaxYear}\n        >\n          <Icon is={ChevronRight} />\n        </ActionIcon>\n      </div>\n      {showYears && (\n        <div className=\"grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]\">\n          {yearList.map((year, i) => {\n            const isCurrentYear = year === date.getFullYear()\n            // Out-of-range slots render as empty placeholders in a fixed 16-cell\n            // grid; several share the same `0` value, so the slot index is their\n            // only stable identity.\n            // eslint-disable-next-line react/no-array-index-key\n            if (!year) return <div key={i} className=\"h-10 w-16\" />\n\n            return (\n              <StyledButton\n                key={year}\n                theme={isCurrentYear ? 'primary' : 'neutral'}\n                onClick={() => handleSetYear(year)}\n                selected={isCurrentYear}\n              >\n                {year}\n              </StyledButton>\n            )\n          })}\n        </div>\n      )}\n      {!showYears &&\n        calendars.map(({ month, year, weeks }) => (\n          <div key={`${month}${year}`}>\n            <div className=\"mb-4 flex h-10 items-center\">\n              <Button\n                theme=\"neutral\"\n                onClick={() => setShowYears(true)}\n                className=\"text-grey-1000 px-0\"\n              >\n                {monthNames[month]} {year}\n              </Button>\n            </div>\n            <div className=\"mb-3 grid grid-cols-7 gap-x-2 gap-y-1\">\n              {offsetWeekdayNames(weekdayNames, firstDayOfWeek).map(\n                (weekday) => (\n                  <Text\n                    as=\"span\"\n                    size=\"sm\"\n                    weight=\"bold\"\n                    key={`${month}${year}${weekday}`}\n                    className=\"text-center\"\n                  >\n                    {weekday}\n                  </Text>\n                )\n              )}\n            </div>\n            <div className=\"grid grid-cols-7 gap-x-2 gap-y-1\">\n              {weeks.map((week, weekIndex) =>\n                week.map((dateObj, index) => {\n                  const key = `${month}${year}${weekIndex}${index}`\n\n                  if (!dateObj) return <div key={key} />\n\n                  const { date, selected, today, prevMonth, nextMonth } =\n                    dateObj\n\n                  return (\n                    <Day\n                      isOutsideMonth={prevMonth || nextMonth}\n                      isSelected={selected}\n                      isToday={today}\n                      key={key}\n                      ref={\n                        selected ? refDateSelected : today ? refDateToday : null\n                      }\n                      {...getDateProps({ dateObj })}\n                      type=\"button\"\n                    >\n                      {date.getDate()}\n                    </Day>\n                  )\n                })\n              )}\n            </div>\n          </div>\n        ))}\n    </div>\n  )\n}\n\nCalendar.displayName = 'Calendar'\n"],"mappings":"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"}

package/dist/components/carousel/Carousel.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { CarouselArrowNext, CarouselArrowPrevious } from "./CarouselArrows.js";
 import { CarouselPagination } from "./CarouselPagination.js";
 import { CarouselSlider } from "./CarouselSlider.js";

package/dist/components/carousel/CarouselPagination.js

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { useCarousel } from "./Carousel.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/carousel/CarouselPagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { useCarousel } from './Carousel'\n\nconst Dot = styled('button', {\n  base: [\n    'bg-grey-600',\n    'cursor-pointer',\n    'duration-100',\n    'ease-in',\n    'focus:bg-primary-900',\n    'hover:bg-primary-900',\n    'mx-1',\n    'p-1',\n    'rounded-full',\n    'size-3',\n    'transition-all',\n    'disabled:bg-primary-800',\n    'disabled:cursor-default'\n  ]\n})\n\nexport const CarouselPagination = ({\n  className,\n  ...rest\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  const { scrollSnaps, selectedIndex, scrollTo } = useCarousel()\n\n  const dots = Array.from({ length: scrollSnaps.length }, (_, i) => i)\n\n  return (\n    <div className={cn('flex', 'justify-center', className)} {...rest}>\n      {dots.map((index) => (\n        <Dot\n          key={index}\n          type=\"button\"\n          onClick={() => scrollTo(index)}\n          disabled={index === selectedIndex}\n          aria-label=\"slide dot\"\n        />\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAKA,IAAM,MAAM,OAAO,UAAU,EAC3B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,sBAAsB,EACjC,WACA,GAAG,WACuC;CAC1C,MAAM,EAAE,aAAa,eAAe,aAAa,YAAY;CAE7D,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,OAAO,IAAI,GAAG,MAAM,CAAC;CAEnE,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,kBAAkB,SAAS;EAAG,GAAI;YAC1D,KAAK,KAAK,UACT,oBAAC,KAAD;GAEE,MAAK;GACL,eAAe,SAAS,KAAK;GAC7B,UAAU,UAAU;GACpB,cAAW;EACZ,GALM,KAKN,CACF;CACE,CAAA;AAET"}
+{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { useCarousel } from './Carousel'\n\nconst Dot = styled('button', {\n  base: [\n    'bg-grey-600',\n    'cursor-pointer',\n    'duration-100',\n    'ease-in',\n    'focus:bg-primary-900',\n    'hover:bg-primary-900',\n    'mx-1',\n    'p-1',\n    'rounded-full',\n    'size-3',\n    'transition-all',\n    'disabled:bg-primary-800',\n    'disabled:cursor-default'\n  ]\n})\n\nexport const CarouselPagination = ({\n  className,\n  ...rest\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  const { scrollSnaps, selectedIndex, scrollTo } = useCarousel()\n\n  const dots = Array.from({ length: scrollSnaps.length }, (_, i) => i)\n\n  return (\n    <div className={cn('flex', 'justify-center', className)} {...rest}>\n      {dots.map((index) => (\n        <Dot\n          key={index}\n          type=\"button\"\n          onClick={() => scrollTo(index)}\n          disabled={index === selectedIndex}\n          aria-label=\"slide dot\"\n        />\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAKA,IAAM,MAAM,OAAO,UAAU,EAC3B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,sBAAsB,EACjC,WACA,GAAG,WACuC;CAC1C,MAAM,EAAE,aAAa,eAAe,aAAa,YAAY;CAE7D,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,OAAO,IAAI,GAAG,MAAM,CAAC;CAEnE,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,kBAAkB,SAAS;EAAG,GAAI;YAC1D,KAAK,KAAK,UACT,oBAAC,KAAD;GAEE,MAAK;GACL,eAAe,SAAS,KAAK;GAC7B,UAAU,UAAU;GACpB,cAAW;EACZ,GALM,KAKN,CACF;CACE,CAAA;AAET"}

package/dist/components/carousel/CarouselSlide.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { CarouselSlideGapContext, toSlideGapClass } from "./CarouselSlider.js";
 import { useCarousel } from "./Carousel.js";
 import * as React$1 from "react";

package/dist/components/carousel/CarouselSlider.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { useCarousel } from "./Carousel.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Label } from "../label/Label.js";
 import { AsyncDataState } from "./DataTable.types.js";
 import { useDataTable } from "./DataTable.context.js";

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

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { useDataTable } from "./DataTable.context.js";
 import { Table } from "../table/Table.js";
 import { DataTableHeaderCell } from "./DataTableHeaderCell.js";

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

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { Text } from "../text/Text.js";
 import { useDataTable } from "./DataTable.context.js";

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeaderCell.js","names":[],"sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n  includeTotal?: boolean\n  totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\n      ]\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nconst handleKeyDown = (\n  event: React.KeyboardEvent<HTMLTableCellElement>,\n  callback: (event: unknown) => void | undefined\n) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    callback(event as unknown)\n  }\n}\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...rest\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable, getRowModel } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      className={className}\n      {...rest}\n    >\n      <div\n        className={cn(\n          'flex',\n          'gap-1',\n          'items-center',\n          header.colSpan > 1 ? 'justify-center' : 'justify-start'\n        )}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <div\n            className={cn(\n              'flex',\n              'items-center',\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </div>\n        )}\n        {includeTotal ? (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        ) : null}\n      </div>\n    </StyledTableHeaderCell>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAkBA,IAAM,cAAc,OAAO,MAAM,EAC/B,MAAM;CAAC;CAAiB;CAAqB;CAAU;AAAmB,EAC5E,CAAC;AAED,IAAM,wBAAwB,OAAO,MAAM,YAAY;CACrD,MAAM,CAAC;CACP,UAAU,EACR,YAAY,EACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,CAAC;AAED,IAAM,YAAY;CAChB,KAAK;CACL,MAAM;AACR;AAEA,IAAM,YAAY,EAAE,gBAClB,oBAAC,MAAD;CACE,IAAI,UAAU;CACd,MAAK;CACL,WAAU;AACX,CAAA;AAGH,IAAM,iBACJ,OACA,aACG;CACH,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;EAC9C,MAAM,eAAe;EACrB,SAAS,KAAgB;CAC3B;AACF;AAEA,IAAa,uBAAuB,EAClC,QACA,eAAe,OACf,cAAc,SACd,UACA,WACA,GAAG,WACuB;CAC1B,MAAM,gBAAgB,OAAO,OAAO,YAAY;CAChD,MAAM,EAAE,YAAY,iBAAiB,gBAAgB,aAAa;CAElE,MAAM,eAAe,OAAO,OAAO,WAAW;CAE9C,MAAM,YAAY,YAAY,CAAC,EAAE,MAAM;CAEvC,MAAM,EAAE,YAAY,cAAc,SAAS,CAAC,CAAC;CAE7C,MAAM,uBAAuB,OAAO,OAAO,wBAAwB;CAEnE,OACE,oBAAC,uBAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,OAAO;EAChB,SACE,mBAAmB,gBAAgB,uBAC/B,uBACA,KAAA;EAEN,YAAY,UACV,mBACA,gBACA,wBACA,cAAc,OAAO,oBAAoB;EAE3C,UAAU,mBAAmB,eAAe,IAAI;EAChD,GAAI;EACO;EACX,GAAI;YAEJ,qBAAC,OAAD;GACE,WAAW,GACT,QACA,SACA,gBACA,OAAO,UAAU,IAAI,mBAAmB,eAC1C;aANF;IAQG,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC;IAC9D,iBAAiB,mBAChB,oBAAC,OAAD;KACE,WAAW,GACT,QACA,gBACA,YACA,UACA,QACA,YAAY,mBAAmB,kBAC/B,YACF;eAEA,oBAAC,UAAD,EAAU,WAAW,cAAgB,CAAA;IAClC,CAAA;IAEN,eACC,qBAAC,aAAD;KAAa,MAAK;KAAK,QAAO;eAA9B;MAAuC;MACnC;MAAU;MAAE;MAAY;KACf;SACX;GACD;;CACgB,CAAA;AAE3B"}
+{"version":3,"file":"DataTableHeaderCell.js","names":[],"sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n  includeTotal?: boolean\n  totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\n      ]\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nconst handleKeyDown = (\n  event: React.KeyboardEvent<HTMLTableCellElement>,\n  callback: (event: unknown) => void | undefined\n) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    callback(event as unknown)\n  }\n}\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...rest\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable, getRowModel } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      className={className}\n      {...rest}\n    >\n      <div\n        className={cn(\n          'flex',\n          'gap-1',\n          'items-center',\n          header.colSpan > 1 ? 'justify-center' : 'justify-start'\n        )}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <div\n            className={cn(\n              'flex',\n              'items-center',\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </div>\n        )}\n        {includeTotal ? (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        ) : null}\n      </div>\n    </StyledTableHeaderCell>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAM,cAAc,OAAO,MAAM,EAC/B,MAAM;CAAC;CAAiB;CAAqB;CAAU;AAAmB,EAC5E,CAAC;AAED,IAAM,wBAAwB,OAAO,MAAM,YAAY;CACrD,MAAM,CAAC;CACP,UAAU,EACR,YAAY,EACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,CAAC;AAED,IAAM,YAAY;CAChB,KAAK;CACL,MAAM;AACR;AAEA,IAAM,YAAY,EAAE,gBAClB,oBAAC,MAAD;CACE,IAAI,UAAU;CACd,MAAK;CACL,WAAU;AACX,CAAA;AAGH,IAAM,iBACJ,OACA,aACG;CACH,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;EAC9C,MAAM,eAAe;EACrB,SAAS,KAAgB;CAC3B;AACF;AAEA,IAAa,uBAAuB,EAClC,QACA,eAAe,OACf,cAAc,SACd,UACA,WACA,GAAG,WACuB;CAC1B,MAAM,gBAAgB,OAAO,OAAO,YAAY;CAChD,MAAM,EAAE,YAAY,iBAAiB,gBAAgB,aAAa;CAElE,MAAM,eAAe,OAAO,OAAO,WAAW;CAE9C,MAAM,YAAY,YAAY,CAAC,EAAE,MAAM;CAEvC,MAAM,EAAE,YAAY,cAAc,SAAS,CAAC,CAAC;CAE7C,MAAM,uBAAuB,OAAO,OAAO,wBAAwB;CAEnE,OACE,oBAAC,uBAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,OAAO;EAChB,SACE,mBAAmB,gBAAgB,uBAC/B,uBACA,KAAA;EAEN,YAAY,UACV,mBACA,gBACA,wBACA,cAAc,OAAO,oBAAoB;EAE3C,UAAU,mBAAmB,eAAe,IAAI;EAChD,GAAI;EACO;EACX,GAAI;YAEJ,qBAAC,OAAD;GACE,WAAW,GACT,QACA,SACA,gBACA,OAAO,UAAU,IAAI,mBAAmB,eAC1C;aANF;IAQG,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC;IAC9D,iBAAiB,mBAChB,oBAAC,OAAD;KACE,WAAW,GACT,QACA,gBACA,YACA,UACA,QACA,YAAY,mBAAmB,kBAC/B,YACF;eAEA,oBAAC,UAAD,EAAU,WAAW,cAAgB,CAAA;IAClC,CAAA;IAEN,eACC,qBAAC,aAAD;KAAa,MAAK;KAAK,QAAO;eAA9B;MAAuC;MACnC;MAAU;MAAE;MAAY;KACf;SACX;GACD;;CACgB,CAAA;AAE3B"}

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

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { useDataTable } from "./DataTable.context.js";
 import { Table } from "../table/Table.js";

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.js","names":[],"sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['bg-primary-100!']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={cn(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,YAAY,OAAO,MAAM,KAAK;CAClC,MAAM,CAAC,gBAAgB,UAAU;CACjC,UAAU;EACR,YAAY,EACV,MAAM,CAAC,iBAAiB,EAC1B;EACA,YAAY,EACV,MAAM,CAAC,YAAY,EACrB;EACA,aAAa,EACX,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;CACF;AACF,CAAC;AAED,IAAM,wBAAwB,YAAqC;CACjE,IAAI,CAAC,SAAS,OAAO;CACrB,IAAI,QAAQ,QAAQ,oCAAoC,GAAG,OAAO;CAClE,IAAI,QAAQ,aAAa,MAAM,MAAM,UAAU,OAAO;CACtD,OAAO;AACT;AAEA,IAAa,gBAAgB,EAAE,KAAK,gBAAmC;CACrE,MAAM,EAAE,oBAAoB,cAAc,yBACxC,aAAa;CAEf,MAAM,aAAa,CAAC,CAAC,eAAe,IAAI;CAExC,MAAM,sBAAsB,IAAI,yBAAyB;CACzD,MAAM,sBAAsB,IAAI,yBAAyB;CAEzD,MAAM,wBAAmD;EACvD,IAAI,IAAI,kBAAkB,GAAG,OAAO;EACpC,OAAO,IAAI,cAAc;CAC3B;CAEA,MAAM,kBACJ,SACA,UACG;EACH,IAAI,CAAC,WAAW;EAIhB,IAAI,CADgB,MAAM,OAAmB,QAAQ,IAChD,KAAc,qBAAqB,MAAM,MAAiB,GAC7D;EAGF,UAAU,QAAQ,UAAU,KAAK;CACnC;CAEA,MAAM,iBAAiB,UAAoD;EACzE,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,IAAI,qBAAqB,MAAM,MAAiB,GAC9C;GAEF,MAAM,eAAe;GACrB,eACE,KACA,KACF;EACF;EACA,IAAI,MAAM,QAAQ,aAAa;GAC7B,MAAM,eAAe;GAErB,MAAM,UADc,MAAM,OAAuB,QAAQ,IACzC,CAAA,EAAY;GAC5B,IAAI,WAAW,QAAQ,YAAY,MACjC,QAAQ,MAAM;EAElB;EACA,IAAI,MAAM,QAAQ,WAAW;GAC3B,MAAM,eAAe;GAErB,MAAM,cADc,MAAM,OAAuB,QAAQ,IACrC,CAAA,EAAY;GAChC,IAAI,eAAe,YAAY,YAAY,MACzC,YAAY,MAAM;EAEtB;CACF;CAEA,OACE,qBAAC,WAAD;EACE,YAAY,IAAI,cAAc;EAClB;EACZ,aAAa,CAAC,CAAC,aAAa,CAAC;EAC7B,GAAK,aAAa;GAChB,UAAU,UAAU,eAAe,KAAK,KAAK;GAC7C,UAAU;GACV,WAAW;GACX,WAAW;EACb;YATF;GAWG,qBAAqB,KACpB,oBAAC,MAAM,MAAP;IACE,eAAa,eAAe,IAAI;IAChC,SAAS;IACT,WAAW,GACT,QACA,IAAI,aAAa,IAAI,mBAAmB,aAC1C;cAEC,IAAI,aAAa,KAChB,oBAAC,MAAD,EAAM,IAAI,IAAI,cAAc,IAAI,cAAc,aAAe,CAAA;GAErD,CAAA;GAGb,sBACC,oBAAC,MAAM,MAAP;IAAY,WAAU;cACpB,oBAAC,+BAAD;KACO;KACL,SAAS,gBAAgB;KACzB,iBAAiB;IAClB,CAAA;GACS,CAAA;GAEb,IAAI,gBAAgB,CAAC,CAAC,KAAK,SAAS;IACnC,OAAO,oBAAC,mBAAD,EAAuC,KAAO,GAAtB,KAAK,EAAiB;GACvD,CAAC;EACQ;;AAEf"}
+{"version":3,"file":"DataTableRow.js","names":[],"sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['bg-primary-100!']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={cn(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,IAAM,YAAY,OAAO,MAAM,KAAK;CAClC,MAAM,CAAC,gBAAgB,UAAU;CACjC,UAAU;EACR,YAAY,EACV,MAAM,CAAC,iBAAiB,EAC1B;EACA,YAAY,EACV,MAAM,CAAC,YAAY,EACrB;EACA,aAAa,EACX,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;CACF;AACF,CAAC;AAED,IAAM,wBAAwB,YAAqC;CACjE,IAAI,CAAC,SAAS,OAAO;CACrB,IAAI,QAAQ,QAAQ,oCAAoC,GAAG,OAAO;CAClE,IAAI,QAAQ,aAAa,MAAM,MAAM,UAAU,OAAO;CACtD,OAAO;AACT;AAEA,IAAa,gBAAgB,EAAE,KAAK,gBAAmC;CACrE,MAAM,EAAE,oBAAoB,cAAc,yBACxC,aAAa;CAEf,MAAM,aAAa,CAAC,CAAC,eAAe,IAAI;CAExC,MAAM,sBAAsB,IAAI,yBAAyB;CACzD,MAAM,sBAAsB,IAAI,yBAAyB;CAEzD,MAAM,wBAAmD;EACvD,IAAI,IAAI,kBAAkB,GAAG,OAAO;EACpC,OAAO,IAAI,cAAc;CAC3B;CAEA,MAAM,kBACJ,SACA,UACG;EACH,IAAI,CAAC,WAAW;EAIhB,IAAI,CADgB,MAAM,OAAmB,QAAQ,IAChD,KAAc,qBAAqB,MAAM,MAAiB,GAC7D;EAGF,UAAU,QAAQ,UAAU,KAAK;CACnC;CAEA,MAAM,iBAAiB,UAAoD;EACzE,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,IAAI,qBAAqB,MAAM,MAAiB,GAC9C;GAEF,MAAM,eAAe;GACrB,eACE,KACA,KACF;EACF;EACA,IAAI,MAAM,QAAQ,aAAa;GAC7B,MAAM,eAAe;GAErB,MAAM,UADc,MAAM,OAAuB,QAAQ,IACzC,CAAA,EAAY;GAC5B,IAAI,WAAW,QAAQ,YAAY,MACjC,QAAQ,MAAM;EAElB;EACA,IAAI,MAAM,QAAQ,WAAW;GAC3B,MAAM,eAAe;GAErB,MAAM,cADc,MAAM,OAAuB,QAAQ,IACrC,CAAA,EAAY;GAChC,IAAI,eAAe,YAAY,YAAY,MACzC,YAAY,MAAM;EAEtB;CACF;CAEA,OACE,qBAAC,WAAD;EACE,YAAY,IAAI,cAAc;EAClB;EACZ,aAAa,CAAC,CAAC,aAAa,CAAC;EAC7B,GAAK,aAAa;GAChB,UAAU,UAAU,eAAe,KAAK,KAAK;GAC7C,UAAU;GACV,WAAW;GACX,WAAW;EACb;YATF;GAWG,qBAAqB,KACpB,oBAAC,MAAM,MAAP;IACE,eAAa,eAAe,IAAI;IAChC,SAAS;IACT,WAAW,GACT,QACA,IAAI,aAAa,IAAI,mBAAmB,aAC1C;cAEC,IAAI,aAAa,KAChB,oBAAC,MAAD,EAAM,IAAI,IAAI,cAAc,IAAI,cAAc,aAAe,CAAA;GAErD,CAAA;GAGb,sBACC,oBAAC,MAAM,MAAP;IAAY,WAAU;cACpB,oBAAC,+BAAD;KACO;KACL,SAAS,gBAAgB;KACzB,iBAAiB;IAClB,CAAA;GACS,CAAA;GAEb,IAAI,gBAAgB,CAAC,CAAC,KAAK,SAAS;IACnC,OAAO,oBAAC,mBAAD,EAAuC,KAAO,GAAtB,KAAK,EAAiB;GACvD,CAAC;EACQ;;AAEf"}

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

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { AsyncDataState } from "./DataTable.types.js";
 import { useDataTable } from "./DataTable.context.js";
 import { Table } from "../table/Table.js";

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: string\n      numberOfStickyColumns?: number\n      scrollContainerCls?: string | string[]\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  className,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...rest\n}: DataTableTableProps): React.JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n  const scrollRafIdRef = React.useRef<number | null>(null)\n\n  const scrollTarget = typeof window === 'undefined' ? null : window\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        scrollRafIdRef.current = requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollRafIdRef.current !== null) {\n        cancelAnimationFrame(scrollRafIdRef.current)\n        scrollRafIdRef.current = null\n      }\n      isScrolling.current = false\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...rest}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCls={scrollOptions.scrollContainerCls}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={cn(\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ],\n        className\n      )}\n    >\n      <DataTableHead\n        theme={theme}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        className={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTableBody striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer\n          className={cn(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: string\n      numberOfStickyColumns?: number\n      scrollContainerCls?: string | string[]\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  className,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...rest\n}: DataTableTableProps): React.JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n  const scrollRafIdRef = React.useRef<number | null>(null)\n\n  const scrollTarget = typeof window === 'undefined' ? null : window\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        scrollRafIdRef.current = requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollRafIdRef.current !== null) {\n        cancelAnimationFrame(scrollRafIdRef.current)\n        scrollRafIdRef.current = null\n      }\n      isScrolling.current = false\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...rest}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCls={scrollOptions.scrollContainerCls}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={cn(\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ],\n        className\n      )}\n    >\n      <DataTableHead\n        theme={theme}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        className={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTableBody striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer\n          className={cn(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/components/data-table/drag-and-drop/DragAndDropTable.js

@@ -1,4 +1,4 @@
-import { cn } from "../../../styled.js";
+import { cn } from "../../../utilities/tw-merge/index.js";
 import { AsyncDataState } from "../DataTable.types.js";
 import { useDataTable } from "../DataTable.context.js";
 import { Table } from "../../table/Table.js";

package/dist/components/dialog/DialogHeading.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Heading } from "../heading/Heading.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 var DialogHeading = ({ className, ...rest }) => /* @__PURE__ */ jsx(Heading, {
 	size: "sm",
 	...rest,
-	className: cn("border-b", "border-b-grey-200", "pb-8", "pt-0", "px-8", "mb-8", "-mx-8", "box-content", className)
+	className: cn("border-b", "border-b-grey-200", "pb-8", "pt-0", "px-8", "mb-8", "-mx-8", "box-content", "[&_*]:box-border", className)
 });
 //#endregion
 export { DialogHeading };

package/dist/components/dialog/DialogHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeading.js","names":[],"sources":["../../../src/components/dialog/DialogHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Heading, type HeadingProps } from '../heading/Heading'\n\nexport const DialogHeading = ({ className, ...rest }: HeadingProps) => (\n  <Heading\n    size=\"sm\"\n    {...rest}\n    className={cn(\n      'border-b',\n      'border-b-grey-200',\n      'pb-8',\n      'pt-0',\n      'px-8',\n      'mb-8',\n      '-mx-8',\n      'box-content',\n      className\n    )}\n  />\n)\n"],"mappings":";;;;;AAKA,IAAa,iBAAiB,EAAE,WAAW,GAAG,WAC5C,oBAAC,SAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GACT,YACA,qBACA,QACA,QACA,QACA,QACA,SACA,eACA,SACF;AACD,CAAA"}
+{"version":3,"file":"DialogHeading.js","names":[],"sources":["../../../src/components/dialog/DialogHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Heading, type HeadingProps } from '../heading/Heading'\n\nexport const DialogHeading = ({ className, ...rest }: HeadingProps) => (\n  <Heading\n    size=\"sm\"\n    {...rest}\n    className={cn(\n      'border-b',\n      'border-b-grey-200',\n      'pb-8',\n      'pt-0',\n      'px-8',\n      'mb-8',\n      '-mx-8',\n      // box-content lets the -mx-8/px-8 full-bleed bottom border span the\n      // dialog width. box-sizing isn't inheritable per spec, but apps using the\n      // `*{ box-sizing: inherit }` reset make it cascade — so content-box would\n      // leak onto every descendant and blow out padded/w-full controls placed\n      // in the heading. Re-assert border-box on descendants so it can't. See #889.\n      'box-content',\n      '[&_*]:box-border',\n      className\n    )}\n  />\n)\n"],"mappings":";;;;;AAKA,IAAa,iBAAiB,EAAE,WAAW,GAAG,WAC5C,oBAAC,SAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GACT,YACA,qBACA,QACA,QACA,QACA,QACA,SAMA,eACA,oBACA,SACF;AACD,CAAA"}

package/dist/components/dropdown-menu/DropdownMenuLabel.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Text } from "../text/Text.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/field-wrapper/FieldDescription.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Text } from "../text/Text.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/field-wrapper/FieldWrapper.d.ts

@@ -10,17 +10,24 @@ export type FieldWrapperProps = {
         link?: string;
         label: string;
         onClick?: () => void;
+        reloadDocument?: boolean;
     };
     description?: string;
     required?: boolean;
     hideLabel?: boolean;
     appearance?: LabelProps['appearance'];
+    /**
+     * Gives the visible label an id so a control can reference it via
+     * aria-labelledby. Only needed where htmlFor alone doesn't produce the
+     * accessible name — see SelectMenuField. Left unset, the label renders no id.
+     */
+    labelId?: string;
 };
-export type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {
+export type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId' | 'labelId'> & {
     name: string;
     validation?: ValidationOptions;
 };
-export declare function FieldWrapper({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
+export declare function FieldWrapper({ children, error, fieldId, label, labelId, prompt, description, required, hideLabel, appearance, ...rest }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
 export declare namespace FieldWrapper {
     var displayName: string;
 }

package/dist/components/field-wrapper/FieldWrapper.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Link } from "../link/Link.js";
 import { InlineMessage } from "../inline-message/InlineMessage.js";
 import { Label } from "../label/Label.js";
@@ -6,19 +6,21 @@ import { Description } from "./FieldDescription.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/field-wrapper/FieldWrapper.tsx
-var FieldWrapper = ({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }) => /* @__PURE__ */ jsxs("div", {
+var FieldWrapper = ({ children, error, fieldId, label, labelId, prompt, description, required, hideLabel, appearance, ...rest }) => /* @__PURE__ */ jsxs("div", {
 	...rest,
 	children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: cn("mb-3", "flex", "items-center", "justify-between", hideLabel && "sr-only"),
 			children: [/* @__PURE__ */ jsx(Label, {
 				htmlFor: fieldId,
+				id: labelId,
 				required,
 				appearance,
 				children: label
 			}), prompt && /* @__PURE__ */ jsx(Link, {
 				href: prompt?.link,
 				onClick: prompt?.onClick,
+				reloadDocument: prompt?.reloadDocument,
 				size: "sm",
 				children: prompt.label
 			})]

package/dist/components/field-wrapper/FieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport type { ValidationOptions } from '../form/validation'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { type LabelProps } from '../label/Label'\nimport { Link } from '../link/Link'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  className?: string\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: { link?: string; label: string; onClick?: () => void }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n  appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance,\n  ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => (\n  <div {...rest}>\n    <div\n      className={cn(\n        'mb-3',\n        'flex',\n        'items-center',\n        'justify-between',\n        hideLabel && 'sr-only'\n      )}\n    >\n      <Label htmlFor={fieldId} required={required} appearance={appearance}>\n        {label}\n      </Label>\n      {prompt && (\n        <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n          {prompt.label}\n        </Link>\n      )}\n    </div>\n    {description && <Description className=\"mb-3\">{description}</Description>}\n    {children}\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n  </div>\n)\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"mappings":";;;;;;;;AA2BA,IAAa,gBAAgB,EAC3B,UACA,OACA,SACA,OACA,QACA,aACA,UACA,WACA,YACA,GAAG,WAEH,qBAAC,OAAD;CAAK,GAAI;WAAT;EACE,qBAAC,OAAD;GACE,WAAW,GACT,QACA,QACA,gBACA,mBACA,aAAa,SACf;aAPF,CASE,oBAAC,OAAD;IAAO,SAAS;IAAmB;IAAsB;cACtD;GACI,CAAA,GACN,UACC,oBAAC,MAAD;IAAM,MAAM,QAAQ;IAAM,SAAS,QAAQ;IAAS,MAAK;cACtD,OAAO;GACJ,CAAA,CAEL;;EACJ,eAAe,oBAAC,aAAD;GAAa,WAAU;aAAQ;EAAyB,CAAA;EACvE;EACA,SAAS,oBAAC,eAAD;GAAe,WAAU;aAAQ;EAAqB,CAAA;CAC7D;;AAGP,aAAa,cAAc"}
+{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport type { ValidationOptions } from '../form/validation'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { type LabelProps } from '../label/Label'\nimport { Link } from '../link/Link'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  className?: string\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: {\n    link?: string\n    label: string\n    onClick?: () => void\n    // Forwarded to the internal Link's reloadDocument: when true the prompt\n    // renders a plain <a> with the raw link, bypassing any router link injected\n    // via Router.Provider — needed for links pointing at a different app. See #894.\n    reloadDocument?: boolean\n  }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n  appearance?: LabelProps['appearance']\n  /**\n   * Gives the visible label an id so a control can reference it via\n   * aria-labelledby. Only needed where htmlFor alone doesn't produce the\n   * accessible name — see SelectMenuField. Left unset, the label renders no id.\n   */\n  labelId?: string\n}\n\nexport type FieldElementWrapperProps = Omit<\n  FieldWrapperProps,\n  'fieldId' | 'labelId'\n> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  children,\n  error,\n  fieldId,\n  label,\n  labelId,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance,\n  ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => (\n  <div {...rest}>\n    <div\n      className={cn(\n        'mb-3',\n        'flex',\n        'items-center',\n        'justify-between',\n        hideLabel && 'sr-only'\n      )}\n    >\n      <Label\n        htmlFor={fieldId}\n        id={labelId}\n        required={required}\n        appearance={appearance}\n      >\n        {label}\n      </Label>\n      {prompt && (\n        <Link\n          href={prompt?.link}\n          onClick={prompt?.onClick}\n          reloadDocument={prompt?.reloadDocument}\n          size=\"sm\"\n        >\n          {prompt.label}\n        </Link>\n      )}\n    </div>\n    {description && <Description className=\"mb-3\">{description}</Description>}\n    {children}\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n  </div>\n)\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"mappings":";;;;;;;;AA4CA,IAAa,gBAAgB,EAC3B,UACA,OACA,SACA,OACA,SACA,QACA,aACA,UACA,WACA,YACA,GAAG,WAEH,qBAAC,OAAD;CAAK,GAAI;WAAT;EACE,qBAAC,OAAD;GACE,WAAW,GACT,QACA,QACA,gBACA,mBACA,aAAa,SACf;aAPF,CASE,oBAAC,OAAD;IACE,SAAS;IACT,IAAI;IACM;IACE;cAEX;GACI,CAAA,GACN,UACC,oBAAC,MAAD;IACE,MAAM,QAAQ;IACd,SAAS,QAAQ;IACjB,gBAAgB,QAAQ;IACxB,MAAK;cAEJ,OAAO;GACJ,CAAA,CAEL;;EACJ,eAAe,oBAAC,aAAD;GAAa,WAAU;aAAQ;EAAyB,CAAA;EACvE;EACA,SAAS,oBAAC,eAAD;GAAe,WAAU;aAAQ;EAAqB,CAAA;CAC7D;;AAGP,aAAa,cAAc"}

package/dist/components/field-wrapper/InlineFieldWrapper.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Checkbox } from "../checkbox/Checkbox.js";
 import { InlineMessage } from "../inline-message/InlineMessage.js";
 import { Label } from "../label/Label.js";

package/dist/components/file-input/FileInput.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Icon } from "../icon/Icon.js";
 import { Button } from "../button/Button.js";
 import "react";

package/dist/components/image/ImageCredit.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { Link } from "../link/Link.js";

package/dist/components/loader/Loader.js

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/loader/Loader.tsx

package/dist/components/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","names":[],"sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\n\nconst Dot = styled('div', {\n  base: [\n    'animate-pulse',\n    'bg-current',\n    'rounded-full',\n    'animation-duration-900',\n    'nth-3:animation-delay-300',\n    'nth-4:animation-delay-600'\n  ],\n  variants: {\n    size: {\n      sm: ['size-1', 'mx-0.5'],\n      md: ['size-1.5', 'mx-0.5'],\n      lg: ['size-2', 'mx-[3px]']\n    }\n  }\n})\n\ntype LoaderProps = React.ComponentProps<'div'> & {\n  message?: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport const Loader = ({\n  className,\n  message = 'Loading',\n  size = 'md',\n  ...rest\n}: LoaderProps) => (\n  <div\n    className={cn('flex', 'justify-center', className)}\n    role=\"alert\"\n    {...rest}\n  >\n    <span className=\"sr-only\">{message}</span>\n    <Dot size={size} />\n    <Dot size={size} />\n    <Dot size={size} />\n  </div>\n)\n"],"mappings":";;;;AAIA,IAAM,MAAM,OAAO,OAAO;CACxB,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU,QAAQ;EACvB,IAAI,CAAC,YAAY,QAAQ;EACzB,IAAI,CAAC,UAAU,UAAU;CAC3B,EACF;AACF,CAAC;AAOD,IAAa,UAAU,EACrB,WACA,UAAU,WACV,OAAO,MACP,GAAG,WAEH,qBAAC,OAAD;CACE,WAAW,GAAG,QAAQ,kBAAkB,SAAS;CACjD,MAAK;CACL,GAAI;WAHN;EAKE,oBAAC,QAAD;GAAM,WAAU;aAAW;EAAc,CAAA;EACzC,oBAAC,KAAD,EAAW,KAAO,CAAA;EAClB,oBAAC,KAAD,EAAW,KAAO,CAAA;EAClB,oBAAC,KAAD,EAAW,KAAO,CAAA;CACf"}
+{"version":3,"file":"Loader.js","names":[],"sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\n\nconst Dot = styled('div', {\n  base: [\n    'animate-pulse',\n    'bg-current',\n    'rounded-full',\n    'animation-duration-900',\n    'nth-3:animation-delay-300',\n    'nth-4:animation-delay-600'\n  ],\n  variants: {\n    size: {\n      sm: ['size-1', 'mx-0.5'],\n      md: ['size-1.5', 'mx-0.5'],\n      lg: ['size-2', 'mx-[3px]']\n    }\n  }\n})\n\ntype LoaderProps = React.ComponentProps<'div'> & {\n  message?: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport const Loader = ({\n  className,\n  message = 'Loading',\n  size = 'md',\n  ...rest\n}: LoaderProps) => (\n  <div\n    className={cn('flex', 'justify-center', className)}\n    role=\"alert\"\n    {...rest}\n  >\n    <span className=\"sr-only\">{message}</span>\n    <Dot size={size} />\n    <Dot size={size} />\n    <Dot size={size} />\n  </div>\n)\n"],"mappings":";;;;;AAIA,IAAM,MAAM,OAAO,OAAO;CACxB,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU,QAAQ;EACvB,IAAI,CAAC,YAAY,QAAQ;EACzB,IAAI,CAAC,UAAU,UAAU;CAC3B,EACF;AACF,CAAC;AAOD,IAAa,UAAU,EACrB,WACA,UAAU,WACV,OAAO,MACP,GAAG,WAEH,qBAAC,OAAD;CACE,WAAW,GAAG,QAAQ,kBAAkB,SAAS;CACjD,MAAK;CACL,GAAI;WAHN;EAKE,oBAAC,QAAD;GAAM,WAAU;aAAW;EAAc,CAAA;EACzC,oBAAC,KAAD,EAAW,KAAO,CAAA;EAClB,oBAAC,KAAD,EAAW,KAAO,CAAA;EAClB,oBAAC,KAAD,EAAW,KAAO,CAAA;CACf"}

package/dist/components/markdown-content/components/MarkdownList.js

@@ -1,4 +1,4 @@
-import { cn } from "../../../styled.js";
+import { cn } from "../../../utilities/tw-merge/index.js";
 import { List } from "../../list/List.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/markdown-content/components/MarkdownThematicBreak.js

@@ -1,4 +1,4 @@
-import { cn } from "../../../styled.js";
+import { cn } from "../../../utilities/tw-merge/index.js";
 import { Divider } from "../../divider/Divider.js";
 import "react";
 import { jsx } from "react/jsx-runtime";