@atom-learning/components 8.0.3 → 8.1.1

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

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

package/dist/components/toggle-group/ToggleGroupButton.d.ts

@@ -1,16 +1,16 @@
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as React from 'react';
-export declare const StyledButton: React.ForwardRefExoticComponent<Omit<ToggleGroup.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "size" | "theme" | "isIconOnly"> & {
-    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
-    isIconOnly?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-    theme?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
+export declare const StyledButton: React.ForwardRefExoticComponent<Omit<ToggleGroup.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "isIconOnly" | "size" | "theme"> & {
+    size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
+    isIconOnly?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    theme?: ("modern" | "standard" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "modern" | "standard">>) | undefined;
 } & {
     as?: React.ElementType;
 }>;
-export declare const ToggleGroupButton: React.ForwardRefExoticComponent<Omit<Omit<ToggleGroup.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "size" | "theme" | "isIconOnly"> & {
-    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
-    isIconOnly?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-    theme?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
+export declare const ToggleGroupButton: React.ForwardRefExoticComponent<Omit<Omit<ToggleGroup.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "isIconOnly" | "size" | "theme"> & {
+    size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
+    isIconOnly?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    theme?: ("modern" | "standard" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "modern" | "standard">>) | undefined;
 } & {
     as?: React.ElementType;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/toggle-group/ToggleGroupButton.js

@@ -103,6 +103,6 @@ var ToggleGroupButton = React$1.forwardRef(({ size = "md", theme = "standard", c
 	});
 });
 //#endregion
-export { ToggleGroupButton };
+export { StyledButton, ToggleGroupButton };
 
 //# sourceMappingURL=ToggleGroupButton.js.map

package/dist/components/toggle-group/ToggleGroupButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupButton.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { modernVariant, standardVariant } from './ToggleGroupItem'\n\nexport const StyledButton = styled(\n  ToggleGroup.Item,\n  {\n    base: [\n      'cursor-pointer',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'grow',\n      'flex',\n      'items-center',\n      'justify-center',\n      'font-semibold',\n      'leading-none',\n      'py-1'\n    ],\n    variants: {\n      size: {\n        sm: ['*:not-last:mr-2', 'min-h-8', 'px-4', 'text-sm'],\n        md: ['*:not-last:mr-3', 'min-h-10', 'px-8', 'text-md'],\n        lg: ['*:not-last:mr-3', 'min-h-12', 'px-8', 'text-lg']\n      },\n      isIconOnly: {\n        true: []\n      },\n      theme: {\n        standard: standardVariant,\n        modern: modernVariant\n      }\n    },\n    compoundVariants: [\n      {\n        isIconOnly: true,\n        size: 'sm',\n        class: ['min-w-8', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'sm',\n        theme: 'modern',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        theme: 'modern',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        theme: 'modern',\n        class: ['min-w-15', 'p-0']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport const ToggleGroupButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledButton>\n>(({ size = 'md', theme = 'standard', children, ...rest }, ref) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  const isIconOnly =\n    isSingleChild &&\n    React.isValidElement(childrenArray[0]) &&\n    childrenArray[0]?.type === Icon\n\n  return (\n    <StyledButton\n      ref={ref}\n      size={size}\n      isIconOnly={isIconOnly}\n      theme={theme}\n      {...rest}\n    >\n      {\n        childrenArray.map((child) => {\n          if (\n            !isSingleChild &&\n            (typeof child === 'string' || typeof child === 'number')\n          )\n            return <span key={child}>{child}</span>\n          if (\n            React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(\n              child\n            )\n          ) {\n            if (child?.type === Icon)\n              return React.cloneElement(child, { ...child.props, size })\n          }\n          return child\n        }) as React.ReactElement<unknown>[]\n      }\n    </StyledButton>\n  )\n})\n"],"mappings":";;;;;;;AAQA,IAAa,eAAe,OAC1B,YAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAmB;IAAW;IAAQ;IAAU;GACrD,IAAI;IAAC;IAAmB;IAAY;IAAQ;IAAU;GACtD,IAAI;IAAC;IAAmB;IAAY;IAAQ;IAAU;GACvD;EACD,YAAY,EACV,MAAM,EAAE,EACT;EACD,OAAO;GACL,UAAU;GACV,QAAQ;GACT;EACF;CACD,kBAAkB;EAChB;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,WAAW,MAAM;GAC1B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,MAAM;GAC3B;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,oBAAoB,QAAM,YAGpC,EAAE,OAAO,MAAM,QAAQ,YAAY,UAAU,GAAG,QAAQ,QAAQ;CACjE,MAAM,gBAAgB,QAAM,SAAS,QAAQ,SAAS;CACtD,MAAM,gBAAgB,cAAc,UAAU;AAM9C,QACE,oBAAC,cAAD;EACO;EACC;EACM,YARd,iBACA,QAAM,eAAe,cAAc,GAAG,IACtC,cAAc,IAAI,SAAS;EAOlB;EACP,GAAI;YAGF,cAAc,KAAK,UAAU;AAC3B,OACE,CAAC,kBACA,OAAO,UAAU,YAAY,OAAO,UAAU,UAE/C,QAAO,oBAAC,QAAD,EAAA,UAAmB,OAAa,EAArB,MAAqB;AACzC,OACE,QAAM,eACJ,MACD;QAEG,OAAO,SAAS,KAClB,QAAO,QAAM,aAAa,OAAO;KAAE,GAAG,MAAM;KAAO;KAAM,CAAC;;AAE9D,UAAO;IACP;EAES,CAAA;EAEjB"}
+{"version":3,"file":"ToggleGroupButton.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { modernVariant, standardVariant } from './ToggleGroupItem'\n\nexport const StyledButton = styled(\n  ToggleGroup.Item,\n  {\n    base: [\n      'cursor-pointer',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'grow',\n      'flex',\n      'items-center',\n      'justify-center',\n      'font-semibold',\n      'leading-none',\n      'py-1'\n    ],\n    variants: {\n      size: {\n        sm: ['*:not-last:mr-2', 'min-h-8', 'px-4', 'text-sm'],\n        md: ['*:not-last:mr-3', 'min-h-10', 'px-8', 'text-md'],\n        lg: ['*:not-last:mr-3', 'min-h-12', 'px-8', 'text-lg']\n      },\n      isIconOnly: {\n        true: []\n      },\n      theme: {\n        standard: standardVariant,\n        modern: modernVariant\n      }\n    },\n    compoundVariants: [\n      {\n        isIconOnly: true,\n        size: 'sm',\n        class: ['min-w-8', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'sm',\n        theme: 'modern',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        theme: 'modern',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        theme: 'modern',\n        class: ['min-w-15', 'p-0']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport const ToggleGroupButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledButton>\n>(({ size = 'md', theme = 'standard', children, ...rest }, ref) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  const isIconOnly =\n    isSingleChild &&\n    React.isValidElement(childrenArray[0]) &&\n    childrenArray[0]?.type === Icon\n\n  return (\n    <StyledButton\n      ref={ref}\n      size={size}\n      isIconOnly={isIconOnly}\n      theme={theme}\n      {...rest}\n    >\n      {\n        childrenArray.map((child) => {\n          if (\n            !isSingleChild &&\n            (typeof child === 'string' || typeof child === 'number')\n          )\n            return <span key={child}>{child}</span>\n          if (\n            React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(\n              child\n            )\n          ) {\n            if (child?.type === Icon)\n              return React.cloneElement(child, { ...child.props, size })\n          }\n          return child\n        }) as React.ReactElement<unknown>[]\n      }\n    </StyledButton>\n  )\n})\n"],"mappings":";;;;;;;AAOA,IAAa,eAAe,OAC1B,YAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAmB;IAAW;IAAQ;GAAS;GACpD,IAAI;IAAC;IAAmB;IAAY;IAAQ;GAAS;GACrD,IAAI;IAAC;IAAmB;IAAY;IAAQ;GAAS;EACvD;EACA,YAAY,EACV,MAAM,CAAC,EACT;EACA,OAAO;GACL,UAAU;GACV,QAAQ;EACV;CACF;CACA,kBAAkB;EAChB;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,WAAW,KAAK;EAC1B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,KAAK;EAC3B;CACF;AACF,GACA,EAAE,2BAA2B,KAAK,CACpC;AAEA,IAAa,oBAAoB,QAAM,YAGpC,EAAE,OAAO,MAAM,QAAQ,YAAY,UAAU,GAAG,QAAQ,QAAQ;CACjE,MAAM,gBAAgB,QAAM,SAAS,QAAQ,QAAQ;CACrD,MAAM,gBAAgB,cAAc,UAAU;CAM9C,OACE,oBAAC,cAAD;EACO;EACC;EACM,YARd,iBACA,QAAM,eAAe,cAAc,EAAE,KACrC,cAAc,EAAE,EAAE,SAAS;EAOlB;EACP,GAAI;YAGF,cAAc,KAAK,UAAU;GAC3B,IACE,CAAC,kBACA,OAAO,UAAU,YAAY,OAAO,UAAU,WAE/C,OAAO,oBAAC,QAAD,EAAA,UAAmB,MAAY,GAApB,KAAoB;GACxC,IACE,QAAM,eACJ,KACF;QAEI,OAAO,SAAS,MAClB,OAAO,QAAM,aAAa,OAAO;KAAE,GAAG,MAAM;KAAO;IAAK,CAAC;GAAA;GAE7D,OAAO;EACT,CAAC;CAES,CAAA;AAElB,CAAC"}

package/dist/components/toggle-group/ToggleGroupItem.d.ts

@@ -2,7 +2,7 @@ import * as ToggleGroup from '@radix-ui/react-toggle-group';
 export declare const standardVariant: string[];
 export declare const modernVariant: string[];
 export declare const ToggleGroupItem: import("react").ForwardRefExoticComponent<Omit<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "theme"> & {
-    theme?: "standard" | "modern" | undefined;
+    theme?: "modern" | "standard" | undefined;
 } & {
     as?: import("react").ElementType;
 }>;

package/dist/components/toggle-group/ToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '~/styled'\n\nexport const standardVariant = [\n  'before:bg-grey-600',\n  'bg-white',\n  'border',\n  'border-grey-600',\n  'text-grey-800',\n  'data-[state=on]:border-current!',\n  'data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'data-[state=on]:text-primary-800',\n  'not-disabled:data-[state=on]:before:bg-none',\n  'not-disabled:focus-visible:before:bg-none',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:outline-none',\n  'not-disabled:focus-visible:relative',\n  'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:before:bg-none',\n  'not-disabled:hover:border-current!',\n  'not-disabled:hover:text-primary-900'\n]\n\nexport const modernVariant = [\n  'bg-grey-200',\n  'border-0',\n  'text-grey-800',\n  'overflow-hidden',\n  'rounded-md',\n  'data-[state=on]:bg-white',\n  'data-[state=on]:border!',\n  'data-[state=on]:border-grey-200!',\n  'data-[state=on]:shadow-none!',\n  'data-[state=on]:text-grey-900',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px_white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:outline-none',\n  'not-disabled:focus-visible:relative',\n  'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:text-primary-900'\n]\n\nexport const ToggleGroupItem = styled(ToggleGroup.Item, {\n  base: [\n    'cursor-pointer',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    theme: {\n      standard: standardVariant,\n      modern: modernVariant\n    }\n  },\n  defaultVariants: {\n    theme: 'standard'\n  }\n})\n"],"mappings":";;;AAIA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAa,kBAAkB,OAAO,YAAY,MAAM;CACtD,MAAM;EACJ;EACA;EACA;EACD;CACD,UAAU,EACR,OAAO;EACL,UAAU;EACV,QAAQ;EACT,EACF;CACD,iBAAiB,EACf,OAAO,YACR;CACF,CAAC"}
+{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '../../styled'\n\nexport const standardVariant = [\n  'before:bg-grey-600',\n  'bg-white',\n  'border',\n  'border-grey-600',\n  'text-grey-800',\n  'data-[state=on]:border-current!',\n  'data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'data-[state=on]:text-primary-800',\n  'not-disabled:data-[state=on]:before:bg-none',\n  'not-disabled:focus-visible:before:bg-none',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:outline-none',\n  'not-disabled:focus-visible:relative',\n  'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:before:bg-none',\n  'not-disabled:hover:border-current!',\n  'not-disabled:hover:text-primary-900'\n]\n\nexport const modernVariant = [\n  'bg-grey-200',\n  'border-0',\n  'text-grey-800',\n  'overflow-hidden',\n  'rounded-md',\n  'data-[state=on]:bg-white',\n  'data-[state=on]:border!',\n  'data-[state=on]:border-grey-200!',\n  'data-[state=on]:shadow-none!',\n  'data-[state=on]:text-grey-900',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px_white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:outline-none',\n  'not-disabled:focus-visible:relative',\n  'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:text-primary-900'\n]\n\nexport const ToggleGroupItem = styled(ToggleGroup.Item, {\n  base: [\n    'cursor-pointer',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    theme: {\n      standard: standardVariant,\n      modern: modernVariant\n    }\n  },\n  defaultVariants: {\n    theme: 'standard'\n  }\n})\n"],"mappings":";;;AAIA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,kBAAkB,OAAO,YAAY,MAAM;CACtD,MAAM;EACJ;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,UAAU;EACV,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,OAAO,WACT;AACF,CAAC"}

package/dist/components/toggle-group/ToggleGroupRoot.d.ts

@@ -5,27 +5,27 @@ type RootType = {
     gap?: 0 | 1 | 2 | 3;
     wrap?: boolean;
 };
-export declare const StyledRoot: React.ForwardRefExoticComponent<Omit<(Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & {
+export declare const StyledRoot: React.ForwardRefExoticComponent<Omit<(Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & {
     disableDeselect?: boolean;
-}, "ref"> | Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & {
+}, "ref"> | Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & {
     disableDeselect?: boolean;
-}, "ref">) & React.RefAttributes<HTMLDivElement>, "theme" | "direction" | "isFullWidth" | "hasGap"> & {
+}, "ref">) & React.RefAttributes<HTMLDivElement>, "direction" | "hasGap" | "isFullWidth" | "theme"> & {
     isFullWidth?: boolean | undefined;
     hasGap?: boolean | undefined;
-    direction?: "row" | "column" | undefined;
-    theme?: "standard" | "modern" | undefined;
+    direction?: "column" | "row" | undefined;
+    theme?: "modern" | "standard" | undefined;
 } & {
     as?: React.ElementType;
 }>;
-export declare const ToggleGroupRoot: React.ForwardRefExoticComponent<Omit<Omit<(Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & {
+export declare const ToggleGroupRoot: React.ForwardRefExoticComponent<Omit<Omit<(Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & {
     disableDeselect?: boolean;
-}, "ref"> | Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & {
+}, "ref"> | Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & {
     disableDeselect?: boolean;
-}, "ref">) & React.RefAttributes<HTMLDivElement>, "theme" | "direction" | "isFullWidth" | "hasGap"> & {
+}, "ref">) & React.RefAttributes<HTMLDivElement>, "direction" | "hasGap" | "isFullWidth" | "theme"> & {
     isFullWidth?: boolean | undefined;
     hasGap?: boolean | undefined;
-    direction?: "row" | "column" | undefined;
-    theme?: "standard" | "modern" | undefined;
+    direction?: "column" | "row" | undefined;
+    theme?: "modern" | "standard" | undefined;
 } & {
     as?: React.ElementType;
 } & RootType, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/toggle-group/ToggleGroupRoot.js

@@ -112,6 +112,6 @@ var ToggleGroupRoot = React$1.forwardRef(({ orientation = "horizontal", gap, isF
 	});
 });
 //#endregion
-export { ToggleGroupRoot };
+export { StyledRoot, ToggleGroupRoot };
 
 //# sourceMappingURL=ToggleGroupRoot.js.map

package/dist/components/toggle-group/ToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupRoot.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype RootType = {\n  orientation?: 'horizontal' | 'vertical'\n  isFullWidth?: boolean\n  gap?: 0 | 1 | 2 | 3\n  wrap?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n  base: ['w-fit'],\n  variants: {\n    isFullWidth: {\n      true: [\n        '**:data-radix-collection-item:basis-0',\n        '**:data-radix-collection-item:grow',\n        'w-full'\n      ],\n      false: ['w-auto']\n    },\n    hasGap: {\n      true: ['**:data-radix-collection-item:rounded-md'],\n      false: [\n        '**:data-radix-collection-item:not-last:before:absolute',\n        \"**:data-radix-collection-item:not-last:before:content-['']\",\n        '**:data-radix-collection-item:relative',\n        'rounded-md'\n      ]\n    },\n    direction: {\n      column: [],\n      row: []\n    },\n    theme: {\n      standard: [],\n      modern: ['bg-grey-200']\n    }\n  },\n  compoundVariants: [\n    {\n      hasGap: false,\n      direction: 'row',\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-l-md',\n        '**:data-radix-collection-item:last:rounded-r-md',\n        '**:data-radix-collection-item:not-first:border-l-transparent',\n        '**:data-radix-collection-item:not-last:before:h-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:before:right-0',\n        '**:data-radix-collection-item:not-last:before:-top-px',\n        '**:data-radix-collection-item:not-last:before:translate-x-3/2',\n        '**:data-radix-collection-item:not-last:before:w-px',\n        '**:data-radix-collection-item:not-last:border-r-transparent',\n        '**:data-radix-collection-item:rounded-none'\n      ]\n    },\n    {\n      hasGap: false,\n      direction: 'column',\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-t-sm',\n        '**:data-radix-collection-item:last:rounded-b-sm',\n        '**:data-radix-collection-item:not-first:border-t-transparent',\n        '**:data-radix-collection-item:not-last:before:bottom-0',\n        '**:data-radix-collection-item:not-last:before:h-px',\n        '**:data-radix-collection-item:not-last:before:-left-px',\n        '**:data-radix-collection-item:not-last:before:translate-y-3/2',\n        '**:data-radix-collection-item:not-last:before:w-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:border-b-transparent'\n      ]\n    },\n    {\n      hasGap: false,\n      theme: 'modern',\n      class: []\n    },\n    {\n      hasGap: false,\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:bg-transparent',\n        '**:data-radix-collection-item:rounded-none',\n        'bg-white'\n      ]\n    }\n  ]\n})\n\nconst gapClassMap = {\n  0: 'gap-0.5',\n  1: 'gap-1',\n  2: 'gap-2',\n  3: 'gap-3'\n}\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof StyledRoot> & RootType\n>(\n  (\n    {\n      orientation = 'horizontal',\n      gap,\n      isFullWidth,\n      children,\n      theme = 'standard',\n      wrap,\n      ...rest\n    },\n    ref\n  ) => {\n    const hasGap = typeof gap === 'number'\n    const direction = orientationToDirection(orientation)\n\n    return (\n      <StyledRoot\n        ref={ref}\n        direction={direction}\n        hasGap={hasGap}\n        isFullWidth={isFullWidth}\n        orientation={orientation}\n        theme={theme}\n        {...rest}\n      >\n        <div\n          className={cn(\n            'flex',\n            hasGap && gapClassMap[gap],\n            orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n            wrap ? 'flex-wrap' : 'flex-nowrap'\n          )}\n        >\n          {\n            React.Children.toArray(children).map((child) => {\n              if (React.isValidElement<{ theme?: typeof theme }>(child)) {\n                return React.cloneElement(child, { ...child.props, theme })\n              }\n              return child\n            }) as React.ReactElement<unknown>[]\n          }\n        </div>\n      </StyledRoot>\n    )\n  }\n)\n"],"mappings":";;;;;AAaA,IAAa,aAAa,OAAO,YAAY,MAAM;CACjD,MAAM,CAAC,QAAQ;CACf,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACD;GACD,OAAO,CAAC,SAAS;GAClB;EACD,QAAQ;GACN,MAAM,CAAC,2CAA2C;GAClD,OAAO;IACL;IACA;IACA;IACA;IACD;GACF;EACD,WAAW;GACT,QAAQ,EAAE;GACV,KAAK,EAAE;GACR;EACD,OAAO;GACL,UAAU,EAAE;GACZ,QAAQ,CAAC,cAAc;GACxB;EACF;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,QAAQ;GACR,OAAO;GACP,OAAO,EAAE;GACV;EACD;GACE,QAAQ;GACR,OAAO;GACP,OAAO;IACL;IACA;IACA;IACD;GACF;EACF;CACF,CAAC;AAEF,IAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,IAAM,0BAA0B,gBAC9B,gBAAgB,eAAe,QAAQ;AAEzC,IAAa,kBAAkB,QAAM,YAKjC,EACE,cAAc,cACd,KACA,aACA,UACA,QAAQ,YACR,MACA,GAAG,QAEL,QACG;CACH,MAAM,SAAS,OAAO,QAAQ;AAG9B,QACE,oBAAC,YAAD;EACO;EACM,WALG,uBAAuB,YAAY;EAMzC;EACK;EACA;EACN;EACP,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAW,GACT,QACA,UAAU,YAAY,MACtB,gBAAgB,eAAe,aAAa,YAC5C,OAAO,cAAc,cACtB;aAGC,QAAM,SAAS,QAAQ,SAAS,CAAC,KAAK,UAAU;AAC9C,QAAI,QAAM,eAAyC,MAAM,CACvD,QAAO,QAAM,aAAa,OAAO;KAAE,GAAG,MAAM;KAAO;KAAO,CAAC;AAE7D,WAAO;KACP;GAEA,CAAA;EACK,CAAA;EAGlB"}
+{"version":3,"file":"ToggleGroupRoot.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ToggleGroup } from '../../utilities/radix-overrides/toggle-group'\n\ntype RootType = {\n  orientation?: 'horizontal' | 'vertical'\n  isFullWidth?: boolean\n  gap?: 0 | 1 | 2 | 3\n  wrap?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n  base: ['w-fit'],\n  variants: {\n    isFullWidth: {\n      true: [\n        '**:data-radix-collection-item:basis-0',\n        '**:data-radix-collection-item:grow',\n        'w-full'\n      ],\n      false: ['w-auto']\n    },\n    hasGap: {\n      true: ['**:data-radix-collection-item:rounded-md'],\n      false: [\n        '**:data-radix-collection-item:not-last:before:absolute',\n        \"**:data-radix-collection-item:not-last:before:content-['']\",\n        '**:data-radix-collection-item:relative',\n        'rounded-md'\n      ]\n    },\n    direction: {\n      column: [],\n      row: []\n    },\n    theme: {\n      standard: [],\n      modern: ['bg-grey-200']\n    }\n  },\n  compoundVariants: [\n    {\n      hasGap: false,\n      direction: 'row',\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-l-md',\n        '**:data-radix-collection-item:last:rounded-r-md',\n        '**:data-radix-collection-item:not-first:border-l-transparent',\n        '**:data-radix-collection-item:not-last:before:h-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:before:right-0',\n        '**:data-radix-collection-item:not-last:before:-top-px',\n        '**:data-radix-collection-item:not-last:before:translate-x-3/2',\n        '**:data-radix-collection-item:not-last:before:w-px',\n        '**:data-radix-collection-item:not-last:border-r-transparent',\n        '**:data-radix-collection-item:rounded-none'\n      ]\n    },\n    {\n      hasGap: false,\n      direction: 'column',\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-t-sm',\n        '**:data-radix-collection-item:last:rounded-b-sm',\n        '**:data-radix-collection-item:not-first:border-t-transparent',\n        '**:data-radix-collection-item:not-last:before:bottom-0',\n        '**:data-radix-collection-item:not-last:before:h-px',\n        '**:data-radix-collection-item:not-last:before:-left-px',\n        '**:data-radix-collection-item:not-last:before:translate-y-3/2',\n        '**:data-radix-collection-item:not-last:before:w-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:border-b-transparent'\n      ]\n    },\n    {\n      hasGap: false,\n      theme: 'modern',\n      class: []\n    },\n    {\n      hasGap: false,\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:bg-transparent',\n        '**:data-radix-collection-item:rounded-none',\n        'bg-white'\n      ]\n    }\n  ]\n})\n\nconst gapClassMap = {\n  0: 'gap-0.5',\n  1: 'gap-1',\n  2: 'gap-2',\n  3: 'gap-3'\n}\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof StyledRoot> & RootType\n>(\n  (\n    {\n      orientation = 'horizontal',\n      gap,\n      isFullWidth,\n      children,\n      theme = 'standard',\n      wrap,\n      ...rest\n    },\n    ref\n  ) => {\n    const hasGap = typeof gap === 'number'\n    const direction = orientationToDirection(orientation)\n\n    return (\n      <StyledRoot\n        ref={ref}\n        direction={direction}\n        hasGap={hasGap}\n        isFullWidth={isFullWidth}\n        orientation={orientation}\n        theme={theme}\n        {...rest}\n      >\n        <div\n          className={cn(\n            'flex',\n            hasGap && gapClassMap[gap],\n            orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n            wrap ? 'flex-wrap' : 'flex-nowrap'\n          )}\n        >\n          {\n            React.Children.toArray(children).map((child) => {\n              if (React.isValidElement<{ theme?: typeof theme }>(child)) {\n                return React.cloneElement(child, { ...child.props, theme })\n              }\n              return child\n            }) as React.ReactElement<unknown>[]\n          }\n        </div>\n      </StyledRoot>\n    )\n  }\n)\n"],"mappings":";;;;;AAYA,IAAa,aAAa,OAAO,YAAY,MAAM;CACjD,MAAM,CAAC,OAAO;CACd,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;GACF;GACA,OAAO,CAAC,QAAQ;EAClB;EACA,QAAQ;GACN,MAAM,CAAC,0CAA0C;GACjD,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,QAAQ,CAAC;GACT,KAAK,CAAC;EACR;EACA,OAAO;GACL,UAAU,CAAC;GACX,QAAQ,CAAC,aAAa;EACxB;CACF;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,OAAO;GACP,OAAO,CAAC;EACV;EACA;GACE,QAAQ;GACR,OAAO;GACP,OAAO;IACL;IACA;IACA;GACF;EACF;CACF;AACF,CAAC;AAED,IAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAEA,IAAM,0BAA0B,gBAC9B,gBAAgB,eAAe,QAAQ;AAEzC,IAAa,kBAAkB,QAAM,YAKjC,EACE,cAAc,cACd,KACA,aACA,UACA,QAAQ,YACR,MACA,GAAG,QAEL,QACG;CACH,MAAM,SAAS,OAAO,QAAQ;CAG9B,OACE,oBAAC,YAAD;EACO;EACM,WALG,uBAAuB,WAK1B;EACH;EACK;EACA;EACN;EACP,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAW,GACT,QACA,UAAU,YAAY,MACtB,gBAAgB,eAAe,aAAa,YAC5C,OAAO,cAAc,aACvB;aAGE,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,UAAU;IAC9C,IAAI,QAAM,eAAyC,KAAK,GACtD,OAAO,QAAM,aAAa,OAAO;KAAE,GAAG,MAAM;KAAO;IAAM,CAAC;IAE5D,OAAO;GACT,CAAC;EAEA,CAAA;CACK,CAAA;AAEhB,CACF"}

package/dist/components/toggle-group/index.d.ts

@@ -1,29 +1,29 @@
 export declare const ToggleGroup: {
     Item: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "theme"> & {
-        theme?: "standard" | "modern" | undefined;
+        theme?: "modern" | "standard" | undefined;
     } & {
         as?: import("react").ElementType;
     }>;
-    Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "size" | "theme" | "isIconOnly"> & {
-        size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
-        isIconOnly?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-        theme?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
+    Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "isIconOnly" | "size" | "theme"> & {
+        size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
+        isIconOnly?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        theme?: ("modern" | "standard" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "modern" | "standard">>) | undefined;
     } & {
         as?: import("react").ElementType;
     }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Root: import("react").ForwardRefExoticComponent<Omit<Omit<(Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<Omit<(Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & import("react").RefAttributes<HTMLDivElement> & {
         disableDeselect?: boolean;
-    }, "ref"> | Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & import("react").RefAttributes<HTMLDivElement> & {
+    }, "ref"> | Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
         disableDeselect?: boolean;
-    }, "ref">) & import("react").RefAttributes<HTMLDivElement>, "theme" | "direction" | "isFullWidth" | "hasGap"> & {
+    }, "ref">) & import("react").RefAttributes<HTMLDivElement>, "direction" | "hasGap" | "isFullWidth" | "theme"> & {
         isFullWidth?: boolean | undefined;
         hasGap?: boolean | undefined;
-        direction?: "row" | "column" | undefined;
-        theme?: "standard" | "modern" | undefined;
+        direction?: "column" | "row" | undefined;
+        theme?: "modern" | "standard" | undefined;
     } & {
         as?: import("react").ElementType;
     } & {
-        orientation?: "horizontal" | "vertical";
+        orientation?: 'horizontal' | 'vertical';
         isFullWidth?: boolean;
         gap?: 0 | 1 | 2 | 3;
         wrap?: boolean;

package/dist/components/toggle-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/toggle-group/index.ts"],"sourcesContent":["import { ToggleGroupButton as Button } from './ToggleGroupButton'\nimport { ToggleGroupItem as Item } from './ToggleGroupItem'\nimport { ToggleGroupRoot as Root } from './ToggleGroupRoot'\n\nexport const ToggleGroup = { Item, Button, Root }\n"],"mappings":";;;;AAIA,IAAa,cAAc;CAAE,MAAA;CAAM,QAAA;CAAQ,MAAA;CAAM"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/toggle-group/index.ts"],"sourcesContent":["import { ToggleGroupButton as Button } from './ToggleGroupButton'\nimport { ToggleGroupItem as Item } from './ToggleGroupItem'\nimport { ToggleGroupRoot as Root } from './ToggleGroupRoot'\n\nexport const ToggleGroup = { Item, Button, Root }\n"],"mappings":";;;;AAIA,IAAa,cAAc;CAAE,MAAA;CAAM,QAAA;CAAQ,MAAA;AAAK"}

package/dist/components/tooltip/Tooltip.d.ts

@@ -2,11 +2,11 @@ import { Root } from '@radix-ui/react-tooltip';
 import * as React from 'react';
 type TooltipProps = React.ComponentProps<typeof Root>;
 export declare const Tooltip: {
-    ({ children, delayDuration, ...remainingProps }: TooltipProps): React.JSX.Element;
+    ({ children, delayDuration, ...rest }: TooltipProps): React.JSX.Element;
     displayName: string;
 } & {
-    Content: ({ children, side, sideOffset, size, ...remainingProps }: Omit<import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
-        size?: "sm" | "md" | "lg" | undefined;
+    Content: ({ children, side, sideOffset, size, ...rest }: Omit<import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
+        size?: "lg" | "md" | "sm" | undefined;
     } & {
         as?: React.ElementType;
     } & import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element;

package/dist/components/tooltip/Tooltip.js

@@ -3,9 +3,9 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { Portal, Provider, Root, Trigger } from "@radix-ui/react-tooltip";
 //#region src/components/tooltip/Tooltip.tsx
-var TooltipComponent = ({ children, delayDuration = 350, ...remainingProps }) => /* @__PURE__ */ jsx(Root, {
+var TooltipComponent = ({ children, delayDuration = 350, ...rest }) => /* @__PURE__ */ jsx(Root, {
 	delayDuration,
-	...remainingProps,
+	...rest,
 	children
 });
 var Tooltip = Object.assign(TooltipComponent, {

package/dist/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { Portal, Provider, Root, Trigger } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { TooltipContent } from './TooltipContent'\n\ntype TooltipProps = React.ComponentProps<typeof Root>\n\nconst TooltipComponent = ({\n  children,\n  delayDuration = 350,\n  ...remainingProps\n}: TooltipProps) => (\n  <Root delayDuration={delayDuration} {...remainingProps}>\n    {children}\n  </Root>\n)\n\nexport const Tooltip = Object.assign(TooltipComponent, {\n  Content: TooltipContent,\n  Trigger: Trigger,\n  Portal: Portal,\n  Provider: Provider\n})\n\nTooltipComponent.displayName = 'Tooltip'\n"],"mappings":";;;;;AAOA,IAAM,oBAAoB,EACxB,UACA,gBAAgB,KAChB,GAAG,qBAEH,oBAAC,MAAD;CAAqB;CAAe,GAAI;CACrC;CACI,CAAA;AAGT,IAAa,UAAU,OAAO,OAAO,kBAAkB;CACrD,SAAS;CACA;CACD;CACE;CACX,CAAC;AAEF,iBAAiB,cAAc"}
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { Portal, Provider, Root, Trigger } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { TooltipContent } from './TooltipContent'\n\ntype TooltipProps = React.ComponentProps<typeof Root>\n\nconst TooltipComponent = ({\n  children,\n  delayDuration = 350,\n  ...rest\n}: TooltipProps) => (\n  <Root delayDuration={delayDuration} {...rest}>\n    {children}\n  </Root>\n)\n\nexport const Tooltip = Object.assign(TooltipComponent, {\n  Content: TooltipContent,\n  Trigger: Trigger,\n  Portal: Portal,\n  Provider: Provider\n})\n\nTooltipComponent.displayName = 'Tooltip'\n"],"mappings":";;;;;AAOA,IAAM,oBAAoB,EACxB,UACA,gBAAgB,KAChB,GAAG,WAEH,oBAAC,MAAD;CAAqB;CAAe,GAAI;CACrC;AACG,CAAA;AAGR,IAAa,UAAU,OAAO,OAAO,kBAAkB;CACrD,SAAS;CACA;CACD;CACE;AACZ,CAAC;AAED,iBAAiB,cAAc"}

package/dist/components/tooltip/TooltipContent.d.ts

@@ -1,10 +1,10 @@
 import { Content } from '@radix-ui/react-tooltip';
 import * as React from 'react';
 declare const StyledContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
-    size?: "sm" | "md" | "lg" | undefined;
+    size?: "lg" | "md" | "sm" | undefined;
 } & {
     as?: React.ElementType;
 }>;
 type TooltipContentProps = React.ComponentProps<typeof StyledContent> & React.ComponentProps<typeof Content>;
-export declare const TooltipContent: ({ children, side, sideOffset, size, ...remainingProps }: TooltipContentProps) => React.JSX.Element;
+export declare const TooltipContent: ({ children, side, sideOffset, size, ...rest }: TooltipContentProps) => React.JSX.Element;
 export {};

package/dist/components/tooltip/TooltipContent.js

@@ -37,11 +37,11 @@ var StyledArrow = styled(Arrow, { base: [
 	"in-data-[align=end]:mr-2",
 	"in-data-[align=start]:ml-2"
 ] });
-var TooltipContent = ({ children, side = "top", sideOffset = 4, size = "md", ...remainingProps }) => /* @__PURE__ */ jsxs(StyledContent, {
+var TooltipContent = ({ children, side = "top", sideOffset = 4, size = "md", ...rest }) => /* @__PURE__ */ jsxs(StyledContent, {
 	side,
 	sideOffset,
 	size,
-	...remainingProps,
+	...rest,
 	children: [children, /* @__PURE__ */ jsx(StyledArrow, {})]
 });
 //#endregion

package/dist/components/tooltip/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.js","names":[],"sources":["../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import { Arrow, Content } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'bg-grey-900',\n    'rounded-sm',\n    'shadow-sm',\n    'text-white',\n    'font-body',\n    'text-sm',\n    'leading-normal',\n    'whitespace-normal',\n    'px-3',\n    'py-2',\n    'z-10',\n    'will-change-transform',\n    'will-change-[opacity]',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=delayed-open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    size: {\n      sm: ['max-w-25'],\n      md: ['max-w-[250px]'],\n      lg: ['max-w-100']\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  base: [\n    'fill-grey-900',\n    'in-data-[align=end]:mr-2',\n    'in-data-[align=start]:ml-2'\n  ]\n})\n\ntype TooltipContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content>\n\nexport const TooltipContent = ({\n  children,\n  side = 'top',\n  sideOffset = 4,\n  size = 'md',\n  ...remainingProps\n}: TooltipContentProps) => (\n  <StyledContent\n    side={side}\n    sideOffset={sideOffset}\n    size={size}\n    {...remainingProps}\n  >\n    {children}\n    <StyledArrow />\n  </StyledContent>\n)\n"],"mappings":";;;;;AAKA,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,gBAAgB;EACrB,IAAI,CAAC,YAAY;EAClB,EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACD,EACF,CAAC;AAKF,IAAa,kBAAkB,EAC7B,UACA,OAAO,OACP,aAAa,GACb,OAAO,MACP,GAAG,qBAEH,qBAAC,eAAD;CACQ;CACM;CACN;CACN,GAAI;WAJN,CAMG,UACD,oBAAC,aAAD,EAAe,CAAA,CACD"}
+{"version":3,"file":"TooltipContent.js","names":[],"sources":["../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import { Arrow, Content } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'bg-grey-900',\n    'rounded-sm',\n    'shadow-sm',\n    'text-white',\n    'font-body',\n    'text-sm',\n    'leading-normal',\n    'whitespace-normal',\n    'px-3',\n    'py-2',\n    'z-10',\n    'will-change-transform',\n    'will-change-[opacity]',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=delayed-open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    size: {\n      sm: ['max-w-25'],\n      md: ['max-w-[250px]'],\n      lg: ['max-w-100']\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  base: [\n    'fill-grey-900',\n    'in-data-[align=end]:mr-2',\n    'in-data-[align=start]:ml-2'\n  ]\n})\n\ntype TooltipContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content>\n\nexport const TooltipContent = ({\n  children,\n  side = 'top',\n  sideOffset = 4,\n  size = 'md',\n  ...rest\n}: TooltipContentProps) => (\n  <StyledContent side={side} sideOffset={sideOffset} size={size} {...rest}>\n    {children}\n    <StyledArrow />\n  </StyledContent>\n)\n"],"mappings":";;;;;AAKA,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,eAAe;EACpB,IAAI,CAAC,WAAW;CAClB,EACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;AACF,EACF,CAAC;AAKD,IAAa,kBAAkB,EAC7B,UACA,OAAO,OACP,aAAa,GACb,OAAO,MACP,GAAG,WAEH,qBAAC,eAAD;CAAqB;CAAkB;CAAkB;CAAM,GAAI;WAAnE,CACG,UACD,oBAAC,aAAD,CAAc,CAAA,CACD"}

package/dist/components/top-bar/TopBar.colorscheme.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.colorscheme.config.js","names":[],"sources":["../../../src/components/top-bar/TopBar.colorscheme.config.ts"],"sourcesContent":["const light = {\n  '--background': 'white',\n  '--divider': 'var(--color-grey-200)',\n  '--border-bottom': 'var(--color-grey-200)'\n}\n\nexport const colorSchemes = {\n  light\n}\n"],"mappings":"AAMA,IAAa,eAAe,EAC1B,OAPY;CACZ,gBAAgB;CAChB,aAAa;CACb,mBAAmB;CACpB,EAIA"}
+{"version":3,"file":"TopBar.colorscheme.config.js","names":[],"sources":["../../../src/components/top-bar/TopBar.colorscheme.config.ts"],"sourcesContent":["const light = {\n  '--background': 'white',\n  '--divider': 'var(--color-grey-200)',\n  '--border-bottom': 'var(--color-grey-200)'\n}\n\nexport const colorSchemes = {\n  light\n}\n"],"mappings":"AAMA,IAAa,eAAe,EAC1B;CANA,gBAAgB;CAChB,aAAa;CACb,mBAAmB;AAInB,EACF"}

package/dist/components/top-bar/TopBar.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Theme } from '../../styled';
-declare const StyledRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "appearance" | "size" | "diffused" | "hasScrolled"> & {
-    hasScrolled?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-    size?: ("md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "md" | "lg">>) | undefined;
-    diffused?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-    appearance?: ("rounded" | "standard" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "rounded" | "standard">>) | undefined;
+declare const StyledRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "appearance" | "diffused" | "hasScrolled" | "size"> & {
+    hasScrolled?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    size?: ("lg" | "md" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md">>) | undefined;
+    diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    appearance?: ("rounded" | "standard" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "rounded" | "standard">>) | undefined;
 } & {
     as?: React.ElementType;
 }>;
@@ -19,32 +19,32 @@ export declare const TopBar: {
     Brand: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never> & {
         as?: React.ElementType;
     }>;
-    BrandLogo: ({ src, alt, className }: Pick<React.ComponentProps<typeof import("..").Image>, "src" | "alt"> & {
+    BrandLogo: ({ src, alt, className }: Pick<React.ComponentProps<typeof import("..").Image>, 'src' | 'alt'> & {
         className?: string;
     }) => React.JSX.Element;
-    BrandName: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
-        size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
-        noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-        family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
+    BrandName: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "family" | "noCapsize" | "size" | "weight"> & {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     } & {
         as?: React.ElementType;
     }, "as"> & {
-        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+        as?: 'blockquote' | 'caption' | 'dd' | 'dt' | 'figcaption' | 'li' | 'p' | 'span' | 'legend' | React.ComponentType | React.ElementType;
     }, "ref"> & React.RefAttributes<HTMLParagraphElement>, never> & {
         as?: React.ElementType;
     }>;
-    ActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "size" | "theme" | "isRounded"> & {
-        theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
-        appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
-        size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
-        isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+    ActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "isRounded" | "size" | "theme"> & {
+        theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+        appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
+        size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
+        isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     } & {
         as?: React.ElementType;
-    }, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
+    }, "children" | "hasTooltip" | "label" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
         children: React.ReactNode;
         label: string;
-    } & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "size" | "children"> & {
+    } & Omit<import("../..").OptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "children" | "size"> & {
         icon: React.FC<React.SVGProps<SVGSVGElement>>;
         label: string;
     }, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"TopBar.js","names":[],"sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, Theme } from '~/styled'\nimport { useWindowScrollPosition } from '~/utilities/hooks/useWindowScrollPosition'\n\nimport { Divider } from '../divider/Divider'\nimport { colorSchemes as topBarColorSchemes } from './TopBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n  <Divider orientation=\"vertical\" className=\"bg-divider h-6\" />\n)\n\nconst StyledRoot = styled(\n  'header',\n  {\n    base: [\n      'bg-(--background)',\n      'sticky',\n      'flex',\n      'items-center',\n      'z-15',\n      'transition-shadow',\n      'duration-200',\n      'ease-out'\n    ],\n    variants: {\n      hasScrolled: {\n        true: ['shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]']\n      },\n      size: {\n        md: ['h-16'],\n        lg: ['h-24']\n      },\n      diffused: {\n        true: [\n          'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n          'supports-color-mix:backdrop-blur-sm'\n        ]\n      },\n      appearance: {\n        standard: [\n          'w-screen',\n          'max-w-full',\n          'top-0',\n          'border-b',\n          'border-b-(--border-bottom)'\n        ],\n        rounded: [\n          'w-full',\n          'top-2',\n          'p-2',\n          'border',\n          'border-white',\n          'rounded-full'\n        ]\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nconst Container = styled('div', {\n  base: ['flex', 'items-center', 'h-10', 'mx-4', 'w-full', 'md:mx-8']\n})\n\ntype TopBarProps = React.ComponentProps<typeof StyledRoot> &\n  React.ComponentProps<typeof Container> &\n  React.ComponentProps<typeof Theme>\n\nconst TopBarComponent = ({\n  size = 'md',\n  diffused,\n  theme,\n  appearance = 'standard',\n  ...rest\n}: React.PropsWithChildren<TopBarProps>) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <Theme theme={theme || topBarColorSchemes['light']}>\n      <StyledRoot\n        hasScrolled={!!scrollPositionY}\n        diffused={diffused}\n        appearance={appearance}\n        size={size}\n      >\n        <Container {...rest} />\n      </StyledRoot>\n    </Theme>\n  )\n}\n\nexport const TopBar = Object.assign(TopBarComponent, {\n  Brand: TopBarBrand,\n  BrandLogo: TopBarBrandLogo,\n  BrandName: TopBarBrandName,\n  ActionIcon: TopBarActionIcon,\n  Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"mappings":";;;;;;;;;AAUA,IAAM,sBACJ,oBAAC,SAAD;CAAS,aAAY;CAAW,WAAU;CAAmB,CAAA;AAG/D,IAAM,aAAa,OACjB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,aAAa,EACX,MAAM,CAAC,+CAA+C,EACvD;EACD,MAAM;GACJ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,UAAU,EACR,MAAM,CACJ,wEACA,sCACD,EACF;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CAAC;CAAQ;CAAgB;CAAQ;CAAQ;CAAU;CAAU,EACpE,CAAC;AAMF,IAAM,mBAAmB,EACvB,OAAO,MACP,UACA,OACA,aAAa,YACb,GAAG,WACuC;CAC1C,MAAM,EAAE,GAAG,oBAAoB,yBAAyB;AAExD,QACE,oBAAC,OAAD;EAAO,OAAO,SAAS,aAAmB;YACxC,oBAAC,YAAD;GACE,aAAa,CAAC,CAAC;GACL;GACE;GACN;aAEN,oBAAC,WAAD,EAAW,GAAI,MAAQ,CAAA;GACZ,CAAA;EACP,CAAA;;AAIZ,IAAa,SAAS,OAAO,OAAO,iBAAiB;CACnD,OAAO;CACP,WAAW;CACX,WAAW;CACX,YAAY;CACZ,SAAS;CACV,CAAC;AAEF,gBAAgB,cAAc"}
+{"version":3,"file":"TopBar.js","names":[],"sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, Theme } from '../../styled'\nimport { useWindowScrollPosition } from '../../utilities/hooks/useWindowScrollPosition'\nimport { Divider } from '../divider/Divider'\nimport { colorSchemes as topBarColorSchemes } from './TopBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n  <Divider orientation=\"vertical\" className=\"bg-divider h-6\" />\n)\n\nconst StyledRoot = styled(\n  'header',\n  {\n    base: [\n      'bg-(--background)',\n      'sticky',\n      'flex',\n      'items-center',\n      'z-15',\n      'transition-shadow',\n      'duration-200',\n      'ease-out'\n    ],\n    variants: {\n      hasScrolled: {\n        true: ['shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]']\n      },\n      size: {\n        md: ['h-16'],\n        lg: ['h-24']\n      },\n      diffused: {\n        true: [\n          'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n          'supports-color-mix:backdrop-blur-sm'\n        ]\n      },\n      appearance: {\n        standard: [\n          'w-screen',\n          'max-w-full',\n          'top-0',\n          'border-b',\n          'border-b-(--border-bottom)'\n        ],\n        rounded: [\n          'w-full',\n          'top-2',\n          'p-2',\n          'border',\n          'border-white',\n          'rounded-full'\n        ]\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nconst Container = styled('div', {\n  base: ['flex', 'items-center', 'h-10', 'mx-4', 'w-full', 'md:mx-8']\n})\n\ntype TopBarProps = React.ComponentProps<typeof StyledRoot> &\n  React.ComponentProps<typeof Container> &\n  React.ComponentProps<typeof Theme>\n\nconst TopBarComponent = ({\n  size = 'md',\n  diffused,\n  theme,\n  appearance = 'standard',\n  ...rest\n}: React.PropsWithChildren<TopBarProps>) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <Theme theme={theme || topBarColorSchemes['light']}>\n      <StyledRoot\n        hasScrolled={!!scrollPositionY}\n        diffused={diffused}\n        appearance={appearance}\n        size={size}\n      >\n        <Container {...rest} />\n      </StyledRoot>\n    </Theme>\n  )\n}\n\nexport const TopBar = Object.assign(TopBarComponent, {\n  Brand: TopBarBrand,\n  BrandLogo: TopBarBrandLogo,\n  BrandName: TopBarBrandName,\n  ActionIcon: TopBarActionIcon,\n  Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"mappings":";;;;;;;;;AASA,IAAM,sBACJ,oBAAC,SAAD;CAAS,aAAY;CAAW,WAAU;AAAkB,CAAA;AAG9D,IAAM,aAAa,OACjB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,aAAa,EACX,MAAM,CAAC,8CAA8C,EACvD;EACA,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;EACb;EACA,UAAU,EACR,MAAM,CACJ,wEACA,qCACF,EACF;EACA,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;GACF;EACF;CACF;AACF,GACA,EACE,2BAA2B,KAC7B,CACF;AAEA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CAAC;CAAQ;CAAgB;CAAQ;CAAQ;CAAU;AAAS,EACpE,CAAC;AAMD,IAAM,mBAAmB,EACvB,OAAO,MACP,UACA,OACA,aAAa,YACb,GAAG,WACuC;CAC1C,MAAM,EAAE,GAAG,oBAAoB,wBAAwB;CAEvD,OACE,oBAAC,OAAD;EAAO,OAAO,SAAS,aAAmB;YACxC,oBAAC,YAAD;GACE,aAAa,CAAC,CAAC;GACL;GACE;GACN;aAEN,oBAAC,WAAD,EAAW,GAAI,KAAO,CAAA;EACZ,CAAA;CACP,CAAA;AAEX;AAEA,IAAa,SAAS,OAAO,OAAO,iBAAiB;CACnD,OAAO;CACP,WAAW;CACX,WAAW;CACX,YAAY;CACZ,SAAS;AACX,CAAC;AAED,gBAAgB,cAAc"}

package/dist/components/top-bar/TopBarActionIcon.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ActionIcon } from '../action-icon/ActionIcon';
 type TopBarActionIconProps = Omit<React.ComponentProps<typeof ActionIcon>, 'size' | 'children'> & {
     icon: React.FC<React.SVGProps<SVGSVGElement>>;

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

@@ -1,18 +1,16 @@
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
-import React from "react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/top-bar/TopBarActionIcon.tsx
-var TopBarActionIcon = React.forwardRef(({ icon, ...rest }, forwardedRef) => {
-	return /* @__PURE__ */ jsx(ActionIcon, {
-		size: "md",
-		appearance: "simple",
-		theme: "neutral",
-		ref: forwardedRef,
-		...rest,
-		children: /* @__PURE__ */ jsx(Icon, { is: icon })
-	});
-});
+var TopBarActionIcon = React$1.forwardRef(({ icon, ...rest }, forwardedRef) => /* @__PURE__ */ jsx(ActionIcon, {
+	size: "md",
+	appearance: "simple",
+	theme: "neutral",
+	ref: forwardedRef,
+	...rest,
+	children: /* @__PURE__ */ jsx(Icon, { is: icon })
+}));
 //#endregion
 export { TopBarActionIcon };
 

package/dist/components/top-bar/TopBarActionIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBarActionIcon.js","names":[],"sources":["../../../src/components/top-bar/TopBarActionIcon.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\ntype TopBarActionIconProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'size' | 'children'\n> & {\n  icon: React.FC<React.SVGProps<SVGSVGElement>>\n  label: string\n}\n\nexport const TopBarActionIcon = React.forwardRef<\n  HTMLButtonElement,\n  TopBarActionIconProps\n>(({ icon, ...rest }, forwardedRef) => {\n  return (\n    <ActionIcon\n      size=\"md\"\n      appearance=\"simple\"\n      theme=\"neutral\"\n      ref={forwardedRef}\n      {...rest}\n    >\n      <Icon is={icon} />\n    </ActionIcon>\n  )\n})\n"],"mappings":";;;;;AAaA,IAAa,mBAAmB,MAAM,YAGnC,EAAE,MAAM,GAAG,QAAQ,iBAAiB;AACrC,QACE,oBAAC,YAAD;EACE,MAAK;EACL,YAAW;EACX,OAAM;EACN,KAAK;EACL,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACP,CAAA;EAEf"}
+{"version":3,"file":"TopBarActionIcon.js","names":[],"sources":["../../../src/components/top-bar/TopBarActionIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\ntype TopBarActionIconProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'size' | 'children'\n> & {\n  icon: React.FC<React.SVGProps<SVGSVGElement>>\n  label: string\n}\n\nexport const TopBarActionIcon = React.forwardRef<\n  HTMLButtonElement,\n  TopBarActionIconProps\n>(({ icon, ...rest }, forwardedRef) => (\n  <ActionIcon\n    size=\"md\"\n    appearance=\"simple\"\n    theme=\"neutral\"\n    ref={forwardedRef}\n    {...rest}\n  >\n    <Icon is={icon} />\n  </ActionIcon>\n))\n"],"mappings":";;;;;AAaA,IAAa,mBAAmB,QAAM,YAGnC,EAAE,MAAM,GAAG,QAAQ,iBACpB,oBAAC,YAAD;CACE,MAAK;CACL,YAAW;CACX,OAAM;CACN,KAAK;CACL,GAAI;WAEJ,oBAAC,MAAD,EAAM,IAAI,KAAO,CAAA;AACP,CAAA,CACb"}

package/dist/components/top-bar/TopBarBrand.d.ts

@@ -1,17 +1,17 @@
-import React from 'react';
+import * as React from 'react';
 import { Image } from '../image/Image';
-export declare const TopBarBrandLogo: ({ src, alt, className }: Pick<React.ComponentProps<typeof Image>, "src" | "alt"> & {
+export declare const TopBarBrandLogo: ({ src, alt, className }: Pick<React.ComponentProps<typeof Image>, 'src' | 'alt'> & {
     className?: string;
 }) => React.JSX.Element;
-export declare const TopBarBrandName: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
-    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-    family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
+export declare const TopBarBrandName: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "family" | "noCapsize" | "size" | "weight"> & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 } & {
     as?: React.ElementType;
 }, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+    as?: 'blockquote' | 'caption' | 'dd' | 'dt' | 'figcaption' | 'li' | 'p' | 'span' | 'legend' | React.ComponentType | React.ElementType;
 }, "ref"> & React.RefAttributes<HTMLParagraphElement>, never> & {
     as?: React.ElementType;
 }>;

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

@@ -4,13 +4,11 @@ import { Image } from "../image/Image.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/top-bar/TopBarBrand.tsx
-var TopBarBrandLogo = ({ src, alt = "Atom Learning logo", className }) => {
-	return /* @__PURE__ */ jsx(Image, {
-		src,
-		alt,
-		className: cn("h-8", "mr-3", "w-auto", className)
-	});
-};
+var TopBarBrandLogo = ({ src, alt = "Atom Learning logo", className }) => /* @__PURE__ */ jsx(Image, {
+	src,
+	alt,
+	className: cn("h-8", "mr-3", "w-auto", className)
+});
 var TopBarBrandName = styled(Text, { base: ["text-grey-800"] });
 var TopBarBrand = styled("a", { base: [
 	"flex",

package/dist/components/top-bar/TopBarBrand.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBarBrand.js","names":[],"sources":["../../../src/components/top-bar/TopBarBrand.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const TopBarBrandLogo = ({\n  src,\n  alt = 'Atom Learning logo',\n  className\n}: Pick<React.ComponentProps<typeof Image>, 'src' | 'alt'> & {\n  className?: string\n}): React.JSX.Element => {\n  return (\n    <Image\n      src={src}\n      alt={alt}\n      className={cn('h-8', 'mr-3', 'w-auto', className)}\n    />\n  )\n}\n\nexport const TopBarBrandName = styled(Text, {\n  base: ['text-grey-800']\n})\n\nexport const TopBarBrand = styled('a', {\n  base: [\n    'flex',\n    'items-center',\n    'no-underline',\n    'text-grey-800',\n    'hover:no-underline',\n    'focus:no-underline'\n  ]\n})\n"],"mappings":";;;;;;AAQA,IAAa,mBAAmB,EAC9B,KACA,MAAM,sBACN,gBAGuB;AACvB,QACE,oBAAC,OAAD;EACO;EACA;EACL,WAAW,GAAG,OAAO,QAAQ,UAAU,UAAU;EACjD,CAAA;;AAIN,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM,CAAC,gBAAgB,EACxB,CAAC;AAEF,IAAa,cAAc,OAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
+{"version":3,"file":"TopBarBrand.js","names":[],"sources":["../../../src/components/top-bar/TopBarBrand.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const TopBarBrandLogo = ({\n  src,\n  alt = 'Atom Learning logo',\n  className\n}: Pick<React.ComponentProps<typeof Image>, 'src' | 'alt'> & {\n  className?: string\n}) => (\n  <Image\n    src={src}\n    alt={alt}\n    className={cn('h-8', 'mr-3', 'w-auto', className)}\n  />\n)\n\nexport const TopBarBrandName = styled(Text, {\n  base: ['text-grey-800']\n})\n\nexport const TopBarBrand = styled('a', {\n  base: [\n    'flex',\n    'items-center',\n    'no-underline',\n    'text-grey-800',\n    'hover:no-underline',\n    'focus:no-underline'\n  ]\n})\n"],"mappings":";;;;;;AAMA,IAAa,mBAAmB,EAC9B,KACA,MAAM,sBACN,gBAIA,oBAAC,OAAD;CACO;CACA;CACL,WAAW,GAAG,OAAO,QAAQ,UAAU,SAAS;AACjD,CAAA;AAGH,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM,CAAC,eAAe,EACxB,CAAC;AAED,IAAa,cAAc,OAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC"}