@elliemae/ds-system 3.15.0 → 3.16.0-next.10

package/dist/cjs/ds-styled/attributes.js

@@ -28,7 +28,7 @@ __export(attributes_exports, {
 });
 module.exports = __toCommonJS(attributes_exports);
 var React = __toESM(require("react"));
-var import_utilities = require("./utilities");
+var import_utilities = require("./utilities/index.js");
 const generateAttributes = (displayName) => {
   const generator = (props) => {
     const attributes = {};

package/dist/cjs/ds-styled/attributes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/ds-styled/attributes.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSStyledConfig } from './types';\nimport type { StyledComponentInnerComponent, StyledComponentPropsWithRef } from 'styled-components';\nimport { displayNameToKebabCase } from './utilities';\n\ntype AttrsFunc = (\n  props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<Record<string, unknown>>>>,\n) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;\n\nconst generateAttributes = (displayName: string | null): AttrsFunc => {\n  const generator: AttrsFunc = (props) => {\n    const attributes: ReturnType<AttrsFunc> = {};\n    if (displayName) {\n      // We add the className, useful for variants\n      attributes.className = displayName;\n\n      // We add an autocalculated data-testid if not present\n      attributes['data-testid'] = (props['data-testid'] as string) ?? displayNameToKebabCase(displayName);\n    }\n    return attributes;\n  };\n  return generator;\n};\n\nexport const generateAutoCalculatedProperties = (options: DSStyledConfig) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;\n\n  const attributes = generateAttributes(displayName);\n\n  return { displayName, attributes };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSStyledConfig } from './types.js';\nimport type { StyledComponentInnerComponent, StyledComponentPropsWithRef } from 'styled-components';\nimport { displayNameToKebabCase } from './utilities/index.js';\n\ntype AttrsFunc = (\n  props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<Record<string, unknown>>>>,\n) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;\n\nconst generateAttributes = (displayName: string | null): AttrsFunc => {\n  const generator: AttrsFunc = (props) => {\n    const attributes: ReturnType<AttrsFunc> = {};\n    if (displayName) {\n      // We add the className, useful for variants\n      attributes.className = displayName;\n\n      // We add an autocalculated data-testid if not present\n      attributes['data-testid'] = (props['data-testid'] as string) ?? displayNameToKebabCase(displayName);\n    }\n    return attributes;\n  };\n  return generator;\n};\n\nexport const generateAutoCalculatedProperties = (options: DSStyledConfig) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;\n\n  const attributes = generateAttributes(displayName);\n\n  return { displayName, attributes };\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAuC;AAMvC,MAAM,qBAAqB,CAAC,gBAA0C;AACpE,QAAM,YAAuB,CAAC,UAAU;AACtC,UAAM,aAAoC,CAAC;AAC3C,QAAI,aAAa;AAEf,iBAAW,YAAY;AAGvB,iBAAW,iBAAkB,MAAM,sBAA6B,yCAAuB,WAAW;AAAA,IACpG;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,MAAM,mCAAmC,CAAC,YAA4B;AAC3E,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,QAAM,cAAc,kBAAkB,QAAQ,kBAAkB,OAAO,GAAG,iBAAiB,kBAAkB;AAE7G,QAAM,aAAa,mBAAmB,WAAW;AAEjD,SAAO,EAAE,aAAa,WAAW;AACnC;",
   "names": []
 }

package/dist/cjs/ds-styled/index.js

@@ -33,8 +33,8 @@ __export(ds_styled_exports, {
 });
 module.exports = __toCommonJS(ds_styled_exports);
 var React = __toESM(require("react"));
-__reExport(ds_styled_exports, require("./styled"), module.exports);
+__reExport(ds_styled_exports, require("./styled.js"), module.exports);
 var import_system = require("@xstyled/system");
-__reExport(ds_styled_exports, require("./utilities"), module.exports);
-__reExport(ds_styled_exports, require("./types"), module.exports);
+__reExport(ds_styled_exports, require("./utilities/index.js"), module.exports);
+__reExport(ds_styled_exports, require("./types.js"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/ds-styled/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/ds-styled/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './styled';\nexport { layout, flexboxes, grids, boxShadow as boxShadows, fontSize } from '@xstyled/system';\nexport * from './utilities';\nexport * from './types';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAc,qBAAd;AACA,oBAA4E;AAC5E,8BAAc,wBAFd;AAGA,8BAAc,oBAHd;",
+  "sourcesContent": ["export * from './styled.js';\nexport { layout, flexboxes, grids, boxShadow as boxShadows, fontSize } from '@xstyled/system';\nexport * from './utilities/index.js';\nexport * from './types.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAc,wBAAd;AACA,oBAA4E;AAC5E,8BAAc,iCAFd;AAGA,8BAAc,uBAHd;",
   "names": []
 }

package/dist/cjs/ds-styled/styled.js

@@ -32,8 +32,8 @@ module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_styled_components = require("@xstyled/styled-components");
 var import_system = require("@xstyled/system");
-var import_attributes = require("./attributes");
-var import_utilities = require("./utilities");
+var import_attributes = require("./attributes.js");
+var import_utilities = require("./utilities/index.js");
 const { css, styled: baseStyledComponent, createGlobalStyle } = (0, import_styled_components.createCss)((0, import_system.compose)(import_system.system));
 const styledFunction = (tag, options = { name: null, slot: null }) => {
   const { name: componentName, slot: componentSlot } = options;

package/dist/cjs/ds-styled/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/ds-styled/styled.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-ts-comment */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/unbound-method */\n/* eslint-disable complexity */\nimport { createCss } from '@xstyled/styled-components';\nimport { system, compose } from '@xstyled/system';\nimport { generateAutoCalculatedProperties } from './attributes';\nimport type { DSStyledFunction, DSStyledFunctionInternal, DSStyledObject, PropsWithTheme } from './types';\nimport {\n  checkNamingConvention,\n  coerceWithDefaultTheme,\n  getStyleOverrides,\n  magicCssTransform,\n  getVariantStyles,\n  stylesArgThemeCoercion,\n  variantsResolver,\n} from './utilities';\n\nconst { css, styled: baseStyledComponent, createGlobalStyle } = createCss(compose(system));\n\n// @ts-ignore\nconst styledFunction: DSStyledFunction = (tag, options = { name: null, slot: null }) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // @ts-ignore\n  const defaultStyledResolver = baseStyledComponent(tag);\n\n  const styledAttributes = {\n    attrs: defaultStyledResolver.attrs,\n    withConfig: defaultStyledResolver.withConfig,\n  };\n\n  // @ts-ignore\n  const dimsumStyledResolver: DSStyledFunctionInternal = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressions);\n\n    /*\n     * These are the internal expression written in dimsum\n     * We just coerce with the default theme in case users\n     * forget to add the ThemeProvider\n     */\n    const expressionsWithDefaultTheme = expressionsWithMagic ? expressionsWithMagic.map(stylesArgThemeCoercion) : [];\n\n    let transformedStyleArg = styleArgWithMagic;\n\n    /*\n     * Here we get the style overrides from the user\n     */\n    if (componentName && componentSlot) {\n      expressionsWithDefaultTheme.push((props: PropsWithTheme) => {\n        const theme = coerceWithDefaultTheme(props.theme);\n        const styleOverrides = getStyleOverrides(componentName, theme);\n        if (styleOverrides) {\n          return [styleOverrides[componentSlot]];\n        }\n        return null;\n      });\n    }\n\n    /*\n     * Here we get the variant overrides from the user (only for the root)\n     */\n    if (componentName && componentSlot === 'root') {\n      expressionsWithDefaultTheme.push((props: PropsWithTheme) => {\n        const theme = coerceWithDefaultTheme(props.theme);\n        return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);\n      });\n    }\n\n    // Here we will fix format of the style argument (since we added more things from the variants and overrides)\n    const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressionsWithMagic.length;\n\n    if (Array.isArray(styleArgWithMagic) && numOfCustomFnsApplied > 0) {\n      // Here we are adding placeholders for all the new functions that we are gonna call\n      const placeholders = new Array(numOfCustomFnsApplied).fill('') as string[];\n      transformedStyleArg = Object.assign([...styleArgWithMagic, ...placeholders], {\n        raw: [...(styleArgWithMagic as TemplateStringsArray).raw, ...placeholders],\n      });\n    } else if (typeof styleArgWithMagic === 'function') {\n      // Here we just coerce with the default theme\n      transformedStyleArg = (props: PropsWithTheme) =>\n        styleArgWithMagic({ ...props, theme: coerceWithDefaultTheme(props.theme) });\n    }\n\n    // We add autocalculated attributes to the styled component\n    const { displayName, attributes } = generateAutoCalculatedProperties(options);\n    const defaultStyledResolverWithClassName = defaultStyledResolver.attrs(attributes);\n\n    const Component = defaultStyledResolverWithClassName(transformedStyleArg, ...expressionsWithDefaultTheme);\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    return Component;\n  };\n\n  return Object.assign(dimsumStyledResolver, styledAttributes);\n};\n\n// Here we create an object with the IntrinsicElements keys pointing to the styledFunction\nconst styledObject = Object.keys(baseStyledComponent).reduce((obj, key) => {\n  const castedKey = key as keyof JSX.IntrinsicElements;\n  obj[castedKey] = styledFunction(castedKey);\n  return obj;\n}, {} as DSStyledObject);\n\nexport const styled = Object.assign(styledFunction, styledObject);\nexport { css, createGlobalStyle };\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-ts-comment */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/unbound-method */\n/* eslint-disable complexity */\nimport { createCss } from '@xstyled/styled-components';\nimport { system, compose } from '@xstyled/system';\nimport { generateAutoCalculatedProperties } from './attributes.js';\nimport type { DSStyledFunction, DSStyledFunctionInternal, DSStyledObject, PropsWithTheme } from './types.js';\nimport {\n  checkNamingConvention,\n  coerceWithDefaultTheme,\n  getStyleOverrides,\n  magicCssTransform,\n  getVariantStyles,\n  stylesArgThemeCoercion,\n  variantsResolver,\n} from './utilities/index.js';\n\nconst { css, styled: baseStyledComponent, createGlobalStyle } = createCss(compose(system));\n\n// @ts-ignore\nconst styledFunction: DSStyledFunction = (tag, options = { name: null, slot: null }) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // @ts-ignore\n  const defaultStyledResolver = baseStyledComponent(tag);\n\n  const styledAttributes = {\n    attrs: defaultStyledResolver.attrs,\n    withConfig: defaultStyledResolver.withConfig,\n  };\n\n  // @ts-ignore\n  const dimsumStyledResolver: DSStyledFunctionInternal = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressions);\n\n    /*\n     * These are the internal expression written in dimsum\n     * We just coerce with the default theme in case users\n     * forget to add the ThemeProvider\n     */\n    const expressionsWithDefaultTheme = expressionsWithMagic ? expressionsWithMagic.map(stylesArgThemeCoercion) : [];\n\n    let transformedStyleArg = styleArgWithMagic;\n\n    /*\n     * Here we get the style overrides from the user\n     */\n    if (componentName && componentSlot) {\n      expressionsWithDefaultTheme.push((props: PropsWithTheme) => {\n        const theme = coerceWithDefaultTheme(props.theme);\n        const styleOverrides = getStyleOverrides(componentName, theme);\n        if (styleOverrides) {\n          return [styleOverrides[componentSlot]];\n        }\n        return null;\n      });\n    }\n\n    /*\n     * Here we get the variant overrides from the user (only for the root)\n     */\n    if (componentName && componentSlot === 'root') {\n      expressionsWithDefaultTheme.push((props: PropsWithTheme) => {\n        const theme = coerceWithDefaultTheme(props.theme);\n        return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);\n      });\n    }\n\n    // Here we will fix format of the style argument (since we added more things from the variants and overrides)\n    const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressionsWithMagic.length;\n\n    if (Array.isArray(styleArgWithMagic) && numOfCustomFnsApplied > 0) {\n      // Here we are adding placeholders for all the new functions that we are gonna call\n      const placeholders = new Array(numOfCustomFnsApplied).fill('') as string[];\n      transformedStyleArg = Object.assign([...styleArgWithMagic, ...placeholders], {\n        raw: [...(styleArgWithMagic as TemplateStringsArray).raw, ...placeholders],\n      });\n    } else if (typeof styleArgWithMagic === 'function') {\n      // Here we just coerce with the default theme\n      transformedStyleArg = (props: PropsWithTheme) =>\n        styleArgWithMagic({ ...props, theme: coerceWithDefaultTheme(props.theme) });\n    }\n\n    // We add autocalculated attributes to the styled component\n    const { displayName, attributes } = generateAutoCalculatedProperties(options);\n    const defaultStyledResolverWithClassName = defaultStyledResolver.attrs(attributes);\n\n    const Component = defaultStyledResolverWithClassName(transformedStyleArg, ...expressionsWithDefaultTheme);\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    return Component;\n  };\n\n  return Object.assign(dimsumStyledResolver, styledAttributes);\n};\n\n// Here we create an object with the IntrinsicElements keys pointing to the styledFunction\nconst styledObject = Object.keys(baseStyledComponent).reduce((obj, key) => {\n  const castedKey = key as keyof JSX.IntrinsicElements;\n  obj[castedKey] = styledFunction(castedKey);\n  return obj;\n}, {} as DSStyledObject);\n\nexport const styled = Object.assign(styledFunction, styledObject);\nexport { css, createGlobalStyle };\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADMvB,+BAA0B;AAC1B,oBAAgC;AAChC,wBAAiD;AAEjD,uBAQO;AAEP,MAAM,EAAE,KAAK,QAAQ,qBAAqB,kBAAkB,QAAI,wCAAU,uBAAQ,oBAAM,CAAC;AAGzF,MAAM,iBAAmC,CAAC,KAAK,UAAU,EAAE,MAAM,MAAM,MAAM,KAAK,MAAM;AACtF,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,8CAAsB,eAAe,aAAa;AAGlD,QAAM,wBAAwB,oBAAoB,GAAG;AAErD,QAAM,mBAAmB;AAAA,IACvB,OAAO,sBAAsB;AAAA,IAC7B,YAAY,sBAAsB;AAAA,EACpC;AAGA,QAAM,uBAAiD,CAAC,aAAa,gBAAgB;AAInF,UAAM,CAAC,mBAAmB,oBAAoB,QAAI,oCAAkB,UAAU,WAAW;AAOzF,UAAM,8BAA8B,uBAAuB,qBAAqB,IAAI,uCAAsB,IAAI,CAAC;AAE/G,QAAI,sBAAsB;AAK1B,QAAI,iBAAiB,eAAe;AAClC,kCAA4B,KAAK,CAAC,UAA0B;AAC1D,cAAM,YAAQ,yCAAuB,MAAM,KAAK;AAChD,cAAM,qBAAiB,oCAAkB,eAAe,KAAK;AAC7D,YAAI,gBAAgB;AAClB,iBAAO,CAAC,eAAe,cAAc;AAAA,QACvC;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAKA,QAAI,iBAAiB,kBAAkB,QAAQ;AAC7C,kCAA4B,KAAK,CAAC,UAA0B;AAC1D,cAAM,YAAQ,yCAAuB,MAAM,KAAK;AAChD,mBAAO,mCAAiB,WAAO,mCAAiB,eAAe,KAAK,GAAG,OAAO,aAAa;AAAA,MAC7F,CAAC;AAAA,IACH;AAGA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,QAAI,MAAM,QAAQ,iBAAiB,KAAK,wBAAwB,GAAG;AAEjE,YAAM,eAAe,IAAI,MAAM,qBAAqB,EAAE,KAAK,EAAE;AAC7D,4BAAsB,OAAO,OAAO,CAAC,GAAG,mBAAmB,GAAG,YAAY,GAAG;AAAA,QAC3E,KAAK,CAAC,GAAI,kBAA2C,KAAK,GAAG,YAAY;AAAA,MAC3E,CAAC;AAAA,IACH,WAAW,OAAO,sBAAsB,YAAY;AAElD,4BAAsB,CAAC,UACrB,kBAAkB,EAAE,GAAG,OAAO,WAAO,yCAAuB,MAAM,KAAK,EAAE,CAAC;AAAA,IAC9E;AAGA,UAAM,EAAE,aAAa,WAAW,QAAI,oDAAiC,OAAO;AAC5E,UAAM,qCAAqC,sBAAsB,MAAM,UAAU;AAEjF,UAAM,YAAY,mCAAmC,qBAAqB,GAAG,2BAA2B;AAExG,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAEA,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,OAAO,sBAAsB,gBAAgB;AAC7D;AAGA,MAAM,eAAe,OAAO,KAAK,mBAAmB,EAAE,OAAO,CAAC,KAAK,QAAQ;AACzE,QAAM,YAAY;AAClB,MAAI,aAAa,eAAe,SAAS;AACzC,SAAO;AACT,GAAG,CAAC,CAAmB;AAEhB,MAAM,SAAS,OAAO,OAAO,gBAAgB,YAAY;",
   "names": []
 }

package/dist/cjs/ds-styled/utilities/background.js

@@ -29,7 +29,7 @@ __export(background_exports, {
 module.exports = __toCommonJS(background_exports);
 var React = __toESM(require("react"));
 var import_system = require("@xstyled/system");
-var import_th = require("../../th");
+var import_th = require("../../th.js");
 const bgColorGetter = (value) => (props) => `${import_th.th.color(value, value)(props)}`;
 bgColorGetter.meta = {};
 const bg = (0, import_system.style)({

package/dist/cjs/ds-styled/utilities/background.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/background.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { style, compose, type ThemeGetter } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\ninterface DSThemeGetter extends ThemeGetter {\n  (value: string): (props: PropsWithTheme) => string;\n}\n\nconst bgColorGetter: DSThemeGetter = (value: string) => (props) => `${th.color(value, value)(props as ThProps)}`;\n\nbgColorGetter.meta = {};\n\nconst bg = style({\n  prop: ['backgroundColor', 'bg'],\n  css: 'background-color',\n  themeGet: bgColorGetter,\n});\n\nexport const background = compose(bg);\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { style, compose, type ThemeGetter } from '@xstyled/system';\nimport { th } from '../../th.js';\nimport type { PropsWithTheme, ThProps } from '../types.js';\n\ninterface DSThemeGetter extends ThemeGetter {\n  (value: string): (props: PropsWithTheme) => string;\n}\n\nconst bgColorGetter: DSThemeGetter = (value: string) => (props) => `${th.color(value, value)(props as ThProps)}`;\n\nbgColorGetter.meta = {};\n\nconst bg = style({\n  prop: ['backgroundColor', 'bg'],\n  css: 'background-color',\n  themeGet: bgColorGetter,\n});\n\nexport const background = compose(bg);\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAiD;AACjD,gBAAmB;AAOnB,MAAM,gBAA+B,CAAC,UAAkB,CAAC,UAAU,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AAE7G,cAAc,OAAO,CAAC;AAEtB,MAAM,SAAK,qBAAM;AAAA,EACf,MAAM,CAAC,mBAAmB,IAAI;AAAA,EAC9B,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAEM,MAAM,iBAAa,uBAAQ,EAAE;",
   "names": []
 }

package/dist/cjs/ds-styled/utilities/border.js

@@ -29,7 +29,7 @@ __export(border_exports, {
 module.exports = __toCommonJS(border_exports);
 var React = __toESM(require("react"));
 var import_system = require("@xstyled/system");
-var import_th = require("../../th");
+var import_th = require("../../th.js");
 const colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;
 const borderGetter = (value) => (props) => {
   const color = value?.match?.(colorReg);

package/dist/cjs/ds-styled/utilities/border.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/border.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable prettier/prettier */\n/* eslint-disable max-lines */\nimport { style, compose, type ThemeGetter } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\ninterface DSThemeGetter extends ThemeGetter {\n  (value: string): (props: PropsWithTheme) => string;\n}\nconst colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;\n\nconst borderGetter: DSThemeGetter =\n  (value: string) =>\n    (props): string => {\n      const color = value?.match?.(colorReg);\n      let borderCss = ``;\n\n      if (color) {\n        const widthAndStyle = value.replace(color[0], '').trim();\n        borderCss = `${th.color(color[0])(props as ThProps)} ${widthAndStyle}`;\n      } else {\n        borderCss = value;\n      }\n\n      return borderCss;\n    };\n\nborderGetter.meta = {};\n\nconst borderColorGetter: DSThemeGetter =\n  (value: string) =>\n    (props): string =>\n      `${th.color(value, value)(props as ThProps)}`;\n\nborderColorGetter.meta = {};\n\nfunction borderStyleGetter(value: string) {\n  return (): string => value;\n}\n\nborderStyleGetter.meta = {};\n\nconst borderWidthGetter: DSThemeGetter =\n  (value: string) =>\n    (props): string =>\n      `${th.space(value, value)(props as ThProps)}`;\n\nborderWidthGetter.meta = {};\n\nconst borderRadiusGetter: DSThemeGetter =\n  (value: string) =>\n    (props): string =>\n      `${th.space(value, value)(props as ThProps)}`;\n\nborderRadiusGetter.meta = {};\n\nconst border = style({\n  prop: 'border',\n  css: 'border',\n  themeGet: borderGetter,\n});\n\nconst borderTop = style({\n  prop: 'borderTop',\n  css: 'border-top',\n  themeGet: borderGetter,\n});\n\nconst borderBottom = style({\n  prop: 'borderBottom',\n  css: 'border-bottom',\n  themeGet: borderGetter,\n});\n\nconst borderRight = style({\n  prop: 'borderRight',\n  css: 'border-right',\n  themeGet: borderGetter,\n});\n\nconst borderLeft = style({\n  prop: 'borderLeft',\n  css: 'border-left',\n  themeGet: borderGetter,\n});\n\nconst borderColor = style({\n  prop: 'borderColor',\n  css: 'border-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderTopColor = style({\n  prop: 'borderTopColor',\n  css: 'border-top-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderBottomColor = style({\n  prop: 'borderBottomColor',\n  css: 'border-bottom-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderRightColor = style({\n  prop: 'borderRightColor',\n  css: 'border-right-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderLeftColor = style({\n  prop: 'borderLeftColor',\n  css: 'border-left-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderStyle = style({\n  prop: 'borderStyle',\n  css: 'border-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderTopStyle = style({\n  prop: 'borderTopStyle',\n  css: 'border-top-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderBottomStyle = style({\n  prop: 'borderBottomStyle',\n  css: 'border-bottom-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderRightStyle = style({\n  prop: 'borderRightStyle',\n  css: 'border-right-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderLeftStyle = style({\n  prop: 'borderLeftStyle',\n  css: 'border-left-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderWidth = style({\n  prop: 'borderWidth',\n  css: 'border-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderTopWidth = style({\n  prop: 'borderTopWidth',\n  css: 'border-top-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderBottomWidth = style({\n  prop: 'borderBottomWidth',\n  css: 'border-bottom-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderRightWidth = style({\n  prop: 'borderRightWidth',\n  css: 'border-right-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderLeftWidth = style({\n  prop: 'borderLeftWidth',\n  css: 'border-left-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderRadius = style({\n  prop: 'borderRadius',\n  css: 'border-radius',\n  themeGet: borderRadiusGetter,\n});\n\nexport const borders = compose(\n  border,\n  borderTop,\n  borderBottom,\n  borderLeft,\n  borderRight,\n  borderColor,\n  borderTopColor,\n  borderBottomColor,\n  borderLeftColor,\n  borderRightColor,\n  borderStyle,\n  borderTopStyle,\n  borderBottomStyle,\n  borderLeftStyle,\n  borderRightStyle,\n  borderWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  borderLeftWidth,\n  borderRightWidth,\n  borderRadius,\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable prettier/prettier */\n/* eslint-disable max-lines */\nimport { style, compose, type ThemeGetter } from '@xstyled/system';\nimport { th } from '../../th.js';\nimport type { PropsWithTheme, ThProps } from '../types.js';\ninterface DSThemeGetter extends ThemeGetter {\n  (value: string): (props: PropsWithTheme) => string;\n}\nconst colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;\n\nconst borderGetter: DSThemeGetter =\n  (value: string) =>\n    (props): string => {\n      const color = value?.match?.(colorReg);\n      let borderCss = ``;\n\n      if (color) {\n        const widthAndStyle = value.replace(color[0], '').trim();\n        borderCss = `${th.color(color[0])(props as ThProps)} ${widthAndStyle}`;\n      } else {\n        borderCss = value;\n      }\n\n      return borderCss;\n    };\n\nborderGetter.meta = {};\n\nconst borderColorGetter: DSThemeGetter =\n  (value: string) =>\n    (props): string =>\n      `${th.color(value, value)(props as ThProps)}`;\n\nborderColorGetter.meta = {};\n\nfunction borderStyleGetter(value: string) {\n  return (): string => value;\n}\n\nborderStyleGetter.meta = {};\n\nconst borderWidthGetter: DSThemeGetter =\n  (value: string) =>\n    (props): string =>\n      `${th.space(value, value)(props as ThProps)}`;\n\nborderWidthGetter.meta = {};\n\nconst borderRadiusGetter: DSThemeGetter =\n  (value: string) =>\n    (props): string =>\n      `${th.space(value, value)(props as ThProps)}`;\n\nborderRadiusGetter.meta = {};\n\nconst border = style({\n  prop: 'border',\n  css: 'border',\n  themeGet: borderGetter,\n});\n\nconst borderTop = style({\n  prop: 'borderTop',\n  css: 'border-top',\n  themeGet: borderGetter,\n});\n\nconst borderBottom = style({\n  prop: 'borderBottom',\n  css: 'border-bottom',\n  themeGet: borderGetter,\n});\n\nconst borderRight = style({\n  prop: 'borderRight',\n  css: 'border-right',\n  themeGet: borderGetter,\n});\n\nconst borderLeft = style({\n  prop: 'borderLeft',\n  css: 'border-left',\n  themeGet: borderGetter,\n});\n\nconst borderColor = style({\n  prop: 'borderColor',\n  css: 'border-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderTopColor = style({\n  prop: 'borderTopColor',\n  css: 'border-top-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderBottomColor = style({\n  prop: 'borderBottomColor',\n  css: 'border-bottom-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderRightColor = style({\n  prop: 'borderRightColor',\n  css: 'border-right-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderLeftColor = style({\n  prop: 'borderLeftColor',\n  css: 'border-left-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderStyle = style({\n  prop: 'borderStyle',\n  css: 'border-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderTopStyle = style({\n  prop: 'borderTopStyle',\n  css: 'border-top-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderBottomStyle = style({\n  prop: 'borderBottomStyle',\n  css: 'border-bottom-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderRightStyle = style({\n  prop: 'borderRightStyle',\n  css: 'border-right-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderLeftStyle = style({\n  prop: 'borderLeftStyle',\n  css: 'border-left-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderWidth = style({\n  prop: 'borderWidth',\n  css: 'border-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderTopWidth = style({\n  prop: 'borderTopWidth',\n  css: 'border-top-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderBottomWidth = style({\n  prop: 'borderBottomWidth',\n  css: 'border-bottom-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderRightWidth = style({\n  prop: 'borderRightWidth',\n  css: 'border-right-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderLeftWidth = style({\n  prop: 'borderLeftWidth',\n  css: 'border-left-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderRadius = style({\n  prop: 'borderRadius',\n  css: 'border-radius',\n  themeGet: borderRadiusGetter,\n});\n\nexport const borders = compose(\n  border,\n  borderTop,\n  borderBottom,\n  borderLeft,\n  borderRight,\n  borderColor,\n  borderTopColor,\n  borderBottomColor,\n  borderLeftColor,\n  borderRightColor,\n  borderStyle,\n  borderTopStyle,\n  borderBottomStyle,\n  borderLeftStyle,\n  borderRightStyle,\n  borderWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  borderLeftWidth,\n  borderRightWidth,\n  borderRadius,\n);\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,oBAAiD;AACjD,gBAAmB;AAKnB,MAAM,WAAW;AAEjB,MAAM,eACJ,CAAC,UACC,CAAC,UAAkB;AACjB,QAAM,QAAQ,OAAO,QAAQ,QAAQ;AACrC,MAAI,YAAY;AAEhB,MAAI,OAAO;AACT,UAAM,gBAAgB,MAAM,QAAQ,MAAM,IAAI,EAAE,EAAE,KAAK;AACvD,gBAAY,GAAG,aAAG,MAAM,MAAM,EAAE,EAAE,KAAgB,KAAK;AAAA,EACzD,OAAO;AACL,gBAAY;AAAA,EACd;AAEA,SAAO;AACT;AAEJ,aAAa,OAAO,CAAC;AAErB,MAAM,oBACJ,CAAC,UACC,CAAC,UACC,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AAEhD,kBAAkB,OAAO,CAAC;AAE1B,SAAS,kBAAkB,OAAe;AACxC,SAAO,MAAc;AACvB;AAEA,kBAAkB,OAAO,CAAC;AAE1B,MAAM,oBACJ,CAAC,UACC,CAAC,UACC,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AAEhD,kBAAkB,OAAO,CAAC;AAE1B,MAAM,qBACJ,CAAC,UACC,CAAC,UACC,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AAEhD,mBAAmB,OAAO,CAAC;AAE3B,MAAM,aAAS,qBAAM;AAAA,EACnB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,gBAAY,qBAAM;AAAA,EACtB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,mBAAe,qBAAM;AAAA,EACzB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,kBAAc,qBAAM;AAAA,EACxB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,iBAAa,qBAAM;AAAA,EACvB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,kBAAc,qBAAM;AAAA,EACxB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,qBAAiB,qBAAM;AAAA,EAC3B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,wBAAoB,qBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,uBAAmB,qBAAM;AAAA,EAC7B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,sBAAkB,qBAAM;AAAA,EAC5B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,kBAAc,qBAAM;AAAA,EACxB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,qBAAiB,qBAAM;AAAA,EAC3B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,wBAAoB,qBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,uBAAmB,qBAAM;AAAA,EAC7B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,sBAAkB,qBAAM;AAAA,EAC5B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,kBAAc,qBAAM;AAAA,EACxB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,qBAAiB,qBAAM;AAAA,EAC3B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,wBAAoB,qBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,uBAAmB,qBAAM;AAAA,EAC7B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,sBAAkB,qBAAM;AAAA,EAC5B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,mBAAe,qBAAM;AAAA,EACzB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAEM,MAAM,cAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
   "names": []
 }

package/dist/cjs/ds-styled/utilities/color.js

@@ -29,7 +29,7 @@ __export(color_exports, {
 module.exports = __toCommonJS(color_exports);
 var React = __toESM(require("react"));
 var import_system = require("@xstyled/system");
-var import_th = require("../../th");
+var import_th = require("../../th.js");
 function colorGetter(value) {
   return (props) => `${import_th.th.color(value, value)(props)}`;
 }

package/dist/cjs/ds-styled/utilities/color.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/color.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { Theme, Props } from '@xstyled/system';\nimport { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { ColorProps, PropsWithTheme, ThProps } from '../types';\n\nfunction colorGetter(value: string) {\n  return (props: PropsWithTheme | Props<Theme>): string => `${th.color(value, value)(props as ThProps)}`;\n}\n\ncolorGetter.meta = {};\n\nconst colorStyled = style<ColorProps>({\n  prop: ['color'],\n  css: ['color'],\n  themeGet: colorGetter,\n});\n\nexport const color = compose(colorStyled);\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type { Theme, Props } from '@xstyled/system';\nimport { style, compose } from '@xstyled/system';\nimport { th } from '../../th.js';\nimport type { ColorProps, PropsWithTheme, ThProps } from '../types.js';\n\nfunction colorGetter(value: string) {\n  return (props: PropsWithTheme | Props<Theme>): string => `${th.color(value, value)(props as ThProps)}`;\n}\n\ncolorGetter.meta = {};\n\nconst colorStyled = style<ColorProps>({\n  prop: ['color'],\n  css: ['color'],\n  themeGet: colorGetter,\n});\n\nexport const color = compose(colorStyled);\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,oBAA+B;AAC/B,gBAAmB;AAGnB,SAAS,YAAY,OAAe;AAClC,SAAO,CAAC,UAAiD,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AACrG;AAEA,YAAY,OAAO,CAAC;AAEpB,MAAM,kBAAc,qBAAkB;AAAA,EACpC,MAAM,CAAC,OAAO;AAAA,EACd,KAAK,CAAC,OAAO;AAAA,EACb,UAAU;AACZ,CAAC;AAEM,MAAM,YAAQ,uBAAQ,WAAW;",
   "names": []
 }

package/dist/cjs/ds-styled/utilities/helpers.js

@@ -33,7 +33,7 @@ __export(helpers_exports, {
 });
 module.exports = __toCommonJS(helpers_exports);
 var React = __toESM(require("react"));
-var import_theme = require("../../theme");
+var import_theme = require("../../theme.js");
 const capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1);
 const systemTheme = import_theme.theme;
 const isEmpty = (string) => string.length === 0;

package/dist/cjs/ds-styled/utilities/helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/helpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Interpolation } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types';\nimport { theme as defaultTheme } from '../../theme';\n\nconst capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst systemTheme = defaultTheme;\n\nexport const isEmpty = (string: string): boolean => string.length === 0;\n\nexport const coerceWithDefaultTheme = (themeInput: Theme | undefined): Theme => themeInput ?? systemTheme;\n\nexport const stylesArgThemeCoercion = (stylesArg: Interpolation<any>): Interpolation<any> => {\n  if (typeof stylesArg === 'function') {\n    return (props: PropsWithTheme) =>\n      stylesArg({\n        ...props,\n        theme: coerceWithDefaultTheme(props.theme),\n      });\n  }\n  return stylesArg;\n};\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n  Object.keys(props)\n    .sort()\n    .reduce((classKey, key) => {\n      if (key === 'color') {\n        return classKey + (isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key])));\n      }\n      return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n    }, '');\n\nexport const displayNameToKebabCase = (displayName: string) => {\n  // We also remove \"DS\" preffix\n  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);\n\n  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join('-')}`;\n};\n\nexport const slotObjectToDataTestIds = (\n  componentName: string,\n  slotObject: Record<string, string>,\n): Record<string, string> => {\n  const obj = {} as Record<string, string>;\n  Object.keys(slotObject).forEach((slotName) => {\n    const displayName = `${componentName}-${slotObject[slotName]}`;\n    obj[slotName] = displayNameToKebabCase(displayName);\n  });\n  return obj;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Interpolation } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types.js';\nimport { theme as defaultTheme } from '../../theme.js';\n\nconst capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst systemTheme = defaultTheme;\n\nexport const isEmpty = (string: string): boolean => string.length === 0;\n\nexport const coerceWithDefaultTheme = (themeInput: Theme | undefined): Theme => themeInput ?? systemTheme;\n\nexport const stylesArgThemeCoercion = (stylesArg: Interpolation<any>): Interpolation<any> => {\n  if (typeof stylesArg === 'function') {\n    return (props: PropsWithTheme) =>\n      stylesArg({\n        ...props,\n        theme: coerceWithDefaultTheme(props.theme),\n      });\n  }\n  return stylesArg;\n};\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n  Object.keys(props)\n    .sort()\n    .reduce((classKey, key) => {\n      if (key === 'color') {\n        return classKey + (isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key])));\n      }\n      return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n    }, '');\n\nexport const displayNameToKebabCase = (displayName: string) => {\n  // We also remove \"DS\" preffix\n  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);\n\n  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join('-')}`;\n};\n\nexport const slotObjectToDataTestIds = (\n  componentName: string,\n  slotObject: Record<string, string>,\n): Record<string, string> => {\n  const obj = {} as Record<string, string>;\n  Object.keys(slotObject).forEach((slotName) => {\n    const displayName = `${componentName}-${slotObject[slotName]}`;\n    obj[slotName] = displayNameToKebabCase(displayName);\n  });\n  return obj;\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAsC;AAEtC,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,cAAc,aAAAA;AAEb,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAE/D,MAAM,yBAAyB,CAAC,eAAyC,cAAc;AAEvF,MAAM,yBAAyB,CAAC,cAAsD;AAC3F,MAAI,OAAO,cAAc,YAAY;AACnC,WAAO,CAAC,UACN,UAAU;AAAA,MACR,GAAG;AAAA,MACH,OAAO,uBAAuB,MAAM,KAAK;AAAA,IAC3C,CAAC;AAAA,EACL;AACA,SAAO;AACT;AAEO,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,KAAK,EACd,KAAK,EACL,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,YAAY,QAAQ,OAAO,QAAQ,CAAC,IAAI,OAAO,MAAM,IAAI,IAAI,WAAW,OAAO,MAAM,IAAI,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,WAAW,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,IAAI,WAAW,MAAM,KAAK,SAAS,CAAC;AAC3G,GAAG,EAAE;AAEF,MAAM,yBAAyB,CAAC,gBAAwB;AAE7D,QAAM,8BAA8B,YAAY,MAAM,WAAW,EAAE,MAAM,CAAC;AAE1E,SAAO,MAAM,4BAA4B,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,EAAE,KAAK,GAAG;AACrF;AAEO,MAAM,0BAA0B,CACrC,eACA,eAC2B;AAC3B,QAAM,MAAM,CAAC;AACb,SAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,aAAa;AAC5C,UAAM,cAAc,GAAG,iBAAiB,WAAW;AACnD,QAAI,YAAY,uBAAuB,WAAW;AAAA,EACpD,CAAC;AACD,SAAO;AACT;",
   "names": ["defaultTheme"]
 }

package/dist/cjs/ds-styled/utilities/index.js

@@ -22,13 +22,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var utilities_exports = {};
 module.exports = __toCommonJS(utilities_exports);
 var React = __toESM(require("react"));
-__reExport(utilities_exports, require("./background"), module.exports);
-__reExport(utilities_exports, require("./border"), module.exports);
-__reExport(utilities_exports, require("./checkNamingConvention"), module.exports);
-__reExport(utilities_exports, require("./color"), module.exports);
-__reExport(utilities_exports, require("./helpers"), module.exports);
-__reExport(utilities_exports, require("./magicCssTransform"), module.exports);
-__reExport(utilities_exports, require("./resolvers"), module.exports);
-__reExport(utilities_exports, require("./sizing"), module.exports);
-__reExport(utilities_exports, require("./space"), module.exports);
+__reExport(utilities_exports, require("./background.js"), module.exports);
+__reExport(utilities_exports, require("./border.js"), module.exports);
+__reExport(utilities_exports, require("./checkNamingConvention.js"), module.exports);
+__reExport(utilities_exports, require("./color.js"), module.exports);
+__reExport(utilities_exports, require("./helpers.js"), module.exports);
+__reExport(utilities_exports, require("./magicCssTransform.js"), module.exports);
+__reExport(utilities_exports, require("./resolvers.js"), module.exports);
+__reExport(utilities_exports, require("./sizing.js"), module.exports);
+__reExport(utilities_exports, require("./space.js"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/ds-styled/utilities/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './background';\nexport * from './border';\nexport * from './checkNamingConvention';\nexport * from './color';\nexport * from './helpers';\nexport * from './magicCssTransform';\nexport * from './resolvers';\nexport * from './sizing';\nexport * from './space';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAc,yBAAd;AACA,8BAAc,qBADd;AAEA,8BAAc,oCAFd;AAGA,8BAAc,oBAHd;AAIA,8BAAc,sBAJd;AAKA,8BAAc,gCALd;AAMA,8BAAc,wBANd;AAOA,8BAAc,qBAPd;AAQA,8BAAc,oBARd;",
+  "sourcesContent": ["export * from './background.js';\nexport * from './border.js';\nexport * from './checkNamingConvention.js';\nexport * from './color.js';\nexport * from './helpers.js';\nexport * from './magicCssTransform.js';\nexport * from './resolvers.js';\nexport * from './sizing.js';\nexport * from './space.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAc,4BAAd;AACA,8BAAc,wBADd;AAEA,8BAAc,uCAFd;AAGA,8BAAc,uBAHd;AAIA,8BAAc,yBAJd;AAKA,8BAAc,mCALd;AAMA,8BAAc,2BANd;AAOA,8BAAc,wBAPd;AAQA,8BAAc,uBARd;",
   "names": []
 }

package/dist/cjs/ds-styled/utilities/magicCssTransform.js

@@ -28,7 +28,7 @@ __export(magicCssTransform_exports, {
 });
 module.exports = __toCommonJS(magicCssTransform_exports);
 var React = __toESM(require("react"));
-var import_th = require("../../th");
+var import_th = require("../../th.js");
 const COLOR_REGEX = /(neutral|brand|success|warning|danger)-(100|200|300|400|500|600|700|800|900|000|050|080)/g;
 const magicfyCss = (rawValue) => {
   let matches;

package/dist/cjs/ds-styled/utilities/magicCssTransform.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/magicCssTransform.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-ts-comment */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable no-cond-assign */\nimport type { CSSObject, Interpolation, InterpolationFunction } from 'styled-components';\nimport { th } from '../../th';\n\ntype StyleArg = CSSObject | InterpolationFunction<any> | TemplateStringsArray;\ntype Expressions = Interpolation<any>[];\ntype MagicCssTransform = (styleArg: StyleArg, expressions: Expressions) => [StyleArg, Expressions];\n\n// This file is heavily inspired by https://github.com/gregberge/xstyled/blob/c0c92b459bb3a5de46d7854be3667861f816baa5/packages/core/src/transform.ts#L65\n// Please refer to that file to understand of the idea of the css transformer\n\nconst COLOR_REGEX = /(neutral|brand|success|warning|danger)-(100|200|300|400|500|600|700|800|900|000|050|080)/g;\n\nconst magicfyCss = (rawValue: string): [string[], Interpolation<any>[]] => {\n  let matches;\n  let lastIndex = 0;\n  const splittedValue: string[] = [];\n  const themeGetters = [];\n  while ((matches = COLOR_REGEX.exec(rawValue))) {\n    const [match] = matches;\n    splittedValue.push(rawValue.slice(lastIndex, matches.index));\n\n    themeGetters.push(th.color(match, match));\n\n    lastIndex = matches.index + match.length;\n  }\n  splittedValue.push(rawValue.slice(lastIndex, rawValue.length));\n  return [splittedValue, themeGetters];\n};\n\nexport const magicCssTransform: MagicCssTransform = (styleArg, expressions) => {\n  if (!Array.isArray(styleArg)) return [styleArg, expressions];\n\n  const magicStyleArg: string[] = [];\n  const magicExpressions: Expressions = [];\n\n  const templateStringArray = styleArg as TemplateStringsArray;\n\n  templateStringArray.forEach((templateString, index) => {\n    const [splittedTemplateString, themeGetters] = magicfyCss(templateString);\n    magicStyleArg.push(...splittedTemplateString);\n    magicExpressions.push(...themeGetters);\n    if (index < expressions.length) magicExpressions.push(expressions[index]);\n  });\n\n  return [Object.assign(magicStyleArg, { raw: [...magicStyleArg] }), magicExpressions];\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-ts-comment */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable no-cond-assign */\nimport type { CSSObject, Interpolation, InterpolationFunction } from 'styled-components';\nimport { th } from '../../th.js';\n\ntype StyleArg = CSSObject | InterpolationFunction<any> | TemplateStringsArray;\ntype Expressions = Interpolation<any>[];\ntype MagicCssTransform = (styleArg: StyleArg, expressions: Expressions) => [StyleArg, Expressions];\n\n// This file is heavily inspired by https://github.com/gregberge/xstyled/blob/c0c92b459bb3a5de46d7854be3667861f816baa5/packages/core/src/transform.ts#L65\n// Please refer to that file to understand of the idea of the css transformer\n\nconst COLOR_REGEX = /(neutral|brand|success|warning|danger)-(100|200|300|400|500|600|700|800|900|000|050|080)/g;\n\nconst magicfyCss = (rawValue: string): [string[], Interpolation<any>[]] => {\n  let matches;\n  let lastIndex = 0;\n  const splittedValue: string[] = [];\n  const themeGetters = [];\n  while ((matches = COLOR_REGEX.exec(rawValue))) {\n    const [match] = matches;\n    splittedValue.push(rawValue.slice(lastIndex, matches.index));\n\n    themeGetters.push(th.color(match, match));\n\n    lastIndex = matches.index + match.length;\n  }\n  splittedValue.push(rawValue.slice(lastIndex, rawValue.length));\n  return [splittedValue, themeGetters];\n};\n\nexport const magicCssTransform: MagicCssTransform = (styleArg, expressions) => {\n  if (!Array.isArray(styleArg)) return [styleArg, expressions];\n\n  const magicStyleArg: string[] = [];\n  const magicExpressions: Expressions = [];\n\n  const templateStringArray = styleArg as TemplateStringsArray;\n\n  templateStringArray.forEach((templateString, index) => {\n    const [splittedTemplateString, themeGetters] = magicfyCss(templateString);\n    magicStyleArg.push(...splittedTemplateString);\n    magicExpressions.push(...themeGetters);\n    if (index < expressions.length) magicExpressions.push(expressions[index]);\n  });\n\n  return [Object.assign(magicStyleArg, { raw: [...magicStyleArg] }), magicExpressions];\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,gBAAmB;AASnB,MAAM,cAAc;AAEpB,MAAM,aAAa,CAAC,aAAuD;AACzE,MAAI;AACJ,MAAI,YAAY;AAChB,QAAM,gBAA0B,CAAC;AACjC,QAAM,eAAe,CAAC;AACtB,SAAQ,UAAU,YAAY,KAAK,QAAQ,GAAI;AAC7C,UAAM,CAAC,KAAK,IAAI;AAChB,kBAAc,KAAK,SAAS,MAAM,WAAW,QAAQ,KAAK,CAAC;AAE3D,iBAAa,KAAK,aAAG,MAAM,OAAO,KAAK,CAAC;AAExC,gBAAY,QAAQ,QAAQ,MAAM;AAAA,EACpC;AACA,gBAAc,KAAK,SAAS,MAAM,WAAW,SAAS,MAAM,CAAC;AAC7D,SAAO,CAAC,eAAe,YAAY;AACrC;AAEO,MAAM,oBAAuC,CAAC,UAAU,gBAAgB;AAC7E,MAAI,CAAC,MAAM,QAAQ,QAAQ;AAAG,WAAO,CAAC,UAAU,WAAW;AAE3D,QAAM,gBAA0B,CAAC;AACjC,QAAM,mBAAgC,CAAC;AAEvC,QAAM,sBAAsB;AAE5B,sBAAoB,QAAQ,CAAC,gBAAgB,UAAU;AACrD,UAAM,CAAC,wBAAwB,YAAY,IAAI,WAAW,cAAc;AACxE,kBAAc,KAAK,GAAG,sBAAsB;AAC5C,qBAAiB,KAAK,GAAG,YAAY;AACrC,QAAI,QAAQ,YAAY;AAAQ,uBAAiB,KAAK,YAAY,MAAM;AAAA,EAC1E,CAAC;AAED,SAAO,CAAC,OAAO,OAAO,eAAe,EAAE,KAAK,CAAC,GAAG,aAAa,EAAE,CAAC,GAAG,gBAAgB;AACrF;",
   "names": []
 }

package/dist/cjs/ds-styled/utilities/resolvers.js

@@ -30,7 +30,7 @@ __export(resolvers_exports, {
 });
 module.exports = __toCommonJS(resolvers_exports);
 var React = __toESM(require("react"));
-var import_helpers = require("./helpers");
+var import_helpers = require("./helpers.js");
 const getStyleOverrides = (name, theme) => theme.components?.[name]?.styleOverrides || null;
 const getVariantStyles = (name, theme) => {
   const variants = theme.components?.[name]?.variants || [];

package/dist/cjs/ds-styled/utilities/resolvers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/resolvers.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\nimport type { CSSObject } from 'styled-components';\nimport type { Theme } from '../types';\nimport { propsToClassKey } from './helpers';\n\nexport const getStyleOverrides = (name: string, theme: Theme): CSSObject | null =>\n  theme.components?.[name]?.styleOverrides || null;\n\nexport const getVariantStyles = (name: string, theme: Theme): Record<string, CSSObject> => {\n  const variants = theme.components?.[name]?.variants || [];\n\n  return variants.reduce((styles, definition) => {\n    const key = propsToClassKey(definition.props);\n    styles[key] = definition.style;\n    return styles;\n  }, {} as Record<string, CSSObject>);\n};\n\nexport const variantsResolver = (\n  props: Record<string, unknown>,\n  styles: CSSObject,\n  theme: Theme,\n  name: string,\n): CSSObject[keyof CSSObject][] => {\n  const themeVariants = theme?.components?.[name]?.variants || [];\n\n  return themeVariants.reduce((variantsStyles, themeVariant) => {\n    const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);\n    if (isMatch) {\n      variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);\n    }\n    return variantsStyles;\n  }, [] as CSSObject[keyof CSSObject][]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-params */\nimport type { CSSObject } from 'styled-components';\nimport type { Theme } from '../types.js';\nimport { propsToClassKey } from './helpers.js';\n\nexport const getStyleOverrides = (name: string, theme: Theme): CSSObject | null =>\n  theme.components?.[name]?.styleOverrides || null;\n\nexport const getVariantStyles = (name: string, theme: Theme): Record<string, CSSObject> => {\n  const variants = theme.components?.[name]?.variants || [];\n\n  return variants.reduce((styles, definition) => {\n    const key = propsToClassKey(definition.props);\n    styles[key] = definition.style;\n    return styles;\n  }, {} as Record<string, CSSObject>);\n};\n\nexport const variantsResolver = (\n  props: Record<string, unknown>,\n  styles: CSSObject,\n  theme: Theme,\n  name: string,\n): CSSObject[keyof CSSObject][] => {\n  const themeVariants = theme?.components?.[name]?.variants || [];\n\n  return themeVariants.reduce((variantsStyles, themeVariant) => {\n    const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);\n    if (isMatch) {\n      variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);\n    }\n    return variantsStyles;\n  }, [] as CSSObject[keyof CSSObject][]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,qBAAgC;AAEzB,MAAM,oBAAoB,CAAC,MAAc,UAC9C,MAAM,aAAa,OAAO,kBAAkB;AAEvC,MAAM,mBAAmB,CAAC,MAAc,UAA4C;AACzF,QAAM,WAAW,MAAM,aAAa,OAAO,YAAY,CAAC;AAExD,SAAO,SAAS,OAAO,CAAC,QAAQ,eAAe;AAC7C,UAAM,UAAM,gCAAgB,WAAW,KAAK;AAC5C,WAAO,OAAO,WAAW;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,CAA8B;AACpC;AAEO,MAAM,mBAAmB,CAC9B,OACA,QACA,OACA,SACiC;AACjC,QAAM,gBAAgB,OAAO,aAAa,OAAO,YAAY,CAAC;AAE9D,SAAO,cAAc,OAAO,CAAC,gBAAgB,iBAAiB;AAC5D,UAAM,UAAU,OAAO,KAAK,aAAa,KAAK,EAAE,MAAM,CAAC,QAAQ,MAAM,SAAS,aAAa,MAAM,IAAI;AACrG,QAAI,SAAS;AACX,qBAAe,KAAK,WAAO,gCAAgB,aAAa,KAAK,EAAE;AAAA,IACjE;AACA,WAAO;AAAA,EACT,GAAG,CAAC,CAAiC;AACvC;",
   "names": []
 }

package/dist/cjs/ds-styled/utilities/space.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/space.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { space as xstyledSpace, type StyleGenerator } from '@xstyled/system';\nimport type { SpaceProps } from '../types';\n\nexport const space = xstyledSpace as unknown as StyleGenerator<SpaceProps>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { space as xstyledSpace, type StyleGenerator } from '@xstyled/system';\nimport type { SpaceProps } from '../types.js';\n\nexport const space = xstyledSpace as unknown as StyleGenerator<SpaceProps>;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAA2D;AAGpD,MAAM,QAAQ,cAAAA;",
   "names": ["xstyledSpace"]
 }

package/dist/cjs/globalStyles.js

@@ -28,8 +28,8 @@ __export(globalStyles_exports, {
 });
 module.exports = __toCommonJS(globalStyles_exports);
 var React = __toESM(require("react"));
-var import_ds_styled = require("./ds-styled");
-var import_th = require("./th");
+var import_ds_styled = require("./ds-styled/index.js");
+var import_th = require("./th.js");
 const GlobalStyles = import_ds_styled.createGlobalStyle`
   :root, body {
     overscroll-behavior-y: none;

package/dist/cjs/globalStyles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/globalStyles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createGlobalStyle } from './ds-styled';\nimport { th } from './th';\n\nexport const GlobalStyles = createGlobalStyle<{ device: 'desktop' | 'mobile' }>`\n  :root, body {\n    overscroll-behavior-y: none;\n\n    font-size: ${(props) => (props.device === 'desktop' ? '13px' : '16px')};\n\n    @media(min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => (props.device === 'mobile' ? '16px' : '13px')};\n    }\n\n  }\n\n  /* fix sanitize */\n  ::placeholder {\n    font-weight: ${th.fontWeight('regular')};\n    color: ${th.color('neutral-500')};\n  }\n  ::-webkit-input-placeholder {\n    opacity: 1;\n  }\n\n  :where(svg:not([fill])) {\n    fill: unset;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { createGlobalStyle } from './ds-styled/index.js';\nimport { th } from './th.js';\n\nexport const GlobalStyles = createGlobalStyle<{ device: 'desktop' | 'mobile' }>`\n  :root, body {\n    overscroll-behavior-y: none;\n\n    font-size: ${(props) => (props.device === 'desktop' ? '13px' : '16px')};\n\n    @media(min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => (props.device === 'mobile' ? '16px' : '13px')};\n    }\n\n  }\n\n  /* fix sanitize */\n  ::placeholder {\n    font-weight: ${th.fontWeight('regular')};\n    color: ${th.color('neutral-500')};\n  }\n  ::-webkit-input-placeholder {\n    opacity: 1;\n  }\n\n  :where(svg:not([fill])) {\n    fill: unset;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAkC;AAClC,gBAAmB;AAEZ,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA,iBAIX,CAAC,UAAW,MAAM,WAAW,YAAY,SAAS;AAAA;AAAA,wBAE3C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACtC,CAAC,UAAW,MAAM,WAAW,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAOjD,aAAG,WAAW,SAAS;AAAA,aAC7B,aAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/index.js

@@ -34,16 +34,16 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-__reExport(src_exports, require("./globalStyles"), module.exports);
-__reExport(src_exports, require("./spaceUtilities"), module.exports);
-__reExport(src_exports, require("./mobileUtilities"), module.exports);
-__reExport(src_exports, require("./utils"), module.exports);
-__reExport(src_exports, require("./arithmetic"), module.exports);
-__reExport(src_exports, require("./th"), module.exports);
-__reExport(src_exports, require("./theme"), module.exports);
-__reExport(src_exports, require("./ds-styled"), module.exports);
+__reExport(src_exports, require("./globalStyles.js"), module.exports);
+__reExport(src_exports, require("./spaceUtilities.js"), module.exports);
+__reExport(src_exports, require("./mobileUtilities.js"), module.exports);
+__reExport(src_exports, require("./utils.js"), module.exports);
+__reExport(src_exports, require("./arithmetic.js"), module.exports);
+__reExport(src_exports, require("./th.js"), module.exports);
+__reExport(src_exports, require("./theme.js"), module.exports);
+__reExport(src_exports, require("./ds-styled/index.js"), module.exports);
 var import_system = require("@xstyled/system");
-var import_themeProviderHOC = require("./themeProviderHOC");
+var import_themeProviderHOC = require("./themeProviderHOC.js");
 var import_styled_components = require("@xstyled/styled-components");
-var import_xStyledWrapper = require("./xStyledWrapper");
+var import_xStyledWrapper = require("./xStyledWrapper.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './globalStyles';\nexport * from './spaceUtilities';\nexport * from './mobileUtilities';\nexport * from './utils';\nexport * from './arithmetic';\nexport * from './th';\nexport * from './theme';\nexport * from './ds-styled';\nexport { position, typography } from '@xstyled/system';\nexport { themeProviderHOC } from './themeProviderHOC';\nexport { ThemeContext } from '@xstyled/styled-components';\nexport { xStyledCommonProps, XStyledWrapper } from './xStyledWrapper';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,2BAAd;AACA,wBAAc,6BADd;AAEA,wBAAc,8BAFd;AAGA,wBAAc,oBAHd;AAIA,wBAAc,yBAJd;AAKA,wBAAc,iBALd;AAMA,wBAAc,oBANd;AAOA,wBAAc,wBAPd;AAQA,oBAAqC;AACrC,8BAAiC;AACjC,+BAA6B;AAC7B,4BAAmD;",
+  "sourcesContent": ["export * from './globalStyles.js';\nexport * from './spaceUtilities.js';\nexport * from './mobileUtilities.js';\nexport * from './utils.js';\nexport * from './arithmetic.js';\nexport * from './th.js';\nexport * from './theme.js';\nexport * from './ds-styled/index.js';\nexport { position, typography } from '@xstyled/system';\nexport { themeProviderHOC } from './themeProviderHOC.js';\nexport { ThemeContext } from '@xstyled/styled-components';\nexport { xStyledCommonProps, XStyledWrapper } from './xStyledWrapper.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,8BAAd;AACA,wBAAc,gCADd;AAEA,wBAAc,iCAFd;AAGA,wBAAc,uBAHd;AAIA,wBAAc,4BAJd;AAKA,wBAAc,oBALd;AAMA,wBAAc,uBANd;AAOA,wBAAc,iCAPd;AAQA,oBAAqC;AACrC,8BAAiC;AACjC,+BAA6B;AAC7B,4BAAmD;",
   "names": []
 }

package/dist/cjs/mobileUtilities.js

@@ -32,8 +32,8 @@ __export(mobileUtilities_exports, {
 module.exports = __toCommonJS(mobileUtilities_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_theme = require("./theme");
-var import_constants = require("./constants");
+var import_theme = require("./theme.js");
+var import_constants = require("./constants.js");
 function __UNSAFE_SPACE_TO_DIMSUM(unit) {
   if (unit in import_constants.translateUnits)
     return import_constants.translateUnits[unit];

package/dist/cjs/mobileUtilities.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/mobileUtilities.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport { useState, useEffect } from 'react';\nimport { theme } from './theme';\nimport { desktopBaseFont, mobileBaseFont, translateUnits } from './constants';\n\n// eslint-disable-next-line no-underscore-dangle\nexport function __UNSAFE_SPACE_TO_DIMSUM(unit: string): string {\n  if (unit in translateUnits) return translateUnits[unit as keyof typeof translateUnits];\n  return `${(parseFloat(unit) * (mobileBaseFont / desktopBaseFont)) / 2}px`;\n}\n\nexport const isMobile = (): boolean => {\n  if (!window) return false;\n  return Number(theme.breakpoints.medium.split('px')[0]) - window.innerWidth >= 0;\n};\n\nexport function toMobile(unit: string): string {\n  if (!isMobile()) return unit;\n  return `${parseFloat(unit) * (desktopBaseFont / mobileBaseFont)}rem`;\n}\n\nexport const useIsMobile = (): boolean => {\n  const [mobile, setMobile] = useState<boolean>(isMobile());\n\n  useEffect(() => {\n    function handleResize() {\n      setMobile(isMobile());\n    }\n    window?.addEventListener('resize', handleResize);\n    return () => {\n      window?.removeEventListener('resize', handleResize);\n    };\n  }, []);\n\n  if (!window) return false;\n  return mobile;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport { useState, useEffect } from 'react';\nimport { theme } from './theme.js';\nimport { desktopBaseFont, mobileBaseFont, translateUnits } from './constants.js';\n\n// eslint-disable-next-line no-underscore-dangle\nexport function __UNSAFE_SPACE_TO_DIMSUM(unit: string): string {\n  if (unit in translateUnits) return translateUnits[unit as keyof typeof translateUnits];\n  return `${(parseFloat(unit) * (mobileBaseFont / desktopBaseFont)) / 2}px`;\n}\n\nexport const isMobile = (): boolean => {\n  if (!window) return false;\n  return Number(theme.breakpoints.medium.split('px')[0]) - window.innerWidth >= 0;\n};\n\nexport function toMobile(unit: string): string {\n  if (!isMobile()) return unit;\n  return `${parseFloat(unit) * (desktopBaseFont / mobileBaseFont)}rem`;\n}\n\nexport const useIsMobile = (): boolean => {\n  const [mobile, setMobile] = useState<boolean>(isMobile());\n\n  useEffect(() => {\n    function handleResize() {\n      setMobile(isMobile());\n    }\n    window?.addEventListener('resize', handleResize);\n    return () => {\n      window?.removeEventListener('resize', handleResize);\n    };\n  }, []);\n\n  if (!window) return false;\n  return mobile;\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AACpC,mBAAsB;AACtB,uBAAgE;AAGzD,SAAS,yBAAyB,MAAsB;AAC7D,MAAI,QAAQ;AAAgB,WAAO,gCAAe;AAClD,SAAO,GAAI,WAAW,IAAI,KAAK,kCAAiB,oCAAoB;AACtE;AAEO,MAAM,WAAW,MAAe;AACrC,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,OAAO,mBAAM,YAAY,OAAO,MAAM,IAAI,EAAE,EAAE,IAAI,OAAO,cAAc;AAChF;AAEO,SAAS,SAAS,MAAsB;AAC7C,MAAI,CAAC,SAAS;AAAG,WAAO;AACxB,SAAO,GAAG,WAAW,IAAI,KAAK,mCAAkB;AAClD;AAEO,MAAM,cAAc,MAAe;AACxC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,SAAS,CAAC;AAExD,8BAAU,MAAM;AACd,aAAS,eAAe;AACtB,gBAAU,SAAS,CAAC;AAAA,IACtB;AACA,YAAQ,iBAAiB,UAAU,YAAY;AAC/C,WAAO,MAAM;AACX,cAAQ,oBAAoB,UAAU,YAAY;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/spaceUtilities.js

@@ -36,7 +36,7 @@ __export(spaceUtilities_exports, {
 module.exports = __toCommonJS(spaceUtilities_exports);
 var React = __toESM(require("react"));
 var import_lodash = require("lodash");
-var import_theme = require("./theme");
+var import_theme = require("./theme.js");
 function mapGap(gutter) {
   if (!gutter)
     return "0rem";

package/dist/cjs/spaceUtilities.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/spaceUtilities.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { get } from 'lodash';\nimport { theme } from './theme';\n\nexport function mapGap(gutter: number | string): number | string {\n  if (!gutter) return '0rem';\n  if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;\n  return `${theme.space[gutter as keyof typeof theme.space]}`;\n}\n\nexport function mapGutter(gutter: string | number | undefined): string {\n  if (!gutter) return '0rem';\n  return `${theme.space[gutter as keyof typeof theme.space]} * 2`;\n}\n\nexport function mapSpace(width: string | number): string {\n  if (typeof width === 'string') return get(theme, width) ? `${get(theme, width)}` : width;\n  return `${width * 100}%`;\n}\n\nexport function fixSpaceGutter(\n  width: string | number | string[] | number[],\n  gutter?: string | number,\n): string | string[] {\n  if (!width) return '';\n  if (width === 'fit-content') return width;\n  if (Array.isArray(width)) return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);\n  return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;\n}\n\nexport function fixSpace(width: string | number | string[] | number[]): string | string[] {\n  if (!width) return '';\n  if (Array.isArray(width)) return width.map((w) => mapSpace(w));\n  return mapSpace(width);\n}\n\nexport function numbersToFr(grid: number[]): string[] {\n  const den = grid.map((f) => (f < 1 ? Math.floor(1 / f) : f));\n  return den.map((d) => `${d}fr`);\n}\nexport function mapGrid(width: string | number): string {\n  if (get(theme, width)) return `${get(theme, width)}`;\n  if (typeof width === 'string') return width;\n  const den = width < 1 ? Math.floor(1 / width) : width;\n  return `${den}fr`;\n}\n\nexport function mapTemplateGrid(grid: (number | string)[]): string | string[] {\n  if (Array.isArray(grid)) {\n    if (grid.some((w) => typeof w === 'string')) return grid.map((w) => mapGrid(w));\n    return numbersToFr(grid as number[]);\n  }\n  return mapGrid(grid);\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { get } from 'lodash';\nimport { theme } from './theme.js';\n\nexport function mapGap(gutter: number | string): number | string {\n  if (!gutter) return '0rem';\n  if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;\n  return `${theme.space[gutter as keyof typeof theme.space]}`;\n}\n\nexport function mapGutter(gutter: string | number | undefined): string {\n  if (!gutter) return '0rem';\n  return `${theme.space[gutter as keyof typeof theme.space]} * 2`;\n}\n\nexport function mapSpace(width: string | number): string {\n  if (typeof width === 'string') return get(theme, width) ? `${get(theme, width)}` : width;\n  return `${width * 100}%`;\n}\n\nexport function fixSpaceGutter(\n  width: string | number | string[] | number[],\n  gutter?: string | number,\n): string | string[] {\n  if (!width) return '';\n  if (width === 'fit-content') return width;\n  if (Array.isArray(width)) return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);\n  return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;\n}\n\nexport function fixSpace(width: string | number | string[] | number[]): string | string[] {\n  if (!width) return '';\n  if (Array.isArray(width)) return width.map((w) => mapSpace(w));\n  return mapSpace(width);\n}\n\nexport function numbersToFr(grid: number[]): string[] {\n  const den = grid.map((f) => (f < 1 ? Math.floor(1 / f) : f));\n  return den.map((d) => `${d}fr`);\n}\nexport function mapGrid(width: string | number): string {\n  if (get(theme, width)) return `${get(theme, width)}`;\n  if (typeof width === 'string') return width;\n  const den = width < 1 ? Math.floor(1 / width) : width;\n  return `${den}fr`;\n}\n\nexport function mapTemplateGrid(grid: (number | string)[]): string | string[] {\n  if (Array.isArray(grid)) {\n    if (grid.some((w) => typeof w === 'string')) return grid.map((w) => mapGrid(w));\n    return numbersToFr(grid as number[]);\n  }\n  return mapGrid(grid);\n}\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAoB;AACpB,mBAAsB;AAEf,SAAS,OAAO,QAA0C;AAC/D,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI,OAAO,MAAM,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,IAAI;AAAG,WAAO;AAC5E,SAAO,GAAG,mBAAM,MAAM;AACxB;AAEO,SAAS,UAAU,QAA6C;AACrE,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,GAAG,mBAAM,MAAM;AACxB;AAEO,SAAS,SAAS,OAAgC;AACvD,MAAI,OAAO,UAAU;AAAU,eAAO,mBAAI,oBAAO,KAAK,IAAI,OAAG,mBAAI,oBAAO,KAAK,MAAM;AACnF,SAAO,GAAG,QAAQ;AACpB;AAEO,SAAS,eACd,OACA,QACmB;AACnB,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,UAAU;AAAe,WAAO;AACpC,MAAI,MAAM,QAAQ,KAAK;AAAG,WAAO,MAAM,IAAI,CAAC,MAAM,QAAQ,SAAS,CAAC,QAAQ,UAAU,MAAM,KAAK;AACjG,SAAO,QAAQ,SAAS,KAAK,QAAQ,UAAU,MAAM;AACvD;AAEO,SAAS,SAAS,OAAiE;AACxF,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ,KAAK;AAAG,WAAO,MAAM,IAAI,CAAC,MAAM,SAAS,CAAC,CAAC;AAC7D,SAAO,SAAS,KAAK;AACvB;AAEO,SAAS,YAAY,MAA0B;AACpD,QAAM,MAAM,KAAK,IAAI,CAAC,MAAO,IAAI,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAE;AAC3D,SAAO,IAAI,IAAI,CAAC,MAAM,GAAG,KAAK;AAChC;AACO,SAAS,QAAQ,OAAgC;AACtD,UAAI,mBAAI,oBAAO,KAAK;AAAG,WAAO,OAAG,mBAAI,oBAAO,KAAK;AACjD,MAAI,OAAO,UAAU;AAAU,WAAO;AACtC,QAAM,MAAM,QAAQ,IAAI,KAAK,MAAM,IAAI,KAAK,IAAI;AAChD,SAAO,GAAG;AACZ;AAEO,SAAS,gBAAgB,MAA8C;AAC5E,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,QAAI,KAAK,KAAK,CAAC,MAAM,OAAO,MAAM,QAAQ;AAAG,aAAO,KAAK,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC;AAC9E,WAAO,YAAY,IAAgB;AAAA,EACrC;AACA,SAAO,QAAQ,IAAI;AACrB;",
   "names": []
 }

package/dist/cjs/th.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/th.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { PropsWithTheme } from './ds-styled';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n  if (result) {\n    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n  }\n  return ``;\n};\n\ntype ThemeStringGetter = ({ theme }: PropsWithTheme) => string;\n\ntype ThGetter = (value: string, dfault?: string) => ThemeStringGetter;\n\ntype ThConstructor = ((property: keyof Theme) => ThGetter) & {\n  space: ThGetter;\n  fontSize: ThGetter;\n  fontWeight: ThGetter;\n  lineHeight: ThGetter;\n  letterSpacing: ThGetter;\n  font: ThGetter;\n  color: ThGetter;\n  breakpoint: ThGetter;\n  media: ThGetter;\n  zIndex: ThGetter;\n};\n\nconst colorGetter: ThGetter =\n  (value, dfault = '') =>\n  ({ theme }) => {\n    const colorValues = value.split('-');\n\n    if (colorValues.length === 1) return colorValues[0];\n\n    if (colorValues.length > 3) return dfault;\n\n    const [colorType, colorValue, alpha] = colorValues as [\n      keyof Theme['colors'],\n      keyof Theme['colors'][keyof Theme['colors']],\n      string,\n    ];\n\n    const themeColor = theme.colors && theme.colors[colorType]?.[colorValue];\n\n    if (!themeColor) return dfault;\n\n    if (alpha) {\n      const alphaFloatingNumber = `0.${alpha.slice(1)}`;\n\n      return hexToRgba(themeColor, alphaFloatingNumber);\n    }\n\n    return themeColor;\n  };\n\nconst genericGetter =\n  (property: keyof Theme) =>\n  (value: string, dfault = ''): ThemeStringGetter =>\n  ({ theme }) => {\n    const parts = value.split('-');\n    let result = theme[property];\n    parts.forEach((part) => {\n      if (result) result = result[part as keyof typeof result];\n    });\n    return (result as unknown as string) ?? dfault;\n  };\n\nexport const th: ThConstructor = (property): ThGetter => {\n  switch (property) {\n    case 'colors' as keyof Theme:\n      return colorGetter;\n    default:\n      return genericGetter(property);\n  }\n};\n\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\nth.zIndex = th('zIndex');\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { PropsWithTheme } from './ds-styled/index.js';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n  if (result) {\n    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n  }\n  return ``;\n};\n\ntype ThemeStringGetter = ({ theme }: PropsWithTheme) => string;\n\ntype ThGetter = (value: string, dfault?: string) => ThemeStringGetter;\n\ntype ThConstructor = ((property: keyof Theme) => ThGetter) & {\n  space: ThGetter;\n  fontSize: ThGetter;\n  fontWeight: ThGetter;\n  lineHeight: ThGetter;\n  letterSpacing: ThGetter;\n  font: ThGetter;\n  color: ThGetter;\n  breakpoint: ThGetter;\n  media: ThGetter;\n  zIndex: ThGetter;\n};\n\nconst colorGetter: ThGetter =\n  (value, dfault = '') =>\n  ({ theme }) => {\n    const colorValues = value.split('-');\n\n    if (colorValues.length === 1) return colorValues[0];\n\n    if (colorValues.length > 3) return dfault;\n\n    const [colorType, colorValue, alpha] = colorValues as [\n      keyof Theme['colors'],\n      keyof Theme['colors'][keyof Theme['colors']],\n      string,\n    ];\n\n    const themeColor = theme.colors && theme.colors[colorType]?.[colorValue];\n\n    if (!themeColor) return dfault;\n\n    if (alpha) {\n      const alphaFloatingNumber = `0.${alpha.slice(1)}`;\n\n      return hexToRgba(themeColor, alphaFloatingNumber);\n    }\n\n    return themeColor;\n  };\n\nconst genericGetter =\n  (property: keyof Theme) =>\n  (value: string, dfault = ''): ThemeStringGetter =>\n  ({ theme }) => {\n    const parts = value.split('-');\n    let result = theme[property];\n    parts.forEach((part) => {\n      if (result) result = result[part as keyof typeof result];\n    });\n    return (result as unknown as string) ?? dfault;\n  };\n\nexport const th: ThConstructor = (property): ThGetter => {\n  switch (property) {\n    case 'colors' as keyof Theme:\n      return colorGetter;\n    default:\n      return genericGetter(property);\n  }\n};\n\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\nth.zIndex = th('zIndex');\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIhB,MAAM,YAAY,CAAC,KAAa,UAAkB;AACvD,QAAM,SAAS,4CAA4C,KAAK,GAAG;AAEnE,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM;AAAA,EACrG;AACA,SAAO;AACT;AAmBA,MAAM,cACJ,CAAC,OAAO,SAAS,OACjB,CAAC,EAAE,MAAM,MAAM;AACb,QAAM,cAAc,MAAM,MAAM,GAAG;AAEnC,MAAI,YAAY,WAAW;AAAG,WAAO,YAAY;AAEjD,MAAI,YAAY,SAAS;AAAG,WAAO;AAEnC,QAAM,CAAC,WAAW,YAAY,KAAK,IAAI;AAMvC,QAAM,aAAa,MAAM,UAAU,MAAM,OAAO,aAAa;AAE7D,MAAI,CAAC;AAAY,WAAO;AAExB,MAAI,OAAO;AACT,UAAM,sBAAsB,KAAK,MAAM,MAAM,CAAC;AAE9C,WAAO,UAAU,YAAY,mBAAmB;AAAA,EAClD;AAEA,SAAO;AACT;AAEF,MAAM,gBACJ,CAAC,aACD,CAAC,OAAe,SAAS,OACzB,CAAC,EAAE,MAAM,MAAM;AACb,QAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,MAAI,SAAS,MAAM;AACnB,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI;AAAQ,eAAS,OAAO;AAAA,EAC9B,CAAC;AACD,SAAQ,UAAgC;AAC1C;AAEK,MAAM,KAAoB,CAAC,aAAuB;AACvD,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO,cAAc,QAAQ;AAAA,EACjC;AACF;AAEA,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,WAAW,GAAG,WAAW;AAC5B,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,gBAAgB,GAAG,gBAAgB;AACtC,GAAG,OAAO,GAAG,OAAO;AACpB,GAAG,QAAQ,GAAG,QAAQ;AACtB,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,SAAS,GAAG,QAAQ;",
   "names": []
 }

package/dist/cjs/themeProviderHOC.js

@@ -30,7 +30,7 @@ module.exports = __toCommonJS(themeProviderHOC_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_styled_components = require("@xstyled/styled-components");
-var import_theme = require("./theme");
+var import_theme = require("./theme.js");
 const themeProviderHOC = (Component) => {
   const WrappedComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled_components.ThemeProvider, { theme: import_theme.theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) });
   return WrappedComponent;

package/dist/cjs/themeProviderHOC.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/themeProviderHOC.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { ThemeProvider } from '@xstyled/styled-components';\nimport { theme } from './theme';\n\nexport const themeProviderHOC = (Component: React.ElementType) => {\n  const WrappedComponent = (props: Record<string, unknown>): JSX.Element => (\n    <ThemeProvider theme={theme}>\n      <Component {...props} />\n    </ThemeProvider>\n  );\n  return WrappedComponent;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import React from 'react';\nimport { ThemeProvider } from '@xstyled/styled-components';\nimport { theme } from './theme.js';\n\nexport const themeProviderHOC = (Component: React.ElementType) => {\n  const WrappedComponent = (props: Record<string, unknown>): JSX.Element => (\n    <ThemeProvider theme={theme}>\n      <Component {...props} />\n    </ThemeProvider>\n  );\n  return WrappedComponent;\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOjB;AANN,+BAA8B;AAC9B,mBAAsB;AAEf,MAAM,mBAAmB,CAAC,cAAiC;AAChE,QAAM,mBAAmB,CAAC,UACxB,4CAAC,0CAAc,OAAO,oBACpB,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEF,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/utils.js

@@ -56,9 +56,9 @@ var React = __toESM(require("react"));
 var import_polished = require("polished");
 var import_lodash = require("lodash");
 var import_styled_components = require("@xstyled/styled-components");
-var import_theme = require("./theme");
-var import_mobileUtilities = require("./mobileUtilities");
-var import_th = require("./th");
+var import_theme = require("./theme.js");
+var import_mobileUtilities = require("./mobileUtilities.js");
+var import_th = require("./th.js");
 function truncate(width) {
   return (props) => import_styled_components.css`
     ${!!width || props.width ? `width: ${props.width || width};` : ""}