@atom-learning/components 9.0.0-beta.4 → 9.0.0

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

@@ -14,10 +14,17 @@ export declare const BannerSlim: {
         (props: React.ComponentPropsWithoutRef<typeof import("../..").Image>): React.JSX.Element;
         displayName: string;
     };
-    Button: {
-        ({ className, ...rest }: React.ComponentProps<typeof import("../..").Button>): React.JSX.Element;
-        displayName: string;
-    };
+    Button: import("../../..").PolymorphicComponent<"button", Omit<{
+        theme?: ("danger" | "neutral" | "primary" | "secondary" | "success" | "warning" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "secondary" | "success" | "warning">>) | undefined;
+        appearance?: ("outline" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "solid">>) | undefined;
+        size?: ("lg" | "md" | "sm" | "xl" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xl">>) | undefined;
+        isLoading?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        fullWidth?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    }, "children" | "isLoading" | keyof import("../../..").NavigatorActions> & {
+        children: React.ReactNode;
+        href?: string;
+        isLoading?: boolean;
+    } & import("../../..").NavigatorActions>;
     Dismiss: {
         ({ label, ...rest }: {
             key?: React.Key | null | undefined;

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

@@ -1,6 +1,5 @@
-import * as React from 'react';
+import { type PolymorphicComponent } from '../../../styled';
 import { Button } from '../../button/Button';
-export declare function BannerSlimButton({ className, ...rest }: React.ComponentProps<typeof Button>): React.JSX.Element;
-export declare namespace BannerSlimButton {
-    var displayName: string;
-}
+type ButtonOwnProps = typeof Button extends PolymorphicComponent<infer _Element, infer OwnProps> ? OwnProps : never;
+export declare const BannerSlimButton: PolymorphicComponent<'button', ButtonOwnProps>;
+export {};

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

@@ -5,7 +5,7 @@ import { useBannerContext } from "../Banner.context.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-slim/BannerSlimButton.tsx
-var BannerSlimButton = ({ className, ...rest }) => {
+var BannerSlimButton = (({ className, ...rest }) => {
 	const { emphasis, size } = useBannerContext();
 	return /* @__PURE__ */ jsx(Button, {
 		size: "md",
@@ -14,7 +14,7 @@ var BannerSlimButton = ({ className, ...rest }) => {
 		...rest,
 		className: cn("ml-auto", className)
 	});
-};
+});
 BannerSlimButton.displayName = "BannerSlimButton";
 //#endregion
 export { BannerSlimButton };

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

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimButton.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../../styled'\nimport { overrideStyledVariantValue } from '../../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Button } from '../../button/Button'\nimport { useBannerContext } from '../Banner.context'\n\nexport const BannerSlimButton = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Button>) => {\n  const { emphasis, size } = useBannerContext()\n\n  const fullWidth = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => s === 'sm'),\n    [size]\n  )\n\n  return (\n    <Button\n      size=\"md\"\n      fullWidth={fullWidth}\n      theme={emphasis === 'bold' ? 'neutral' : 'primary'}\n      {...rest}\n      className={cn('ml-auto', className)}\n    />\n  )\n}\n\nBannerSlimButton.displayName = 'BannerSlimButton'\n"],"mappings":";;;;;;;AAOA,IAAa,oBAAoB,EAC/B,WACA,GAAG,WACsC;CACzC,MAAM,EAAE,UAAU,SAAS,iBAAiB;CAO5C,OACE,oBAAC,QAAD;EACE,MAAK;EACM,WARG,QAAM,cAChB,2BAA2B,OAAO,MAAM,MAAM,IAAI,GACxD,CAAC,IAAI,CAMQ;EACX,OAAO,aAAa,SAAS,YAAY;EACzC,GAAI;EACJ,WAAW,GAAG,WAAW,SAAS;CACnC,CAAA;AAEL;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"BannerSlimButton.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, cn } from '../../../styled'\nimport { overrideStyledVariantValue } from '../../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Button } from '../../button/Button'\nimport { useBannerContext } from '../Banner.context'\n\n// Re-expose Button's own props so BannerSlim.Button stays polymorphic (keeps\n// `as`, e.g. `<BannerSlim.Button as=\"a\" href>`). Typing with\n// React.ComponentProps<typeof Button> alone would collapse to the default\n// element and drop `as` (as?: never).\ntype ButtonOwnProps =\n  typeof Button extends PolymorphicComponent<infer _Element, infer OwnProps>\n    ? OwnProps\n    : never\n\nexport const BannerSlimButton = (({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Button>) => {\n  const { emphasis, size } = useBannerContext()\n\n  const fullWidth = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => s === 'sm'),\n    [size]\n  )\n\n  return (\n    <Button\n      size=\"md\"\n      fullWidth={fullWidth}\n      theme={emphasis === 'bold' ? 'neutral' : 'primary'}\n      {...rest}\n      className={cn('ml-auto', className)}\n    />\n  )\n}) as PolymorphicComponent<'button', ButtonOwnProps>\n\nBannerSlimButton.displayName = 'BannerSlimButton'\n"],"mappings":";;;;;;;AAgBA,IAAa,qBAAqB,EAChC,WACA,GAAG,WACsC;CACzC,MAAM,EAAE,UAAU,SAAS,iBAAiB;CAO5C,OACE,oBAAC,QAAD;EACE,MAAK;EACM,WARG,QAAM,cAChB,2BAA2B,OAAO,MAAM,MAAM,IAAI,GACxD,CAAC,IAAI,CAMQ;EACX,OAAO,aAAa,SAAS,YAAY;EACzC,GAAI;EACJ,WAAW,GAAG,WAAW,SAAS;CACnC,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

package/dist/components/button/Button.js

@@ -117,7 +117,11 @@ var StyledButton = styled("button", {
 				"[&_svg]:size-[22px]"
 			]
 		},
-		isLoading: { true: ["cursor-not-allowed opacity-60 pointer-events-none"] },
+		isLoading: { true: [
+			"cursor-not-allowed",
+			"opacity-60",
+			"pointer-events-none"
+		] },
 		fullWidth: {
 			true: ["w-full"],
 			false: ["w-max"]

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 { NavigatorActions } from '../../types/navigatorActions.types'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Loader } from '../loader/Loader'\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} & NavigatorActions\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  ...rest\n}: ButtonProps) => (\n  <StyledButton\n    as={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)) 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,CAAC,mDAAmD,EAC5D;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;AA0BJ,IAAa,WAAW,EACtB,KACA,UACA,IACA,MACA,YAAY,OACZ,SACA,UACA,GAAG,WAEH,oBAAC,cAAD;CACE,IAAI,OAAO,OAAO,MAAM,KAAA;CACxB,GAAK,CAAC,YAAY,CAAC,aAAa;EAAE;EAAM;CAAQ;CACrC;CACX,MAAM,CAAC,OAAO,WAAW,KAAA;CACf;CACV,GAAI;CACJ,GAAI,uBAAuB,IAAI;CAC1B;WAEJ,YACC,oBAAC,YAAD;EAAY,MAAM,KAAK;EAAO;CAAqB,CAAA,IAEnD;AAEU,CAAA"}
+{"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 { NavigatorActions } from '../../types/navigatorActions.types'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Loader } from '../loader/Loader'\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} & NavigatorActions\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  ...rest\n}: ButtonProps) => (\n  <StyledButton\n    as={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)) 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;AA0BJ,IAAa,WAAW,EACtB,KACA,UACA,IACA,MACA,YAAY,OACZ,SACA,UACA,GAAG,WAEH,oBAAC,cAAD;CACE,IAAI,OAAO,OAAO,MAAM,KAAA;CACxB,GAAK,CAAC,YAAY,CAAC,aAAa;EAAE;EAAM;CAAQ;CACrC;CACX,MAAM,CAAC,OAAO,WAAW,KAAA;CACf;CACV,GAAI;CACJ,GAAI,uBAAuB,IAAI;CAC1B;WAEJ,YACC,oBAAC,YAAD;EAAY,MAAM,KAAK;EAAO;CAAqB,CAAA,IAEnD;AAEU,CAAA"}

package/dist/components/dialog/DialogContent.js

@@ -39,7 +39,9 @@ var StyledDialogContent = styled(Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-95"
+				"w-95",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			sm: [
 				"rounded-md",
@@ -48,7 +50,9 @@ var StyledDialogContent = styled(Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-120"
+				"w-120",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			md: [
 				"rounded-md",
@@ -57,7 +61,9 @@ var StyledDialogContent = styled(Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-150"
+				"w-150",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			lg: [
 				"rounded-md",
@@ -66,7 +72,9 @@ var StyledDialogContent = styled(Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-200"
+				"w-200",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			xl: [
 				"rounded-md",
@@ -75,7 +83,9 @@ var StyledDialogContent = styled(Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-275"
+				"w-275",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			fullscreen: [
 				"rounded-none",
@@ -84,7 +94,9 @@ var StyledDialogContent = styled(Content, {
 				"max-w-screen",
 				"max-h-screen",
 				"supports-svh:h-svh",
-				"supports-svh:max-h-svh"
+				"supports-svh:max-h-svh",
+				"[&>[data-dialog-close]]:top-safe-offset-4",
+				"[&>[data-dialog-close]]:right-safe-offset-4"
 			]
 		},
 		layout: { panel: [
@@ -109,6 +121,7 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
 			hasTooltip: false,
 			size: "md",
 			theme: "neutral",
+			"data-dialog-close": true,
 			className: "absolute top-4 right-4 size-12",
 			children: /* @__PURE__ */ jsx(Icon, { is: Close })
 		}), React$1.Children.map(children, (child) => React$1.isValidElement(child) && child.type === DialogBackground ? null : child)]

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

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { backdropOverlay } from '../../utilities/style/backdrop-overlay'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n  base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n  Content,\n  {\n    base: [\n      // `transform: translate()` is required for `floating-ui` to\n      // correctly position elements within the Dialog component.\n      // we can't use the translate property directly\n      'transform-[translate(-50%,-50%)]',\n      'bg-white',\n      'shadow-xl',\n      'box-border',\n      'left-1/2',\n      'h-auto',\n      'max-w-[90vw]',\n      'max-h-[90vh]',\n      'overflow-y-auto',\n      'rounded-md',\n      'p-8',\n      'fixed',\n      'top-1/2',\n      'z-1147483646',\n      'focus:outline-none',\n      'motion-safe:data-[state=open]:animate-slide-in-center',\n      'motion-safe:data-[state=closed]:animate-slide-out-center'\n    ],\n    variants: {\n      size: {\n        xs: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-95'\n        ],\n        sm: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-120'\n        ],\n        md: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-150'\n        ],\n        lg: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-200'\n        ],\n        xl: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-275'\n        ],\n        fullscreen: [\n          'rounded-none',\n          'w-screen',\n          'h-screen',\n          'max-w-screen',\n          'max-h-screen',\n          'supports-svh:h-svh',\n          'supports-svh:max-h-svh'\n        ]\n      },\n      layout: {\n        panel: ['flex', 'flex-col', 'p-0']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...rest\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(children, (child) =>\n        React.isValidElement(child) && child.type === DialogBackground\n          ? child\n          : null\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...rest}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            className=\"absolute top-4 right-4 size-12\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(children, (child) =>\n          React.isValidElement(child) && child.type === DialogBackground\n            ? null\n            : child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"mappings":";;;;;;;;;;AAUA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,gBACR,CAAC;AAED,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,QAAQ,EACN,OAAO;GAAC;GAAQ;GAAY;EAAK,EACnC;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAOA,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,WAEH,oBAAC,QAAD,EAAA,UACE,qBAAC,qBAAD;CAAqB,IAAI;WAAzB,CACG,QAAM,SAAS,IAAI,WAAW,UAC7B,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,mBAC1C,QACA,IACN,GACA,qBAAC,qBAAD;EACQ;EACN,cAAW;EACX,uBAAuB,UAAU;GAE/B,IADgB,MAAM,QACT,OAAO,gBAClB,MAAM,eAAe;EAEzB;EACA,GAAI;YATN,CAWG,mBACC,oBAAC,YAAD;GACE,IAAI;GACJ,OAAO;GACP,YAAY;GACZ,MAAK;GACL,OAAM;GACN,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAY,CAAA;EACZ,CAAA,GAEb,QAAM,SAAS,IAAI,WAAW,UAC7B,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,mBAC1C,OACA,KACN,CACmB;GACF;GACf,CAAA"}
+{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { backdropOverlay } from '../../utilities/style/backdrop-overlay'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n  base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n  Content,\n  {\n    base: [\n      // `transform: translate()` is required for `floating-ui` to\n      // correctly position elements within the Dialog component.\n      // we can't use the translate property directly\n      'transform-[translate(-50%,-50%)]',\n      'bg-white',\n      'shadow-xl',\n      'box-border',\n      'left-1/2',\n      'h-auto',\n      'max-w-[90vw]',\n      'max-h-[90vh]',\n      'overflow-y-auto',\n      'rounded-md',\n      'p-8',\n      'fixed',\n      'top-1/2',\n      'z-1147483646',\n      'focus:outline-none',\n      'motion-safe:data-[state=open]:animate-slide-in-center',\n      'motion-safe:data-[state=closed]:animate-slide-out-center'\n    ],\n    variants: {\n      size: {\n        xs: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-95',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        sm: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-120',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        md: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-150',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        lg: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-200',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        xl: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-275',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        fullscreen: [\n          'rounded-none',\n          'w-screen',\n          'h-screen',\n          'max-w-screen',\n          'max-h-screen',\n          'supports-svh:h-svh',\n          'supports-svh:max-h-svh',\n          '[&>[data-dialog-close]]:top-safe-offset-4',\n          '[&>[data-dialog-close]]:right-safe-offset-4'\n        ]\n      },\n      layout: {\n        panel: ['flex', 'flex-col', 'p-0']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...rest\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(children, (child) =>\n        React.isValidElement(child) && child.type === DialogBackground\n          ? child\n          : null\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...rest}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            data-dialog-close\n            className=\"absolute top-4 right-4 size-12\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(children, (child) =>\n          React.isValidElement(child) && child.type === DialogBackground\n            ? null\n            : child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"mappings":";;;;;;;;;;AAUA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,gBACR,CAAC;AAED,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,QAAQ,EACN,OAAO;GAAC;GAAQ;GAAY;EAAK,EACnC;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAOA,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,WAEH,oBAAC,QAAD,EAAA,UACE,qBAAC,qBAAD;CAAqB,IAAI;WAAzB,CACG,QAAM,SAAS,IAAI,WAAW,UAC7B,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,mBAC1C,QACA,IACN,GACA,qBAAC,qBAAD;EACQ;EACN,cAAW;EACX,uBAAuB,UAAU;GAE/B,IADgB,MAAM,QACT,OAAO,gBAClB,MAAM,eAAe;EAEzB;EACA,GAAI;YATN,CAWG,mBACC,oBAAC,YAAD;GACE,IAAI;GACJ,OAAO;GACP,YAAY;GACZ,MAAK;GACL,OAAM;GACN,qBAAA;GACA,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAY,CAAA;EACZ,CAAA,GAEb,QAAM,SAAS,IAAI,WAAW,UAC7B,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,mBAC1C,OACA,KACN,CACmB;GACF;GACf,CAAA"}

package/dist/components/index.d.ts

@@ -10,7 +10,6 @@ export { Avatar } from './avatar/Avatar';
 export { Badge, type BadgeProps } from './badge/Badge';
 export { BannerRegular } from './banner/banner-regular/BannerRegular';
 export { BannerSlim } from './banner/banner-slim/BannerSlim';
-export { Box } from './box/Box';
 export { Button, StyledButton } from './button/Button';
 export { Carousel, useCarousel } from './carousel/Carousel';
 export { Checkbox } from './checkbox/Checkbox';
@@ -37,9 +36,7 @@ export { EmptyState } from './empty-state/EmptyState';
 export { FieldWrapper } from './field-wrapper/FieldWrapper';
 export { InlineFieldWrapper } from './field-wrapper/InlineFieldWrapper';
 export { FileInput } from './file-input/FileInput';
-export { Flex } from './flex/Flex';
 export { Form } from './form/Form';
-export { Grid } from './grid/Grid';
 export { Heading, type HeadingProps } from './heading/Heading';
 export { Icon } from './icon/Icon';
 export { Image } from './image/Image';

package/dist/components/index.js

@@ -15,7 +15,6 @@ import { Badge } from "./badge/Badge.js";
 import { Dismissible } from "./dismissible/index.js";
 import { BannerRegular } from "./banner/banner-regular/BannerRegular.js";
 import { BannerSlim } from "./banner/banner-slim/BannerSlim.js";
-import { Box } from "./box/Box.js";
 import { Carousel, useCarousel } from "./carousel/Carousel.js";
 import { Checkbox } from "./checkbox/Checkbox.js";
 import { CheckboxGroup } from "./checkbox-group/CheckboxGroup.js";
@@ -52,9 +51,7 @@ import { Dialog } from "./dialog/Dialog.js";
 import { Drawer } from "./drawer/Drawer.js";
 import { DropdownMenu } from "./dropdown-menu/DropdownMenu.js";
 import { FileInput } from "./file-input/FileInput.js";
-import { Flex } from "./flex/Flex.js";
 import { Form } from "./form/Form.js";
-import { Grid } from "./grid/Grid.js";
 import { InputField } from "./input-field/InputField.js";
 import { List } from "./list/List.js";
 import { MarkdownContent } from "./markdown-content/MarkdownContent.js";
@@ -100,6 +97,6 @@ import { useFileDrop } from "./file-drop/useFileDrop.js";
 //#region src/components/index.ts
 var Alert = { Provider: AlertProvider };
 //#endregion
-export { Accordion, ActionIcon, Alert, AlertDialog, Avatar, Badge, BannerRegular, BannerSlim, Box, Button, Carousel, Checkbox, CheckboxField, CheckboxGroup, CheckboxTree, Chip, ChipDismissibleGroup, ChipGroup, ChipToggleGroup, Combobox, CreatePasswordField, DataTable, DateField, DateInput, Dialog, Dismissible, DismissibleGroup, Divider, Drawer, DropdownMenu, EmptyState, FieldWrapper, FileDrop, FileInput, Flex, Form, Grid, Heading, Icon, Image, InlineFieldWrapper, InlineMessage, Input, InputBackground, InputField, InputText, KeyboardShortcut, Label, Link, List, Loader, MarkdownContent, NavigationMenu, NavigationMenuVertical, NotificationBadge, NumberInput, NumberInputField, Pagination, PasswordField, PasswordInput, Popover, ProgressBar, RadioButton, RadioButtonField, RadioButtonGroup, RadioCard, RadioCardGroup, SearchField, SearchInput, SectionMessage, SegmentedControl, Select, SelectField, SelectMenu, SelectMenuField, SideBar, skeleton_loader_exports as Skeleton, Slider, SliderField, sortable_exports as Sortable, Spacer, Stepper, StyledButton, StyledLink, Switch, Table, Tabs, Text, Textarea, TextareaField, Tile, TileInteractive, TileToggleGroup, Toast, ToggleGroup, Tooltip, TopBar, Tree, Video, toast, useAlert, useCarousel, useDataTable, useFileDrop, useSidebarState };
+export { Accordion, ActionIcon, Alert, AlertDialog, Avatar, Badge, BannerRegular, BannerSlim, Button, Carousel, Checkbox, CheckboxField, CheckboxGroup, CheckboxTree, Chip, ChipDismissibleGroup, ChipGroup, ChipToggleGroup, Combobox, CreatePasswordField, DataTable, DateField, DateInput, Dialog, Dismissible, DismissibleGroup, Divider, Drawer, DropdownMenu, EmptyState, FieldWrapper, FileDrop, FileInput, Form, Heading, Icon, Image, InlineFieldWrapper, InlineMessage, Input, InputBackground, InputField, InputText, KeyboardShortcut, Label, Link, List, Loader, MarkdownContent, NavigationMenu, NavigationMenuVertical, NotificationBadge, NumberInput, NumberInputField, Pagination, PasswordField, PasswordInput, Popover, ProgressBar, RadioButton, RadioButtonField, RadioButtonGroup, RadioCard, RadioCardGroup, SearchField, SearchInput, SectionMessage, SegmentedControl, Select, SelectField, SelectMenu, SelectMenuField, SideBar, skeleton_loader_exports as Skeleton, Slider, SliderField, sortable_exports as Sortable, Spacer, Stepper, StyledButton, StyledLink, Switch, Table, Tabs, Text, Textarea, TextareaField, Tile, TileInteractive, TileToggleGroup, Toast, ToggleGroup, Tooltip, TopBar, Tree, Video, toast, useAlert, useCarousel, useDataTable, useFileDrop, useSidebarState };
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["import { AlertProvider } from './alert-dialog/AlertDialog.context'\n\nexport type { ValidationOptions } from './form/validation'\n\nexport { Accordion } from './accordion/Accordion'\nexport { ActionIcon } from './action-icon/ActionIcon'\nexport { AlertDialog } from './alert-dialog/AlertDialog'\nexport { useAlert } from './alert-dialog/AlertDialog.context'\n\n// The alert system's provider lives under the `Alert` name; the alert UI\n// itself is imperative (`useAlert`), so there is no root component to render.\nexport const Alert = { Provider: AlertProvider }\nexport { Avatar } from './avatar/Avatar'\nexport { Badge, type BadgeProps } from './badge/Badge'\nexport { BannerRegular } from './banner/banner-regular/BannerRegular'\nexport { BannerSlim } from './banner/banner-slim/BannerSlim'\nexport { Box } from './box/Box'\nexport { Button, StyledButton } from './button/Button'\nexport { Carousel, useCarousel } from './carousel/Carousel'\nexport { Checkbox } from './checkbox/Checkbox'\nexport { CheckboxGroup } from './checkbox-group/CheckboxGroup'\nexport { CheckboxTree } from './checkbox-tree/CheckboxTree'\nexport { CheckboxField } from './checkbox-field/CheckboxField'\nexport { Chip } from './chip/Chip'\nexport { ChipGroup } from './chip/ChipGroup'\nexport { ChipDismissibleGroup } from './chip-dismissible-group'\nexport { ChipToggleGroup } from './chip-toggle-group'\nexport { Combobox } from './combobox/Combobox'\nexport { CreatePasswordField } from './create-password-field/CreatePasswordField'\nexport { DataTable } from './data-table/DataTable'\nexport { useDataTable } from './data-table/DataTable.context'\nexport { DateField } from './date-field/DateField'\nexport { DateInput } from './date-input/DateInput'\nexport { Dialog } from './dialog/Dialog'\nexport { Dismissible } from './dismissible'\nexport { DismissibleGroup } from './dismissible-group'\nexport { Divider } from './divider/Divider'\nexport { Drawer } from './drawer/Drawer'\nexport { DropdownMenu } from './dropdown-menu/DropdownMenu'\nexport { EmptyState } from './empty-state/EmptyState'\nexport { FieldWrapper } from './field-wrapper/FieldWrapper'\nexport { InlineFieldWrapper } from './field-wrapper/InlineFieldWrapper'\nexport { FileInput } from './file-input/FileInput'\nexport { Flex } from './flex/Flex'\nexport { Form } from './form/Form'\nexport { Grid } from './grid/Grid'\nexport { Heading, type HeadingProps } from './heading/Heading'\nexport { Icon } from './icon/Icon'\nexport { Image } from './image/Image'\n// Exported so consumers can name the type of `Image.Credit` — without it,\n// `styled(Image)` (and other inferences over `typeof Image`) can't be named\n// under `declaration: true` (TS2883).\nexport type { ImageCreditProps } from './image/ImageCredit'\nexport { InlineMessage } from './inline-message/InlineMessage'\nexport { Input, InputBackground, InputText } from './input/Input'\nexport { InputField } from './input-field/InputField'\nexport { Label } from './label/Label'\nexport { Link, StyledLink } from './link/Link'\nexport { List } from './list/List'\nexport { Loader } from './loader/Loader'\nexport { MarkdownContent } from './markdown-content/MarkdownContent'\nexport { NavigationMenu } from './navigation/NavigationMenu'\nexport { NavigationMenuVertical } from './navigation-menu-vertical/NavigationMenuVertical'\nexport { NotificationBadge } from './notification-badge/NotificationBadge'\nexport { NumberInput } from './number-input/NumberInput'\nexport { NumberInputField } from './number-input-field/NumberInputField'\nexport { Pagination } from './pagination/Pagination'\nexport { PasswordField } from './password-field/PasswordField'\nexport { PasswordInput } from './password-input/PasswordInput'\nexport { Popover } from './popover/Popover'\nexport { ProgressBar } from './progress-bar/ProgressBar'\nexport { RadioButton } from './radio-button/RadioButton'\nexport { RadioButtonGroup } from './radio-button/RadioButtonGroup'\nexport { RadioButtonField } from './radio-button-field/RadioButtonField'\nexport { RadioCard } from './radio-card/RadioCard'\nexport { RadioCardGroup } from './radio-card/RadioCardGroup'\nexport { SearchField } from './search-field/SearchField'\nexport { SearchInput } from './search-input/SearchInput'\nexport { SectionMessage } from './section-message/SectionMessage'\nexport { Select } from './select/Select'\nexport { SelectField } from './select-field/SelectField'\nexport { SelectMenu } from './select-menu/SelectMenu'\nexport { SelectMenuField } from './select-menu-field/SelectMenuField'\nexport { SideBar } from './side-bar/SideBar'\nexport { useSidebarState } from './side-bar/SideBar.context'\nexport { Slider } from './slider/Slider'\nexport { SliderField } from './slider-field/SliderField'\nexport * as Sortable from './sortable'\nexport * as Skeleton from './skeleton-loader'\nexport { Spacer } from './spacer/Spacer'\nexport { Stepper } from './stepper/Stepper'\n// Exported so consumers can name the compound's member types — without these,\n// inferences over `typeof Stepper` (e.g. `styled(Stepper)`) can't be named\n// under `declaration: true` (TS2883).\nexport type {\n  StepperProps,\n  StepperStepsProps,\n  StepperNavigateProps\n} from './stepper/types'\nexport { Switch } from './switch/Switch'\nexport { Table } from './table/Table'\nexport { Tabs } from './tabs/Tabs'\nexport { Text } from './text/Text'\nexport { Textarea } from './textarea/Textarea'\nexport { TextareaField } from './textarea-field/TextareaField'\nexport { Tile } from './tile/Tile'\nexport { TileInteractive } from './tile-interactive/TileInteractive'\nexport { TileToggleGroup } from './tile-toggle-group'\nexport { Toast, toast } from './toast'\n// Exported so consumers can name `Toast.Close`'s props — without it, inferences\n// over `typeof Toast` (e.g. `styled(Toast)`) can't be named under\n// `declaration: true` (TS2883).\nexport type { ToastCloseButtonProps } from './toast/ToastCloseButton'\nexport { ToggleGroup } from './toggle-group'\nexport { Tooltip } from './tooltip/Tooltip'\nexport { TopBar } from './top-bar/TopBar'\nexport { Tree } from './tree/Tree'\nexport { Video } from './video/Video'\nexport { KeyboardShortcut } from './keyboard-shortcut'\nexport { SegmentedControl } from './segmented-control/SegmentedControl'\nexport { FileDrop } from './file-drop/FileDrop'\nexport { useFileDrop } from './file-drop/useFileDrop'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAa,QAAQ,EAAE,UAAU,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["import { AlertProvider } from './alert-dialog/AlertDialog.context'\n\nexport type { ValidationOptions } from './form/validation'\n\nexport { Accordion } from './accordion/Accordion'\nexport { ActionIcon } from './action-icon/ActionIcon'\nexport { AlertDialog } from './alert-dialog/AlertDialog'\nexport { useAlert } from './alert-dialog/AlertDialog.context'\n\n// The alert system's provider lives under the `Alert` name; the alert UI\n// itself is imperative (`useAlert`), so there is no root component to render.\nexport const Alert = { Provider: AlertProvider }\nexport { Avatar } from './avatar/Avatar'\nexport { Badge, type BadgeProps } from './badge/Badge'\nexport { BannerRegular } from './banner/banner-regular/BannerRegular'\nexport { BannerSlim } from './banner/banner-slim/BannerSlim'\nexport { Button, StyledButton } from './button/Button'\nexport { Carousel, useCarousel } from './carousel/Carousel'\nexport { Checkbox } from './checkbox/Checkbox'\nexport { CheckboxGroup } from './checkbox-group/CheckboxGroup'\nexport { CheckboxTree } from './checkbox-tree/CheckboxTree'\nexport { CheckboxField } from './checkbox-field/CheckboxField'\nexport { Chip } from './chip/Chip'\nexport { ChipGroup } from './chip/ChipGroup'\nexport { ChipDismissibleGroup } from './chip-dismissible-group'\nexport { ChipToggleGroup } from './chip-toggle-group'\nexport { Combobox } from './combobox/Combobox'\nexport { CreatePasswordField } from './create-password-field/CreatePasswordField'\nexport { DataTable } from './data-table/DataTable'\nexport { useDataTable } from './data-table/DataTable.context'\nexport { DateField } from './date-field/DateField'\nexport { DateInput } from './date-input/DateInput'\nexport { Dialog } from './dialog/Dialog'\nexport { Dismissible } from './dismissible'\nexport { DismissibleGroup } from './dismissible-group'\nexport { Divider } from './divider/Divider'\nexport { Drawer } from './drawer/Drawer'\nexport { DropdownMenu } from './dropdown-menu/DropdownMenu'\nexport { EmptyState } from './empty-state/EmptyState'\nexport { FieldWrapper } from './field-wrapper/FieldWrapper'\nexport { InlineFieldWrapper } from './field-wrapper/InlineFieldWrapper'\nexport { FileInput } from './file-input/FileInput'\nexport { Form } from './form/Form'\nexport { Heading, type HeadingProps } from './heading/Heading'\nexport { Icon } from './icon/Icon'\nexport { Image } from './image/Image'\n// Exported so consumers can name the type of `Image.Credit` — without it,\n// `styled(Image)` (and other inferences over `typeof Image`) can't be named\n// under `declaration: true` (TS2883).\nexport type { ImageCreditProps } from './image/ImageCredit'\nexport { InlineMessage } from './inline-message/InlineMessage'\nexport { Input, InputBackground, InputText } from './input/Input'\nexport { InputField } from './input-field/InputField'\nexport { Label } from './label/Label'\nexport { Link, StyledLink } from './link/Link'\nexport { List } from './list/List'\nexport { Loader } from './loader/Loader'\nexport { MarkdownContent } from './markdown-content/MarkdownContent'\nexport { NavigationMenu } from './navigation/NavigationMenu'\nexport { NavigationMenuVertical } from './navigation-menu-vertical/NavigationMenuVertical'\nexport { NotificationBadge } from './notification-badge/NotificationBadge'\nexport { NumberInput } from './number-input/NumberInput'\nexport { NumberInputField } from './number-input-field/NumberInputField'\nexport { Pagination } from './pagination/Pagination'\nexport { PasswordField } from './password-field/PasswordField'\nexport { PasswordInput } from './password-input/PasswordInput'\nexport { Popover } from './popover/Popover'\nexport { ProgressBar } from './progress-bar/ProgressBar'\nexport { RadioButton } from './radio-button/RadioButton'\nexport { RadioButtonGroup } from './radio-button/RadioButtonGroup'\nexport { RadioButtonField } from './radio-button-field/RadioButtonField'\nexport { RadioCard } from './radio-card/RadioCard'\nexport { RadioCardGroup } from './radio-card/RadioCardGroup'\nexport { SearchField } from './search-field/SearchField'\nexport { SearchInput } from './search-input/SearchInput'\nexport { SectionMessage } from './section-message/SectionMessage'\nexport { Select } from './select/Select'\nexport { SelectField } from './select-field/SelectField'\nexport { SelectMenu } from './select-menu/SelectMenu'\nexport { SelectMenuField } from './select-menu-field/SelectMenuField'\nexport { SideBar } from './side-bar/SideBar'\nexport { useSidebarState } from './side-bar/SideBar.context'\nexport { Slider } from './slider/Slider'\nexport { SliderField } from './slider-field/SliderField'\nexport * as Sortable from './sortable'\nexport * as Skeleton from './skeleton-loader'\nexport { Spacer } from './spacer/Spacer'\nexport { Stepper } from './stepper/Stepper'\n// Exported so consumers can name the compound's member types — without these,\n// inferences over `typeof Stepper` (e.g. `styled(Stepper)`) can't be named\n// under `declaration: true` (TS2883).\nexport type {\n  StepperProps,\n  StepperStepsProps,\n  StepperNavigateProps\n} from './stepper/types'\nexport { Switch } from './switch/Switch'\nexport { Table } from './table/Table'\nexport { Tabs } from './tabs/Tabs'\nexport { Text } from './text/Text'\nexport { Textarea } from './textarea/Textarea'\nexport { TextareaField } from './textarea-field/TextareaField'\nexport { Tile } from './tile/Tile'\nexport { TileInteractive } from './tile-interactive/TileInteractive'\nexport { TileToggleGroup } from './tile-toggle-group'\nexport { Toast, toast } from './toast'\n// Exported so consumers can name `Toast.Close`'s props — without it, inferences\n// over `typeof Toast` (e.g. `styled(Toast)`) can't be named under\n// `declaration: true` (TS2883).\nexport type { ToastCloseButtonProps } from './toast/ToastCloseButton'\nexport { ToggleGroup } from './toggle-group'\nexport { Tooltip } from './tooltip/Tooltip'\nexport { TopBar } from './top-bar/TopBar'\nexport { Tree } from './tree/Tree'\nexport { Video } from './video/Video'\nexport { KeyboardShortcut } from './keyboard-shortcut'\nexport { SegmentedControl } from './segmented-control/SegmentedControl'\nexport { FileDrop } from './file-drop/FileDrop'\nexport { useFileDrop } from './file-drop/useFileDrop'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAa,QAAQ,EAAE,UAAU,cAAc"}

package/dist/components/navigation/NavigationMenu.js

@@ -36,7 +36,7 @@ var NavigationMenuComponent = ({ children, className, ...rest }) => {
 	const [activeItem, setActiveItem] = React$1.useState();
 	const [listWidth, setListWidth] = React$1.useState(0);
 	const listRef = React$1.useRef(null);
-	React$1.useLayoutEffect(() => {
+	React$1.useEffect(() => {
 		if (listRef.current) setListWidth(listRef.current.offsetWidth);
 	}, [React$1.Children.toArray(children).length]);
 	React$1.useEffect(() => {

package/dist/components/navigation/NavigationMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenu.context'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const [listWidth, setListWidth] = React.useState(0)\n  const listRef = React.useRef<HTMLUListElement>(null)\n\n  React.useLayoutEffect(() => {\n    if (listRef.current) {\n      setListWidth(listRef.current.offsetWidth)\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(() => setOffset(null), 200)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = (trigger: HTMLButtonElement, itemValue: string) => {\n    if (trigger && listWidth && activeItem === itemValue) {\n      const listCenter = listWidth / 2\n\n      const triggerOffsetRight =\n        listWidth -\n        trigger.offsetLeft -\n        trigger.offsetWidth +\n        trigger.offsetWidth / 2\n\n      setOffset(Math.round(listCenter - triggerOffsetRight))\n    }\n\n    return trigger\n  }\n\n  return (\n    <NavigationMenuContext.Provider value={{ onNodeUpdate }}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...rest}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={cn([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext.Provider>\n  )\n}\n\nexport const NavigationMenu = /* @__PURE__ */ Object.assign(\n  NavigationMenuComponent,\n  {\n    Link: NavigationMenuLink,\n    Dropdown: NavigationMenuDropdown,\n    DropdownContent: NavigationMenuDropdownContent,\n    DropdownItem: NavigationMenuDropdownItem,\n    DropdownItemTitle: NavigationMenuDropdownItemTitle,\n    DropdownTrigger: NavigationMenuDropdownTrigger\n  }\n)\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;AAAU,EAC7C,CAAC;AAED,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;AAAW,EACvE,CAAC;AAED,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;AAAgB,EAC7E,CAAC;AAED,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,WAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAoC;CACtE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAA6B;CACvE,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAS,CAAC;CAClD,MAAM,UAAU,QAAM,OAAyB,IAAI;CAEnD,QAAM,sBAAsB;EAC1B,IAAI,QAAQ,SACV,aAAa,QAAQ,QAAQ,WAAW;CAE5C,GAAG,CAAC,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,CAAC;CAE5C,QAAM,gBAAgB;EACpB,IAAI;EAIJ,IAAI,eAAe,IACjB,QAAQ,iBAAiB,UAAU,IAAI,GAAG,GAAG;EAG/C,aAAa;GACX,IAAI,UAAU,MACZ,aAAa,KAAK;EAEtB;CACF,GAAG,CAAC,UAAU,CAAC;CAGf,MAAM,gBAAgB,SAA4B,cAAsB;EACtE,IAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;GAExB,UAAU,KAAK,MAAM,aAAa,kBAAkB,CAAC;EACvD;EAEA,OAAO;CACT;CAEA,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO,EAAE,aAAa;YACpD,qBAAC,YAAD;GACE,WAAW,GAAG,SAAS;GACvB,OAAO,aAA2B;GAClC,eAAe;GACf,GAAI;aAJN,CAME,oBAAC,YAAD;IAAY,KAAK;IAAU;GAAqB,CAAA,GAChD,oBAAC,kBAAD,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,IAAI;IACjE,WAAW,GAAG;KACZ;KACA;KACA;IACF,CAAC;GACF,CAAA,EACe,CAAA,CACR;;CACkB,CAAA;AAEpC;AAEA,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;AACnB,CACF;AAEA,wBAAwB,cAAc"}
+{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenu.context'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const [listWidth, setListWidth] = React.useState(0)\n  const listRef = React.useRef<HTMLUListElement>(null)\n\n  React.useEffect(() => {\n    if (listRef.current) {\n      setListWidth(listRef.current.offsetWidth)\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(() => setOffset(null), 200)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = (trigger: HTMLButtonElement, itemValue: string) => {\n    if (trigger && listWidth && activeItem === itemValue) {\n      const listCenter = listWidth / 2\n\n      const triggerOffsetRight =\n        listWidth -\n        trigger.offsetLeft -\n        trigger.offsetWidth +\n        trigger.offsetWidth / 2\n\n      setOffset(Math.round(listCenter - triggerOffsetRight))\n    }\n\n    return trigger\n  }\n\n  return (\n    <NavigationMenuContext.Provider value={{ onNodeUpdate }}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...rest}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={cn([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext.Provider>\n  )\n}\n\nexport const NavigationMenu = /* @__PURE__ */ Object.assign(\n  NavigationMenuComponent,\n  {\n    Link: NavigationMenuLink,\n    Dropdown: NavigationMenuDropdown,\n    DropdownContent: NavigationMenuDropdownContent,\n    DropdownItem: NavigationMenuDropdownItem,\n    DropdownItemTitle: NavigationMenuDropdownItemTitle,\n    DropdownTrigger: NavigationMenuDropdownTrigger\n  }\n)\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;AAAU,EAC7C,CAAC;AAED,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;AAAW,EACvE,CAAC;AAED,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;AAAgB,EAC7E,CAAC;AAED,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,WAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAoC;CACtE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAA6B;CACvE,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAS,CAAC;CAClD,MAAM,UAAU,QAAM,OAAyB,IAAI;CAEnD,QAAM,gBAAgB;EACpB,IAAI,QAAQ,SACV,aAAa,QAAQ,QAAQ,WAAW;CAE5C,GAAG,CAAC,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,CAAC;CAE5C,QAAM,gBAAgB;EACpB,IAAI;EAIJ,IAAI,eAAe,IACjB,QAAQ,iBAAiB,UAAU,IAAI,GAAG,GAAG;EAG/C,aAAa;GACX,IAAI,UAAU,MACZ,aAAa,KAAK;EAEtB;CACF,GAAG,CAAC,UAAU,CAAC;CAGf,MAAM,gBAAgB,SAA4B,cAAsB;EACtE,IAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;GAExB,UAAU,KAAK,MAAM,aAAa,kBAAkB,CAAC;EACvD;EAEA,OAAO;CACT;CAEA,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO,EAAE,aAAa;YACpD,qBAAC,YAAD;GACE,WAAW,GAAG,SAAS;GACvB,OAAO,aAA2B;GAClC,eAAe;GACf,GAAI;aAJN,CAME,oBAAC,YAAD;IAAY,KAAK;IAAU;GAAqB,CAAA,GAChD,oBAAC,kBAAD,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,IAAI;IACjE,WAAW,GAAG;KACZ;KACA;KACA;IACF,CAAC;GACF,CAAA,EACe,CAAA,CACR;;CACkB,CAAA;AAEpC;AAEA,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;AACnB,CACF;AAEA,wBAAwB,cAAc"}

package/dist/components/segmented-control/SegmentedControlRoot.js

@@ -16,7 +16,10 @@ var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, v
 	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = React$1.useState(defaultValue);
 	const currentValue = isControlled ? value : internalValue;
-	const handleValueChange = isControlled ? onValueChange : setInternalValue;
+	const handleValueChange = React$1.useCallback((newValue) => {
+		if (!isControlled) setInternalValue(newValue);
+		onValueChange?.(newValue);
+	}, [isControlled, onValueChange]);
 	React$1.useEffect(() => {
 		if (!isControlled && defaultValue) setInternalValue(defaultValue);
 	}, [defaultValue, isControlled]);

package/dist/components/segmented-control/SegmentedControlRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\n\nconst StyledSegmentedControlRoot = styled(\n  Tabs,\n  {\n    base: ['[&>div]:border-none'],\n    variants: {\n      size: {\n        sm: ['w-[unset]!'],\n        md: [],\n        lg: []\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps extends React.ComponentProps<\n  typeof StyledSegmentedControlRoot\n> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  value,\n  onValueChange,\n  ...rest\n}: React.PropsWithChildren<SegmentedControlRootProps>) => {\n  const isControlled = value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? value : internalValue\n  const handleValueChange = isControlled ? onValueChange : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={contextValue}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...rest}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,qBAAqB;CAC5B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC;EACL,IAAI,CAAC;CACP,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAQA,IAAa,wBAAwB,EACnC,MACA,QAAQ,WACR,cACA,UACA,OACA,eACA,GAAG,WACqD;CACxD,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CAErE,MAAM,eAAe,eAAe,QAAQ;CAC5C,MAAM,oBAAoB,eAAe,gBAAgB;CAEzD,QAAM,gBAAgB;EACpB,IAAI,CAAC,gBAAgB,cACnB,iBAAiB,YAAY;CAEjC,GAAG,CAAC,cAAc,YAAY,CAAC;CAE/B,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA,eAAe;EACf,OAAO;CACT,IACA;EAAC;EAAM;EAAO;EAAc;EAAmB;CAAY,CAC7D;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,oBAAC,4BAAD;GACQ;GACN,OAAO;GACP,eAAe;GACf,GAAI;GAEH;EACyB,CAAA;CACI,CAAA;AAEtC"}
+{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\n\nconst StyledSegmentedControlRoot = styled(\n  Tabs,\n  {\n    base: ['[&>div]:border-none'],\n    variants: {\n      size: {\n        sm: ['w-[unset]!'],\n        md: [],\n        lg: []\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps extends React.ComponentProps<\n  typeof StyledSegmentedControlRoot\n> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  value,\n  onValueChange,\n  ...rest\n}: React.PropsWithChildren<SegmentedControlRootProps>) => {\n  const isControlled = value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? value : internalValue\n  // Fire the consumer's `onValueChange` in BOTH modes; only own internal state\n  // when uncontrolled. (Previously `isControlled ? onValueChange :\n  // setInternalValue`, which silently dropped the consumer callback in\n  // uncontrolled mode once `onValueChange` stopped leaking through `...rest`.)\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) setInternalValue(newValue)\n      onValueChange?.(newValue)\n    },\n    [isControlled, onValueChange]\n  )\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={contextValue}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...rest}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,qBAAqB;CAC5B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC;EACL,IAAI,CAAC;CACP,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAQA,IAAa,wBAAwB,EACnC,MACA,QAAQ,WACR,cACA,UACA,OACA,eACA,GAAG,WACqD;CACxD,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CAErE,MAAM,eAAe,eAAe,QAAQ;CAK5C,MAAM,oBAAoB,QAAM,aAC7B,aAAqB;EACpB,IAAI,CAAC,cAAc,iBAAiB,QAAQ;EAC5C,gBAAgB,QAAQ;CAC1B,GACA,CAAC,cAAc,aAAa,CAC9B;CAEA,QAAM,gBAAgB;EACpB,IAAI,CAAC,gBAAgB,cACnB,iBAAiB,YAAY;CAEjC,GAAG,CAAC,cAAc,YAAY,CAAC;CAE/B,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA,eAAe;EACf,OAAO;CACT,IACA;EAAC;EAAM;EAAO;EAAc;EAAmB;CAAY,CAC7D;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,oBAAC,4BAAD;GACQ;GACN,OAAO;GACP,eAAe;GACf,GAAI;GAEH;EACyB,CAAA;CACI,CAAA;AAEtC"}

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

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

package/dist/components/tile/Tile.d.ts

@@ -1,12 +1,13 @@
-import * as React from 'react';
 import { type TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
-export declare const StyledTile: import("../..").PolymorphicComponent<"div", {
+import { type PolymorphicComponent } from '../../styled';
+export declare const StyledTile: PolymorphicComponent<"div", {
     borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 }>;
-type TileProps = React.ComponentProps<typeof StyledTile> & {
+type StyledTileOwnProps = typeof StyledTile extends PolymorphicComponent<infer _Element, infer OwnProps> ? OwnProps : never;
+type TileOwnProps = StyledTileOwnProps & {
     colorScheme?: TcolorScheme;
 };
-export declare const Tile: ({ ref, children, borderRadius, colorScheme, ...rest }: TileProps) => React.JSX.Element;
+export declare const Tile: PolymorphicComponent<'div', TileOwnProps>;
 export {};

package/dist/components/tile/Tile.js

@@ -24,7 +24,7 @@ var StyledTile = styled("div", {
 		diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] }
 	}
 }, { enableResponsiveVariants: true });
-var Tile = ({ ref, children, borderRadius = "lg", colorScheme = {}, ...rest }) => /* @__PURE__ */ jsx(ColorScheme, {
+var Tile = (({ ref, children, borderRadius = "lg", colorScheme = {}, ...rest }) => /* @__PURE__ */ jsx(ColorScheme, {
 	asChild: true,
 	base: "grey1",
 	accent: "primary2",
@@ -36,7 +36,7 @@ var Tile = ({ ref, children, borderRadius = "lg", colorScheme = {}, ...rest }) =
 		...rest,
 		children
 	})
-});
+}));
 //#endregion
 export { StyledTile, Tile };
 

package/dist/components/tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","names":[],"sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  ColorScheme,\n  type TcolorScheme\n} from '../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../styled'\n\nexport const StyledTile = styled(\n  'div',\n  {\n    base: [\n      'box-border',\n      'flex',\n      'flex-col',\n      'relative',\n      'border',\n      'bg-(--base-1)',\n      'text-(--foreground)',\n      'border-transparent'\n    ],\n    variants: {\n      borderRadius: {\n        sm: ['rounded-sm'],\n        md: ['rounded-md'],\n        lg: ['rounded-xl']\n      },\n      border: {\n        true: ['border-(--base-3)']\n      },\n      diffused: {\n        true: [\n          'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n          'supports-color-mix:backdrop-blur-sm'\n        ]\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype TileProps = React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const Tile = ({\n  ref,\n  children,\n  borderRadius = 'lg',\n  colorScheme = {},\n  ...rest\n}: TileProps) => (\n  <ColorScheme\n    asChild\n    base=\"grey1\"\n    accent=\"primary2\"\n    interactive=\"loContrast\"\n    {...colorScheme}\n  >\n    <StyledTile ref={ref} borderRadius={borderRadius} {...rest}>\n      {children}\n    </StyledTile>\n  </ColorScheme>\n)\n"],"mappings":";;;;;AAQA,IAAa,aAAa,OACxB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,cAAc;GACZ,IAAI,CAAC,YAAY;GACjB,IAAI,CAAC,YAAY;GACjB,IAAI,CAAC,YAAY;EACnB;EACA,QAAQ,EACN,MAAM,CAAC,mBAAmB,EAC5B;EACA,UAAU,EACR,MAAM,CACJ,wEACA,qCACF,EACF;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAMA,IAAa,QAAQ,EACnB,KACA,UACA,eAAe,MACf,cAAc,CAAC,GACf,GAAG,WAEH,oBAAC,aAAD;CACE,SAAA;CACA,MAAK;CACL,QAAO;CACP,aAAY;CACZ,GAAI;WAEJ,oBAAC,YAAD;EAAiB;EAAmB;EAAc,GAAI;EACnD;CACS,CAAA;AACD,CAAA"}
+{"version":3,"file":"Tile.js","names":[],"sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  ColorScheme,\n  type TcolorScheme\n} from '../../experiments/color-scheme/ColorScheme'\nimport { type PolymorphicComponent, styled } from '../../styled'\n\nexport const StyledTile = styled(\n  'div',\n  {\n    base: [\n      'box-border',\n      'flex',\n      'flex-col',\n      'relative',\n      'border',\n      'bg-(--base-1)',\n      'text-(--foreground)',\n      'border-transparent'\n    ],\n    variants: {\n      borderRadius: {\n        sm: ['rounded-sm'],\n        md: ['rounded-md'],\n        lg: ['rounded-xl']\n      },\n      border: {\n        true: ['border-(--base-3)']\n      },\n      diffused: {\n        true: [\n          'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n          'supports-color-mix:backdrop-blur-sm'\n        ]\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\n// Re-expose StyledTile's own props so Tile stays polymorphic (keeps `as`, e.g.\n// `<Tile as=\"a\" href>`). Typing with React.ComponentProps<typeof StyledTile>\n// would collapse to the default element and drop `as` (as?: never).\ntype StyledTileOwnProps =\n  typeof StyledTile extends PolymorphicComponent<infer _Element, infer OwnProps>\n    ? OwnProps\n    : never\n\ntype TileOwnProps = StyledTileOwnProps & { colorScheme?: TcolorScheme }\n\nexport const Tile = (({\n  ref,\n  children,\n  borderRadius = 'lg',\n  colorScheme = {},\n  ...rest\n}: React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}) => (\n  <ColorScheme\n    asChild\n    base=\"grey1\"\n    accent=\"primary2\"\n    interactive=\"loContrast\"\n    {...colorScheme}\n  >\n    <StyledTile ref={ref} borderRadius={borderRadius} {...rest}>\n      {children}\n    </StyledTile>\n  </ColorScheme>\n)) as PolymorphicComponent<'div', TileOwnProps>\n"],"mappings":";;;;;AAQA,IAAa,aAAa,OACxB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,cAAc;GACZ,IAAI,CAAC,YAAY;GACjB,IAAI,CAAC,YAAY;GACjB,IAAI,CAAC,YAAY;EACnB;EACA,QAAQ,EACN,MAAM,CAAC,mBAAmB,EAC5B;EACA,UAAU,EACR,MAAM,CACJ,wEACA,qCACF,EACF;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAYA,IAAa,SAAS,EACpB,KACA,UACA,eAAe,MACf,cAAc,CAAC,GACf,GAAG,WAIH,oBAAC,aAAD;CACE,SAAA;CACA,MAAK;CACL,QAAO;CACP,aAAY;CACZ,GAAI;WAEJ,oBAAC,YAAD;EAAiB;EAAmB;EAAc,GAAI;EACnD;CACS,CAAA;AACD,CAAA"}

package/dist/components/tile-interactive/TileInteractive.d.ts

@@ -1,15 +1,19 @@
 import * as React from 'react';
 import type { NavigatorActions } from '../../types/navigatorActions.types';
 import type { Override } from '../../utilities/types';
-declare const StyledTileInteractive: import("../..").PolymorphicComponent<({ ref, children, borderRadius, colorScheme, ...rest }: {
+declare const StyledTileInteractive: import("../..").PolymorphicComponent<import("../..").PolymorphicComponent<"div", {
     borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
-    as?: never;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | "border" | "borderRadius" | "diffused"> & {
     colorScheme?: import("../..").TcolorScheme;
-}) => React.JSX.Element, unknown>;
+}>, {
+    borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
+    border?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+} & {
+    colorScheme?: import("../..").TcolorScheme;
+}>;
 type TileInteractiveProps = Override<React.ComponentProps<typeof StyledTileInteractive> & React.ButtonHTMLAttributes<HTMLButtonElement> & NavigatorActions, {
     as?: React.ElementType;
 }>;

package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts

@@ -1,16 +1,22 @@
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as React from 'react';
 declare const StyledTileToggleGroupItem: import("../..").PolymorphicComponent<({ ref, onClick, href, type, as, ...rest }: Omit<{
+    borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
+    border?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+} & {
+    colorScheme?: import("../..").TcolorScheme;
+} & {
     as?: never;
 } & Omit<{
     borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
-    as?: never;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | "border" | "borderRadius" | "diffused"> & {
     colorScheme?: import("../..").TcolorScheme;
-}, "as"> & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../..").NavigatorActions, "as"> & {
+} & {
+    as?: never;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | "border" | "borderRadius" | "colorScheme" | "diffused">, "as" | "border" | "borderRadius" | "colorScheme" | "diffused"> & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../..").NavigatorActions, "as"> & {
     as?: React.ElementType;
 }) => React.JSX.Element, unknown>;
 type TileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> & React.ComponentProps<typeof StyledTileToggleGroupItem>;

package/dist/components/toast/ToastProvider.js

@@ -11,9 +11,9 @@ import { toast as toast$1, useToaster } from "react-hot-toast";
 var ToastProviderBase = /* @__PURE__ */ styled("div", { base: [
 	"fixed",
 	"z-2147483647",
-	"inset-2",
+	"inset-safe-offset-2",
 	"pointer-events-none",
-	"sm:top-3"
+	"sm:top-safe-offset-3"
 ] });
 var ToastWrapper = /* @__PURE__ */ styled("div", {
 	base: [

package/dist/components/toast/ToastProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '../../styled'\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './Toast.context'\n\nexport { toast } from 'react-hot-toast'\nexport { useToastContext } from './Toast.context'\n\nconst ToastProviderBase = /* @__PURE__ */ styled('div', {\n  base: ['fixed', 'z-2147483647', 'inset-2', 'pointer-events-none', 'sm:top-3']\n})\n\nconst ToastWrapper = /* @__PURE__ */ styled('div', {\n  base: [\n    'absolute',\n    'w-full',\n    'flex',\n    'justify-center',\n    'items-center',\n    'rounded-sm',\n    'box-border',\n    'min-h-12',\n    '[--slide-opacity-out:0]',\n    '[--slide-direction-out-y:-100%]'\n  ],\n  variants: {\n    visible: {\n      true: ['motion-safe:animate-slide-direction-in'],\n      false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n    }\n  }\n})\n\nexport const ToastProvider = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        className={className}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast, {\n            reverseOrder: true,\n            gutter: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.ariaProps.role}\n              aria-live={toast.ariaProps['aria-live']}\n              style={{ '--offset': `${offset}px` }}\n              className=\"top-(--offset)\"\n            >\n              <ToastContext.Provider value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast className=\"w-100\">\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext.Provider>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"mappings":";;;;;;;;;;AAaA,IAAM,oBAAoC,uBAAO,OAAO,EACtD,MAAM;CAAC;CAAS;CAAgB;CAAW;CAAuB;AAAU,EAC9E,CAAC;AAED,IAAM,eAA+B,uBAAO,OAAO;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC,wCAAwC;EAC/C,OAAO,CAAC,aAAa,yCAAyC;CAChE,EACF;AACF,CAAC;AAED,IAAa,iBAAiB,EAC5B,UACA,gBACqD;CACrD,MAAM,EAAE,QAAQ,aAAa,WAAW;CACxC,MAAM,EAAE,YAAY,UAAU,iBAAiB,iBAAiB;CAEhE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,mBAAD;EACE,cAAc;EACd,cAAc;EACH;YAEV,OAAO,KAAK,UAAU;GACrB,MAAM,EAAE,SAAS,aAAa;GAE9B,MAAM,SAAS,gBAAgB,OAAO;IACpC,cAAc;IACd,QAAQ;GACV,CAAC;GAED,MAAM,OAAO,OAA8B;IACzC,IAAI,MAAM,MAAM,WAAW,KAAA,GACzB,aAAa,MAAM,IAAI,GAAG,sBAAsB,CAAC,CAAC,MAAM;GAE5D;GAEA,OACE,oBAAC,cAAD;IAEO;IACL,SAAS,MAAM;IACf,MAAM,MAAM,UAAU;IACtB,aAAW,MAAM,UAAU;IAC3B,OAAO,EAAE,YAAY,GAAG,OAAO,IAAI;IACnC,WAAU;cAEV,oBAAC,aAAa,UAAd;KAAuB,OAAO;eAC3B,OAAO,aAAa,aACnB,SAAS,KAAK,IACZ,QAAM,eAAe,QAAQ,IAC/B,WAEA,qBAAC,OAAD;MAAO,WAAU;gBAAjB;OACG,MAAM,SAAS,WAAW,oBAAC,MAAM,MAAP,EAAY,IAAI,MAAQ,CAAA;OACnD,oBAAC,MAAD,EAAO,SAAe,CAAA;OACtB,oBAAC,QAAD,CAAS,CAAA;OACT,oBAAC,MAAM,OAAP,CAAc,CAAA;MACT;;IAEY,CAAA;GACX,GAtBP,MAAM,EAsBC;EAElB,CAAC;CACgB,CAAA,GAClB,QACD,EAAA,CAAA;AAEN;AAEA,cAAc,cAAc"}
+{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '../../styled'\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './Toast.context'\n\nexport { toast } from 'react-hot-toast'\nexport { useToastContext } from './Toast.context'\n\nconst ToastProviderBase = /* @__PURE__ */ styled('div', {\n  base: [\n    'fixed',\n    'z-2147483647',\n    'inset-safe-offset-2',\n    'pointer-events-none',\n    'sm:top-safe-offset-3'\n  ]\n})\n\nconst ToastWrapper = /* @__PURE__ */ styled('div', {\n  base: [\n    'absolute',\n    'w-full',\n    'flex',\n    'justify-center',\n    'items-center',\n    'rounded-sm',\n    'box-border',\n    'min-h-12',\n    '[--slide-opacity-out:0]',\n    '[--slide-direction-out-y:-100%]'\n  ],\n  variants: {\n    visible: {\n      true: ['motion-safe:animate-slide-direction-in'],\n      false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n    }\n  }\n})\n\nexport const ToastProvider = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        className={className}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast, {\n            reverseOrder: true,\n            gutter: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.ariaProps.role}\n              aria-live={toast.ariaProps['aria-live']}\n              style={{ '--offset': `${offset}px` }}\n              className=\"top-(--offset)\"\n            >\n              <ToastContext.Provider value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast className=\"w-100\">\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext.Provider>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"mappings":";;;;;;;;;;AAaA,IAAM,oBAAoC,uBAAO,OAAO,EACtD,MAAM;CACJ;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,eAA+B,uBAAO,OAAO;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC,wCAAwC;EAC/C,OAAO,CAAC,aAAa,yCAAyC;CAChE,EACF;AACF,CAAC;AAED,IAAa,iBAAiB,EAC5B,UACA,gBACqD;CACrD,MAAM,EAAE,QAAQ,aAAa,WAAW;CACxC,MAAM,EAAE,YAAY,UAAU,iBAAiB,iBAAiB;CAEhE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,mBAAD;EACE,cAAc;EACd,cAAc;EACH;YAEV,OAAO,KAAK,UAAU;GACrB,MAAM,EAAE,SAAS,aAAa;GAE9B,MAAM,SAAS,gBAAgB,OAAO;IACpC,cAAc;IACd,QAAQ;GACV,CAAC;GAED,MAAM,OAAO,OAA8B;IACzC,IAAI,MAAM,MAAM,WAAW,KAAA,GACzB,aAAa,MAAM,IAAI,GAAG,sBAAsB,CAAC,CAAC,MAAM;GAE5D;GAEA,OACE,oBAAC,cAAD;IAEO;IACL,SAAS,MAAM;IACf,MAAM,MAAM,UAAU;IACtB,aAAW,MAAM,UAAU;IAC3B,OAAO,EAAE,YAAY,GAAG,OAAO,IAAI;IACnC,WAAU;cAEV,oBAAC,aAAa,UAAd;KAAuB,OAAO;eAC3B,OAAO,aAAa,aACnB,SAAS,KAAK,IACZ,QAAM,eAAe,QAAQ,IAC/B,WAEA,qBAAC,OAAD;MAAO,WAAU;gBAAjB;OACG,MAAM,SAAS,WAAW,oBAAC,MAAM,MAAP,EAAY,IAAI,MAAQ,CAAA;OACnD,oBAAC,MAAD,EAAO,SAAe,CAAA;OACtB,oBAAC,QAAD,CAAS,CAAA;OACT,oBAAC,MAAM,OAAP,CAAc,CAAA;MACT;;IAEY,CAAA;GACX,GAtBP,MAAM,EAsBC;EAElB,CAAC;CACgB,CAAA,GAClB,QACD,EAAA,CAAA;AAEN;AAEA,cAAc,cAAc"}

package/dist/components/top-bar/TopBar.js

@@ -25,21 +25,21 @@ var StyledRoot = styled("header", {
 	variants: {
 		hasScrolled: { true: ["shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]"] },
 		size: {
-			md: ["h-16"],
-			lg: ["h-24"]
+			md: ["h-safe-offset-top-16", "pt-safe"],
+			lg: ["h-safe-offset-top-24", "pt-safe"]
 		},
 		diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] },
 		appearance: {
 			standard: [
 				"w-screen",
 				"max-w-full",
-				"top-0",
+				"top-safe",
 				"border-b",
 				"border-b-(--border-bottom)"
 			],
 			rounded: [
 				"w-full",
-				"top-2",
+				"top-safe-offset-2",
 				"p-2",
 				"border",
 				"border-white",