thread-ui 0.9.0 → 0.10.0

package/dist/theme/default-theme.js

@@ -80,6 +80,16 @@ export const DefaultThreadTheme = {
         xl: '1280',
         xxl: '1536',
     },
+    spacing: {
+        none: '0px',
+        xxs: '4px',
+        xs: '8px',
+        sm: '12px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+        xxl: '40px',
+    },
     zIndex: {
         base: '0',
         sticky: '100',
@@ -99,6 +109,48 @@ export const DefaultThreadTheme = {
         md: '1px',
         lg: '1.5px',
     },
+    // Typograpghy
+    typography: {
+        fontFamilies: {
+            body: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+            heading: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
+            mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+        },
+        fontSizes: {
+            heading: {
+                sm: '1.25rem', // H3
+                md: '1.5rem', // H2
+                lg: '2rem', // H1
+                xl: '3rem', // Title
+            },
+            body: {
+                xxs: '0.625rem',
+                xs: '0.75rem',
+                sm: '0.875rem',
+                md: '1rem', // body default
+                lg: '1.125rem',
+                xl: '1.25rem', // caps at heading.sm
+            },
+        },
+        fontWeights: {
+            regular: '400',
+            medium: '500',
+            semibold: '600',
+            bold: '700',
+        },
+        lineHeights: {
+            tighter: '1.1', // hero/display - very large text only
+            tight: '1.3', // headings (current value)
+            normal: '1.5', // body (current value, W3C standard)
+            loose: '1.7', // long-form reading
+            looser: '2.0', // callouts, marketing copy
+        },
+        letterSpacings: {
+            tight: '-0.02em', // display tightening
+            normal: '0', // default
+            wide: '0.05em', // labels, all-caps, eyebrows
+        },
+    },
     // Dark Mode Colors
     darkMode: {
         // Dark Mode Surface Colors

package/dist/theme/default-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-theme.js","sourceRoot":"","sources":["../../src/theme/default-theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"default-theme.js","sourceRoot":"","sources":["../../src/theme/default-theme.ts"],"names":[],"mappings":"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"}

package/dist/theme/index.d.ts

@@ -2,3 +2,4 @@ export { ThreadTheme } from './thread-theme';
 export { ThreadScript } from './thread-script';
 export { ThemeProvider, useThemeMode } from './theme-provider';
 export { SurfaceLayerMap } from './theme-surface-system';
+export { TypographyRoles } from './theme-typography-system';

package/dist/theme/index.js

@@ -2,4 +2,5 @@ export { ThreadTheme } from './thread-theme';
 export { ThreadScript } from './thread-script';
 export { ThemeProvider, useThemeMode } from './theme-provider';
 export { SurfaceLayerMap } from './theme-surface-system';
+export { TypographyRoles } from './theme-typography-system';
 //# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/theme/theme-typography-system.d.ts

@@ -0,0 +1,10 @@
+import { CompleteFontSizeOptions, FontFamilyOptions, FontWeightOptions, LetterSpacingOptions, LineHeightOptions, SpacingScaleOptions, TypographyRoleOptions } from '../types';
+export type TypographyRole = {
+    fontFamily: FontFamilyOptions;
+    fontSize: CompleteFontSizeOptions;
+    fontWeight: FontWeightOptions;
+    lineHeight: LineHeightOptions;
+    letterSpacing: LetterSpacingOptions;
+    marginBottom: SpacingScaleOptions;
+};
+export declare const TypographyRoles: Record<TypographyRoleOptions, TypographyRole>;

package/dist/theme/theme-typography-system.js

@@ -0,0 +1,51 @@
+export const TypographyRoles = {
+    title: {
+        fontFamily: 'heading',
+        fontSize: 'heading.xl',
+        fontWeight: 'bold',
+        lineHeight: 'tight',
+        letterSpacing: 'tight',
+        marginBottom: 'xxl',
+    },
+    h1: {
+        fontFamily: 'heading',
+        fontSize: 'heading.lg',
+        fontWeight: 'bold',
+        lineHeight: 'tight',
+        letterSpacing: 'normal',
+        marginBottom: 'xl',
+    },
+    h2: {
+        fontFamily: 'heading',
+        fontSize: 'heading.md',
+        fontWeight: 'bold',
+        lineHeight: 'tight',
+        letterSpacing: 'normal',
+        marginBottom: 'lg',
+    },
+    h3: {
+        fontFamily: 'heading',
+        fontSize: 'heading.sm',
+        fontWeight: 'bold',
+        lineHeight: 'tight',
+        letterSpacing: 'normal',
+        marginBottom: 'md',
+    },
+    body: {
+        fontFamily: 'body',
+        fontSize: 'body.md',
+        fontWeight: 'regular',
+        lineHeight: 'normal',
+        letterSpacing: 'normal',
+        marginBottom: 'sm',
+    },
+    code: {
+        fontFamily: 'mono',
+        fontSize: 'body.sm',
+        fontWeight: 'regular',
+        lineHeight: 'normal',
+        letterSpacing: 'normal',
+        marginBottom: 'none',
+    },
+};
+//# sourceMappingURL=theme-typography-system.js.map

package/dist/theme/theme-typography-system.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-typography-system.js","sourceRoot":"","sources":["../../src/theme/theme-typography-system.ts"],"names":[],"mappings":"AAmBA,MAAM,CAAC,MAAM,eAAe,GAAkD;IAC7E,KAAK,EAAE;QACN,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,YAAY;QACtB,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,OAAO;QACnB,aAAa,EAAE,OAAO;QACtB,YAAY,EAAE,KAAK;KACnB;IACD,EAAE,EAAE;QACH,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,YAAY;QACtB,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,OAAO;QACnB,aAAa,EAAE,QAAQ;QACvB,YAAY,EAAE,IAAI;KAClB;IACD,EAAE,EAAE;QACH,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,YAAY;QACtB,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,OAAO;QACnB,aAAa,EAAE,QAAQ;QACvB,YAAY,EAAE,IAAI;KAClB;IACD,EAAE,EAAE;QACH,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,YAAY;QACtB,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,OAAO;QACnB,aAAa,EAAE,QAAQ;QACvB,YAAY,EAAE,IAAI;KAClB;IACD,IAAI,EAAE;QACL,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,QAAQ;QACvB,YAAY,EAAE,IAAI;KAClB;IACD,IAAI,EAAE;QACL,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,QAAQ;QACvB,YAAY,EAAE,MAAM;KACpB;CACD,CAAC"}

package/dist/types/theme/theme.types.d.ts

@@ -24,20 +24,28 @@ export type UtilitySizes = {
 };
 /** Key union of the base size scale */
 export type UtilitySizeOptions = Prettify<keyof UtilitySizes>;
-type ExpandedSmallOptions = {
-    xxs: string;
+type ExtendedSmallSizes = {
     xs: string;
 };
-type ExpandedLargeOptions = {
+type FullSmallSizes = ExtendedSmallSizes & {
+    xxs: string;
+};
+type ExtendedLargeSizes = {
     xl: string;
+};
+type FullLargeSizes = ExtendedLargeSizes & {
     xxl: string;
 };
-/** Full size scale including sub-small and extra-large steps */
-export type ExpandedUtilitySizes = Prettify<ExpandedSmallOptions & UtilitySizes & ExpandedLargeOptions>;
+/** Extended size scale including extra small and extra large steps */
+export type ExtendedUtilitySizes = Prettify<ExtendedSmallSizes & UtilitySizes & ExtendedLargeSizes>;
+/** Key union of the extended size scale */
+export type ExtendedUtilitySizesOptions = Prettify<keyof ExtendedUtilitySizes>;
+/** Full size scale including extra-extra small and extra-extra large steps */
+export type FullUtilitySizes = Prettify<FullSmallSizes & UtilitySizes & FullLargeSizes>;
 /** Key union of the full expanded size scale */
-export type ExpandedUtilitySizeOptions = Prettify<keyof ExpandedUtilitySizes>;
+export type FullUtilitySizeOptions = Prettify<keyof FullUtilitySizes>;
 /** Size scale extended with responsive breakpoint steps */
-export type BreakpointOptions = Omit<ExpandedUtilitySizes, keyof ExpandedSmallOptions>;
+export type BreakpointOptions = Omit<FullUtilitySizes, keyof FullSmallSizes>;
 /** Surface Hierarchy and Layer Colors */
 export type SurfaceColors = {
     canvas: string;
@@ -110,8 +118,81 @@ export type NeutralPalette = {
     black: string;
     gray: ColorShades;
 };
+/** Font family stacks for heading, body, and monospace text */
+export type FontFamilies = {
+    body: string;
+    heading: string;
+    mono: string;
+};
+/** Font Family Options */
+export type FontFamilyOptions = Prettify<keyof FontFamilies>;
+/** Body text size scale */
+export type BodyFontSizes = Prettify<FullSmallSizes & UtilitySizes & ExtendedLargeSizes>;
+/** Key union of body font size steps */
+export type BodyFontSizeOptions = Prettify<keyof BodyFontSizes>;
+/** Heading size scale (1.25rem → 3rem) */
+export type HeadingFontSizes = Prettify<UtilitySizes & ExtendedLargeSizes>;
+/** Key union of heading font size steps */
+export type HeadingFontSizeOptions = Prettify<keyof HeadingFontSizes>;
+/** Standard Theme Spacing Scale */
+export type SpacingScale = Prettify<{
+    none: string;
+} & FullUtilitySizes>;
+/** Em-based margin ratios for typography roles */
+export type SpacingScaleOptions = Prettify<keyof SpacingScale>;
+/** Combined font size scales */
+export type ThemeFontSizes = Prettify<{
+    heading: HeadingFontSizes;
+    body: BodyFontSizes;
+}>;
+/** Dot-notation keys for all font sizes (e.g. "heading.sm" | "body.xs") */
+export type CompleteFontSizeOptions = {
+    [K in keyof ThemeFontSizes]: `${K & string}.${keyof ThemeFontSizes[K] & string}`;
+}[keyof ThemeFontSizes];
+/** Font weight scale */
+export type FontWeights = {
+    regular: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+};
+/** Key union of font weight options */
+export type FontWeightOptions = Prettify<keyof FontWeights>;
+/** Line height scale */
+export type LineHeights = {
+    tighter: string;
+    tight: string;
+    normal: string;
+    loose: string;
+    looser: string;
+};
+/** Key union of line height steps */
+export type LineHeightOptions = Prettify<keyof LineHeights>;
+/** Letter spacing scale */
+export type LetterSpacings = {
+    tight: string;
+    normal: string;
+    wide: string;
+};
+/** Key union of letter spacing steps */
+export type LetterSpacingOptions = Prettify<keyof LetterSpacings>;
+/** Typography Heading Role Options */
+export type HeadingRoleOptions = 'title' | 'h1' | 'h2' | 'h3';
+/** Typography Body Role Options */
+export type BodyRoleOptions = 'body' | 'code';
+/** Typography Roles  */
+export type TypographyRoleOptions = Prettify<HeadingRoleOptions | BodyRoleOptions>;
+/** Typography Configurations */
+export type TypographyConfiguration = Prettify<{
+    fontFamilies: FontFamilies;
+    fontSizes: ThemeFontSizes;
+    fontWeights: FontWeights;
+    lineHeights: LineHeights;
+    letterSpacings: LetterSpacings;
+}>;
 /** Theme Layout Configuration */
 export type ThemeLayout = {
+    spacing: SpacingScale;
     breakpoints: BreakpointOptions;
 };
 /** Base Border Configuration */
@@ -123,6 +204,7 @@ export type ThemeBorders = {
 export type Theme = Prettify<ThemePalette & StatusPalette & NeutralPalette & ThemeLayout & ThemeBorders & ScrimColors & ModeColors & {
     zIndex: ZIndexScale;
     shadow: ShadowScale;
+    typography: TypographyConfiguration;
 }>;
 /** Complete theme including dark mode surface and text overrides */
 export type ThemeConfigFull = Prettify<Theme & {

package/dist/utils/theme-utilities/get-resolved-typography-values/get-resolved-typography-values.d.ts

@@ -0,0 +1,12 @@
+import { TypographyRole } from '../../../theme/theme-typography-system';
+import { CompleteFontSizeOptions, FontFamilyOptions, FontWeightOptions, LetterSpacingOptions, LineHeightOptions, SpacingScaleOptions, TypographyRoleOptions } from '../../../types';
+export type ResolvedTypographyValuesProps = {
+    role: TypographyRoleOptions;
+    fontFamily?: FontFamilyOptions;
+    fontSize?: CompleteFontSizeOptions;
+    fontWeight?: FontWeightOptions;
+    lineHeight?: LineHeightOptions;
+    letterSpacing?: LetterSpacingOptions;
+    marginBottom?: SpacingScaleOptions;
+};
+export declare const getResolvedTypographyValues: ({ role, fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, marginBottom, }: ResolvedTypographyValuesProps) => TypographyRole;

package/dist/utils/theme-utilities/get-resolved-typography-values/get-resolved-typography-values.js

@@ -0,0 +1,13 @@
+import { TypographyRoles } from '../../../theme/theme-typography-system';
+export const getResolvedTypographyValues = ({ role, fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, marginBottom, }) => {
+    const defaults = TypographyRoles[role];
+    return {
+        fontFamily: fontFamily ?? defaults.fontFamily,
+        fontSize: fontSize ?? defaults.fontSize,
+        fontWeight: fontWeight ?? defaults.fontWeight,
+        lineHeight: lineHeight ?? defaults.lineHeight,
+        letterSpacing: letterSpacing ?? defaults.letterSpacing,
+        marginBottom: marginBottom ?? defaults.marginBottom,
+    };
+};
+//# sourceMappingURL=get-resolved-typography-values.js.map

package/dist/utils/theme-utilities/get-resolved-typography-values/get-resolved-typography-values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-resolved-typography-values.js","sourceRoot":"","sources":["../../../../src/utils/theme-utilities/get-resolved-typography-values/get-resolved-typography-values.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAqBlF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAC3C,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,UAAU,EACV,UAAU,EACV,aAAa,EACb,YAAY,GACmB,EAAkB,EAAE;IACnD,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAEvC,OAAO;QACN,UAAU,EAAE,UAAU,IAAI,QAAQ,CAAC,UAAU;QAC7C,QAAQ,EAAE,QAAQ,IAAI,QAAQ,CAAC,QAAQ;QACvC,UAAU,EAAE,UAAU,IAAI,QAAQ,CAAC,UAAU;QAC7C,UAAU,EAAE,UAAU,IAAI,QAAQ,CAAC,UAAU;QAC7C,aAAa,EAAE,aAAa,IAAI,QAAQ,CAAC,aAAa;QACtD,YAAY,EAAE,YAAY,IAAI,QAAQ,CAAC,YAAY;KACnD,CAAC;AACH,CAAC,CAAC"}

package/dist/utils/theme-utilities/get-resolved-typography-values/index.d.ts

@@ -0,0 +1 @@
+export * from './get-resolved-typography-values';

package/dist/utils/theme-utilities/get-resolved-typography-values/index.js

@@ -0,0 +1,2 @@
+export * from './get-resolved-typography-values';
+//# sourceMappingURL=index.js.map

package/dist/utils/theme-utilities/get-resolved-typography-values/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/utils/theme-utilities/get-resolved-typography-values/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}

package/dist/utils/theme-utilities/get-text-color-styles/get-text-color-styles.d.ts

@@ -0,0 +1,11 @@
+import { ColoredTextOptions } from '../../../types';
+/**
+ * Typography color CVA. Maps `ColoredTextOptions` values to Panda semantic text color tokens.
+ *
+ * Variant keys mirror the semantic text token names plus any color-shade aliases used
+ * across the system. Update this when `ColoredTextOptions` changes.
+ *
+ * @example
+ * <p className={getTextColorStyles({ color: 'secondary' })}>...</p>
+ */
+export declare const getTextColorStyles: (color: ColoredTextOptions) => string;

package/dist/utils/theme-utilities/get-text-color-styles/get-text-color-styles.js

@@ -0,0 +1,34 @@
+import { cva } from '../../../styled-system/css';
+const styles = cva({
+    variants: {
+        color: {
+            standard: { color: 'text.standard' },
+            'text-secondary': { color: 'text.secondary' },
+            disabled: { color: 'text.disabled' },
+            accent: { color: 'text.accent' },
+            inverted: { color: 'text.inverted' },
+            black: { color: 'black' },
+            primary: { color: 'primary.main' },
+            secondary: { color: 'secondary.main' },
+            tertiary: { color: 'tertiary.main' },
+            gray: { color: 'gray.main' },
+            success: { color: 'success.main' },
+            info: { color: 'info.main' },
+            error: { color: 'error.main' },
+            warning: { color: 'warning.main' },
+        },
+    },
+});
+/**
+ * Typography color CVA. Maps `ColoredTextOptions` values to Panda semantic text color tokens.
+ *
+ * Variant keys mirror the semantic text token names plus any color-shade aliases used
+ * across the system. Update this when `ColoredTextOptions` changes.
+ *
+ * @example
+ * <p className={getTextColorStyles({ color: 'secondary' })}>...</p>
+ */
+export const getTextColorStyles = (color) => {
+    return styles({ color });
+};
+//# sourceMappingURL=get-text-color-styles.js.map

package/dist/utils/theme-utilities/get-text-color-styles/get-text-color-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-text-color-styles.js","sourceRoot":"","sources":["../../../../src/utils/theme-utilities/get-text-color-styles/get-text-color-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAG1C,MAAM,MAAM,GAAG,GAAG,CAAC;IAClB,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,QAAQ,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE;YACpC,gBAAgB,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE;YAC7C,QAAQ,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE;YACpC,MAAM,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE;YAChC,QAAQ,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE;YACpC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;YACzB,OAAO,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE;YAClC,SAAS,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE;YACtC,QAAQ,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE;YACpC,IAAI,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE;YAC5B,OAAO,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE;YAClC,IAAI,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE;YAC5B,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE;YAC9B,OAAO,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE;SAClC;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAyB,EAAE,EAAE;IAC/D,OAAO,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;AAC1B,CAAC,CAAC"}

package/dist/utils/theme-utilities/get-text-color-styles/index.d.ts

@@ -0,0 +1 @@
+export * from './get-text-color-styles';

package/dist/utils/theme-utilities/get-text-color-styles/index.js

@@ -0,0 +1,2 @@
+export * from './get-text-color-styles';
+//# sourceMappingURL=index.js.map

package/dist/utils/theme-utilities/get-text-color-styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/utils/theme-utilities/get-text-color-styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/dist/utils/theme-utilities/index.d.ts

@@ -5,3 +5,5 @@ export * from './get-utility-font-size';
 export * from './get-utility-icon-size';
 export * from './get-utility-size-value';
 export * from './get-resolved-layer-values';
+export * from './get-resolved-typography-values';
+export * from './get-text-color-styles';

package/dist/utils/theme-utilities/index.js

@@ -5,4 +5,6 @@ export * from './get-utility-font-size';
 export * from './get-utility-icon-size';
 export * from './get-utility-size-value';
 export * from './get-resolved-layer-values';
+export * from './get-resolved-typography-values';
+export * from './get-text-color-styles';
 //# sourceMappingURL=index.js.map

package/dist/utils/theme-utilities/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/theme-utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/theme-utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thread-ui",
-	"version": "0.9.0",
+	"version": "0.10.0",
 	"author": "Andrew Fisher",
 	"description": "UI Library for React Applications.",
 	"license": "MIT",