@atom-learning/components 6.17.0 → 8.0.0

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

@@ -6,16 +6,16 @@ export declare const BannerSlim: {
     displayName: string;
 } & {
     Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
     }, never> & {
         as?: React.ElementType;
     }>;
     Text: {
-        (props: React.ComponentProps<typeof import("../..").Text>): React.JSX.Element;
+        (props: React.ComponentPropsWithoutRef<typeof import("../..").Text>): React.JSX.Element;
         displayName: string;
     };
     Image: {
-        (props: React.ComponentProps<typeof import("../..").Image>): React.JSX.Element;
+        (props: React.ComponentPropsWithoutRef<typeof import("../..").Image>): React.JSX.Element;
         displayName: string;
     };
     Button: {
@@ -36,7 +36,8 @@ export declare const BannerSlim: {
             slot?: string | undefined | undefined;
             style?: React.CSSProperties | undefined;
             title?: string | undefined | undefined;
-            ref?: React.Ref<HTMLButtonElement> | undefined;
+            ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
+            suppressHydrationWarning?: boolean | undefined | undefined;
             className?: string | undefined | undefined;
             id?: string | undefined | undefined;
             lang?: string | undefined | undefined;
@@ -47,14 +48,18 @@ export declare const BannerSlim: {
             "aria-activedescendant"?: string | undefined | undefined;
             "aria-atomic"?: (boolean | "true" | "false") | undefined;
             "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+            "aria-braillelabel"?: string | undefined | undefined;
+            "aria-brailleroledescription"?: string | undefined | undefined;
             "aria-busy"?: (boolean | "true" | "false") | undefined;
             "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
             "aria-colcount"?: number | undefined | undefined;
             "aria-colindex"?: number | undefined | undefined;
+            "aria-colindextext"?: string | undefined | undefined;
             "aria-colspan"?: number | undefined | undefined;
             "aria-controls"?: string | undefined | undefined;
             "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
             "aria-describedby"?: string | undefined | undefined;
+            "aria-description"?: string | undefined | undefined;
             "aria-details"?: string | undefined | undefined;
             "aria-disabled"?: (boolean | "true" | "false") | undefined;
             "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
@@ -84,6 +89,7 @@ export declare const BannerSlim: {
             "aria-roledescription"?: string | undefined | undefined;
             "aria-rowcount"?: number | undefined | undefined;
             "aria-rowindex"?: number | undefined | undefined;
+            "aria-rowindextext"?: string | undefined | undefined;
             "aria-rowspan"?: number | undefined | undefined;
             "aria-selected"?: (boolean | "true" | "false") | undefined;
             "aria-setsize"?: number | undefined | undefined;
@@ -113,7 +119,7 @@ export declare const BannerSlim: {
             onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
             onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
             onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-            onBeforeInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
+            onBeforeInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
             onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
             onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
             onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
@@ -231,9 +237,7 @@ export declare const BannerSlim: {
             onPointerCancel?: React.PointerEventHandler<HTMLButtonElement> | undefined;
             onPointerCancelCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
             onPointerEnter?: React.PointerEventHandler<HTMLButtonElement> | undefined;
-            onPointerEnterCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
             onPointerLeave?: React.PointerEventHandler<HTMLButtonElement> | undefined;
-            onPointerLeaveCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
             onPointerOver?: React.PointerEventHandler<HTMLButtonElement> | undefined;
             onPointerOverCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
             onPointerOut?: React.PointerEventHandler<HTMLButtonElement> | undefined;
@@ -258,16 +262,16 @@ export declare const BannerSlim: {
             defaultChecked?: boolean | undefined | undefined;
             defaultValue?: string | number | readonly string[] | undefined;
             suppressContentEditableWarning?: boolean | undefined | undefined;
-            suppressHydrationWarning?: boolean | undefined | undefined;
             accessKey?: string | undefined | undefined;
+            autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
             autoFocus?: boolean | undefined | undefined;
-            contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+            contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
             contextMenu?: string | undefined | undefined;
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
+            enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
             hidden?: boolean | undefined | undefined;
             nonce?: string | undefined | undefined;
-            placeholder?: string | undefined | undefined;
             spellCheck?: (boolean | "true" | "false") | undefined;
             radioGroup?: string | undefined | undefined;
             about?: string | undefined | undefined;
@@ -279,7 +283,6 @@ export declare const BannerSlim: {
             rev?: string | undefined | undefined;
             typeof?: string | undefined | undefined;
             vocab?: string | undefined | undefined;
-            autoCapitalize?: string | undefined | undefined;
             autoCorrect?: string | undefined | undefined;
             autoSave?: string | undefined | undefined;
             itemProp?: string | undefined | undefined;
@@ -292,10 +295,12 @@ export declare const BannerSlim: {
             unselectable?: "on" | "off" | undefined | undefined;
             inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
             is?: string | undefined | undefined;
+            exportparts?: string | undefined | undefined;
+            part?: string | undefined | undefined;
             disabled?: boolean | undefined | undefined;
             value?: string | number | readonly string[] | undefined;
             as?: React.ElementType | undefined;
-            formAction?: string | undefined | undefined;
+            formAction?: string | undefined;
             formEncType?: string | undefined | undefined;
             formMethod?: string | undefined | undefined;
             formNoValidate?: boolean | undefined | undefined;
@@ -305,12 +310,12 @@ export declare const BannerSlim: {
             isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
             emphasis?: ("bold" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold">>) | undefined;
             containerSize?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
-        }): JSX.Element;
+        }): React.JSX.Element;
         displayName: string;
     };
     Actions: {
         ({ children, ...props }: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+            ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
         }, "size"> & {
             size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
         } & {

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

@@ -6,16 +6,18 @@ import { BannerSlimContent } from "./BannerSlimContent.js";
 import { BannerSlimDismiss } from "./BannerSlimDismiss.js";
 import { BannerSlimImage } from "./BannerSlimImage.js";
 import { BannerSlimText } from "./BannerSlimText.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-slim/BannerSlim.tsx
-var BannerSlimComponent = ({ colorScheme, size, emphasis, onDismiss, ...rest }) => /* @__PURE__ */ React$1.createElement(Banner, {
+var BannerSlimComponent = ({ colorScheme, size, emphasis, onDismiss, ...rest }) => /* @__PURE__ */ jsx(Banner, {
 	size,
-	emphasis
-}, /* @__PURE__ */ React$1.createElement(BannerSlimContainer, {
-	colorScheme,
-	onDismiss,
-	...rest
-}));
+	emphasis,
+	children: /* @__PURE__ */ jsx(BannerSlimContainer, {
+		colorScheme,
+		onDismiss,
+		...rest
+	})
+});
 var BannerSlim = Object.assign(BannerSlimComponent, {
 	Content: BannerSlimContent,
 	Text: BannerSlimText,

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

@@ -1 +1 @@
-{"version":3,"file":"BannerSlim.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlim.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Banner } from '../Banner'\nimport { BannerContainer } from '../BannerContainer'\nimport { BannerSlimActions } from './BannerSlimActions'\nimport { BannerSlimButton } from './BannerSlimButton'\nimport { BannerSlimContainer } from './BannerSlimContainer'\nimport { BannerSlimContent } from './BannerSlimContent'\nimport { BannerSlimDismiss } from './BannerSlimDismiss'\nimport { BannerSlimImage } from './BannerSlimImage'\nimport { BannerSlimText } from './BannerSlimText'\n\nconst BannerSlimComponent = ({\n  colorScheme,\n  size,\n  emphasis,\n  onDismiss,\n  ...rest\n}: React.ComponentProps<typeof Banner> &\n  React.ComponentProps<typeof BannerContainer>) => (\n  <Banner size={size} emphasis={emphasis}>\n    <BannerSlimContainer\n      colorScheme={colorScheme}\n      onDismiss={onDismiss}\n      {...rest}\n    />\n  </Banner>\n)\n\nexport const BannerSlim = Object.assign(BannerSlimComponent, {\n  Content: BannerSlimContent,\n  Text: BannerSlimText,\n  Image: BannerSlimImage,\n  Button: BannerSlimButton,\n  Dismiss: BannerSlimDismiss,\n  Actions: BannerSlimActions\n})\n\nBannerSlimComponent.displayName = 'BannerSlim'\n"],"mappings":";;;;;;;;;;AAYA,IAAM,uBAAuB,EAC3B,aACA,MACA,UACA,WACA,GAAG,WAGH,wBAAA,cAAC,QAAD;CAAc;CAAgB;CAMrB,EALP,wBAAA,cAAC,qBAAD;CACe;CACF;CACX,GAAI;CACJ,CAAA,CACK;AAGX,IAAa,aAAa,OAAO,OAAO,qBAAqB;CAC3D,SAAS;CACT,MAAM;CACN,OAAO;CACP,QAAQ;CACR,SAAS;CACT,SAAS;CACV,CAAC;AAEF,oBAAoB,cAAc"}
+{"version":3,"file":"BannerSlim.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlim.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Banner } from '../Banner'\nimport { BannerContainer } from '../BannerContainer'\nimport { BannerSlimActions } from './BannerSlimActions'\nimport { BannerSlimButton } from './BannerSlimButton'\nimport { BannerSlimContainer } from './BannerSlimContainer'\nimport { BannerSlimContent } from './BannerSlimContent'\nimport { BannerSlimDismiss } from './BannerSlimDismiss'\nimport { BannerSlimImage } from './BannerSlimImage'\nimport { BannerSlimText } from './BannerSlimText'\n\nconst BannerSlimComponent = ({\n  colorScheme,\n  size,\n  emphasis,\n  onDismiss,\n  ...rest\n}: React.ComponentProps<typeof Banner> &\n  React.ComponentProps<typeof BannerContainer>) => (\n  <Banner size={size} emphasis={emphasis}>\n    <BannerSlimContainer\n      colorScheme={colorScheme}\n      onDismiss={onDismiss}\n      {...rest}\n    />\n  </Banner>\n)\n\nexport const BannerSlim = Object.assign(BannerSlimComponent, {\n  Content: BannerSlimContent,\n  Text: BannerSlimText,\n  Image: BannerSlimImage,\n  Button: BannerSlimButton,\n  Dismiss: BannerSlimDismiss,\n  Actions: BannerSlimActions\n})\n\nBannerSlimComponent.displayName = 'BannerSlim'\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,uBAAuB,EAC3B,aACA,MACA,UACA,WACA,GAAG,WAGH,oBAAC,QAAD;CAAc;CAAgB;WAC5B,oBAAC,qBAAD;EACe;EACF;EACX,GAAI;EACJ,CAAA;CACK,CAAA;AAGX,IAAa,aAAa,OAAO,OAAO,qBAAqB;CAC3D,SAAS;CACT,MAAM;CACN,OAAO;CACP,QAAQ;CACR,SAAS;CACT,SAAS;CACV,CAAC;AAEF,oBAAoB,cAAc"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 declare const StyledBannerSlimActions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "size"> & {
     size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
 } & {

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

@@ -1,6 +1,7 @@
 import { styled } from "../../../styled.js";
 import { useBannerContext } from "../BannerContext.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-slim/BannerSlimActions.tsx
 var StyledBannerSlimActions = styled("div", {
 	base: ["flex", "gap-4"],
@@ -11,10 +12,11 @@ var StyledBannerSlimActions = styled("div", {
 }, { enabledResponsiveVariants: true });
 var BannerSlimActions = ({ children, ...props }) => {
 	const { size } = useBannerContext();
-	return /* @__PURE__ */ React$1.createElement(StyledBannerSlimActions, {
+	return /* @__PURE__ */ jsx(StyledBannerSlimActions, {
 		size,
-		...props
-	}, children);
+		...props,
+		children
+	});
 };
 BannerSlimActions.displayName = "BannerSlimActions";
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimActions.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledBannerSlimActions = styled(\n  'div',\n  {\n    base: ['flex', 'gap-4'],\n    variants: {\n      size: {\n        sm: ['w-full'],\n        md: ['w-auto']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport const BannerSlimActions = ({\n  children,\n  ...props\n}: React.ComponentProps<typeof StyledBannerSlimActions>) => {\n  const { size } = useBannerContext()\n  return (\n    <StyledBannerSlimActions size={size} {...props}>\n      {children}\n    </StyledBannerSlimActions>\n  )\n}\n\nBannerSlimActions.displayName = 'BannerSlimActions'\n"],"mappings":";;;;AAMA,IAAM,0BAA0B,OAC9B,OACA;CACE,MAAM,CAAC,QAAQ,QAAQ;CACvB,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,SAAS;EACd,IAAI,CAAC,SAAS;EACf,EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAa,qBAAqB,EAChC,UACA,GAAG,YACuD;CAC1D,MAAM,EAAE,SAAS,kBAAkB;AACnC,QACE,wBAAA,cAAC,yBAAD;EAA+B;EAAM,GAAI;EAEf,EADvB,SACuB;;AAI9B,kBAAkB,cAAc"}
+{"version":3,"file":"BannerSlimActions.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledBannerSlimActions = styled(\n  'div',\n  {\n    base: ['flex', 'gap-4'],\n    variants: {\n      size: {\n        sm: ['w-full'],\n        md: ['w-auto']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport const BannerSlimActions = ({\n  children,\n  ...props\n}: React.ComponentProps<typeof StyledBannerSlimActions>) => {\n  const { size } = useBannerContext()\n  return (\n    <StyledBannerSlimActions size={size} {...props}>\n      {children}\n    </StyledBannerSlimActions>\n  )\n}\n\nBannerSlimActions.displayName = 'BannerSlimActions'\n"],"mappings":";;;;;AAMA,IAAM,0BAA0B,OAC9B,OACA;CACE,MAAM,CAAC,QAAQ,QAAQ;CACvB,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,SAAS;EACd,IAAI,CAAC,SAAS;EACf,EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAa,qBAAqB,EAChC,UACA,GAAG,YACuD;CAC1D,MAAM,EAAE,SAAS,kBAAkB;AACnC,QACE,oBAAC,yBAAD;EAA+B;EAAM,GAAI;EACtC;EACuB,CAAA;;AAI9B,kBAAkB,cAAc"}

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

@@ -3,13 +3,13 @@ import { Button } from "../../button/Button.js";
 import { overrideStyledVariantValue } from "../../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
 import { useBannerContext } from "../BannerContext.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-slim/BannerSlimButton.tsx
 var BannerSlimButton = ({ className, ...props }) => {
 	const { emphasis, size } = useBannerContext();
-	const fullWidth = React$1.useMemo(() => overrideStyledVariantValue(size, (s) => s === "sm"), [size]);
-	return /* @__PURE__ */ React$1.createElement(Button, {
+	return /* @__PURE__ */ jsx(Button, {
 		size: "md",
-		fullWidth,
+		fullWidth: React$1.useMemo(() => overrideStyledVariantValue(size, (s) => s === "sm"), [size]),
 		theme: emphasis === "bold" ? "neutral" : "primary",
 		...props,
 		className: cn("ml-auto", className)

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'\n\nimport { Button } from '../../button/Button'\nimport { useBannerContext } from '../BannerContext'\n\nexport const BannerSlimButton = ({\n  className,\n  ...props\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      {...props}\n      className={cn('ml-auto', className)}\n    />\n  )\n}\n\nBannerSlimButton.displayName = 'BannerSlimButton'\n"],"mappings":";;;;;;AAQA,IAAa,oBAAoB,EAC/B,WACA,GAAG,YACsC;CACzC,MAAM,EAAE,UAAU,SAAS,kBAAkB;CAE7C,MAAM,YAAY,QAAM,cAChB,2BAA2B,OAAO,MAAM,MAAM,KAAK,EACzD,CAAC,KAAK,CACP;AAED,QACE,wBAAA,cAAC,QAAD;EACE,MAAK;EACM;EACX,OAAO,aAAa,SAAS,YAAY;EACzC,GAAI;EACJ,WAAW,GAAG,WAAW,UAAU;EACnC,CAAA;;AAIN,iBAAiB,cAAc"}
+{"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'\n\nimport { Button } from '../../button/Button'\nimport { useBannerContext } from '../BannerContext'\n\nexport const BannerSlimButton = ({\n  className,\n  ...props\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      {...props}\n      className={cn('ml-auto', className)}\n    />\n  )\n}\n\nBannerSlimButton.displayName = 'BannerSlimButton'\n"],"mappings":";;;;;;;AAQA,IAAa,oBAAoB,EAC/B,WACA,GAAG,YACsC;CACzC,MAAM,EAAE,UAAU,SAAS,kBAAkB;AAO7C,QACE,oBAAC,QAAD;EACE,MAAK;EACM,WARG,QAAM,cAChB,2BAA2B,OAAO,MAAM,MAAM,KAAK,EACzD,CAAC,KAAK,CACP;EAMG,OAAO,aAAa,SAAS,YAAY;EACzC,GAAI;EACJ,WAAW,GAAG,WAAW,UAAU;EACnC,CAAA;;AAIN,iBAAiB,cAAc"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 declare const StyledBannerSlimContainer: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
+    ref?: ((instance: HTMLElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLElement> | null | undefined;
 }, "size" | "emphasis"> & {
     emphasis?: ("bold" | "subtle" | "minimal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "subtle" | "minimal">>) | undefined;
     size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
@@ -17,7 +17,7 @@ declare const StyledBannerSlimContainer: React.ForwardRefExoticComponent<Omit<Om
 }>;
 type TBannerSlimContainerProps = React.ComponentProps<typeof StyledBannerSlimContainer>;
 export declare const BannerSlimContainer: {
-    ({ className, ...rest }: TBannerSlimContainerProps): JSX.Element;
+    ({ className, ...rest }: TBannerSlimContainerProps): React.JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -2,6 +2,7 @@ import { cn, styled } from "../../../styled.js";
 import { useBannerContext } from "../BannerContext.js";
 import { BannerContainer } from "../BannerContainer.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-slim/BannerSlimContainer.tsx
 var toDirection = {
 	sm: "flex-col",
@@ -36,7 +37,7 @@ var BannerSlimContainer = ({ className, ...rest }) => {
 		if (typeof size === "string") return toWrap[size];
 		return "flex-wrap md:flex-nowrap";
 	}, [size]);
-	return /* @__PURE__ */ React$1.createElement(StyledBannerSlimContainer, {
+	return /* @__PURE__ */ jsx(StyledBannerSlimContainer, {
 		...rest,
 		sizeWorkaround: size,
 		className: cn(direction, align, "gap-4", wrap, className)

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

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimContainer.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '~/styled'\n\nimport { BannerContainer } from '../BannerContainer'\nimport { useBannerContext } from '../BannerContext'\n\nconst toDirection = {\n  sm: 'flex-col',\n  md: 'flex-row'\n}\n\nconst toAlign = {\n  sm: 'items-start',\n  md: 'items-center'\n}\n\nconst toWrap = {\n  sm: 'flex-wrap',\n  md: 'flex-nowrap'\n}\n\nconst StyledBannerSlimContainer = styled(\n  BannerContainer,\n  {\n    base: ['p-4'],\n    variants: {\n      sizeWorkaround: {\n        sm: [],\n        md: ['px-6']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype TBannerSlimContainerProps = React.ComponentProps<\n  typeof StyledBannerSlimContainer\n>\n\nexport const BannerSlimContainer = ({\n  className,\n  ...rest\n}: TBannerSlimContainerProps): JSX.Element => {\n  const { size } = useBannerContext()\n\n  const direction = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toDirection[size]\n    }\n    return 'flex-col md:flex-row'\n  }, [size])\n\n  const align = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toAlign[size]\n    }\n    return 'items-start md:items-center'\n  }, [size])\n\n  const wrap = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toWrap[size]\n    }\n    return 'flex-wrap md:flex-nowrap'\n  }, [size])\n\n  return (\n    <StyledBannerSlimContainer\n      {...rest}\n      sizeWorkaround={size}\n      className={cn(direction, align, 'gap-4', wrap, className)}\n    />\n  )\n}\n\nBannerSlimContainer.displayName = 'BannerSlimContainer'\n"],"mappings":";;;;;AAOA,IAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACL;AAED,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACL;AAED,IAAM,SAAS;CACb,IAAI;CACJ,IAAI;CACL;AAED,IAAM,4BAA4B,OAChC,iBACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU,EACR,gBAAgB;EACd,IAAI,EAAE;EACN,IAAI,CAAC,OAAO;EACb,EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAMD,IAAa,uBAAuB,EAClC,WACA,GAAG,WACyC;CAC5C,MAAM,EAAE,SAAS,kBAAkB;CAEnC,MAAM,YAAY,QAAM,cAAc;AACpC,MAAI,OAAO,SAAS,SAClB,QAAO,YAAY;AAErB,SAAO;IACN,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,QAAM,cAAc;AAChC,MAAI,OAAO,SAAS,SAClB,QAAO,QAAQ;AAEjB,SAAO;IACN,CAAC,KAAK,CAAC;CAEV,MAAM,OAAO,QAAM,cAAc;AAC/B,MAAI,OAAO,SAAS,SAClB,QAAO,OAAO;AAEhB,SAAO;IACN,CAAC,KAAK,CAAC;AAEV,QACE,wBAAA,cAAC,2BAAD;EACE,GAAI;EACJ,gBAAgB;EAChB,WAAW,GAAG,WAAW,OAAO,SAAS,MAAM,UAAU;EACzD,CAAA;;AAIN,oBAAoB,cAAc"}
+{"version":3,"file":"BannerSlimContainer.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '~/styled'\n\nimport { BannerContainer } from '../BannerContainer'\nimport { useBannerContext } from '../BannerContext'\n\nconst toDirection = {\n  sm: 'flex-col',\n  md: 'flex-row'\n}\n\nconst toAlign = {\n  sm: 'items-start',\n  md: 'items-center'\n}\n\nconst toWrap = {\n  sm: 'flex-wrap',\n  md: 'flex-nowrap'\n}\n\nconst StyledBannerSlimContainer = styled(\n  BannerContainer,\n  {\n    base: ['p-4'],\n    variants: {\n      sizeWorkaround: {\n        sm: [],\n        md: ['px-6']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype TBannerSlimContainerProps = React.ComponentProps<\n  typeof StyledBannerSlimContainer\n>\n\nexport const BannerSlimContainer = ({\n  className,\n  ...rest\n}: TBannerSlimContainerProps): React.JSX.Element => {\n  const { size } = useBannerContext()\n\n  const direction = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toDirection[size]\n    }\n    return 'flex-col md:flex-row'\n  }, [size])\n\n  const align = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toAlign[size]\n    }\n    return 'items-start md:items-center'\n  }, [size])\n\n  const wrap = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toWrap[size]\n    }\n    return 'flex-wrap md:flex-nowrap'\n  }, [size])\n\n  return (\n    <StyledBannerSlimContainer\n      {...rest}\n      sizeWorkaround={size}\n      className={cn(direction, align, 'gap-4', wrap, className)}\n    />\n  )\n}\n\nBannerSlimContainer.displayName = 'BannerSlimContainer'\n"],"mappings":";;;;;;AAOA,IAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACL;AAED,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACL;AAED,IAAM,SAAS;CACb,IAAI;CACJ,IAAI;CACL;AAED,IAAM,4BAA4B,OAChC,iBACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU,EACR,gBAAgB;EACd,IAAI,EAAE;EACN,IAAI,CAAC,OAAO;EACb,EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAMD,IAAa,uBAAuB,EAClC,WACA,GAAG,WAC+C;CAClD,MAAM,EAAE,SAAS,kBAAkB;CAEnC,MAAM,YAAY,QAAM,cAAc;AACpC,MAAI,OAAO,SAAS,SAClB,QAAO,YAAY;AAErB,SAAO;IACN,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,QAAM,cAAc;AAChC,MAAI,OAAO,SAAS,SAClB,QAAO,QAAQ;AAEjB,SAAO;IACN,CAAC,KAAK,CAAC;CAEV,MAAM,OAAO,QAAM,cAAc;AAC/B,MAAI,OAAO,SAAS,SAClB,QAAO,OAAO;AAEhB,SAAO;IACN,CAAC,KAAK,CAAC;AAEV,QACE,oBAAC,2BAAD;EACE,GAAI;EACJ,gBAAgB;EAChB,WAAW,GAAG,WAAW,OAAO,SAAS,MAAM,UAAU;EACzD,CAAA;;AAIN,oBAAoB,cAAc"}

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

@@ -1,5 +1,5 @@
 export declare const BannerSlimContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, never> & {
     as?: import("react").ElementType;
 }>;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-declare const StyledDismiss: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+declare const StyledDismiss: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "theme" | "isRounded"> & {
     theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
     appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
@@ -11,7 +11,9 @@ declare const StyledDismiss: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit
 }, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../../..").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../../..").TOptionalTooltipWrapperProps, "label"> & import("../../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "containerSize"> & {
+} & Omit<import("../../..").TOptionalTooltipWrapperProps, "label"> & import("../../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "emphasis" | "containerSize"> & {
     emphasis?: ("bold" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold">>) | undefined;
     containerSize?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
 } & {
@@ -19,7 +21,7 @@ declare const StyledDismiss: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit
 }>;
 type TBannerSlimDismissProps = Omit<React.ComponentProps<typeof StyledDismiss>, 'children' | 'onClick' | 'href'>;
 export declare const BannerSlimDismiss: {
-    ({ label, ...rest }: TBannerSlimDismissProps): JSX.Element;
+    ({ label, ...rest }: TBannerSlimDismissProps): React.JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -4,6 +4,7 @@ import { ActionIcon } from "../../action-icon/ActionIcon.js";
 import { useBannerContext } from "../BannerContext.js";
 import { Banner } from "../Banner.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 import { Close } from "@atom-learning/icons";
 //#region src/components/banner/banner-slim/BannerSlimDismiss.tsx
 var StyledDismiss = styled(ActionIcon, {
@@ -28,16 +29,20 @@ var BannerSlimDismiss = ({ label = "dismiss", ...rest }) => {
 			setHasDismiss(false);
 		};
 	}, [setHasDismiss]);
-	return /* @__PURE__ */ React$1.createElement(Banner.Dismiss, { asChild: true }, /* @__PURE__ */ React$1.createElement(StyledDismiss, {
-		label,
-		size: "md",
-		hasTooltip: false,
-		isRounded: true,
-		theme: "neutral",
-		containerSize: size,
-		emphasis,
-		...rest
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close })));
+	return /* @__PURE__ */ jsx(Banner.Dismiss, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(StyledDismiss, {
+			label,
+			size: "md",
+			hasTooltip: false,
+			isRounded: true,
+			theme: "neutral",
+			containerSize: size,
+			emphasis,
+			...rest,
+			children: /* @__PURE__ */ jsx(Icon, { is: Close })
+		})
+	});
 };
 BannerSlimDismiss.displayName = "BannerSlimDismiss";
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimDismiss.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../../action-icon/ActionIcon'\nimport { Icon } from '../../icon/Icon'\nimport { Banner } from '../Banner'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledDismiss = styled(\n  ActionIcon,\n  {\n    base: [],\n    variants: {\n      emphasis: {\n        bold: ['text-white!']\n      },\n      containerSize: {\n        sm: ['absolute', 'right-4', 'top-4'],\n        md: ['static']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype TBannerSlimDismissProps = Omit<\n  React.ComponentProps<typeof StyledDismiss>,\n  'children' | 'onClick' | 'href'\n>\n\nexport const BannerSlimDismiss = ({\n  label = 'dismiss',\n  ...rest\n}: TBannerSlimDismissProps): JSX.Element => {\n  const { size, setHasDismiss, emphasis } = useBannerContext()\n\n  React.useEffect(() => {\n    setHasDismiss(true)\n    return () => {\n      setHasDismiss(false)\n    }\n  }, [setHasDismiss])\n\n  return (\n    <Banner.Dismiss asChild>\n      <StyledDismiss\n        label={label}\n        size=\"md\"\n        hasTooltip={false}\n        isRounded\n        theme=\"neutral\"\n        containerSize={size}\n        emphasis={emphasis as TBannerSlimDismissProps['emphasis']}\n        {...rest}\n      >\n        <Icon is={Close} />\n      </StyledDismiss>\n    </Banner.Dismiss>\n  )\n}\n\nBannerSlimDismiss.displayName = 'BannerSlimDismiss'\n"],"mappings":";;;;;;;;AAUA,IAAM,gBAAgB,OACpB,YACA;CACE,MAAM,EAAE;CACR,UAAU;EACR,UAAU,EACR,MAAM,CAAC,cAAc,EACtB;EACD,eAAe;GACb,IAAI;IAAC;IAAY;IAAW;IAAQ;GACpC,IAAI,CAAC,SAAS;GACf;EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAOD,IAAa,qBAAqB,EAChC,QAAQ,WACR,GAAG,WACuC;CAC1C,MAAM,EAAE,MAAM,eAAe,aAAa,kBAAkB;AAE5D,SAAM,gBAAgB;AACpB,gBAAc,KAAK;AACnB,eAAa;AACX,iBAAc,MAAM;;IAErB,CAAC,cAAc,CAAC;AAEnB,QACE,wBAAA,cAAC,OAAO,SAAR,EAAgB,SAAA,MAaC,EAZf,wBAAA,cAAC,eAAD;EACS;EACP,MAAK;EACL,YAAY;EACZ,WAAA;EACA,OAAM;EACN,eAAe;EACL;EACV,GAAI;EAGU,EADd,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACL,CACD;;AAIrB,kBAAkB,cAAc"}
+{"version":3,"file":"BannerSlimDismiss.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../../action-icon/ActionIcon'\nimport { Icon } from '../../icon/Icon'\nimport { Banner } from '../Banner'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledDismiss = styled(\n  ActionIcon,\n  {\n    base: [],\n    variants: {\n      emphasis: {\n        bold: ['text-white!']\n      },\n      containerSize: {\n        sm: ['absolute', 'right-4', 'top-4'],\n        md: ['static']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype TBannerSlimDismissProps = Omit<\n  React.ComponentProps<typeof StyledDismiss>,\n  'children' | 'onClick' | 'href'\n>\n\nexport const BannerSlimDismiss = ({\n  label = 'dismiss',\n  ...rest\n}: TBannerSlimDismissProps): React.JSX.Element => {\n  const { size, setHasDismiss, emphasis } = useBannerContext()\n\n  React.useEffect(() => {\n    setHasDismiss(true)\n    return () => {\n      setHasDismiss(false)\n    }\n  }, [setHasDismiss])\n\n  return (\n    <Banner.Dismiss asChild>\n      <StyledDismiss\n        label={label}\n        size=\"md\"\n        hasTooltip={false}\n        isRounded\n        theme=\"neutral\"\n        containerSize={size}\n        emphasis={emphasis as TBannerSlimDismissProps['emphasis']}\n        {...rest}\n      >\n        <Icon is={Close} />\n      </StyledDismiss>\n    </Banner.Dismiss>\n  )\n}\n\nBannerSlimDismiss.displayName = 'BannerSlimDismiss'\n"],"mappings":";;;;;;;;;AAUA,IAAM,gBAAgB,OACpB,YACA;CACE,MAAM,EAAE;CACR,UAAU;EACR,UAAU,EACR,MAAM,CAAC,cAAc,EACtB;EACD,eAAe;GACb,IAAI;IAAC;IAAY;IAAW;IAAQ;GACpC,IAAI,CAAC,SAAS;GACf;EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAOD,IAAa,qBAAqB,EAChC,QAAQ,WACR,GAAG,WAC6C;CAChD,MAAM,EAAE,MAAM,eAAe,aAAa,kBAAkB;AAE5D,SAAM,gBAAgB;AACpB,gBAAc,KAAK;AACnB,eAAa;AACX,iBAAc,MAAM;;IAErB,CAAC,cAAc,CAAC;AAEnB,QACE,oBAAC,OAAO,SAAR;EAAgB,SAAA;YACd,oBAAC,eAAD;GACS;GACP,MAAK;GACL,YAAY;GACZ,WAAA;GACA,OAAM;GACN,eAAe;GACL;GACV,GAAI;aAEJ,oBAAC,MAAD,EAAM,IAAI,OAAS,CAAA;GACL,CAAA;EACD,CAAA;;AAIrB,kBAAkB,cAAc"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Image } from '../../image/Image';
 export declare const BannerSlimImage: {
-    (props: React.ComponentProps<typeof Image>): React.JSX.Element;
+    (props: React.ComponentPropsWithoutRef<typeof Image>): React.JSX.Element;
     displayName: string;
 };

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

@@ -1,7 +1,8 @@
 import { styled } from "../../../styled.js";
 import { Image } from "../../image/Image.js";
 import { useBannerContext } from "../BannerContext.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-slim/BannerSlimImage.tsx
 var Container = styled("div", {
 	base: [
@@ -22,7 +23,10 @@ var StyledImage = styled(Image, { base: [
 ] });
 var BannerSlimImage = (props) => {
 	const { size } = useBannerContext();
-	return /* @__PURE__ */ React$1.createElement(Container, { size }, /* @__PURE__ */ React$1.createElement(StyledImage, props));
+	return /* @__PURE__ */ jsx(Container, {
+		size,
+		children: /* @__PURE__ */ jsx(StyledImage, { ...props })
+	});
 };
 BannerSlimImage.displayName = "BannerSlimImage";
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimImage.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Image } from '../../image/Image'\nimport { useBannerContext } from '../BannerContext'\n\nconst Container = styled(\n  'div',\n  {\n    base: ['overflow-hidden', 'rounded-full', 'self-start', 'shrink-0'],\n    variants: {\n      size: {\n        sm: ['size-10'],\n        md: ['size-12']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nconst StyledImage = styled(Image, {\n  base: ['max-w-none', 'size-full', 'object-cover']\n})\n\nexport const BannerSlimImage = (props: React.ComponentProps<typeof Image>) => {\n  const { size } = useBannerContext()\n\n  return (\n    <Container size={size}>\n      <StyledImage {...props} />\n    </Container>\n  )\n}\n\nBannerSlimImage.displayName = 'BannerSlimImage'\n"],"mappings":";;;;;AAOA,IAAM,YAAY,OAChB,OACA;CACE,MAAM;EAAC;EAAmB;EAAgB;EAAc;EAAW;CACnE,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EAChB,EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CAAC;CAAc;CAAa;CAAe,EAClD,CAAC;AAEF,IAAa,mBAAmB,UAA8C;CAC5E,MAAM,EAAE,SAAS,kBAAkB;AAEnC,QACE,wBAAA,cAAC,WAAD,EAAiB,MAEL,EADV,wBAAA,cAAC,aAAgB,MAAS,CAChB;;AAIhB,gBAAgB,cAAc"}
+{"version":3,"file":"BannerSlimImage.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Image } from '../../image/Image'\nimport { useBannerContext } from '../BannerContext'\n\nconst Container = styled(\n  'div',\n  {\n    base: ['overflow-hidden', 'rounded-full', 'self-start', 'shrink-0'],\n    variants: {\n      size: {\n        sm: ['size-10'],\n        md: ['size-12']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nconst StyledImage = styled(Image, {\n  base: ['max-w-none', 'size-full', 'object-cover']\n})\n\nexport const BannerSlimImage = (props: React.ComponentPropsWithoutRef<typeof Image>) => {\n  const { size } = useBannerContext()\n\n  return (\n    <Container size={size}>\n      <StyledImage {...props} />\n    </Container>\n  )\n}\n\nBannerSlimImage.displayName = 'BannerSlimImage'\n"],"mappings":";;;;;;AAOA,IAAM,YAAY,OAChB,OACA;CACE,MAAM;EAAC;EAAmB;EAAgB;EAAc;EAAW;CACnE,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EAChB,EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CAAC;CAAc;CAAa;CAAe,EAClD,CAAC;AAEF,IAAa,mBAAmB,UAAwD;CACtF,MAAM,EAAE,SAAS,kBAAkB;AAEnC,QACE,oBAAC,WAAD;EAAiB;YACf,oBAAC,aAAD,EAAa,GAAI,OAAS,CAAA;EAChB,CAAA;;AAIhB,gBAAgB,cAAc"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Text } from '../../text/Text';
 export declare const BannerSlimText: {
-    (props: React.ComponentProps<typeof Text>): React.JSX.Element;
+    (props: React.ComponentPropsWithoutRef<typeof Text>): React.JSX.Element;
     displayName: string;
 };

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

@@ -1,7 +1,8 @@
 import { styled } from "../../../styled.js";
 import { Text } from "../../text/Text.js";
 import { useBannerContext } from "../BannerContext.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-slim/BannerSlimText.tsx
 var StyledText = styled(Text, {
 	base: ["text-(--banner-heading-color)"],
@@ -20,7 +21,7 @@ var StyledText = styled(Text, {
 }, { enabledResponsiveVariants: true });
 var BannerSlimText = (props) => {
 	const { size, hasDismiss } = useBannerContext();
-	return /* @__PURE__ */ React$1.createElement(StyledText, {
+	return /* @__PURE__ */ jsx(StyledText, {
 		size: "md",
 		weight: "bold",
 		containerSize: size,

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

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimText.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../../text/Text'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['text-(--banner-heading-color)'],\n    variants: {\n      containerSize: {\n        sm: [],\n        md: []\n      },\n      hasDismiss: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        containerSize: 'sm',\n        hasDismiss: true,\n        class: ['mr-10']\n      }\n    ]\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport const BannerSlimText = (props: React.ComponentProps<typeof Text>) => {\n  const { size, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledText\n      size=\"md\"\n      weight=\"bold\"\n      containerSize={size}\n      hasDismiss={hasDismiss}\n      noCapsize\n      {...props}\n    />\n  )\n}\n\nBannerSlimText.displayName = 'BannerSlimText'\n"],"mappings":";;;;;AAOA,IAAM,aAAa,OACjB,MACA;CACE,MAAM,CAAC,gCAAgC;CACvC,UAAU;EACR,eAAe;GACb,IAAI,EAAE;GACN,IAAI,EAAE;GACP;EACD,YAAY,EACV,MAAM,EAAE,EACT;EACF;CACD,kBAAkB,CAChB;EACE,eAAe;EACf,YAAY;EACZ,OAAO,CAAC,QAAQ;EACjB,CACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAa,kBAAkB,UAA6C;CAC1E,MAAM,EAAE,MAAM,eAAe,kBAAkB;AAE/C,QACE,wBAAA,cAAC,YAAD;EACE,MAAK;EACL,QAAO;EACP,eAAe;EACH;EACZ,WAAA;EACA,GAAI;EACJ,CAAA;;AAIN,eAAe,cAAc"}
+{"version":3,"file":"BannerSlimText.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../../text/Text'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['text-(--banner-heading-color)'],\n    variants: {\n      containerSize: {\n        sm: [],\n        md: []\n      },\n      hasDismiss: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        containerSize: 'sm',\n        hasDismiss: true,\n        class: ['mr-10']\n      }\n    ]\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport const BannerSlimText = (props: React.ComponentPropsWithoutRef<typeof Text>) => {\n  const { size, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledText\n      size=\"md\"\n      weight=\"bold\"\n      containerSize={size}\n      hasDismiss={hasDismiss}\n      noCapsize\n      {...props}\n    />\n  )\n}\n\nBannerSlimText.displayName = 'BannerSlimText'\n"],"mappings":";;;;;;AAOA,IAAM,aAAa,OACjB,MACA;CACE,MAAM,CAAC,gCAAgC;CACvC,UAAU;EACR,eAAe;GACb,IAAI,EAAE;GACN,IAAI,EAAE;GACP;EACD,YAAY,EACV,MAAM,EAAE,EACT;EACF;CACD,kBAAkB,CAChB;EACE,eAAe;EACf,YAAY;EACZ,OAAO,CAAC,QAAQ;EACjB,CACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAa,kBAAkB,UAAuD;CACpF,MAAM,EAAE,MAAM,eAAe,kBAAkB;AAE/C,QACE,oBAAC,YAAD;EACE,MAAK;EACL,QAAO;EACP,eAAe;EACH;EACZ,WAAA;EACA,GAAI;EACJ,CAAA;;AAIN,eAAe,cAAc"}

package/dist/components/box/Box.d.ts

@@ -1,5 +1,5 @@
 export declare const Box: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, never> & {
     as?: import("react").ElementType;
 }>;

package/dist/components/button/Button.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { NavigatorActions } from '../../types/navigatorActions.types';
 import { Override } from '../../utilities/types';
 export declare const StyledButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "theme" | "isLoading" | "fullWidth"> & {
     theme?: ("primary" | "neutral" | "success" | "warning" | "danger" | "secondary" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "neutral" | "success" | "warning" | "danger" | "secondary">>) | undefined;
     appearance?: ("outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "outline" | "solid">>) | undefined;

package/dist/components/button/Button.js

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { getExternalAnchorProps } from "../../utilities/uri/index.js";
 import { Loader } from "../loader/Loader.js";
 import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/button/Button.tsx
 var StyledButton = styled("button", {
 	base: [
@@ -143,8 +144,11 @@ var LoaderContentsWrapper = styled("span", {
 	} },
 	defaultVariants: { size: "md" }
 }, { enabledResponsiveVariants: true });
-var WithLoader = ({ size, children }) => /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(Loader, { className: "absolute" }), /* @__PURE__ */ React$1.createElement(LoaderContentsWrapper, { size }, children));
-var Button = React$1.forwardRef(({ children, as, href, isLoading = false, onClick, disabled, ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledButton, {
+var WithLoader = ({ size, children }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader, { className: "absolute" }), /* @__PURE__ */ jsx(LoaderContentsWrapper, {
+	size,
+	children
+})] });
+var Button = React$1.forwardRef(({ children, as, href, isLoading = false, onClick, disabled, ...rest }, ref) => /* @__PURE__ */ jsx(StyledButton, {
 	as: as || (href ? "a" : void 0),
 	...!disabled && !isLoading && {
 		href,
@@ -155,8 +159,12 @@ var Button = React$1.forwardRef(({ children, as, href, isLoading = false, onClic
 	disabled,
 	...rest,
 	...getExternalAnchorProps(href),
-	ref
-}, isLoading ? /* @__PURE__ */ React$1.createElement(WithLoader, { size: rest.size }, children) : children));
+	ref,
+	children: isLoading ? /* @__PURE__ */ jsx(WithLoader, {
+		size: rest.size,
+		children
+	}) : children
+}));
 Button.displayName = "Button";
 //#endregion
 export { Button, StyledButton };

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 { Loader } from '~/components/loader/Loader'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\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    enabledResponsiveVariants: true\n  }\n)\n\nconst LoaderContentsWrapper = 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    enabledResponsiveVariants: 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 ButtonProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  {\n    children: React.ReactNode\n    href?: string\n    isLoading?: boolean\n  } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n  (\n    { children, as, href, isLoading = false, onClick, disabled, ...rest },\n    ref\n  ) => (\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 as any}\n    >\n      {isLoading ? (\n        <WithLoader size={rest.size}>{children}</WithLoader>\n      ) : (\n        children\n      )}\n    </StyledButton>\n  )\n)\n\nButton.displayName = 'Button'\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;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACD;GACD,WAAW;IACT;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACD;GACF;EACD,YAAY;GACV,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,WAAW,EACT,MAAM,CAAC,oDAAoD,EAC5D;EACD,WAAW;GACT,MAAM,CAAC,SAAS;GAChB,OAAO,CAAC,QAAQ;GACjB;EACF;CACD,iBAAiB;EACf,YAAY;EACZ,MAAM;EACN,OAAO;EACR;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,wBAAwB,OAC5B,QACA;CACE,MAAM;EAAC;EAAgB;EAAQ;EAAkB;EAAY;CAC7D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACd,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,cAAc,EAClB,MACA,eAEA,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,QAAD,EAAQ,WAAU,YAAa,CAAA,EAC/B,wBAAA,cAAC,uBAAD,EAA6B,MAAwC,EAAjC,SAAiC,CACpE;AAYL,IAAa,SAAS,QAAM,YAExB,EAAE,UAAU,IAAI,MAAM,YAAY,OAAO,SAAS,UAAU,GAAG,QAC/D,QAEA,wBAAA,cAAC,cAAD;CACE,IAAI,OAAO,OAAO,MAAM,KAAA;CACxB,GAAK,CAAC,YAAY,CAAC,aAAa;EAAE;EAAM;EAAS;CACtC;CACX,MAAM,CAAC,OAAO,WAAW,KAAA;CACf;CACV,GAAI;CACJ,GAAI,uBAAuB,KAAK;CAC3B;CAOQ,EALZ,YACC,wBAAA,cAAC,YAAD,EAAY,MAAM,KAAK,MAA6B,EAAtB,SAAsB,GAEpD,SAEW,CAElB;AAED,OAAO,cAAc"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Loader } from '~/components/loader/Loader'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\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    enabledResponsiveVariants: true\n  }\n)\n\nconst LoaderContentsWrapper = 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    enabledResponsiveVariants: 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 ButtonProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  {\n    children: React.ReactNode\n    href?: string\n    isLoading?: boolean\n  } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n  (\n    { children, as, href, isLoading = false, onClick, disabled, ...rest },\n    ref\n  ) => (\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 as any}\n    >\n      {isLoading ? (\n        <WithLoader size={rest.size}>{children}</WithLoader>\n      ) : (\n        children\n      )}\n    </StyledButton>\n  )\n)\n\nButton.displayName = 'Button'\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;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACD;GACD,WAAW;IACT;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACD;GACF;EACD,YAAY;GACV,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,WAAW,EACT,MAAM,CAAC,oDAAoD,EAC5D;EACD,WAAW;GACT,MAAM,CAAC,SAAS;GAChB,OAAO,CAAC,QAAQ;GACjB;EACF;CACD,iBAAiB;EACf,YAAY;EACZ,MAAM;EACN,OAAO;EACR;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,wBAAwB,OAC5B,QACA;CACE,MAAM;EAAC;EAAgB;EAAQ;EAAkB;EAAY;CAC7D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACd,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,cAAc,EAClB,MACA,eAEA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAQ,WAAU,YAAa,CAAA,EAC/B,oBAAC,uBAAD;CAA6B;CAAO;CAAiC,CAAA,CACpE,EAAA,CAAA;AAYL,IAAa,SAAS,QAAM,YAExB,EAAE,UAAU,IAAI,MAAM,YAAY,OAAO,SAAS,UAAU,GAAG,QAC/D,QAEA,oBAAC,cAAD;CACE,IAAI,OAAO,OAAO,MAAM,KAAA;CACxB,GAAK,CAAC,YAAY,CAAC,aAAa;EAAE;EAAM;EAAS;CACtC;CACX,MAAM,CAAC,OAAO,WAAW,KAAA;CACf;CACV,GAAI;CACJ,GAAI,uBAAuB,KAAK;CAC3B;WAEJ,YACC,oBAAC,YAAD;EAAY,MAAM,KAAK;EAAO;EAAsB,CAAA,GAEpD;CAEW,CAAA,CAElB;AAED,OAAO,cAAc"}