npm - @atom-learning/components - Versions diffs - 6.3.1 → 6.4.1 - Mend

@atom-learning/components 6.3.1 → 6.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (135) hide show

package/dist/components/alert-dialog/alert-context/AlertDialog.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as e from"react";import{Button as m}from"../../button/Button.js";import{Flex as r}from"../../flex/Flex.js";import{Heading as d}from"../../heading/Heading.js";import{Text as A}from"../../text/Text.js";import{AlertDialog as t}from"../AlertDialog.js";import{AlertDialogIcon as C}from"./AlertDialogIcon.js";const g=({title:c,size:i,theme:n,description:a,onAction:o,cancelActionText:l,confirmActionText:s,onClose:p,confirmElement:f,cancelElement:E,...u})=>e.createElement(t,{defaultOpen:!0},e.createElement(t.Content,{size:i,onEscapeKeyDown:x=>x.preventDefault(),onCloseAutoFocus:p,...u,className:"flex max-h-[90vh] flex-col gap-8"},e.createElement(r,{className:"items-center gap-2"},n&&e.createElement(C,{theme:n}),e.createElement(d,{as:t.Title,size:"sm",className:"mr-4"},c)),a&&e.createElement(A,{as:t.Description,className:"flex overflow-y-auto"},a),e.createElement(r,{gap:"2",justify:"end",wrap:"wrap"},e.createElement(t.Cancel,{asChild:!0},E||l&&e.createElement(m,{size:"sm",appearance:"outline",onClick:()=>o==null?void 0:o(!1)},l)),e.createElement(t.Action,{asChild:!0},f||e.createElement(m,{size:"sm",onClick:()=>o==null?void 0:o(!0)},s)))));export{g as Alert};
+import*as e from"react";import{Button as m}from"../../button/Button.js";import{Heading as d}from"../../heading/Heading.js";import{Text as u}from"../../text/Text.js";import{AlertDialog as t}from"../AlertDialog.js";import{AlertDialogIcon as A}from"./AlertDialogIcon.js";const C=({title:c,size:i,theme:n,description:o,onAction:l,cancelActionText:a,confirmActionText:r,onClose:s,confirmElement:f,cancelElement:p,...E})=>e.createElement(t,{defaultOpen:!0},e.createElement(t.Content,{size:i,onEscapeKeyDown:x=>x.preventDefault(),onCloseAutoFocus:s,...E,className:"flex max-h-[90vh] flex-col gap-8"},e.createElement("div",{className:"flex items-center gap-2"},n&&e.createElement(A,{theme:n}),e.createElement(d,{as:t.Title,size:"sm",className:"mr-4"},c)),o&&e.createElement(u,{as:t.Description,className:"flex overflow-y-auto"},o),e.createElement("div",{className:"flex flex-wrap justify-end gap-2"},e.createElement(t.Cancel,{asChild:!0},p||a&&e.createElement(m,{size:"sm",appearance:"outline",onClick:()=>l==null?void 0:l(!1)},a)),e.createElement(t.Action,{asChild:!0},f||e.createElement(m,{size:"sm",onClick:()=>l==null?void 0:l(!0)},r)))));export{C as Alert};
 //# sourceMappingURL=AlertDialog.js.map

package/dist/components/alert-dialog/alert-context/AlertDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AlertDialog.js","sources":["../../../../src/components/alert-dialog/alert-context/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../../button/Button'\nimport { ~~Flex } from '../../flex/Flex'\nimport {~~ Heading } from '../../heading/Heading'\nimport { Text } from '../../text/Text'\nimport { AlertDialog } from '../AlertDialog'\nimport { AlertDialogIcon } from './AlertDialogIcon'\nimport type { alert } from './types'\n\ntype AlertDialogContentProps = React.ComponentProps<typeof AlertDialog> & {\n className?: string\n onClose: () => void\n} & alert\n\nexport const Alert = ({\n title,\n size,\n theme,\n description,\n onAction,\n cancelActionText,\n confirmActionText,\n onClose,\n confirmElement,\n cancelElement,\n ...remainingProps\n}: AlertDialogContentProps) => (\n <AlertDialog defaultOpen>\n <AlertDialog.Content\n size={size}\n onEscapeKeyDown={(e) => e.preventDefault()}\n onCloseAutoFocus={onClose}\n {...remainingProps}\n className=\"flex max-h-[90vh] flex-col gap-8\"\n >\n <~~Flex~~ className=\"items-center gap-2\">\n {theme && <AlertDialogIcon theme={theme} />}\n <Heading as={AlertDialog.Title} size=\"sm\" className=\"mr-4\">\n {title}\n </Heading>\n </~~Flex~~>\n {description && (\n <Text as={AlertDialog.Description} className=\"flex overflow-y-auto\">\n {description}\n </Text>\n )}\n <~~Flex~~ ~~gap~~=\"~~2\"~~ justify~~=\"~~end\" ~~wrap=\"wrap~~\">\n <AlertDialog.Cancel asChild>\n {cancelElement \|\|\n (cancelActionText && (\n <Button\n size=\"sm\"\n appearance=\"outline\"\n onClick={() => onAction?.(false)}\n >\n {cancelActionText}\n </Button>\n ))}\n </AlertDialog.Cancel>\n <AlertDialog.Action asChild>\n {confirmElement \|\| (\n <Button size=\"sm\" onClick={() => onAction?.(true)}>\n {confirmActionText}\n </Button>\n )}\n </AlertDialog.Action>\n </~~Flex~~>\n </AlertDialog.Content>\n </AlertDialog>\n)\n"],"names":["Alert","title","size","theme","description","onAction","cancelActionText","confirmActionText","onClose","confirmElement","cancelElement","remainingProps","React","AlertDialog","e","~~Flex","~~AlertDialogIcon","Heading","Text","Button"],"mappings":"~~sTAea~~,MAAAA,EAAQ,CAAC,CACpB,MAAAC,EACA,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,QAAAC,EACA,eAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAY,YAAW,EAAA,EACtBD,EAAA,cAACC,EAAY,QAAZ,CACC,KAAMX,EACN,gBAAkBY,GAAMA,EAAE,iBAC1B,iBAAkBN,EACjB,GAAGG,EACJ,UAAU,~~oCAEVC~~,EAAA,~~cAACG~~,~~EAAA~~,~~CAAK~~,UAAU,~~sBACbZ~~,GAASS,EAAA,~~cAACI~~,EAAA,CAAgB,~~MAAOb~~,CAAAA,CAAO,EACzCS,EAAA,~~cAACK~~,EAAA,CAAQ,~~GAAIJ~~,EAAY,MAAO,KAAK,KAAK,UAAU,~~QACjDZ~~,CACH,CACF,EACCG,GACCQ,EAAA,~~cAACM~~,EAAA,CAAK,~~GAAIL~~,EAAY,YAAa,UAAU,~~sBAAA~~,~~EAC1CT,~~CACH,EAEFQ,EAAA,~~cAACG~~,~~EAAA~~,~~CAAK~~,~~IAAI~~,~~IAAI~~,~~QAAQ~~,~~MAAM,KAAK,MAAA,EAC/BH,~~EAAA,cAACC,EAAY,OAAZ,CAAmB,QAAO,~~EACxBH~~,~~EAAAA,~~GACEJ,GACCM,EAAA,~~cAACO~~,EAAA,CACC,KAAK,KACL,WAAW,UACX,QAAS,~~IAAMd~~,GAAA,~~YAAAA~~,EAAW,~~EAAA~~,~~CAAA~~,~~EAEzBC~~,CACH,CAEN,EACAM,EAAA,cAACC,EAAY,OAAZ,CAAmB,QAAO,~~EACxBJ~~,~~EAAAA,~~GACCG,EAAA,~~cAACO~~,EAAA,CAAO,KAAK,KAAK,QAAS,~~IAAMd~~,GAAA,YAAAA,EAAW,EAAA,CAAA,EACzCE,CACH,CAEJ,CACF,CACF,CACF"}
1	+ {"version":3,"file":"AlertDialog.js","sources":["../../../../src/components/alert-dialog/alert-context/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../../button/Button'\nimport { Heading } from '../../heading/Heading'\nimport { Text } from '../../text/Text'\nimport { AlertDialog } from '../AlertDialog'\nimport { AlertDialogIcon } from './AlertDialogIcon'\nimport type { alert } from './types'\n\ntype AlertDialogContentProps = React.ComponentProps<typeof AlertDialog> & {\n className?: string\n onClose: () => void\n} & alert\n\nexport const Alert = ({\n title,\n size,\n theme,\n description,\n onAction,\n cancelActionText,\n confirmActionText,\n onClose,\n confirmElement,\n cancelElement,\n ...remainingProps\n}: AlertDialogContentProps) => (\n <AlertDialog defaultOpen>\n <AlertDialog.Content\n size={size}\n onEscapeKeyDown={(e) => e.preventDefault()}\n onCloseAutoFocus={onClose}\n {...remainingProps}\n className=\"flex max-h-[90vh] flex-col gap-8\"\n >\n <div className=\"flex items-center gap-2\">\n {theme && <AlertDialogIcon theme={theme} />}\n <Heading as={AlertDialog.Title} size=\"sm\" className=\"mr-4\">\n {title}\n </Heading>\n </div>\n {description && (\n <Text as={AlertDialog.Description} className=\"flex overflow-y-auto\">\n {description}\n </Text>\n )}\n <div className=\"flex flex-wrap justify-end gap-2\">\n <AlertDialog.Cancel asChild>\n {cancelElement \|\|\n (cancelActionText && (\n <Button\n size=\"sm\"\n appearance=\"outline\"\n onClick={() => onAction?.(false)}\n >\n {cancelActionText}\n </Button>\n ))}\n </AlertDialog.Cancel>\n <AlertDialog.Action asChild>\n {confirmElement \|\| (\n <Button size=\"sm\" onClick={() => onAction?.(true)}>\n {confirmActionText}\n </Button>\n )}\n </AlertDialog.Action>\n </div>\n </AlertDialog.Content>\n </AlertDialog>\n)\n"],"names":["Alert","title","size","theme","description","onAction","cancelActionText","confirmActionText","onClose","confirmElement","cancelElement","remainingProps","React","AlertDialog","e","AlertDialogIcon","Heading","Text","Button"],"mappings":"4QAca,MAAAA,EAAQ,CAAC,CACpB,MAAAC,EACA,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,QAAAC,EACA,eAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAY,YAAW,EAAA,EACtBD,EAAA,cAACC,EAAY,QAAZ,CACC,KAAMX,EACN,gBAAkBY,GAAMA,EAAE,iBAC1B,iBAAkBN,EACjB,GAAGG,EACJ,UAAU,kCAEVC,EAAAA,EAAA,cAAC,MAAI,CAAA,UAAU,2BACZT,GAASS,EAAA,cAACG,EAAA,CAAgB,MAAOZ,CAAAA,CAAO,EACzCS,EAAA,cAACI,EAAA,CAAQ,GAAIH,EAAY,MAAO,KAAK,KAAK,UAAU,MACjDZ,EAAAA,CACH,CACF,EACCG,GACCQ,EAAA,cAACK,EAAA,CAAK,GAAIJ,EAAY,YAAa,UAAU,wBAC1CT,CACH,EAEFQ,EAAA,cAAC,MAAA,CAAI,UAAU,kCAAA,EACbA,EAAA,cAACC,EAAY,OAAZ,CAAmB,QAAO,IACxBH,GACEJ,GACCM,EAAA,cAACM,EAAA,CACC,KAAK,KACL,WAAW,UACX,QAAS,IAAMb,GAAA,KAAA,OAAAA,EAAW,EAEzBC,CAAAA,EAAAA,CACH,CAEN,EACAM,EAAA,cAACC,EAAY,OAAZ,CAAmB,QAAO,IACxBJ,GACCG,EAAA,cAACM,EAAA,CAAO,KAAK,KAAK,QAAS,IAAMb,GAAA,YAAAA,EAAW,EAAA,CAAA,EACzCE,CACH,CAEJ,CACF,CACF,CACF"}

package/dist/components/badge/Badge.d.ts CHANGED Viewed

@@ -2,16 +2,8 @@ import * as React from 'react';
 import { Icon } from '../../components/icon/Icon';
 import { colorSchemes as badgeColorSchemes } from './Badge.colorscheme.config';
 import { BadgeText } from './BadgeText';
-declare const StyledBadge: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const StyledBadge: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "gap" | "wrap" | "direction" | "align" | "justify"> & {
-    direction?: ("row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset">>) | undefined;
-    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-    justify?: ("end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-    align?: ("end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline">>) | undefined;
-    gap?: (0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24>>) | undefined;
-} & {
-    as?: React.ElementType;
 }, "size" | "emphasis" | "isClickable" | "highlighted"> & {
     emphasis?: ("bold" | "white" | "subtle" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "white" | "subtle">>) | undefined;
     size?: ("sm" | "md" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "xs">>) | undefined;

package/dist/components/badge/Badge.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as e from"react";import{Flex as v}from"../flex/Flex.js";import{Icon as w}from"../icon/Icon.js";import{styled as k}from"../../styled.js";import{useCallbackRefState as y}from"../../utilities/hooks/useCallbackRef.js";import{OptionalTooltipWrapper as C}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";import{colorSchemes as E,badgeSemanticNames as B}from"./Badge.colorscheme.config.js";import{BadgeContext as O,BadgeProvider as z}from"./Badge.context.js";import{BadgeIcon as n}from"./BadgeIcon.js";import{BadgeText as m}from"./BadgeText.js";const j=k(v,{base:["justify-center","items-center","rounded-sm","min-w-0","border","border-white","font-body","*:not-last:mr-1"],variants:{emphasis:{white:["text-(--text-on-white)","bg-white"],subtle:["text-(--text-subtle)","bg-(--background-subtle)"],bold:["text-(--text-bold)","bg-(--background-bold)"]},size:{xs:["px-1","py-0"],sm:["px-1","py-0.5"],md:["px-2","py-1"]},isClickable:{true:["cursor-pointer"]},highlighted:{true:[]}},compoundVariants:[{isClickable:!0,emphasis:"white",class:["hover:text-(--text-on-white)","hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{isClickable:!0,emphasis:"subtle",class:["hover:bg-(--background-subtle-hover)","hover:text-(--text-subtle-hover)"]},{isClickable:!0,emphasis:"bold",class:["hover:bg-(--background-bold-hover)","hover:text-(--text-bold)"]},{emphasis:"white",highlighted:!0,class:["text-(--text-on-white)","bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{emphasis:"subtle",highlighted:!0,class:["text-(--text-subtle-hover)","(--bg-background-subtle-hover)"]},{emphasis:"bold",highlighted:!0,class:["text-(--text-bold)","bg-(--background-bold-hover)"]}]},{enabledResponsiveVariants:!0}),I=e.forwardRef(({theme:o="info",emphasis:s="subtle",children:r,style:i,...l},h)=>{const{size:c,overflow:d,isOverflowing:p}=e.useContext(O),[a,g]=y();e.useImperativeHandle(h,()=>a);const u=a==null?void 0:a.textContent,x=B.includes(o),f=Object.keys(l).includes("onClick")||Object.keys(l).includes("href");return e.createElement(C,{hasTooltip:d==="ellipsis"&&p,label:u},e.createElement(j,{role:"status",emphasis:s,size:c,style:{...E[o],...i},...l,ref:g,isClickable:f&&!x},e.Children.map(r,t=>typeof t=="string"||typeof t=="number"?e.createElement(m,null,t):e.isValidElement(t)&&t.type===w?e.createElement(n,{...t.props}):t)))}),b=e.forwardRef(({size:o="sm",overflow:s="wrap",...r},i)=>e.createElement(z,{size:o,overflow:s},e.createElement(I,{...r,ref:i}))),R=Object.assign(b,{Icon:n,Text:m});b.displayName="Badge";export{R as Badge};
+import*as e from"react";import{Icon as v}from"../icon/Icon.js";import{styled as w}from"../../styled.js";import{useCallbackRefState as k}from"../../utilities/hooks/useCallbackRef.js";import{OptionalTooltipWrapper as y}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";import{colorSchemes as C,badgeSemanticNames as E}from"./Badge.colorscheme.config.js";import{BadgeContext as B,BadgeProvider as O}from"./Badge.context.js";import{BadgeIcon as n}from"./BadgeIcon.js";import{BadgeText as b}from"./BadgeText.js";const z=w("div",{base:["flex","justify-center","items-center","rounded-sm","min-w-0","border","border-white","font-body","*:not-last:mr-1"],variants:{emphasis:{white:["text-(--text-on-white)","bg-white"],subtle:["text-(--text-subtle)","bg-(--background-subtle)"],bold:["text-(--text-bold)","bg-(--background-bold)"]},size:{xs:["px-1","py-0"],sm:["px-1","py-0.5"],md:["px-2","py-1"]},isClickable:{true:["cursor-pointer"]},highlighted:{true:[]}},compoundVariants:[{isClickable:!0,emphasis:"white",class:["hover:text-(--text-on-white)","hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{isClickable:!0,emphasis:"subtle",class:["hover:bg-(--background-subtle-hover)","hover:text-(--text-subtle-hover)"]},{isClickable:!0,emphasis:"bold",class:["hover:bg-(--background-bold-hover)","hover:text-(--text-bold)"]},{emphasis:"white",highlighted:!0,class:["text-(--text-on-white)","bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{emphasis:"subtle",highlighted:!0,class:["text-(--text-subtle-hover)","(--bg-background-subtle-hover)"]},{emphasis:"bold",highlighted:!0,class:["text-(--text-bold)","bg-(--background-bold-hover)"]}]},{enabledResponsiveVariants:!0}),I=e.forwardRef(({theme:o="info",emphasis:s="subtle",children:r,style:i,...l},h)=>{const{size:c,overflow:d,isOverflowing:p}=e.useContext(B),[a,g]=k();e.useImperativeHandle(h,()=>a);const u=a==null?void 0:a.textContent,x=E.includes(o),f=Object.keys(l).includes("onClick")||Object.keys(l).includes("href");return e.createElement(y,{hasTooltip:d==="ellipsis"&&p,label:u},e.createElement(z,{role:"status",emphasis:s,size:c,style:{...C[o],...i},...l,ref:g,isClickable:f&&!x},e.Children.map(r,t=>typeof t=="string"||typeof t=="number"?e.createElement(b,null,t):e.isValidElement(t)&&t.type===v?e.createElement(n,{...t.props}):t)))}),m=e.forwardRef(({size:o="sm",overflow:s="wrap",...r},i)=>e.createElement(O,{size:o,overflow:s},e.createElement(I,{...r,ref:i}))),j=Object.assign(m,{Icon:n,Text:b});m.displayName="Badge";export{j as Badge};
 //# sourceMappingURL=Badge.js.map

package/dist/components/badge/Badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ~~Flex } from '~/components/flex/Flex'\nimport {~~ Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\n\nimport {\n badgeSemanticNames,\n colorSchemes as badgeColorSchemes\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(\n ~~Flex~~,\n {\n base: [\n 'justify-center',\n 'items-center',\n 'rounded-sm',\n 'min-w-0',\n 'border',\n 'border-white',\n 'font-body',\n '*:not-last:mr-1'\n ],\n variants: {\n emphasis: {\n white: ['text-(--text-on-white)', 'bg-white'],\n subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n },\n size: {\n xs: ['px-1', 'py-0'],\n sm: ['px-1', 'py-0.5'],\n md: ['px-2', 'py-1']\n },\n isClickable: {\n true: ['cursor-pointer']\n },\n highlighted: {\n true: []\n }\n },\n compoundVariants: [\n {\n isClickable: true,\n emphasis: 'white',\n class: [\n 'hover:text-(--text-on-white)',\n 'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n ]\n },\n {\n isClickable: true,\n emphasis: 'subtle',\n class: [\n 'hover:bg-(--background-subtle-hover)',\n 'hover:text-(--text-subtle-hover)'\n ]\n },\n {\n isClickable: true,\n emphasis: 'bold',\n class: [\n 'hover:bg-(--background-bold-hover)',\n 'hover:text-(--text-bold)'\n ]\n },\n {\n emphasis: 'white',\n highlighted: true,\n class: [\n 'text-(--text-on-white)',\n 'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n ]\n },\n {\n emphasis: 'subtle',\n highlighted: true,\n class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n },\n {\n emphasis: 'bold',\n highlighted: true,\n class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n }\n ]\n },\n { enabledResponsiveVariants: true }\n)\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n theme?: keyof typeof badgeColorSchemes\n overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadgeInnerProps = Omit<TBadgeProps, 'size' \| 'overflow'>\n\nconst BadgeInner = React.forwardRef<HTMLDivElement, TBadgeInnerProps>(\n ({ theme = 'info', emphasis = 'subtle', children, style, ...rest }, ref) => {\n const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n const label = badgeElRef?.textContent\n\n const isInfoOnly = badgeSemanticNames.includes(theme)\n\n const isClickable =\n Object.keys(rest).includes('onClick') \|\|\n Object.keys(rest).includes('href')\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={overflow === 'ellipsis' && isOverflowing}\n label={label}\n >\n <StyledBadge\n role=\"status\"\n emphasis={emphasis}\n size={size}\n style={{\n ...badgeColorSchemes[theme],\n ...style\n }}\n {...rest}\n ref={setBadgeElRef}\n isClickable={isClickable && !isInfoOnly}\n >\n {React.Children.map(children, (child) => {\n if (typeof child === 'string' \|\| typeof child === 'number') {\n return <BadgeText>{child}</BadgeText>\n }\n if (React.isValidElement(child) && child.type === Icon) {\n return <BadgeIcon {...child.props} />\n }\n return child\n })}\n </StyledBadge>\n </OptionalTooltipWrapper>\n )\n }\n)\n\nconst BadgeComponent = React.forwardRef<HTMLDivElement, TBadgeProps>(\n ({ size = 'sm', overflow = 'wrap', ...rest }, ref) => {\n return (\n <BadgeProvider size={size} overflow={overflow}>\n <BadgeInner {...rest} ref={ref} />\n </BadgeProvider>\n )\n }\n)\n\nexport const Badge = Object.assign(BadgeComponent, {\n Icon: BadgeIcon,\n Text: BadgeText\n})\n\nBadgeComponent.displayName = 'Badge'\n"],"names":["StyledBadge","styled","~~Flex","~~BadgeInner","React","theme","emphasis","children","style","rest","ref","size","overflow","isOverflowing","BadgeContext","badgeElRef","setBadgeElRef","useCallbackRefState","label","isInfoOnly","badgeSemanticNames","isClickable","OptionalTooltipWrapper","badgeColorSchemes","child","BadgeText","Icon","BadgeIcon","BadgeComponent","BadgeProvider","Badge"],"mappings":"~~yjBAgBA~~,MAAMA,EAAcC,~~EAClBC~~,~~EACA~~,CACE,KAAM,CACJ,iBACA,eACA,aACA,UACA,SACA,eACA,YACA,iBACF,EACA,SAAU,CACR,SAAU,CACR,MAAO,CAAC,yBAA0B,UAAU,EAC5C,OAAQ,CAAC,uBAAwB,0BAA0B,EAC3D,KAAM,CAAC,qBAAsB,wBAAwB,CACvD,EACA,KAAM,CACJ,GAAI,CAAC,OAAQ,MAAM,EACnB,GAAI,CAAC,OAAQ,QAAQ,EACrB,GAAI,CAAC,OAAQ,MAAM,CACrB,EACA,YAAa,CACX,KAAM,CAAC,gBAAgB,CACzB,EACA,YAAa,CACX,KAAM,~~CACR~~,~~CAAA,~~CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,SAAU,QACV,MAAO,CACL,+BACA,iEACF,CACF,EACA,CACE,YAAa,GACb,SAAU,SACV,MAAO,CACL,uCACA,kCACF,CACF,EACA,CACE,YAAa,GACb,SAAU,OACV,MAAO,CACL,qCACA,0BACF,CACF,EACA,CACE,SAAU,QACV,YAAa,GACb,MAAO,CACL,yBACA,2DACF,CACF,EACA,CACE,SAAU,SACV,YAAa,GACb,MAAO,CAAC,6BAA8B,gCAAgC,CACxE,EACA,CACE,SAAU,OACV,YAAa,GACb,MAAO,CAAC,qBAAsB,8BAA8B,CAC9D,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EASMC,EAAaC,EAAM,WACvB,CAAC,CAAE,MAAAC,EAAQ,OAAQ,SAAAC,EAAW,SAAU,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAK,EAAGC,IAAQ,CAC1E,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,cAAAC,CAAc,EAAIT,EAAM,WAAWU,CAAY,EACjE,CAACC,EAAYC,CAAa,EAAIC,IACpCb,EAAM,oBAAoBM,EAAK,IAAMK,CAA4B,EAEjE,MAAMG,EAAQH,GAAA,~~KAAA~~,OAAAA,EAAY,YAEpBI,EAAaC,EAAmB,SAASf,CAAK,EAE9CgB,EACJ,OAAO,KAAKZ,CAAI,EAAE,SAAS,SAAS,GACpC,OAAO,KAAKA,CAAI,EAAE,SAAS,MAAM,EAEnC,OACEL,EAAA,cAACkB,EAAA,CACC,WAAYV,IAAa,YAAcC,EACvC,MAAOK,~~CAAAA~~,~~EAEPd~~,EAAA,~~cAACJ~~,EAAA,CACC,KAAK,SACL,~~SAAUM~~,EACV,KAAMK,EACN,MAAO,CACL,GAAGY,EAAkBlB,CAAK,EAC1B,GAAGG,CACL,EACC,GAAGC,EACJ,IAAKO,EACL,YAAaK,GAAe,CAACF,CAAAA,EAE5Bf,EAAM,SAAS,IAAIG,EAAWiB,GACzB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SACzCpB,EAAA,cAACqB,EAAA,KAAWD,CAAM,EAEvBpB,EAAM,eAAeoB,CAAK,GAAKA,EAAM,OAASE,EACzCtB,EAAA,cAACuB,EAAA,CAAW,GAAGH,EAAM,MAAO,EAE9BA,CACR,CACH,CACF,CAEJ,CACF,EAEMI,EAAiBxB,EAAM,WAC3B,CAAC,CAAE,KAAAO,EAAO,KAAM,SAAAC,EAAW,OAAQ,GAAGH,CAAK,EAAGC,IAE1CN,EAAA,cAACyB,EAAA,CAAc,KAAMlB,EAAM,SAAUC,GACnCR,EAAA,cAACD,EAAA,CAAY,GAAGM,EAAM,IAAKC,CAAAA,CAAK,CAClC,CAGN,EAEaoB,EAAQ,OAAO,OAAOF,EAAgB,CACjD,KAAMD,EACN,KAAMF,CACR,CAAC,EAEDG,EAAe,YAAc"}
1	+ {"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\n\nimport {\n badgeSemanticNames,\n colorSchemes as badgeColorSchemes\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(\n 'div',\n {\n base: [\n 'flex',\n 'justify-center',\n 'items-center',\n 'rounded-sm',\n 'min-w-0',\n 'border',\n 'border-white',\n 'font-body',\n '*:not-last:mr-1'\n ],\n variants: {\n emphasis: {\n white: ['text-(--text-on-white)', 'bg-white'],\n subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n },\n size: {\n xs: ['px-1', 'py-0'],\n sm: ['px-1', 'py-0.5'],\n md: ['px-2', 'py-1']\n },\n isClickable: {\n true: ['cursor-pointer']\n },\n highlighted: {\n true: []\n }\n },\n compoundVariants: [\n {\n isClickable: true,\n emphasis: 'white',\n class: [\n 'hover:text-(--text-on-white)',\n 'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n ]\n },\n {\n isClickable: true,\n emphasis: 'subtle',\n class: [\n 'hover:bg-(--background-subtle-hover)',\n 'hover:text-(--text-subtle-hover)'\n ]\n },\n {\n isClickable: true,\n emphasis: 'bold',\n class: [\n 'hover:bg-(--background-bold-hover)',\n 'hover:text-(--text-bold)'\n ]\n },\n {\n emphasis: 'white',\n highlighted: true,\n class: [\n 'text-(--text-on-white)',\n 'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n ]\n },\n {\n emphasis: 'subtle',\n highlighted: true,\n class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n },\n {\n emphasis: 'bold',\n highlighted: true,\n class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n }\n ]\n },\n { enabledResponsiveVariants: true }\n)\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n theme?: keyof typeof badgeColorSchemes\n overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadgeInnerProps = Omit<TBadgeProps, 'size' \| 'overflow'>\n\nconst BadgeInner = React.forwardRef<HTMLDivElement, TBadgeInnerProps>(\n ({ theme = 'info', emphasis = 'subtle', children, style, ...rest }, ref) => {\n const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n const label = badgeElRef?.textContent\n\n const isInfoOnly = badgeSemanticNames.includes(theme)\n\n const isClickable =\n Object.keys(rest).includes('onClick') \|\|\n Object.keys(rest).includes('href')\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={overflow === 'ellipsis' && isOverflowing}\n label={label}\n >\n <StyledBadge\n role=\"status\"\n emphasis={emphasis}\n size={size}\n style={{\n ...badgeColorSchemes[theme],\n ...style\n }}\n {...rest}\n ref={setBadgeElRef}\n isClickable={isClickable && !isInfoOnly}\n >\n {React.Children.map(children, (child) => {\n if (typeof child === 'string' \|\| typeof child === 'number') {\n return <BadgeText>{child}</BadgeText>\n }\n if (React.isValidElement(child) && child.type === Icon) {\n return <BadgeIcon {...child.props} />\n }\n return child\n })}\n </StyledBadge>\n </OptionalTooltipWrapper>\n )\n }\n)\n\nconst BadgeComponent = React.forwardRef<HTMLDivElement, TBadgeProps>(\n ({ size = 'sm', overflow = 'wrap', ...rest }, ref) => {\n return (\n <BadgeProvider size={size} overflow={overflow}>\n <BadgeInner {...rest} ref={ref} />\n </BadgeProvider>\n )\n }\n)\n\nexport const Badge = Object.assign(BadgeComponent, {\n Icon: BadgeIcon,\n Text: BadgeText\n})\n\nBadgeComponent.displayName = 'Badge'\n"],"names":["StyledBadge","styled","BadgeInner","React","theme","emphasis","children","style","rest","ref","size","overflow","isOverflowing","BadgeContext","badgeElRef","setBadgeElRef","useCallbackRefState","label","isInfoOnly","badgeSemanticNames","isClickable","OptionalTooltipWrapper","badgeColorSchemes","child","BadgeText","Icon","BadgeIcon","BadgeComponent","BadgeProvider","Badge"],"mappings":"khBAeA,MAAMA,EAAcC,EAClB,MACA,CACE,KAAM,CACJ,OACA,iBACA,eACA,aACA,UACA,SACA,eACA,YACA,iBACF,EACA,SAAU,CACR,SAAU,CACR,MAAO,CAAC,yBAA0B,UAAU,EAC5C,OAAQ,CAAC,uBAAwB,0BAA0B,EAC3D,KAAM,CAAC,qBAAsB,wBAAwB,CACvD,EACA,KAAM,CACJ,GAAI,CAAC,OAAQ,MAAM,EACnB,GAAI,CAAC,OAAQ,QAAQ,EACrB,GAAI,CAAC,OAAQ,MAAM,CACrB,EACA,YAAa,CACX,KAAM,CAAC,gBAAgB,CACzB,EACA,YAAa,CACX,KAAM,EACR,CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,SAAU,QACV,MAAO,CACL,+BACA,iEACF,CACF,EACA,CACE,YAAa,GACb,SAAU,SACV,MAAO,CACL,uCACA,kCACF,CACF,EACA,CACE,YAAa,GACb,SAAU,OACV,MAAO,CACL,qCACA,0BACF,CACF,EACA,CACE,SAAU,QACV,YAAa,GACb,MAAO,CACL,yBACA,2DACF,CACF,EACA,CACE,SAAU,SACV,YAAa,GACb,MAAO,CAAC,6BAA8B,gCAAgC,CACxE,EACA,CACE,SAAU,OACV,YAAa,GACb,MAAO,CAAC,qBAAsB,8BAA8B,CAC9D,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EASMC,EAAaC,EAAM,WACvB,CAAC,CAAE,MAAAC,EAAQ,OAAQ,SAAAC,EAAW,SAAU,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAK,EAAGC,IAAQ,CAC1E,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,cAAAC,CAAc,EAAIT,EAAM,WAAWU,CAAY,EACjE,CAACC,EAAYC,CAAa,EAAIC,IACpCb,EAAM,oBAAoBM,EAAK,IAAMK,CAA4B,EAEjE,MAAMG,EAAQH,GAAA,KAAAA,OAAAA,EAAY,YAEpBI,EAAaC,EAAmB,SAASf,CAAK,EAE9CgB,EACJ,OAAO,KAAKZ,CAAI,EAAE,SAAS,SAAS,GACpC,OAAO,KAAKA,CAAI,EAAE,SAAS,MAAM,EAEnC,OACEL,EAAA,cAACkB,EAAA,CACC,WAAYV,IAAa,YAAcC,EACvC,MAAOK,CAEPd,EAAAA,EAAA,cAACH,EAAA,CACC,KAAK,SACL,SAAUK,EACV,KAAMK,EACN,MAAO,CACL,GAAGY,EAAkBlB,CAAK,EAC1B,GAAGG,CACL,EACC,GAAGC,EACJ,IAAKO,EACL,YAAaK,GAAe,CAACF,CAAAA,EAE5Bf,EAAM,SAAS,IAAIG,EAAWiB,GACzB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SACzCpB,EAAA,cAACqB,EAAA,KAAWD,CAAM,EAEvBpB,EAAM,eAAeoB,CAAK,GAAKA,EAAM,OAASE,EACzCtB,EAAA,cAACuB,EAAA,CAAW,GAAGH,EAAM,MAAO,EAE9BA,CACR,CACH,CACF,CAEJ,CACF,EAEMI,EAAiBxB,EAAM,WAC3B,CAAC,CAAE,KAAAO,EAAO,KAAM,SAAAC,EAAW,OAAQ,GAAGH,CAAK,EAAGC,IAE1CN,EAAA,cAACyB,EAAA,CAAc,KAAMlB,EAAM,SAAUC,GACnCR,EAAA,cAACD,EAAA,CAAY,GAAGM,EAAM,IAAKC,CAAAA,CAAK,CAClC,CAGN,EAEaoB,EAAQ,OAAO,OAAOF,EAAgB,CACjD,KAAMD,EACN,KAAMF,CACR,CAAC,EAEDG,EAAe,YAAc"}

package/dist/components/banner/BannerContainer.d.ts CHANGED Viewed

@@ -1,16 +1,8 @@
 import * as React from 'react';
 import { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 import { Dismissible } from '../dismissible';
-declare const StyledBannerContainer: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "gap" | "wrap" | "direction" | "align" | "justify"> & {
-    direction?: ("row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset">>) | undefined;
-    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-    justify?: ("end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-    align?: ("end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline">>) | undefined;
-    gap?: (0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24>>) | undefined;
-} & {
-    as?: React.ElementType;
+declare const StyledBannerContainer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void) | 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;

package/dist/components/banner/BannerContainer.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as e from"react";import{ColorScheme as t}from"../../experiments/color-scheme/ColorScheme.js";import{styled as i}from"../../styled.js";import{Dismissible as l}from"../dismissible/index.js";import{Flex as m}from"../flex/Flex.js";import{useBannerContext as d}from"./BannerContext.js";const c=i(m,{base:["relative","w-full","rounded-lg","overflow-hidden","text-(--foreground)","[--banner-heading-color:var(--color-foreground)]","[--banner-text-color:var(--color-grey-900)]"],variants:{emphasis:{bold:["[--banner-heading-color:var(--color-foreground-7-plus)]","[--banner-text-color:var(--color-grey-100)]","bg-(--base-11)","text-(--foreground-7-plus)"],subtle:["bg-(--base-3)"],minimal:["bg-(--base-1)"]},size:{sm:[],md:[]}}},{enabledResponsiveVariants:!0}),b=({colorScheme:r={},onDismiss:o,dismissed:s,...n})=>{const{emphasis:a}=d();return e.createElement(t,{...r,asChild:!0},e.createElement(l,{asChild:!0,onDismiss:o,dismissed:s},e.createElement(c,{role:"banner",emphasis:a,...n})))};export{b as BannerContainer};
+import*as e from"react";import{ColorScheme as t}from"../../experiments/color-scheme/ColorScheme.js";import{styled as i}from"../../styled.js";import{Dismissible as l}from"../dismissible/index.js";import{useBannerContext as m}from"./BannerContext.js";const d=i("section",{base:["flex","relative","w-full","rounded-lg","overflow-hidden","text-(--foreground)","[--banner-heading-color:var(--color-foreground)]","[--banner-text-color:var(--color-grey-900)]"],variants:{emphasis:{bold:["[--banner-heading-color:var(--color-foreground-7-plus)]","[--banner-text-color:var(--color-grey-100)]","bg-(--base-11)","text-(--foreground-7-plus)"],subtle:["bg-(--base-3)"],minimal:["bg-(--base-1)"]},size:{sm:[],md:[]}}},{enabledResponsiveVariants:!0}),c=({colorScheme:r={},onDismiss:o,dismissed:s,...n})=>{const{emphasis:a}=m();return e.createElement(t,{...r,asChild:!0},e.createElement(l,{asChild:!0,onDismiss:o,dismissed:s},e.createElement(d,{role:"banner",emphasis:a,...n})))};export{c as BannerContainer};
 //# sourceMappingURL=BannerContainer.js.map

package/dist/components/banner/BannerContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerContainer.js","sources":["../../../src/components/banner/BannerContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n ColorScheme,\n TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport { ~~Flex } from '../flex/Flex'\nimport {~~ useBannerContext } from './BannerContext'\n\nconst StyledBannerContainer = styled(\n ~~Flex~~,\n {\n base: [\n 'relative',\n 'w-full',\n 'rounded-lg',\n 'overflow-hidden',\n 'text-(--foreground)',\n '[--banner-heading-color:var(--color-foreground)]',\n '[--banner-text-color:var(--color-grey-900)]'\n ],\n variants: {\n emphasis: {\n bold: [\n '[--banner-heading-color:var(--color-foreground-7-plus)]',\n '[--banner-text-color:var(--color-grey-100)]',\n 'bg-(--base-11)',\n 'text-(--foreground-7-plus)'\n ],\n subtle: ['bg-(--base-3)'],\n minimal: ['bg-(--base-1)']\n },\n size: {\n sm: [],\n md: []\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\nexport type TBannerContainerProps = React.ComponentProps<\n typeof StyledBannerContainer\n> & {\n colorScheme?: TcolorScheme\n} & React.ComponentProps<typeof Dismissible>\n\nexport const BannerContainer = ({\n colorScheme = {},\n onDismiss,\n dismissed,\n ...props\n}: TBannerContainerProps): JSX.Element => {\n const { emphasis } = useBannerContext()\n\n return (\n <ColorScheme {...colorScheme} asChild>\n <Dismissible asChild onDismiss={onDismiss} dismissed={dismissed}>\n <StyledBannerContainer role=\"banner\" emphasis={emphasis} {...props} />\n </Dismissible>\n </ColorScheme>\n )\n}\n"],"names":["StyledBannerContainer","styled","~~Flex","~~BannerContainer","colorScheme","onDismiss","dismissed","props","emphasis","useBannerContext","React","ColorScheme","Dismissible"],"mappings":"~~gSAYA~~,MAAMA,EAAwBC,~~EAC5BC~~,~~EACA~~,CACE,KAAM,CACJ,WACA,SACA,aACA,kBACA,sBACA,mDACA,6CACF,EACA,SAAU,CACR,SAAU,CACR,KAAM,CACJ,0DACA,8CACA,iBACA,4BACF,EACA,OAAQ,CAAC,eAAe,EACxB,QAAS,CAAC,eAAe,CAC3B,EACA,KAAM,CACJ,GAAI,~~CACJ~~,~~EAAA~~,GAAI,~~EACN~~,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAQaC,EAAkB,CAAC,CAC9B,YAAAC,EAAc,~~GACd~~,UAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA0C,CACxC,KAAM,CAAE,SAAAC,CAAS,EAAIC,~~EAAiB~~,~~EAEtC~~,OACEC,EAAA,cAACC,EAAA,CAAa,GAAGP,EAAa,QAAO,EACnCM,~~EAAAA,~~EAAA,cAACE,EAAA,CAAY,QAAO,GAAC,UAAWP,EAAW,UAAWC,~~CACpDI~~,~~EAAAA~~,EAAA,~~cAACV~~,EAAA,CAAsB,KAAK,SAAS,~~SAAUQ~~,EAAW,GAAGD,CAAO,~~CAAA,~~CACtE,CACF,CAEJ"}
1	+ {"version":3,"file":"BannerContainer.js","sources":["../../../src/components/banner/BannerContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n ColorScheme,\n TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport { useBannerContext } from './BannerContext'\n\nconst StyledBannerContainer = styled(\n 'section',\n {\n base: [\n 'flex',\n 'relative',\n 'w-full',\n 'rounded-lg',\n 'overflow-hidden',\n 'text-(--foreground)',\n '[--banner-heading-color:var(--color-foreground)]',\n '[--banner-text-color:var(--color-grey-900)]'\n ],\n variants: {\n emphasis: {\n bold: [\n '[--banner-heading-color:var(--color-foreground-7-plus)]',\n '[--banner-text-color:var(--color-grey-100)]',\n 'bg-(--base-11)',\n 'text-(--foreground-7-plus)'\n ],\n subtle: ['bg-(--base-3)'],\n minimal: ['bg-(--base-1)']\n },\n size: {\n sm: [],\n md: []\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\nexport type TBannerContainerProps = React.ComponentProps<\n typeof StyledBannerContainer\n> & {\n colorScheme?: TcolorScheme\n} & React.ComponentProps<typeof Dismissible>\n\nexport const BannerContainer = ({\n colorScheme = {},\n onDismiss,\n dismissed,\n ...props\n}: TBannerContainerProps): JSX.Element => {\n const { emphasis } = useBannerContext()\n\n return (\n <ColorScheme {...colorScheme} asChild>\n <Dismissible asChild onDismiss={onDismiss} dismissed={dismissed}>\n <StyledBannerContainer role=\"banner\" emphasis={emphasis} {...props} />\n </Dismissible>\n </ColorScheme>\n )\n}\n"],"names":["StyledBannerContainer","styled","BannerContainer","colorScheme","onDismiss","dismissed","props","emphasis","useBannerContext","React","ColorScheme","Dismissible"],"mappings":"yPAWA,MAAMA,EAAwBC,EAC5B,UACA,CACE,KAAM,CACJ,OACA,WACA,SACA,aACA,kBACA,sBACA,mDACA,6CACF,EACA,SAAU,CACR,SAAU,CACR,KAAM,CACJ,0DACA,8CACA,iBACA,4BACF,EACA,OAAQ,CAAC,eAAe,EACxB,QAAS,CAAC,eAAe,CAC3B,EACA,KAAM,CACJ,GAAI,CAAA,EACJ,GAAI,CACN,CAAA,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAQaC,EAAkB,CAAC,CAC9B,YAAAC,EAAc,CAAC,EACf,UAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA0C,CACxC,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAAA,EAErB,OACEC,EAAA,cAACC,EAAA,CAAa,GAAGP,EAAa,QAAO,EAAA,EACnCM,EAAA,cAACE,EAAA,CAAY,QAAO,GAAC,UAAWP,EAAW,UAAWC,CAAAA,EACpDI,EAAA,cAACT,EAAA,CAAsB,KAAK,SAAS,SAAUO,EAAW,GAAGD,CAAAA,CAAO,CACtE,CACF,CAEJ"}

package/dist/components/banner/BannerContext.d.ts CHANGED Viewed

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { TBannerContainerProps } from './BannerContainer';
+type Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl';
+type ResponsiveSize = 'sm' | 'md' | Partial<Record<Breakpoint, 'sm' | 'md'>>;
 export type TBannerProviderProps = {
-    size?: TBannerContainerProps['size'];
+    size?: ResponsiveSize;
     emphasis?: TBannerContainerProps['emphasis'];
 };
 type TBannerContextValue = TBannerProviderProps & {

package/dist/components/banner/BannerContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerContext.js","sources":["../../../src/components/banner/BannerContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TBannerContainerProps } from './BannerContainer'\n\n// Extract size and emphasis props, preserving responsive variant types\nexport type TBannerProviderProps = {\n size?: ~~TBannerContainerProps['size']~~\n emphasis?: TBannerContainerProps['emphasis']\n}\n\ntype TBannerContextValue = TBannerProviderProps & {\n hasDismiss: boolean\n setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const BannerContext = React.createContext<TBannerContextValue>({\n emphasis: 'minimal',\n size: {\n '@initial': 'sm',\n '@md': 'md'\n } as unknown as TBannerProviderProps['size'],\n hasDismiss: false,\n setHasDismiss: () => null\n})\n\nexport const useBannerContext = (): TBannerContextValue => {\n const context = React.useContext(BannerContext)\n\n if (context === undefined) {\n throw new Error('useBannerContext must be used within a BannerProvider')\n }\n\n return context\n}\n\nexport const BannerProvider = ({\n emphasis = 'minimal',\n size = {\n '@initial': 'sm',\n '@md': 'md'\n } as unknown as TBannerProviderProps['size'],\n children\n}: React.PropsWithChildren<TBannerProviderProps>) => {\n const [hasDismiss, setHasDismiss] = React.useState(false)\n const value = React.useMemo<TBannerContextValue>(\n () => ({ emphasis, size, hasDismiss, setHasDismiss }),\n [emphasis, size, hasDismiss, setHasDismiss]\n )\n return (\n <BannerContext.Provider value={value}>{children}</BannerContext.Provider>\n )\n}\n\nBannerProvider.displayName = 'Banner'\n"],"names":["BannerContext","React","useBannerContext","context","BannerProvider","emphasis","size","children","hasDismiss","setHasDismiss","value"],"mappings":"~~wBAea~~,MAAAA,EAAgBC,EAAM,cAAmC,CACpE,SAAU,UACV,KAAM,CACJ,WAAY,KACZ,MAAO,IACT,EACA,WAAY,GACZ,cAAe,IAAM,IACvB,CAAC,EAEYC,EAAmB,IAA2B,CACzD,MAAMC,EAAUF,EAAM,WAAWD,CAAa,EAE9C,GAAIG,IAAY,OACd,MAAM,IAAI,MAAM,uDAAuD,EAGzE,OAAOA,CACT,EAEaC,EAAiB,CAAC,CAC7B,SAAAC,EAAW,UACX,KAAAC,EAAO,CACL,WAAY,KACZ,MAAO,IACT,EACA,SAAAC,CACF,IAAqD,CACnD,KAAM,CAACC,EAAYC,CAAa,EAAIR,EAAM,SAAS,EAAK,EAClDS,EAAQT,EAAM,QAClB,KAAO,CAAE,SAAAI,EAAU,KAAAC,EAAM,WAAAE,EAAY,cAAAC,CAAc,GACnD,CAACJ,EAAUC,EAAME,EAAYC,CAAa,CAC5C,EACA,OACER,EAAA,cAACD,EAAc,SAAd,CAAuB,MAAOU,GAAQH,CAAS,CAEpD,EAEAH,EAAe,YAAc"}
1	+ {"version":3,"file":"BannerContext.js","sources":["../../../src/components/banner/BannerContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TBannerContainerProps } from './BannerContainer'\n\ntype Breakpoint = '@initial' \| '@sm' \| '@md' \| '@lg' \| '@xl'\ntype ResponsiveSize = 'sm' \| 'md' \| Partial<Record<Breakpoint, 'sm' \| 'md'>>\n\n// Extract size and emphasis props, preserving responsive variant types\nexport type TBannerProviderProps = {\n size?: ResponsiveSize\n emphasis?: TBannerContainerProps['emphasis']\n}\n\ntype TBannerContextValue = TBannerProviderProps & {\n hasDismiss: boolean\n setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const BannerContext = React.createContext<TBannerContextValue>({\n emphasis: 'minimal',\n size: {\n '@initial': 'sm',\n '@md': 'md'\n } as unknown as TBannerProviderProps['size'],\n hasDismiss: false,\n setHasDismiss: () => null\n})\n\nexport const useBannerContext = (): TBannerContextValue => {\n const context = React.useContext(BannerContext)\n\n if (context === undefined) {\n throw new Error('useBannerContext must be used within a BannerProvider')\n }\n\n return context\n}\n\nexport const BannerProvider = ({\n emphasis = 'minimal',\n size = {\n '@initial': 'sm',\n '@md': 'md'\n } as unknown as TBannerProviderProps['size'],\n children\n}: React.PropsWithChildren<TBannerProviderProps>) => {\n const [hasDismiss, setHasDismiss] = React.useState(false)\n const value = React.useMemo<TBannerContextValue>(\n () => ({ emphasis, size, hasDismiss, setHasDismiss }),\n [emphasis, size, hasDismiss, setHasDismiss]\n )\n return (\n <BannerContext.Provider value={value}>{children}</BannerContext.Provider>\n )\n}\n\nBannerProvider.displayName = 'Banner'\n"],"names":["BannerContext","React","useBannerContext","context","BannerProvider","emphasis","size","children","hasDismiss","setHasDismiss","value"],"mappings":"wBAkBa,MAAAA,EAAgBC,EAAM,cAAmC,CACpE,SAAU,UACV,KAAM,CACJ,WAAY,KACZ,MAAO,IACT,EACA,WAAY,GACZ,cAAe,IAAM,IACvB,CAAC,EAEYC,EAAmB,IAA2B,CACzD,MAAMC,EAAUF,EAAM,WAAWD,CAAa,EAE9C,GAAIG,IAAY,OACd,MAAM,IAAI,MAAM,uDAAuD,EAGzE,OAAOA,CACT,EAEaC,EAAiB,CAAC,CAC7B,SAAAC,EAAW,UACX,KAAAC,EAAO,CACL,WAAY,KACZ,MAAO,IACT,EACA,SAAAC,CACF,IAAqD,CACnD,KAAM,CAACC,EAAYC,CAAa,EAAIR,EAAM,SAAS,EAAK,EAClDS,EAAQT,EAAM,QAClB,KAAO,CAAE,SAAAI,EAAU,KAAAC,EAAM,WAAAE,EAAY,cAAAC,CAAc,GACnD,CAACJ,EAAUC,EAAME,EAAYC,CAAa,CAC5C,EACA,OACER,EAAA,cAACD,EAAc,SAAd,CAAuB,MAAOU,GAAQH,CAAS,CAEpD,EAEAH,EAAe,YAAc"}

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

@@ -23,7 +23,7 @@ export declare const BannerRegular: {
         displayName: string;
     };
     Actions: {
-        ({ children, ...props }: React.ComponentProps<typeof import("../..").Flex>): React.JSX.Element;
+        ({ children, className, ...props }: React.PropsWithChildren<React.ComponentProps<"div">>): React.JSX.Element;
         displayName: string;
     };
     Image: {

package/dist/components/banner/banner-regular/BannerRegularActions.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Flex } from '../../flex/Flex';
 export declare const BannerRegularActions: {
-    ({ children, ...props }: React.ComponentProps<typeof Flex>): React.JSX.Element;
+    ({ children, className, ...props }: React.PropsWithChildren<React.ComponentProps<"div">>): React.JSX.Element;
     displayName: string;
 };

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

@@ -1,2 +1,2 @@
-import a from"invariant";import*as n from"react";import{overrideStyledVariantValue as m}from"../../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Flex as y}from"../../flex/Flex.js";import{useBannerContext as f}from"../BannerContext.js";import{BannerRegularButton as t}from"./BannerRegularButton.js";const l=2,h={sm:2,md:4},N={sm:"column",md:"row"},r=({children:i,...p})=>{const{size:o}=f(),s=n.useMemo(()=>m(o,e=>h[e]),[o]),d=n.useMemo(()=>m(o,e=>N[e]),[o]);return a(n.Children.count(i)<=l,`A maximum of ${l} ${t.displayName} component(s) are permitted as children of ${r.displayName}`),n.createElement(y,{gap:s,direction:d,...p},n.Children.map(i,(e,c)=>{if(e==null)return e;if(!n.isValidElement(e))throw new Error(`Child passed to ${r.displayName} is not a valid element`);a(e.type===t,`Children of type ${e==null?void 0:e.type} aren't permitted. Only an ${t.displayName} component is allowed in ${r.displayName}`);const u={appearance:c>0?"outline":void 0};return n.cloneElement(e,u)}))};r.displayName="BannerRegularActions";export{r as BannerRegularActions};
+import u from"clsx";import l from"invariant";import*as n from"react";import{useBannerContext as y}from"../BannerContext.js";import{BannerRegularButton as t}from"./BannerRegularButton.js";const i=2,g={sm:"gap-2",md:"gap-4"},x={sm:"flex-col",md:"flex-row"},a=({children:r,className:m,...s})=>{const{size:o}=y(),p=n.useMemo(()=>typeof o=="string"?g[o]:"gap-2 md:gap-4",[o]),d=n.useMemo(()=>typeof o=="string"?x[o]:"flex-col md:flex-row",[o]);return l(n.Children.count(r)<=i,`A maximum of ${i} ${t.displayName} component(s) are permitted as children of ${a.displayName}`),n.createElement("div",{className:u("flex",p,d,m),...s},n.Children.map(r,(e,c)=>{if(e==null)return e;if(!n.isValidElement(e))throw new Error(`Child passed to ${a.displayName} is not a valid element`);l(e.type===t,`Children of type ${e==null?void 0:e.type} aren't permitted. Only an ${t.displayName} component is allowed in ${a.displayName}`);const f={appearance:c>0?"outline":void 0};return n.cloneElement(e,f)}))};a.displayName="BannerRegularActions";export{a as BannerRegularActions};
 //# sourceMappingURL=BannerRegularActions.js.map

package/dist/components/banner/banner-regular/BannerRegularActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerRegularActions.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularActions.tsx"],"sourcesContent":["import ~~invariant~~ from '~~invariant~~'\nimport * ~~as React~~ from '~~react~~'\n\nimport { ~~overrideStyledVariantValue~~ } from '~~~/utilities/override-styled-variant-value/overrideStyledVariantValue~~'\n\nimport { ~~Flex } from '../../flex/Flex'\nimport {~~ useBannerContext } from '../BannerContext'\nimport { BannerRegularButton } from './BannerRegularButton'\n\nconst MAX_ALLOWED_CHILDREN = 2\n\nconst toGap = {\n sm: 2,\n md: 4\n}\n\nconst toDirection = {\n sm: '~~column~~',\n md: 'row'\n}\n\nexport const BannerRegularActions = ({\n children,\n ...props\n}: React.ComponentProps<~~typeof Flex>~~) => {\n const { size } = useBannerContext()\n\n const gap = React.useMemo(\n () => ~~overrideStyledVariantValue~~(size, (s) => toGap[s]~~),\~~n [size]\n )\n\n const direction = React.useMemo(\n () => ~~overrideStyledVariantValue~~(size, (s) => toDirection[s]~~),\~~n [size]\n )\n\n invariant(\n React.Children.count(children) <= MAX_ALLOWED_CHILDREN,\n `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`\n )\n\n return (\n <~~Flex~~ ~~gap~~={gap} direction~~={direction~~} {...props}>\n {React.Children.map(children, (child, index) => {\n // if child is undefined or null, React.isValidElement returns false and hence error is thrown.\n // This line will prevent that from happening\n if (child == null) return child\n\n if (!React.isValidElement(child)) {\n throw new Error(\n `Child passed to ${BannerRegularActions.displayName} is not a valid element`\n )\n }\n\n invariant(\n child.type === BannerRegularButton,\n `Children of type ${child?.type} aren't permitted. Only an ${BannerRegularButton.displayName} component is allowed in ${BannerRegularActions.displayName}`\n )\n\n const propsToInject: Partial<\n React.ComponentProps<typeof BannerRegularButton>\n > = {\n // Override button appearance - make the second button outlined\n appearance: index > 0 ? 'outline' : undefined\n }\n\n return React.cloneElement(\n child as React.ReactElement<\n React.ComponentProps<typeof BannerRegularButton>\n >,\n propsToInject\n )\n })}\n </~~Flex~~>\n )\n}\n\nBannerRegularActions.displayName = 'BannerRegularActions'\n"],"names":["MAX_ALLOWED_CHILDREN","toGap","toDirection","BannerRegularActions","children","props","size","useBannerContext","gap","React","~~overrideStyledVariantValue","s","~~direction","invariant","BannerRegularButton","~~Flex~~","child","index","propsToInject"],"mappings":"~~6UASA~~,MAAMA,EAAuB,EAEvBC,EAAQ,CACZ,GAAI,~~EACJ~~,GAAI,~~CACN~~,EAEMC,EAAc,CAClB,GAAI,~~SACJ~~,GAAI,~~KACN~~,EAEaC,EAAuB,CAAC,CACnC,SAAAC,EACA,GAAGC,CACL,~~IAAyC~~,~~CACvC~~,KAAM,CAAE,KAAAC,CAAK,EAAIC,~~EAAAA~~,~~EAEXC,~~EAAMC,EAAM,~~QAChB~~,~~IAAMC~~,~~EAA2BJ~~,~~EAAOK~~,~~GAAMV~~,~~EAAMU~~,~~CAAC~~,~~CAAC~~,~~EACtD~~,~~CAACL~~,CAAI,~~CACP~~,~~EAEMM~~,~~EAAYH~~,EAAM,~~QACtB~~,~~IAAMC~~,~~EAA2BJ~~,~~EAAOK~~,~~GAAMT~~,~~EAAYS~~,~~CAAC~~,~~CAAC~~,~~EAC5D~~,~~CAACL~~,CAAI,~~CACP~~,~~EAEA~~,~~OAAAO~~,~~EACEJ~~,EAAM,SAAS,~~MAAML~~,CAAQ,GAAKJ,EAClC,gBAAgBA,CAAoB,~~IAAIc~~,EAAoB,WAAW,~~8CAA8CX~~,EAAqB,WAAW,EACvJ,~~EAGEM~~,EAAA,~~cAACM~~,~~EAAA~~,~~CAAK~~,~~IAAKP~~,EAAK,~~UAAWI~~,~~EAAY~~,~~GAAGP~~,~~GACvCI~~,EAAM,SAAS,~~IAAIL~~,EAAU,~~CAACY~~,EAAOC,IAAU,CAG9C,GAAID,GAAS,KAAM,OAAOA,EAE1B,GAAI,~~CAACP~~,EAAM,~~eAAeO~~,CAAK,EAC7B,MAAM,IAAI,MACR,~~mBAAmBb~~,EAAqB,WAAW,yBACrD,~~EAGFU~~,EACEG,EAAM,OAASF,EACf,oBAAoBE,GAAA,KAAA,OAAAA,EAAO,IAAI,8BAA8BF,EAAoB,WAAW,~~4BAA4BX~~,EAAqB,WAAW,EAC1J,EAEA,~~MAAMe~~,EAEF,CAEF,WAAYD,EAAQ,EAAI,UAAY,MACtC,EAEA,~~OAAOR~~,EAAM,~~aACXO~~,EAGAE,CACF,CACF,CAAC,CACH,CAEJ,~~EAEAf~~,EAAqB,YAAc"}
1	+ {"version":3,"file":"BannerRegularActions.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularActions.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { useBannerContext } from '../BannerContext'\nimport { BannerRegularButton } from './BannerRegularButton'\n\nconst MAX_ALLOWED_CHILDREN = 2\n\nconst toGap = {\n sm: 'gap-2',\n md: 'gap-4'\n}\n\nconst toDirection = {\n sm: 'flex-col',\n md: 'flex-row'\n}\n\nexport const BannerRegularActions = ({\n children,\n className,\n ...props\n}: React.PropsWithChildren<React.ComponentProps<'div'>>) => {\n const { size } = useBannerContext()\n\n const gap = React.useMemo(() => {\n if (typeof size === 'string') {\n return toGap[size]\n }\n return 'gap-2 md:gap-4'\n }, [size])\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 invariant(\n React.Children.count(children) <= MAX_ALLOWED_CHILDREN,\n `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`\n )\n\n return (\n <div className={clsx('flex', gap, direction, className)} {...props}>\n {React.Children.map(children, (child, index) => {\n // if child is undefined or null, React.isValidElement returns false and hence error is thrown.\n // This line will prevent that from happening\n if (child == null) return child\n\n if (!React.isValidElement(child)) {\n throw new Error(\n `Child passed to ${BannerRegularActions.displayName} is not a valid element`\n )\n }\n\n invariant(\n child.type === BannerRegularButton,\n `Children of type ${child?.type} aren't permitted. Only an ${BannerRegularButton.displayName} component is allowed in ${BannerRegularActions.displayName}`\n )\n\n const propsToInject: Partial<\n React.ComponentProps<typeof BannerRegularButton>\n > = {\n // Override button appearance - make the second button outlined\n appearance: index > 0 ? 'outline' : undefined\n }\n\n return React.cloneElement(\n child as React.ReactElement<\n React.ComponentProps<typeof BannerRegularButton>\n >,\n propsToInject\n )\n })}\n </div>\n )\n}\n\nBannerRegularActions.displayName = 'BannerRegularActions'\n"],"names":["MAX_ALLOWED_CHILDREN","toGap","toDirection","BannerRegularActions","children","className","props","size","useBannerContext","gap","React","direction","invariant","BannerRegularButton","clsx","child","index","propsToInject"],"mappings":"2LAOA,MAAMA,EAAuB,EAEvBC,EAAQ,CACZ,GAAI,QACJ,GAAI,OACN,EAEMC,EAAc,CAClB,GAAI,WACJ,GAAI,UACN,EAEaC,EAAuB,CAAC,CACnC,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA4D,CAC1D,KAAM,CAAE,KAAAC,CAAK,EAAIC,IAEXC,EAAMC,EAAM,QAAQ,IACpB,OAAOH,GAAS,SACXN,EAAMM,CAAI,EAEZ,iBACN,CAACA,CAAI,CAAC,EAEHI,EAAYD,EAAM,QAAQ,IAC1B,OAAOH,GAAS,SACXL,EAAYK,CAAI,EAElB,uBACN,CAACA,CAAI,CAAC,EAET,OAAAK,EACEF,EAAM,SAAS,MAAMN,CAAQ,GAAKJ,EAClC,gBAAgBA,CAAoB,IAAIa,EAAoB,WAAW,8CAA8CV,EAAqB,WAAW,EACvJ,EAGEO,EAAA,cAAC,MAAI,CAAA,UAAWI,EAAK,OAAQL,EAAKE,EAAWN,CAAS,EAAI,GAAGC,CAAAA,EAC1DI,EAAM,SAAS,IAAIN,EAAU,CAACW,EAAOC,IAAU,CAG9C,GAAID,GAAS,KAAM,OAAOA,EAE1B,GAAI,CAACL,EAAM,eAAeK,CAAK,EAC7B,MAAM,IAAI,MACR,mBAAmBZ,EAAqB,WAAW,yBACrD,EAGFS,EACEG,EAAM,OAASF,EACf,oBAAoBE,GAAA,KAAA,OAAAA,EAAO,IAAI,8BAA8BF,EAAoB,WAAW,4BAA4BV,EAAqB,WAAW,EAC1J,EAEA,MAAMc,EAEF,CAEF,WAAYD,EAAQ,EAAI,UAAY,MACtC,EAEA,OAAON,EAAM,aACXK,EAGAE,CACF,CACF,CAAC,CACH,CAEJ,EAEAd,EAAqB,YAAc"}

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

@@ -5,22 +5,11 @@ export declare const BannerSlim: {
     ({ colorScheme, size, emphasis, onDismiss, ...rest }: React.ComponentProps<typeof Banner> & React.ComponentProps<typeof BannerContainer>): React.JSX.Element;
     displayName: string;
 } & {
-    Content: {
-        (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-        }, "gap" | "wrap" | "direction" | "align" | "justify"> & {
-            direction?: ("row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset">>) | undefined;
-            wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-            justify?: ("end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-            align?: ("end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline">>) | undefined;
-            gap?: (0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24>>) | undefined;
-        } & {
-            as?: React.ElementType;
-        }, never> & {
-            as?: React.ElementType;
-        }>>): React.JSX.Element;
-        displayName: string;
-    };
+    Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, never> & {
+        as?: React.ElementType;
+    }>;
     Text: {
         (props: React.ComponentProps<typeof import("../..").Text>): React.JSX.Element;
         displayName: string;
@@ -320,7 +309,13 @@ export declare const BannerSlim: {
         displayName: string;
     };
     Actions: {
-        ({ children, ...props }: React.ComponentProps<typeof import("../..").Flex>): React.JSX.Element;
+        ({ 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;
+        }, "size"> & {
+            size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
+        } & {
+            as?: React.ElementType;
+        }>>): React.JSX.Element;
         displayName: string;
     };
 };

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

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Flex } from '../../flex/Flex';
+declare const StyledBannerSlimActions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "size"> & {
+    size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
+} & {
+    as?: React.ElementType;
+}>;
 export declare const BannerSlimActions: {
-    ({ children, ...props }: React.ComponentProps<typeof Flex>): React.JSX.Element;
+    ({ children, ...props }: React.ComponentProps<typeof StyledBannerSlimActions>): React.JSX.Element;
     displayName: string;
 };
+export {};

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

@@ -1,2 +1,2 @@
-import*as s from"react";import{styled as o}from"../../../styled.js";import{Flex as a}from"../../flex/Flex.js";import{useBannerContext as i}from"../BannerContext.js";const m=o(a,{base:[],variants:{size:{sm:["w-full"],md:["w-auto"]}}},{enabledResponsiveVariants:!0}),e=({children:t,...n})=>{const{size:r}=i();return s.createElement(m,{size:r,gap:4,...n},t)};e.displayName="BannerSlimActions";export{e as BannerSlimActions};
+import*as r from"react";import{styled as i}from"../../../styled.js";import{useBannerContext as a}from"../BannerContext.js";const o=i("div",{base:["flex","gap-4"],variants:{size:{sm:["w-full"],md:["w-auto"]}}},{enabledResponsiveVariants:!0}),e=({children:n,...t})=>{const{size:s}=a();return r.createElement(o,{size:s,...t},n)};e.displayName="BannerSlimActions";export{e as BannerSlimActions};
 //# sourceMappingURL=BannerSlimActions.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerSlimActions.js","sources":["../../../../src/components/banner/banner-slim/BannerSlimActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ~~Flex } from '../../flex/Flex'\nimport {~~ useBannerContext } from '../BannerContext'\n\nconst StyledBannerSlimActions = styled(\n ~~Flex~~,\n {\n base: [],\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 ~~Flex~~>) => {\n const { size } = useBannerContext()\n return (\n <StyledBannerSlimActions size={size} ~~gap=~~{~~4} {~~...props}>\n {children}\n </StyledBannerSlimActions>\n )\n}\n\nBannerSlimActions.displayName = 'BannerSlimActions'\n"],"names":["StyledBannerSlimActions","styled","~~Flex","~~BannerSlimActions","children","props","size","useBannerContext","React"],"mappings":"~~qKAOA~~,MAAMA,EAA0BC,~~EAC9BC~~,~~EACA~~,CACE,KAAM,~~GACN~~,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,CACf,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEaC,EAAoB,CAAC,CAChC,SAAAC,EACA,GAAGC,CACL,~~IAAyC~~,~~CACvC~~,KAAM,CAAE,KAAAC,CAAK,EAAIC,~~EAAAA~~,~~EACjB,~~OACEC,EAAA,~~cAACR~~,EAAA,CAAwB,~~KAAMM~~,~~EAAM~~,~~IAAK,EAAI,~~GAAGD,~~CAC9CD~~,EAAAA,CACH,CAEJ,EAEAD,EAAkB,YAAc"}
1	+ {"version":3,"file":"BannerSlimActions.js","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"],"names":["StyledBannerSlimActions","styled","BannerSlimActions","children","props","size","useBannerContext","React"],"mappings":"2HAMA,MAAMA,EAA0BC,EAC9B,MACA,CACE,KAAM,CAAC,OAAQ,OAAO,EACtB,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,CACf,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEaC,EAAoB,CAAC,CAChC,SAAAC,EACA,GAAGC,CACL,IAA4D,CAC1D,KAAM,CAAE,KAAAC,CAAK,EAAIC,IACjB,OACEC,EAAA,cAACP,EAAA,CAAwB,KAAMK,EAAO,GAAGD,CACtCD,EAAAA,CACH,CAEJ,EAEAD,EAAkB,YAAc"}

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

@@ -1,14 +1,6 @@
 import * as React from 'react';
-declare const StyledBannerSlimContainer: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "gap" | "wrap" | "direction" | "align" | "justify"> & {
-    direction?: ("row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset">>) | undefined;
-    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-    justify?: ("end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-    align?: ("end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline">>) | undefined;
-    gap?: (0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24>>) | undefined;
-} & {
-    as?: React.ElementType;
+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;
 }, "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;
@@ -23,7 +15,7 @@ declare const StyledBannerSlimContainer: React.ForwardRefExoticComponent<Omit<Om
 } & {
     as?: React.ElementType;
 }>;
-type TBannerSlimContainerProps = Omit<React.ComponentProps<typeof StyledBannerSlimContainer>, 'direction' | 'align' | 'wrap' | 'gap' | 'justify'>;
+type TBannerSlimContainerProps = React.ComponentProps<typeof StyledBannerSlimContainer>;
 export declare const BannerSlimContainer: {
     (props: TBannerSlimContainerProps): JSX.Element;
     displayName: string;

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

@@ -1,2 +1,2 @@
-import*as n from"react";import{styled as p}from"../../../styled.js";import{overrideStyledVariantValue as o}from"../../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{BannerContainer as d}from"../BannerContainer.js";import{useBannerContext as l}from"../BannerContext.js";const u={sm:"column",md:"row"},c={sm:"flex-start",md:"center"},f={sm:"wrap",md:"nowrap"},w=p(d,{base:["p-4"],variants:{sizeWorkaround:{sm:[],md:["px-6"]}}},{enabledResponsiveVariants:!0}),a=m=>{const{size:e}=l(),t=n.useMemo(()=>o(e,r=>u[r]),[e]),s=n.useMemo(()=>o(e,r=>c[r]),[e]),i=n.useMemo(()=>o(e,r=>f[r]),[e]);return n.createElement(w,{direction:t,align:s,sizeWorkaround:e,gap:4,wrap:i,...m})};a.displayName="BannerSlimContainer";export{a as BannerSlimContainer};
+import a from"clsx";import*as r from"react";import{styled as i}from"../../../styled.js";import{BannerContainer as p}from"../BannerContainer.js";import{useBannerContext as l}from"../BannerContext.js";const f={sm:"flex-col",md:"flex-row"},d={sm:"items-start",md:"items-center"},c={sm:"flex-wrap",md:"flex-nowrap"},x=i(p,{base:["p-4"],variants:{sizeWorkaround:{sm:[],md:["px-6"]}}},{enabledResponsiveVariants:!0}),o=t=>{const{size:e}=l(),s=r.useMemo(()=>typeof e=="string"?f[e]:"flex-col md:flex-row",[e]),m=r.useMemo(()=>typeof e=="string"?d[e]:"items-start md:items-center",[e]),n=r.useMemo(()=>typeof e=="string"?c[e]:"flex-wrap md:flex-nowrap",[e]);return r.createElement(x,{sizeWorkaround:e,className:a(s,m,"gap-4",n,t.className),...t})};o.displayName="BannerSlimContainer";export{o as BannerSlimContainer};
 //# sourceMappingURL=BannerSlimContainer.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerSlimContainer.js","sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import * ~~as React~~ from '~~react~~'\n\nimport { ~~styled~~ } from '~~~/styled~~'\nimport { ~~overrideStyledVariantValue~~ } from '~/~~utilities/override-~~styled~~-variant-value/overrideStyledVariantValue~~'\n\nimport { BannerContainer } from '../BannerContainer'\nimport { useBannerContext } from '../BannerContext'\n\nconst toDirection = {\n sm: '~~column~~',\n md: 'row'\n}\n\nconst toAlign = {\n sm: '~~flex~~-start',\n md: 'center'\n}\n\nconst toWrap = {\n sm: 'wrap',\n md: '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 = ~~Omit~~<\n ~~React.ComponentProps<~~typeof StyledBannerSlimContainer~~>,\n 'direction' \| 'align' \| 'wrap' \| 'gap' \| 'justify'~~\n>\n\nexport const BannerSlimContainer = (\n props: TBannerSlimContainerProps\n): JSX.Element => {\n const { size } = useBannerContext()\n\n const direction = React.useMemo(\n () => ~~overrideStyledVariantValue~~(size, (s) => toDirection[s]~~),\~~n [size]\n )\n\n const align = React.useMemo(\n () => ~~overrideStyledVariantValue~~(size, (s) => toAlign[s]~~),\~~n [size]\n )\n\n const wrap = React.useMemo(\n () => ~~overrideStyledVariantValue~~(size, (s) => toWrap[s]~~),\~~n [size]\n )\n\n return (\n <StyledBannerSlimContainer\n ~~direction~~={~~direction~~}\n ~~align~~={align~~}\n sizeWorkaround={size}\n~~ gap={4~~}\n~~ wrap~~={wrap~~}\n {...props}\n />\n )\n}\n\nBannerSlimContainer.displayName = 'BannerSlimContainer'\n"],"names":["toDirection","toAlign","toWrap","StyledBannerSlimContainer","styled","BannerContainer","BannerSlimContainer","props","size","useBannerContext","direction","React","~~overrideStyledVariantValue~~","s","~~align~~"~~,"wrap"~~],"mappings":"~~+SAQA~~,MAAMA,EAAc,CAClB,GAAI,~~SACJ~~,GAAI,~~KACN~~,EAEMC,EAAU,CACd,GAAI,~~aACJ~~,GAAI,~~QACN~~,EAEMC,EAAS,CACb,GAAI,~~OACJ~~,GAAI,~~QACN~~,EAEMC,EAA4BC,EAChCC,EACA,CACE,KAAM,CAAC,KAAK,EACZ,SAAU,CACR,eAAgB,CACd,GAAI,CAAA,EACJ,GAAI,CAAC,MAAM,CACb,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,~~EAOaC~~,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,~~IAEXC~~,EAAYC,EAAM,~~QACtB~~,~~IAAMC~~,~~EAA2BJ~~,~~EAAOK~~,~~GAAMb~~,~~EAAYa~~,~~CAAC~~,~~CAAC~~,~~EAC5D~~,~~CAACL~~,CAAI,~~CACP~~,~~EAEMM~~,~~EAAQH~~,EAAM,~~QAClB~~,~~IAAMC~~,~~EAA2BJ~~,~~EAAOK~~,~~GAAMZ~~,~~EAAQY~~,~~CAAC~~,~~CAAC~~,~~EACxD~~,~~CAACL~~,CAAI,~~CACP~~,~~EAEMO~~,~~EAAOJ~~,EAAM,~~QACjB~~,~~IAAMC~~,~~EAA2BJ~~,~~EAAOK~~,~~GAAMX~~,~~EAAOW~~,~~CAAC~~,~~CAAC~~,~~EACvD~~,~~CAACL~~,CAAI,~~CACP~~,~~EAEA~~,OACEG,EAAA,cAACR,EAAA,CACC,~~UAAWO~~,~~EACX~~,~~MAAOI~~,~~EACP~~,~~eAAgBN~~,~~EAChB~~,~~IAAK~~,~~EACL~~,~~KAAMO~~,~~EACL~~,~~GAAGR~~,CAAAA,CACN,CAEJ,EAEAD,EAAoB,YAAc"}
1	+ {"version":3,"file":"BannerSlimContainer.js","sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } 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 props: TBannerSlimContainerProps\n): 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 sizeWorkaround={size}\n className={clsx(direction, align, 'gap-4', wrap, props.className)}\n {...props}\n />\n )\n}\n\nBannerSlimContainer.displayName = 'BannerSlimContainer'\n"],"names":["toDirection","toAlign","toWrap","StyledBannerSlimContainer","styled","BannerContainer","BannerSlimContainer","props","size","useBannerContext","direction","React","align","wrap","clsx"],"mappings":"uMAQA,MAAMA,EAAc,CAClB,GAAI,WACJ,GAAI,UACN,EAEMC,EAAU,CACd,GAAI,cACJ,GAAI,cACN,EAEMC,EAAS,CACb,GAAI,YACJ,GAAI,aACN,EAEMC,EAA4BC,EAChCC,EACA,CACE,KAAM,CAAC,KAAK,EACZ,SAAU,CACR,eAAgB,CACd,GAAI,CAAA,EACJ,GAAI,CAAC,MAAM,CACb,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAMaC,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAiB,EAE5BC,EAAYC,EAAM,QAAQ,IAC1B,OAAOH,GAAS,SACXR,EAAYQ,CAAI,EAElB,uBACN,CAACA,CAAI,CAAC,EAEHI,EAAQD,EAAM,QAAQ,IACtB,OAAOH,GAAS,SACXP,EAAQO,CAAI,EAEd,8BACN,CAACA,CAAI,CAAC,EAEHK,EAAOF,EAAM,QAAQ,IACrB,OAAOH,GAAS,SACXN,EAAOM,CAAI,EAEb,2BACN,CAACA,CAAI,CAAC,EAET,OACEG,EAAA,cAACR,EAAA,CACC,eAAgBK,EAChB,UAAWM,EAAKJ,EAAWE,EAAO,QAASC,EAAMN,EAAM,SAAS,EAC/D,GAAGA,CAAAA,CACN,CAEJ,EAEAD,EAAoB,YAAc"}

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

@@ -1,19 +1,5 @@
-import * as React from 'react';
-declare const StyledBannerSlimContent: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "gap" | "wrap" | "direction" | "align" | "justify"> & {
-    direction?: ("row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset">>) | undefined;
-    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-    justify?: ("end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-    align?: ("end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline">>) | undefined;
-    gap?: (0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24>>) | undefined;
-} & {
-    as?: React.ElementType;
+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;
 }, never> & {
-    as?: React.ElementType;
+    as?: import("react").ElementType;
 }>;
-export declare const BannerSlimContent: {
-    (props: React.ComponentProps<typeof StyledBannerSlimContent>): React.JSX.Element;
-    displayName: string;
-};
-export {};

package/dist/components/banner/banner-slim/BannerSlimContent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as n from"react";import{styled as r}from"../../../styled.js";import{Flex as o}from"../../flex/Flex.js";const m=r(o,{base:["w-full"]}),e=t=>n.createElement(m,{align:"center",gap:4,...t});e.displayName="BannerSlimContent";export{e as BannerSlimContent};
+import{styled as n}from"../../../styled.js";const e=n("div",{base:["w-full","flex","items-center","gap-4"]});e.displayName="BannerSlimContent";export{e as BannerSlimContent};
 //# sourceMappingURL=BannerSlimContent.js.map

package/dist/components/banner/banner-slim/BannerSlimContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerSlimContent.js","sources":["../../../../src/components/banner/banner-slim/BannerSlimContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\~~nimport~~ { ~~Flex~~ ~~} from '../../flex/Flex'\n\nconst StyledBannerSlimContent~~ = styled(~~Flex~~, {\n base: ['w-full'~~]\n})\n\nexport~~ ~~const~~ ~~BannerSlimContent~~ ~~= (~~\n ~~props: React.ComponentProps<typeof StyledBannerSlimContent>\n~~) ~~=> <StyledBannerSlimContent align=\"center~~\~~" gap={4} {...props} />\~~n\nBannerSlimContent.displayName = 'BannerSlimContent'\n"],"names":["~~StyledBannerSlimContent~~","styled"~~,"Flex","BannerSlimContent","props","React"~~],"mappings":"~~8GAMA~~,~~MAAMA~~,~~EAA0BC~~,~~EAAOC~~,~~EAAM~~,~~CAC3C,~~KAAM,CAAC,~~QAAQ~~,~~CACjB~~,~~CAAC~~,~~EAEYC~~,~~EACXC~~,~~GACGC~~,~~EAAA~~,~~cAACL,EAAA,CAAwB,MAAM,SAAS,IAAK,EAAI,GAAGI,CAAO,CAAA,EAEhED,~~EAAkB,YAAc"}
1	+ {"version":3,"file":"BannerSlimContent.js","sources":["../../../../src/components/banner/banner-slim/BannerSlimContent.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const BannerSlimContent = styled('div', {\n base: ['w-full', 'flex', 'items-center', 'gap-4']\n})\n\nBannerSlimContent.displayName = 'BannerSlimContent'\n"],"names":["BannerSlimContent","styled"],"mappings":"kDAEaA,EAAoBC,EAAO,MAAO,CAC7C,KAAM,CAAC,SAAU,OAAQ,eAAgB,OAAO,CAClD,CAAC,EAEDD,EAAkB,YAAc"}

package/dist/components/calendar/Calendar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{ChevronLeft as _,ChevronRight as j}from"@atom-learning/icons";import H from"clsx";import{useDayzed as q}from"dayzed";import*as e from"react";import{ActionIcon as k}from"../action-icon/ActionIcon.js";import{Button as D}from"../button/Button.js";import{Flex as N}from"../flex/Flex.js";import{Icon as $}from"../icon/Icon.js";import{Text as G}from"../text/Text.js";import{styled as J}from"../../styled.js";import{monthNamesShort as K,weekdayNamesShort as Q,DEFAULT_LABELS as V}from"./constants.js";import{Day as X}from"./Day.js";const Z=J(D,{base:["text-grey-1000","p-3","w-16"],variants:{selected:{false:["disabled:bg-white!","font-normal","hover:bg-grey-200!","hover:text-grey-1000!","text-grey-1000!"]}}}),ee=(c,i)=>{const g=c.slice(0,i);return c.slice(i).concat(g)},w=({className:c,refDateSelected:i,refDateToday:g,firstDayOfWeek:y=0,monthNames:Y=K,weekdayNames:F=Q,labels:h=V,date:s=new Date,minDate:m,maxDate:o,setYear:C,...S})=>{const[r,f]=e.useState(!1),[n,E]=e.useState(s==null?void 0:s.getFullYear()),z=t=>{const a=s;a.setFullYear(t),C(a),f(!1)},A=m&&n-16<=m.getFullYear(),L=o&&n>=o.getFullYear(),O=Array.from({length:16},(t,a)=>{const l=n-a;return o&&l>o.getFullYear()||m&&l<m.getFullYear()?0:l}),{calendars:d,getBackProps:T,getForwardProps:B,getDateProps:M}=q({firstDayOfWeek:y,showOutsideDays:!0,date:s,minDate:m,maxDate:o,...S});return d.length?e.createElement("div",{className:H("relative","w-fit","-mt-1",c)},e.createElement(N,{className:"absolute top-0 -right-1"},e.createElement(k,{label:h[r?"previousYear":"previous"],theme:"neutral",size:"md",...!r&&T({calendars:d}),...r&&{onClick:()=>E(n-16)},disabled:r&&A},e.createElement($,{is:_})),e.createElement(k,{label:h[r?"nextYear":"next"],theme:"neutral",size:"md",...!r&&B({calendars:d}),...r&&{onClick:()=>E(n+16)},disabled:r&&L},e.createElement($,{is:j}))),r&&e.createElement("div",{className:"grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]"},O.map((t,a)=>{const l=t===s.getFullYear();return t?e.createElement(Z,{key:`${t}${a}`,theme:l?"primary":"neutral",onClick:()=>z(t),selected:l},t):e.createElement("div",{key:a,className:"h-10 w-16"})})),!r&&d.map(({month:t,year:a,weeks:l})=>e.createElement("div",{key:`${t}${a}`},e.createElement(N,{className:"mb-4 h-10 items-center"},e.createElement(D,{theme:"neutral",onClick:()=>f(!0),className:"text-grey-1000 px-0"},Y[t]," ",a)),e.createElement("div",{className:"mb-3 grid grid-cols-7 gap-x-2 gap-y-1"},ee(F,y).map(p=>e.createElement(G,{as:"span",size:"sm",weight:"bold",key:`${t}${a}${p}`,className:"text-center"},p))),e.createElement("div",{className:"grid grid-cols-7 gap-x-2 gap-y-1"},l.map((p,I)=>p.map((u,P)=>{const v=`${t}${a}${I}${P}`;if(!u)return e.createElement("div",{key:v});const{date:W,selected:x,today:b,prevMonth:R,nextMonth:U}=u;return e.createElement(X,{isOutsideMonth:R||U,isSelected:x,isToday:b,key:v,ref:x?i:b?g:null,...M({dateObj:u}),type:"button"},W.getDate())})))))):null};w.displayName="Calendar";export{w as Calendar};
+import{ChevronLeft as j,ChevronRight as H}from"@atom-learning/icons";import R from"clsx";import{useDayzed as U}from"dayzed";import*as e from"react";import{ActionIcon as k}from"../action-icon/ActionIcon.js";import{Button as D}from"../button/Button.js";import{Icon as N}from"../icon/Icon.js";import{Text as Z}from"../text/Text.js";import{styled as q}from"../../styled.js";import{monthNamesShort as G,weekdayNamesShort as J,DEFAULT_LABELS as K}from"./constants.js";import{Day as Q}from"./Day.js";const V=q(D,{base:["text-grey-1000","p-3","w-16"],variants:{selected:{false:["disabled:bg-white!","font-normal","hover:bg-grey-200!","hover:text-grey-1000!","text-grey-1000!"]}}}),X=(i,c)=>{const g=i.slice(0,c);return i.slice(c).concat(g)},$=({className:i,refDateSelected:c,refDateToday:g,firstDayOfWeek:y=0,monthNames:w=G,weekdayNames:Y=J,labels:h=K,date:s=new Date,minDate:m,maxDate:o,setYear:F,...C})=>{const[r,f]=e.useState(!1),[n,E]=e.useState(s==null?void 0:s.getFullYear()),S=t=>{const a=s;a.setFullYear(t),F(a),f(!1)},z=m&&n-16<=m.getFullYear(),A=o&&n>=o.getFullYear(),L=Array.from({length:16},(t,a)=>{const l=n-a;return o&&l>o.getFullYear()||m&&l<m.getFullYear()?0:l}),{calendars:d,getBackProps:O,getForwardProps:T,getDateProps:B}=U({firstDayOfWeek:y,showOutsideDays:!0,date:s,minDate:m,maxDate:o,...C});return d.length?e.createElement("div",{className:R("relative","w-fit","-mt-1",i)},e.createElement("div",{className:"absolute top-0 -right-1 flex"},e.createElement(k,{label:h[r?"previousYear":"previous"],theme:"neutral",size:"md",...!r&&O({calendars:d}),...r&&{onClick:()=>E(n-16)},disabled:r&&z},e.createElement(N,{is:j})),e.createElement(k,{label:h[r?"nextYear":"next"],theme:"neutral",size:"md",...!r&&T({calendars:d}),...r&&{onClick:()=>E(n+16)},disabled:r&&A},e.createElement(N,{is:H}))),r&&e.createElement("div",{className:"grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]"},L.map((t,a)=>{const l=t===s.getFullYear();return t?e.createElement(V,{key:`${t}${a}`,theme:l?"primary":"neutral",onClick:()=>S(t),selected:l},t):e.createElement("div",{key:a,className:"h-10 w-16"})})),!r&&d.map(({month:t,year:a,weeks:l})=>e.createElement("div",{key:`${t}${a}`},e.createElement("div",{className:"mb-4 flex h-10 items-center"},e.createElement(D,{theme:"neutral",onClick:()=>f(!0),className:"text-grey-1000 px-0"},w[t]," ",a)),e.createElement("div",{className:"mb-3 grid grid-cols-7 gap-x-2 gap-y-1"},X(Y,y).map(p=>e.createElement(Z,{as:"span",size:"sm",weight:"bold",key:`${t}${a}${p}`,className:"text-center"},p))),e.createElement("div",{className:"grid grid-cols-7 gap-x-2 gap-y-1"},l.map((p,M)=>p.map((u,P)=>{const x=`${t}${a}${M}${P}`;if(!u)return e.createElement("div",{key:x});const{date:W,selected:v,today:b,prevMonth:I,nextMonth:_}=u;return e.createElement(Q,{isOutsideMonth:I||_,isSelected:v,isToday:b,key:x,ref:v?c:b?g:null,...B({dateObj:u}),type:"button"},W.getDate())})))))):null};$.displayName="Calendar";export{$ as Calendar};
 //# sourceMappingURL=Calendar.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.js","sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Button } from '~/components/button/Button'\nimport { Flex } from '~/components/flex/Flex'\nimport { Icon } from '~/components/icon/Icon'\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\nimport { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from './constants'\nimport { Day } from './Day'\n\nconst StyledButton = styled(Button, {\n base: ['text-grey-1000', 'p-3', 'w-16'],\n variants: {\n selected: {\n false: [\n 'disabled:bg-white!',\n 'font-normal',\n 'hover:bg-grey-200!',\n 'hover:text-grey-1000!',\n 'text-grey-1000!'\n ]\n }\n }\n})\n\nexport type CalendarTranslationProps = {\n monthNames?: string[]\n weekdayNames?: string[]\n labels?: {\n open: string\n next: string\n previous: string\n nextYear: string\n previousYear: string\n }\n}\n\ntype CalendarProps = DayzedInterface &\n CalendarTranslationProps & {\n refDateToday?: React.RefObject<HTMLButtonElement>\n refDateSelected?: React.RefObject<HTMLButtonElement>\n setYear: (date: Date) => Promise<void>\n className?: string\n }\n\nconst offsetWeekdayNames = (\n weekdayNames: string[],\n firstDayOfWeek: number\n): string[] => {\n const start = weekdayNames.slice(0, firstDayOfWeek)\n const end = weekdayNames.slice(firstDayOfWeek)\n return end.concat(start)\n}\n\nexport const Calendar = ({\n className,\n refDateSelected,\n refDateToday,\n firstDayOfWeek = 0,\n monthNames = monthNamesShort,\n weekdayNames = weekdayNamesShort,\n labels = DEFAULT_LABELS,\n date = new Date(),\n minDate,\n maxDate,\n setYear,\n ...remainingProps\n}: CalendarProps) => {\n const [showYears, setShowYears] = React.useState<boolean>(false)\n const [currentYear, setCurrentYear] = React.useState<number>(\n date?.getFullYear()\n )\n\n const handleSetYear = (year: number): void => {\n const newDate = date\n newDate.setFullYear(year)\n setYear(newDate)\n setShowYears(false)\n }\n\n const isAtMinYear = minDate && currentYear - 16 <= minDate.getFullYear()\n const isAtMaxYear = maxDate && currentYear >= maxDate.getFullYear()\n\n const yearList = Array.from({ length: 16 }, (_, i) => {\n const year = currentYear - i\n if (\n (maxDate && year > maxDate.getFullYear()) \|\|\n (minDate && year < minDate.getFullYear())\n )\n return 0\n return year\n })\n\n const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({\n firstDayOfWeek,\n showOutsideDays: true,\n date,\n minDate,\n maxDate,\n ...remainingProps\n })\n\n if (!calendars.length) return null\n\n return (\n <div className={clsx('relative', 'w-fit', '-mt-1', className)}>\n <Flex className=\"absolute top-0 -right-1\">\n <ActionIcon\n label={labels[showYears ? 'previousYear' : 'previous']}\n theme=\"neutral\"\n size=\"md\"\n {...(!showYears && getBackProps({ calendars }))}\n {...(showYears && {\n onClick: () => setCurrentYear(currentYear - 16)\n })}\n disabled={showYears && isAtMinYear}\n >\n <Icon is={ChevronLeft} />\n </ActionIcon>\n <ActionIcon\n label={labels[showYears ? 'nextYear' : 'next']}\n theme=\"neutral\"\n size=\"md\"\n {...(!showYears && getForwardProps({ calendars }))}\n {...(showYears && {\n onClick: () => setCurrentYear(currentYear + 16)\n })}\n disabled={showYears && isAtMaxYear}\n >\n <Icon is={ChevronRight} />\n </ActionIcon>\n </Flex>\n {showYears && (\n <div className=\"grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]\">\n {yearList.map((year, i) => {\n const isCurrentYear = year === date.getFullYear()\n if (!year) return <div key={i} className=\"h-10 w-16\" />\n\n return (\n <StyledButton\n key={`${year}${i}`}\n theme={isCurrentYear ? 'primary' : 'neutral'}\n onClick={() => handleSetYear(year)}\n selected={isCurrentYear}\n >\n {year}\n </StyledButton>\n )\n })}\n </div>\n )}\n {!showYears &&\n calendars.map(({ month, year, weeks }) => (\n <div key={`${month}${year}`}>\n <Flex className=\"mb-4 h-10 items-center\">\n <Button\n theme=\"neutral\"\n onClick={() => setShowYears(true)}\n className=\"text-grey-1000 px-0\"\n >\n {monthNames[month]} {year}\n </Button>\n </Flex>\n <div className=\"mb-3 grid grid-cols-7 gap-x-2 gap-y-1\">\n {offsetWeekdayNames(weekdayNames, firstDayOfWeek).map(\n (weekday) => (\n <Text\n as=\"span\"\n size=\"sm\"\n weight=\"bold\"\n key={`${month}${year}${weekday}`}\n className=\"text-center\"\n >\n {weekday}\n </Text>\n )\n )}\n </div>\n <div className=\"grid grid-cols-7 gap-x-2 gap-y-1\">\n {weeks.map((week, weekIndex) =>\n week.map((dateObj, index) => {\n const key = `${month}${year}${weekIndex}${index}`\n\n if (!dateObj) return <div key={key} />\n\n const { date, selected, today, prevMonth, nextMonth } =\n dateObj\n\n return (\n <Day\n isOutsideMonth={prevMonth \|\| nextMonth}\n isSelected={selected}\n isToday={today}\n key={key}\n ref={\n selected ? refDateSelected : today ? refDateToday : null\n }\n {...getDateProps({ dateObj })}\n type=\"button\"\n >\n {date.getDate()}\n </Day>\n )\n })\n )}\n </div>\n </div>\n ))}\n </div>\n )\n}\n\nCalendar.displayName = 'Calendar'\n"],"names":["StyledButton","styled","Button","offsetWeekdayNames","weekdayNames","firstDayOfWeek","start","Calendar","className","refDateSelected","refDateToday","monthNames","monthNamesShort","weekdayNamesShort","labels","DEFAULT_LABELS","date","minDate","maxDate","setYear","remainingProps","showYears","setShowYears","React","currentYear","setCurrentYear","handleSetYear","year","newDate","isAtMinYear","isAtMaxYear","yearList","_","i","calendars","getBackProps","getForwardProps","getDateProps","useDayzed","clsx","Flex","ActionIcon","Icon","ChevronLeft","ChevronRight","isCurrentYear","month","weeks","weekday","Text","week","weekIndex","dateObj","index","key","selected","today","prevMonth","nextMonth","Day"],"mappings":"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"}
1	+ {"version":3,"file":"Calendar.js","sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Button } from '~/components/button/Button'\nimport { Icon } from '~/components/icon/Icon'\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\nimport { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from './constants'\nimport { Day } from './Day'\n\nconst StyledButton = styled(Button, {\n base: ['text-grey-1000', 'p-3', 'w-16'],\n variants: {\n selected: {\n false: [\n 'disabled:bg-white!',\n 'font-normal',\n 'hover:bg-grey-200!',\n 'hover:text-grey-1000!',\n 'text-grey-1000!'\n ]\n }\n }\n})\n\nexport type CalendarTranslationProps = {\n monthNames?: string[]\n weekdayNames?: string[]\n labels?: {\n open: string\n next: string\n previous: string\n nextYear: string\n previousYear: string\n }\n}\n\ntype CalendarProps = DayzedInterface &\n CalendarTranslationProps & {\n refDateToday?: React.RefObject<HTMLButtonElement>\n refDateSelected?: React.RefObject<HTMLButtonElement>\n setYear: (date: Date) => Promise<void>\n className?: string\n }\n\nconst offsetWeekdayNames = (\n weekdayNames: string[],\n firstDayOfWeek: number\n): string[] => {\n const start = weekdayNames.slice(0, firstDayOfWeek)\n const end = weekdayNames.slice(firstDayOfWeek)\n return end.concat(start)\n}\n\nexport const Calendar = ({\n className,\n refDateSelected,\n refDateToday,\n firstDayOfWeek = 0,\n monthNames = monthNamesShort,\n weekdayNames = weekdayNamesShort,\n labels = DEFAULT_LABELS,\n date = new Date(),\n minDate,\n maxDate,\n setYear,\n ...remainingProps\n}: CalendarProps) => {\n const [showYears, setShowYears] = React.useState<boolean>(false)\n const [currentYear, setCurrentYear] = React.useState<number>(\n date?.getFullYear()\n )\n\n const handleSetYear = (year: number): void => {\n const newDate = date\n newDate.setFullYear(year)\n setYear(newDate)\n setShowYears(false)\n }\n\n const isAtMinYear = minDate && currentYear - 16 <= minDate.getFullYear()\n const isAtMaxYear = maxDate && currentYear >= maxDate.getFullYear()\n\n const yearList = Array.from({ length: 16 }, (_, i) => {\n const year = currentYear - i\n if (\n (maxDate && year > maxDate.getFullYear()) \|\|\n (minDate && year < minDate.getFullYear())\n )\n return 0\n return year\n })\n\n const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({\n firstDayOfWeek,\n showOutsideDays: true,\n date,\n minDate,\n maxDate,\n ...remainingProps\n })\n\n if (!calendars.length) return null\n\n return (\n <div className={clsx('relative', 'w-fit', '-mt-1', className)}>\n <div className=\"absolute top-0 -right-1 flex\">\n <ActionIcon\n label={labels[showYears ? 'previousYear' : 'previous']}\n theme=\"neutral\"\n size=\"md\"\n {...(!showYears && getBackProps({ calendars }))}\n {...(showYears && {\n onClick: () => setCurrentYear(currentYear - 16)\n })}\n disabled={showYears && isAtMinYear}\n >\n <Icon is={ChevronLeft} />\n </ActionIcon>\n <ActionIcon\n label={labels[showYears ? 'nextYear' : 'next']}\n theme=\"neutral\"\n size=\"md\"\n {...(!showYears && getForwardProps({ calendars }))}\n {...(showYears && {\n onClick: () => setCurrentYear(currentYear + 16)\n })}\n disabled={showYears && isAtMaxYear}\n >\n <Icon is={ChevronRight} />\n </ActionIcon>\n </div>\n {showYears && (\n <div className=\"grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]\">\n {yearList.map((year, i) => {\n const isCurrentYear = year === date.getFullYear()\n if (!year) return <div key={i} className=\"h-10 w-16\" />\n\n return (\n <StyledButton\n key={`${year}${i}`}\n theme={isCurrentYear ? 'primary' : 'neutral'}\n onClick={() => handleSetYear(year)}\n selected={isCurrentYear}\n >\n {year}\n </StyledButton>\n )\n })}\n </div>\n )}\n {!showYears &&\n calendars.map(({ month, year, weeks }) => (\n <div key={`${month}${year}`}>\n <div className=\"mb-4 flex h-10 items-center\">\n <Button\n theme=\"neutral\"\n onClick={() => setShowYears(true)}\n className=\"text-grey-1000 px-0\"\n >\n {monthNames[month]} {year}\n </Button>\n </div>\n <div className=\"mb-3 grid grid-cols-7 gap-x-2 gap-y-1\">\n {offsetWeekdayNames(weekdayNames, firstDayOfWeek).map(\n (weekday) => (\n <Text\n as=\"span\"\n size=\"sm\"\n weight=\"bold\"\n key={`${month}${year}${weekday}`}\n className=\"text-center\"\n >\n {weekday}\n </Text>\n )\n )}\n </div>\n <div className=\"grid grid-cols-7 gap-x-2 gap-y-1\">\n {weeks.map((week, weekIndex) =>\n week.map((dateObj, index) => {\n const key = `${month}${year}${weekIndex}${index}`\n\n if (!dateObj) return <div key={key} />\n\n const { date, selected, today, prevMonth, nextMonth } =\n dateObj\n\n return (\n <Day\n isOutsideMonth={prevMonth \|\| nextMonth}\n isSelected={selected}\n isToday={today}\n key={key}\n ref={\n selected ? refDateSelected : today ? refDateToday : null\n }\n {...getDateProps({ dateObj })}\n type=\"button\"\n >\n {date.getDate()}\n </Day>\n )\n })\n )}\n </div>\n </div>\n ))}\n </div>\n )\n}\n\nCalendar.displayName = 'Calendar'\n"],"names":["StyledButton","styled","Button","offsetWeekdayNames","weekdayNames","firstDayOfWeek","start","Calendar","className","refDateSelected","refDateToday","monthNames","monthNamesShort","weekdayNamesShort","labels","DEFAULT_LABELS","date","minDate","maxDate","setYear","remainingProps","showYears","setShowYears","React","currentYear","setCurrentYear","handleSetYear","year","newDate","isAtMinYear","isAtMaxYear","yearList","_","i","calendars","getBackProps","getForwardProps","getDateProps","useDayzed","clsx","ActionIcon","Icon","ChevronLeft","ChevronRight","isCurrentYear","month","weeks","weekday","Text","week","weekIndex","dateObj","index","key","selected","today","prevMonth","nextMonth","Day"],"mappings":"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"}