softable-pixels-web 1.2.3 → 1.2.4

package/dist/{index-B-f7Shgf.d.ts → index-BZ2ZYR1Y.d.ts}

@@ -1,6 +1,6 @@
 import { t as CommonStyleProps } from "./styleProps-CrD6h1FM.js";
 import { ReactNode } from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/commons/toolkit/TabSwitch/styles.d.ts
 declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): {
@@ -41,7 +41,7 @@ interface TabSwitchProps<T> extends CommonStyleProps {
 }
 //#endregion
 //#region src/components/commons/toolkit/TabSwitch/index.d.ts
-declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime1.JSX.Element;
+declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
-//# sourceMappingURL=index-B-f7Shgf.d.ts.map
+//# sourceMappingURL=index-BZ2ZYR1Y.d.ts.map

package/dist/{index-CJDqp_om.d.ts → index-Bg-qBbvL.d.ts}

@@ -94,7 +94,7 @@ interface ThemeTokens {
     background: {
       /** Main page background */
       primary: string;
-      /** Sekeleton background */
+      /** Skeleton background */
       skeleton: string;
       /** Card background */
       card: {
@@ -294,4 +294,4 @@ declare const ThemeProvider: React.FC<ThemeProviderProps>;
 declare function useTheme(): ThemeContextData;
 //#endregion
 export { ThemeName as a, ThemeRegistry as c, ThemeMode as i, ThemeTokens as l, useTheme as n, ThemePersistence as o, ThemeContextData as r, ThemeProviderProps as s, ThemeProvider as t };
-//# sourceMappingURL=index-CJDqp_om.d.ts.map
+//# sourceMappingURL=index-Bg-qBbvL.d.ts.map

package/dist/{index-By2y-Zjz.d.ts → index-BwxZG9_q.d.ts}

@@ -1,4 +1,4 @@
-import { n as TypographyVariant } from "./types-n-gj1UXJ.js";
+import { n as TypographyVariant } from "./types-oQ4y-S7G.js";
 import React$1 from "react";
 
 //#region src/components/commons/toolkit/Checkbox/types.d.ts
@@ -26,4 +26,4 @@ interface CheckboxProps {
 declare const Checkbox: React$1.FC<CheckboxProps>;
 //#endregion
 export { Checkbox as t };
-//# sourceMappingURL=index-By2y-Zjz.d.ts.map
+//# sourceMappingURL=index-BwxZG9_q.d.ts.map

package/dist/{index-BdXsHz33.d.ts → index-CehwJRt_.d.ts}

@@ -1,5 +1,5 @@
 import { a as TextProps } from "./styleProps-CrD6h1FM.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/components/commons/inputs/TextArea/styles.d.ts
 declare function createTextAreaStyles(props: TextAreaProps): {
@@ -65,7 +65,7 @@ interface TextAreaProps {
 }
 //#endregion
 //#region src/components/commons/inputs/TextArea/index.d.ts
-declare const TextArea: (props: TextAreaProps) => react_jsx_runtime0.JSX.Element;
+declare const TextArea: (props: TextAreaProps) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { TextArea as t };
-//# sourceMappingURL=index-BdXsHz33.d.ts.map
+//# sourceMappingURL=index-CehwJRt_.d.ts.map

package/dist/{index-B_xvhcYY.d.ts → index-ChkulgEl.d.ts}

@@ -1,6 +1,6 @@
 import { n as Placement } from "./types-Cr3L1i9Q.js";
 import { ReactNode } from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/commons/toolkit/ContextMenu/styles.d.ts
 declare function createContextMenuStyles<T>(_props: ContextMenuProps<T>): {
@@ -67,7 +67,7 @@ interface ContextMenuProps<T> {
 }
 //#endregion
 //#region src/components/commons/toolkit/ContextMenu/index.d.ts
-declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime2.JSX.Element;
+declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { types_d_exports as n, ContextMenu as t };
-//# sourceMappingURL=index-B_xvhcYY.d.ts.map
+//# sourceMappingURL=index-ChkulgEl.d.ts.map

package/dist/{index-wFIuQoWm.d.ts → index-DCocNerH.d.ts}

@@ -1,6 +1,6 @@
 import { i as PaddingProps, n as LayoutProps } from "./styleProps-CrD6h1FM.js";
 import { i as TypeStyles } from "./useThemedStyles-0XwrILh9.js";
-import { n as TypographyVariant } from "./types-n-gj1UXJ.js";
+import { n as TypographyVariant } from "./types-oQ4y-S7G.js";
 import React, { MouseEvent, ReactNode } from "react";
 
 //#region src/components/commons/buttons/Button/styles.d.ts
@@ -123,4 +123,4 @@ interface ButtonProps extends PaddingProps, LayoutProps {
 declare const Button: React.FC<ButtonProps>;
 //#endregion
 export { Button as t };
-//# sourceMappingURL=index-wFIuQoWm.d.ts.map
+//# sourceMappingURL=index-DCocNerH.d.ts.map

package/dist/index.d.ts

@@ -1,27 +1,27 @@
-import "./types-n-gj1UXJ.js";
-import { t as Button } from "./index-wFIuQoWm.js";
+import "./types-oQ4y-S7G.js";
+import { t as Button } from "./index-DCocNerH.js";
 import { t as IconButton } from "./index-DsQyEI6l.js";
 import { n as types_d_exports$1, t as ColorPicker } from "./index-v28FA4ph.js";
 import { n as Locale, r as MaskType, t as MaskModule } from "./index-C2rKLkDO.js";
 import { t as Input } from "./index-B9Ooz6lk.js";
 import { n as types_d_exports$4, t as Select } from "./index-CNPbAm9i.js";
 import { n as types_d_exports$3 } from "./types-B-zFTnqe.js";
-import { t as TextArea } from "./index-BdXsHz33.js";
+import { t as TextArea } from "./index-CehwJRt_.js";
 import { t as Popover } from "./index-BbvC10jX.js";
 import { t as BasePopover } from "./index-DvbYyCcE.js";
 import { t as Breadcrumb } from "./index-XBmzyFW4.js";
 import { t as Skeleton } from "./index-B9PAov_V.js";
 import { t as CheckItem } from "./index-IIjo6avX.js";
-import { t as Checkbox } from "./index-By2y-Zjz.js";
+import { t as Checkbox } from "./index-BwxZG9_q.js";
 import { r as types_d_exports } from "./types-B4Yk1AUa.js";
 import { Chip } from "./chip.js";
 import { t as ChipList } from "./index-Du2b4ABa.js";
-import { n as types_d_exports$2, t as ContextMenu } from "./index-B_xvhcYY.js";
+import { n as types_d_exports$2, t as ContextMenu } from "./index-ChkulgEl.js";
 import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
 import { t as Switch } from "./index-BEd1qAu7.js";
-import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-B-f7Shgf.js";
+import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-BZ2ZYR1Y.js";
 import { Typography } from "./typography.js";
-import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-CJDqp_om.js";
+import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-Bg-qBbvL.js";
 import { useDismiss } from "./use-dismiss.js";
 import { AnchorLike, useFloating } from "./use-floating.js";
 import { useVirtualAnchor } from "./use-virtual-anchor.js";

package/dist/index.js

@@ -4,27 +4,27 @@ import { t as useDismiss } from "./useDismiss-w2spkFNN.js";
 import { t as useFloating } from "./useFloating-BkMrolmn.js";
 import { n as types_exports$3, t as Popover } from "./Popover-tzAZp6V7.js";
 import "./Icon-CV5fAqK7.js";
-import { t as Typography } from "./Typography-BTJk47bm.js";
-import { t as Checkbox } from "./Checkbox-aFsrig0i.js";
+import { t as Typography } from "./Typography-gvXwbYdT.js";
+import { t as Checkbox } from "./Checkbox-Oy1RP6NR.js";
 import { n as useTheme, t as ThemeProvider } from "./ThemeContext-C9llUBqb.js";
-import { t as TabSwitch } from "./TabSwitch-D6KaP0z5.js";
-import { t as CheckItem } from "./CheckItem-3d-2-qZe.js";
-import { t as InfoSummary } from "./InfoSummary-p7hgSIZn.js";
+import { t as TabSwitch } from "./TabSwitch-CAxR1ipv.js";
+import { t as CheckItem } from "./CheckItem-BtcT3Qu0.js";
+import { t as InfoSummary } from "./InfoSummary-BVOiGuug.js";
 import { t as BasePopover } from "./BasePopover-m1OfX3fO.js";
-import { n as types_exports$2, t as ContextMenu } from "./ContextMenu-B8mGn0Fq.js";
-import { n as types_exports, t as Chip } from "./Chip-DWoGbX_A.js";
-import "./ErrorMessage-BRnYfudz.js";
-import { t as ChipList } from "./ChipList-ClC-BPyL.js";
+import { n as types_exports$2, t as ContextMenu } from "./ContextMenu-Dpmf4SgX.js";
+import { n as types_exports, t as Chip } from "./Chip-DzHP3iyU.js";
+import "./ErrorMessage-CGFZglzN.js";
+import { t as ChipList } from "./ChipList-Csyg7DJ2.js";
 import "./Loader-DUqRFMzl.js";
-import { t as Button } from "./Button-BgsYjAC1.js";
+import { t as Button } from "./Button-B8fUoKUH.js";
 import { t as IconButton } from "./IconButton-BkwXYUL1.js";
 import { n as MaskType, r as MaskModule, t as Locale } from "./MaskModule-ChyYaHh2.js";
-import { t as Input } from "./Input-Dam9Lbxf.js";
-import { n as types_exports$4, t as Select } from "./Select-BR9OSXHF.js";
-import { t as TextArea } from "./TextArea-D9kGofdD.js";
-import { n as types_exports$1, t as ColorPicker } from "./ColorPicker-BVmUDE-h.js";
+import { t as Input } from "./Input-CYBXA7Ju.js";
+import { n as types_exports$4, t as Select } from "./Select-hia3M0E1.js";
+import { t as TextArea } from "./TextArea-B0rRWXsg.js";
+import { n as types_exports$1, t as ColorPicker } from "./ColorPicker-DSGLaSWK.js";
 import { t as Skeleton } from "./Skeleton-iCdZ2Gai.js";
 import { useVirtualAnchor } from "./use-virtual-anchor.js";
-import { t as Breadcrumb } from "./Breadcrumb-Bm9YuwCq.js";
+import { t as Breadcrumb } from "./Breadcrumb-Bxd_E7ov.js";
 
 export { BasePopover, Breadcrumb, Button, CheckItem, Checkbox, Chip, ChipList, types_exports as ChipTypes, ColorPicker, types_exports$1 as ColorPickerTypes, ContextMenu, types_exports$2 as ContextMenuTypes, IconButton, InfoSummary, Input, Locale, MaskModule, MaskType, Popover, types_exports$3 as PopoverTypes, Select, types_exports$4 as SelectTypes, Skeleton, Switch, TabSwitch, TextArea, ThemeProvider, Typography, useDismiss, useFloating, useTheme, useVirtualAnchor };

package/dist/info-summary.js

@@ -1,5 +1,5 @@
 import "./useThemedStyles-CV4ryZLN.js";
-import "./Typography-BTJk47bm.js";
-import { t as InfoSummary } from "./InfoSummary-p7hgSIZn.js";
+import "./Typography-gvXwbYdT.js";
+import { t as InfoSummary } from "./InfoSummary-BVOiGuug.js";
 
 export { InfoSummary };

package/dist/input.js

@@ -1,8 +1,8 @@
 import "./useThemedStyles-CV4ryZLN.js";
 import "./Icon-CV5fAqK7.js";
-import "./Typography-BTJk47bm.js";
-import "./ErrorMessage-BRnYfudz.js";
+import "./Typography-gvXwbYdT.js";
+import "./ErrorMessage-CGFZglzN.js";
 import "./MaskModule-ChyYaHh2.js";
-import { t as Input } from "./Input-Dam9Lbxf.js";
+import { t as Input } from "./Input-CYBXA7Ju.js";
 
 export { Input };

package/dist/select.js

@@ -3,10 +3,10 @@ import "./useDismiss-w2spkFNN.js";
 import "./useFloating-BkMrolmn.js";
 import "./Popover-tzAZp6V7.js";
 import "./Icon-CV5fAqK7.js";
-import "./Typography-BTJk47bm.js";
+import "./Typography-gvXwbYdT.js";
 import "./BasePopover-m1OfX3fO.js";
-import "./ErrorMessage-BRnYfudz.js";
+import "./ErrorMessage-CGFZglzN.js";
 import "./Loader-DUqRFMzl.js";
-import { n as types_exports, t as Select } from "./Select-BR9OSXHF.js";
+import { n as types_exports, t as Select } from "./Select-hia3M0E1.js";
 
 export { Select, types_exports as SelectTypes };

package/dist/tab-switch.d.ts

@@ -1,2 +1,2 @@
-import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-B-f7Shgf.js";
+import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-BZ2ZYR1Y.js";
 export { SwitchOption, TabSwitch, TabSwitchProps };

package/dist/tab-switch.js

@@ -1,5 +1,5 @@
 import "./useThemedStyles-CV4ryZLN.js";
-import "./Typography-BTJk47bm.js";
-import { t as TabSwitch } from "./TabSwitch-D6KaP0z5.js";
+import "./Typography-gvXwbYdT.js";
+import { t as TabSwitch } from "./TabSwitch-CAxR1ipv.js";
 
 export { TabSwitch };

package/dist/text-area.d.ts

@@ -1,2 +1,2 @@
-import { t as TextArea } from "./index-BdXsHz33.js";
+import { t as TextArea } from "./index-CehwJRt_.js";
 export { TextArea };

package/dist/text-area.js

@@ -1,6 +1,6 @@
 import "./useThemedStyles-CV4ryZLN.js";
-import "./Typography-BTJk47bm.js";
-import "./ErrorMessage-BRnYfudz.js";
-import { t as TextArea } from "./TextArea-D9kGofdD.js";
+import "./Typography-gvXwbYdT.js";
+import "./ErrorMessage-CGFZglzN.js";
+import { t as TextArea } from "./TextArea-B0rRWXsg.js";
 
 export { TextArea };

package/dist/theme-context.d.ts

@@ -1,2 +1,2 @@
-import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-CJDqp_om.js";
+import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-Bg-qBbvL.js";
 export { ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, useTheme };

package/dist/{types-n-gj1UXJ.d.ts → types-oQ4y-S7G.d.ts}

@@ -1,38 +1,44 @@
 import { a as TextProps, r as MarginProps } from "./styleProps-CrD6h1FM.js";
 import { i as TypeStyles, t as SlotStyle } from "./useThemedStyles-0XwrILh9.js";
-import { ElementType, ReactNode } from "react";
+import { ElementType, PropsWithChildren } from "react";
 
 //#region src/components/commons/toolkit/Typography/style.d.ts
 declare function createTypographyStyles(props: TypographyProps): {
-  base: {
-    display: "flex";
-    flexDirection: "row";
-    alignItems: "center";
-    borderBottom: string;
-    gap: number;
-    animation: "animate-pulse 1.5s infinite" | undefined;
-  };
   loading: {
     width: string;
-    height: string;
     display: "inline-block";
-    backgroundColor: "var(--pixel-gray-300, #d1d5db)";
     borderRadius: string;
+    background: string;
+    backgroundSize: string;
+    animation: "gradient 3s ease infinite";
+    color: "transparent";
+    __keyframes: {
+      gradient: {
+        '0%': {
+          backgroundPosition: string;
+        };
+        '50%': {
+          backgroundPosition: string;
+        };
+        '100%': {
+          backgroundPosition: string;
+        };
+      };
+    };
   };
   text: SlotStyle;
 };
 //#endregion
 //#region src/components/commons/toolkit/Typography/types.d.ts
-interface TypographyProps extends TextProps, MarginProps {
+interface TypographyProps extends TextProps, MarginProps, PropsWithChildren {
   variant: TypographyVariant;
   id?: string;
   href?: string;
   as?: ElementType;
-  children: ReactNode;
   align?: TextAlign;
   color?: string;
   isLoading?: boolean;
-  placeholder?: string;
+  placeholderSize?: number;
   className?: string;
   styles?: TypeStyles<typeof createTypographyStyles>;
 }
@@ -40,4 +46,4 @@ type TextAlign = 'left' | 'center' | 'right' | 'justify';
 type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'caption' | 'legal';
 //#endregion
 export { TypographyVariant as n, TypographyProps as t };
-//# sourceMappingURL=types-n-gj1UXJ.d.ts.map
+//# sourceMappingURL=types-oQ4y-S7G.d.ts.map

package/dist/typography.d.ts

@@ -1,8 +1,8 @@
-import { t as TypographyProps } from "./types-n-gj1UXJ.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { t as TypographyProps } from "./types-oQ4y-S7G.js";
+import React from "react";
 
 //#region src/components/commons/toolkit/Typography/index.d.ts
-declare function Typography(props: TypographyProps): react_jsx_runtime0.JSX.Element;
+declare const Typography: React.FC<TypographyProps>;
 //#endregion
 export { Typography };
 //# sourceMappingURL=typography.d.ts.map

package/dist/typography.js

@@ -1,4 +1,4 @@
 import "./useThemedStyles-CV4ryZLN.js";
-import { t as Typography } from "./Typography-BTJk47bm.js";
+import { t as Typography } from "./Typography-gvXwbYdT.js";
 
 export { Typography };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softable-pixels-web",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "",
   "keywords": [],
   "author": "softable",

package/dist/Typography-BTJk47bm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Typography-BTJk47bm.js","names":["typographyVariants: Record<TypographyVariant, SlotStyle>","variantToElement: Record<\n  TypographyVariant,\n  keyof JSX.IntrinsicElements\n>","alignText: Record<TextAlign, SlotStyle>"],"sources":["../src/components/commons/toolkit/Typography/config.ts","../src/components/commons/toolkit/Typography/style.ts","../src/components/commons/toolkit/Typography/index.tsx"],"sourcesContent":["// External Libraries\nimport type { JSX } from 'react'\n\n// Types\nimport type { TextAlign, TypographyVariant } from './types'\nimport { type SlotStyle, WEIGHTS } from '@hooks/useThemedStyles/types'\n\nconst primaryColor = 'var(--px-text-primary)'\nconst secondaryColor = 'var(--px-text-secondary)'\n\nexport const typographyVariants: Record<TypographyVariant, SlotStyle> = {\n  h1: {\n    fontSize: '3rem',\n    fontWeight: '700',\n    lineHeight: WEIGHTS.bold,\n    color: primaryColor\n  },\n  h2: {\n    fontSize: '2.25rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(2.5 / 2.25)',\n    color: primaryColor\n  },\n  h3: {\n    fontSize: '1.875rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(2.25 / 1.875)',\n    color: primaryColor\n  },\n  h4: {\n    fontSize: '1.5rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(2 / 1.5)',\n    color: primaryColor\n  },\n  h5: {\n    fontSize: '1.25rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(1.75 / 1.25)',\n    color: primaryColor\n  },\n  b1: {\n    fontSize: '1rem',\n    fontWeight: WEIGHTS.medium,\n    lineHeight: '1.5',\n    color: primaryColor\n  },\n  b2: {\n    fontSize: '0.875rem',\n    fontWeight: WEIGHTS.medium,\n    lineHeight: 'calc(1.25 / 0.875)',\n    color: secondaryColor\n  },\n  b3: {\n    fontSize: '0.75rem',\n    fontWeight: WEIGHTS.medium,\n    lineHeight: 'calc(1 / 0.75)',\n    color: secondaryColor\n  },\n  caption: {\n    fontSize: '0.65rem',\n    fontWeight: WEIGHTS.regular,\n    lineHeight: 'calc(1 / 0.65)',\n    color: secondaryColor\n  },\n  legal: {\n    fontSize: '0.65rem',\n    lineHeight: 'calc(1 / 0.65)',\n    fontWeight: WEIGHTS.light,\n    textTransform: 'uppercase',\n    letterSpacing: '0.025em',\n    color: secondaryColor\n  }\n}\n\nexport const variantToElement: Record<\n  TypographyVariant,\n  keyof JSX.IntrinsicElements\n> = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  b1: 'p',\n  b2: 'p',\n  b3: 'p',\n  caption: 'span',\n  legal: 'span'\n}\n\nexport const alignText: Record<TextAlign, SlotStyle> = {\n  left: { textAlign: 'left' },\n  center: { textAlign: 'center' },\n  right: { textAlign: 'right' },\n  justify: { textAlign: 'justify' }\n}\n","// Utils\nimport { alignText, typographyVariants } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\nimport { type SlotStyle, styled } from '@hooks/useThemedStyles/types'\n\nexport function createTypographyStyles(props: TypographyProps) {\n  const { isLoading, variant, align = 'left', color } = props\n\n  return styled({\n    base: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      borderBottom: '1px solid var(--pixel-border, #e5e7eb)',\n      gap: 0,\n      animation: isLoading ? 'animate-pulse 1.5s infinite' : undefined\n    },\n\n    loading: {\n      width: '50%',\n      height: '1em',\n      display: 'inline-block',\n      backgroundColor: 'var(--pixel-gray-300, #d1d5db)',\n      borderRadius: '0.25rem'\n    },\n\n    text: {\n      ...alignText[align],\n      ...typographyVariants[variant],\n      color: color ?? typographyVariants[variant].color\n    } as SlotStyle\n  })\n}\n","// Utils\nimport { variantToElement } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTypographyStyles } from './style'\n\nexport function Typography(props: TypographyProps) {\n  const {\n    id,\n    as,\n    href,\n    variant,\n    children,\n    className,\n    placeholder,\n    isLoading = false,\n    styles: styleTypography\n  } = props\n\n  const { styles } = useThemedStyles(props, createTypographyStyles, {\n    pick: p => [p.isLoading, p.variant, p.align, p.color],\n    commonSlot: 'text',\n    applyCommonProps: true,\n    override: styleTypography\n  })\n\n  const Component = as ?? variantToElement[variant]\n\n  if (isLoading) {\n    return (\n      <span\n        id={id}\n        aria-hidden=\"true\"\n        role=\"presentation\"\n        style={{ ...styles.text, ...styles.loading }}\n      />\n    )\n  }\n\n  const sharedProps = {\n    id,\n    style: styles.text,\n    'aria-label': placeholder,\n    className\n  }\n\n  if (href) {\n    return (\n      <a href={href} {...sharedProps}>\n        {children}\n      </a>\n    )\n  }\n\n  return <Component {...sharedProps}>{children}</Component>\n}\n"],"mappings":";;;;AAOA,MAAM,eAAe;AACrB,MAAM,iBAAiB;AAEvB,MAAaA,qBAA2D;CACtE,IAAI;EACF,UAAU;EACV,YAAY;EACZ,YAAY,QAAQ;EACpB,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,SAAS;EACP,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,OAAO;EACL,UAAU;EACV,YAAY;EACZ,YAAY,QAAQ;EACpB,eAAe;EACf,eAAe;EACf,OAAO;EACR;CACF;AAED,MAAaC,mBAGT;CACF,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,OAAO;CACR;AAED,MAAaC,YAA0C;CACrD,MAAM,EAAE,WAAW,QAAQ;CAC3B,QAAQ,EAAE,WAAW,UAAU;CAC/B,OAAO,EAAE,WAAW,SAAS;CAC7B,SAAS,EAAE,WAAW,WAAW;CAClC;;;;ACzFD,SAAgB,uBAAuB,OAAwB;CAC7D,MAAM,EAAE,WAAW,SAAS,QAAQ,QAAQ,UAAU;AAEtD,QAAO,OAAO;EACZ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,YAAY;GACZ,cAAc;GACd,KAAK;GACL,WAAW,YAAY,gCAAgC;GACxD;EAED,SAAS;GACP,OAAO;GACP,QAAQ;GACR,SAAS;GACT,iBAAiB;GACjB,cAAc;GACf;EAED,MAAM;GACJ,GAAG,UAAU;GACb,GAAG,mBAAmB;GACtB,OAAO,SAAS,mBAAmB,SAAS;GAC7C;EACF,CAAC;;;;;ACrBJ,SAAgB,WAAW,OAAwB;CACjD,MAAM,EACJ,IACA,IACA,MACA,SACA,UACA,WACA,aACA,YAAY,OACZ,QAAQ,oBACN;CAEJ,MAAM,EAAE,WAAW,gBAAgB,OAAO,wBAAwB;EAChE,OAAM,MAAK;GAAC,EAAE;GAAW,EAAE;GAAS,EAAE;GAAO,EAAE;GAAM;EACrD,YAAY;EACZ,kBAAkB;EAClB,UAAU;EACX,CAAC;CAEF,MAAM,YAAY,MAAM,iBAAiB;AAEzC,KAAI,UACF,QACE,oBAAC;EACK;EACJ,eAAY;EACZ,MAAK;EACL,OAAO;GAAE,GAAG,OAAO;GAAM,GAAG,OAAO;GAAS;GAC5C;CAIN,MAAM,cAAc;EAClB;EACA,OAAO,OAAO;EACd,cAAc;EACd;EACD;AAED,KAAI,KACF,QACE,oBAAC;EAAQ;EAAM,GAAI;EAChB;GACC;AAIR,QAAO,oBAAC;EAAU,GAAI;EAAc;GAAqB"}