npm - @atom-learning/components - Versions diffs - 6.0.0-beta.10 → 6.0.0-beta.11 - Mend

@atom-learning/components 6.0.0-beta.10 → 6.0.0-beta.11

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 (63) hide show

package/dist/components/accordion/Accordion.d.ts CHANGED Viewed

@@ -1,11 +1,9 @@
+import { Root } from '@radix-ui/react-accordion';
 import React from 'react';
 import { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
 import { AccordionTrigger } from './AccordionTrigger';
-declare const StyledRoot: React.ForwardRefExoticComponent<Omit<Omit<(import("@radix-ui/react-accordion").AccordionSingleProps | import("@radix-ui/react-accordion").AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>, never> & {
-    as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type AccordionProps = React.ComponentProps<typeof StyledRoot> & {
+type AccordionProps = React.ComponentProps<typeof Root> & {
     type: 'single' | 'multiple';
 };
 type AccordionType = ReturnType<typeof React.forwardRef<HTMLDivElement, AccordionProps>> & {

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

@@ -1,2 +1,2 @@
-import{Root as c}from"@radix-ui/react-accordion";import r from"react";import{styled as n}from"../../styled.js";import{AccordionContent as f}from"./AccordionContent.js";import{AccordionItem as d}from"./AccordionItem.js";import{AccordionTrigger as p}from"./AccordionTrigger.js";const l=n(c,{base:["w-full"]}),o=r.forwardRef(({type:e="single",children:t,...i},m)=>r.createElement(l,{ref:m,type:e,...i},t));o.Item=d,o.Content=f,o.Trigger=p,o.displayName="Accordion";export{o as Accordion};
+import{Root as n}from"@radix-ui/react-accordion";import f from"clsx";import r from"react";import{AccordionContent as p}from"./AccordionContent.js";import{AccordionItem as a}from"./AccordionItem.js";import{AccordionTrigger as d}from"./AccordionTrigger.js";const o=r.forwardRef(({type:e="single",className:t,children:m,...i},c)=>r.createElement(n,{ref:c,type:e,className:f("w-full",t),...i},m));o.Item=a,o.Content=p,o.Trigger=d,o.displayName="Accordion";export{o as Accordion};
 //# sourceMappingURL=Accordion.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.js","sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-accordion'\nimport ~~React~~ from '~~react~~'\n\nimport { ~~styled }~~ from '~~~/styled~~'\n\nimport { AccordionContent } from './AccordionContent'\nimport { AccordionItem } from './AccordionItem'\nimport { AccordionTrigger } from './AccordionTrigger'\n\~~nconst StyledRoot = styled(Root, {\n base: ['w-full']\n})\n\~~ntype AccordionProps = React.ComponentProps<typeof ~~StyledRoot~~> & {\n type: 'single' \| 'multiple'\n}\n\ntype AccordionType = ReturnType<\n typeof React.forwardRef<HTMLDivElement, AccordionProps>\n> & {\n Item: typeof AccordionItem\n Content: typeof AccordionContent\n Trigger: typeof AccordionTrigger\n}\n\nexport const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(\n ({ type = 'single', children, ...remainingProps }, ref) => (\n // eslint-disable-next-line\n // @ts-ignore TODO: Radix has an TS error that throws a warning if you pass multiple in. Needs to be fixed by the owner\n <~~StyledRoot~~ ref={ref} type={type} {...remainingProps}>\n {children}\n </~~StyledRoot~~>\n )\n) as AccordionType\n\nAccordion.Item = AccordionItem\nAccordion.Content = AccordionContent\nAccordion.Trigger = AccordionTrigger\n\nAccordion.displayName = 'Accordion'\n"],"names":["~~StyledRoot~~","~~styled~~","~~Root~~","~~Accordion~~","~~React~~","~~type~~","~~children~~","~~remainingProps~~","~~ref~~","AccordionItem","AccordionContent","AccordionTrigger"],"mappings":"~~oRASA~~,~~MAAMA,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CAAC,QAAQ,CACjB,CAAC,EAcYC,~~EAAYC,EAAM,WAC7B,CAAC,CAAE,KAAAC,EAAO,SAAU,SAAAC,EAAU,GAAGC,CAAe,EAAGC,~~IAGjDJ~~,EAAA,~~cAACJ~~,EAAA,~~CAAW~~,~~IAAKQ~~,EAAK,~~KAAMH~~,~~EAAO~~,GAAGE,~~CAAAA~~,~~EACnCD~~,CACH,CAEJ,~~EAEAH~~,EAAU,~~KAAOM~~,~~EACjBN~~,EAAU,~~QAAUO~~,~~EACpBP~~,EAAU,~~QAAUQ~~,~~EAEpBR~~,EAAU,YAAc"}
1	+ {"version":3,"file":"Accordion.js","sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-accordion'\nimport clsx from 'clsx'\nimport React from 'react'\n\nimport { AccordionContent } from './AccordionContent'\nimport { AccordionItem } from './AccordionItem'\nimport { AccordionTrigger } from './AccordionTrigger'\n\ntype AccordionProps = React.ComponentProps<typeof Root> & {\n type: 'single' \| 'multiple'\n}\n\ntype AccordionType = ReturnType<\n typeof React.forwardRef<HTMLDivElement, AccordionProps>\n> & {\n Item: typeof AccordionItem\n Content: typeof AccordionContent\n Trigger: typeof AccordionTrigger\n}\n\nexport const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(\n ({ type = 'single', className, children, ...remainingProps }, ref) => (\n // eslint-disable-next-line\n // @ts-ignore TODO: Radix has an TS error that throws a warning if you pass multiple in. Needs to be fixed by the owner\n <Root\n ref={ref}\n type={type}\n className={clsx('w-full', className)}\n {...remainingProps}\n >\n {children}\n </Root>\n )\n) as AccordionType\n\nAccordion.Item = AccordionItem\nAccordion.Content = AccordionContent\nAccordion.Trigger = AccordionTrigger\n\nAccordion.displayName = 'Accordion'\n"],"names":["Accordion","React","type","className","children","remainingProps","ref","Root","clsx","AccordionItem","AccordionContent","AccordionTrigger"],"mappings":"qQAoBaA,EAAYC,EAAM,WAC7B,CAAC,CAAE,KAAAC,EAAO,SAAU,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAe,EAAGC,IAG5DL,EAAA,cAACM,EAAA,CACC,IAAKD,EACL,KAAMJ,EACN,UAAWM,EAAK,SAAUL,CAAS,EAClC,GAAGE,CAEHD,EAAAA,CACH,CAEJ,EAEAJ,EAAU,KAAOS,EACjBT,EAAU,QAAUU,EACpBV,EAAU,QAAUW,EAEpBX,EAAU,YAAc"}

package/dist/components/action-icon/ActionIcon.d.ts CHANGED Viewed

@@ -13,7 +13,6 @@ declare const StyledButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<React
     as?: React.ElementType;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 type ActionIconProps = Override<React.ComponentProps<typeof StyledButton>, {
-    as?: string | React.ReactNode;
     children: React.ReactNode;
     label: string;
 } & Omit<TOptionalTooltipWrapperProps, 'label'> & NavigatorActions>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionIcon.js","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'\nimport { Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled('button', {\n base: [\n 'items-center',\n 'appearance-none',\n 'bg-white',\n 'border-[unset]',\n 'rounded-md',\n 'box-border',\n 'cursor-pointer',\n 'flex',\n 'shrink-0',\n 'justify-center',\n 'px-[unset]',\n 'py-[unset]',\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 '[--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-(--base)',\n 'text-white',\n 'not-disabled:hover:bg-(--interact)',\n 'not-disabled:hover:text-white',\n 'not-disabled:focus:bg-(--interact)',\n 'not-disabled:focus:text-white',\n 'not-disabled:active:bg-(--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-round']\n }\n }\n})\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n ~~as?: string \| React.ReactNode\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"],"names":["StyledButton","styled","ActionIcon","React","children","theme","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","getExternalAnchorProps","child","ActionIconSizeMap"],"mappings":"iXAaA,MAAMA,EAAeC,EAAO,SAAU,CACpC,KAAM,CACJ,eACA,kBACA,WACA,iBACA,aACA,aACA,iBACA,OACA,WACA,iBACA,aACA,aACA,iBACA,eACA,WACA,8BACA,qBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,iCACA,wCACA,sCACF,EACA,QAAS,CACP,oCACA,wCACA,sCACF,EACA,YAAa,CACX,qCACA,yCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,OAAQ,CACN,+BACA,uCACA,qCACF,EACA,MAAO,CACL,8BACA,kCACA,+BACF,CACF,EACA,WAAY,CACV,OAAQ,CACN,iBACA,gBACA,uCACA,uCACA,qCACF,EACA,QAAS,CACP,WACA,SACA,iBACA,gBACA,uCACA,uCACA,qCACF,EACA,MAAO,CACL,cACA,aACA,qCACA,gCACA,qCACA,gCACA,mCACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,CAChB,EACA,UAAW,CACT,KAAM,CAAC,eAAe,CACxB,CACF,CACF,CAAC,~~EAYYC~~,EAAaC,EAAM,WAC9B,CACE,CACE,SAAAC,EACA,MAAAC,EAAQ,UACR,WAAAC,EAAa,SACb,KAAAC,EAAO,KACP,MAAAC,EACA,KAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAA2B,YAAY,OAAAC,EAAK,YAAW,wCAAyC,EAAA,OAAAd,EAAW,aAEjH,OAAAe,EAAUd,EAAM,SAAS,MAAMC,CAAQ,IAAM,EAAGW,CAAwB,EActEZ,EAAA,cAACe,EAAA,CACC,WAAYP,EACZ,MAAOH,EACP,YAAaI,GAEbT,EAAA,cAACH,EAAA,CACE,GAhBmBS,EACrB,CACC,GAAI,IACJ,KAAMC,EAAW,OAAYD,EAC7B,QAAS,OACT,gBAAiB,CAAC,CAACC,CACrB,EACC,CAAE,KAAM,QAAS,EAUf,GAAGS,EAAuBV,CAAI,EAC9B,GAAGI,EACJ,aAAYL,EACZ,MAAOH,EACP,WAAYC,EACZ,KAAMC,EACN,IAAKO,EACL,SAAUJ,CAAAA,EAETP,EAAM,SAAS,IAAIC,EAAWgB,GAAU,CAGvC,GAAI,CAACjB,EAAM,eAAeiB,CAAK,EAC7B,MAAM,IAAI,MAAML,CAAwB,EAG1C,OAAAE,EACEG,EAAM,OAASJ,EACf,oBAAoB,OAAAI,GAAA,KAAAA,OAAAA,EAAO,KAAI,6BAA8B,EAAA,OAAAJ,EAAK,YAAW,6BAA4B,OAAWd,EAAA,WAAA,CACtH,EAEOC,EAAM,aACXiB,EACA,CACE,KAAMC,EAAkBd,CAAc,CACxC,CACF,CACF,CAAC,CACH,CACF,CAEJ,CACF,EAEAL,EAAW,YAAc"}
1	+ {"version":3,"file":"ActionIcon.js","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'\nimport { Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled('button', {\n base: [\n 'items-center',\n 'appearance-none',\n 'bg-white',\n 'border-[unset]',\n 'rounded-md',\n 'box-border',\n 'cursor-pointer',\n 'flex',\n 'shrink-0',\n 'justify-center',\n 'px-[unset]',\n 'py-[unset]',\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 '[--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-(--base)',\n 'text-white',\n 'not-disabled:hover:bg-(--interact)',\n 'not-disabled:hover:text-white',\n 'not-disabled:focus:bg-(--interact)',\n 'not-disabled:focus:text-white',\n 'not-disabled:active:bg-(--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-round']\n }\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"],"names":["StyledButton","styled","ActionIcon","React","children","theme","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","getExternalAnchorProps","child","ActionIconSizeMap"],"mappings":"iXAaA,MAAMA,EAAeC,EAAO,SAAU,CACpC,KAAM,CACJ,eACA,kBACA,WACA,iBACA,aACA,aACA,iBACA,OACA,WACA,iBACA,aACA,aACA,iBACA,eACA,WACA,8BACA,qBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,iCACA,wCACA,sCACF,EACA,QAAS,CACP,oCACA,wCACA,sCACF,EACA,YAAa,CACX,qCACA,yCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,OAAQ,CACN,+BACA,uCACA,qCACF,EACA,MAAO,CACL,8BACA,kCACA,+BACF,CACF,EACA,WAAY,CACV,OAAQ,CACN,iBACA,gBACA,uCACA,uCACA,qCACF,EACA,QAAS,CACP,WACA,SACA,iBACA,gBACA,uCACA,uCACA,qCACF,EACA,MAAO,CACL,cACA,aACA,qCACA,gCACA,qCACA,gCACA,mCACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,CAChB,EACA,UAAW,CACT,KAAM,CAAC,eAAe,CACxB,CACF,CACF,CAAC,EAWYC,EAAaC,EAAM,WAC9B,CACE,CACE,SAAAC,EACA,MAAAC,EAAQ,UACR,WAAAC,EAAa,SACb,KAAAC,EAAO,KACP,MAAAC,EACA,KAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAA2B,YAAY,OAAAC,EAAK,YAAW,wCAAyC,EAAA,OAAAd,EAAW,aAEjH,OAAAe,EAAUd,EAAM,SAAS,MAAMC,CAAQ,IAAM,EAAGW,CAAwB,EActEZ,EAAA,cAACe,EAAA,CACC,WAAYP,EACZ,MAAOH,EACP,YAAaI,GAEbT,EAAA,cAACH,EAAA,CACE,GAhBmBS,EACrB,CACC,GAAI,IACJ,KAAMC,EAAW,OAAYD,EAC7B,QAAS,OACT,gBAAiB,CAAC,CAACC,CACrB,EACC,CAAE,KAAM,QAAS,EAUf,GAAGS,EAAuBV,CAAI,EAC9B,GAAGI,EACJ,aAAYL,EACZ,MAAOH,EACP,WAAYC,EACZ,KAAMC,EACN,IAAKO,EACL,SAAUJ,CAAAA,EAETP,EAAM,SAAS,IAAIC,EAAWgB,GAAU,CAGvC,GAAI,CAACjB,EAAM,eAAeiB,CAAK,EAC7B,MAAM,IAAI,MAAML,CAAwB,EAG1C,OAAAE,EACEG,EAAM,OAASJ,EACf,oBAAoB,OAAAI,GAAA,KAAAA,OAAAA,EAAO,KAAI,6BAA8B,EAAA,OAAAJ,EAAK,YAAW,6BAA4B,OAAWd,EAAA,WAAA,CACtH,EAEOC,EAAM,aACXiB,EACA,CACE,KAAMC,EAAkBd,CAAc,CACxC,CACF,CACF,CAAC,CACH,CACF,CAEJ,CACF,EAEAL,EAAW,YAAc"}

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

@@ -303,7 +303,7 @@ export declare const BannerRegular: {
             unselectable?: "on" | "off" | undefined | undefined;
             inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
             is?: string | undefined | undefined;
-            as?: ((boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null) & React.ElementType) | undefined;
+            as?: React.ElementType | undefined;
             disabled?: boolean | undefined | undefined;
             formAction?: string | undefined | undefined;
             formEncType?: string | undefined | undefined;

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

@@ -8,8 +8,7 @@ declare const StyledDismiss: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit
     isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>, "children" | "label" | "as" | keyof import("../../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
-    as?: string | React.ReactNode;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>, "children" | "label" | keyof import("../../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
     children: React.ReactNode;
     label: string;
 } & Omit<import("../../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {

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

@@ -302,7 +302,7 @@ export declare const BannerSlim: {
             unselectable?: "on" | "off" | undefined | undefined;
             inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
             is?: string | undefined | undefined;
-            as?: ((boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null) & React.ElementType) | undefined;
+            as?: React.ElementType | undefined;
             disabled?: boolean | undefined | undefined;
             formAction?: string | undefined | undefined;
             formEncType?: string | undefined | undefined;

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

@@ -8,8 +8,7 @@ declare const StyledDismiss: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit
     isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>, "children" | "label" | "as" | keyof import("../../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
-    as?: string | React.ReactNode;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>, "children" | "label" | keyof import("../../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
     children: React.ReactNode;
     label: string;
 } & Omit<import("../../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "containerSize"> & {

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

@@ -13,7 +13,6 @@ export declare const StyledButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
     as?: React.ElementType;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 type ButtonProps = Override<React.ComponentProps<typeof StyledButton>, {
-    as?: React.ComponentType | React.ElementType;
     children: React.ReactNode;
     href?: string;
     isLoading?: boolean;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nexport const StyledButton = styled('button', {\n base: [\n 'items-center',\n 'bg-[unset]',\n 'border-[unset]',\n 'rounded-md',\n 'cursor-pointer',\n 'flex',\n 'font-body',\n 'font-semibold',\n 'justify-center',\n 'px-[unset]',\n 'py-[unset]',\n 'no-underline',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'whitespace-nowrap',\n 'w-max',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n secondary: [\n '[--base:var(--color-primary-1000)]',\n '[--interact:var(--color-primary-1100)]',\n '[--active:var(--color-primary-1200)]'\n ],\n success: [\n '[--base:var(--color-success)]',\n '[--interact:var(--color-success-mid)]',\n '[--active:var(--color-success-dark)]'\n ],\n warning: [\n '[--base:var(--color-warning)]',\n '[--interact:var(--color-warning-mid)]',\n '[--active:var(--color-warning-dark)]'\n ],\n danger: [\n '[--base:var(--color-danger)]',\n '[--interact:var(--color-danger-mid)]',\n '[--active:var(--color-danger-dark)]'\n ],\n neutral: [\n '[--base:white]',\n '[--interact:rgba(white,0.1)]',\n '[--active:rgba(white,0.25)]',\n '[--text:var(--color-primary-800)]'\n ]\n },\n appearance: {\n solid: [\n 'bg-(--base)',\n 'text-(--text,white)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:bg-(--interact)',\n 'not-disabled:hover:text-(--text,white)',\n 'not-disabled:focus:bg-(--interact)',\n 'not-disabled:focus:text-(--text,white)',\n 'not-disabled:active:bg-(--active)'\n ],\n outline: [\n 'border',\n\n 'border-current',\n 'text-(--base)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:no-underline',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:no-underline',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ]\n },\n size: {\n sm: ['text-sm leading-[1.53] h-8 px-4 gap-2 [&_svg]:size-4'],\n md: ['text-md leading-normal h-10 px-8 gap-3 [&_svg]:size-5'],\n lg: ['text-lg leading-normal h-12 px-8 gap-3 [&_svg]:size-[22px]'],\n xl: ['text-lg leading-normal h-16 px-8 gap-3 [&_svg]:size-[22px]']\n },\n isLoading: {\n true: ['cursor-not-allowed opacity-60 pointer-events-none']\n },\n fullWidth: {\n true: ['w-full'],\n false: ['w-max']\n }\n },\n\n defaultVariants: {\n appearance: 'solid',\n size: 'md',\n theme: 'primary'\n }\n})\n\nconst LoaderContentsWrapper = styled('span', {\n base: ['items-center', 'flex', 'justify-center', 'invisible'],\n variants: {\n size: {\n sm: ['gap-2'],\n md: ['gap-3'],\n lg: ['gap-3'],\n xl: ['gap-3']\n }\n },\n defaultVariants: {\n size: 'md'\n }\n})\n\nconst WithLoader = ({\n size,\n children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n <>\n <Loader className=\"absolute\" />\n <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n </>\n)\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n ~~as?: React.ComponentType \| React.ElementType\n~~ children: React.ReactNode\n href?: string\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n (\n { children, as, href, isLoading = false, onClick, disabled, ...rest },\n ref\n ) => (\n <StyledButton\n as={as \|\| (href ? 'a' : undefined)}\n {...(!disabled && !isLoading && { href, onClick })}\n isLoading={isLoading}\n type={!href ? 'button' : undefined}\n disabled={disabled}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref as any}\n >\n {isLoading ? (\n <WithLoader size={rest.size}>{children}</WithLoader>\n ) : (\n children\n )}\n </StyledButton>\n )\n)\n\nButton.displayName = 'Button'\n"],"names":["StyledButton","styled","LoaderContentsWrapper","WithLoader","size","children","React","Loader","Button","as","href","isLoading","onClick","disabled","rest","ref","getExternalAnchorProps"],"mappings":"0LAQaA,EAAeC,EAAO,SAAU,CAC3C,KAAM,CACJ,eACA,aACA,iBACA,aACA,iBACA,OACA,YACA,gBACA,iBACA,aACA,aACA,eACA,iBACA,eACA,WACA,oBACA,QACA,8BACA,qBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,oCACA,wCACA,sCACF,EACA,UAAW,CACT,qCACA,yCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,OAAQ,CACN,+BACA,uCACA,qCACF,EACA,QAAS,CACP,iBACA,+BACA,8BACA,mCACF,CACF,EACA,WAAY,CACV,MAAO,CACL,cACA,sBACA,sBACA,8BACA,qCACA,yCACA,qCACA,yCACA,mCACF,EACA,QAAS,CACP,SAEA,iBACA,gBACA,sBACA,8BACA,kCACA,uCACA,kCACA,uCACA,qCACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,sDAAsD,EAC3D,GAAI,CAAC,uDAAuD,EAC5D,GAAI,CAAC,4DAA4D,EACjE,GAAI,CAAC,4DAA4D,CACnE,EACA,UAAW,CACT,KAAM,CAAC,mDAAmD,CAC5D,EACA,UAAW,CACT,KAAM,CAAC,QAAQ,EACf,MAAO,CAAC,OAAO,CACjB,CACF,EAEA,gBAAiB,CACf,WAAY,QACZ,KAAM,KACN,MAAO,SACT,CACF,CAAC,EAEKC,EAAwBD,EAAO,OAAQ,CAC3C,KAAM,CAAC,eAAgB,OAAQ,iBAAkB,WAAW,EAC5D,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,CACd,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EAEKE,EAAa,CAAC,CAClB,KAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,CAAO,UAAU,WAAW,EAC7BD,EAAA,cAACJ,EAAA,CAAsB,KAAME,CAAAA,EAAOC,CAAS,CAC/C,~~EAaWG~~,EAASF,EAAM,WAC1B,CACE,CAAE,SAAAD,EAAU,GAAAI,EAAI,KAAAC,EAAM,UAAAC,EAAY,GAAO,QAAAC,EAAS,SAAAC,EAAU,GAAGC,CAAK,EACpEC,IAEAT,EAAA,cAACN,EACC,CAAA,GAAIS,IAAOC,EAAO,IAAM,QACvB,GAAI,CAACG,GAAY,CAACF,GAAa,CAAE,KAAAD,EAAM,QAAAE,CAAQ,EAChD,UAAWD,EACX,KAAOD,EAAkB,OAAX,SACd,SAAUG,EACT,GAAGC,EACH,GAAGE,EAAuBN,CAAI,EAC/B,IAAKK,CAEJJ,EAAAA,EACCL,EAAA,cAACH,EAAA,CAAW,KAAMW,EAAK,IAAA,EAAOT,CAAS,EAEvCA,CAEJ,CAEJ,EAEAG,EAAO,YAAc"}
1	+ {"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nexport const StyledButton = styled('button', {\n base: [\n 'items-center',\n 'bg-[unset]',\n 'border-[unset]',\n 'rounded-md',\n 'cursor-pointer',\n 'flex',\n 'font-body',\n 'font-semibold',\n 'justify-center',\n 'px-[unset]',\n 'py-[unset]',\n 'no-underline',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'whitespace-nowrap',\n 'w-max',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n secondary: [\n '[--base:var(--color-primary-1000)]',\n '[--interact:var(--color-primary-1100)]',\n '[--active:var(--color-primary-1200)]'\n ],\n success: [\n '[--base:var(--color-success)]',\n '[--interact:var(--color-success-mid)]',\n '[--active:var(--color-success-dark)]'\n ],\n warning: [\n '[--base:var(--color-warning)]',\n '[--interact:var(--color-warning-mid)]',\n '[--active:var(--color-warning-dark)]'\n ],\n danger: [\n '[--base:var(--color-danger)]',\n '[--interact:var(--color-danger-mid)]',\n '[--active:var(--color-danger-dark)]'\n ],\n neutral: [\n '[--base:white]',\n '[--interact:rgba(white,0.1)]',\n '[--active:rgba(white,0.25)]',\n '[--text:var(--color-primary-800)]'\n ]\n },\n appearance: {\n solid: [\n 'bg-(--base)',\n 'text-(--text,white)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:bg-(--interact)',\n 'not-disabled:hover:text-(--text,white)',\n 'not-disabled:focus:bg-(--interact)',\n 'not-disabled:focus:text-(--text,white)',\n 'not-disabled:active:bg-(--active)'\n ],\n outline: [\n 'border',\n\n 'border-current',\n 'text-(--base)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:no-underline',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:no-underline',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ]\n },\n size: {\n sm: ['text-sm leading-[1.53] h-8 px-4 gap-2 [&_svg]:size-4'],\n md: ['text-md leading-normal h-10 px-8 gap-3 [&_svg]:size-5'],\n lg: ['text-lg leading-normal h-12 px-8 gap-3 [&_svg]:size-[22px]'],\n xl: ['text-lg leading-normal h-16 px-8 gap-3 [&_svg]:size-[22px]']\n },\n isLoading: {\n true: ['cursor-not-allowed opacity-60 pointer-events-none']\n },\n fullWidth: {\n true: ['w-full'],\n false: ['w-max']\n }\n },\n\n defaultVariants: {\n appearance: 'solid',\n size: 'md',\n theme: 'primary'\n }\n})\n\nconst LoaderContentsWrapper = styled('span', {\n base: ['items-center', 'flex', 'justify-center', 'invisible'],\n variants: {\n size: {\n sm: ['gap-2'],\n md: ['gap-3'],\n lg: ['gap-3'],\n xl: ['gap-3']\n }\n },\n defaultVariants: {\n size: 'md'\n }\n})\n\nconst WithLoader = ({\n size,\n children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n <>\n <Loader className=\"absolute\" />\n <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n </>\n)\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n (\n { children, as, href, isLoading = false, onClick, disabled, ...rest },\n ref\n ) => (\n <StyledButton\n as={as \|\| (href ? 'a' : undefined)}\n {...(!disabled && !isLoading && { href, onClick })}\n isLoading={isLoading}\n type={!href ? 'button' : undefined}\n disabled={disabled}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref as any}\n >\n {isLoading ? (\n <WithLoader size={rest.size}>{children}</WithLoader>\n ) : (\n children\n )}\n </StyledButton>\n )\n)\n\nButton.displayName = 'Button'\n"],"names":["StyledButton","styled","LoaderContentsWrapper","WithLoader","size","children","React","Loader","Button","as","href","isLoading","onClick","disabled","rest","ref","getExternalAnchorProps"],"mappings":"0LAQaA,EAAeC,EAAO,SAAU,CAC3C,KAAM,CACJ,eACA,aACA,iBACA,aACA,iBACA,OACA,YACA,gBACA,iBACA,aACA,aACA,eACA,iBACA,eACA,WACA,oBACA,QACA,8BACA,qBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,oCACA,wCACA,sCACF,EACA,UAAW,CACT,qCACA,yCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,OAAQ,CACN,+BACA,uCACA,qCACF,EACA,QAAS,CACP,iBACA,+BACA,8BACA,mCACF,CACF,EACA,WAAY,CACV,MAAO,CACL,cACA,sBACA,sBACA,8BACA,qCACA,yCACA,qCACA,yCACA,mCACF,EACA,QAAS,CACP,SAEA,iBACA,gBACA,sBACA,8BACA,kCACA,uCACA,kCACA,uCACA,qCACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,sDAAsD,EAC3D,GAAI,CAAC,uDAAuD,EAC5D,GAAI,CAAC,4DAA4D,EACjE,GAAI,CAAC,4DAA4D,CACnE,EACA,UAAW,CACT,KAAM,CAAC,mDAAmD,CAC5D,EACA,UAAW,CACT,KAAM,CAAC,QAAQ,EACf,MAAO,CAAC,OAAO,CACjB,CACF,EAEA,gBAAiB,CACf,WAAY,QACZ,KAAM,KACN,MAAO,SACT,CACF,CAAC,EAEKC,EAAwBD,EAAO,OAAQ,CAC3C,KAAM,CAAC,eAAgB,OAAQ,iBAAkB,WAAW,EAC5D,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,CACd,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EAEKE,EAAa,CAAC,CAClB,KAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,CAAO,UAAU,WAAW,EAC7BD,EAAA,cAACJ,EAAA,CAAsB,KAAME,CAAAA,EAAOC,CAAS,CAC/C,EAYWG,EAASF,EAAM,WAC1B,CACE,CAAE,SAAAD,EAAU,GAAAI,EAAI,KAAAC,EAAM,UAAAC,EAAY,GAAO,QAAAC,EAAS,SAAAC,EAAU,GAAGC,CAAK,EACpEC,IAEAT,EAAA,cAACN,EACC,CAAA,GAAIS,IAAOC,EAAO,IAAM,QACvB,GAAI,CAACG,GAAY,CAACF,GAAa,CAAE,KAAAD,EAAM,QAAAE,CAAQ,EAChD,UAAWD,EACX,KAAOD,EAAkB,OAAX,SACd,SAAUG,EACT,GAAGC,EACH,GAAGE,EAAuBN,CAAI,EAC/B,IAAKK,CAEJJ,EAAAA,EACCL,EAAA,cAACH,EAAA,CAAW,KAAMW,EAAK,IAAA,EAAOT,CAAS,EAEvCA,CAEJ,CAEJ,EAEAG,EAAO,YAAc"}

package/dist/components/carousel/Carousel.d.ts CHANGED Viewed

@@ -19,12 +19,12 @@ export declare const Carousel: {
     ({ children, className, slideHeight, slideWidth, numSlides, ...props }: CarouselProps & Omit<React.ComponentProps<typeof CarouselProvider>, "naturalSlideWidth" | "naturalSlideHeight" | "totalSlides"> & React.ComponentProps<typeof CSSWrapper>): React.JSX.Element;
     displayName: string;
 } & {
-    ArrowNext: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<import("pure-react-carousel").ButtonNextProps & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonNextProps, any, any>>, never> & {
+    ArrowNext: (props: Omit<React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<import("pure-react-carousel").ButtonNextProps & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonNextProps, any, any>>, never> & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonNextProps, any, any>>>>) => React.JSX.Element;
-    ArrowPrevious: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<import("pure-react-carousel").ButtonBackProps & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonBackProps, any, any>>, never> & {
+    }, "ref"> & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonNextProps, any, any>>>>, "children">) => React.JSX.Element;
+    ArrowPrevious: (props: Omit<React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<import("pure-react-carousel").ButtonBackProps & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonBackProps, any, any>>, never> & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonBackProps, any, any>>>>) => React.JSX.Element;
+    }, "ref"> & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonBackProps, any, any>>>>, "children">) => React.JSX.Element;
     Pagination: React.ForwardRefExoticComponent<Omit<Omit<import("pure-react-carousel").DotGroupProps & React.RefAttributes<React.Component<import("pure-react-carousel").DotGroupProps, any, any>>, never> & {
         as?: React.ElementType;
     }, "ref"> & React.RefAttributes<React.Component<import("pure-react-carousel").DotGroupProps, any, any>>>;

package/dist/components/carousel/CarouselArrows.d.ts CHANGED Viewed

@@ -5,6 +5,6 @@ declare const StyledButtonBack: React.ForwardRefExoticComponent<Omit<Omit<import
 declare const StyledButtonNext: React.ForwardRefExoticComponent<Omit<Omit<import("pure-react-carousel").ButtonNextProps & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonNextProps, any, any>>, never> & {
     as?: React.ElementType;
 }, "ref"> & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonNextProps, any, any>>>;
-export declare const CarouselArrowPrevious: (props: React.ComponentProps<typeof StyledButtonBack>) => React.JSX.Element;
-export declare const CarouselArrowNext: (props: React.ComponentProps<typeof StyledButtonNext>) => React.JSX.Element;
+export declare const CarouselArrowPrevious: (props: Omit<React.ComponentProps<typeof StyledButtonBack>, "children">) => React.JSX.Element;
+export declare const CarouselArrowNext: (props: Omit<React.ComponentProps<typeof StyledButtonNext>, "children">) => React.JSX.Element;
 export {};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselArrows.js","sources":["../../../src/components/carousel/CarouselArrows.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport {\n ButtonBack as BaseButtonBack,\n ButtonNext as BaseButtonNext\n} from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/styled'\n\nconst buttonStyles = [\n 'items-center',\n 'bg-[unset]',\n 'border-[unset]',\n 'text-primary-800',\n 'cursor-pointer',\n 'flex',\n 'justify-center',\n 'px-[unset]',\n 'py-[unset]',\n 'size-12',\n 'top-1/2',\n '-translate-y-1/2',\n 'transition-colors',\n 'duration-150',\n 'ease-in-out',\n 'hover:text-primary-900',\n 'active:text-primary-1000',\n 'disabled:text-grey-200'\n]\n\nconst StyledButtonBack = styled(BaseButtonBack, {\n base: buttonStyles\n})\n\nconst StyledButtonNext = styled(BaseButtonNext, {\n base: buttonStyles\n})\n\nexport const CarouselArrowPrevious = (\n props: React.ComponentProps<typeof StyledButtonBack>\n) => (\n <StyledButtonBack {...props}>\n <Icon is={ChevronLeft} />\n </StyledButtonBack>\n)\nexport const CarouselArrowNext = (\n props: React.ComponentProps<typeof StyledButtonNext>\n) => (\n <StyledButtonNext {...props}>\n <Icon is={ChevronRight} />\n </StyledButtonNext>\n)\n"],"names":["buttonStyles","StyledButtonBack","styled","BaseButtonBack","StyledButtonNext","BaseButtonNext","CarouselArrowPrevious","props","React","Icon","ChevronLeft","CarouselArrowNext","ChevronRight"],"mappings":"8OAUA,MAAMA,EAAe,CACnB,eACA,aACA,iBACA,mBACA,iBACA,OACA,iBACA,aACA,aACA,UACA,UACA,mBACA,oBACA,eACA,cACA,yBACA,2BACA,wBACF,EAEMC,EAAmBC,EAAOC,EAAgB,CAC9C,KAAMH,CACR,CAAC,EAEKI,EAAmBF,EAAOG,EAAgB,CAC9C,KAAML,CACR,CAAC,EAEYM,EACXC,GAEAC,EAAA,cAACP,EAAA,CAAkB,GAAGM,CAAAA,EACpBC,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,EAEWC,EACXJ,GAEAC,EAAA,cAACJ,EAAA,CAAkB,GAAGG,GACpBC,EAAA,cAACC,EAAA,CAAK,GAAIG,EAAc,CAC1B"}
1	+ {"version":3,"file":"CarouselArrows.js","sources":["../../../src/components/carousel/CarouselArrows.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport {\n ButtonBack as BaseButtonBack,\n ButtonNext as BaseButtonNext\n} from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/styled'\n\nconst buttonStyles = [\n 'items-center',\n 'bg-[unset]',\n 'border-[unset]',\n 'text-primary-800',\n 'cursor-pointer',\n 'flex',\n 'justify-center',\n 'px-[unset]',\n 'py-[unset]',\n 'size-12',\n 'top-1/2',\n '-translate-y-1/2',\n 'transition-colors',\n 'duration-150',\n 'ease-in-out',\n 'hover:text-primary-900',\n 'active:text-primary-1000',\n 'disabled:text-grey-200'\n]\n\nconst StyledButtonBack = styled(BaseButtonBack, {\n base: buttonStyles\n})\n\nconst StyledButtonNext = styled(BaseButtonNext, {\n base: buttonStyles\n})\n\nexport const CarouselArrowPrevious = (\n props: Omit<React.ComponentProps<typeof StyledButtonBack>, 'children'>\n) => (\n <StyledButtonBack {...props}>\n <Icon is={ChevronLeft} />\n </StyledButtonBack>\n)\nexport const CarouselArrowNext = (\n props: Omit<React.ComponentProps<typeof StyledButtonNext>, 'children'>\n) => (\n <StyledButtonNext {...props}>\n <Icon is={ChevronRight} />\n </StyledButtonNext>\n)\n"],"names":["buttonStyles","StyledButtonBack","styled","BaseButtonBack","StyledButtonNext","BaseButtonNext","CarouselArrowPrevious","props","React","Icon","ChevronLeft","CarouselArrowNext","ChevronRight"],"mappings":"8OAUA,MAAMA,EAAe,CACnB,eACA,aACA,iBACA,mBACA,iBACA,OACA,iBACA,aACA,aACA,UACA,UACA,mBACA,oBACA,eACA,cACA,yBACA,2BACA,wBACF,EAEMC,EAAmBC,EAAOC,EAAgB,CAC9C,KAAMH,CACR,CAAC,EAEKI,EAAmBF,EAAOG,EAAgB,CAC9C,KAAML,CACR,CAAC,EAEYM,EACXC,GAEAC,EAAA,cAACP,EAAA,CAAkB,GAAGM,CAAAA,EACpBC,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,EAEWC,EACXJ,GAEAC,EAAA,cAACJ,EAAA,CAAkB,GAAGG,GACpBC,EAAA,cAACC,EAAA,CAAK,GAAIG,EAAc,CAC1B"}

package/dist/components/chip/ChipGroup.d.ts CHANGED Viewed

@@ -12,7 +12,5 @@ export declare const ChipGroup: React.ForwardRefExoticComponent<Omit<TChipGroupP
     gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement> & {
-    as?: any;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/chip/ChipGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChipGroup.js","sources":["../../../src/components/chip/ChipGroup.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\n\ntype TChipGroupProps = {\n gap: 1 \| 2 \| 3\n}\n\nexport const ChipGroup = React.forwardRef<\n HTMLDivElement,\n TChipGroupProps & React.ComponentProps<typeof Flex~~> & { as?: any }\~~n>(({ gap = 2, ...rest }, ref) => (\n <Flex direction=\"row\" wrap=\"wrap\" gap={gap} {...rest} ref={ref} />\n))\n"],"names":["ChipGroup","React","gap","rest","ref","Flex"],"mappings":"+DAQO,MAAMA,EAAYC,EAAM,WAG7B,CAAC,CAAE,IAAAC,EAAM,EAAG,GAAGC,CAAK,EAAGC,IACvBH,EAAA,cAACI,EAAA,CAAK,UAAU,MAAM,KAAK,OAAO,IAAKH,EAAM,GAAGC,EAAM,IAAKC,EAAK,CACjE"}
1	+ {"version":3,"file":"ChipGroup.js","sources":["../../../src/components/chip/ChipGroup.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\n\ntype TChipGroupProps = {\n gap: 1 \| 2 \| 3\n}\n\nexport const ChipGroup = React.forwardRef<\n HTMLDivElement,\n TChipGroupProps & React.ComponentProps<typeof Flex>\n>(({ gap = 2, ...rest }, ref) => (\n <Flex direction=\"row\" wrap=\"wrap\" gap={gap} {...rest} ref={ref} />\n))\n"],"names":["ChipGroup","React","gap","rest","ref","Flex"],"mappings":"+DAQO,MAAMA,EAAYC,EAAM,WAG7B,CAAC,CAAE,IAAAC,EAAM,EAAG,GAAGC,CAAK,EAAGC,IACvBH,EAAA,cAACI,EAAA,CAAK,UAAU,MAAM,KAAK,OAAO,IAAKH,EAAM,GAAGC,EAAM,IAAKC,EAAK,CACjE"}

package/dist/components/chip-toggle-group/ChipToggleGroupRoot.d.ts CHANGED Viewed

@@ -11,9 +11,7 @@ export declare const ChipToggleGroupRoot: React.ForwardRefExoticComponent<(Omit<
     gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement> & {
-    as?: any;
-}, "ref"> & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & {
+}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & {
     disableDeselect?: boolean;
 }, "ref">, "ref"> | Omit<Omit<{
     gap: 1 | 2 | 3;
@@ -27,8 +25,6 @@ export declare const ChipToggleGroupRoot: React.ForwardRefExoticComponent<(Omit<
     gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement> & {
-    as?: any;
-}, "ref"> & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & {
+}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & {
     disableDeselect?: boolean;
 }, "ref">, "ref">) & React.RefAttributes<HTMLDivElement>>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxInput.js","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"],"names":["StyledComboboxInput","styled","BaseComboboxInput","ComboboxInput","React","size","rest","ref"],"mappings":"iHAKO,MAAMA,EAAsBC,EAAOC,EAAmB,CAC3D,KAAM,CACJ,WACA,0BACA,+CACA,yCACA,mCACA,cACA,kBACA,SACA,kBACA,aACA,aACA,iBACA,cACA,QACA,YACA,OACA,OACA,QACA,iBACA,eACA,WACA,SACA,0BACA,4BACA,kCACA,4BACA,uBACA,8BACA,wBACF,EAEA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,MAAO,UAAW,eAAe,EACtC,GAAI,CAAC,OAAQ,UAAW,eAAe,EACvC,GAAI,CAAC,OAAQ,UAAW,eAAe,CACzC,EACA,MAAO,CACL,MAAO,CAAC,SAAU,eAAe,CACnC,CACF,CACF,CAAC,EAMYC,EAAgBC,EAAM,WAGjC,CAAC,CAAE,KAAAC,EAAO,KAAM,GAAGC,CAAK,EAAGC,IAC3BH,EAAA,cAACJ,EACC,CAAA,KAAMK,EACL,GAAGC,EACJ,IAAKC,CAAAA,CACP,CACD"}
1	+ {"version":3,"file":"ComboboxInput.js","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"],"names":["StyledComboboxInput","styled","BaseComboboxInput","ComboboxInput","React","size","rest","ref"],"mappings":"iHAKO,MAAMA,EAAsBC,EAAOC,EAAmB,CAC3D,KAAM,CACJ,WACA,0BACA,+CACA,yCACA,mCACA,cACA,kBACA,SACA,kBACA,aACA,aACA,iBACA,cACA,QACA,YACA,OACA,OACA,QACA,iBACA,eACA,WACA,SACA,0BACA,4BACA,kCACA,4BACA,uBACA,8BACA,wBACF,EAEA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,MAAO,UAAW,eAAe,EACtC,GAAI,CAAC,OAAQ,UAAW,eAAe,EACvC,GAAI,CAAC,OAAQ,UAAW,eAAe,CACzC,EACA,MAAO,CACL,MAAO,CAAC,SAAU,eAAe,CACnC,CACF,CACF,CAAC,EAMYC,EAAgBC,EAAM,WAGjC,CAAC,CAAE,KAAAC,EAAO,KAAM,GAAGC,CAAK,EAAGC,IAC3BH,EAAA,cAACJ,EACC,CAAA,KAAMK,EACL,GAAGC,EACJ,IAAKC,CAAAA,CACP,CACD"}

package/dist/components/data-table/DataTable.d.ts CHANGED Viewed

@@ -51,7 +51,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         as?: import("react").ElementType;
     }, "ref"> & import("react").RefAttributes<HTMLTableElement> & {
         numberOfStickyColumns?: number;
-        scrollContainerCss?: string;
+        scrollContainerCls?: string | string[];
         scrollContainerkey?: string;
         maxRowDepth?: number;
     }, "ref"> & import("react").RefAttributes<HTMLTableElement>, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
@@ -79,7 +79,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             stickyHeaderOffset?: number;
             headerCss?: string;
             numberOfStickyColumns?: number;
-            scrollContainerCss?: string;
+            scrollContainerCls?: string | string[];
             showTotalInFirstColumn?: boolean;
             totalSuffix?: string;
         };
@@ -142,7 +142,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * you can build your own implementation with `useDataTable` and other UI components.
      *
      */
-    MetaData: ({ copy, ...rest }: {
+    MetaData: ({ copy, ...rest }: React.ComponentProps<typeof import("..").Text> & {
         copy?: {
             sorted_by?: string;
             ascending?: string;
@@ -282,9 +282,19 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      * Renders a toolbar with actions that can be applied to all selected rows
      */
-    BulkActionsFloating: (({ children, ...rest }: {
-        children: React.ReactNode;
-    }) => import("react").JSX.Element | null) & {
+    BulkActionsFloating: (({ children, ...rest }: React.PropsWithChildren<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, "direction" | "align" | "wrap" | "justify" | "gap"> & {
+        direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+        wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
+        justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
+        align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
+        gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+    } & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>, never> & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>>>) => import("react").JSX.Element | null) & {
         SelectedRowActions: ({ cancelLabel, showDividers, children }: {
             cancelLabel?: string;
             showDividers?: boolean;

package/dist/components/data-table/DataTableBulkActionsFloating.d.ts CHANGED Viewed

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

package/dist/components/data-table/DataTableBulkActionsFloating.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableBulkActionsFloating.js","sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Badge } from '../badge'\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Text } from '../text'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\nimport { useDataTable } from './DataTableContext'\n\nconst StyledContainer = styled(Flex, {\n base: [\n 'pl-3',\n 'pr-1',\n 'py-2',\n 'mb-4',\n 'mt-2',\n 'justify-between',\n 'items-center',\n 'rounded-xl',\n 'bg-primary-800',\n 'pointer-events-auto',\n 'z-2',\n 'w-full',\n 'mx-4',\n 'shadow-lg',\n 'sm:max-w-200',\n 'lg:max-w-250',\n 'lg:mb-8',\n 'lg:pl-4',\n 'lg:pr-1',\n 'lg:py-3',\n 'xl:max-w-350',\n 'xl:mb-8',\n 'xl:pl-6',\n 'xl:pr-2',\n 'xl:py-4'\n ]\n})\n\nexport const DataTableBulkActionsFloating = Object.assign(\n ({ children, ...rest }: ~~{ children:~~ React.~~ReactNode~~ }) => {\n const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n const actionBarRef = React.useRef<HTMLDivElement>(null)\n\n const numberOfSelectedRows = React.useMemo(() => {\n return Object.keys(rowSelection \|\| {}).length\n }, [rowSelection])\n\n const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n if (numberOfSelectedRows === 0) return null\n\n return (\n <section\n ref={actionBarRef}\n className=\"pointer-events-none sticky bottom-0 left-0 flex justify-center\"\n >\n <StyledContainer {...rest}>\n <Flex\n justify=\"flex-start\"\n align=\"center\"\n gap={2}\n className=\"flex-auto\"\n >\n <Badge\n theme=\"success\"\n size=\"xs\"\n emphasis=\"subtle\"\n className=\"h-6 min-w-6\"\n >\n {numberOfSelectedRows}\n </Badge>\n <Text size=\"sm\" weight=\"bold\" className=\"text-white\">\n selected\n </Text>\n </Flex>\n\n <Flex justify=\"flex-end\" align=\"center\" gap={3} className=\"flex-auto\">\n {children}\n\n <ActionIcon\n appearance=\"simple\"\n theme=\"white\"\n size=\"md\"\n onClick={handleDeselectAllPageRows}\n label=\"close\"\n >\n <Icon is={Close} />\n </ActionIcon>\n </Flex>\n </StyledContainer>\n </section>\n )\n },\n {\n SelectedRowActions: BulkActionsSelectedRowActions\n }\n)\n"],"names":["StyledContainer","styled","Flex","DataTableBulkActionsFloating","children","rest","rowSelection","toggleAllPageRowsSelected","useDataTable","actionBarRef","React","numberOfSelectedRows","handleDeselectAllPageRows","Badge","Text","ActionIcon","Icon","Close","BulkActionsSelectedRowActions"],"mappings":"wdAaA,MAAMA,EAAkBC,EAAOC,EAAM,CACnC,KAAM,CACJ,OACA,OACA,OACA,OACA,OACA,kBACA,eACA,aACA,iBACA,sBACA,MACA,SACA,OACA,YACA,eACA,eACA,UACA,UACA,UACA,UACA,eACA,UACA,UACA,UACA,SACF,CACF,CAAC,EAEYC,EAA+B,OAAO,OACjD,CAAC,~~CAAE~~,SAAAC,~~EAAU~~,GAAGC,~~CAAK~~,~~IAAqC~~,~~CACxD~~,KAAM,CAAE,aAAAC,EAAc,0BAAAC,CAA0B,EAAIC,EAAa,EAE3DC,EAAeC,EAAM,OAAuB,IAAI,EAEhDC,EAAuBD,EAAM,QAAQ,IAClC,OAAO,KAAKJ,GAAgB,CAAE,CAAA,EAAE,OACtC,CAACA,CAAY,CAAC,EAEXM,EAA4B,IAAML,EAA0B,EAAK,EAEvE,OAAII,IAAyB,EAAU,KAGrCD,EAAA,cAAC,UAAA,CACC,IAAKD,EACL,UAAU,gEAEVC,EAAAA,EAAA,cAACV,EAAA,CAAiB,GAAGK,GACnBK,EAAA,cAACR,EAAA,CACC,QAAQ,aACR,MAAM,SACN,IAAK,EACL,UAAU,WAEVQ,EAAAA,EAAA,cAACG,EAAA,CACC,MAAM,UACN,KAAK,KACL,SAAS,SACT,UAAU,aAETF,EAAAA,CACH,EACAD,EAAA,cAACI,EAAA,CAAK,KAAK,KAAK,OAAO,OAAO,UAAU,YAAa,EAAA,UAErD,CACF,EAEAJ,EAAA,cAACR,EAAA,CAAK,QAAQ,WAAW,MAAM,SAAS,IAAK,EAAG,UAAU,WAAA,EACvDE,EAEDM,EAAA,cAACK,EAAA,CACC,WAAW,SACX,MAAM,QACN,KAAK,KACL,QAASH,EACT,MAAM,OAENF,EAAAA,EAAA,cAACM,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CACF,CACF,CACF,CAEJ,EACA,CACE,mBAAoBC,CACtB,CACF"}
1	+ {"version":3,"file":"DataTableBulkActionsFloating.js","sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Badge } from '../badge'\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Text } from '../text'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\nimport { useDataTable } from './DataTableContext'\n\nconst StyledContainer = styled(Flex, {\n base: [\n 'pl-3',\n 'pr-1',\n 'py-2',\n 'mb-4',\n 'mt-2',\n 'justify-between',\n 'items-center',\n 'rounded-xl',\n 'bg-primary-800',\n 'pointer-events-auto',\n 'z-2',\n 'w-full',\n 'mx-4',\n 'shadow-lg',\n 'sm:max-w-200',\n 'lg:max-w-250',\n 'lg:mb-8',\n 'lg:pl-4',\n 'lg:pr-1',\n 'lg:py-3',\n 'xl:max-w-350',\n 'xl:mb-8',\n 'xl:pl-6',\n 'xl:pr-2',\n 'xl:py-4'\n ]\n})\n\nexport const DataTableBulkActionsFloating = Object.assign(\n ({\n children,\n ...rest\n }: React.PropsWithChildren<React.ComponentProps<typeof StyledContainer>>) => {\n const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n const actionBarRef = React.useRef<HTMLDivElement>(null)\n\n const numberOfSelectedRows = React.useMemo(() => {\n return Object.keys(rowSelection \|\| {}).length\n }, [rowSelection])\n\n const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n if (numberOfSelectedRows === 0) return null\n\n return (\n <section\n ref={actionBarRef}\n className=\"pointer-events-none sticky bottom-0 left-0 flex justify-center\"\n >\n <StyledContainer {...rest}>\n <Flex\n justify=\"flex-start\"\n align=\"center\"\n gap={2}\n className=\"flex-auto\"\n >\n <Badge\n theme=\"success\"\n size=\"xs\"\n emphasis=\"subtle\"\n className=\"h-6 min-w-6\"\n >\n {numberOfSelectedRows}\n </Badge>\n <Text size=\"sm\" weight=\"bold\" className=\"text-white\">\n selected\n </Text>\n </Flex>\n\n <Flex justify=\"flex-end\" align=\"center\" gap={3} className=\"flex-auto\">\n {children}\n\n <ActionIcon\n appearance=\"simple\"\n theme=\"white\"\n size=\"md\"\n onClick={handleDeselectAllPageRows}\n label=\"close\"\n >\n <Icon is={Close} />\n </ActionIcon>\n </Flex>\n </StyledContainer>\n </section>\n )\n },\n {\n SelectedRowActions: BulkActionsSelectedRowActions\n }\n)\n"],"names":["StyledContainer","styled","Flex","DataTableBulkActionsFloating","children","rest","rowSelection","toggleAllPageRowsSelected","useDataTable","actionBarRef","React","numberOfSelectedRows","handleDeselectAllPageRows","Badge","Text","ActionIcon","Icon","Close","BulkActionsSelectedRowActions"],"mappings":"wdAaA,MAAMA,EAAkBC,EAAOC,EAAM,CACnC,KAAM,CACJ,OACA,OACA,OACA,OACA,OACA,kBACA,eACA,aACA,iBACA,sBACA,MACA,SACA,OACA,YACA,eACA,eACA,UACA,UACA,UACA,UACA,eACA,UACA,UACA,UACA,SACF,CACF,CAAC,EAEYC,EAA+B,OAAO,OACjD,CAAC,CACC,SAAAC,EACA,GAAGC,CACL,IAA6E,CAC3E,KAAM,CAAE,aAAAC,EAAc,0BAAAC,CAA0B,EAAIC,EAAa,EAE3DC,EAAeC,EAAM,OAAuB,IAAI,EAEhDC,EAAuBD,EAAM,QAAQ,IAClC,OAAO,KAAKJ,GAAgB,CAAE,CAAA,EAAE,OACtC,CAACA,CAAY,CAAC,EAEXM,EAA4B,IAAML,EAA0B,EAAK,EAEvE,OAAII,IAAyB,EAAU,KAGrCD,EAAA,cAAC,UAAA,CACC,IAAKD,EACL,UAAU,gEAEVC,EAAAA,EAAA,cAACV,EAAA,CAAiB,GAAGK,GACnBK,EAAA,cAACR,EAAA,CACC,QAAQ,aACR,MAAM,SACN,IAAK,EACL,UAAU,WAEVQ,EAAAA,EAAA,cAACG,EAAA,CACC,MAAM,UACN,KAAK,KACL,SAAS,SACT,UAAU,aAETF,EAAAA,CACH,EACAD,EAAA,cAACI,EAAA,CAAK,KAAK,KAAK,OAAO,OAAO,UAAU,YAAa,EAAA,UAErD,CACF,EAEAJ,EAAA,cAACR,EAAA,CAAK,QAAQ,WAAW,MAAM,SAAS,IAAK,EAAG,UAAU,WAAA,EACvDE,EAEDM,EAAA,cAACK,EAAA,CACC,WAAW,SACX,MAAM,QACN,KAAK,KACL,QAASH,EACT,MAAM,OAENF,EAAAA,EAAA,cAACM,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CACF,CACF,CACF,CAEJ,EACA,CACE,mBAAoBC,CACtB,CACF"}

package/dist/components/data-table/DataTableMetaData.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export declare const DataTableMetaData: ({ copy, ...rest }: {
+import { Text } from '../text';
+export declare const DataTableMetaData: ({ copy, ...rest }: React.ComponentProps<typeof Text> & {
     copy?: {
         sorted_by?: string;
         ascending?: string;

package/dist/components/data-table/DataTableMetaData.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableMetaData.js","sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text'\nimport { useDataTable } from './index'\n\nconst defaultCopy = {\n sorted_by: 'Sorted by',\n ascending: 'ascending',\n descending: 'descending',\n separator: '-'\n}\n\nexport const DataTableMetaData = ({\n copy,\n ...rest\n}: {\n copy?: {\n sorted_by?: string\n ascending?: string\n descending?: string\n separator?: string\n }\n sortLabel?: string\n}) => {\n const { getState, columns, getRowModel, rowSelection } = useDataTable()\n const { sorting } = getState()\n const isSorted = sorting.length > 0\n\n const totalRows = getRowModel()?.rows?.length\n\n const selectedRows = Object.keys(rowSelection \|\| {}).length\n\n const copyMerged = { ...defaultCopy, ...copy }\n\n const getColumnDisplayName = (id: string) => {\n const sortedColumn = columns.find((col) => col.id === id)\n return sortedColumn?.header \|\| id\n }\n\n const getSortingString = (sorting) => {\n return `${copyMerged.separator} ${\n copyMerged.sorted_by\n } ${getColumnDisplayName(sorting[0].id)} ${\n sorting[0].desc ? copyMerged.descending : copyMerged.ascending\n }`\n }\n\n return (\n <Text weight=\"bold\" {...rest}>{`${selectedRows \|\| totalRows} ${\n (selectedRows \|\| totalRows) === 1 ? 'item' : 'items'\n } ${selectedRows ? 'selected' : ''} ${\n isSorted ? getSortingString(sorting) : ''\n }`}</Text>\n )\n}\n"],"names":["defaultCopy","DataTableMetaData","copy","rest","_a","_b","getState","columns","getRowModel","rowSelection","useDataTable","sorting","isSorted","totalRows","selectedRows","copyMerged","getColumnDisplayName","id","sortedColumn","col","getSortingString","React","Text"],"mappings":"2IAKA,MAAMA,EAAc,CAClB,UAAW,YACX,UAAW,YACX,WAAY,aACZ,UAAW,GACb,EAEaC,EAAoB,CAAC,CAChC,KAAAC,EACA,GAAGC,CACL,IAQM,CAvBN,IAAAC,EAAAC,EAwBE,KAAM,CAAE,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,aAAAC,CAAa,EAAIC,EACnD,EAAA,CAAE,QAAAC,CAAQ,EAAIL,IACdM,EAAWD,EAAQ,OAAS,EAE5BE,GAAYR,GAAAD,EAAAI,MAAA,KAAAJ,OAAAA,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjCS,EAAe,OAAO,KAAKL,GAAgB,CAAA,CAAE,EAAE,OAE/CM,EAAa,CAAE,GAAGf,EAAa,GAAGE,CAAK,EAEvCc,EAAwBC,GAAe,CAC3C,MAAMC,EAAeX,EAAQ,KAAMY,GAAQA,EAAI,KAAOF,CAAE,EACxD,OAAOC,GAAA,KAAA,OAAAA,EAAc,SAAUD,CACjC,EAEMG,EAAoBT,GACjB,GAAG,OAAAI,EAAW,UAAS,KAC5B,OAAAA,EAAW,UACb,GAAA,EAAI,OAAAC,EAAqBL,EAAQ,CAAC,EAAE,EAAE,EAAC,GACrC,EAAA,OAAAA,EAAQ,CAAC,EAAE,KAAOI,EAAW,WAAaA,EAAW,WAIzD,OACEM,EAAA,cAACC,EAAA,CAAK,OAAO,OAAQ,GAAGnB,CAAO,EAAA,GAAG,OAAAW,GAAgBD,EAAS,GACxD,EAAA,QAAAC,GAAgBD,KAAe,EAAI,OAAS,QAC/C,KAAI,OAAAC,EAAe,WAAa,GAAE,KAChC,OAAAF,EAAWQ,EAAiBT,CAAO,EAAI,GACtC,CAEP"}
1	+ {"version":3,"file":"DataTableMetaData.js","sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text'\nimport { useDataTable } from './index'\n\nconst defaultCopy = {\n sorted_by: 'Sorted by',\n ascending: 'ascending',\n descending: 'descending',\n separator: '-'\n}\n\nexport const DataTableMetaData = ({\n copy,\n ...rest\n}: React.ComponentProps<typeof Text> & {\n copy?: {\n sorted_by?: string\n ascending?: string\n descending?: string\n separator?: string\n }\n sortLabel?: string\n}) => {\n const { getState, columns, getRowModel, rowSelection } = useDataTable()\n const { sorting } = getState()\n const isSorted = sorting.length > 0\n\n const totalRows = getRowModel()?.rows?.length\n\n const selectedRows = Object.keys(rowSelection \|\| {}).length\n\n const copyMerged = { ...defaultCopy, ...copy }\n\n const getColumnDisplayName = (id: string) => {\n const sortedColumn = columns.find((col) => col.id === id)\n return sortedColumn?.header \|\| id\n }\n\n const getSortingString = (sorting) => {\n return `${copyMerged.separator} ${\n copyMerged.sorted_by\n } ${getColumnDisplayName(sorting[0].id)} ${\n sorting[0].desc ? copyMerged.descending : copyMerged.ascending\n }`\n }\n\n return (\n <Text weight=\"bold\" {...rest}>{`${selectedRows \|\| totalRows} ${\n (selectedRows \|\| totalRows) === 1 ? 'item' : 'items'\n } ${selectedRows ? 'selected' : ''} ${\n isSorted ? getSortingString(sorting) : ''\n }`}</Text>\n )\n}\n"],"names":["defaultCopy","DataTableMetaData","copy","rest","_a","_b","getState","columns","getRowModel","rowSelection","useDataTable","sorting","isSorted","totalRows","selectedRows","copyMerged","getColumnDisplayName","id","sortedColumn","col","getSortingString","React","Text"],"mappings":"2IAKA,MAAMA,EAAc,CAClB,UAAW,YACX,UAAW,YACX,WAAY,aACZ,UAAW,GACb,EAEaC,EAAoB,CAAC,CAChC,KAAAC,EACA,GAAGC,CACL,IAQM,CAvBN,IAAAC,EAAAC,EAwBE,KAAM,CAAE,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,aAAAC,CAAa,EAAIC,EACnD,EAAA,CAAE,QAAAC,CAAQ,EAAIL,IACdM,EAAWD,EAAQ,OAAS,EAE5BE,GAAYR,GAAAD,EAAAI,MAAA,KAAAJ,OAAAA,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjCS,EAAe,OAAO,KAAKL,GAAgB,CAAA,CAAE,EAAE,OAE/CM,EAAa,CAAE,GAAGf,EAAa,GAAGE,CAAK,EAEvCc,EAAwBC,GAAe,CAC3C,MAAMC,EAAeX,EAAQ,KAAMY,GAAQA,EAAI,KAAOF,CAAE,EACxD,OAAOC,GAAA,KAAA,OAAAA,EAAc,SAAUD,CACjC,EAEMG,EAAoBT,GACjB,GAAG,OAAAI,EAAW,UAAS,KAC5B,OAAAA,EAAW,UACb,GAAA,EAAI,OAAAC,EAAqBL,EAAQ,CAAC,EAAE,EAAE,EAAC,GACrC,EAAA,OAAAA,EAAQ,CAAC,EAAE,KAAOI,EAAW,WAAaA,EAAW,WAIzD,OACEM,EAAA,cAACC,EAAA,CAAK,OAAO,OAAQ,GAAGnB,CAAO,EAAA,GAAG,OAAAW,GAAgBD,EAAS,GACxD,EAAA,QAAAC,GAAgBD,KAAe,EAAI,OAAS,QAC/C,KAAI,OAAAC,EAAe,WAAa,GAAE,KAChC,OAAAF,EAAWQ,EAAiBT,CAAO,EAAI,GACtC,CAEP"}

package/dist/components/data-table/DataTableTable.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'chil
         stickyHeaderOffset?: number;
         headerCss?: string;
         numberOfStickyColumns?: number;
-        scrollContainerCss?: string;
+        scrollContainerCls?: string | string[];
         showTotalInFirstColumn?: boolean;
         totalSuffix?: string;
     };

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

@@ -1,2 +1,2 @@
-import A from"clsx";import*as t from"react";import{styled as B}from"../../styled.js";import{Table as L}from"../table/Table.js";import{DataTable as w}from"./DataTable.js";import{AsyncDataState as P}from"./DataTable.types.js";import{useDataTable as _}from"./DataTableContext.js";import{DataTableLoading as M}from"./DataTableLoading.js";const j=B("div",{base:["p-2","bg-white","rounded-xl"]}),q=({sortable:C,striped:g,theme:S="white",className:k,scrollOptions:e={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1,showTotalInFirstColumn:!0,totalSuffix:"items"},rowAction:E,withContainer:O=!1,...v})=>{const{asyncDataState:x,getTotalRows:I,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:T,setTablePosition:l}=_(),r=t.useRef(null),H=t.useRef(!1),a=t.useRef(!1),n=t.useMemo(()=>typeof window>"u"?null:window,[]);t.useEffect(()=>{if(!n||typeof IntersectionObserver>"u")return;const o=()=>{if(r.current){const s=r.current.getBoundingClientRect().top,i=r.current.getBoundingClientRect().bottom;l(u=>({...u,top:s,bottom:i}))}a.current=!1},c=()=>{a.current||(requestAnimationFrame(o),a.current=!0)};if(!r.current)return;const b=(e==null?void 0:e.stickyHeaderOffset)||0,F={rootMargin:"-".concat(b,"px 0px -").concat(b,"px 0px"),threshold:0},N=s=>{if(!s||s.length===0)return;const i=s[0];H.current=i.isIntersecting,n&&(i.isIntersecting?n==null||n.addEventListener("scroll",c):n==null||n.removeEventListener("scroll",c)),l(u=>({...u,isVisible:i.isIntersecting}))},h=new IntersectionObserver(N,F);return r.current&&(e.hasStickyHeader||Object.keys(f||{}).length>0)&&h.observe(r.current),()=>{h.disconnect(),n&&(n==null||n.removeEventListener("scroll",c))}},[f,e.hasStickyHeader,e==null?void 0:e.stickyHeaderOffset,n,l]);const p=x===P.PENDING,R=!p&&I()===0,D=()=>{let o=0;return m()&&d?o=2:(m()||d)&&(o=1),"".concat(T,"_").concat(o,"_control_columns")};if(R)return null;const y=t.createElement(L,{corners:"round",size:"lg",...v,ref:r,numberOfStickyColumns:e.numberOfStickyColumns,scrollContainerCss:e.scrollContainerCss,scrollContainerkey:D(),className:A(k,p&&["opacity-50","pointer-events-none","transition-opacity","duration-250","linear","delay-150"])},t.createElement(w.Head,{theme:S,sortable:C,isSticky:e.hasStickyHeader,stickyOffset:e.stickyHeaderOffset,className:e.headerCss,showTotalInFirstColumn:e.showTotalInFirstColumn,totalSuffix:e.totalSuffix}),t.createElement(w.Body,{striped:g,rowAction:E}));return t.createElement(t.Fragment,null,t.createElement(M,null),O?t.createElement(j,null,y):y)};export{q as DataTableTable};
+import A from"clsx";import*as t from"react";import{styled as B}from"../../styled.js";import{Table as L}from"../table/Table.js";import{DataTable as w}from"./DataTable.js";import{AsyncDataState as P}from"./DataTable.types.js";import{useDataTable as _}from"./DataTableContext.js";import{DataTableLoading as M}from"./DataTableLoading.js";const j=B("div",{base:["p-2","bg-white","rounded-xl"]}),q=({sortable:C,striped:g,theme:S="white",className:k,scrollOptions:e={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1,showTotalInFirstColumn:!0,totalSuffix:"items"},rowAction:E,withContainer:O=!1,...v})=>{const{asyncDataState:x,getTotalRows:I,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:T,setTablePosition:l}=_(),r=t.useRef(null),H=t.useRef(!1),a=t.useRef(!1),n=t.useMemo(()=>typeof window>"u"?null:window,[]);t.useEffect(()=>{if(!n||typeof IntersectionObserver>"u")return;const o=()=>{if(r.current){const s=r.current.getBoundingClientRect().top,i=r.current.getBoundingClientRect().bottom;l(u=>({...u,top:s,bottom:i}))}a.current=!1},c=()=>{a.current||(requestAnimationFrame(o),a.current=!0)};if(!r.current)return;const b=(e==null?void 0:e.stickyHeaderOffset)||0,F={rootMargin:"-".concat(b,"px 0px -").concat(b,"px 0px"),threshold:0},N=s=>{if(!s||s.length===0)return;const i=s[0];H.current=i.isIntersecting,n&&(i.isIntersecting?n==null||n.addEventListener("scroll",c):n==null||n.removeEventListener("scroll",c)),l(u=>({...u,isVisible:i.isIntersecting}))},h=new IntersectionObserver(N,F);return r.current&&(e.hasStickyHeader||Object.keys(f||{}).length>0)&&h.observe(r.current),()=>{h.disconnect(),n&&(n==null||n.removeEventListener("scroll",c))}},[f,e.hasStickyHeader,e==null?void 0:e.stickyHeaderOffset,n,l]);const p=x===P.PENDING,R=!p&&I()===0,D=()=>{let o=0;return m()&&d?o=2:(m()||d)&&(o=1),"".concat(T,"_").concat(o,"_control_columns")};if(R)return null;const y=t.createElement(L,{corners:"round",size:"lg",...v,ref:r,numberOfStickyColumns:e.numberOfStickyColumns,scrollContainerCls:e.scrollContainerCls,scrollContainerkey:D(),className:A(k,p&&["opacity-50","pointer-events-none","transition-opacity","duration-250","linear","delay-150"])},t.createElement(w.Head,{theme:S,sortable:C,isSticky:e.hasStickyHeader,stickyOffset:e.stickyHeaderOffset,className:e.headerCss,showTotalInFirstColumn:e.showTotalInFirstColumn,totalSuffix:e.totalSuffix}),t.createElement(w.Body,{striped:g,rowAction:E}));return t.createElement(t.Fragment,null,t.createElement(M,null),O?t.createElement(j,null,y):y)};export{q as DataTableTable};
 //# sourceMappingURL=DataTableTable.js.map

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

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

package/dist/components/empty-state/EmptyState.d.ts CHANGED Viewed

@@ -19,19 +19,19 @@ export declare const EmptyState: {
     ({ size, ...rest }: EmptyStateProps): React.JSX.Element;
     displayName: string;
 } & {
-    Image: (props: Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    Image: (props: Omit<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
         ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
     }, "fluid"> & {
         fluid?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     } & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "as"> & {
+    }, "ref"> & React.RefAttributes<HTMLImageElement>, "as"> & {
         as?: never;
-    }, "size"> & {
+    }, "ref"> & React.RefAttributes<HTMLImageElement>, "size"> & {
         size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
     } & {
         as?: React.ElementType;
-    } & React.RefAttributes<never>) => React.JSX.Element;
+    }, "ref"> & React.RefAttributes<HTMLImageElement>) => React.JSX.Element;
     Title: (props: Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
         ref?: ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | null | undefined;
     }, "size"> & {

package/dist/components/empty-state/EmptyStateImage.d.ts CHANGED Viewed

@@ -1,17 +1,17 @@
 import React from 'react';
-declare const StyledEmptyStateImage: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+declare const StyledEmptyStateImage: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
     ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
 }, "fluid"> & {
     fluid?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "as"> & {
+}, "ref"> & React.RefAttributes<HTMLImageElement>, "as"> & {
     as?: never;
-}, "size"> & {
+}, "ref"> & React.RefAttributes<HTMLImageElement>, "size"> & {
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
 } & {
     as?: React.ElementType;
-} & React.RefAttributes<never>>;
+}, "ref"> & React.RefAttributes<HTMLImageElement>>;
 type EmptyStateImageProps = React.ComponentProps<typeof StyledEmptyStateImage>;
 export declare const EmptyStateImage: (props: EmptyStateImageProps) => React.JSX.Element;
 export {};

package/dist/components/form/Form.d.ts CHANGED Viewed

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import type { DefaultValues, FieldValues, Mode, SubmitErrorHandler, SubmitHandler, UseFormMethods } from 'react-hook-form';
 import { type FormCustomContextType } from './useFormCustomContext';
-type StyledFormProps = Omit<React.HTMLAttributes<HTMLFormElement>, 'onSubmit' | 'onError'>;
-interface FormProps<TFormData extends FieldValues> extends StyledFormProps {
+type FormProps<TFormData extends FieldValues> = Omit<React.HTMLAttributes<HTMLFormElement>, 'onSubmit' | 'onError'> & {
     defaultValues?: DefaultValues<TFormData>;
     validationMode?: Mode;
     onSubmit: SubmitHandler<TFormData>;
     onError?: SubmitErrorHandler<TFormData>;
     children: React.ReactNode | ((methods: UseFormMethods<TFormData>) => React.ReactNode);
-}
+};
 export declare const Form: {
     <TFormData extends FieldValues>(props: FormProps<TFormData> & FormCustomContextType): React.JSX.Element;
     displayName: string;