@elliemae/ds-system 3.50.1-next.8 → 3.51.0-next.0

package/dist/cjs/HtmlComponents.js

@@ -89,180 +89,180 @@ __export(HtmlComponents_exports, {
 });
 module.exports = __toCommonJS(HtmlComponents_exports);
 var React = __toESM(require("react"));
-var import_index = require("./index.js");
+var import_styled = require("./styled/index.js");
 var import_xStyledWrapper = require("./xStyledWrapper.js");
-const Address = (0, import_index.styled)("address")`
+const Address = (0, import_styled.styled)("address")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Article = (0, import_index.styled)("article")`
+const Article = (0, import_styled.styled)("article")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Aside = (0, import_index.styled)("aside")`
+const Aside = (0, import_styled.styled)("aside")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Footer = (0, import_index.styled)("footer")`
+const Footer = (0, import_styled.styled)("footer")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Header = (0, import_index.styled)("header")`
+const Header = (0, import_styled.styled)("header")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const H1 = (0, import_index.styled)("h1")`
+const H1 = (0, import_styled.styled)("h1")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const H2 = (0, import_index.styled)("h2")`
+const H2 = (0, import_styled.styled)("h2")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const H3 = (0, import_index.styled)("h3")`
+const H3 = (0, import_styled.styled)("h3")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const H4 = (0, import_index.styled)("h4")`
+const H4 = (0, import_styled.styled)("h4")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const H5 = (0, import_index.styled)("h5")`
+const H5 = (0, import_styled.styled)("h5")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const H6 = (0, import_index.styled)("h6")`
+const H6 = (0, import_styled.styled)("h6")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Hgroup = (0, import_index.styled)("hgroup")`
+const Hgroup = (0, import_styled.styled)("hgroup")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Main = (0, import_index.styled)("main")`
+const Main = (0, import_styled.styled)("main")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Nav = (0, import_index.styled)("nav")`
+const Nav = (0, import_styled.styled)("nav")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Section = (0, import_index.styled)("section")`
+const Section = (0, import_styled.styled)("section")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Search = (0, import_index.styled)("search")`
+const Search = (0, import_styled.styled)("search")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Blockquote = (0, import_index.styled)("blockquote")`
+const Blockquote = (0, import_styled.styled)("blockquote")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Dd = (0, import_index.styled)("dd")`
+const Dd = (0, import_styled.styled)("dd")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Div = (0, import_index.styled)("div")`
+const Div = (0, import_styled.styled)("div")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Dl = (0, import_index.styled)("dl")`
+const Dl = (0, import_styled.styled)("dl")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Dt = (0, import_index.styled)("dt")`
+const Dt = (0, import_styled.styled)("dt")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Figcaption = (0, import_index.styled)("figcaption")`
+const Figcaption = (0, import_styled.styled)("figcaption")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Figure = (0, import_index.styled)("figure")`
+const Figure = (0, import_styled.styled)("figure")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Hr = (0, import_index.styled)("hr")`
+const Hr = (0, import_styled.styled)("hr")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Li = (0, import_index.styled)("li")`
+const Li = (0, import_styled.styled)("li")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Menu = (0, import_index.styled)("menu")`
+const Menu = (0, import_styled.styled)("menu")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Ol = (0, import_index.styled)("ol")`
+const Ol = (0, import_styled.styled)("ol")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const P = (0, import_index.styled)("p")`
+const P = (0, import_styled.styled)("p")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Pre = (0, import_index.styled)("pre")`
+const Pre = (0, import_styled.styled)("pre")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Ul = (0, import_index.styled)("ul")`
+const Ul = (0, import_styled.styled)("ul")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const A = (0, import_index.styled)("a")`
+const A = (0, import_styled.styled)("a")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Abbr = (0, import_index.styled)("abbr")`
+const Abbr = (0, import_styled.styled)("abbr")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const B = (0, import_index.styled)("b")`
+const B = (0, import_styled.styled)("b")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Bdi = (0, import_index.styled)("bdi")`
+const Bdi = (0, import_styled.styled)("bdi")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Bdo = (0, import_index.styled)("bdo")`
+const Bdo = (0, import_styled.styled)("bdo")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Br = (0, import_index.styled)("br")`
+const Br = (0, import_styled.styled)("br")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Cite = (0, import_index.styled)("cite")`
+const Cite = (0, import_styled.styled)("cite")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Code = (0, import_index.styled)("code")`
+const Code = (0, import_styled.styled)("code")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Data = (0, import_index.styled)("data")`
+const Data = (0, import_styled.styled)("data")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Dfn = (0, import_index.styled)("dfn")`
+const Dfn = (0, import_styled.styled)("dfn")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Em = (0, import_index.styled)("em")`
+const Em = (0, import_styled.styled)("em")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const I = (0, import_index.styled)("i")`
+const I = (0, import_styled.styled)("i")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Kbd = (0, import_index.styled)("kbd")`
+const Kbd = (0, import_styled.styled)("kbd")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Mark = (0, import_index.styled)("mark")`
+const Mark = (0, import_styled.styled)("mark")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Q = (0, import_index.styled)("q")`
+const Q = (0, import_styled.styled)("q")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Rp = (0, import_index.styled)("rp")`
+const Rp = (0, import_styled.styled)("rp")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Rt = (0, import_index.styled)("rt")`
+const Rt = (0, import_styled.styled)("rt")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Ruby = (0, import_index.styled)("ruby")`
+const Ruby = (0, import_styled.styled)("ruby")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const S = (0, import_index.styled)("s")`
+const S = (0, import_styled.styled)("s")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Samp = (0, import_index.styled)("samp")`
+const Samp = (0, import_styled.styled)("samp")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Small = (0, import_index.styled)("small")`
+const Small = (0, import_styled.styled)("small")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Span = (0, import_index.styled)("span")`
+const Span = (0, import_styled.styled)("span")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Strong = (0, import_index.styled)("strong")`
+const Strong = (0, import_styled.styled)("strong")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Sub = (0, import_index.styled)("sub")`
+const Sub = (0, import_styled.styled)("sub")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Sup = (0, import_index.styled)("sup")`
+const Sup = (0, import_styled.styled)("sup")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Time = (0, import_index.styled)("time")`
+const Time = (0, import_styled.styled)("time")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const U = (0, import_index.styled)("u")`
+const U = (0, import_styled.styled)("u")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
-const Wbr = (0, import_index.styled)("wbr")`
+const Wbr = (0, import_styled.styled)("wbr")`
   ${import_xStyledWrapper.xStyledCommonProps}
 `;
 //# sourceMappingURL=HtmlComponents.js.map

package/dist/cjs/HtmlComponents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/HtmlComponents.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from './index.js';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\nimport { xStyledCommonProps } from './xStyledWrapper.js';\n\nexport const Address = styled('address')`\n  ${xStyledCommonProps}\n`;\nexport const Article = styled('article')`\n  ${xStyledCommonProps}\n`;\nexport const Aside = styled('aside')`\n  ${xStyledCommonProps}\n`;\nexport const Footer = styled('footer')`\n  ${xStyledCommonProps}\n`;\nexport const Header = styled('header')`\n  ${xStyledCommonProps}\n`;\nexport const H1 = styled('h1')`\n  ${xStyledCommonProps}\n`;\nexport const H2 = styled('h2')`\n  ${xStyledCommonProps}\n`;\nexport const H3 = styled('h3')`\n  ${xStyledCommonProps}\n`;\nexport const H4 = styled('h4')`\n  ${xStyledCommonProps}\n`;\nexport const H5 = styled('h5')`\n  ${xStyledCommonProps}\n`;\nexport const H6 = styled('h6')`\n  ${xStyledCommonProps}\n`;\nexport const Hgroup = styled('hgroup')`\n  ${xStyledCommonProps}\n`;\nexport const Main = styled('main')`\n  ${xStyledCommonProps}\n`;\nexport const Nav = styled('nav')`\n  ${xStyledCommonProps}\n`;\nexport const Section = styled('section')`\n  ${xStyledCommonProps}\n`;\nexport const Search = styled('search')`\n  ${xStyledCommonProps}\n`;\nexport const Blockquote = styled('blockquote')`\n  ${xStyledCommonProps}\n`;\nexport const Dd = styled('dd')`\n  ${xStyledCommonProps}\n`;\nexport const Div = styled('div')`\n  ${xStyledCommonProps}\n`;\nexport const Dl = styled('dl')`\n  ${xStyledCommonProps}\n`;\nexport const Dt = styled('dt')`\n  ${xStyledCommonProps}\n`;\nexport const Figcaption = styled('figcaption')`\n  ${xStyledCommonProps}\n`;\nexport const Figure = styled('figure')`\n  ${xStyledCommonProps}\n`;\nexport const Hr = styled('hr')`\n  ${xStyledCommonProps}\n`;\nexport const Li = styled('li')`\n  ${xStyledCommonProps}\n`;\nexport const Menu = styled('menu')`\n  ${xStyledCommonProps}\n`;\nexport const Ol = styled('ol')`\n  ${xStyledCommonProps}\n`;\nexport const P = styled('p')`\n  ${xStyledCommonProps}\n`;\nexport const Pre = styled('pre')`\n  ${xStyledCommonProps}\n`;\nexport const Ul = styled('ul')`\n  ${xStyledCommonProps}\n`;\nexport const A = styled('a')`\n  ${xStyledCommonProps}\n`;\nexport const Abbr = styled('abbr')`\n  ${xStyledCommonProps}\n`;\nexport const B = styled('b')`\n  ${xStyledCommonProps}\n`;\nexport const Bdi = styled('bdi')`\n  ${xStyledCommonProps}\n`;\nexport const Bdo = styled('bdo')`\n  ${xStyledCommonProps}\n`;\nexport const Br = styled('br')`\n  ${xStyledCommonProps}\n`;\nexport const Cite = styled('cite')`\n  ${xStyledCommonProps}\n`;\nexport const Code = styled('code')`\n  ${xStyledCommonProps}\n`;\nexport const Data = styled('data')`\n  ${xStyledCommonProps}\n`;\nexport const Dfn = styled('dfn')`\n  ${xStyledCommonProps}\n`;\nexport const Em = styled('em')`\n  ${xStyledCommonProps}\n`;\nexport const I = styled('i')`\n  ${xStyledCommonProps}\n`;\nexport const Kbd = styled('kbd')`\n  ${xStyledCommonProps}\n`;\nexport const Mark = styled('mark')`\n  ${xStyledCommonProps}\n`;\nexport const Q = styled('q')`\n  ${xStyledCommonProps}\n`;\nexport const Rp = styled('rp')`\n  ${xStyledCommonProps}\n`;\nexport const Rt = styled('rt')`\n  ${xStyledCommonProps}\n`;\nexport const Ruby = styled('ruby')`\n  ${xStyledCommonProps}\n`;\nexport const S = styled('s')`\n  ${xStyledCommonProps}\n`;\nexport const Samp = styled('samp')`\n  ${xStyledCommonProps}\n`;\nexport const Small = styled('small')`\n  ${xStyledCommonProps}\n`;\nexport const Span = styled('span')`\n  ${xStyledCommonProps}\n`;\nexport const Strong = styled('strong')`\n  ${xStyledCommonProps}\n`;\nexport const Sub = styled('sub')`\n  ${xStyledCommonProps}\n`;\nexport const Sup = styled('sup')`\n  ${xStyledCommonProps}\n`;\nexport const Time = styled('time')`\n  ${xStyledCommonProps}\n`;\nexport const U = styled('u')`\n  ${xStyledCommonProps}\n`;\nexport const Wbr = styled('wbr')`\n  ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { styled } from './styled/index.js';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\nimport { xStyledCommonProps } from './xStyledWrapper.js';\n\nexport const Address = styled('address')`\n  ${xStyledCommonProps}\n`;\nexport const Article = styled('article')`\n  ${xStyledCommonProps}\n`;\nexport const Aside = styled('aside')`\n  ${xStyledCommonProps}\n`;\nexport const Footer = styled('footer')`\n  ${xStyledCommonProps}\n`;\nexport const Header = styled('header')`\n  ${xStyledCommonProps}\n`;\nexport const H1 = styled('h1')`\n  ${xStyledCommonProps}\n`;\nexport const H2 = styled('h2')`\n  ${xStyledCommonProps}\n`;\nexport const H3 = styled('h3')`\n  ${xStyledCommonProps}\n`;\nexport const H4 = styled('h4')`\n  ${xStyledCommonProps}\n`;\nexport const H5 = styled('h5')`\n  ${xStyledCommonProps}\n`;\nexport const H6 = styled('h6')`\n  ${xStyledCommonProps}\n`;\nexport const Hgroup = styled('hgroup')`\n  ${xStyledCommonProps}\n`;\nexport const Main = styled('main')`\n  ${xStyledCommonProps}\n`;\nexport const Nav = styled('nav')`\n  ${xStyledCommonProps}\n`;\nexport const Section = styled('section')`\n  ${xStyledCommonProps}\n`;\nexport const Search = styled('search')`\n  ${xStyledCommonProps}\n`;\nexport const Blockquote = styled('blockquote')`\n  ${xStyledCommonProps}\n`;\nexport const Dd = styled('dd')`\n  ${xStyledCommonProps}\n`;\nexport const Div = styled('div')`\n  ${xStyledCommonProps}\n`;\nexport const Dl = styled('dl')`\n  ${xStyledCommonProps}\n`;\nexport const Dt = styled('dt')`\n  ${xStyledCommonProps}\n`;\nexport const Figcaption = styled('figcaption')`\n  ${xStyledCommonProps}\n`;\nexport const Figure = styled('figure')`\n  ${xStyledCommonProps}\n`;\nexport const Hr = styled('hr')`\n  ${xStyledCommonProps}\n`;\nexport const Li = styled('li')`\n  ${xStyledCommonProps}\n`;\nexport const Menu = styled('menu')`\n  ${xStyledCommonProps}\n`;\nexport const Ol = styled('ol')`\n  ${xStyledCommonProps}\n`;\nexport const P = styled('p')`\n  ${xStyledCommonProps}\n`;\nexport const Pre = styled('pre')`\n  ${xStyledCommonProps}\n`;\nexport const Ul = styled('ul')`\n  ${xStyledCommonProps}\n`;\nexport const A = styled('a')`\n  ${xStyledCommonProps}\n`;\nexport const Abbr = styled('abbr')`\n  ${xStyledCommonProps}\n`;\nexport const B = styled('b')`\n  ${xStyledCommonProps}\n`;\nexport const Bdi = styled('bdi')`\n  ${xStyledCommonProps}\n`;\nexport const Bdo = styled('bdo')`\n  ${xStyledCommonProps}\n`;\nexport const Br = styled('br')`\n  ${xStyledCommonProps}\n`;\nexport const Cite = styled('cite')`\n  ${xStyledCommonProps}\n`;\nexport const Code = styled('code')`\n  ${xStyledCommonProps}\n`;\nexport const Data = styled('data')`\n  ${xStyledCommonProps}\n`;\nexport const Dfn = styled('dfn')`\n  ${xStyledCommonProps}\n`;\nexport const Em = styled('em')`\n  ${xStyledCommonProps}\n`;\nexport const I = styled('i')`\n  ${xStyledCommonProps}\n`;\nexport const Kbd = styled('kbd')`\n  ${xStyledCommonProps}\n`;\nexport const Mark = styled('mark')`\n  ${xStyledCommonProps}\n`;\nexport const Q = styled('q')`\n  ${xStyledCommonProps}\n`;\nexport const Rp = styled('rp')`\n  ${xStyledCommonProps}\n`;\nexport const Rt = styled('rt')`\n  ${xStyledCommonProps}\n`;\nexport const Ruby = styled('ruby')`\n  ${xStyledCommonProps}\n`;\nexport const S = styled('s')`\n  ${xStyledCommonProps}\n`;\nexport const Samp = styled('samp')`\n  ${xStyledCommonProps}\n`;\nexport const Small = styled('small')`\n  ${xStyledCommonProps}\n`;\nexport const Span = styled('span')`\n  ${xStyledCommonProps}\n`;\nexport const Strong = styled('strong')`\n  ${xStyledCommonProps}\n`;\nexport const Sub = styled('sub')`\n  ${xStyledCommonProps}\n`;\nexport const Sup = styled('sup')`\n  ${xStyledCommonProps}\n`;\nexport const Time = styled('time')`\n  ${xStyledCommonProps}\n`;\nexport const U = styled('u')`\n  ${xStyledCommonProps}\n`;\nexport const Wbr = styled('wbr')`\n  ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/index.js

@@ -97,19 +97,19 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
+var import_styled_components = require("@xstyled/styled-components");
+var import_system = require("@xstyled/system");
+var import_HtmlComponents = require("./HtmlComponents.js");
+__reExport(src_exports, require("./arithmetic.js"), module.exports);
 __reExport(src_exports, require("./globalStyles.js"), module.exports);
-__reExport(src_exports, require("./spaceUtilities.js"), module.exports);
+__reExport(src_exports, require("./mergeRefs.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("./spaceUtilities.js"), module.exports);
+__reExport(src_exports, require("./styled/index.js"), module.exports);
 __reExport(src_exports, require("./th.js"), module.exports);
 __reExport(src_exports, require("./theme.js"), module.exports);
-__reExport(src_exports, require("./styled/index.js"), module.exports);
-var import_system = require("@xstyled/system");
 var import_themeProviderHOC = require("./themeProviderHOC.js");
-var import_styled_components = require("@xstyled/styled-components");
+__reExport(src_exports, require("./utils.js"), module.exports);
 var import_xStyledWrapper = require("./xStyledWrapper.js");
-var import_HtmlComponents = require("./HtmlComponents.js");
-__reExport(src_exports, require("./mergeRefs.js"), module.exports);
 var import_useGetLayoutMode = require("./useGetLayoutMode.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.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 './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';\nexport {\n  Address,\n  Article,\n  Aside,\n  Footer,\n  Header,\n  H1,\n  H2,\n  H3,\n  H4,\n  H5,\n  H6,\n  Hgroup,\n  Main,\n  Nav,\n  Section,\n  Search,\n  Blockquote,\n  Dd,\n  Div,\n  Dl,\n  Dt,\n  Figcaption,\n  Figure,\n  Hr,\n  Li,\n  Menu,\n  Ol,\n  P,\n  Pre,\n  Ul,\n  A,\n  Abbr,\n  B,\n  Bdi,\n  Bdo,\n  Br,\n  Cite,\n  Code,\n  Data,\n  Dfn,\n  Em,\n  I,\n  Kbd,\n  Mark,\n  Q,\n  Rp,\n  Rt,\n  Ruby,\n  S,\n  Samp,\n  Small,\n  Span,\n  Strong,\n  Sub,\n  Sup,\n  Time,\n  U,\n  Wbr,\n} from './HtmlComponents.js';\nexport * from './mergeRefs.js';\n// styled components uses csstype types internally but doesn't solve the types export correctly\n//  so to fix ts2742 we need to re-export the types from csstype...\nexport type * from 'csstype';\nexport { useGetLayoutMode } from './useGetLayoutMode.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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,8BAPd;AAQA,oBAAqC;AACrC,8BAAiC;AACjC,+BAA6B;AAC7B,4BAAmD;AACnD,4BA2DO;AACP,wBAAc,2BAxEd;AA4EA,8BAAiC;",
+  "sourcesContent": ["export { ThemeContext } from '@xstyled/styled-components';\nexport { position, typography } from '@xstyled/system';\nexport {\n  A,\n  Abbr,\n  Address,\n  Article,\n  Aside,\n  B,\n  Bdi,\n  Bdo,\n  Blockquote,\n  Br,\n  Cite,\n  Code,\n  Data,\n  Dd,\n  Dfn,\n  Div,\n  Dl,\n  Dt,\n  Em,\n  Figcaption,\n  Figure,\n  Footer,\n  H1,\n  H2,\n  H3,\n  H4,\n  H5,\n  H6,\n  Header,\n  Hgroup,\n  Hr,\n  I,\n  Kbd,\n  Li,\n  Main,\n  Mark,\n  Menu,\n  Nav,\n  Ol,\n  P,\n  Pre,\n  Q,\n  Rp,\n  Rt,\n  Ruby,\n  S,\n  Samp,\n  Search,\n  Section,\n  Small,\n  Span,\n  Strong,\n  Sub,\n  Sup,\n  Time,\n  U,\n  Ul,\n  Wbr,\n} from './HtmlComponents.js';\nexport * from './arithmetic.js';\nexport * from './globalStyles.js';\nexport * from './mergeRefs.js';\nexport * from './mobileUtilities.js';\nexport * from './spaceUtilities.js';\nexport * from './styled/index.js';\nexport * from './th.js';\nexport * from './theme.js';\nexport { themeProviderHOC } from './themeProviderHOC.js';\nexport * from './utils.js';\nexport { XStyledWrapper, xStyledCommonProps } from './xStyledWrapper.js';\n// styled components uses csstype types internally but doesn't solve the types export correctly\n//  so to fix ts2742 we need to re-export the types from csstype...\nexport type * from 'csstype';\nexport { useGetLayoutMode } from './useGetLayoutMode.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAA6B;AAC7B,oBAAqC;AACrC,4BA2DO;AACP,wBAAc,4BA9Dd;AA+DA,wBAAc,8BA/Dd;AAgEA,wBAAc,2BAhEd;AAiEA,wBAAc,iCAjEd;AAkEA,wBAAc,gCAlEd;AAmEA,wBAAc,8BAnEd;AAoEA,wBAAc,oBApEd;AAqEA,wBAAc,uBArEd;AAsEA,8BAAiC;AACjC,wBAAc,uBAvEd;AAwEA,4BAAmD;AAInD,8BAAiC;",
   "names": []
 }

package/dist/cjs/styled/expressions/genStyleOverridesExpression.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/styled/expressions/genStyleOverridesExpression.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { PropsWithTheme, Theme } from '../types.js';\nimport { theme as defaultTheme } from '../../theme.js';\nimport type { CSSObject } from 'styled-components';\n\nconst getStyleOverrides = (name: string, theme: Theme): CSSObject | null =>\n  theme.components?.[name]?.styleOverrides || null;\n\nexport const genStyleOverridesExpression =\n  (componentName: string, componentSlot: string) => (props: PropsWithTheme) => {\n    const styleOverrides = getStyleOverrides(componentName, props.theme ?? defaultTheme);\n    if (styleOverrides) {\n      return [styleOverrides[componentSlot]];\n    }\n    return null;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAsC;AAGtC,MAAM,oBAAoB,CAAC,MAAc,UACvC,MAAM,aAAa,IAAI,GAAG,kBAAkB;AAEvC,MAAM,8BACX,CAAC,eAAuB,kBAA0B,CAAC,UAA0B;AAC3E,QAAM,iBAAiB,kBAAkB,eAAe,MAAM,SAAS,aAAAA,KAAY;AACnF,MAAI,gBAAgB;AAClB,WAAO,CAAC,eAAe,aAAa,CAAC;AAAA,EACvC;AACA,SAAO;AACT;",
+  "sourcesContent": ["import type { CSSObject } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types.js';\nimport { theme as defaultTheme } from '../../theme.js';\n\nconst getStyleOverrides = (name: string, theme: Theme): CSSObject | null =>\n  theme.components?.[name]?.styleOverrides || null;\n\nexport const genStyleOverridesExpression =\n  (componentName: string, componentSlot: string) => (props: PropsWithTheme) => {\n    const styleOverrides = getStyleOverrides(componentName, props.theme ?? defaultTheme);\n    if (styleOverrides) {\n      return [styleOverrides[componentSlot]];\n    }\n    return null;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAsC;AAEtC,MAAM,oBAAoB,CAAC,MAAc,UACvC,MAAM,aAAa,IAAI,GAAG,kBAAkB;AAEvC,MAAM,8BACX,CAAC,eAAuB,kBAA0B,CAAC,UAA0B;AAC3E,QAAM,iBAAiB,kBAAkB,eAAe,MAAM,SAAS,aAAAA,KAAY;AACnF,MAAI,gBAAgB;AAClB,WAAO,CAAC,eAAe,aAAa,CAAC;AAAA,EACvC;AACA,SAAO;AACT;",
   "names": ["defaultTheme"]
 }

package/dist/cjs/styled/expressions/genVariantOverridesExpression.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/styled/expressions/genVariantOverridesExpression.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { PropsWithTheme, Theme } from '../types.js';\nimport { theme as defaultTheme } from '../../theme.js';\nimport type { CSSObject } from 'styled-components';\nimport { propsToClassKey } from '../helpers.js';\n\nconst getVariantStyles = (name: string, theme: Theme): Record<string, CSSObject> => {\n  const variants = theme.components?.[name]?.variants || [];\n\n  return variants.reduce(\n    (styles, definition) => {\n      const key = propsToClassKey(definition.props);\n      styles[key] = definition.style;\n      return styles;\n    },\n    {} as Record<string, CSSObject>,\n  );\n};\n\nexport const genVariantOverridesExpression = (componentName: string) => (props: PropsWithTheme) => {\n  const theme = props.theme ?? defaultTheme;\n  const variantStyles = getVariantStyles(componentName, theme);\n\n  const themeVariants = theme?.components?.[componentName]?.variants || [];\n\n  return themeVariants.reduce(\n    (resultingStyles, themeVariant) => {\n      const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);\n      if (isMatch) {\n        resultingStyles.push(variantStyles[propsToClassKey(themeVariant.props)]);\n      }\n      return resultingStyles;\n    },\n    [] as CSSObject[keyof CSSObject][],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAsC;AAEtC,qBAAgC;AAEhC,MAAM,mBAAmB,CAAC,MAAc,UAA4C;AAClF,QAAM,WAAW,MAAM,aAAa,IAAI,GAAG,YAAY,CAAC;AAExD,SAAO,SAAS;AAAA,IACd,CAAC,QAAQ,eAAe;AACtB,YAAM,UAAM,gCAAgB,WAAW,KAAK;AAC5C,aAAO,GAAG,IAAI,WAAW;AACzB,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;AAEO,MAAM,gCAAgC,CAAC,kBAA0B,CAAC,UAA0B;AACjG,QAAM,QAAQ,MAAM,SAAS,aAAAA;AAC7B,QAAM,gBAAgB,iBAAiB,eAAe,KAAK;AAE3D,QAAM,gBAAgB,OAAO,aAAa,aAAa,GAAG,YAAY,CAAC;AAEvE,SAAO,cAAc;AAAA,IACnB,CAAC,iBAAiB,iBAAiB;AACjC,YAAM,UAAU,OAAO,KAAK,aAAa,KAAK,EAAE,MAAM,CAAC,QAAQ,MAAM,GAAG,MAAM,aAAa,MAAM,GAAG,CAAC;AACrG,UAAI,SAAS;AACX,wBAAgB,KAAK,kBAAc,gCAAgB,aAAa,KAAK,CAAC,CAAC;AAAA,MACzE;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import type { CSSObject } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types.js';\nimport { theme as defaultTheme } from '../../theme.js';\nimport { propsToClassKey } from '../helpers.js';\n\nconst getVariantStyles = (name: string, theme: Theme): Record<string, CSSObject> => {\n  const variants = theme.components?.[name]?.variants || [];\n\n  return variants.reduce(\n    (styles, definition) => {\n      const key = propsToClassKey(definition.props);\n      styles[key] = definition.style;\n      return styles;\n    },\n    {} as Record<string, CSSObject>,\n  );\n};\n\nexport const genVariantOverridesExpression = (componentName: string) => (props: PropsWithTheme) => {\n  const theme = props.theme ?? defaultTheme;\n  const variantStyles = getVariantStyles(componentName, theme);\n\n  const themeVariants = theme?.components?.[componentName]?.variants || [];\n\n  return themeVariants.reduce(\n    (resultingStyles, themeVariant) => {\n      const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);\n      if (isMatch) {\n        resultingStyles.push(variantStyles[propsToClassKey(themeVariant.props)]);\n      }\n      return resultingStyles;\n    },\n    [] as CSSObject[keyof CSSObject][],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAsC;AACtC,qBAAgC;AAEhC,MAAM,mBAAmB,CAAC,MAAc,UAA4C;AAClF,QAAM,WAAW,MAAM,aAAa,IAAI,GAAG,YAAY,CAAC;AAExD,SAAO,SAAS;AAAA,IACd,CAAC,QAAQ,eAAe;AACtB,YAAM,UAAM,gCAAgB,WAAW,KAAK;AAC5C,aAAO,GAAG,IAAI,WAAW;AACzB,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;AAEO,MAAM,gCAAgC,CAAC,kBAA0B,CAAC,UAA0B;AACjG,QAAM,QAAQ,MAAM,SAAS,aAAAA;AAC7B,QAAM,gBAAgB,iBAAiB,eAAe,KAAK;AAE3D,QAAM,gBAAgB,OAAO,aAAa,aAAa,GAAG,YAAY,CAAC;AAEvE,SAAO,cAAc;AAAA,IACnB,CAAC,iBAAiB,iBAAiB;AACjC,YAAM,UAAU,OAAO,KAAK,aAAa,KAAK,EAAE,MAAM,CAAC,QAAQ,MAAM,GAAG,MAAM,aAAa,MAAM,GAAG,CAAC;AACrG,UAAI,SAAS;AACX,wBAAgB,KAAK,kBAAc,gCAAgB,aAAa,KAAK,CAAC,CAAC;AAAA,MACzE;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;",
   "names": ["defaultTheme"]
 }

package/dist/cjs/styled/fixStyleArg.js

@@ -40,7 +40,8 @@ const fixStyleArg = (styleArg, numberOfNewExpressions) => {
     return Object.assign([...styleArg, ...placeholders], {
       raw: [...styleArg.raw, ...placeholders]
     });
-  } else if (typeof styleArg === "function") {
+  }
+  if (typeof styleArg === "function") {
     return (props) => styleArg({ ...props, theme: props.theme ?? import_theme.theme });
   }
   return styleArg;

package/dist/cjs/styled/fixStyleArg.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styled/fixStyleArg.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { theme as defaultTheme } from '../theme.js';\nimport type { PropsWithTheme, StyleArg } from './types.js';\n\nconst isTemplateStringsArray = (styleArg: StyleArg): styleArg is TemplateStringsArray => Array.isArray(styleArg);\n\nexport const fixStyleArg = (styleArg: StyleArg, numberOfNewExpressions: number): StyleArg => {\n  if (isTemplateStringsArray(styleArg) && numberOfNewExpressions > 0) {\n    // Here we are adding placeholders for all the new functions that we are gonna call\n    const placeholders = new Array(numberOfNewExpressions).fill('') as string[];\n    return Object.assign([...styleArg, ...placeholders], {\n      raw: [...styleArg.raw, ...placeholders],\n    });\n  } else if (typeof styleArg === 'function') {\n    // Here we just coerce with the default theme\n    return (props: PropsWithTheme) => styleArg({ ...props, theme: props.theme ?? defaultTheme });\n  }\n  return styleArg;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsC;AAGtC,MAAM,yBAAyB,CAAC,aAAyD,MAAM,QAAQ,QAAQ;AAExG,MAAM,cAAc,CAAC,UAAoB,2BAA6C;AAC3F,MAAI,uBAAuB,QAAQ,KAAK,yBAAyB,GAAG;AAElE,UAAM,eAAe,IAAI,MAAM,sBAAsB,EAAE,KAAK,EAAE;AAC9D,WAAO,OAAO,OAAO,CAAC,GAAG,UAAU,GAAG,YAAY,GAAG;AAAA,MACnD,KAAK,CAAC,GAAG,SAAS,KAAK,GAAG,YAAY;AAAA,IACxC,CAAC;AAAA,EACH,WAAW,OAAO,aAAa,YAAY;AAEzC,WAAO,CAAC,UAA0B,SAAS,EAAE,GAAG,OAAO,OAAO,MAAM,SAAS,aAAAA,MAAa,CAAC;AAAA,EAC7F;AACA,SAAO;AACT;",
+  "sourcesContent": ["import { theme as defaultTheme } from '../theme.js';\nimport type { PropsWithTheme, StyleArg } from './types.js';\n\nconst isTemplateStringsArray = (styleArg: StyleArg): styleArg is TemplateStringsArray => Array.isArray(styleArg);\n\nexport const fixStyleArg = (styleArg: StyleArg, numberOfNewExpressions: number): StyleArg => {\n  if (isTemplateStringsArray(styleArg) && numberOfNewExpressions > 0) {\n    // Here we are adding placeholders for all the new functions that we are gonna call\n    const placeholders = new Array(numberOfNewExpressions).fill('') as string[];\n    return Object.assign([...styleArg, ...placeholders], {\n      raw: [...styleArg.raw, ...placeholders],\n    });\n  }\n  if (typeof styleArg === 'function') {\n    // Here we just coerce with the default theme\n    return (props: PropsWithTheme) => styleArg({ ...props, theme: props.theme ?? defaultTheme });\n  }\n  return styleArg;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsC;AAGtC,MAAM,yBAAyB,CAAC,aAAyD,MAAM,QAAQ,QAAQ;AAExG,MAAM,cAAc,CAAC,UAAoB,2BAA6C;AAC3F,MAAI,uBAAuB,QAAQ,KAAK,yBAAyB,GAAG;AAElE,UAAM,eAAe,IAAI,MAAM,sBAAsB,EAAE,KAAK,EAAE;AAC9D,WAAO,OAAO,OAAO,CAAC,GAAG,UAAU,GAAG,YAAY,GAAG;AAAA,MACnD,KAAK,CAAC,GAAG,SAAS,KAAK,GAAG,YAAY;AAAA,IACxC,CAAC;AAAA,EACH;AACA,MAAI,OAAO,aAAa,YAAY;AAElC,WAAO,CAAC,UAA0B,SAAS,EAAE,GAAG,OAAO,OAAO,MAAM,SAAS,aAAAA,MAAa,CAAC;AAAA,EAC7F;AACA,SAAO;AACT;",
   "names": ["defaultTheme"]
 }

package/dist/cjs/styled/styledFunction.js

@@ -33,6 +33,7 @@ __export(styledFunction_exports, {
 module.exports = __toCommonJS(styledFunction_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_checkNamingConvention = require("./checkNamingConvention.js");
 var import_system = require("./system.js");
 var import_transformers = require("./transformers/index.js");
@@ -43,7 +44,6 @@ var import_generated_attributes = require("./generated-attributes/index.js");
 var import_generateAttributes = require("./generated-attributes/generateAttributes.js");
 var import_refMerger = require("./generated-attributes/utils/refMerger.js");
 var import_helpers = require("./helpers.js");
-var import_react = require("react");
 var import_callbackMerger = require("./generated-attributes/utils/callbackMerger.js");
 const defaultOptions = {
   name: null,

package/dist/cjs/styled/styledFunction.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styled/styledFunction.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { styled as baseStyled } from './system.js';\nimport { dsStyledComponentTransform, magicCssTransform } from './transformers/index.js';\nimport type {\n  AnyStyledRef,\n  Options,\n  OwnerInterface,\n  InnerRefInterface,\n  Theme,\n  ThemedStyledFunctionBase,\n} from './types.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\nimport { getPartProps } from './generated-attributes/generateAttributes.js';\nimport { mergeRefs } from './generated-attributes/utils/refMerger.js';\nimport { displayNameToKebabCase, displayNameToPropCase } from './helpers.js';\nimport React, { useMemo } from 'react';\nimport { callbackMerger } from './generated-attributes/utils/callbackMerger.js';\n\nconst defaultOptions: Options = {\n  name: null,\n  slot: null,\n};\n\nexport const styledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options: Options = defaultOptions,\n) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n  // We want to account for string | number | symbol that's why we transform it to `keyof any`\n  const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n  // Due to the recursive natura of this function, we can't type it properly\n  // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n  // @ts-expect-error explained above\n  const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a transformation to the expressions only.\n     * Since this resolver is returning a HOC of a styled-component, the syntax support for\n     * selecting the className of another styled-component is not available anymore.\n     * That's why we assign it a `dsStyledComponnentId`, we will replace the component's call for\n     * the corresponding id\n     */\n    const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);\n\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     * This makes it possible to use the following syntax:\n     * color: neutral-100;\n     * background-color: success-900;\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);\n\n    /**\n     * We coerce all the already written expressions with the default theme\n     * This prevents styled components to break when a theme is not provided\n     * either with the HOC or the ThemeProvider\n     */\n    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n    if (componentName && componentSlot) {\n      // Here we add the style overrides expression\n      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n    }\n\n    if (componentName && componentSlot === 'root') {\n      // Here we add the variant overrides from the user (only for the root slot\n      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n    }\n\n    /**\n     * Here we will fix the format of the style argument\n     * We possible added some new expressions into the mix,\n     * so we need to properly adjust the style arg\n     */\n    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n    // We will add autocalculated attributes to the styled component\n    const [displayName, attributes] = generateAutoCalculated(options);\n\n    // For each attribute function, we will call `attrs` func with it\n    // This will add the attributes to the styled component\n    const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n      baseStyledResolver,\n    );\n\n    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n    const ComponentWithRefsMerged = (props: OwnerInterface & InnerRefInterface<C> & { 'data-testid'?: string }) => {\n      // we may or not have data-testid at this point, so we need to calculate it\n      const dataTestId = props['data-testid'] ?? (displayName !== null ? displayNameToKebabCase(displayName) : '');\n      // we also need to calculate dataDimsumSlot at this point\n      const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : '';\n      // then we get the part props for this slot, and we cast it to use refs\n      const partProps = getPartProps({\n        ...props,\n        'data-testid': dataTestId,\n        'data-dimsum-slot': dataDimsumSlot,\n      }) as {\n        innerRef?: AnyStyledRef<HTMLElement>;\n      };\n\n      // then we merge the callbacks from the props with the ones from the part\n      // this object also has all global props from the parts\n      const resultingObjectWithCallbackMerged = callbackMerger(props, partProps);\n\n      const mergedRef = useMemo(\n        () => mergeRefs(props.innerRef, partProps.innerRef),\n        [props.innerRef, partProps.innerRef],\n      );\n\n      // We don't want to pass the owner props to the component down the line\n      const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n      // TODO:\n      // deploy the following code and see if we break something in a dedicated effort ASAP\n      // let ref = undefined;\n      // eslint-disable-next-line  @typescript-eslint/ban-ts-comment\n      // @ts-ignore : as of thue 16 may 2024, Component.target.$$typeof is undefined for non-native react components\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      // if (typeof Component?.target === 'string') {\n      //   ref = mergedRef;\n      // }\n\n      const propsWithRefMerged = {\n        ...restProps,\n        ...resultingObjectWithCallbackMerged,\n        // ref: ref,\n        ref: mergedRef,\n        innerRef: mergedRef,\n      } as React.ComponentProps<C>;\n\n      // TODO: check if we need to pass the ref to the component\n      // Check $$typeof to see if it's a react-forward-ref\n      // Check dsStyledComponentId to see if it's a styled component\n      // Check what to do with span, div, etc.\n      // Other cases should not receive ref...?\n\n      return <Component {...propsWithRefMerged} />;\n    };\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore We use dsStyledComponent to access the original's component id\n    ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId as string;\n    ComponentWithRefsMerged.toString = Component.toString;\n\n    return ComponentWithRefsMerged;\n  };\n\n  // Here we use arrow functions to preserve the `this` context\n  const styledAttributes = {\n    attrs: ((...args) => {\n      baseStyledResolver.attrs(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['attrs'],\n    withConfig: ((...args) => {\n      baseStyledResolver.withConfig(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['withConfig'],\n  };\n\n  return Object.assign(dsStyledResolver, styledAttributes);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsJV;AAlJb,mCAAsC;AACtC,oBAAqC;AACrC,0BAA8D;AAS9D,oCAAuC;AACvC,yBAA2E;AAC3E,yBAA4B;AAC5B,kCAAuC;AACvC,gCAA6B;AAC7B,uBAA0B;AAC1B,qBAA8D;AAC9D,mBAA+B;AAC/B,4BAA+B;AAE/B,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,iBAAiB,CAC5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,0DAAsB,eAAe,aAAa;AAIlD,QAAM,yBAAqB,cAAAA,QAAW,GAAG;AAKzC,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAQzF,UAAM,yCAAqC,gDAA2B,WAAW;AAQjF,UAAM,CAAC,mBAAmB,oBAAoB,QAAI,uCAAkB,UAAU,kCAAkC;AAOhH,UAAM,kCAA8B,sDAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,SAAK,gDAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,SAAK,kDAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,oBAAgB,gCAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,QAAI,oDAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,UAAM,0BAA0B,CAAC,UAA8E;AAE7G,YAAM,aAAa,MAAM,aAAa,MAAM,gBAAgB,WAAO,uCAAuB,WAAW,IAAI;AAEzG,YAAM,iBAAiB,gBAAgB,WAAO,sCAAsB,WAAW,IAAI;AAEnF,YAAM,gBAAY,wCAAa;AAAA,QAC7B,GAAG;AAAA,QACH,eAAe;AAAA,QACf,oBAAoB;AAAA,MACtB,CAAC;AAMD,YAAM,wCAAoC,sCAAe,OAAO,SAAS;AAEzE,YAAM,gBAAY;AAAA,QAChB,UAAM,4BAAU,MAAM,UAAU,UAAU,QAAQ;AAAA,QAClD,CAAC,MAAM,UAAU,UAAU,QAAQ;AAAA,MACrC;AAGA,YAAM,EAAE,eAAe,wBAAwB,GAAG,UAAU,IAAI;AAWhE,YAAM,qBAAqB;AAAA,QACzB,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,QAEH,KAAK;AAAA,QACL,UAAU;AAAA,MACZ;AAQA,aAAO,4CAAC,aAAW,GAAG,oBAAoB;AAAA,IAC5C;AAEA,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAIA,4BAAwB,sBAAsB,UAAU;AACxD,4BAAwB,WAAW,UAAU;AAE7C,WAAO;AAAA,EACT;AAGA,QAAM,mBAAmB;AAAA,IACvB,OAAQ,IAAI,SAAS;AACnB,yBAAmB,MAAM,GAAG,IAAI;AAChC,aAAO;AAAA,IACT;AAAA,IACA,YAAa,IAAI,SAAS;AACxB,yBAAmB,WAAW,GAAG,IAAI;AACrC,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
+  "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';\nimport React, { useMemo } from 'react';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { styled as baseStyled } from './system.js';\nimport { dsStyledComponentTransform, magicCssTransform } from './transformers/index.js';\nimport type {\n  AnyStyledRef,\n  Options,\n  OwnerInterface,\n  InnerRefInterface,\n  Theme,\n  ThemedStyledFunctionBase,\n} from './types.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\nimport { getPartProps } from './generated-attributes/generateAttributes.js';\nimport { mergeRefs } from './generated-attributes/utils/refMerger.js';\nimport { displayNameToKebabCase, displayNameToPropCase } from './helpers.js';\nimport { callbackMerger } from './generated-attributes/utils/callbackMerger.js';\n\nconst defaultOptions: Options = {\n  name: null,\n  slot: null,\n};\n\nexport const styledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options: Options = defaultOptions,\n) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n  // We want to account for string | number | symbol that's why we transform it to `keyof any`\n  const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n  // Due to the recursive natura of this function, we can't type it properly\n  // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n  // @ts-expect-error explained above\n  const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a transformation to the expressions only.\n     * Since this resolver is returning a HOC of a styled-component, the syntax support for\n     * selecting the className of another styled-component is not available anymore.\n     * That's why we assign it a `dsStyledComponnentId`, we will replace the component's call for\n     * the corresponding id\n     */\n    const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);\n\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     * This makes it possible to use the following syntax:\n     * color: neutral-100;\n     * background-color: success-900;\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);\n\n    /**\n     * We coerce all the already written expressions with the default theme\n     * This prevents styled components to break when a theme is not provided\n     * either with the HOC or the ThemeProvider\n     */\n    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n    if (componentName && componentSlot) {\n      // Here we add the style overrides expression\n      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n    }\n\n    if (componentName && componentSlot === 'root') {\n      // Here we add the variant overrides from the user (only for the root slot\n      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n    }\n\n    /**\n     * Here we will fix the format of the style argument\n     * We possible added some new expressions into the mix,\n     * so we need to properly adjust the style arg\n     */\n    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n    // We will add autocalculated attributes to the styled component\n    const [displayName, attributes] = generateAutoCalculated(options);\n\n    // For each attribute function, we will call `attrs` func with it\n    // This will add the attributes to the styled component\n    const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n      baseStyledResolver,\n    );\n\n    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n    const ComponentWithRefsMerged = (props: OwnerInterface & InnerRefInterface<C> & { 'data-testid'?: string }) => {\n      // we may or not have data-testid at this point, so we need to calculate it\n      const dataTestId = props['data-testid'] ?? (displayName !== null ? displayNameToKebabCase(displayName) : '');\n      // we also need to calculate dataDimsumSlot at this point\n      const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : '';\n      // then we get the part props for this slot, and we cast it to use refs\n      const partProps = getPartProps({\n        ...props,\n        'data-testid': dataTestId,\n        'data-dimsum-slot': dataDimsumSlot,\n      }) as {\n        innerRef?: AnyStyledRef<HTMLElement>;\n      };\n\n      // then we merge the callbacks from the props with the ones from the part\n      // this object also has all global props from the parts\n      const resultingObjectWithCallbackMerged = callbackMerger(props, partProps);\n\n      const mergedRef = useMemo(\n        () => mergeRefs(props.innerRef, partProps.innerRef),\n        [props.innerRef, partProps.innerRef],\n      );\n\n      // We don't want to pass the owner props to the component down the line\n      const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n      // TODO:\n      // deploy the following code and see if we break something in a dedicated effort ASAP\n      // let ref = undefined;\n      // eslint-disable-next-line  @typescript-eslint/ban-ts-comment\n      // @ts-ignore : as of thue 16 may 2024, Component.target.$$typeof is undefined for non-native react components\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      // if (typeof Component?.target === 'string') {\n      //   ref = mergedRef;\n      // }\n\n      const propsWithRefMerged = {\n        ...restProps,\n        ...resultingObjectWithCallbackMerged,\n        // ref: ref,\n        ref: mergedRef,\n        innerRef: mergedRef,\n      } as React.ComponentProps<C>;\n\n      // TODO: check if we need to pass the ref to the component\n      // Check $$typeof to see if it's a react-forward-ref\n      // Check dsStyledComponentId to see if it's a styled component\n      // Check what to do with span, div, etc.\n      // Other cases should not receive ref...?\n\n      return <Component {...propsWithRefMerged} />;\n    };\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore We use dsStyledComponent to access the original's component id\n    ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId as string;\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    ComponentWithRefsMerged.toString = Component.toString;\n\n    return ComponentWithRefsMerged;\n  };\n\n  // Here we use arrow functions to preserve the `this` context\n  const styledAttributes = {\n    attrs: ((...args) => {\n      baseStyledResolver.attrs(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['attrs'],\n    withConfig: ((...args) => {\n      baseStyledResolver.withConfig(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['withConfig'],\n  };\n\n  return Object.assign(dsStyledResolver, styledAttributes);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsJV;AAlJb,mBAA+B;AAC/B,mCAAsC;AACtC,oBAAqC;AACrC,0BAA8D;AAS9D,oCAAuC;AACvC,yBAA2E;AAC3E,yBAA4B;AAC5B,kCAAuC;AACvC,gCAA6B;AAC7B,uBAA0B;AAC1B,qBAA8D;AAC9D,4BAA+B;AAE/B,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,iBAAiB,CAC5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,0DAAsB,eAAe,aAAa;AAIlD,QAAM,yBAAqB,cAAAA,QAAW,GAAG;AAKzC,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAQzF,UAAM,yCAAqC,gDAA2B,WAAW;AAQjF,UAAM,CAAC,mBAAmB,oBAAoB,QAAI,uCAAkB,UAAU,kCAAkC;AAOhH,UAAM,kCAA8B,sDAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,SAAK,gDAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,SAAK,kDAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,oBAAgB,gCAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,QAAI,oDAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,UAAM,0BAA0B,CAAC,UAA8E;AAE7G,YAAM,aAAa,MAAM,aAAa,MAAM,gBAAgB,WAAO,uCAAuB,WAAW,IAAI;AAEzG,YAAM,iBAAiB,gBAAgB,WAAO,sCAAsB,WAAW,IAAI;AAEnF,YAAM,gBAAY,wCAAa;AAAA,QAC7B,GAAG;AAAA,QACH,eAAe;AAAA,QACf,oBAAoB;AAAA,MACtB,CAAC;AAMD,YAAM,wCAAoC,sCAAe,OAAO,SAAS;AAEzE,YAAM,gBAAY;AAAA,QAChB,UAAM,4BAAU,MAAM,UAAU,UAAU,QAAQ;AAAA,QAClD,CAAC,MAAM,UAAU,UAAU,QAAQ;AAAA,MACrC;AAGA,YAAM,EAAE,eAAe,wBAAwB,GAAG,UAAU,IAAI;AAWhE,YAAM,qBAAqB;AAAA,QACzB,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,QAEH,KAAK;AAAA,QACL,UAAU;AAAA,MACZ;AAQA,aAAO,4CAAC,aAAW,GAAG,oBAAoB;AAAA,IAC5C;AAEA,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAIA,4BAAwB,sBAAsB,UAAU;AAExD,4BAAwB,WAAW,UAAU;AAE7C,WAAO;AAAA,EACT;AAGA,QAAM,mBAAmB;AAAA,IACvB,OAAQ,IAAI,SAAS;AACnB,yBAAmB,MAAM,GAAG,IAAI;AAChC,aAAO;AAAA,IACT;AAAA,IACA,YAAa,IAAI,SAAS;AACxB,yBAAmB,WAAW,GAAG,IAAI;AACrC,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
   "names": ["baseStyled"]
 }

package/dist/cjs/styled/transformers/magicCssTransform.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/styled/transformers/magicCssTransform.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { th } from '../../th.js';\nimport type { Expressions, StyleArg } from '../types.js';\n\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[], Expressions] => {\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;ADAvB,gBAAmB;AAQnB,MAAM,cAAc;AAEpB,MAAM,aAAa,CAAC,aAA8C;AAChE,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,EAAG,QAAO,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,OAAQ,kBAAiB,KAAK,YAAY,KAAK,CAAC;AAAA,EAC1E,CAAC;AAED,SAAO,CAAC,OAAO,OAAO,eAAe,EAAE,KAAK,CAAC,GAAG,aAAa,EAAE,CAAC,GAAG,gBAAgB;AACrF;",
+  "sourcesContent": ["import { th } from '../../th.js';\nimport type { Expressions, StyleArg } from '../types.js';\n\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[], Expressions] => {\n  let matches;\n  let lastIndex = 0;\n  const splittedValue: string[] = [];\n  const themeGetters = [];\n  // what is the while with an assignment about???\n  //   not broken so not touching but what?\n  // eslint-disable-next-line no-cond-assign\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;ADAvB,gBAAmB;AAQnB,MAAM,cAAc;AAEpB,MAAM,aAAa,CAAC,aAA8C;AAChE,MAAI;AACJ,MAAI,YAAY;AAChB,QAAM,gBAA0B,CAAC;AACjC,QAAM,eAAe,CAAC;AAItB,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,EAAG,QAAO,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,OAAQ,kBAAiB,KAAK,YAAY,KAAK,CAAC;AAAA,EAC1E,CAAC;AAED,SAAO,CAAC,OAAO,OAAO,eAAe,EAAE,KAAK,CAAC,GAAG,aAAa,EAAE,CAAC,GAAG,gBAAgB;AACrF;",
   "names": []
 }

package/dist/esm/HtmlComponents.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { styled } from "./index.js";
+import { styled } from "./styled/index.js";
 import { xStyledCommonProps } from "./xStyledWrapper.js";
 const Address = styled("address")`
   ${xStyledCommonProps}

package/dist/esm/HtmlComponents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/HtmlComponents.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from './index.js';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\nimport { xStyledCommonProps } from './xStyledWrapper.js';\n\nexport const Address = styled('address')`\n  ${xStyledCommonProps}\n`;\nexport const Article = styled('article')`\n  ${xStyledCommonProps}\n`;\nexport const Aside = styled('aside')`\n  ${xStyledCommonProps}\n`;\nexport const Footer = styled('footer')`\n  ${xStyledCommonProps}\n`;\nexport const Header = styled('header')`\n  ${xStyledCommonProps}\n`;\nexport const H1 = styled('h1')`\n  ${xStyledCommonProps}\n`;\nexport const H2 = styled('h2')`\n  ${xStyledCommonProps}\n`;\nexport const H3 = styled('h3')`\n  ${xStyledCommonProps}\n`;\nexport const H4 = styled('h4')`\n  ${xStyledCommonProps}\n`;\nexport const H5 = styled('h5')`\n  ${xStyledCommonProps}\n`;\nexport const H6 = styled('h6')`\n  ${xStyledCommonProps}\n`;\nexport const Hgroup = styled('hgroup')`\n  ${xStyledCommonProps}\n`;\nexport const Main = styled('main')`\n  ${xStyledCommonProps}\n`;\nexport const Nav = styled('nav')`\n  ${xStyledCommonProps}\n`;\nexport const Section = styled('section')`\n  ${xStyledCommonProps}\n`;\nexport const Search = styled('search')`\n  ${xStyledCommonProps}\n`;\nexport const Blockquote = styled('blockquote')`\n  ${xStyledCommonProps}\n`;\nexport const Dd = styled('dd')`\n  ${xStyledCommonProps}\n`;\nexport const Div = styled('div')`\n  ${xStyledCommonProps}\n`;\nexport const Dl = styled('dl')`\n  ${xStyledCommonProps}\n`;\nexport const Dt = styled('dt')`\n  ${xStyledCommonProps}\n`;\nexport const Figcaption = styled('figcaption')`\n  ${xStyledCommonProps}\n`;\nexport const Figure = styled('figure')`\n  ${xStyledCommonProps}\n`;\nexport const Hr = styled('hr')`\n  ${xStyledCommonProps}\n`;\nexport const Li = styled('li')`\n  ${xStyledCommonProps}\n`;\nexport const Menu = styled('menu')`\n  ${xStyledCommonProps}\n`;\nexport const Ol = styled('ol')`\n  ${xStyledCommonProps}\n`;\nexport const P = styled('p')`\n  ${xStyledCommonProps}\n`;\nexport const Pre = styled('pre')`\n  ${xStyledCommonProps}\n`;\nexport const Ul = styled('ul')`\n  ${xStyledCommonProps}\n`;\nexport const A = styled('a')`\n  ${xStyledCommonProps}\n`;\nexport const Abbr = styled('abbr')`\n  ${xStyledCommonProps}\n`;\nexport const B = styled('b')`\n  ${xStyledCommonProps}\n`;\nexport const Bdi = styled('bdi')`\n  ${xStyledCommonProps}\n`;\nexport const Bdo = styled('bdo')`\n  ${xStyledCommonProps}\n`;\nexport const Br = styled('br')`\n  ${xStyledCommonProps}\n`;\nexport const Cite = styled('cite')`\n  ${xStyledCommonProps}\n`;\nexport const Code = styled('code')`\n  ${xStyledCommonProps}\n`;\nexport const Data = styled('data')`\n  ${xStyledCommonProps}\n`;\nexport const Dfn = styled('dfn')`\n  ${xStyledCommonProps}\n`;\nexport const Em = styled('em')`\n  ${xStyledCommonProps}\n`;\nexport const I = styled('i')`\n  ${xStyledCommonProps}\n`;\nexport const Kbd = styled('kbd')`\n  ${xStyledCommonProps}\n`;\nexport const Mark = styled('mark')`\n  ${xStyledCommonProps}\n`;\nexport const Q = styled('q')`\n  ${xStyledCommonProps}\n`;\nexport const Rp = styled('rp')`\n  ${xStyledCommonProps}\n`;\nexport const Rt = styled('rt')`\n  ${xStyledCommonProps}\n`;\nexport const Ruby = styled('ruby')`\n  ${xStyledCommonProps}\n`;\nexport const S = styled('s')`\n  ${xStyledCommonProps}\n`;\nexport const Samp = styled('samp')`\n  ${xStyledCommonProps}\n`;\nexport const Small = styled('small')`\n  ${xStyledCommonProps}\n`;\nexport const Span = styled('span')`\n  ${xStyledCommonProps}\n`;\nexport const Strong = styled('strong')`\n  ${xStyledCommonProps}\n`;\nexport const Sub = styled('sub')`\n  ${xStyledCommonProps}\n`;\nexport const Sup = styled('sup')`\n  ${xStyledCommonProps}\n`;\nexport const Time = styled('time')`\n  ${xStyledCommonProps}\n`;\nexport const U = styled('u')`\n  ${xStyledCommonProps}\n`;\nexport const Wbr = styled('wbr')`\n  ${xStyledCommonProps}\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from './styled/index.js';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\nimport { xStyledCommonProps } from './xStyledWrapper.js';\n\nexport const Address = styled('address')`\n  ${xStyledCommonProps}\n`;\nexport const Article = styled('article')`\n  ${xStyledCommonProps}\n`;\nexport const Aside = styled('aside')`\n  ${xStyledCommonProps}\n`;\nexport const Footer = styled('footer')`\n  ${xStyledCommonProps}\n`;\nexport const Header = styled('header')`\n  ${xStyledCommonProps}\n`;\nexport const H1 = styled('h1')`\n  ${xStyledCommonProps}\n`;\nexport const H2 = styled('h2')`\n  ${xStyledCommonProps}\n`;\nexport const H3 = styled('h3')`\n  ${xStyledCommonProps}\n`;\nexport const H4 = styled('h4')`\n  ${xStyledCommonProps}\n`;\nexport const H5 = styled('h5')`\n  ${xStyledCommonProps}\n`;\nexport const H6 = styled('h6')`\n  ${xStyledCommonProps}\n`;\nexport const Hgroup = styled('hgroup')`\n  ${xStyledCommonProps}\n`;\nexport const Main = styled('main')`\n  ${xStyledCommonProps}\n`;\nexport const Nav = styled('nav')`\n  ${xStyledCommonProps}\n`;\nexport const Section = styled('section')`\n  ${xStyledCommonProps}\n`;\nexport const Search = styled('search')`\n  ${xStyledCommonProps}\n`;\nexport const Blockquote = styled('blockquote')`\n  ${xStyledCommonProps}\n`;\nexport const Dd = styled('dd')`\n  ${xStyledCommonProps}\n`;\nexport const Div = styled('div')`\n  ${xStyledCommonProps}\n`;\nexport const Dl = styled('dl')`\n  ${xStyledCommonProps}\n`;\nexport const Dt = styled('dt')`\n  ${xStyledCommonProps}\n`;\nexport const Figcaption = styled('figcaption')`\n  ${xStyledCommonProps}\n`;\nexport const Figure = styled('figure')`\n  ${xStyledCommonProps}\n`;\nexport const Hr = styled('hr')`\n  ${xStyledCommonProps}\n`;\nexport const Li = styled('li')`\n  ${xStyledCommonProps}\n`;\nexport const Menu = styled('menu')`\n  ${xStyledCommonProps}\n`;\nexport const Ol = styled('ol')`\n  ${xStyledCommonProps}\n`;\nexport const P = styled('p')`\n  ${xStyledCommonProps}\n`;\nexport const Pre = styled('pre')`\n  ${xStyledCommonProps}\n`;\nexport const Ul = styled('ul')`\n  ${xStyledCommonProps}\n`;\nexport const A = styled('a')`\n  ${xStyledCommonProps}\n`;\nexport const Abbr = styled('abbr')`\n  ${xStyledCommonProps}\n`;\nexport const B = styled('b')`\n  ${xStyledCommonProps}\n`;\nexport const Bdi = styled('bdi')`\n  ${xStyledCommonProps}\n`;\nexport const Bdo = styled('bdo')`\n  ${xStyledCommonProps}\n`;\nexport const Br = styled('br')`\n  ${xStyledCommonProps}\n`;\nexport const Cite = styled('cite')`\n  ${xStyledCommonProps}\n`;\nexport const Code = styled('code')`\n  ${xStyledCommonProps}\n`;\nexport const Data = styled('data')`\n  ${xStyledCommonProps}\n`;\nexport const Dfn = styled('dfn')`\n  ${xStyledCommonProps}\n`;\nexport const Em = styled('em')`\n  ${xStyledCommonProps}\n`;\nexport const I = styled('i')`\n  ${xStyledCommonProps}\n`;\nexport const Kbd = styled('kbd')`\n  ${xStyledCommonProps}\n`;\nexport const Mark = styled('mark')`\n  ${xStyledCommonProps}\n`;\nexport const Q = styled('q')`\n  ${xStyledCommonProps}\n`;\nexport const Rp = styled('rp')`\n  ${xStyledCommonProps}\n`;\nexport const Rt = styled('rt')`\n  ${xStyledCommonProps}\n`;\nexport const Ruby = styled('ruby')`\n  ${xStyledCommonProps}\n`;\nexport const S = styled('s')`\n  ${xStyledCommonProps}\n`;\nexport const Samp = styled('samp')`\n  ${xStyledCommonProps}\n`;\nexport const Small = styled('small')`\n  ${xStyledCommonProps}\n`;\nexport const Span = styled('span')`\n  ${xStyledCommonProps}\n`;\nexport const Strong = styled('strong')`\n  ${xStyledCommonProps}\n`;\nexport const Sub = styled('sub')`\n  ${xStyledCommonProps}\n`;\nexport const Sup = styled('sup')`\n  ${xStyledCommonProps}\n`;\nexport const Time = styled('time')`\n  ${xStyledCommonProps}\n`;\nexport const U = styled('u')`\n  ${xStyledCommonProps}\n`;\nexport const Wbr = styled('wbr')`\n  ${xStyledCommonProps}\n`;\n"],
   "mappings": "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",
   "names": []
 }

package/dist/esm/index.js

@@ -1,67 +1,56 @@
 import * as React from "react";
-export * from "./globalStyles.js";
-export * from "./spaceUtilities.js";
-export * from "./mobileUtilities.js";
-export * from "./utils.js";
-export * from "./arithmetic.js";
-export * from "./th.js";
-export * from "./theme.js";
-export * from "./styled/index.js";
-import { position, typography } from "@xstyled/system";
-import { themeProviderHOC } from "./themeProviderHOC.js";
 import { ThemeContext } from "@xstyled/styled-components";
-import { xStyledCommonProps, XStyledWrapper } from "./xStyledWrapper.js";
+import { position, typography } from "@xstyled/system";
 import {
+  A,
+  Abbr,
   Address,
   Article,
   Aside,
+  B,
+  Bdi,
+  Bdo,
+  Blockquote,
+  Br,
+  Cite,
+  Code,
+  Data,
+  Dd,
+  Dfn,
+  Div,
+  Dl,
+  Dt,
+  Em,
+  Figcaption,
+  Figure,
   Footer,
-  Header,
   H1,
   H2,
   H3,
   H4,
   H5,
   H6,
+  Header,
   Hgroup,
-  Main,
-  Nav,
-  Section,
-  Search,
-  Blockquote,
-  Dd,
-  Div,
-  Dl,
-  Dt,
-  Figcaption,
-  Figure,
   Hr,
+  I,
+  Kbd,
   Li,
+  Main,
+  Mark,
   Menu,
+  Nav,
   Ol,
   P,
   Pre,
-  Ul,
-  A,
-  Abbr,
-  B,
-  Bdi,
-  Bdo,
-  Br,
-  Cite,
-  Code,
-  Data,
-  Dfn,
-  Em,
-  I,
-  Kbd,
-  Mark,
   Q,
   Rp,
   Rt,
   Ruby,
   S,
   Samp,
+  Search,
+  Section,
   Small,
   Span,
   Strong,
@@ -69,9 +58,20 @@ import {
   Sup,
   Time,
   U,
+  Ul,
   Wbr
 } from "./HtmlComponents.js";
+export * from "./arithmetic.js";
+export * from "./globalStyles.js";
 export * from "./mergeRefs.js";
+export * from "./mobileUtilities.js";
+export * from "./spaceUtilities.js";
+export * from "./styled/index.js";
+export * from "./th.js";
+export * from "./theme.js";
+import { themeProviderHOC } from "./themeProviderHOC.js";
+export * from "./utils.js";
+import { XStyledWrapper, xStyledCommonProps } from "./xStyledWrapper.js";
 import { useGetLayoutMode } from "./useGetLayoutMode.js";
 export {
   A,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 './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';\nexport {\n  Address,\n  Article,\n  Aside,\n  Footer,\n  Header,\n  H1,\n  H2,\n  H3,\n  H4,\n  H5,\n  H6,\n  Hgroup,\n  Main,\n  Nav,\n  Section,\n  Search,\n  Blockquote,\n  Dd,\n  Div,\n  Dl,\n  Dt,\n  Figcaption,\n  Figure,\n  Hr,\n  Li,\n  Menu,\n  Ol,\n  P,\n  Pre,\n  Ul,\n  A,\n  Abbr,\n  B,\n  Bdi,\n  Bdo,\n  Br,\n  Cite,\n  Code,\n  Data,\n  Dfn,\n  Em,\n  I,\n  Kbd,\n  Mark,\n  Q,\n  Rp,\n  Rt,\n  Ruby,\n  S,\n  Samp,\n  Small,\n  Span,\n  Strong,\n  Sub,\n  Sup,\n  Time,\n  U,\n  Wbr,\n} from './HtmlComponents.js';\nexport * from './mergeRefs.js';\n// styled components uses csstype types internally but doesn't solve the types export correctly\n//  so to fix ts2742 we need to re-export the types from csstype...\nexport type * from 'csstype';\nexport { useGetLayoutMode } from './useGetLayoutMode.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,UAAU,kBAAkB;AACrC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB,sBAAsB;AACnD;AAAA,EACE;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;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;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,OACK;AACP,cAAc;AAId,SAAS,wBAAwB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ThemeContext } from '@xstyled/styled-components';\nexport { position, typography } from '@xstyled/system';\nexport {\n  A,\n  Abbr,\n  Address,\n  Article,\n  Aside,\n  B,\n  Bdi,\n  Bdo,\n  Blockquote,\n  Br,\n  Cite,\n  Code,\n  Data,\n  Dd,\n  Dfn,\n  Div,\n  Dl,\n  Dt,\n  Em,\n  Figcaption,\n  Figure,\n  Footer,\n  H1,\n  H2,\n  H3,\n  H4,\n  H5,\n  H6,\n  Header,\n  Hgroup,\n  Hr,\n  I,\n  Kbd,\n  Li,\n  Main,\n  Mark,\n  Menu,\n  Nav,\n  Ol,\n  P,\n  Pre,\n  Q,\n  Rp,\n  Rt,\n  Ruby,\n  S,\n  Samp,\n  Search,\n  Section,\n  Small,\n  Span,\n  Strong,\n  Sub,\n  Sup,\n  Time,\n  U,\n  Ul,\n  Wbr,\n} from './HtmlComponents.js';\nexport * from './arithmetic.js';\nexport * from './globalStyles.js';\nexport * from './mergeRefs.js';\nexport * from './mobileUtilities.js';\nexport * from './spaceUtilities.js';\nexport * from './styled/index.js';\nexport * from './th.js';\nexport * from './theme.js';\nexport { themeProviderHOC } from './themeProviderHOC.js';\nexport * from './utils.js';\nexport { XStyledWrapper, xStyledCommonProps } from './xStyledWrapper.js';\n// styled components uses csstype types internally but doesn't solve the types export correctly\n//  so to fix ts2742 we need to re-export the types from csstype...\nexport type * from 'csstype';\nexport { useGetLayoutMode } from './useGetLayoutMode.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB;AAC7B,SAAS,UAAU,kBAAkB;AACrC;AAAA,EACE;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;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;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,OACK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,wBAAwB;AACjC,cAAc;AACd,SAAS,gBAAgB,0BAA0B;AAInD,SAAS,wBAAwB;",
   "names": []
 }

package/dist/esm/styled/expressions/genStyleOverridesExpression.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/styled/expressions/genStyleOverridesExpression.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { PropsWithTheme, Theme } from '../types.js';\nimport { theme as defaultTheme } from '../../theme.js';\nimport type { CSSObject } from 'styled-components';\n\nconst getStyleOverrides = (name: string, theme: Theme): CSSObject | null =>\n  theme.components?.[name]?.styleOverrides || null;\n\nexport const genStyleOverridesExpression =\n  (componentName: string, componentSlot: string) => (props: PropsWithTheme) => {\n    const styleOverrides = getStyleOverrides(componentName, props.theme ?? defaultTheme);\n    if (styleOverrides) {\n      return [styleOverrides[componentSlot]];\n    }\n    return null;\n  };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,SAAS,oBAAoB;AAGtC,MAAM,oBAAoB,CAAC,MAAc,UACvC,MAAM,aAAa,IAAI,GAAG,kBAAkB;AAEvC,MAAM,8BACX,CAAC,eAAuB,kBAA0B,CAAC,UAA0B;AAC3E,QAAM,iBAAiB,kBAAkB,eAAe,MAAM,SAAS,YAAY;AACnF,MAAI,gBAAgB;AAClB,WAAO,CAAC,eAAe,aAAa,CAAC;AAAA,EACvC;AACA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { CSSObject } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types.js';\nimport { theme as defaultTheme } from '../../theme.js';\n\nconst getStyleOverrides = (name: string, theme: Theme): CSSObject | null =>\n  theme.components?.[name]?.styleOverrides || null;\n\nexport const genStyleOverridesExpression =\n  (componentName: string, componentSlot: string) => (props: PropsWithTheme) => {\n    const styleOverrides = getStyleOverrides(componentName, props.theme ?? defaultTheme);\n    if (styleOverrides) {\n      return [styleOverrides[componentSlot]];\n    }\n    return null;\n  };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,SAAS,oBAAoB;AAEtC,MAAM,oBAAoB,CAAC,MAAc,UACvC,MAAM,aAAa,IAAI,GAAG,kBAAkB;AAEvC,MAAM,8BACX,CAAC,eAAuB,kBAA0B,CAAC,UAA0B;AAC3E,QAAM,iBAAiB,kBAAkB,eAAe,MAAM,SAAS,YAAY;AACnF,MAAI,gBAAgB;AAClB,WAAO,CAAC,eAAe,aAAa,CAAC;AAAA,EACvC;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/styled/expressions/genVariantOverridesExpression.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/styled/expressions/genVariantOverridesExpression.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { PropsWithTheme, Theme } from '../types.js';\nimport { theme as defaultTheme } from '../../theme.js';\nimport type { CSSObject } from 'styled-components';\nimport { propsToClassKey } from '../helpers.js';\n\nconst getVariantStyles = (name: string, theme: Theme): Record<string, CSSObject> => {\n  const variants = theme.components?.[name]?.variants || [];\n\n  return variants.reduce(\n    (styles, definition) => {\n      const key = propsToClassKey(definition.props);\n      styles[key] = definition.style;\n      return styles;\n    },\n    {} as Record<string, CSSObject>,\n  );\n};\n\nexport const genVariantOverridesExpression = (componentName: string) => (props: PropsWithTheme) => {\n  const theme = props.theme ?? defaultTheme;\n  const variantStyles = getVariantStyles(componentName, theme);\n\n  const themeVariants = theme?.components?.[componentName]?.variants || [];\n\n  return themeVariants.reduce(\n    (resultingStyles, themeVariant) => {\n      const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);\n      if (isMatch) {\n        resultingStyles.push(variantStyles[propsToClassKey(themeVariant.props)]);\n      }\n      return resultingStyles;\n    },\n    [] as CSSObject[keyof CSSObject][],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,SAAS,oBAAoB;AAEtC,SAAS,uBAAuB;AAEhC,MAAM,mBAAmB,CAAC,MAAc,UAA4C;AAClF,QAAM,WAAW,MAAM,aAAa,IAAI,GAAG,YAAY,CAAC;AAExD,SAAO,SAAS;AAAA,IACd,CAAC,QAAQ,eAAe;AACtB,YAAM,MAAM,gBAAgB,WAAW,KAAK;AAC5C,aAAO,GAAG,IAAI,WAAW;AACzB,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;AAEO,MAAM,gCAAgC,CAAC,kBAA0B,CAAC,UAA0B;AACjG,QAAM,QAAQ,MAAM,SAAS;AAC7B,QAAM,gBAAgB,iBAAiB,eAAe,KAAK;AAE3D,QAAM,gBAAgB,OAAO,aAAa,aAAa,GAAG,YAAY,CAAC;AAEvE,SAAO,cAAc;AAAA,IACnB,CAAC,iBAAiB,iBAAiB;AACjC,YAAM,UAAU,OAAO,KAAK,aAAa,KAAK,EAAE,MAAM,CAAC,QAAQ,MAAM,GAAG,MAAM,aAAa,MAAM,GAAG,CAAC;AACrG,UAAI,SAAS;AACX,wBAAgB,KAAK,cAAc,gBAAgB,aAAa,KAAK,CAAC,CAAC;AAAA,MACzE;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { CSSObject } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types.js';\nimport { theme as defaultTheme } from '../../theme.js';\nimport { propsToClassKey } from '../helpers.js';\n\nconst getVariantStyles = (name: string, theme: Theme): Record<string, CSSObject> => {\n  const variants = theme.components?.[name]?.variants || [];\n\n  return variants.reduce(\n    (styles, definition) => {\n      const key = propsToClassKey(definition.props);\n      styles[key] = definition.style;\n      return styles;\n    },\n    {} as Record<string, CSSObject>,\n  );\n};\n\nexport const genVariantOverridesExpression = (componentName: string) => (props: PropsWithTheme) => {\n  const theme = props.theme ?? defaultTheme;\n  const variantStyles = getVariantStyles(componentName, theme);\n\n  const themeVariants = theme?.components?.[componentName]?.variants || [];\n\n  return themeVariants.reduce(\n    (resultingStyles, themeVariant) => {\n      const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);\n      if (isMatch) {\n        resultingStyles.push(variantStyles[propsToClassKey(themeVariant.props)]);\n      }\n      return resultingStyles;\n    },\n    [] as CSSObject[keyof CSSObject][],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,SAAS,oBAAoB;AACtC,SAAS,uBAAuB;AAEhC,MAAM,mBAAmB,CAAC,MAAc,UAA4C;AAClF,QAAM,WAAW,MAAM,aAAa,IAAI,GAAG,YAAY,CAAC;AAExD,SAAO,SAAS;AAAA,IACd,CAAC,QAAQ,eAAe;AACtB,YAAM,MAAM,gBAAgB,WAAW,KAAK;AAC5C,aAAO,GAAG,IAAI,WAAW;AACzB,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;AAEO,MAAM,gCAAgC,CAAC,kBAA0B,CAAC,UAA0B;AACjG,QAAM,QAAQ,MAAM,SAAS;AAC7B,QAAM,gBAAgB,iBAAiB,eAAe,KAAK;AAE3D,QAAM,gBAAgB,OAAO,aAAa,aAAa,GAAG,YAAY,CAAC;AAEvE,SAAO,cAAc;AAAA,IACnB,CAAC,iBAAiB,iBAAiB;AACjC,YAAM,UAAU,OAAO,KAAK,aAAa,KAAK,EAAE,MAAM,CAAC,QAAQ,MAAM,GAAG,MAAM,aAAa,MAAM,GAAG,CAAC;AACrG,UAAI,SAAS;AACX,wBAAgB,KAAK,cAAc,gBAAgB,aAAa,KAAK,CAAC,CAAC;AAAA,MACzE;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;",
   "names": []
 }

package/dist/esm/styled/fixStyleArg.js

@@ -7,7 +7,8 @@ const fixStyleArg = (styleArg, numberOfNewExpressions) => {
     return Object.assign([...styleArg, ...placeholders], {
       raw: [...styleArg.raw, ...placeholders]
     });
-  } else if (typeof styleArg === "function") {
+  }
+  if (typeof styleArg === "function") {
     return (props) => styleArg({ ...props, theme: props.theme ?? defaultTheme });
   }
   return styleArg;

package/dist/esm/styled/fixStyleArg.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/fixStyleArg.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { theme as defaultTheme } from '../theme.js';\nimport type { PropsWithTheme, StyleArg } from './types.js';\n\nconst isTemplateStringsArray = (styleArg: StyleArg): styleArg is TemplateStringsArray => Array.isArray(styleArg);\n\nexport const fixStyleArg = (styleArg: StyleArg, numberOfNewExpressions: number): StyleArg => {\n  if (isTemplateStringsArray(styleArg) && numberOfNewExpressions > 0) {\n    // Here we are adding placeholders for all the new functions that we are gonna call\n    const placeholders = new Array(numberOfNewExpressions).fill('') as string[];\n    return Object.assign([...styleArg, ...placeholders], {\n      raw: [...styleArg.raw, ...placeholders],\n    });\n  } else if (typeof styleArg === 'function') {\n    // Here we just coerce with the default theme\n    return (props: PropsWithTheme) => styleArg({ ...props, theme: props.theme ?? defaultTheme });\n  }\n  return styleArg;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,oBAAoB;AAGtC,MAAM,yBAAyB,CAAC,aAAyD,MAAM,QAAQ,QAAQ;AAExG,MAAM,cAAc,CAAC,UAAoB,2BAA6C;AAC3F,MAAI,uBAAuB,QAAQ,KAAK,yBAAyB,GAAG;AAElE,UAAM,eAAe,IAAI,MAAM,sBAAsB,EAAE,KAAK,EAAE;AAC9D,WAAO,OAAO,OAAO,CAAC,GAAG,UAAU,GAAG,YAAY,GAAG;AAAA,MACnD,KAAK,CAAC,GAAG,SAAS,KAAK,GAAG,YAAY;AAAA,IACxC,CAAC;AAAA,EACH,WAAW,OAAO,aAAa,YAAY;AAEzC,WAAO,CAAC,UAA0B,SAAS,EAAE,GAAG,OAAO,OAAO,MAAM,SAAS,aAAa,CAAC;AAAA,EAC7F;AACA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { theme as defaultTheme } from '../theme.js';\nimport type { PropsWithTheme, StyleArg } from './types.js';\n\nconst isTemplateStringsArray = (styleArg: StyleArg): styleArg is TemplateStringsArray => Array.isArray(styleArg);\n\nexport const fixStyleArg = (styleArg: StyleArg, numberOfNewExpressions: number): StyleArg => {\n  if (isTemplateStringsArray(styleArg) && numberOfNewExpressions > 0) {\n    // Here we are adding placeholders for all the new functions that we are gonna call\n    const placeholders = new Array(numberOfNewExpressions).fill('') as string[];\n    return Object.assign([...styleArg, ...placeholders], {\n      raw: [...styleArg.raw, ...placeholders],\n    });\n  }\n  if (typeof styleArg === 'function') {\n    // Here we just coerce with the default theme\n    return (props: PropsWithTheme) => styleArg({ ...props, theme: props.theme ?? defaultTheme });\n  }\n  return styleArg;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,oBAAoB;AAGtC,MAAM,yBAAyB,CAAC,aAAyD,MAAM,QAAQ,QAAQ;AAExG,MAAM,cAAc,CAAC,UAAoB,2BAA6C;AAC3F,MAAI,uBAAuB,QAAQ,KAAK,yBAAyB,GAAG;AAElE,UAAM,eAAe,IAAI,MAAM,sBAAsB,EAAE,KAAK,EAAE;AAC9D,WAAO,OAAO,OAAO,CAAC,GAAG,UAAU,GAAG,YAAY,GAAG;AAAA,MACnD,KAAK,CAAC,GAAG,SAAS,KAAK,GAAG,YAAY;AAAA,IACxC,CAAC;AAAA,EACH;AACA,MAAI,OAAO,aAAa,YAAY;AAElC,WAAO,CAAC,UAA0B,SAAS,EAAE,GAAG,OAAO,OAAO,MAAM,SAAS,aAAa,CAAC;AAAA,EAC7F;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/styled/styledFunction.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { checkNamingConvention } from "./checkNamingConvention.js";
 import { styled as baseStyled } from "./system.js";
 import { dsStyledComponentTransform, magicCssTransform } from "./transformers/index.js";
@@ -10,7 +11,6 @@ import { generateAutoCalculated } from "./generated-attributes/index.js";
 import { getPartProps } from "./generated-attributes/generateAttributes.js";
 import { mergeRefs } from "./generated-attributes/utils/refMerger.js";
 import { displayNameToKebabCase, displayNameToPropCase } from "./helpers.js";
-import { useMemo } from "react";
 import { callbackMerger } from "./generated-attributes/utils/callbackMerger.js";
 const defaultOptions = {
   name: null,

package/dist/esm/styled/styledFunction.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/styledFunction.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { styled as baseStyled } from './system.js';\nimport { dsStyledComponentTransform, magicCssTransform } from './transformers/index.js';\nimport type {\n  AnyStyledRef,\n  Options,\n  OwnerInterface,\n  InnerRefInterface,\n  Theme,\n  ThemedStyledFunctionBase,\n} from './types.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\nimport { getPartProps } from './generated-attributes/generateAttributes.js';\nimport { mergeRefs } from './generated-attributes/utils/refMerger.js';\nimport { displayNameToKebabCase, displayNameToPropCase } from './helpers.js';\nimport React, { useMemo } from 'react';\nimport { callbackMerger } from './generated-attributes/utils/callbackMerger.js';\n\nconst defaultOptions: Options = {\n  name: null,\n  slot: null,\n};\n\nexport const styledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options: Options = defaultOptions,\n) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n  // We want to account for string | number | symbol that's why we transform it to `keyof any`\n  const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n  // Due to the recursive natura of this function, we can't type it properly\n  // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n  // @ts-expect-error explained above\n  const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a transformation to the expressions only.\n     * Since this resolver is returning a HOC of a styled-component, the syntax support for\n     * selecting the className of another styled-component is not available anymore.\n     * That's why we assign it a `dsStyledComponnentId`, we will replace the component's call for\n     * the corresponding id\n     */\n    const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);\n\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     * This makes it possible to use the following syntax:\n     * color: neutral-100;\n     * background-color: success-900;\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);\n\n    /**\n     * We coerce all the already written expressions with the default theme\n     * This prevents styled components to break when a theme is not provided\n     * either with the HOC or the ThemeProvider\n     */\n    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n    if (componentName && componentSlot) {\n      // Here we add the style overrides expression\n      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n    }\n\n    if (componentName && componentSlot === 'root') {\n      // Here we add the variant overrides from the user (only for the root slot\n      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n    }\n\n    /**\n     * Here we will fix the format of the style argument\n     * We possible added some new expressions into the mix,\n     * so we need to properly adjust the style arg\n     */\n    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n    // We will add autocalculated attributes to the styled component\n    const [displayName, attributes] = generateAutoCalculated(options);\n\n    // For each attribute function, we will call `attrs` func with it\n    // This will add the attributes to the styled component\n    const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n      baseStyledResolver,\n    );\n\n    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n    const ComponentWithRefsMerged = (props: OwnerInterface & InnerRefInterface<C> & { 'data-testid'?: string }) => {\n      // we may or not have data-testid at this point, so we need to calculate it\n      const dataTestId = props['data-testid'] ?? (displayName !== null ? displayNameToKebabCase(displayName) : '');\n      // we also need to calculate dataDimsumSlot at this point\n      const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : '';\n      // then we get the part props for this slot, and we cast it to use refs\n      const partProps = getPartProps({\n        ...props,\n        'data-testid': dataTestId,\n        'data-dimsum-slot': dataDimsumSlot,\n      }) as {\n        innerRef?: AnyStyledRef<HTMLElement>;\n      };\n\n      // then we merge the callbacks from the props with the ones from the part\n      // this object also has all global props from the parts\n      const resultingObjectWithCallbackMerged = callbackMerger(props, partProps);\n\n      const mergedRef = useMemo(\n        () => mergeRefs(props.innerRef, partProps.innerRef),\n        [props.innerRef, partProps.innerRef],\n      );\n\n      // We don't want to pass the owner props to the component down the line\n      const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n      // TODO:\n      // deploy the following code and see if we break something in a dedicated effort ASAP\n      // let ref = undefined;\n      // eslint-disable-next-line  @typescript-eslint/ban-ts-comment\n      // @ts-ignore : as of thue 16 may 2024, Component.target.$$typeof is undefined for non-native react components\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      // if (typeof Component?.target === 'string') {\n      //   ref = mergedRef;\n      // }\n\n      const propsWithRefMerged = {\n        ...restProps,\n        ...resultingObjectWithCallbackMerged,\n        // ref: ref,\n        ref: mergedRef,\n        innerRef: mergedRef,\n      } as React.ComponentProps<C>;\n\n      // TODO: check if we need to pass the ref to the component\n      // Check $$typeof to see if it's a react-forward-ref\n      // Check dsStyledComponentId to see if it's a styled component\n      // Check what to do with span, div, etc.\n      // Other cases should not receive ref...?\n\n      return <Component {...propsWithRefMerged} />;\n    };\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore We use dsStyledComponent to access the original's component id\n    ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId as string;\n    ComponentWithRefsMerged.toString = Component.toString;\n\n    return ComponentWithRefsMerged;\n  };\n\n  // Here we use arrow functions to preserve the `this` context\n  const styledAttributes = {\n    attrs: ((...args) => {\n      baseStyledResolver.attrs(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['attrs'],\n    withConfig: ((...args) => {\n      baseStyledResolver.withConfig(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['withConfig'],\n  };\n\n  return Object.assign(dsStyledResolver, styledAttributes);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsJV;AAlJb,SAAS,6BAA6B;AACtC,SAAS,UAAU,kBAAkB;AACrC,SAAS,4BAA4B,yBAAyB;AAS9D,SAAS,8BAA8B;AACvC,SAAS,6BAA6B,qCAAqC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,6BAA6B;AAC9D,SAAgB,eAAe;AAC/B,SAAS,sBAAsB;AAE/B,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,iBAAiB,CAC5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,wBAAsB,eAAe,aAAa;AAIlD,QAAM,qBAAqB,WAAW,GAAG;AAKzC,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAQzF,UAAM,qCAAqC,2BAA2B,WAAW;AAQjF,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,kBAAkB,UAAU,kCAAkC;AAOhH,UAAM,8BAA8B,uBAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,KAAK,4BAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,KAAK,8BAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,gBAAgB,YAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,IAAI,uBAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,UAAM,0BAA0B,CAAC,UAA8E;AAE7G,YAAM,aAAa,MAAM,aAAa,MAAM,gBAAgB,OAAO,uBAAuB,WAAW,IAAI;AAEzG,YAAM,iBAAiB,gBAAgB,OAAO,sBAAsB,WAAW,IAAI;AAEnF,YAAM,YAAY,aAAa;AAAA,QAC7B,GAAG;AAAA,QACH,eAAe;AAAA,QACf,oBAAoB;AAAA,MACtB,CAAC;AAMD,YAAM,oCAAoC,eAAe,OAAO,SAAS;AAEzE,YAAM,YAAY;AAAA,QAChB,MAAM,UAAU,MAAM,UAAU,UAAU,QAAQ;AAAA,QAClD,CAAC,MAAM,UAAU,UAAU,QAAQ;AAAA,MACrC;AAGA,YAAM,EAAE,eAAe,wBAAwB,GAAG,UAAU,IAAI;AAWhE,YAAM,qBAAqB;AAAA,QACzB,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,QAEH,KAAK;AAAA,QACL,UAAU;AAAA,MACZ;AAQA,aAAO,oBAAC,aAAW,GAAG,oBAAoB;AAAA,IAC5C;AAEA,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAIA,4BAAwB,sBAAsB,UAAU;AACxD,4BAAwB,WAAW,UAAU;AAE7C,WAAO;AAAA,EACT;AAGA,QAAM,mBAAmB;AAAA,IACvB,OAAQ,IAAI,SAAS;AACnB,yBAAmB,MAAM,GAAG,IAAI;AAChC,aAAO;AAAA,IACT;AAAA,IACA,YAAa,IAAI,SAAS;AACxB,yBAAmB,WAAW,GAAG,IAAI;AACrC,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';\nimport React, { useMemo } from 'react';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { styled as baseStyled } from './system.js';\nimport { dsStyledComponentTransform, magicCssTransform } from './transformers/index.js';\nimport type {\n  AnyStyledRef,\n  Options,\n  OwnerInterface,\n  InnerRefInterface,\n  Theme,\n  ThemedStyledFunctionBase,\n} from './types.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\nimport { getPartProps } from './generated-attributes/generateAttributes.js';\nimport { mergeRefs } from './generated-attributes/utils/refMerger.js';\nimport { displayNameToKebabCase, displayNameToPropCase } from './helpers.js';\nimport { callbackMerger } from './generated-attributes/utils/callbackMerger.js';\n\nconst defaultOptions: Options = {\n  name: null,\n  slot: null,\n};\n\nexport const styledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options: Options = defaultOptions,\n) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n  // We want to account for string | number | symbol that's why we transform it to `keyof any`\n  const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n  // Due to the recursive natura of this function, we can't type it properly\n  // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n  // @ts-expect-error explained above\n  const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a transformation to the expressions only.\n     * Since this resolver is returning a HOC of a styled-component, the syntax support for\n     * selecting the className of another styled-component is not available anymore.\n     * That's why we assign it a `dsStyledComponnentId`, we will replace the component's call for\n     * the corresponding id\n     */\n    const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);\n\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     * This makes it possible to use the following syntax:\n     * color: neutral-100;\n     * background-color: success-900;\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);\n\n    /**\n     * We coerce all the already written expressions with the default theme\n     * This prevents styled components to break when a theme is not provided\n     * either with the HOC or the ThemeProvider\n     */\n    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n    if (componentName && componentSlot) {\n      // Here we add the style overrides expression\n      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n    }\n\n    if (componentName && componentSlot === 'root') {\n      // Here we add the variant overrides from the user (only for the root slot\n      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n    }\n\n    /**\n     * Here we will fix the format of the style argument\n     * We possible added some new expressions into the mix,\n     * so we need to properly adjust the style arg\n     */\n    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n    // We will add autocalculated attributes to the styled component\n    const [displayName, attributes] = generateAutoCalculated(options);\n\n    // For each attribute function, we will call `attrs` func with it\n    // This will add the attributes to the styled component\n    const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n      baseStyledResolver,\n    );\n\n    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n    const ComponentWithRefsMerged = (props: OwnerInterface & InnerRefInterface<C> & { 'data-testid'?: string }) => {\n      // we may or not have data-testid at this point, so we need to calculate it\n      const dataTestId = props['data-testid'] ?? (displayName !== null ? displayNameToKebabCase(displayName) : '');\n      // we also need to calculate dataDimsumSlot at this point\n      const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : '';\n      // then we get the part props for this slot, and we cast it to use refs\n      const partProps = getPartProps({\n        ...props,\n        'data-testid': dataTestId,\n        'data-dimsum-slot': dataDimsumSlot,\n      }) as {\n        innerRef?: AnyStyledRef<HTMLElement>;\n      };\n\n      // then we merge the callbacks from the props with the ones from the part\n      // this object also has all global props from the parts\n      const resultingObjectWithCallbackMerged = callbackMerger(props, partProps);\n\n      const mergedRef = useMemo(\n        () => mergeRefs(props.innerRef, partProps.innerRef),\n        [props.innerRef, partProps.innerRef],\n      );\n\n      // We don't want to pass the owner props to the component down the line\n      const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n      // TODO:\n      // deploy the following code and see if we break something in a dedicated effort ASAP\n      // let ref = undefined;\n      // eslint-disable-next-line  @typescript-eslint/ban-ts-comment\n      // @ts-ignore : as of thue 16 may 2024, Component.target.$$typeof is undefined for non-native react components\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      // if (typeof Component?.target === 'string') {\n      //   ref = mergedRef;\n      // }\n\n      const propsWithRefMerged = {\n        ...restProps,\n        ...resultingObjectWithCallbackMerged,\n        // ref: ref,\n        ref: mergedRef,\n        innerRef: mergedRef,\n      } as React.ComponentProps<C>;\n\n      // TODO: check if we need to pass the ref to the component\n      // Check $$typeof to see if it's a react-forward-ref\n      // Check dsStyledComponentId to see if it's a styled component\n      // Check what to do with span, div, etc.\n      // Other cases should not receive ref...?\n\n      return <Component {...propsWithRefMerged} />;\n    };\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore We use dsStyledComponent to access the original's component id\n    ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId as string;\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    ComponentWithRefsMerged.toString = Component.toString;\n\n    return ComponentWithRefsMerged;\n  };\n\n  // Here we use arrow functions to preserve the `this` context\n  const styledAttributes = {\n    attrs: ((...args) => {\n      baseStyledResolver.attrs(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['attrs'],\n    withConfig: ((...args) => {\n      baseStyledResolver.withConfig(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['withConfig'],\n  };\n\n  return Object.assign(dsStyledResolver, styledAttributes);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsJV;AAlJb,SAAgB,eAAe;AAC/B,SAAS,6BAA6B;AACtC,SAAS,UAAU,kBAAkB;AACrC,SAAS,4BAA4B,yBAAyB;AAS9D,SAAS,8BAA8B;AACvC,SAAS,6BAA6B,qCAAqC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,sBAAsB;AAE/B,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,iBAAiB,CAC5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,wBAAsB,eAAe,aAAa;AAIlD,QAAM,qBAAqB,WAAW,GAAG;AAKzC,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAQzF,UAAM,qCAAqC,2BAA2B,WAAW;AAQjF,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,kBAAkB,UAAU,kCAAkC;AAOhH,UAAM,8BAA8B,uBAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,KAAK,4BAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,KAAK,8BAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,gBAAgB,YAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,IAAI,uBAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,UAAM,0BAA0B,CAAC,UAA8E;AAE7G,YAAM,aAAa,MAAM,aAAa,MAAM,gBAAgB,OAAO,uBAAuB,WAAW,IAAI;AAEzG,YAAM,iBAAiB,gBAAgB,OAAO,sBAAsB,WAAW,IAAI;AAEnF,YAAM,YAAY,aAAa;AAAA,QAC7B,GAAG;AAAA,QACH,eAAe;AAAA,QACf,oBAAoB;AAAA,MACtB,CAAC;AAMD,YAAM,oCAAoC,eAAe,OAAO,SAAS;AAEzE,YAAM,YAAY;AAAA,QAChB,MAAM,UAAU,MAAM,UAAU,UAAU,QAAQ;AAAA,QAClD,CAAC,MAAM,UAAU,UAAU,QAAQ;AAAA,MACrC;AAGA,YAAM,EAAE,eAAe,wBAAwB,GAAG,UAAU,IAAI;AAWhE,YAAM,qBAAqB;AAAA,QACzB,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,QAEH,KAAK;AAAA,QACL,UAAU;AAAA,MACZ;AAQA,aAAO,oBAAC,aAAW,GAAG,oBAAoB;AAAA,IAC5C;AAEA,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAIA,4BAAwB,sBAAsB,UAAU;AAExD,4BAAwB,WAAW,UAAU;AAE7C,WAAO;AAAA,EACT;AAGA,QAAM,mBAAmB;AAAA,IACvB,OAAQ,IAAI,SAAS;AACnB,yBAAmB,MAAM,GAAG,IAAI;AAChC,aAAO;AAAA,IACT;AAAA,IACA,YAAa,IAAI,SAAS;AACxB,yBAAmB,WAAW,GAAG,IAAI;AACrC,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
   "names": []
 }

package/dist/esm/styled/transformers/magicCssTransform.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/styled/transformers/magicCssTransform.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th } from '../../th.js';\nimport type { Expressions, StyleArg } from '../types.js';\n\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[], Expressions] => {\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU;AAQnB,MAAM,cAAc;AAEpB,MAAM,aAAa,CAAC,aAA8C;AAChE,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,GAAG,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,EAAG,QAAO,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,OAAQ,kBAAiB,KAAK,YAAY,KAAK,CAAC;AAAA,EAC1E,CAAC;AAED,SAAO,CAAC,OAAO,OAAO,eAAe,EAAE,KAAK,CAAC,GAAG,aAAa,EAAE,CAAC,GAAG,gBAAgB;AACrF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th } from '../../th.js';\nimport type { Expressions, StyleArg } from '../types.js';\n\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[], Expressions] => {\n  let matches;\n  let lastIndex = 0;\n  const splittedValue: string[] = [];\n  const themeGetters = [];\n  // what is the while with an assignment about???\n  //   not broken so not touching but what?\n  // eslint-disable-next-line no-cond-assign\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU;AAQnB,MAAM,cAAc;AAEpB,MAAM,aAAa,CAAC,aAA8C;AAChE,MAAI;AACJ,MAAI,YAAY;AAChB,QAAM,gBAA0B,CAAC;AACjC,QAAM,eAAe,CAAC;AAItB,SAAQ,UAAU,YAAY,KAAK,QAAQ,GAAI;AAC7C,UAAM,CAAC,KAAK,IAAI;AAChB,kBAAc,KAAK,SAAS,MAAM,WAAW,QAAQ,KAAK,CAAC;AAE3D,iBAAa,KAAK,GAAG,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,EAAG,QAAO,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,OAAQ,kBAAiB,KAAK,YAAY,KAAK,CAAC;AAAA,EAC1E,CAAC;AAED,SAAO,CAAC,OAAO,OAAO,eAAe,EAAE,KAAK,CAAC,GAAG,aAAa,EAAE,CAAC,GAAG,gBAAgB;AACrF;",
   "names": []
 }

package/dist/types/HtmlComponents.d.ts

@@ -1,58 +1,58 @@
-export declare const Address: import("styled-components").StyledComponent<"address", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"address">, never>;
-export declare const Article: import("styled-components").StyledComponent<"article", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"article">, never>;
-export declare const Aside: import("styled-components").StyledComponent<"aside", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"aside">, never>;
-export declare const Footer: import("styled-components").StyledComponent<"footer", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"footer">, never>;
-export declare const Header: import("styled-components").StyledComponent<"header", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"header">, never>;
-export declare const H1: import("styled-components").StyledComponent<"h1", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"h1">, never>;
-export declare const H2: import("styled-components").StyledComponent<"h2", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"h2">, never>;
-export declare const H3: import("styled-components").StyledComponent<"h3", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"h3">, never>;
-export declare const H4: import("styled-components").StyledComponent<"h4", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"h4">, never>;
-export declare const H5: import("styled-components").StyledComponent<"h5", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"h5">, never>;
-export declare const H6: import("styled-components").StyledComponent<"h6", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"h6">, never>;
-export declare const Hgroup: import("styled-components").StyledComponent<"hgroup", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"hgroup">, never>;
-export declare const Main: import("styled-components").StyledComponent<"main", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"main">, never>;
-export declare const Nav: import("styled-components").StyledComponent<"nav", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"nav">, never>;
-export declare const Section: import("styled-components").StyledComponent<"section", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"section">, never>;
-export declare const Search: import("styled-components").StyledComponent<"search", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"search">, never>;
-export declare const Blockquote: import("styled-components").StyledComponent<"blockquote", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"blockquote">, never>;
-export declare const Dd: import("styled-components").StyledComponent<"dd", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"dd">, never>;
-export declare const Div: import("styled-components").StyledComponent<"div", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"div">, never>;
-export declare const Dl: import("styled-components").StyledComponent<"dl", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"dl">, never>;
-export declare const Dt: import("styled-components").StyledComponent<"dt", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"dt">, never>;
-export declare const Figcaption: import("styled-components").StyledComponent<"figcaption", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"figcaption">, never>;
-export declare const Figure: import("styled-components").StyledComponent<"figure", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"figure">, never>;
-export declare const Hr: import("styled-components").StyledComponent<"hr", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"hr">, never>;
-export declare const Li: import("styled-components").StyledComponent<"li", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"li">, never>;
-export declare const Menu: import("styled-components").StyledComponent<"menu", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"menu">, never>;
-export declare const Ol: import("styled-components").StyledComponent<"ol", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"ol">, never>;
-export declare const P: import("styled-components").StyledComponent<"p", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"p">, never>;
-export declare const Pre: import("styled-components").StyledComponent<"pre", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"pre">, never>;
-export declare const Ul: import("styled-components").StyledComponent<"ul", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"ul">, never>;
-export declare const A: import("styled-components").StyledComponent<"a", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"a">, never>;
-export declare const Abbr: import("styled-components").StyledComponent<"abbr", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"abbr">, never>;
-export declare const B: import("styled-components").StyledComponent<"b", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"b">, never>;
-export declare const Bdi: import("styled-components").StyledComponent<"bdi", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"bdi">, never>;
-export declare const Bdo: import("styled-components").StyledComponent<"bdo", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"bdo">, never>;
-export declare const Br: import("styled-components").StyledComponent<"br", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"br">, never>;
-export declare const Cite: import("styled-components").StyledComponent<"cite", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"cite">, never>;
-export declare const Code: import("styled-components").StyledComponent<"code", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"code">, never>;
-export declare const Data: import("styled-components").StyledComponent<"data", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"data">, never>;
-export declare const Dfn: import("styled-components").StyledComponent<"dfn", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"dfn">, never>;
-export declare const Em: import("styled-components").StyledComponent<"em", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"em">, never>;
-export declare const I: import("styled-components").StyledComponent<"i", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"i">, never>;
-export declare const Kbd: import("styled-components").StyledComponent<"kbd", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"kbd">, never>;
-export declare const Mark: import("styled-components").StyledComponent<"mark", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"mark">, never>;
-export declare const Q: import("styled-components").StyledComponent<"q", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"q">, never>;
-export declare const Rp: import("styled-components").StyledComponent<"rp", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"rp">, never>;
-export declare const Rt: import("styled-components").StyledComponent<"rt", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"rt">, never>;
-export declare const Ruby: import("styled-components").StyledComponent<"ruby", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"ruby">, never>;
-export declare const S: import("styled-components").StyledComponent<"s", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"s">, never>;
-export declare const Samp: import("styled-components").StyledComponent<"samp", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"samp">, never>;
-export declare const Small: import("styled-components").StyledComponent<"small", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"small">, never>;
-export declare const Span: import("styled-components").StyledComponent<"span", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"span">, never>;
-export declare const Strong: import("styled-components").StyledComponent<"strong", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"strong">, never>;
-export declare const Sub: import("styled-components").StyledComponent<"sub", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"sub">, never>;
-export declare const Sup: import("styled-components").StyledComponent<"sup", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"sup">, never>;
-export declare const Time: import("styled-components").StyledComponent<"time", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"time">, never>;
-export declare const U: import("styled-components").StyledComponent<"u", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"u">, never>;
-export declare const Wbr: import("styled-components").StyledComponent<"wbr", import("./index.js").Theme, object & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"wbr">, never>;
+export declare const Address: import("styled-components").StyledComponent<"address", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"address">, never>;
+export declare const Article: import("styled-components").StyledComponent<"article", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"article">, never>;
+export declare const Aside: import("styled-components").StyledComponent<"aside", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"aside">, never>;
+export declare const Footer: import("styled-components").StyledComponent<"footer", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"footer">, never>;
+export declare const Header: import("styled-components").StyledComponent<"header", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"header">, never>;
+export declare const H1: import("styled-components").StyledComponent<"h1", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"h1">, never>;
+export declare const H2: import("styled-components").StyledComponent<"h2", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"h2">, never>;
+export declare const H3: import("styled-components").StyledComponent<"h3", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"h3">, never>;
+export declare const H4: import("styled-components").StyledComponent<"h4", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"h4">, never>;
+export declare const H5: import("styled-components").StyledComponent<"h5", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"h5">, never>;
+export declare const H6: import("styled-components").StyledComponent<"h6", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"h6">, never>;
+export declare const Hgroup: import("styled-components").StyledComponent<"hgroup", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"hgroup">, never>;
+export declare const Main: import("styled-components").StyledComponent<"main", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"main">, never>;
+export declare const Nav: import("styled-components").StyledComponent<"nav", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"nav">, never>;
+export declare const Section: import("styled-components").StyledComponent<"section", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"section">, never>;
+export declare const Search: import("styled-components").StyledComponent<"search", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"search">, never>;
+export declare const Blockquote: import("styled-components").StyledComponent<"blockquote", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"blockquote">, never>;
+export declare const Dd: import("styled-components").StyledComponent<"dd", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"dd">, never>;
+export declare const Div: import("styled-components").StyledComponent<"div", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"div">, never>;
+export declare const Dl: import("styled-components").StyledComponent<"dl", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"dl">, never>;
+export declare const Dt: import("styled-components").StyledComponent<"dt", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"dt">, never>;
+export declare const Figcaption: import("styled-components").StyledComponent<"figcaption", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"figcaption">, never>;
+export declare const Figure: import("styled-components").StyledComponent<"figure", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"figure">, never>;
+export declare const Hr: import("styled-components").StyledComponent<"hr", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"hr">, never>;
+export declare const Li: import("styled-components").StyledComponent<"li", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"li">, never>;
+export declare const Menu: import("styled-components").StyledComponent<"menu", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"menu">, never>;
+export declare const Ol: import("styled-components").StyledComponent<"ol", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"ol">, never>;
+export declare const P: import("styled-components").StyledComponent<"p", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"p">, never>;
+export declare const Pre: import("styled-components").StyledComponent<"pre", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"pre">, never>;
+export declare const Ul: import("styled-components").StyledComponent<"ul", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"ul">, never>;
+export declare const A: import("styled-components").StyledComponent<"a", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"a">, never>;
+export declare const Abbr: import("styled-components").StyledComponent<"abbr", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"abbr">, never>;
+export declare const B: import("styled-components").StyledComponent<"b", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"b">, never>;
+export declare const Bdi: import("styled-components").StyledComponent<"bdi", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"bdi">, never>;
+export declare const Bdo: import("styled-components").StyledComponent<"bdo", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"bdo">, never>;
+export declare const Br: import("styled-components").StyledComponent<"br", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"br">, never>;
+export declare const Cite: import("styled-components").StyledComponent<"cite", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"cite">, never>;
+export declare const Code: import("styled-components").StyledComponent<"code", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"code">, never>;
+export declare const Data: import("styled-components").StyledComponent<"data", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"data">, never>;
+export declare const Dfn: import("styled-components").StyledComponent<"dfn", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"dfn">, never>;
+export declare const Em: import("styled-components").StyledComponent<"em", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"em">, never>;
+export declare const I: import("styled-components").StyledComponent<"i", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"i">, never>;
+export declare const Kbd: import("styled-components").StyledComponent<"kbd", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"kbd">, never>;
+export declare const Mark: import("styled-components").StyledComponent<"mark", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"mark">, never>;
+export declare const Q: import("styled-components").StyledComponent<"q", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"q">, never>;
+export declare const Rp: import("styled-components").StyledComponent<"rp", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"rp">, never>;
+export declare const Rt: import("styled-components").StyledComponent<"rt", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"rt">, never>;
+export declare const Ruby: import("styled-components").StyledComponent<"ruby", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"ruby">, never>;
+export declare const S: import("styled-components").StyledComponent<"s", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"s">, never>;
+export declare const Samp: import("styled-components").StyledComponent<"samp", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"samp">, never>;
+export declare const Small: import("styled-components").StyledComponent<"small", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"small">, never>;
+export declare const Span: import("styled-components").StyledComponent<"span", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"span">, never>;
+export declare const Strong: import("styled-components").StyledComponent<"strong", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"strong">, never>;
+export declare const Sub: import("styled-components").StyledComponent<"sub", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"sub">, never>;
+export declare const Sup: import("styled-components").StyledComponent<"sup", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"sup">, never>;
+export declare const Time: import("styled-components").StyledComponent<"time", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"time">, never>;
+export declare const U: import("styled-components").StyledComponent<"u", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"u">, never>;
+export declare const Wbr: import("styled-components").StyledComponent<"wbr", import("./styled/types.js").Theme, object & import("./styled/types.js").OwnerInterface & import("./styled/types.js").InnerRefInterface<"wbr">, never>;

package/dist/types/index.d.ts

@@ -1,16 +1,16 @@
+export { ThemeContext } from '@xstyled/styled-components';
+export { position, typography } from '@xstyled/system';
+export { A, Abbr, Address, Article, Aside, B, Bdi, Bdo, Blockquote, Br, Cite, Code, Data, Dd, Dfn, Div, Dl, Dt, Em, Figcaption, Figure, Footer, H1, H2, H3, H4, H5, H6, Header, Hgroup, Hr, I, Kbd, Li, Main, Mark, Menu, Nav, Ol, P, Pre, Q, Rp, Rt, Ruby, S, Samp, Search, Section, Small, Span, Strong, Sub, Sup, Time, U, Ul, Wbr, } from './HtmlComponents.js';
+export * from './arithmetic.js';
 export * from './globalStyles.js';
-export * from './spaceUtilities.js';
+export * from './mergeRefs.js';
 export * from './mobileUtilities.js';
-export * from './utils.js';
-export * from './arithmetic.js';
+export * from './spaceUtilities.js';
+export * from './styled/index.js';
 export * from './th.js';
 export * from './theme.js';
-export * from './styled/index.js';
-export { position, typography } from '@xstyled/system';
 export { themeProviderHOC } from './themeProviderHOC.js';
-export { ThemeContext } from '@xstyled/styled-components';
-export { xStyledCommonProps, XStyledWrapper } from './xStyledWrapper.js';
-export { Address, Article, Aside, Footer, Header, H1, H2, H3, H4, H5, H6, Hgroup, Main, Nav, Section, Search, Blockquote, Dd, Div, Dl, Dt, Figcaption, Figure, Hr, Li, Menu, Ol, P, Pre, Ul, A, Abbr, B, Bdi, Bdo, Br, Cite, Code, Data, Dfn, Em, I, Kbd, Mark, Q, Rp, Rt, Ruby, S, Samp, Small, Span, Strong, Sub, Sup, Time, U, Wbr, } from './HtmlComponents.js';
-export * from './mergeRefs.js';
+export * from './utils.js';
+export { XStyledWrapper, xStyledCommonProps } from './xStyledWrapper.js';
 export type * from 'csstype';
 export { useGetLayoutMode } from './useGetLayoutMode.js';

package/dist/types/styled/expressions/genStyleOverridesExpression.d.ts

@@ -1,3 +1,3 @@
-import type { PropsWithTheme } from '../types.js';
 import type { CSSObject } from 'styled-components';
+import type { PropsWithTheme } from '../types.js';
 export declare const genStyleOverridesExpression: (componentName: string, componentSlot: string) => (props: PropsWithTheme) => (string | number | CSSObject | undefined)[] | null;

package/dist/types/styled/expressions/genVariantOverridesExpression.d.ts

@@ -1,3 +1,3 @@
-import type { PropsWithTheme } from '../types.js';
 import type { CSSObject } from 'styled-components';
+import type { PropsWithTheme } from '../types.js';
 export declare const genVariantOverridesExpression: (componentName: string) => (props: PropsWithTheme) => (string | number | CSSObject | undefined)[];

package/dist/types/styled/styledFunction.d.ts

@@ -1,6 +1,6 @@
 import type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';
-import type { Options, Theme, ThemedStyledFunctionBase } from './types.js';
 import React from 'react';
+import type { Options, Theme, ThemedStyledFunctionBase } from './types.js';
 export declare const styledFunction: <C extends React.ComponentType<any> | keyof JSX.IntrinsicElements | AnyStyledComponent>(tag: C, options?: Options) => ThemedStyledFunctionBase<C, Theme, {}, never> & {
     attrs: <U, NewA extends Partial<import("styled-components").StyledComponentPropsWithRef<C> & U> & {
         [others: string]: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-system",
-  "version": "3.50.1-next.8",
+  "version": "3.51.0-next.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "files": [
@@ -89,7 +89,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": true
+    "typeSafety": false
   },
   "dependencies": {
     "@xstyled/styled-components": "~3.7.3",
@@ -98,18 +98,18 @@
     "polished": "~3.6.7"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.31",
+    "@elliemae/pui-cli": "9.0.0-next.50",
     "@elliemae/pui-theme": "~2.10.0",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.50.1-next.8"
+    "@elliemae/ds-monorepo-devops": "3.51.0-next.0"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.10.0",
     "csstype": "^3.0.0",
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "styled-components": "~5.3.9"
   },
   "scripts": {