npm - @atom-learning/components - Versions diffs - 6.5.4 → 6.6.0-beta.1 - Mend

@atom-learning/components 6.5.4 → 6.6.0-beta.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 (72) hide show

package/dist/components/accordion/AccordionContent.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { Content as n } from "@radix-ui/react-accordion";
 import r from "react";
 //#region src/components/accordion/AccordionContent.tsx
 var i = e(n, { base: [
+	"border-none",
 	"w-full",
 	"bg-(--base-1)",
 	"overflow-hidden",

package/dist/components/accordion/AccordionContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccordionContent.js","names":[],"sources":["../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nconst StyledContent = styled(Content, {\n base: [\n 'w-full',\n 'bg-(--base-1)',\n 'overflow-hidden',\n 'data-[state=open]:rounded-b-sm',\n 'data-[state=open]:rounded-t-none',\n 'motion-safe:data-[state=open]:animate-accordion-open',\n 'motion-safe:data-[state=closed]:animate-accordion-close'\n ]\n})\n\nexport const AccordionContent = ({\n children,\n className,\n ...remainingProps\n}: React.ComponentProps<typeof StyledContent>) => (\n <StyledContent {...remainingProps}>\n <CSSWrapper className={className}>{children}</CSSWrapper>\n </StyledContent>\n)\n"],"mappings":";;;;;AAMA,IAAM,IAAgB,EAAO,GAAS,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEW,KAAoB,EAC/B,aACA,cACA,GAAG,QAEH,kBAAA,cAAC,GAAkB,GACjB,kBAAA,cAAC,GAAD,EAAuB,cAAkC,EAAtB,EAAsB,CAC3C"}
1	+ {"version":3,"file":"AccordionContent.js","names":[],"sources":["../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nconst StyledContent = styled(Content, {\n base: [\n 'border-none',\n 'w-full',\n 'bg-(--base-1)',\n 'overflow-hidden',\n 'data-[state=open]:rounded-b-sm',\n 'data-[state=open]:rounded-t-none',\n 'motion-safe:data-[state=open]:animate-accordion-open',\n 'motion-safe:data-[state=closed]:animate-accordion-close'\n ]\n})\n\nexport const AccordionContent = ({\n children,\n className,\n ...remainingProps\n}: React.ComponentProps<typeof StyledContent>) => (\n <StyledContent {...remainingProps}>\n <CSSWrapper className={className}>{children}</CSSWrapper>\n </StyledContent>\n)\n"],"mappings":";;;;;AAMA,IAAM,IAAgB,EAAO,GAAS,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEW,KAAoB,EAC/B,aACA,cACA,GAAG,QAEH,kBAAA,cAAC,GAAkB,GACjB,kBAAA,cAAC,GAAD,EAAuB,cAAkC,EAAtB,EAAsB,CAC3C"}

package/dist/components/accordion/AccordionTrigger.js CHANGED Viewed

@@ -12,6 +12,7 @@ var o = e(n, { base: [
 	"[[data-state=closed]>&]:rotate-0"
 ] }), s = e(r, {
 	base: [
+		"border-none",
 		"py-3",
 		"px-4",
 		"w-full",

package/dist/components/accordion/AccordionTrigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccordionTrigger.js","names":[],"sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport {\n ColorScheme,\n TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\n\nconst RotatingIcon = styled(Icon, {\n base: [\n 'transition-transform',\n 'duration-300',\n '[[data-state=open]>&]:rotate-180',\n '[[data-state=closed]>&]:rotate-0'\n ]\n})\n\nconst StyledTrigger = styled(Trigger, {\n base: [\n 'py-3',\n 'px-4',\n 'w-full',\n 'flex',\n 'justify-between',\n 'items-center',\n 'cursor-pointer',\n 'bg-(--interactive-2)',\n 'text-(--interactive-foreground)',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'not-disabled:active:bg-(--interactive-3)',\n 'not-disabled:focus-visible:bg-(--interactive-3)',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:bg-(--interactive-3)',\n 'data-[state=open]:rounded-b-none',\n 'data-[state=open]:rounded-t-sm',\n 'data-[state=closed]:rounded-sm'\n ],\n variants: {\n arrowPosition: {\n left: ['flex-row-reverse', 'gap-2', 'justify-end'],\n right: []\n }\n }\n})\n\nexport const AccordionTrigger = ({\n children,\n colorScheme = {},\n asChild,\n arrowPosition = 'right',\n ...remainingProps\n}: React.ComponentProps<typeof StyledTrigger> & {\n colorScheme?: TcolorScheme\n}) => (\n <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n <StyledTrigger\n asChild={asChild}\n arrowPosition={arrowPosition}\n {...remainingProps}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n </>\n )}\n </StyledTrigger>\n </ColorScheme>\n)\n"],"mappings":";;;;;;;AAYA,IAAM,IAAe,EAAO,GAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACD,EACF,CAAC,EAEI,IAAgB,EAAO,GAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,eAAe;EACb,MAAM;GAAC;GAAoB;GAAS;GAAc;EAClD,OAAO,EAAE;EACV,EACF;CACF,CAAC,EAEW,KAAoB,EAC/B,aACA,iBAAc,EAAE,EAChB,YACA,mBAAgB,SAChB,GAAG,QAIH,kBAAA,cAAC,GAAD;CAAa,SAAA;CAAQ,QAAO;CAAQ,aAAY;CAAa,GAAI;CAenD,EAdZ,kBAAA,cAAC,GAAD;CACW;CACM;CACf,GAAI;CAUU,EARb,IACC,IAEA,kBAAA,cAAA,EAAA,UAAA,MACG,GACD,kBAAA,cAAC,GAAD;CAAc,IAAI;CAAa,eAAY;CAAsB,CAAA,CAChE,CAES,CACJ"}
1	+ {"version":3,"file":"AccordionTrigger.js","names":[],"sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport {\n ColorScheme,\n TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\n\nconst RotatingIcon = styled(Icon, {\n base: [\n 'transition-transform',\n 'duration-300',\n '[[data-state=open]>&]:rotate-180',\n '[[data-state=closed]>&]:rotate-0'\n ]\n})\n\nconst StyledTrigger = styled(Trigger, {\n base: [\n 'border-none',\n 'py-3',\n 'px-4',\n 'w-full',\n 'flex',\n 'justify-between',\n 'items-center',\n 'cursor-pointer',\n 'bg-(--interactive-2)',\n 'text-(--interactive-foreground)',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'not-disabled:active:bg-(--interactive-3)',\n 'not-disabled:focus-visible:bg-(--interactive-3)',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:bg-(--interactive-3)',\n 'data-[state=open]:rounded-b-none',\n 'data-[state=open]:rounded-t-sm',\n 'data-[state=closed]:rounded-sm'\n ],\n variants: {\n arrowPosition: {\n left: ['flex-row-reverse', 'gap-2', 'justify-end'],\n right: []\n }\n }\n})\n\nexport const AccordionTrigger = ({\n children,\n colorScheme = {},\n asChild,\n arrowPosition = 'right',\n ...remainingProps\n}: React.ComponentProps<typeof StyledTrigger> & {\n colorScheme?: TcolorScheme\n}) => (\n <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n <StyledTrigger\n asChild={asChild}\n arrowPosition={arrowPosition}\n {...remainingProps}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n </>\n )}\n </StyledTrigger>\n </ColorScheme>\n)\n"],"mappings":";;;;;;;AAYA,IAAM,IAAe,EAAO,GAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACD,EACF,CAAC,EAEI,IAAgB,EAAO,GAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,eAAe;EACb,MAAM;GAAC;GAAoB;GAAS;GAAc;EAClD,OAAO,EAAE;EACV,EACF;CACF,CAAC,EAEW,KAAoB,EAC/B,aACA,iBAAc,EAAE,EAChB,YACA,mBAAgB,SAChB,GAAG,QAIH,kBAAA,cAAC,GAAD;CAAa,SAAA;CAAQ,QAAO;CAAQ,aAAY;CAAa,GAAI;CAenD,EAdZ,kBAAA,cAAC,GAAD;CACW;CACM;CACf,GAAI;CAUU,EARb,IACC,IAEA,kBAAA,cAAA,EAAA,UAAA,MACG,GACD,kBAAA,cAAC,GAAD;CAAc,IAAI;CAAa,eAAY;CAAsB,CAAA,CAChE,CAES,CACJ"}

package/dist/components/action-icon/ActionIcon.js CHANGED Viewed

@@ -12,6 +12,7 @@ var s = e("button", {
 		"appearance-none",
 		"bg-white",
 		"rounded-md",
+		"box-border",
 		"cursor-pointer",
 		"flex",
 		"shrink-0",

package/dist/components/action-icon/ActionIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled(\n 'button',\n {\n base: [\n 'items-center',\n 'appearance-none',\n 'bg-white',\n 'rounded-md',\n 'cursor-pointer',\n 'flex',\n 'shrink-0',\n 'justify-center',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n neutral: [\n '[--solid-base:var(--color-white)]',\n '[--solid-interact:var(--color-grey-100)]',\n '[--solid-active:var(--color-grey-200)]',\n '[--solid-text:var(--color-grey-1200)]',\n '[--base:var(--color-grey-700)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1100)]'\n ],\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n primaryDark: [\n '[--base:var(--color-primary-1000)]',\n '[--interact:var(--color-primary-1100)]',\n '[--active:var(--color-primary-1200)]'\n ],\n success: [\n '[--base:var(--color-success)]',\n '[--interact:var(--color-success-mid)]',\n '[--active:var(--color-success-dark)]'\n ],\n warning: [\n '[--base:var(--color-warning)]',\n '[--interact:var(--color-warning-mid)]',\n '[--active:var(--color-warning-dark)]'\n ],\n danger: [\n '[--base:var(--color-danger)]',\n '[--interact:var(--color-danger-mid)]',\n '[--active:var(--color-danger-dark)]'\n ],\n white: [\n '[--base:var(--color-white)]',\n '[--interact:var(--color-white)]',\n '[--active:var(--color-white)]'\n ]\n },\n appearance: {\n simple: [\n 'bg-transparent',\n 'text-(--base)',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ],\n outline: [\n 'bg-[unset]',\n 'border',\n 'border-current',\n 'text-(--base)',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ],\n solid: [\n 'bg-(--solid-base,var(--base))',\n 'text-(--solid-text,white)',\n 'not-disabled:hover:bg-(--solid-interact,var(--interact))',\n 'not-disabled:hover:text-(--solid-text,white)',\n 'not-disabled:focus:bg-(--solid-interact,var(--interact))',\n 'not-disabled:focus:text-(--solid-text,white)',\n 'not-disabled:active:bg-(--solid-active,var(--active))'\n ]\n },\n size: {\n xs: ['size-6'],\n sm: ['size-8'],\n md: ['size-10'],\n lg: ['size-12']\n },\n isRounded: {\n true: ['rounded-full']\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n children: React.ReactNode\n label: string\n } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n // Polymorphic props: can be either button or anchor element\n // Type assertion needed due to TypeScript limitations with polymorphic components\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? undefined : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...(optionalLinkProps as any)}\n {...getExternalAnchorProps(href)}\n {...remainingProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref as any}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(\n child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n {\n size: ActionIconSizeMap[size as string]\n }\n )\n })}\n </StyledButton>\n </OptionalTooltipWrapper>\n )\n }\n)\n\nActionIcon.displayName = 'ActionIcon'\n"],"mappings":";;;;;;;;AAaA,IAAM,IAAe,EACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,aAAa;IACX;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACD;GACD,OAAO;IACL;IACA;IACA;IACD;GACF;EACD,YAAY;GACV,QAAQ;IACN;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GAChB;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACF;CACF,EACD,EACE,2BAA2B,IAC5B,CACF,EAWY,IAAa,EAAM,YAE5B,EACE,aACA,WAAQ,WACR,gBAAa,UACb,UAAO,MACP,UACA,SACA,aACA,gBAAa,IACb,gBACA,GAAG,KAEL,MACG;CACH,IAAM,IAA2B,YAAY,EAAK,YAAY,wCAAwC,EAAW;AAEjH,GAAU,EAAM,SAAS,MAAM,EAAS,KAAK,GAAG,EAAyB;CAIzE,IAAM,IAAoB,IACrB;EACC,IAAI;EACJ,MAAM,IAAW,KAAA,IAAY;EAC7B,SAAS,KAAA;EACT,iBAAiB,CAAC,CAAC;EACpB,GACA,EAAE,MAAM,UAAU;AAEvB,QACE,kBAAA,cAAC,GAAD;EACc;EACL;EACM;EAiCU,EA/BvB,kBAAA,cAAC,GAAD;EACE,GAAK;EACL,GAAI,EAAuB,EAAK;EAChC,GAAI;EACJ,cAAY;EACL;EACK;EACN;EACD;EACK;EAqBG,EAnBZ,EAAM,SAAS,IAAI,IAAW,MAAU;AAGvC,MAAI,CAAC,EAAM,eAAe,EAAM,CAC9B,OAAU,MAAM,EAAyB;AAQ3C,SALA,EACE,EAAM,SAAS,GACf,oBAAoB,GAAO,KAAK,6BAA6B,EAAK,YAAY,2BAA2B,EAAW,cACrH,EAEM,EAAM,aACX,GACA,EACE,MAAM,EAAkB,IACzB,CACF;GACD,CACW,CACQ;EAG9B;AAED,EAAW,cAAc"}
1	+ {"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled(\n 'button',\n {\n base: [\n 'items-center',\n 'appearance-none',\n 'bg-white',\n 'rounded-md',\n 'box-border',\n 'cursor-pointer',\n 'flex',\n 'shrink-0',\n 'justify-center',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n neutral: [\n '[--solid-base:var(--color-white)]',\n '[--solid-interact:var(--color-grey-100)]',\n '[--solid-active:var(--color-grey-200)]',\n '[--solid-text:var(--color-grey-1200)]',\n '[--base:var(--color-grey-700)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1100)]'\n ],\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n primaryDark: [\n '[--base:var(--color-primary-1000)]',\n '[--interact:var(--color-primary-1100)]',\n '[--active:var(--color-primary-1200)]'\n ],\n success: [\n '[--base:var(--color-success)]',\n '[--interact:var(--color-success-mid)]',\n '[--active:var(--color-success-dark)]'\n ],\n warning: [\n '[--base:var(--color-warning)]',\n '[--interact:var(--color-warning-mid)]',\n '[--active:var(--color-warning-dark)]'\n ],\n danger: [\n '[--base:var(--color-danger)]',\n '[--interact:var(--color-danger-mid)]',\n '[--active:var(--color-danger-dark)]'\n ],\n white: [\n '[--base:var(--color-white)]',\n '[--interact:var(--color-white)]',\n '[--active:var(--color-white)]'\n ]\n },\n appearance: {\n simple: [\n 'bg-transparent',\n 'text-(--base)',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ],\n outline: [\n 'bg-[unset]',\n 'border',\n 'border-current',\n 'text-(--base)',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ],\n solid: [\n 'bg-(--solid-base,var(--base))',\n 'text-(--solid-text,white)',\n 'not-disabled:hover:bg-(--solid-interact,var(--interact))',\n 'not-disabled:hover:text-(--solid-text,white)',\n 'not-disabled:focus:bg-(--solid-interact,var(--interact))',\n 'not-disabled:focus:text-(--solid-text,white)',\n 'not-disabled:active:bg-(--solid-active,var(--active))'\n ]\n },\n size: {\n xs: ['size-6'],\n sm: ['size-8'],\n md: ['size-10'],\n lg: ['size-12']\n },\n isRounded: {\n true: ['rounded-full']\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n children: React.ReactNode\n label: string\n } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n // Polymorphic props: can be either button or anchor element\n // Type assertion needed due to TypeScript limitations with polymorphic components\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? undefined : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...(optionalLinkProps as any)}\n {...getExternalAnchorProps(href)}\n {...remainingProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref as any}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(\n child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n {\n size: ActionIconSizeMap[size as string]\n }\n )\n })}\n </StyledButton>\n </OptionalTooltipWrapper>\n )\n }\n)\n\nActionIcon.displayName = 'ActionIcon'\n"],"mappings":";;;;;;;;AAaA,IAAM,IAAe,EACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,aAAa;IACX;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACD;GACD,OAAO;IACL;IACA;IACA;IACD;GACF;EACD,YAAY;GACV,QAAQ;IACN;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GAChB;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACF;CACF,EACD,EACE,2BAA2B,IAC5B,CACF,EAWY,IAAa,EAAM,YAE5B,EACE,aACA,WAAQ,WACR,gBAAa,UACb,UAAO,MACP,UACA,SACA,aACA,gBAAa,IACb,gBACA,GAAG,KAEL,MACG;CACH,IAAM,IAA2B,YAAY,EAAK,YAAY,wCAAwC,EAAW;AAEjH,GAAU,EAAM,SAAS,MAAM,EAAS,KAAK,GAAG,EAAyB;CAIzE,IAAM,IAAoB,IACrB;EACC,IAAI;EACJ,MAAM,IAAW,KAAA,IAAY;EAC7B,SAAS,KAAA;EACT,iBAAiB,CAAC,CAAC;EACpB,GACA,EAAE,MAAM,UAAU;AAEvB,QACE,kBAAA,cAAC,GAAD;EACc;EACL;EACM;EAiCU,EA/BvB,kBAAA,cAAC,GAAD;EACE,GAAK;EACL,GAAI,EAAuB,EAAK;EAChC,GAAI;EACJ,cAAY;EACL;EACK;EACN;EACD;EACK;EAqBG,EAnBZ,EAAM,SAAS,IAAI,IAAW,MAAU;AAGvC,MAAI,CAAC,EAAM,eAAe,EAAM,CAC9B,OAAU,MAAM,EAAyB;AAQ3C,SALA,EACE,EAAM,SAAS,GACf,oBAAoB,GAAO,KAAK,6BAA6B,EAAK,YAAY,2BAA2B,EAAW,cACrH,EAEM,EAAM,aACX,GACA,EACE,MAAM,EAAkB,IACzB,CACF;GACD,CACW,CACQ;EAG9B;AAED,EAAW,cAAc"}

package/dist/components/alert-dialog/AlertDialogContent.js CHANGED Viewed

@@ -18,6 +18,7 @@ var a = e(r, { base: [
 		"bg-white",
 		"rounded-md",
 		"shadow-xl",
+		"box-border",
 		"left-1/2",
 		"max-w-[90vw]",
 		"p-8",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AlertDialogContent.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n base: [\n 'bg-alpha-600',\n 'top-0',\n 'right-0',\n 'bottom-0',\n 'left-0',\n 'fixed',\n 'z-1147483646',\n 'motion-safe:data-[state=open]:animate-fade-in',\n 'motion-safe:data-[state=closed]:animate-fade-out'\n ]\n})\nconst StyledAlertDialogContent = styled(Content, {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'rounded-md',\n 'shadow-xl',\n 'left-1/2',\n 'max-w-[90vw]',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'focus:outline-none',\n 'z-1147483646',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n sm: ['w-95'],\n md: ['w-120'],\n lg: ['w-150']\n }\n }\n})\n\nexport const AlertDialogContent = ({\n size = 'sm',\n ...remainingProps\n}: React.ComponentProps<typeof StyledAlertDialogContent>) => (\n <Portal>\n <StyledAlertDialogOverlay />\n <StyledAlertDialogContent size={size} {...remainingProps} />\n </Portal>\n)\n"],"mappings":";;;;AAKA,IAAM,IAA2B,EAAO,GAAS,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EACI,IAA2B,EAAO,GAAS;CAC/C,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACd,EACF;CACF,CAAC,EAEW,KAAsB,EACjC,UAAO,MACP,GAAG,QAEH,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAA,KAA2B,EAC5B,kBAAA,cAAC,GAAD;CAAgC;CAAM,GAAI;CAAkB,CAAA,CACrD"}
1	+ {"version":3,"file":"AlertDialogContent.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n base: [\n 'bg-alpha-600',\n 'top-0',\n 'right-0',\n 'bottom-0',\n 'left-0',\n 'fixed',\n 'z-1147483646',\n 'motion-safe:data-[state=open]:animate-fade-in',\n 'motion-safe:data-[state=closed]:animate-fade-out'\n ]\n})\nconst StyledAlertDialogContent = styled(Content, {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'rounded-md',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'max-w-[90vw]',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'focus:outline-none',\n 'z-1147483646',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n sm: ['w-95'],\n md: ['w-120'],\n lg: ['w-150']\n }\n }\n})\n\nexport const AlertDialogContent = ({\n size = 'sm',\n ...remainingProps\n}: React.ComponentProps<typeof StyledAlertDialogContent>) => (\n <Portal>\n <StyledAlertDialogOverlay />\n <StyledAlertDialogContent size={size} {...remainingProps} />\n </Portal>\n)\n"],"mappings":";;;;AAKA,IAAM,IAA2B,EAAO,GAAS,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EACI,IAA2B,EAAO,GAAS;CAC/C,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACd,EACF;CACF,CAAC,EAEW,KAAsB,EACjC,UAAO,MACP,GAAG,QAEH,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAA,KAA2B,EAC5B,kBAAA,cAAC,GAAD;CAAgC;CAAM,GAAI;CAAkB,CAAA,CACrD"}

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

@@ -2,12 +2,15 @@ import { styled as e } from "../../styled.js";
 //#region src/components/calendar/Day.tsx
 var t = e("button", {
 	base: [
+		"bg-transparent",
+		"border-none",
 		"rounded-full",
 		"text-grey-900",
 		"cursor-pointer",
 		"font-body",
 		"text-sm",
 		"size-8",
+		"p-0",
 		"transition-all",
 		"duration-75",
 		"hover:bg-grey-200",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Day.js","names":[],"sources":["../../../src/components/calendar/Day.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const Day = styled('button', {\n base: [\n 'rounded-full',\n 'text-grey-900',\n 'cursor-pointer',\n 'font-body',\n 'text-sm',\n 'size-8',\n 'transition-all',\n 'duration-75',\n 'hover:bg-grey-200',\n 'active:bg-primary-800',\n 'active:text-white',\n 'focus:outline-2',\n 'focus:outline-offset-2',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'disabled:cursor-default',\n 'disabled:opacity-30'\n ],\n variants: {\n isSelected: {\n true: ['bg-primary-800', 'hover:bg-primary-800', 'text-white']\n },\n isToday: {\n true: ['bg-grey-200']\n },\n isOutsideMonth: {\n true: ['text-grey-600']\n }\n }\n})\n"],"mappings":";;AAEA,IAAa,IAAM,EAAO,UAAU;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY,EACV,MAAM;GAAC;GAAkB;GAAwB;GAAa,EAC/D;EACD,SAAS,EACP,MAAM,CAAC,cAAc,EACtB;EACD,gBAAgB,EACd,MAAM,CAAC,gBAAgB,EACxB;EACF;CACF,CAAC"}
1	+ {"version":3,"file":"Day.js","names":[],"sources":["../../../src/components/calendar/Day.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const Day = styled('button', {\n base: [\n 'bg-transparent',\n 'border-none',\n 'rounded-full',\n 'text-grey-900',\n 'cursor-pointer',\n 'font-body',\n 'text-sm',\n 'size-8',\n 'p-0',\n 'transition-all',\n 'duration-75',\n 'hover:bg-grey-200',\n 'active:bg-primary-800',\n 'active:text-white',\n 'focus:outline-2',\n 'focus:outline-offset-2',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'disabled:cursor-default',\n 'disabled:opacity-30'\n ],\n variants: {\n isSelected: {\n true: ['bg-primary-800', 'hover:bg-primary-800', 'text-white']\n },\n isToday: {\n true: ['bg-grey-200']\n },\n isOutsideMonth: {\n true: ['text-grey-600']\n }\n }\n})\n"],"mappings":";;AAEA,IAAa,IAAM,EAAO,UAAU;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY,EACV,MAAM;GAAC;GAAkB;GAAwB;GAAa,EAC/D;EACD,SAAS,EACP,MAAM,CAAC,cAAc,EACtB;EACD,gBAAgB,EACd,MAAM,CAAC,gBAAgB,EACxB;EACF;CACF,CAAC"}

package/dist/components/carousel/CarouselPagination.js CHANGED Viewed

@@ -5,6 +5,7 @@ var n = e(t, { base: [
 	"justify-center",
 	"[&_button]:[[class*=selected]]:bg-primary-800",
 	"[&_button]:bg-grey-600",
+	"[&_button]:border-none",
 	"[&_button]:cursor-pointer",
 	"[&_button]:duration-100",
 	"[&_button]:ease-in",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import { DotGroup } from 'pure-react-carousel'\n\nimport { styled } from '~/styled'\n\nexport const CarouselPagination = styled(DotGroup, {\n base: [\n 'justify-center',\n '[&_button]:[[class*=selected]]:bg-primary-800',\n '[&_button]:bg-grey-600',\n '[&_button]:cursor-pointer',\n '[&_button]:duration-100',\n '[&_button]:ease-in',\n '[&_button]:focus:bg-primary-900',\n '[&_button]:hover:bg-primary-900',\n '[&_button]:mx-1',\n '[&_button]:p-1',\n '[&_button]:rounded-[50%]',\n '[&_button]:size-3',\n '[&_button]:transition-all'\n ]\n})\n"],"mappings":";;;AAIA,IAAa,IAAqB,EAAO,GAAU,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
1	+ {"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import { DotGroup } from 'pure-react-carousel'\n\nimport { styled } from '~/styled'\n\nexport const CarouselPagination = styled(DotGroup, {\n base: [\n 'justify-center',\n '[&_button]:[[class*=selected]]:bg-primary-800',\n '[&_button]:bg-grey-600',\n '[&_button]:border-none',\n '[&_button]:cursor-pointer',\n '[&_button]:duration-100',\n '[&_button]:ease-in',\n '[&_button]:focus:bg-primary-900',\n '[&_button]:hover:bg-primary-900',\n '[&_button]:mx-1',\n '[&_button]:p-1',\n '[&_button]:rounded-[50%]',\n '[&_button]:size-3',\n '[&_button]:transition-all'\n ]\n})\n"],"mappings":";;;AAIA,IAAa,IAAqB,EAAO,GAAU,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}

package/dist/components/checkbox/Checkbox.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { Minus as i, Ok as a } from "@atom-learning/icons";
 import * as o from "@radix-ui/react-checkbox";
 //#region src/components/checkbox/Checkbox.tsx
 var s = e(o.Root, {
-	base: /* @__PURE__ */ "appearance-none.relative.border.border-grey-800.rounded-[3px].text-white.bg-white.cursor-pointer.size-4.flex.items-center.justify-center.transition-all.duration-50.ease-out.shrink-0.not-disabled:before:-inset-2.not-disabled:before:-z-1.not-disabled:before:absolute.not-disabled:before:bg-primary-300.not-disabled:before:content-[''].not-disabled:before:duration-125.not-disabled:before:ease-in-out.not-disabled:before:opacity-0.not-disabled:before:rounded-[50%].not-disabled:before:scale-0.not-disabled:before:transition-[opacity,scale].not-disabled:hover:before:opacity-100.not-disabled:hover:before:scale-100.data-[state=checked]:bg-primary-800.data-[state=checked]:border-primary-800.data-[state=indeterminate]:bg-primary-800.data-[state=indeterminate]:border-primary-800.focus:-outline-offset-1.focus:outline-2.focus:outline-primary-800.focus:outline-solid.disabled:cursor-not-allowed.disabled:opacity-30".split("."),
+	base: /* @__PURE__ */ "appearance-none.relative.bg-transparent.border.border-grey-800.rounded-[3px].text-white.bg-white.cursor-pointer.size-4.p-0.flex.items-center.justify-center.transition-all.duration-50.ease-out.shrink-0.not-disabled:before:-inset-2.not-disabled:before:-z-1.not-disabled:before:absolute.not-disabled:before:bg-primary-300.not-disabled:before:content-[''].not-disabled:before:duration-125.not-disabled:before:ease-in-out.not-disabled:before:opacity-0.not-disabled:before:rounded-[50%].not-disabled:before:scale-0.not-disabled:before:transition-[opacity,scale].not-disabled:hover:before:opacity-100.not-disabled:hover:before:scale-100.data-[state=checked]:bg-primary-800.data-[state=checked]:border-primary-800.data-[state=indeterminate]:bg-primary-800.data-[state=indeterminate]:border-primary-800.focus:-outline-offset-1.focus:outline-2.focus:outline-primary-800.focus:outline-solid.disabled:cursor-not-allowed.disabled:opacity-30".split("."),
 	variants: {
 		state: { error: ["border-danger"] },
 		size: {

package/dist/components/checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Icon } from '../icon/Icon'\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n base: [\n 'appearance-none',\n 'relative',\n 'border',\n 'border-grey-800',\n 'rounded-[3px]',\n 'text-white',\n 'bg-white',\n 'cursor-pointer',\n 'size-4',\n 'flex',\n 'items-center',\n 'justify-center',\n 'transition-all',\n 'duration-50',\n 'ease-out',\n 'shrink-0',\n 'not-disabled:before:-inset-2',\n 'not-disabled:before:-z-1',\n 'not-disabled:before:absolute',\n 'not-disabled:before:bg-primary-300',\n \"not-disabled:before:content-['']\",\n 'not-disabled:before:duration-125',\n 'not-disabled:before:ease-in-out',\n 'not-disabled:before:opacity-0',\n 'not-disabled:before:rounded-[50%]',\n 'not-disabled:before:scale-0',\n 'not-disabled:before:transition-[opacity,scale]',\n 'not-disabled:hover:before:opacity-100',\n 'not-disabled:hover:before:scale-100',\n 'data-[state=checked]:bg-primary-800',\n 'data-[state=checked]:border-primary-800',\n 'data-[state=indeterminate]:bg-primary-800',\n 'data-[state=indeterminate]:border-primary-800',\n 'focus:-outline-offset-1',\n 'focus:outline-2',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n state: {\n error: ['border-danger']\n },\n size: {\n md: ['size-4'],\n lg: ['mt-px', 'size-6']\n }\n }\n})\n\nconst toIconSize = {\n md: 'sm',\n lg: 'sm'\n}\n\nexport const Checkbox = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<typeof StyledCheckbox>\n>(({ size = 'md', checked, ...rest }, ref) => {\n const iconSize = React.useMemo(\n () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n [size]\n )\n\n return (\n <div className=\"relative z-1\">\n <StyledCheckbox ref={ref} checked={checked} size={size} {...rest}>\n <div className=\"absolute -inset-3 opacity-50\" />\n <RadixCheckbox.Indicator asChild>\n <Icon\n is={checked === 'indeterminate' ? Minus : Ok}\n size={iconSize}\n className=\"stroke-3\"\n />\n </RadixCheckbox.Indicator>\n </StyledCheckbox>\n </div>\n )\n})\n\nCheckbox.displayName = 'Checkbox'\n"],"mappings":";;;;;;;AASA,IAAM,IAAiB,EAAO,EAAc,MAAM;CAChD,MAAM,~~y6BAwCL~~;CACD,UAAU;EACR,OAAO,EACL,OAAO,CAAC,gBAAgB,EACzB;EACD,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS,SAAS;GACxB;EACF;CACF,CAAC,EAEI,IAAa;CACjB,IAAI;CACJ,IAAI;CACL,EAEY,IAAW,EAAM,YAG3B,EAAE,UAAO,MAAM,YAAS,GAAG,KAAQ,MAAQ;CAC5C,IAAM,IAAW,EAAM,cACf,EAA2B,IAAO,MAAM,EAAW,GAAG,EAC5D,CAAC,EAAK,CACP;AAED,QACE,kBAAA,cAAC,OAAD,EAAK,WAAU,gBAWT,EAVJ,kBAAA,cAAC,GAAD;EAAqB;EAAc;EAAe;EAAM,GAAI;EAS3C,EARf,kBAAA,cAAC,OAAD,EAAK,WAAU,gCAAiC,CAAA,EAChD,kBAAA,cAAC,EAAc,WAAf,EAAyB,SAAA,IAMC,EALxB,kBAAA,cAAC,GAAD;EACE,IAAI,MAAY,kBAAkB,IAAQ;EAC1C,MAAM;EACN,WAAU;EACV,CAAA,CACsB,CACX,CACb;EAER;AAEF,EAAS,cAAc"}
1	+ {"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Icon } from '../icon/Icon'\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n base: [\n 'appearance-none',\n 'relative',\n 'bg-transparent',\n 'border',\n 'border-grey-800',\n 'rounded-[3px]',\n 'text-white',\n 'bg-white',\n 'cursor-pointer',\n 'size-4',\n 'p-0',\n 'flex',\n 'items-center',\n 'justify-center',\n 'transition-all',\n 'duration-50',\n 'ease-out',\n 'shrink-0',\n 'not-disabled:before:-inset-2',\n 'not-disabled:before:-z-1',\n 'not-disabled:before:absolute',\n 'not-disabled:before:bg-primary-300',\n \"not-disabled:before:content-['']\",\n 'not-disabled:before:duration-125',\n 'not-disabled:before:ease-in-out',\n 'not-disabled:before:opacity-0',\n 'not-disabled:before:rounded-[50%]',\n 'not-disabled:before:scale-0',\n 'not-disabled:before:transition-[opacity,scale]',\n 'not-disabled:hover:before:opacity-100',\n 'not-disabled:hover:before:scale-100',\n 'data-[state=checked]:bg-primary-800',\n 'data-[state=checked]:border-primary-800',\n 'data-[state=indeterminate]:bg-primary-800',\n 'data-[state=indeterminate]:border-primary-800',\n 'focus:-outline-offset-1',\n 'focus:outline-2',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n state: {\n error: ['border-danger']\n },\n size: {\n md: ['size-4'],\n lg: ['mt-px', 'size-6']\n }\n }\n})\n\nconst toIconSize = {\n md: 'sm',\n lg: 'sm'\n}\n\nexport const Checkbox = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<typeof StyledCheckbox>\n>(({ size = 'md', checked, ...rest }, ref) => {\n const iconSize = React.useMemo(\n () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n [size]\n )\n\n return (\n <div className=\"relative z-1\">\n <StyledCheckbox ref={ref} checked={checked} size={size} {...rest}>\n <div className=\"absolute -inset-3 opacity-50\" />\n <RadixCheckbox.Indicator asChild>\n <Icon\n is={checked === 'indeterminate' ? Minus : Ok}\n size={iconSize}\n className=\"stroke-3\"\n />\n </RadixCheckbox.Indicator>\n </StyledCheckbox>\n </div>\n )\n})\n\nCheckbox.displayName = 'Checkbox'\n"],"mappings":";;;;;;;AASA,IAAM,IAAiB,EAAO,EAAc,MAAM;CAChD,MAAM,47BA0CL;CACD,UAAU;EACR,OAAO,EACL,OAAO,CAAC,gBAAgB,EACzB;EACD,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS,SAAS;GACxB;EACF;CACF,CAAC,EAEI,IAAa;CACjB,IAAI;CACJ,IAAI;CACL,EAEY,IAAW,EAAM,YAG3B,EAAE,UAAO,MAAM,YAAS,GAAG,KAAQ,MAAQ;CAC5C,IAAM,IAAW,EAAM,cACf,EAA2B,IAAO,MAAM,EAAW,GAAG,EAC5D,CAAC,EAAK,CACP;AAED,QACE,kBAAA,cAAC,OAAD,EAAK,WAAU,gBAWT,EAVJ,kBAAA,cAAC,GAAD;EAAqB;EAAc;EAAe;EAAM,GAAI;EAS3C,EARf,kBAAA,cAAC,OAAD,EAAK,WAAU,gCAAiC,CAAA,EAChD,kBAAA,cAAC,EAAc,WAAf,EAAyB,SAAA,IAMC,EALxB,kBAAA,cAAC,GAAD;EACE,IAAI,MAAY,kBAAkB,IAAQ;EAC1C,MAAM;EACN,WAAU;EACV,CAAA,CACsB,CACX,CACb;EAER;AAEF,EAAS,cAAc"}

package/dist/components/combobox/ComboboxInput.js CHANGED Viewed

@@ -3,7 +3,7 @@ import * as t from "react";
 import { ComboboxInput as n } from "@reach/combobox";
 //#region src/components/combobox/ComboboxInput.tsx
 var r = e(n, {
-	base: /* @__PURE__ */ "bg-white.bg-(image:--bg-chevron).bg-position-[right_--spacing(3)_top_50%,0_0].[background-repeat:no-repeat,repeat-x].bg-size-[--spacing(5)_auto,100%].shadow-none.appearance-none.border.border-grey-700.rounded-md.text-grey-1000.cursor-text.block.font-body.h-10.pl-3.pr-10.transition-all.duration-100.ease-out.w-full.placeholder:opacity-100.placeholder:text-grey-700.focus-within:border-primary-800.focus-within:outline-none.disabled:bg-grey-200.disabled:cursor-not-allowed.disabled:text-grey-800".split("."),
+	base: /* @__PURE__ */ "bg-white.bg-(image:--bg-chevron).bg-position-[right_--spacing(3)_top_50%,0_0].[background-repeat:no-repeat,repeat-x].bg-size-[--spacing(5)_auto,100%].shadow-none.appearance-none.border.border-grey-700.rounded-md.box-border.text-grey-1000.cursor-text.block.font-body.h-10.pl-3.pr-10.transition-all.duration-100.ease-out.w-full.placeholder:opacity-100.placeholder:text-grey-700.focus-within:border-primary-800.focus-within:outline-none.disabled:bg-grey-200.disabled:cursor-not-allowed.disabled:text-grey-800".split("."),
 	variants: {
 		size: {
 			sm: [

package/dist/components/combobox/ComboboxInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n base: [\n 'bg-white',\n 'bg-(image:--bg-chevron)',\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n '[background-repeat:no-repeat,repeat-x]',\n 'bg-size-[--spacing(5)_auto,100%]',\n 'shadow-none',\n 'appearance-none',\n 'border',\n 'border-grey-700',\n 'rounded-md',\n 'text-grey-1000',\n 'cursor-text',\n 'block',\n 'font-body',\n 'h-10',\n 'pl-3',\n 'pr-10',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'w-full',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700',\n 'focus-within:border-primary-800',\n 'focus-within:outline-none',\n 'disabled:bg-grey-200',\n 'disabled:cursor-not-allowed',\n 'disabled:text-grey-800'\n ],\n\n variants: {\n size: {\n sm: ['h-8', 'text-sm', 'leading-[1.7]'],\n md: ['h-10', 'text-md', 'leading-loose'],\n lg: ['h-12', 'text-md', 'leading-loose']\n },\n state: {\n error: ['border', 'border-danger']\n }\n }\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n typeof StyledComboboxInput\n>\n\nexport const ComboboxInput = React.forwardRef<\n HTMLInputElement,\n ComboboxInputProps\n>(({ size = 'md', ...rest }, ref) => (\n <StyledComboboxInput\n size={size as React.ComponentProps<typeof StyledComboboxInput>['size']}\n {...rest}\n ref={ref}\n />\n))\n"],"mappings":";;;;AAKA,IAAa,IAAsB,EAAO,GAAmB;CAC3D,MAAM,~~2gBA6BL~~;CAED,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAgB;GACvC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACxC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACzC;EACD,OAAO,EACL,OAAO,CAAC,UAAU,gBAAgB,EACnC;EACF;CACF,CAAC,EAMW,IAAgB,EAAM,YAGhC,EAAE,UAAO,MAAM,GAAG,KAAQ,MAC3B,kBAAA,cAAC,GAAD;CACQ;CACN,GAAI;CACC;CACL,CAAA,CACF"}
1	+ {"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n base: [\n 'bg-white',\n 'bg-(image:--bg-chevron)',\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n '[background-repeat:no-repeat,repeat-x]',\n 'bg-size-[--spacing(5)_auto,100%]',\n 'shadow-none',\n 'appearance-none',\n 'border',\n 'border-grey-700',\n 'rounded-md',\n 'box-border',\n 'text-grey-1000',\n 'cursor-text',\n 'block',\n 'font-body',\n 'h-10',\n 'pl-3',\n 'pr-10',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'w-full',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700',\n 'focus-within:border-primary-800',\n 'focus-within:outline-none',\n 'disabled:bg-grey-200',\n 'disabled:cursor-not-allowed',\n 'disabled:text-grey-800'\n ],\n\n variants: {\n size: {\n sm: ['h-8', 'text-sm', 'leading-[1.7]'],\n md: ['h-10', 'text-md', 'leading-loose'],\n lg: ['h-12', 'text-md', 'leading-loose']\n },\n state: {\n error: ['border', 'border-danger']\n }\n }\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n typeof StyledComboboxInput\n>\n\nexport const ComboboxInput = React.forwardRef<\n HTMLInputElement,\n ComboboxInputProps\n>(({ size = 'md', ...rest }, ref) => (\n <StyledComboboxInput\n size={size as React.ComponentProps<typeof StyledComboboxInput>['size']}\n {...rest}\n ref={ref}\n />\n))\n"],"mappings":";;;;AAKA,IAAa,IAAsB,EAAO,GAAmB;CAC3D,MAAM,shBA8BL;CAED,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAgB;GACvC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACxC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACzC;EACD,OAAO,EACL,OAAO,CAAC,UAAU,gBAAgB,EACnC;EACF;CACF,CAAC,EAMW,IAAgB,EAAM,YAGhC,EAAE,UAAO,MAAM,GAAG,KAAQ,MAC3B,kBAAA,cAAC,GAAD;CACQ;CACN,GAAI;CACC;CACL,CAAA,CACF"}

package/dist/components/combobox/ComboboxList.js CHANGED Viewed

@@ -1,7 +1,12 @@
 import { styled as e } from "../../styled.js";
 import { ComboboxList as t } from "@reach/combobox";
 //#region src/components/combobox/ComboboxList.tsx
-var n = e(t, { base: ["select-none"] });
+var n = e(t, { base: [
+	"list-none",
+	"m-0",
+	"p-0",
+	"select-none"
+] });
 //#endregion
 export { n as ComboboxList };

package/dist/components/combobox/ComboboxList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxList.js","names":[],"sources":["../../../src/components/combobox/ComboboxList.tsx"],"sourcesContent":["import { ComboboxList as BaseComboboxList } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxList = styled(BaseComboboxList, {\n base: ['select-none']\n})\n"],"mappings":";;;AAIA,IAAa,IAAe,EAAO,GAAkB,EACnD,MAAM,CAAC,~~cAAc~~,~~EACtB,~~CAAC"}
1	+ {"version":3,"file":"ComboboxList.js","names":[],"sources":["../../../src/components/combobox/ComboboxList.tsx"],"sourcesContent":["import { ComboboxList as BaseComboboxList } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxList = styled(BaseComboboxList, {\n base: ['list-none', 'm-0', 'p-0', 'select-none']\n})\n"],"mappings":";;;AAIA,IAAa,IAAe,EAAO,GAAkB,EACnD,MAAM;CAAC;CAAa;CAAO;CAAO;CAAc,EACjD,CAAC"}

package/dist/components/combobox/ComboboxOption.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { ComboboxOption as t } from "@reach/combobox";
 var n = e(t, { base: [
 	"text-grey-900",
 	"cursor-pointer",
+	"m-0",
 	"p-2",
 	"hover:bg-grey-100",
 	"hover:rounded-sm",

package/dist/components/combobox/ComboboxOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxOption.js","names":[],"sources":["../../../src/components/combobox/ComboboxOption.tsx"],"sourcesContent":["import { ComboboxOption as BaseComboboxOption } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxOption = styled(BaseComboboxOption, {\n base: [\n 'text-grey-900',\n 'cursor-pointer',\n 'p-2',\n 'hover:bg-grey-100',\n 'hover:rounded-sm',\n 'aria-selected:bg-grey-100',\n 'aria-selected:rounded-sm',\n 'data-user-value:text-primary-800'\n ]\n})\n"],"mappings":";;;AAIA,IAAa,IAAiB,EAAO,GAAoB,EACvD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
1	+ {"version":3,"file":"ComboboxOption.js","names":[],"sources":["../../../src/components/combobox/ComboboxOption.tsx"],"sourcesContent":["import { ComboboxOption as BaseComboboxOption } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxOption = styled(BaseComboboxOption, {\n base: [\n 'text-grey-900',\n 'cursor-pointer',\n 'm-0',\n 'p-2',\n 'hover:bg-grey-100',\n 'hover:rounded-sm',\n 'aria-selected:bg-grey-100',\n 'aria-selected:rounded-sm',\n 'data-user-value:text-primary-800'\n ]\n})\n"],"mappings":";;;AAIA,IAAa,IAAiB,EAAO,GAAoB,EACvD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}

package/dist/components/combobox/ComboboxPopover.js CHANGED Viewed

@@ -7,6 +7,7 @@ var n = e(t, { base: [
 	"border-grey-200",
 	"rounded-md",
 	"shadow-md",
+	"box-border",
 	"font-body",
 	"text-md",
 	"outline-none",

package/dist/components/combobox/ComboboxPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxPopover.js","names":[],"sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n base: [\n 'bg-white',\n 'border',\n 'border-grey-200',\n 'rounded-md',\n 'shadow-md',\n 'font-body',\n 'text-md',\n 'outline-none',\n 'p-1',\n 'translate-y-2'\n ]\n})\n"],"mappings":";;;AAIA,IAAa,IAAkB,EAAO,GAAqB,EACzD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
1	+ {"version":3,"file":"ComboboxPopover.js","names":[],"sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n base: [\n 'bg-white',\n 'border',\n 'border-grey-200',\n 'rounded-md',\n 'shadow-md',\n 'box-border',\n 'font-body',\n 'text-md',\n 'outline-none',\n 'p-1',\n 'translate-y-2'\n ]\n})\n"],"mappings":";;;AAIA,IAAa,IAAkB,EAAO,GAAqB,EACzD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}

package/dist/components/dialog/DialogContent.js CHANGED Viewed

@@ -12,6 +12,7 @@ var d = "modal_overlay", f = e(l, { base: i }), p = e(c, {
 		"transform-[translate(-50%,-50%)]",
 		"bg-white",
 		"shadow-xl",
+		"box-border",
 		"left-1/2",
 		"h-auto",
 		"max-w-[90vw]",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n Content,\n {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'shadow-xl',\n 'left-1/2',\n 'h-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\n 'rounded-md',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'z-1147483646',\n 'focus:outline-none',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n xs: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-95'\n ],\n sm: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-120'\n ],\n md: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-150'\n ],\n lg: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-200'\n ],\n xl: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-275'\n ],\n fullscreen: [\n 'rounded-none',\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-svh:h-svh',\n 'supports-svh:max-h-svh'\n ]\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}: DialogContentProps) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n className=\"absolute top-4 right-4 size-12\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"mappings":";;;;;;;;;AAWA,IAAM,IAAiB,iBAEjB,IAAsB,EAAO,GAAS,EAC1C,MAAM,GACP,CAAC,EAEI,IAAsB,EAC1B,GACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,YAAY;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAOY,KAAiB,EAC5B,UAAO,MACP,aACA,qBAAkB,gBAClB,qBAAkB,IAClB,GAAG,QAEH,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAD,EAAqB,IAAI,GAmCH,EAlCnB,EAAM,SAAS,IACd,IACC,MACC,GAAO,SAAS,KAAoB,EACvC,EACD,kBAAA,cAAC,GAAD;CACQ;CACN,cAAW;CACX,uBAAuB,MAAU;AAE/B,EADgB,EAAM,QACT,OAAO,KAClB,EAAM,gBAAgB;;CAG1B,GAAI;CAmBgB,EAjBnB,KACC,kBAAA,cAAC,GAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;CAGC,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAa,CAAA,CACZ,EAEd,EAAM,SAAS,IACd,IACC,MACC,GAAO,SAAS,KAAoB,EACvC,CACmB,CACF,CACf"}
1	+ {"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n Content,\n {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'h-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\n 'rounded-md',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'z-1147483646',\n 'focus:outline-none',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n xs: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-95'\n ],\n sm: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-120'\n ],\n md: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-150'\n ],\n lg: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-200'\n ],\n xl: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-275'\n ],\n fullscreen: [\n 'rounded-none',\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-svh:h-svh',\n 'supports-svh:max-h-svh'\n ]\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}: DialogContentProps) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n className=\"absolute top-4 right-4 size-12\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"mappings":";;;;;;;;;AAWA,IAAM,IAAiB,iBAEjB,IAAsB,EAAO,GAAS,EAC1C,MAAM,GACP,CAAC,EAEI,IAAsB,EAC1B,GACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,YAAY;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAOY,KAAiB,EAC5B,UAAO,MACP,aACA,qBAAkB,gBAClB,qBAAkB,IAClB,GAAG,QAEH,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAD,EAAqB,IAAI,GAmCH,EAlCnB,EAAM,SAAS,IACd,IACC,MACC,GAAO,SAAS,KAAoB,EACvC,EACD,kBAAA,cAAC,GAAD;CACQ;CACN,cAAW;CACX,uBAAuB,MAAU;AAE/B,EADgB,EAAM,QACT,OAAO,KAClB,EAAM,gBAAgB;;CAG1B,GAAI;CAmBgB,EAjBnB,KACC,kBAAA,cAAC,GAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;CAGC,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAa,CAAA,CACZ,EAEd,EAAM,SAAS,IACd,IACC,MACC,GAAO,SAAS,KAAoB,EACvC,CACmB,CACF,CACf"}

package/dist/components/empty-state/EmptyStateTitle.js CHANGED Viewed

@@ -6,7 +6,8 @@ var r = e("h2", {
 	base: [
 		"text-grey-800",
 		"font-body",
-		"font-semibold"
+		"font-semibold",
+		"m-0"
 	],
 	variants: { size: {
 		xs: ["mb-3", "text-md"],

package/dist/components/empty-state/EmptyStateTitle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyStateTitle.js","names":[],"sources":["../../../src/components/empty-state/EmptyStateTitle.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateTitle = styled(\n 'h2',\n {\n base: ['text-grey-800', 'font-body', 'font-semibold'],\n variants: {\n size: {\n xs: ['mb-3', 'text-md'],\n sm: ['mb-3', 'text-md'],\n md: ['mb-3', 'text-md'],\n lg: ['mb-4', 'text-lg'],\n xl: ['mb-4', 'text-lg']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype EmptyStateTitleProps = React.ComponentProps<\n typeof StyledEmptyStateTitle\n> & {\n as?: React.ComponentType \| React.ElementType\n}\n\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n const { size } = React.useContext(EmptyStateContext)\n return <StyledEmptyStateTitle size={size} {...props} />\n}\n"],"mappings":";;;;AAMA,IAAM,IAAwB,EAC5B,MACA;CACE,MAAM;EAAC;EAAiB;EAAa;~~EAAgB~~;~~CACrD~~,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ,UAAU;EACvB,IAAI,CAAC,QAAQ,UAAU;EACvB,IAAI,CAAC,QAAQ,UAAU;EACvB,IAAI,CAAC,QAAQ,UAAU;EACvB,IAAI,CAAC,QAAQ,UAAU;EACxB,EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAQY,KAAmB,MAAgC;CAC9D,IAAM,EAAE,YAAS,EAAM,WAAW,EAAkB;AACpD,QAAO,kBAAA,cAAC,GAAD;EAA6B;EAAM,GAAI;EAAS,CAAA"}
1	+ {"version":3,"file":"EmptyStateTitle.js","names":[],"sources":["../../../src/components/empty-state/EmptyStateTitle.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateTitle = styled(\n 'h2',\n {\n base: ['text-grey-800', 'font-body', 'font-semibold', 'm-0'],\n variants: {\n size: {\n xs: ['mb-3', 'text-md'],\n sm: ['mb-3', 'text-md'],\n md: ['mb-3', 'text-md'],\n lg: ['mb-4', 'text-lg'],\n xl: ['mb-4', 'text-lg']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype EmptyStateTitleProps = React.ComponentProps<\n typeof StyledEmptyStateTitle\n> & {\n as?: React.ComponentType \| React.ElementType\n}\n\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n const { size } = React.useContext(EmptyStateContext)\n return <StyledEmptyStateTitle size={size} {...props} />\n}\n"],"mappings":";;;;AAMA,IAAM,IAAwB,EAC5B,MACA;CACE,MAAM;EAAC;EAAiB;EAAa;EAAiB;EAAM;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ,UAAU;EACvB,IAAI,CAAC,QAAQ,UAAU;EACvB,IAAI,CAAC,QAAQ,UAAU;EACvB,IAAI,CAAC,QAAQ,UAAU;EACvB,IAAI,CAAC,QAAQ,UAAU;EACxB,EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAQY,KAAmB,MAAgC;CAC9D,IAAM,EAAE,YAAS,EAAM,WAAW,EAAkB;AACpD,QAAO,kBAAA,cAAC,GAAD;EAA6B;EAAM,GAAI;EAAS,CAAA"}

package/dist/components/heading/Heading.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { styled as e } from "../../styled.js";
 import * as t from "react";
 //#region src/components/heading/Heading.tsx
 var n = e("h2", {
-	base: [],
+	base: ["m-0"],
 	variants: {
 		size: {
 			xs: [

package/dist/components/heading/Heading.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Heading.js","names":[],"sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nexport const StyledHeading = styled(\n 'h2',\n {\n base: [],\n variants: {\n size: {\n xs: ['font-body', 'text-md', 'leading-normal', 'capsize-[0.3864]'],\n sm: ['font-body', 'text-lg', 'leading-[1.14]', 'capsize-[0.2078]'],\n md: [\n 'font-display',\n 'text-xl',\n 'leading-[1.14]',\n 'tracking-[0.01em]',\n 'capsize-before-[0.2114]',\n 'capsize-after-[0.2634]'\n ],\n lg: [\n 'font-display',\n 'text-2xl',\n 'leading-[1.08]',\n 'tracking-[0.01em]',\n 'capsize-before-[0.1405]',\n 'capsize-after-[0.2405]'\n ],\n xl: [\n 'font-display',\n 'text-3xl',\n 'leading-[1.12]',\n 'capsize-before-[0.16]',\n 'capsize-after-[0.26]'\n ],\n xxl: [\n 'font-display',\n 'text-4xl',\n 'leading-none',\n 'capsize-before-[0.1]',\n 'capsize-after-[0.2]'\n ]\n },\n noCapsize: {\n true: ['capsize-none']\n },\n weight: {\n medium: ['font-medium'],\n bold: ['font-bold']\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\nexport type HeadingProps = Override<\n React.ComponentProps<typeof StyledHeading>,\n {\n as?:\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6'\n \| React.ComponentType\n \| React.ElementType\n }\n>\n\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n ({ size = 'md', weight = 'bold', ...remainingProps }, ref) => (\n <StyledHeading ref={ref} size={size} weight={weight} {...remainingProps} />\n )\n)\n\nHeading.displayName = 'Heading'\n"],"mappings":";;;AAKA,IAAa,IAAgB,EAC3B,MACA;CACE,MAAM,~~EAAE~~;~~CACR~~,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAa;IAAW;IAAkB;IAAmB;GAClE,IAAI;IAAC;IAAa;IAAW;IAAkB;IAAmB;GAClE,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACD;GACD,KAAK;IACH;IACA;IACA;IACA;IACA;IACD;GACF;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACD,QAAQ;GACN,QAAQ,CAAC,cAAc;GACvB,MAAM,CAAC,YAAY;GACpB;EACF;CACF,EACD,EACE,2BAA2B,IAC5B,CACF,EAiBY,IAAU,EAAM,YAC1B,EAAE,UAAO,MAAM,YAAS,QAAQ,GAAG,KAAkB,MACpD,kBAAA,cAAC,GAAD;CAAoB;CAAW;CAAc;CAAQ,GAAI;CAAkB,CAAA,CAE9E;AAED,EAAQ,cAAc"}
1	+ {"version":3,"file":"Heading.js","names":[],"sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nexport const StyledHeading = styled(\n 'h2',\n {\n base: ['m-0'],\n variants: {\n size: {\n xs: ['font-body', 'text-md', 'leading-normal', 'capsize-[0.3864]'],\n sm: ['font-body', 'text-lg', 'leading-[1.14]', 'capsize-[0.2078]'],\n md: [\n 'font-display',\n 'text-xl',\n 'leading-[1.14]',\n 'tracking-[0.01em]',\n 'capsize-before-[0.2114]',\n 'capsize-after-[0.2634]'\n ],\n lg: [\n 'font-display',\n 'text-2xl',\n 'leading-[1.08]',\n 'tracking-[0.01em]',\n 'capsize-before-[0.1405]',\n 'capsize-after-[0.2405]'\n ],\n xl: [\n 'font-display',\n 'text-3xl',\n 'leading-[1.12]',\n 'capsize-before-[0.16]',\n 'capsize-after-[0.26]'\n ],\n xxl: [\n 'font-display',\n 'text-4xl',\n 'leading-none',\n 'capsize-before-[0.1]',\n 'capsize-after-[0.2]'\n ]\n },\n noCapsize: {\n true: ['capsize-none']\n },\n weight: {\n medium: ['font-medium'],\n bold: ['font-bold']\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\nexport type HeadingProps = Override<\n React.ComponentProps<typeof StyledHeading>,\n {\n as?:\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6'\n \| React.ComponentType\n \| React.ElementType\n }\n>\n\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n ({ size = 'md', weight = 'bold', ...remainingProps }, ref) => (\n <StyledHeading ref={ref} size={size} weight={weight} {...remainingProps} />\n )\n)\n\nHeading.displayName = 'Heading'\n"],"mappings":";;;AAKA,IAAa,IAAgB,EAC3B,MACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAa;IAAW;IAAkB;IAAmB;GAClE,IAAI;IAAC;IAAa;IAAW;IAAkB;IAAmB;GAClE,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACD;GACD,KAAK;IACH;IACA;IACA;IACA;IACA;IACD;GACF;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACD,QAAQ;GACN,QAAQ,CAAC,cAAc;GACvB,MAAM,CAAC,YAAY;GACpB;EACF;CACF,EACD,EACE,2BAA2B,IAC5B,CACF,EAiBY,IAAU,EAAM,YAC1B,EAAE,UAAO,MAAM,YAAS,QAAQ,GAAG,KAAkB,MACpD,kBAAA,cAAC,GAAD;CAAoB;CAAW;CAAc;CAAQ,GAAI;CAAkB,CAAA,CAE9E;AAED,EAAQ,cAAc"}

package/dist/components/image/Image.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { styled as e } from "../../styled.js";
 import * as t from "react";
 //#region src/components/image/Image.tsx
 var n = e("img", {
-	base: [],
+	base: ["align-middle", "max-w-full"],
 	variants: { fluid: { true: [
 		"[[src$='.svg']]:h-auto",
 		"[[src$='.svg']]:max-w-none",

package/dist/components/image/Image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.js","names":[],"sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\n// (potentially unnecessary now we've moved to Tailwind)\nexport const StyledImage = styled('img', {\n base: [],\n variants: {\n fluid: {\n true: [\n \"[[src$='.svg']]:h-auto\",\n \"[[src$='.svg']]:max-w-none\",\n \"[[src$='.svg']]:w-full\",\n '[[width]]:[[height]]:h-auto',\n '[[width]]:w-auto'\n ]\n }\n }\n})\n\ntype ImageProps = Override<\n React.ComponentProps<typeof StyledImage>,\n { as?: never }\n>\n\nexport const Image = React.forwardRef<HTMLImageElement, ImageProps>(\n (props, ref) => <StyledImage {...props} ref={ref} />\n)\n\nImage.displayName = 'Image'\n"],"mappings":";;;AAOA,IAAa,IAAc,EAAO,OAAO;CACvC,MAAM,~~EAAE~~;~~CACR~~,UAAU,EACR,OAAO,EACL,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD,EACF,EACF;CACF,CAAC,EAOW,IAAQ,EAAM,YACxB,GAAO,MAAQ,kBAAA,cAAC,GAAD;CAAa,GAAI;CAAY;CAAO,CAAA,CACrD;AAED,EAAM,cAAc"}
1	+ {"version":3,"file":"Image.js","names":[],"sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\n// (potentially unnecessary now we've moved to Tailwind)\nexport const StyledImage = styled('img', {\n base: ['align-middle', 'max-w-full'],\n variants: {\n fluid: {\n true: [\n \"[[src$='.svg']]:h-auto\",\n \"[[src$='.svg']]:max-w-none\",\n \"[[src$='.svg']]:w-full\",\n '[[width]]:[[height]]:h-auto',\n '[[width]]:w-auto'\n ]\n }\n }\n})\n\ntype ImageProps = Override<\n React.ComponentProps<typeof StyledImage>,\n { as?: never }\n>\n\nexport const Image = React.forwardRef<HTMLImageElement, ImageProps>(\n (props, ref) => <StyledImage {...props} ref={ref} />\n)\n\nImage.displayName = 'Image'\n"],"mappings":";;;AAOA,IAAa,IAAc,EAAO,OAAO;CACvC,MAAM,CAAC,gBAAgB,aAAa;CACpC,UAAU,EACR,OAAO,EACL,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD,EACF,EACF;CACF,CAAC,EAOW,IAAQ,EAAM,YACxB,GAAO,MAAQ,kBAAA,cAAC,GAAD;CAAa,GAAI;CAAY;CAAO,CAAA,CACrD;AAED,EAAM,cAAc"}

package/dist/components/input/Input.js CHANGED Viewed

@@ -54,8 +54,11 @@ var i = e("div", {
 i.displayName = "InputBackground";
 var a = e(t, { base: [
 	"appearance-none",
+	"border-none",
 	"bg-none",
+	"bg-transparent",
 	"shadow-none",
+	"box-border",
 	"focus:outline-none",
 	"px-3",
 	"size-full",

package/dist/components/input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n base: [\n 'flex',\n 'text-grey-1000',\n 'transition-[background,border-color]',\n 'duration-100',\n 'ease-out',\n 'w-full'\n ],\n variants: {\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-800',\n 'focus-within:border-blue-800',\n 'rounded-md'\n ],\n modern: [\n 'bg-grey-100',\n 'border-none',\n 'focus-within:outline-2',\n 'focus-within:outline-blue-800',\n 'focus-within:outline-offset-1',\n 'focus-within:outline-solid',\n 'focus-within:z-1',\n 'rounded-md'\n ]\n },\n size: {\n sm: ['h-8'],\n md: ['h-10'],\n lg: ['h-12'],\n xl: ['h-16']\n },\n disabled: {\n true: ['cursor-not-allowed', 'opacity-30']\n },\n state: {\n error: []\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n class: ['border-danger']\n },\n {\n state: 'error',\n appearance: 'modern',\n class: ['bg-danger-light', 'focus-within:outline-danger']\n }\n ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled(Text, {\n base: [\n 'appearance-none',\n 'bg-none',\n 'shadow-none',\n 'focus:outline-none',\n 'px-3',\n 'size-full',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700'\n ]\n})\n\nexport type InputTextProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size'\n> &\n Omit<React.ComponentProps<typeof StyledInputText>, 'type' \| 'as'> & {\n // override default 'type' property to prevent Input from being used to render\n // checkboxes, radios etc — we have dedicated components for them\n type?: 'text' \| 'number' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'search'\n as?: never\n disabled?: boolean\n }\n\nconst toTextSize = {\n sm: 'sm',\n md: 'md',\n lg: 'md',\n xl: 'lg'\n}\n\nexport const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n ({ type = 'text', size, ...rest }, ref) => {\n const textSize = React.useMemo(\n () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n [size]\n )\n\n return (\n <StyledInputText\n ref={ref}\n as=\"input\"\n type={type === 'number' ? 'text' : type}\n inputMode={type === 'number' ? 'numeric' : undefined}\n pattern={type === 'number' ? '[0-9]*' : undefined}\n size={textSize}\n {...(rest as any)}\n />\n )\n }\n)\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n React.ComponentProps<typeof InputText>,\n 'size' \| 'state' \| 'appearance'\n> & {\n size?: InputBackgroundProps['size']\n state?: InputBackgroundProps['state']\n appearance?: InputBackgroundProps['appearance']\n disabled?: boolean\n name?: string\n readOnly?: boolean\n value?: string \| number\n onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n size = 'md',\n appearance = 'standard',\n state,\n disabled,\n style,\n ...rest\n },\n ref\n ) => {\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n disabled={disabled}\n state={state}\n className={className}\n style={style}\n >\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\n }\n)\n\nInput.displayName = 'Input'\n"],"mappings":";;;;;AAOA,IAAa,IAAkB,EAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,UAAU,EACR,MAAM,CAAC,sBAAsB,aAAa,EAC3C;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,gBAAgB;EACzB,EACD;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,mBAAmB,8BAA8B;EAC1D,CACF;CACF,CAAC;AAEF,EAAgB,cAAc;AAE9B,IAAM,IAAkB,EAAO,GAAM,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAcI,IAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAY,EAAM,YAC5B,EAAE,UAAO,QAAQ,SAAM,GAAG,KAAQ,MAAQ;CACzC,IAAM,IAAW,EAAM,cACf,EAA2B,IAAO,MAAM,EAAW,GAAG,EAC5D,CAAC,EAAK,CACP;AAED,QACE,kBAAA,cAAC,GAAD;EACO;EACL,IAAG;EACH,MAAM,MAAS,WAAW,SAAS;EACnC,WAAW,MAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,MAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAK;EACL,CAAA;EAGP;AAED,EAAU,cAAc;AAiBxB,IAAa,IAAQ,EAAM,YAEvB,EACE,cACA,UAAO,MACP,gBAAa,YACb,UACA,aACA,UACA,GAAG,KAEL,MAGE,kBAAA,cAAC,GAAD;CACQ;CACM;CACF;CACH;CACI;CACJ;CAGS,EADhB,kBAAA,cAAC,GAAD;CAAiB;CAAW;CAAe;CAAU,GAAI;CAAQ,CAAA,CACjD,CAGvB;AAED,EAAM,cAAc"}
1	+ {"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n base: [\n 'flex',\n 'text-grey-1000',\n 'transition-[background,border-color]',\n 'duration-100',\n 'ease-out',\n 'w-full'\n ],\n variants: {\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-800',\n 'focus-within:border-blue-800',\n 'rounded-md'\n ],\n modern: [\n 'bg-grey-100',\n 'border-none',\n 'focus-within:outline-2',\n 'focus-within:outline-blue-800',\n 'focus-within:outline-offset-1',\n 'focus-within:outline-solid',\n 'focus-within:z-1',\n 'rounded-md'\n ]\n },\n size: {\n sm: ['h-8'],\n md: ['h-10'],\n lg: ['h-12'],\n xl: ['h-16']\n },\n disabled: {\n true: ['cursor-not-allowed', 'opacity-30']\n },\n state: {\n error: []\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n class: ['border-danger']\n },\n {\n state: 'error',\n appearance: 'modern',\n class: ['bg-danger-light', 'focus-within:outline-danger']\n }\n ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled(Text, {\n base: [\n 'appearance-none',\n 'border-none',\n 'bg-none',\n 'bg-transparent',\n 'shadow-none',\n 'box-border',\n 'focus:outline-none',\n 'px-3',\n 'size-full',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700'\n ]\n})\n\nexport type InputTextProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size'\n> &\n Omit<React.ComponentProps<typeof StyledInputText>, 'type' \| 'as'> & {\n // override default 'type' property to prevent Input from being used to render\n // checkboxes, radios etc — we have dedicated components for them\n type?: 'text' \| 'number' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'search'\n as?: never\n disabled?: boolean\n }\n\nconst toTextSize = {\n sm: 'sm',\n md: 'md',\n lg: 'md',\n xl: 'lg'\n}\n\nexport const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n ({ type = 'text', size, ...rest }, ref) => {\n const textSize = React.useMemo(\n () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n [size]\n )\n\n return (\n <StyledInputText\n ref={ref}\n as=\"input\"\n type={type === 'number' ? 'text' : type}\n inputMode={type === 'number' ? 'numeric' : undefined}\n pattern={type === 'number' ? '[0-9]*' : undefined}\n size={textSize}\n {...(rest as any)}\n />\n )\n }\n)\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n React.ComponentProps<typeof InputText>,\n 'size' \| 'state' \| 'appearance'\n> & {\n size?: InputBackgroundProps['size']\n state?: InputBackgroundProps['state']\n appearance?: InputBackgroundProps['appearance']\n disabled?: boolean\n name?: string\n readOnly?: boolean\n value?: string \| number\n onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n size = 'md',\n appearance = 'standard',\n state,\n disabled,\n style,\n ...rest\n },\n ref\n ) => {\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n disabled={disabled}\n state={state}\n className={className}\n style={style}\n >\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\n }\n)\n\nInput.displayName = 'Input'\n"],"mappings":";;;;;AAOA,IAAa,IAAkB,EAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,UAAU,EACR,MAAM,CAAC,sBAAsB,aAAa,EAC3C;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,gBAAgB;EACzB,EACD;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,mBAAmB,8BAA8B;EAC1D,CACF;CACF,CAAC;AAEF,EAAgB,cAAc;AAE9B,IAAM,IAAkB,EAAO,GAAM,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAcI,IAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAY,EAAM,YAC5B,EAAE,UAAO,QAAQ,SAAM,GAAG,KAAQ,MAAQ;CACzC,IAAM,IAAW,EAAM,cACf,EAA2B,IAAO,MAAM,EAAW,GAAG,EAC5D,CAAC,EAAK,CACP;AAED,QACE,kBAAA,cAAC,GAAD;EACO;EACL,IAAG;EACH,MAAM,MAAS,WAAW,SAAS;EACnC,WAAW,MAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,MAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAK;EACL,CAAA;EAGP;AAED,EAAU,cAAc;AAiBxB,IAAa,IAAQ,EAAM,YAEvB,EACE,cACA,UAAO,MACP,gBAAa,YACb,UACA,aACA,UACA,GAAG,KAEL,MAGE,kBAAA,cAAC,GAAD;CACQ;CACM;CACF;CACH;CACI;CACJ;CAGS,EADhB,kBAAA,cAAC,GAAD;CAAiB;CAAW;CAAe;CAAU,GAAI;CAAQ,CAAA,CACjD,CAGvB;AAED,EAAM,cAAc"}

package/dist/components/label/Label.js CHANGED Viewed

@@ -2,7 +2,11 @@ import { styled as e } from "../../styled.js";
 import * as t from "react";
 //#region src/components/label/Label.tsx
 var n = e("label", {
-	base: ["text-grey-900", "font-body"],
+	base: [
+		"text-grey-900",
+		"font-body",
+		"m-0"
+	],
 	variants: {
 		size: {
 			sm: [

package/dist/components/label/Label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nconst StyledLabel = styled('label', {\n base: ['text-grey-900', 'font-body'],\n variants: {\n size: {\n sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n md: ['text-md', 'leading-normal', 'capsize-[0.3864]']\n },\n type: {\n block: ['block', 'font-semibold'],\n inline: ['flex', 'font-normal', 'max-w-max']\n },\n align: { start: [], center: [] },\n direction: { reverse: [], row: [] },\n appearance: { standard: [], modern: [] }\n },\n compoundVariants: [\n {\n type: 'inline',\n align: 'start',\n class: ['items-start']\n },\n {\n type: 'inline',\n align: 'center',\n class: ['items-center']\n },\n {\n type: 'inline',\n direction: 'reverse',\n class: ['flex-row-reverse']\n },\n {\n type: 'inline',\n direction: 'row',\n class: ['flex-row']\n },\n {\n type: 'block',\n appearance: 'modern',\n class: ['font-normal']\n }\n ]\n})\n\nexport type LabelProps = Override<\n React.ComponentPropsWithoutRef<typeof StyledLabel>,\n {\n as?: 'label' \| 'legend'\n required?: boolean\n }\n>\n\nexport const Label = ({\n align = 'start',\n as = 'label',\n direction = 'row',\n size = 'md',\n type = 'block',\n children,\n required,\n ...rest\n}: LabelProps) => (\n <StyledLabel\n as={as}\n size={size}\n type={type}\n align={align}\n direction={direction}\n {...rest}\n >\n {children}\n {required && (\n <span className=\"text-danger ml-1 font-normal\" aria-hidden>\n *\n </span>\n )}\n </StyledLabel>\n)\n\nLabel.displayName = 'Label'\n"],"mappings":";;;AAKA,IAAM,IAAc,EAAO,SAAS;CAClC,MAAM~~,CAAC,iBAAiB,YAAY~~;~~CACpC~~,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACtD;EACD,MAAM;GACJ,OAAO,CAAC,SAAS,gBAAgB;GACjC,QAAQ;IAAC;IAAQ;IAAe;IAAY;GAC7C;EACD,OAAO;GAAE,OAAO,EAAE;GAAE,QAAQ,EAAE;GAAE;EAChC,WAAW;GAAE,SAAS,EAAE;GAAE,KAAK,EAAE;GAAE;EACnC,YAAY;GAAE,UAAU,EAAE;GAAE,QAAQ,EAAE;GAAE;EACzC;CACD,kBAAkB;EAChB;GACE,MAAM;GACN,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACD;GACE,MAAM;GACN,OAAO;GACP,OAAO,CAAC,eAAe;GACxB;EACD;GACE,MAAM;GACN,WAAW;GACX,OAAO,CAAC,mBAAmB;GAC5B;EACD;GACE,MAAM;GACN,WAAW;GACX,OAAO,CAAC,WAAW;GACpB;EACD;GACE,MAAM;GACN,YAAY;GACZ,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC,EAUW,KAAS,EACpB,WAAQ,SACR,QAAK,SACL,eAAY,OACZ,UAAO,MACP,UAAO,SACP,aACA,aACA,GAAG,QAEH,kBAAA,cAAC,GAAD;CACM;CACE;CACA;CACC;CACI;CACX,GAAI;CAQQ,EANX,GACA,KACC,kBAAA,cAAC,QAAD;CAAM,WAAU;CAA+B,eAAA;CAExC,EAFoD,IAEpD,CAEG;AAGhB,EAAM,cAAc"}
1	+ {"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nconst StyledLabel = styled('label', {\n base: ['text-grey-900', 'font-body', 'm-0'],\n variants: {\n size: {\n sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n md: ['text-md', 'leading-normal', 'capsize-[0.3864]']\n },\n type: {\n block: ['block', 'font-semibold'],\n inline: ['flex', 'font-normal', 'max-w-max']\n },\n align: { start: [], center: [] },\n direction: { reverse: [], row: [] },\n appearance: { standard: [], modern: [] }\n },\n compoundVariants: [\n {\n type: 'inline',\n align: 'start',\n class: ['items-start']\n },\n {\n type: 'inline',\n align: 'center',\n class: ['items-center']\n },\n {\n type: 'inline',\n direction: 'reverse',\n class: ['flex-row-reverse']\n },\n {\n type: 'inline',\n direction: 'row',\n class: ['flex-row']\n },\n {\n type: 'block',\n appearance: 'modern',\n class: ['font-normal']\n }\n ]\n})\n\nexport type LabelProps = Override<\n React.ComponentPropsWithoutRef<typeof StyledLabel>,\n {\n as?: 'label' \| 'legend'\n required?: boolean\n }\n>\n\nexport const Label = ({\n align = 'start',\n as = 'label',\n direction = 'row',\n size = 'md',\n type = 'block',\n children,\n required,\n ...rest\n}: LabelProps) => (\n <StyledLabel\n as={as}\n size={size}\n type={type}\n align={align}\n direction={direction}\n {...rest}\n >\n {children}\n {required && (\n <span className=\"text-danger ml-1 font-normal\" aria-hidden>\n *\n </span>\n )}\n </StyledLabel>\n)\n\nLabel.displayName = 'Label'\n"],"mappings":";;;AAKA,IAAM,IAAc,EAAO,SAAS;CAClC,MAAM;EAAC;EAAiB;EAAa;EAAM;CAC3C,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACtD;EACD,MAAM;GACJ,OAAO,CAAC,SAAS,gBAAgB;GACjC,QAAQ;IAAC;IAAQ;IAAe;IAAY;GAC7C;EACD,OAAO;GAAE,OAAO,EAAE;GAAE,QAAQ,EAAE;GAAE;EAChC,WAAW;GAAE,SAAS,EAAE;GAAE,KAAK,EAAE;GAAE;EACnC,YAAY;GAAE,UAAU,EAAE;GAAE,QAAQ,EAAE;GAAE;EACzC;CACD,kBAAkB;EAChB;GACE,MAAM;GACN,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACD;GACE,MAAM;GACN,OAAO;GACP,OAAO,CAAC,eAAe;GACxB;EACD;GACE,MAAM;GACN,WAAW;GACX,OAAO,CAAC,mBAAmB;GAC5B;EACD;GACE,MAAM;GACN,WAAW;GACX,OAAO,CAAC,WAAW;GACpB;EACD;GACE,MAAM;GACN,YAAY;GACZ,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC,EAUW,KAAS,EACpB,WAAQ,SACR,QAAK,SACL,eAAY,OACZ,UAAO,MACP,UAAO,SACP,aACA,aACA,GAAG,QAEH,kBAAA,cAAC,GAAD;CACM;CACE;CACA;CACC;CACI;CACX,GAAI;CAQQ,EANX,GACA,KACC,kBAAA,cAAC,QAAD;CAAM,WAAU;CAA+B,eAAA;CAExC,EAFoD,IAEpD,CAEG;AAGhB,EAAM,cAAc"}

package/dist/components/navigation/NavigationMenu.js CHANGED Viewed

@@ -18,7 +18,8 @@ var f = e(d.Root, { base: [
 	"flex",
 	"justify-center",
 	"items-center",
-	"gap-1"
+	"gap-1",
+	"list-none"
 ] }), m = e(d.Viewport, { base: ["z-2147483647"] }), h = e("div", { base: [
 	"absolute",
 	"left-0",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport clsx from 'clsx'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenuContext'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n NavigationMenuDropdownItem,\n NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n base: ['flex', 'justify-center', 'items-center', 'gap-1']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n children,\n className,\n ...props\n}: React.ComponentProps<typeof StyledMenu>) => {\n const [offset, setOffset] = React.useState<number \| null \| undefined>()\n const [activeItem, setActiveItem] = React.useState<string \| undefined>()\n const [listWidth, setListWidth] = React.useState(0)\n const listRef = React.useRef<HTMLUListElement>(null)\n\n React.useLayoutEffect(() => {\n if (listRef.current) {\n setListWidth(listRef.current.offsetWidth)\n }\n }, [React.Children.toArray(children).length])\n\n React.useEffect(() => {\n let timer: ReturnType<typeof setTimeout>\n\n // Delay transitioning back to initial position\n // to allow enough time for fadeOut animation to complete\n if (activeItem === '') {\n timer = setTimeout(() => setOffset(null), 200)\n }\n\n return () => {\n if (timer !== null) {\n clearTimeout(timer)\n }\n }\n }, [activeItem])\n\n // https://github.com/radix-ui/primitives/issues/1462\n const onNodeUpdate = (trigger: HTMLButtonElement, itemValue: string) => {\n if (trigger && listWidth && activeItem === itemValue) {\n const listCenter = listWidth / 2\n\n const triggerOffsetRight =\n listWidth -\n trigger.offsetLeft -\n trigger.offsetWidth +\n trigger.offsetWidth / 2\n\n setOffset(Math.round(listCenter - triggerOffsetRight))\n }\n\n return trigger\n }\n\n return (\n <NavigationMenuContext.Provider value={{ onNodeUpdate }}>\n <StyledMenu\n className={clsx(className)}\n style={navigationMenuColorSchemes['light']}\n onValueChange={setActiveItem}\n {...props}\n >\n <StyledList ref={listRef}>{children}</StyledList>\n <ViewportPosition>\n <StyledViewport\n style={{ '--navigation-menu-viewport-offset': `${offset \|\| 0}px` }}\n className={clsx([\n 'data-[state=open]:animate-fade-in',\n 'data-[state=closed]:animate-fade-out',\n 'translate-x-(--navigation-menu-viewport-offset)'\n ])}\n />\n </ViewportPosition>\n </StyledMenu>\n </NavigationMenuContext.Provider>\n )\n}\n\nexport const NavigationMenu = Object.assign(NavigationMenuComponent, {\n Link: NavigationMenuLink,\n Dropdown: NavigationMenuDropdown,\n DropdownContent: NavigationMenuDropdownContent,\n DropdownItem: NavigationMenuDropdownItem,\n DropdownItemTitle: NavigationMenuDropdownItemTitle,\n DropdownTrigger: NavigationMenuDropdownTrigger\n})\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAM,IAAa,EAAO,EAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAW,EAC7C,CAAC,EAEI,IAAa,EAAO,EAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;~~CAAQ~~,~~EAC1D~~,CAAC,EAEI,IAAiB,EAAO,EAAwB,UAAU,EAC9D,MAAM,CAAC,eAAe,EACvB,CAAC,EAEI,IAAmB,EAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;CAAiB,EAC7E,CAAC,EAEI,KAA2B,EAC/B,aACA,cACA,GAAG,QAC0C;CAC7C,IAAM,CAAC,GAAQ,KAAa,EAAM,UAAqC,EACjE,CAAC,GAAY,KAAiB,EAAM,UAA8B,EAClE,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAE,EAC7C,IAAU,EAAM,OAAyB,KAAK;AAyCpD,QAvCA,EAAM,sBAAsB;AAC1B,EAAI,EAAQ,WACV,EAAa,EAAQ,QAAQ,YAAY;IAE1C,CAAC,EAAM,SAAS,QAAQ,EAAS,CAAC,OAAO,CAAC,EAE7C,EAAM,gBAAgB;EACpB,IAAI;AAQJ,SAJI,MAAe,OACjB,IAAQ,iBAAiB,EAAU,KAAK,EAAE,IAAI,SAGnC;AACX,GAAI,MAAU,QACZ,aAAa,EAAM;;IAGtB,CAAC,EAAW,CAAC,EAoBd,kBAAA,cAAC,EAAsB,UAAvB,EAAgC,OAAO,EAAE,eAjBrB,GAA4B,MAAsB;AACtE,MAAI,KAAW,KAAa,MAAe,GAAW;GACpD,IAAM,IAAa,IAAY,GAEzB,IACJ,IACA,EAAQ,aACR,EAAQ,cACR,EAAQ,cAAc;AAExB,KAAU,KAAK,MAAM,IAAa,EAAmB,CAAC;;AAGxD,SAAO;IAIgD,EAmBtB,EAlB/B,kBAAA,cAAC,GAAD;EACE,WAAW,EAAK,EAAU;EAC1B,OAAO,EAA2B;EAClC,eAAe;EACf,GAAI;EAaO,EAXX,kBAAA,cAAC,GAAD,EAAY,KAAK,GAAgC,EAAtB,EAAsB,EACjD,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAD;EACE,OAAO,EAAE,qCAAqC,GAAG,KAAU,EAAE,KAAK;EAClE,WAAW,EAAK;GACd;GACA;GACA;GACD,CAAC;EACF,CAAA,CACe,CACR,CACkB;GAIxB,IAAiB,OAAO,OAAO,GAAyB;CACnE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;CAClB,CAAC;AAEF,EAAwB,cAAc"}
1	+ {"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport clsx from 'clsx'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenuContext'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n NavigationMenuDropdownItem,\n NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n children,\n className,\n ...props\n}: React.ComponentProps<typeof StyledMenu>) => {\n const [offset, setOffset] = React.useState<number \| null \| undefined>()\n const [activeItem, setActiveItem] = React.useState<string \| undefined>()\n const [listWidth, setListWidth] = React.useState(0)\n const listRef = React.useRef<HTMLUListElement>(null)\n\n React.useLayoutEffect(() => {\n if (listRef.current) {\n setListWidth(listRef.current.offsetWidth)\n }\n }, [React.Children.toArray(children).length])\n\n React.useEffect(() => {\n let timer: ReturnType<typeof setTimeout>\n\n // Delay transitioning back to initial position\n // to allow enough time for fadeOut animation to complete\n if (activeItem === '') {\n timer = setTimeout(() => setOffset(null), 200)\n }\n\n return () => {\n if (timer !== null) {\n clearTimeout(timer)\n }\n }\n }, [activeItem])\n\n // https://github.com/radix-ui/primitives/issues/1462\n const onNodeUpdate = (trigger: HTMLButtonElement, itemValue: string) => {\n if (trigger && listWidth && activeItem === itemValue) {\n const listCenter = listWidth / 2\n\n const triggerOffsetRight =\n listWidth -\n trigger.offsetLeft -\n trigger.offsetWidth +\n trigger.offsetWidth / 2\n\n setOffset(Math.round(listCenter - triggerOffsetRight))\n }\n\n return trigger\n }\n\n return (\n <NavigationMenuContext.Provider value={{ onNodeUpdate }}>\n <StyledMenu\n className={clsx(className)}\n style={navigationMenuColorSchemes['light']}\n onValueChange={setActiveItem}\n {...props}\n >\n <StyledList ref={listRef}>{children}</StyledList>\n <ViewportPosition>\n <StyledViewport\n style={{ '--navigation-menu-viewport-offset': `${offset \|\| 0}px` }}\n className={clsx([\n 'data-[state=open]:animate-fade-in',\n 'data-[state=closed]:animate-fade-out',\n 'translate-x-(--navigation-menu-viewport-offset)'\n ])}\n />\n </ViewportPosition>\n </StyledMenu>\n </NavigationMenuContext.Provider>\n )\n}\n\nexport const NavigationMenu = Object.assign(NavigationMenuComponent, {\n Link: NavigationMenuLink,\n Dropdown: NavigationMenuDropdown,\n DropdownContent: NavigationMenuDropdownContent,\n DropdownItem: NavigationMenuDropdownItem,\n DropdownItemTitle: NavigationMenuDropdownItemTitle,\n DropdownTrigger: NavigationMenuDropdownTrigger\n})\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAM,IAAa,EAAO,EAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAW,EAC7C,CAAC,EAEI,IAAa,EAAO,EAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;CAAY,EACvE,CAAC,EAEI,IAAiB,EAAO,EAAwB,UAAU,EAC9D,MAAM,CAAC,eAAe,EACvB,CAAC,EAEI,IAAmB,EAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;CAAiB,EAC7E,CAAC,EAEI,KAA2B,EAC/B,aACA,cACA,GAAG,QAC0C;CAC7C,IAAM,CAAC,GAAQ,KAAa,EAAM,UAAqC,EACjE,CAAC,GAAY,KAAiB,EAAM,UAA8B,EAClE,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAE,EAC7C,IAAU,EAAM,OAAyB,KAAK;AAyCpD,QAvCA,EAAM,sBAAsB;AAC1B,EAAI,EAAQ,WACV,EAAa,EAAQ,QAAQ,YAAY;IAE1C,CAAC,EAAM,SAAS,QAAQ,EAAS,CAAC,OAAO,CAAC,EAE7C,EAAM,gBAAgB;EACpB,IAAI;AAQJ,SAJI,MAAe,OACjB,IAAQ,iBAAiB,EAAU,KAAK,EAAE,IAAI,SAGnC;AACX,GAAI,MAAU,QACZ,aAAa,EAAM;;IAGtB,CAAC,EAAW,CAAC,EAoBd,kBAAA,cAAC,EAAsB,UAAvB,EAAgC,OAAO,EAAE,eAjBrB,GAA4B,MAAsB;AACtE,MAAI,KAAW,KAAa,MAAe,GAAW;GACpD,IAAM,IAAa,IAAY,GAEzB,IACJ,IACA,EAAQ,aACR,EAAQ,cACR,EAAQ,cAAc;AAExB,KAAU,KAAK,MAAM,IAAa,EAAmB,CAAC;;AAGxD,SAAO;IAIgD,EAmBtB,EAlB/B,kBAAA,cAAC,GAAD;EACE,WAAW,EAAK,EAAU;EAC1B,OAAO,EAA2B;EAClC,eAAe;EACf,GAAI;EAaO,EAXX,kBAAA,cAAC,GAAD,EAAY,KAAK,GAAgC,EAAtB,EAAsB,EACjD,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAD;EACE,OAAO,EAAE,qCAAqC,GAAG,KAAU,EAAE,KAAK;EAClE,WAAW,EAAK;GACd;GACA;GACA;GACD,CAAC;EACF,CAAA,CACe,CACR,CACkB;GAIxB,IAAiB,OAAO,OAAO,GAAyB;CACnE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;CAClB,CAAC;AAEF,EAAwB,cAAc"}

package/dist/components/pagination/PaginationPage.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { usePagination as t } from "./usePagination.js";
 import * as n from "react";
 //#region src/components/pagination/PaginationPage.tsx
 var r = e("button", {
-	base: /* @__PURE__ */ "items-center.border.border-transparent.rounded-sm.cursor-pointer.font-body.justify-center.whitespace-nowrap.w-max.flex.flex-col.font-normal.text-text-subtle.bg-(--base-1).relative.not-disabled:active:bg-(--base-3).not-disabled:active:text-(--text-bold).not-disabled:focus-visible:outline-none.not-disabled:focus-visible:relative.not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px].not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px].not-disabled:focus-visible:z-1.not-disabled:hover:bg-(--base-2).not-disabled:hover:text-text-regular.disabled:cursor-not-allowed.disabled:opacity-30.disabled:pointer-events-none".split("."),
+	base: /* @__PURE__ */ "items-center.border.border-transparent.rounded-sm.cursor-pointer.font-body.justify-center.whitespace-nowrap.w-max.flex.flex-col.p-0.font-normal.text-text-subtle.bg-(--base-1).relative.not-disabled:active:bg-(--base-3).not-disabled:active:text-(--text-bold).not-disabled:focus-visible:outline-none.not-disabled:focus-visible:relative.not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px].not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px].not-disabled:focus-visible:z-1.not-disabled:hover:bg-(--base-2).not-disabled:hover:text-text-regular.disabled:cursor-not-allowed.disabled:opacity-30.disabled:pointer-events-none".split("."),
 	variants: {
 		size: { md: ["size-10"] },
 		selected: { true: [

package/dist/components/pagination/PaginationPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaginationPage.js","names":[],"sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n base: [\n 'items-center',\n 'border',\n 'border-transparent',\n 'rounded-sm',\n 'cursor-pointer',\n 'font-body',\n 'justify-center',\n 'whitespace-nowrap',\n 'w-max',\n 'flex',\n 'flex-col',\n 'font-normal',\n 'text-text-subtle',\n 'bg-(--base-1)',\n 'relative',\n 'not-disabled:active:bg-(--base-3)',\n 'not-disabled:active:text-(--text-bold)',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:bg-(--base-2)',\n 'not-disabled:hover:text-text-regular',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n size: {\n md: ['size-10']\n },\n selected: {\n true: [\n 'border',\n 'border-(--accent-9)',\n 'font-semibold',\n 'not-disabled:active:border-(--accent-11)',\n 'not-disabled:active:text-(--accent-11)',\n 'not-disabled:hover:border-(--accent-10)',\n 'not-disabled:hover:text-(--accent-10)',\n 'text-(--accent-9)'\n ]\n },\n indicated: {\n true: [\n 'bg-(--accent-9)',\n 'font-semibold',\n 'not-disabled:active:bg-(--accent-11)',\n 'not-disabled:active:text-white',\n 'not-disabled:hover:bg-(--accent-10)',\n 'not-disabled:hover:text-white',\n 'text-white'\n ]\n }\n },\n compoundVariants: [\n {\n selected: true,\n indicated: true,\n class: [\n 'bg-(--accent-9)',\n 'font-semibold',\n 'not-disabled:active:bg-(--accent-11)',\n 'not-disabled:active:text-white',\n 'not-disabled:hover:bg-(--accent-10)',\n 'not-disabled:hover:text-white',\n 'not-focus-visible:border-white!',\n 'shadow-[var(--accent-9)_0px_0px_0px_1px]',\n 'text-white'\n ]\n }\n ]\n})\n\nexport const PaginationPage = ({\n pageNumber,\n className,\n onClick\n}: PaginationPageProps) => {\n const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n usePagination()\n\n const isIndicated = indicatedPages.includes(pageNumber)\n const isDisabled = disabledPages.includes(pageNumber)\n\n const isSelected = currentPage === pageNumber\n\n const handleOnHover = () => {\n if (isSelected \|\| isDisabled) return\n onItemHover?.(pageNumber)\n }\n\n const handleOnClick = (pageNumber) => {\n onClick?.()\n goToPage(pageNumber)\n }\n\n return (\n <StyledButton\n selected={isSelected}\n size=\"md\"\n onClick={() => handleOnClick(pageNumber)}\n className={className}\n indicated={isIndicated}\n disabled={isDisabled}\n aria-current={isSelected && 'page'}\n aria-disabled={isDisabled}\n onMouseOver={handleOnHover}\n >\n {pageNumber}\n </StyledButton>\n )\n}\n"],"mappings":";;;;AAOA,IAAM,IAAe,EAAO,UAAU;CACpC,MAAM,~~8pBA4BL~~;CACD,UAAU;EACR,MAAM,EACJ,IAAI,CAAC,UAAU,EAChB;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACD,WAAW,EACT,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,UAAU;EACV,WAAW;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,CACF;CACF,CAAC,EAEW,KAAkB,EAC7B,eACA,cACA,iBACyB;CACzB,IAAM,EAAE,gBAAa,aAAU,mBAAgB,kBAAe,mBAC5D,GAAe,EAEX,IAAc,EAAe,SAAS,EAAW,EACjD,IAAa,EAAc,SAAS,EAAW,EAE/C,IAAa,MAAgB,GAE7B,UAAsB;AACtB,OAAc,KAClB,IAAc,EAAW;IAGrB,KAAiB,MAAe;AAEpC,EADA,KAAW,EACX,EAAS,EAAW;;AAGtB,QACE,kBAAA,cAAC,GAAD;EACE,UAAU;EACV,MAAK;EACL,eAAe,EAAc,EAAW;EAC7B;EACX,WAAW;EACX,UAAU;EACV,gBAAc,KAAc;EAC5B,iBAAe;EACf,aAAa;EAGA,EADZ,EACY"}
1	+ {"version":3,"file":"PaginationPage.js","names":[],"sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n base: [\n 'items-center',\n 'border',\n 'border-transparent',\n 'rounded-sm',\n 'cursor-pointer',\n 'font-body',\n 'justify-center',\n 'whitespace-nowrap',\n 'w-max',\n 'flex',\n 'flex-col',\n 'p-0',\n 'font-normal',\n 'text-text-subtle',\n 'bg-(--base-1)',\n 'relative',\n 'not-disabled:active:bg-(--base-3)',\n 'not-disabled:active:text-(--text-bold)',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:bg-(--base-2)',\n 'not-disabled:hover:text-text-regular',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n size: {\n md: ['size-10']\n },\n selected: {\n true: [\n 'border',\n 'border-(--accent-9)',\n 'font-semibold',\n 'not-disabled:active:border-(--accent-11)',\n 'not-disabled:active:text-(--accent-11)',\n 'not-disabled:hover:border-(--accent-10)',\n 'not-disabled:hover:text-(--accent-10)',\n 'text-(--accent-9)'\n ]\n },\n indicated: {\n true: [\n 'bg-(--accent-9)',\n 'font-semibold',\n 'not-disabled:active:bg-(--accent-11)',\n 'not-disabled:active:text-white',\n 'not-disabled:hover:bg-(--accent-10)',\n 'not-disabled:hover:text-white',\n 'text-white'\n ]\n }\n },\n compoundVariants: [\n {\n selected: true,\n indicated: true,\n class: [\n 'bg-(--accent-9)',\n 'font-semibold',\n 'not-disabled:active:bg-(--accent-11)',\n 'not-disabled:active:text-white',\n 'not-disabled:hover:bg-(--accent-10)',\n 'not-disabled:hover:text-white',\n 'not-focus-visible:border-white!',\n 'shadow-[var(--accent-9)_0px_0px_0px_1px]',\n 'text-white'\n ]\n }\n ]\n})\n\nexport const PaginationPage = ({\n pageNumber,\n className,\n onClick\n}: PaginationPageProps) => {\n const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n usePagination()\n\n const isIndicated = indicatedPages.includes(pageNumber)\n const isDisabled = disabledPages.includes(pageNumber)\n\n const isSelected = currentPage === pageNumber\n\n const handleOnHover = () => {\n if (isSelected \|\| isDisabled) return\n onItemHover?.(pageNumber)\n }\n\n const handleOnClick = (pageNumber) => {\n onClick?.()\n goToPage(pageNumber)\n }\n\n return (\n <StyledButton\n selected={isSelected}\n size=\"md\"\n onClick={() => handleOnClick(pageNumber)}\n className={className}\n indicated={isIndicated}\n disabled={isDisabled}\n aria-current={isSelected && 'page'}\n aria-disabled={isDisabled}\n onMouseOver={handleOnHover}\n >\n {pageNumber}\n </StyledButton>\n )\n}\n"],"mappings":";;;;AAOA,IAAM,IAAe,EAAO,UAAU;CACpC,MAAM,kqBA6BL;CACD,UAAU;EACR,MAAM,EACJ,IAAI,CAAC,UAAU,EAChB;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACD,WAAW,EACT,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,UAAU;EACV,WAAW;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,CACF;CACF,CAAC,EAEW,KAAkB,EAC7B,eACA,cACA,iBACyB;CACzB,IAAM,EAAE,gBAAa,aAAU,mBAAgB,kBAAe,mBAC5D,GAAe,EAEX,IAAc,EAAe,SAAS,EAAW,EACjD,IAAa,EAAc,SAAS,EAAW,EAE/C,IAAa,MAAgB,GAE7B,UAAsB;AACtB,OAAc,KAClB,IAAc,EAAW;IAGrB,KAAiB,MAAe;AAEpC,EADA,KAAW,EACX,EAAS,EAAW;;AAGtB,QACE,kBAAA,cAAC,GAAD;EACE,UAAU;EACV,MAAK;EACL,eAAe,EAAc,EAAW;EAC7B;EACX,WAAW;EACX,UAAU;EACV,gBAAc,KAAc;EAC5B,iBAAe;EACf,aAAa;EAGA,EADZ,EACY"}

package/dist/components/progress-bar/ProgressBar.js CHANGED Viewed

@@ -27,6 +27,7 @@ var r = e(n.Root, {
 }, { enabledResponsiveVariants: !0 }), i = e(n.Indicator, { base: [
 	"bg-current",
 	"rounded-full",
+	"box-border",
 	"h-full",
 	"absolute",
 	"transition-all",

package/dist/components/progress-bar/ProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledProgressBar = styled(\n Progress.Root,\n {\n base: [\n 'rounded-full',\n 'bg-grey-200',\n 'relative',\n 'overflow-hidden',\n 'w-full'\n ],\n variants: {\n size: {\n sm: ['h-1'],\n md: ['h-2']\n },\n theme: {\n primary: ['text-primary-800'],\n info: ['text-info'],\n success: ['text-success'],\n warning: ['text-warning'],\n danger: ['text-danger'],\n neutral: ['bg-grey-400', 'text-grey-800']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n base: [\n 'bg-current',\n 'rounded-full',\n 'h-full',\n 'absolute',\n 'transition-all',\n 'duration-300',\n 'ease-out'\n ]\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n typeof StyledProgressBar\n> &\n (\n \| { id: string; 'aria-label'?: string }\n \| { 'aria-label': string; id?: string }\n )\n\nexport const ProgressBar = ({\n value,\n max = 100,\n size = 'md',\n theme = 'primary',\n ...remainingProps\n}: ProgressBarProps) => (\n <StyledProgressBar\n value={value}\n max={max}\n theme={theme}\n size={size}\n {...remainingProps}\n >\n <StyledIndicator\n className=\"w-full translate-x-(--progress)\"\n style={{\n '--progress': `-${100 - ((value \|\| 0) / max) * 100}%`\n }}\n />\n </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"mappings":";;;;AAKA,IAAM,IAAoB,EACxB,EAAS,MACT;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACZ;EACD,OAAO;GACL,SAAS,CAAC,mBAAmB;GAC7B,MAAM,CAAC,YAAY;GACnB,SAAS,CAAC,eAAe;GACzB,SAAS,CAAC,eAAe;GACzB,QAAQ,CAAC,cAAc;GACvB,SAAS,CAAC,eAAe,gBAAgB;GAC1C;EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAEK,IAAkB,EAAO,EAAS,WAAW,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAUW,KAAe,EAC1B,UACA,SAAM,KACN,UAAO,MACP,WAAQ,WACR,GAAG,QAEH,kBAAA,cAAC,GAAD;CACS;CACF;CACE;CACD;CACN,GAAI;CAQc,EANlB,kBAAA,cAAC,GAAD;CACE,WAAU;CACV,OAAO,EACL,cAAc,IAAI,OAAQ,KAAS,KAAK,IAAO,IAAI,IACpD;CACD,CAAA,CACgB;AAGtB,EAAY,cAAc"}
1	+ {"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledProgressBar = styled(\n Progress.Root,\n {\n base: [\n 'rounded-full',\n 'bg-grey-200',\n 'relative',\n 'overflow-hidden',\n 'w-full'\n ],\n variants: {\n size: {\n sm: ['h-1'],\n md: ['h-2']\n },\n theme: {\n primary: ['text-primary-800'],\n info: ['text-info'],\n success: ['text-success'],\n warning: ['text-warning'],\n danger: ['text-danger'],\n neutral: ['bg-grey-400', 'text-grey-800']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n base: [\n 'bg-current',\n 'rounded-full',\n 'box-border',\n 'h-full',\n 'absolute',\n 'transition-all',\n 'duration-300',\n 'ease-out'\n ]\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n typeof StyledProgressBar\n> &\n (\n \| { id: string; 'aria-label'?: string }\n \| { 'aria-label': string; id?: string }\n )\n\nexport const ProgressBar = ({\n value,\n max = 100,\n size = 'md',\n theme = 'primary',\n ...remainingProps\n}: ProgressBarProps) => (\n <StyledProgressBar\n value={value}\n max={max}\n theme={theme}\n size={size}\n {...remainingProps}\n >\n <StyledIndicator\n className=\"w-full translate-x-(--progress)\"\n style={{\n '--progress': `-${100 - ((value \|\| 0) / max) * 100}%`\n }}\n />\n </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"mappings":";;;;AAKA,IAAM,IAAoB,EACxB,EAAS,MACT;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACZ;EACD,OAAO;GACL,SAAS,CAAC,mBAAmB;GAC7B,MAAM,CAAC,YAAY;GACnB,SAAS,CAAC,eAAe;GACzB,SAAS,CAAC,eAAe;GACzB,QAAQ,CAAC,cAAc;GACvB,SAAS,CAAC,eAAe,gBAAgB;GAC1C;EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAEK,IAAkB,EAAO,EAAS,WAAW,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAUW,KAAe,EAC1B,UACA,SAAM,KACN,UAAO,MACP,WAAQ,WACR,GAAG,QAEH,kBAAA,cAAC,GAAD;CACS;CACF;CACE;CACD;CACN,GAAI;CAQc,EANlB,kBAAA,cAAC,GAAD;CACE,WAAU;CACV,OAAO,EACL,cAAc,IAAI,OAAQ,KAAS,KAAK,IAAO,IAAI,IACpD;CACD,CAAA,CACgB;AAGtB,EAAY,cAAc"}