@elliemae/ds-icons 3.14.0-next.10 → 3.14.0-next.12

package/dist/cjs/utils/SvgIcon.js

@@ -36,6 +36,7 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_classnames = require("@elliemae/ds-classnames");
 var import_react_desc_prop_types = require("./react-desc-prop-types");
 var import_styled = require("./styled");
+var import_pixToRem = require("./pixToRem");
 const renderPaths = (paths) => paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: p }, i));
 const SvgIcon = (props) => {
   const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
@@ -46,10 +47,10 @@ const SvgIcon = (props) => {
     if (String(height).includes("rem"))
       return height;
     if (width)
-      return parseInt(width.toString(), 10);
+      return (0, import_pixToRem.pixToRem)(parseInt(width.toString(), 10));
     if (height)
-      return parseInt(height.toString(), 10);
-    return 16;
+      return (0, import_pixToRem.pixToRem)(parseInt(height.toString(), 10));
+    return (0, import_pixToRem.pixToRem)(16);
   }, [width, height]);
   const defaultHeight = (0, import_react.useMemo)(() => {
     if (String(height).includes("rem"))
@@ -57,10 +58,10 @@ const SvgIcon = (props) => {
     if (String(width).includes("rem"))
       return width;
     if (height)
-      return parseInt(height.toString(), 10);
+      return (0, import_pixToRem.pixToRem)(parseInt(height.toString(), 10));
     if (width)
-      return parseInt(width.toString(), 10);
-    return 16;
+      return (0, import_pixToRem.pixToRem)(parseInt(width.toString(), 10));
+    return (0, import_pixToRem.pixToRem)(16);
   }, [width, height]);
   const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(props);
   const { cssClassName } = (0, import_ds_classnames.convertPropToCssClassName)("icon", className, {

package/dist/cjs/utils/SvgIcon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/SvgIcon.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/no-array-index-key */\nimport React, { useMemo } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { propTypes } from './react-desc-prop-types';\nimport { StyledSvg, StyledWrapper } from './styled';\n\nconst renderPaths = (paths: string[]) => paths.map((p, i) => <path key={i} d={p} />);\n\nconst SvgIcon: React.ComponentType<SvgIconT.Props> = (props) => {\n  const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;\n\n  const { className, width, height, style, title, ...restGlobals } = useGetGlobalAttributes(props);\n\n  const defaultWidth = useMemo(() => {\n    if (String(width).includes('rem')) return width;\n    if (String(height).includes('rem')) return height;\n    if (width) return parseInt(width.toString(), 10);\n    if (height) return parseInt(height.toString(), 10);\n    return 16;\n  }, [width, height]);\n\n  const defaultHeight = useMemo(() => {\n    if (String(height).includes('rem')) return height;\n    if (String(width).includes('rem')) return width;\n    if (height) return parseInt(height.toString(), 10);\n    if (width) return parseInt(width.toString(), 10);\n    return 16;\n  }, [width, height]);\n\n  const xstyledProps = useGetXstyledProps(props);\n\n  const { cssClassName } = convertPropToCssClassName('icon', className, {\n    size,\n    color,\n  });\n\n  const finalColor = useMemo(() => {\n    if (fill) return fill;\n    if (!color) return undefined;\n    if (color[0] === 'brand-primary') return `brand-${color[1]}`;\n    if (color[0] === 'neutral' && color[1].toString() === '0') return `neutral-000`;\n    if (color[0] === 'neutral' && color[1].toString() === '900') return `neutral-800`;\n    return `${color[0]}-${color[1]}`;\n  }, [color, fill]);\n\n  return (\n    <StyledWrapper\n      as={component}\n      ref={innerRef}\n      className={cssClassName}\n      aria-hidden={title !== undefined ? false : true}\n      title={title}\n      {...restGlobals}\n      {...containerProps}\n      {...xstyledProps}\n      style={style}\n      height={!size ? defaultHeight : undefined}\n      width={!size ? defaultWidth : undefined}\n      size={size}\n      svgColor={finalColor}\n    >\n      <StyledSvg viewBox={viewBox} width={!size ? defaultWidth : undefined} height={!size ? defaultHeight : undefined}>\n        {paths ? renderPaths(paths) : children}\n      </StyledSvg>\n    </StyledWrapper>\n  );\n};\n\nSvgIcon.propTypes = propTypes;\nSvgIcon.displayName = 'SvgIcon';\nconst IconWithSchema = describe(SvgIcon);\nIconWithSchema.propTypes = propTypes;\n\nexport { IconWithSchema, SvgIcon };\nexport default SvgIcon;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQsC;AAP7D,mBAA+B;AAC/B,0BAAqE;AACrE,2BAA0C;AAE1C,mCAA0B;AAC1B,oBAAyC;AAEzC,MAAM,cAAc,CAAC,UAAoB,MAAM,IAAI,CAAC,GAAG,MAAM,4CAAC,UAAa,GAAG,KAAN,CAAS,CAAE;AAEnF,MAAM,UAA+C,CAAC,UAAU;AAC9D,QAAM,EAAE,OAAO,MAAM,UAAU,gBAAgB,OAAO,MAAM,SAAS,UAAU,UAAU,IAAI;AAE7F,QAAM,EAAE,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,QAAI,4CAAuB,KAAK;AAE/F,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,aAAO;AAC1C,QAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,aAAO;AAC3C,QAAI;AAAO,aAAO,SAAS,MAAM,SAAS,GAAG,EAAE;AAC/C,QAAI;AAAQ,aAAO,SAAS,OAAO,SAAS,GAAG,EAAE;AACjD,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,QAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,aAAO;AAC3C,QAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,aAAO;AAC1C,QAAI;AAAQ,aAAO,SAAS,OAAO,SAAS,GAAG,EAAE;AACjD,QAAI;AAAO,aAAO,SAAS,MAAM,SAAS,GAAG,EAAE;AAC/C,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,mBAAe,wCAAmB,KAAK;AAE7C,QAAM,EAAE,aAAa,QAAI,gDAA0B,QAAQ,WAAW;AAAA,IACpE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,QAAI;AAAM,aAAO;AACjB,QAAI,CAAC;AAAO,aAAO;AACnB,QAAI,MAAM,OAAO;AAAiB,aAAO,SAAS,MAAM;AACxD,QAAI,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAK,aAAO;AAClE,QAAI,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAO,aAAO;AACpE,WAAO,GAAG,MAAM,MAAM,MAAM;AAAA,EAC9B,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW;AAAA,MACX,eAAa,UAAU,SAAY,QAAQ;AAAA,MAC3C;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,QAAQ,CAAC,OAAO,gBAAgB;AAAA,MAChC,OAAO,CAAC,OAAO,eAAe;AAAA,MAC9B;AAAA,MACA,UAAU;AAAA,MAEV,sDAAC,2BAAU,SAAkB,OAAO,CAAC,OAAO,eAAe,QAAW,QAAQ,CAAC,OAAO,gBAAgB,QACnG,kBAAQ,YAAY,KAAK,IAAI,UAChC;AAAA;AAAA,EACF;AAEJ;AAEA,QAAQ,YAAY;AACpB,QAAQ,cAAc;AACtB,MAAM,qBAAiB,8BAAS,OAAO;AACvC,eAAe,YAAY;AAG3B,IAAO,kBAAQ;",
+  "sourcesContent": ["/* eslint-disable react/no-array-index-key */\nimport React, { useMemo } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { propTypes } from './react-desc-prop-types';\nimport { StyledSvg, StyledWrapper } from './styled';\nimport { pixToRem } from './pixToRem';\n\nconst renderPaths = (paths: string[]) => paths.map((p, i) => <path key={i} d={p} />);\n\nconst SvgIcon: React.ComponentType<SvgIconT.Props> = (props) => {\n  const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;\n\n  const { className, width, height, style, title, ...restGlobals } = useGetGlobalAttributes(props);\n\n  const defaultWidth = useMemo(() => {\n    if (String(width).includes('rem')) return width;\n    if (String(height).includes('rem')) return height;\n    if (width) return pixToRem(parseInt(width.toString(), 10));\n    if (height) return pixToRem(parseInt(height.toString(), 10));\n    return pixToRem(16);\n  }, [width, height]);\n\n  const defaultHeight = useMemo(() => {\n    if (String(height).includes('rem')) return height;\n    if (String(width).includes('rem')) return width;\n    if (height) return pixToRem(parseInt(height.toString(), 10));\n    if (width) return pixToRem(parseInt(width.toString(), 10));\n    return pixToRem(16);\n  }, [width, height]);\n\n  const xstyledProps = useGetXstyledProps(props);\n\n  const { cssClassName } = convertPropToCssClassName('icon', className, {\n    size,\n    color,\n  });\n\n  const finalColor = useMemo(() => {\n    if (fill) return fill;\n    if (!color) return undefined;\n    if (color[0] === 'brand-primary') return `brand-${color[1]}`;\n    if (color[0] === 'neutral' && color[1].toString() === '0') return `neutral-000`;\n    if (color[0] === 'neutral' && color[1].toString() === '900') return `neutral-800`;\n    return `${color[0]}-${color[1]}`;\n  }, [color, fill]);\n\n  return (\n    <StyledWrapper\n      as={component}\n      ref={innerRef}\n      className={cssClassName}\n      aria-hidden={title !== undefined ? false : true}\n      title={title}\n      {...restGlobals}\n      {...containerProps}\n      {...xstyledProps}\n      style={style}\n      height={!size ? defaultHeight : undefined}\n      width={!size ? defaultWidth : undefined}\n      size={size}\n      svgColor={finalColor}\n    >\n      <StyledSvg viewBox={viewBox} width={!size ? defaultWidth : undefined} height={!size ? defaultHeight : undefined}>\n        {paths ? renderPaths(paths) : children}\n      </StyledSvg>\n    </StyledWrapper>\n  );\n};\n\nSvgIcon.propTypes = propTypes;\nSvgIcon.displayName = 'SvgIcon';\nconst IconWithSchema = describe(SvgIcon);\nIconWithSchema.propTypes = propTypes;\n\nexport { IconWithSchema, SvgIcon };\nexport default SvgIcon;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSsC;AAR7D,mBAA+B;AAC/B,0BAAqE;AACrE,2BAA0C;AAE1C,mCAA0B;AAC1B,oBAAyC;AACzC,sBAAyB;AAEzB,MAAM,cAAc,CAAC,UAAoB,MAAM,IAAI,CAAC,GAAG,MAAM,4CAAC,UAAa,GAAG,KAAN,CAAS,CAAE;AAEnF,MAAM,UAA+C,CAAC,UAAU;AAC9D,QAAM,EAAE,OAAO,MAAM,UAAU,gBAAgB,OAAO,MAAM,SAAS,UAAU,UAAU,IAAI;AAE7F,QAAM,EAAE,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,QAAI,4CAAuB,KAAK;AAE/F,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,aAAO;AAC1C,QAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,aAAO;AAC3C,QAAI;AAAO,iBAAO,0BAAS,SAAS,MAAM,SAAS,GAAG,EAAE,CAAC;AACzD,QAAI;AAAQ,iBAAO,0BAAS,SAAS,OAAO,SAAS,GAAG,EAAE,CAAC;AAC3D,eAAO,0BAAS,EAAE;AAAA,EACpB,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,QAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,aAAO;AAC3C,QAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,aAAO;AAC1C,QAAI;AAAQ,iBAAO,0BAAS,SAAS,OAAO,SAAS,GAAG,EAAE,CAAC;AAC3D,QAAI;AAAO,iBAAO,0BAAS,SAAS,MAAM,SAAS,GAAG,EAAE,CAAC;AACzD,eAAO,0BAAS,EAAE;AAAA,EACpB,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,mBAAe,wCAAmB,KAAK;AAE7C,QAAM,EAAE,aAAa,QAAI,gDAA0B,QAAQ,WAAW;AAAA,IACpE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,QAAI;AAAM,aAAO;AACjB,QAAI,CAAC;AAAO,aAAO;AACnB,QAAI,MAAM,OAAO;AAAiB,aAAO,SAAS,MAAM;AACxD,QAAI,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAK,aAAO;AAClE,QAAI,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAO,aAAO;AACpE,WAAO,GAAG,MAAM,MAAM,MAAM;AAAA,EAC9B,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW;AAAA,MACX,eAAa,UAAU,SAAY,QAAQ;AAAA,MAC3C;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,QAAQ,CAAC,OAAO,gBAAgB;AAAA,MAChC,OAAO,CAAC,OAAO,eAAe;AAAA,MAC9B;AAAA,MACA,UAAU;AAAA,MAEV,sDAAC,2BAAU,SAAkB,OAAO,CAAC,OAAO,eAAe,QAAW,QAAQ,CAAC,OAAO,gBAAgB,QACnG,kBAAQ,YAAY,KAAK,IAAI,UAChC;AAAA;AAAA,EACF;AAEJ;AAEA,QAAQ,YAAY;AACpB,QAAQ,cAAc;AACtB,MAAM,qBAAiB,8BAAS,OAAO;AACvC,eAAe,YAAY;AAG3B,IAAO,kBAAQ;",
   "names": []
 }

package/dist/cjs/utils/pixToRem.js

@@ -0,0 +1,32 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pixToRem_exports = {};
+__export(pixToRem_exports, {
+  pixToRem: () => pixToRem
+});
+module.exports = __toCommonJS(pixToRem_exports);
+var React = __toESM(require("react"));
+const pixToRem = (size) => `${size / 16}rem`;
+//# sourceMappingURL=pixToRem.js.map

package/dist/cjs/utils/pixToRem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/pixToRem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const pixToRem = (size: number) => `${size / 16}rem`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,WAAW,CAAC,SAAiB,GAAG,OAAO;",
+  "names": []
+}

package/dist/cjs/utils/styled.js

@@ -36,32 +36,32 @@ const displaySizes = import_ds_system.css`
   vertical-align: middle;
 `;
 const xxlSizes = import_ds_system.css`
-  width: 64px;
-  height: 64px;
+  width: 4.923rem;
+  height: 4.923rem;
 `;
 const xlSizes = import_ds_system.css`
-  width: 48px;
-  height: 48px;
+  width: 3.692rem;
+  height: 3.692rem;
 `;
 const lSizes = import_ds_system.css`
-  width: 32px;
-  height: 32px;
+  width: 2.462rem;
+  height: 2.462rem;
 `;
 const mSizes = import_ds_system.css`
-  width: 24px;
-  height: 24px;
+  width: 1.846rem;
+  height: 1.846rem;
 `;
 const sSizes = import_ds_system.css`
-  width: 16px;
-  height: 16px;
+  width: 1.231rem;
+  height: 1.231rem;
 `;
 const xsSizes = import_ds_system.css`
-  width: 8px;
-  height: 8px;
+  width: 0.615rem;
+  height: 0.615rem;
 `;
 const xxsSizes = import_ds_system.css`
-  width: 4px;
-  height: 4px;
+  width: 0.308rem;
+  height: 0.308rem;
 `;
 const standarSizes = import_ds_system.css`
   ${sSizes}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import {\n  styled,\n  css,\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  layout,\n  th,\n} from '@elliemae/ds-system';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { DSIconName, DSIconSlots } from './theming';\n\ninterface StyledWrapperPropsT {\n  size: SvgIconT.SizeType | undefined;\n  svgColor: string | undefined;\n  width: number | undefined;\n  height: number | undefined;\n}\n\nconst displaySizes = css`\n  display: inline-flex;\n  vertical-align: middle;\n`;\nconst xxlSizes = css`\n  width: 64px;\n  height: 64px;\n`;\n\nconst xlSizes = css`\n  width: 48px;\n  height: 48px;\n`;\n\nconst lSizes = css`\n  width: 32px;\n  height: 32px;\n`;\n\nconst mSizes = css`\n  width: 24px;\n  height: 24px;\n`;\n\nconst sSizes = css`\n  width: 16px;\n  height: 16px;\n`;\n\nconst xsSizes = css`\n  width: 8px;\n  height: 8px;\n`;\n\nconst xxsSizes = css`\n  width: 4px;\n  height: 4px;\n`;\n\nconst standarSizes = css`\n  ${sSizes}\n`;\n\nconst getSize = (size: SvgIconT.SizeType | undefined) => {\n  if (size === 'xxl') return xxlSizes;\n  if (size === 'xl') return xlSizes;\n  if (size === 'l') return lSizes;\n  if (size === 'm') return mSizes;\n  if (size === 's') return sSizes;\n  if (size === 'xs') return xsSizes;\n  if (size === 'xxs') return xxsSizes;\n  return standarSizes;\n};\n\nexport const StyledSvg = styled('svg', {\n  name: DSIconName,\n  slot: DSIconSlots.SVG,\n})``;\n\nexport const StyledWrapper = styled('span', {\n  name: DSIconName,\n  slot: DSIconSlots.ICON_WRAPPER,\n})<StyledWrapperPropsT>`\n  ${({ size, width, height }) => !width && !height && getSize(size)}\n  ${({ width }) => {\n    if (String(width).includes('rem')) return `width: ${width};`;\n    if (width) return `width: ${width}px;`;\n  }}\n  ${({ height }) => {\n    if (String(height).includes('rem')) return `height: ${height};`;\n    if (height) return `height: ${height}px;`;\n  }}\n  ${displaySizes}\n\n  &.em-ds-icon svg {\n    ${({ size, width, height }) => !width && !height && getSize(size)}\n    ${({ width }) => {\n      if (String(width).includes('rem')) return `width: ${width};`;\n      if (width) return `width: ${width}px;`;\n    }}\n    ${({ height }) => {\n      if (String(height).includes('rem')) return `height: ${height};`;\n      if (height) return `height: ${height}px;`;\n    }}\n    ${({ svgColor, theme }) => {\n      if (svgColor) return `fill: ${th.color(svgColor, svgColor)({ theme })};`;\n    }}\n  }\n  ${layout}\n  ${space}\n  ${sizing}\n  ${background}\n  ${borders}\n  ${boxShadows}\n  ${flexboxes}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import {\n  styled,\n  css,\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  layout,\n  th,\n} from '@elliemae/ds-system';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { DSIconName, DSIconSlots } from './theming';\n\ninterface StyledWrapperPropsT {\n  size: SvgIconT.SizeType | undefined;\n  svgColor: string | undefined;\n  width: number | undefined;\n  height: number | undefined;\n}\n\nconst displaySizes = css`\n  display: inline-flex;\n  vertical-align: middle;\n`;\nconst xxlSizes = css`\n  width: 4.923rem;\n  height: 4.923rem;\n`;\n\nconst xlSizes = css`\n  width: 3.692rem;\n  height: 3.692rem;\n`;\n\nconst lSizes = css`\n  width: 2.462rem;\n  height: 2.462rem;\n`;\n\nconst mSizes = css`\n  width: 1.846rem;\n  height: 1.846rem;\n`;\n\nconst sSizes = css`\n  width: 1.231rem;\n  height: 1.231rem;\n`;\n\nconst xsSizes = css`\n  width: 0.615rem;\n  height: 0.615rem;\n`;\n\nconst xxsSizes = css`\n  width: 0.308rem;\n  height: 0.308rem;\n`;\n\nconst standarSizes = css`\n  ${sSizes}\n`;\n\nconst getSize = (size: SvgIconT.SizeType | undefined) => {\n  if (size === 'xxl') return xxlSizes;\n  if (size === 'xl') return xlSizes;\n  if (size === 'l') return lSizes;\n  if (size === 'm') return mSizes;\n  if (size === 's') return sSizes;\n  if (size === 'xs') return xsSizes;\n  if (size === 'xxs') return xxsSizes;\n  return standarSizes;\n};\n\nexport const StyledSvg = styled('svg', {\n  name: DSIconName,\n  slot: DSIconSlots.SVG,\n})``;\n\nexport const StyledWrapper = styled('span', {\n  name: DSIconName,\n  slot: DSIconSlots.ICON_WRAPPER,\n})<StyledWrapperPropsT>`\n  ${({ size, width, height }) => !width && !height && getSize(size)}\n  ${({ width }) => {\n    if (String(width).includes('rem')) return `width: ${width};`;\n    if (width) return `width: ${width}px;`;\n  }}\n  ${({ height }) => {\n    if (String(height).includes('rem')) return `height: ${height};`;\n    if (height) return `height: ${height}px;`;\n  }}\n  ${displaySizes}\n\n  &.em-ds-icon svg {\n    ${({ size, width, height }) => !width && !height && getSize(size)}\n    ${({ width }) => {\n      if (String(width).includes('rem')) return `width: ${width};`;\n      if (width) return `width: ${width}px;`;\n    }}\n    ${({ height }) => {\n      if (String(height).includes('rem')) return `height: ${height};`;\n      if (height) return `height: ${height}px;`;\n    }}\n    ${({ svgColor, theme }) => {\n      if (svgColor) return `fill: ${th.color(svgColor, svgColor)({ theme })};`;\n    }}\n  }\n  ${layout}\n  ${space}\n  ${sizing}\n  ${background}\n  ${borders}\n  ${boxShadows}\n  ${flexboxes}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAWO;AAEP,qBAAwC;AASxC,MAAM,eAAe;AAAA;AAAA;AAAA;AAIrB,MAAM,WAAW;AAAA;AAAA;AAAA;AAKjB,MAAM,UAAU;AAAA;AAAA;AAAA;AAKhB,MAAM,SAAS;AAAA;AAAA;AAAA;AAKf,MAAM,SAAS;AAAA;AAAA;AAAA;AAKf,MAAM,SAAS;AAAA;AAAA;AAAA;AAKf,MAAM,UAAU;AAAA;AAAA;AAAA;AAKhB,MAAM,WAAW;AAAA;AAAA;AAAA;AAKjB,MAAM,eAAe;AAAA,IACjB;AAAA;AAGJ,MAAM,UAAU,CAAC,SAAwC;AACvD,MAAI,SAAS;AAAO,WAAO;AAC3B,MAAI,SAAS;AAAM,WAAO;AAC1B,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAM,WAAO;AAC1B,MAAI,SAAS;AAAO,WAAO;AAC3B,SAAO;AACT;AAEO,MAAM,gBAAY,yBAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,2BAAY;AACpB,CAAC;AAEM,MAAM,oBAAgB,yBAAO,QAAQ;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,2BAAY;AACpB,CAAC;AAAA,IACG,CAAC,EAAE,MAAM,OAAO,OAAO,MAAM,CAAC,SAAS,CAAC,UAAU,QAAQ,IAAI;AAAA,IAC9D,CAAC,EAAE,MAAM,MAAM;AACf,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,WAAO,UAAU;AACpD,MAAI;AAAO,WAAO,UAAU;AAC9B;AAAA,IACE,CAAC,EAAE,OAAO,MAAM;AAChB,MAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,WAAO,WAAW;AACtD,MAAI;AAAQ,WAAO,WAAW;AAChC;AAAA,IACE;AAAA;AAAA;AAAA,MAGE,CAAC,EAAE,MAAM,OAAO,OAAO,MAAM,CAAC,SAAS,CAAC,UAAU,QAAQ,IAAI;AAAA,MAC9D,CAAC,EAAE,MAAM,MAAM;AACf,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,WAAO,UAAU;AACpD,MAAI;AAAO,WAAO,UAAU;AAC9B;AAAA,MACE,CAAC,EAAE,OAAO,MAAM;AAChB,MAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,WAAO,WAAW;AACtD,MAAI;AAAQ,WAAO,WAAW;AAChC;AAAA,MACE,CAAC,EAAE,UAAU,MAAM,MAAM;AACzB,MAAI;AAAU,WAAO,SAAS,oBAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AACtE;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
   "names": []
 }

package/dist/esm/utils/SvgIcon.js

@@ -5,6 +5,7 @@ import { describe, useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/
 import { convertPropToCssClassName } from "@elliemae/ds-classnames";
 import { propTypes } from "./react-desc-prop-types";
 import { StyledSvg, StyledWrapper } from "./styled";
+import { pixToRem } from "./pixToRem";
 const renderPaths = (paths) => paths.map((p, i) => /* @__PURE__ */ jsx("path", { d: p }, i));
 const SvgIcon = (props) => {
   const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
@@ -15,10 +16,10 @@ const SvgIcon = (props) => {
     if (String(height).includes("rem"))
       return height;
     if (width)
-      return parseInt(width.toString(), 10);
+      return pixToRem(parseInt(width.toString(), 10));
     if (height)
-      return parseInt(height.toString(), 10);
-    return 16;
+      return pixToRem(parseInt(height.toString(), 10));
+    return pixToRem(16);
   }, [width, height]);
   const defaultHeight = useMemo(() => {
     if (String(height).includes("rem"))
@@ -26,10 +27,10 @@ const SvgIcon = (props) => {
     if (String(width).includes("rem"))
       return width;
     if (height)
-      return parseInt(height.toString(), 10);
+      return pixToRem(parseInt(height.toString(), 10));
     if (width)
-      return parseInt(width.toString(), 10);
-    return 16;
+      return pixToRem(parseInt(width.toString(), 10));
+    return pixToRem(16);
   }, [width, height]);
   const xstyledProps = useGetXstyledProps(props);
   const { cssClassName } = convertPropToCssClassName("icon", className, {

package/dist/esm/utils/SvgIcon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/SvgIcon.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-array-index-key */\nimport React, { useMemo } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { propTypes } from './react-desc-prop-types';\nimport { StyledSvg, StyledWrapper } from './styled';\n\nconst renderPaths = (paths: string[]) => paths.map((p, i) => <path key={i} d={p} />);\n\nconst SvgIcon: React.ComponentType<SvgIconT.Props> = (props) => {\n  const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;\n\n  const { className, width, height, style, title, ...restGlobals } = useGetGlobalAttributes(props);\n\n  const defaultWidth = useMemo(() => {\n    if (String(width).includes('rem')) return width;\n    if (String(height).includes('rem')) return height;\n    if (width) return parseInt(width.toString(), 10);\n    if (height) return parseInt(height.toString(), 10);\n    return 16;\n  }, [width, height]);\n\n  const defaultHeight = useMemo(() => {\n    if (String(height).includes('rem')) return height;\n    if (String(width).includes('rem')) return width;\n    if (height) return parseInt(height.toString(), 10);\n    if (width) return parseInt(width.toString(), 10);\n    return 16;\n  }, [width, height]);\n\n  const xstyledProps = useGetXstyledProps(props);\n\n  const { cssClassName } = convertPropToCssClassName('icon', className, {\n    size,\n    color,\n  });\n\n  const finalColor = useMemo(() => {\n    if (fill) return fill;\n    if (!color) return undefined;\n    if (color[0] === 'brand-primary') return `brand-${color[1]}`;\n    if (color[0] === 'neutral' && color[1].toString() === '0') return `neutral-000`;\n    if (color[0] === 'neutral' && color[1].toString() === '900') return `neutral-800`;\n    return `${color[0]}-${color[1]}`;\n  }, [color, fill]);\n\n  return (\n    <StyledWrapper\n      as={component}\n      ref={innerRef}\n      className={cssClassName}\n      aria-hidden={title !== undefined ? false : true}\n      title={title}\n      {...restGlobals}\n      {...containerProps}\n      {...xstyledProps}\n      style={style}\n      height={!size ? defaultHeight : undefined}\n      width={!size ? defaultWidth : undefined}\n      size={size}\n      svgColor={finalColor}\n    >\n      <StyledSvg viewBox={viewBox} width={!size ? defaultWidth : undefined} height={!size ? defaultHeight : undefined}>\n        {paths ? renderPaths(paths) : children}\n      </StyledSvg>\n    </StyledWrapper>\n  );\n};\n\nSvgIcon.propTypes = propTypes;\nSvgIcon.displayName = 'SvgIcon';\nconst IconWithSchema = describe(SvgIcon);\nIconWithSchema.propTypes = propTypes;\n\nexport { IconWithSchema, SvgIcon };\nexport default SvgIcon;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACQsC;AAP7D,SAAgB,eAAe;AAC/B,SAAS,UAAU,wBAAwB,0BAA0B;AACrE,SAAS,iCAAiC;AAE1C,SAAS,iBAAiB;AAC1B,SAAS,WAAW,qBAAqB;AAEzC,MAAM,cAAc,CAAC,UAAoB,MAAM,IAAI,CAAC,GAAG,MAAM,oBAAC,UAAa,GAAG,KAAN,CAAS,CAAE;AAEnF,MAAM,UAA+C,CAAC,UAAU;AAC9D,QAAM,EAAE,OAAO,MAAM,UAAU,gBAAgB,OAAO,MAAM,SAAS,UAAU,UAAU,IAAI;AAE7F,QAAM,EAAE,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,IAAI,uBAAuB,KAAK;AAE/F,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,aAAO;AAC1C,QAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,aAAO;AAC3C,QAAI;AAAO,aAAO,SAAS,MAAM,SAAS,GAAG,EAAE;AAC/C,QAAI;AAAQ,aAAO,SAAS,OAAO,SAAS,GAAG,EAAE;AACjD,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,aAAO;AAC3C,QAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,aAAO;AAC1C,QAAI;AAAQ,aAAO,SAAS,OAAO,SAAS,GAAG,EAAE;AACjD,QAAI;AAAO,aAAO,SAAS,MAAM,SAAS,GAAG,EAAE;AAC/C,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,eAAe,mBAAmB,KAAK;AAE7C,QAAM,EAAE,aAAa,IAAI,0BAA0B,QAAQ,WAAW;AAAA,IACpE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI;AAAM,aAAO;AACjB,QAAI,CAAC;AAAO,aAAO;AACnB,QAAI,MAAM,OAAO;AAAiB,aAAO,SAAS,MAAM;AACxD,QAAI,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAK,aAAO;AAClE,QAAI,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAO,aAAO;AACpE,WAAO,GAAG,MAAM,MAAM,MAAM;AAAA,EAC9B,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW;AAAA,MACX,eAAa,UAAU,SAAY,QAAQ;AAAA,MAC3C;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,QAAQ,CAAC,OAAO,gBAAgB;AAAA,MAChC,OAAO,CAAC,OAAO,eAAe;AAAA,MAC9B;AAAA,MACA,UAAU;AAAA,MAEV,8BAAC,aAAU,SAAkB,OAAO,CAAC,OAAO,eAAe,QAAW,QAAQ,CAAC,OAAO,gBAAgB,QACnG,kBAAQ,YAAY,KAAK,IAAI,UAChC;AAAA;AAAA,EACF;AAEJ;AAEA,QAAQ,YAAY;AACpB,QAAQ,cAAc;AACtB,MAAM,iBAAiB,SAAS,OAAO;AACvC,eAAe,YAAY;AAG3B,IAAO,kBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-array-index-key */\nimport React, { useMemo } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { propTypes } from './react-desc-prop-types';\nimport { StyledSvg, StyledWrapper } from './styled';\nimport { pixToRem } from './pixToRem';\n\nconst renderPaths = (paths: string[]) => paths.map((p, i) => <path key={i} d={p} />);\n\nconst SvgIcon: React.ComponentType<SvgIconT.Props> = (props) => {\n  const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;\n\n  const { className, width, height, style, title, ...restGlobals } = useGetGlobalAttributes(props);\n\n  const defaultWidth = useMemo(() => {\n    if (String(width).includes('rem')) return width;\n    if (String(height).includes('rem')) return height;\n    if (width) return pixToRem(parseInt(width.toString(), 10));\n    if (height) return pixToRem(parseInt(height.toString(), 10));\n    return pixToRem(16);\n  }, [width, height]);\n\n  const defaultHeight = useMemo(() => {\n    if (String(height).includes('rem')) return height;\n    if (String(width).includes('rem')) return width;\n    if (height) return pixToRem(parseInt(height.toString(), 10));\n    if (width) return pixToRem(parseInt(width.toString(), 10));\n    return pixToRem(16);\n  }, [width, height]);\n\n  const xstyledProps = useGetXstyledProps(props);\n\n  const { cssClassName } = convertPropToCssClassName('icon', className, {\n    size,\n    color,\n  });\n\n  const finalColor = useMemo(() => {\n    if (fill) return fill;\n    if (!color) return undefined;\n    if (color[0] === 'brand-primary') return `brand-${color[1]}`;\n    if (color[0] === 'neutral' && color[1].toString() === '0') return `neutral-000`;\n    if (color[0] === 'neutral' && color[1].toString() === '900') return `neutral-800`;\n    return `${color[0]}-${color[1]}`;\n  }, [color, fill]);\n\n  return (\n    <StyledWrapper\n      as={component}\n      ref={innerRef}\n      className={cssClassName}\n      aria-hidden={title !== undefined ? false : true}\n      title={title}\n      {...restGlobals}\n      {...containerProps}\n      {...xstyledProps}\n      style={style}\n      height={!size ? defaultHeight : undefined}\n      width={!size ? defaultWidth : undefined}\n      size={size}\n      svgColor={finalColor}\n    >\n      <StyledSvg viewBox={viewBox} width={!size ? defaultWidth : undefined} height={!size ? defaultHeight : undefined}>\n        {paths ? renderPaths(paths) : children}\n      </StyledSvg>\n    </StyledWrapper>\n  );\n};\n\nSvgIcon.propTypes = propTypes;\nSvgIcon.displayName = 'SvgIcon';\nconst IconWithSchema = describe(SvgIcon);\nIconWithSchema.propTypes = propTypes;\n\nexport { IconWithSchema, SvgIcon };\nexport default SvgIcon;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACSsC;AAR7D,SAAgB,eAAe;AAC/B,SAAS,UAAU,wBAAwB,0BAA0B;AACrE,SAAS,iCAAiC;AAE1C,SAAS,iBAAiB;AAC1B,SAAS,WAAW,qBAAqB;AACzC,SAAS,gBAAgB;AAEzB,MAAM,cAAc,CAAC,UAAoB,MAAM,IAAI,CAAC,GAAG,MAAM,oBAAC,UAAa,GAAG,KAAN,CAAS,CAAE;AAEnF,MAAM,UAA+C,CAAC,UAAU;AAC9D,QAAM,EAAE,OAAO,MAAM,UAAU,gBAAgB,OAAO,MAAM,SAAS,UAAU,UAAU,IAAI;AAE7F,QAAM,EAAE,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,IAAI,uBAAuB,KAAK;AAE/F,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,aAAO;AAC1C,QAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,aAAO;AAC3C,QAAI;AAAO,aAAO,SAAS,SAAS,MAAM,SAAS,GAAG,EAAE,CAAC;AACzD,QAAI;AAAQ,aAAO,SAAS,SAAS,OAAO,SAAS,GAAG,EAAE,CAAC;AAC3D,WAAO,SAAS,EAAE;AAAA,EACpB,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,aAAO;AAC3C,QAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,aAAO;AAC1C,QAAI;AAAQ,aAAO,SAAS,SAAS,OAAO,SAAS,GAAG,EAAE,CAAC;AAC3D,QAAI;AAAO,aAAO,SAAS,SAAS,MAAM,SAAS,GAAG,EAAE,CAAC;AACzD,WAAO,SAAS,EAAE;AAAA,EACpB,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,eAAe,mBAAmB,KAAK;AAE7C,QAAM,EAAE,aAAa,IAAI,0BAA0B,QAAQ,WAAW;AAAA,IACpE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI;AAAM,aAAO;AACjB,QAAI,CAAC;AAAO,aAAO;AACnB,QAAI,MAAM,OAAO;AAAiB,aAAO,SAAS,MAAM;AACxD,QAAI,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAK,aAAO;AAClE,QAAI,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAO,aAAO;AACpE,WAAO,GAAG,MAAM,MAAM,MAAM;AAAA,EAC9B,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW;AAAA,MACX,eAAa,UAAU,SAAY,QAAQ;AAAA,MAC3C;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,QAAQ,CAAC,OAAO,gBAAgB;AAAA,MAChC,OAAO,CAAC,OAAO,eAAe;AAAA,MAC9B;AAAA,MACA,UAAU;AAAA,MAEV,8BAAC,aAAU,SAAkB,OAAO,CAAC,OAAO,eAAe,QAAW,QAAQ,CAAC,OAAO,gBAAgB,QACnG,kBAAQ,YAAY,KAAK,IAAI,UAChC;AAAA;AAAA,EACF;AAEJ;AAEA,QAAQ,YAAY;AACpB,QAAQ,cAAc;AACtB,MAAM,iBAAiB,SAAS,OAAO;AACvC,eAAe,YAAY;AAG3B,IAAO,kBAAQ;",
   "names": []
 }

package/dist/esm/utils/pixToRem.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+const pixToRem = (size) => `${size / 16}rem`;
+export {
+  pixToRem
+};
+//# sourceMappingURL=pixToRem.js.map

package/dist/esm/utils/pixToRem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/pixToRem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const pixToRem = (size: number) => `${size / 16}rem`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,WAAW,CAAC,SAAiB,GAAG,OAAO;",
+  "names": []
+}

package/dist/esm/utils/styled.js

@@ -17,32 +17,32 @@ const displaySizes = css`
   vertical-align: middle;
 `;
 const xxlSizes = css`
-  width: 64px;
-  height: 64px;
+  width: 4.923rem;
+  height: 4.923rem;
 `;
 const xlSizes = css`
-  width: 48px;
-  height: 48px;
+  width: 3.692rem;
+  height: 3.692rem;
 `;
 const lSizes = css`
-  width: 32px;
-  height: 32px;
+  width: 2.462rem;
+  height: 2.462rem;
 `;
 const mSizes = css`
-  width: 24px;
-  height: 24px;
+  width: 1.846rem;
+  height: 1.846rem;
 `;
 const sSizes = css`
-  width: 16px;
-  height: 16px;
+  width: 1.231rem;
+  height: 1.231rem;
 `;
 const xsSizes = css`
-  width: 8px;
-  height: 8px;
+  width: 0.615rem;
+  height: 0.615rem;
 `;
 const xxsSizes = css`
-  width: 4px;
-  height: 4px;
+  width: 0.308rem;
+  height: 0.308rem;
 `;
 const standarSizes = css`
   ${sSizes}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n  styled,\n  css,\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  layout,\n  th,\n} from '@elliemae/ds-system';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { DSIconName, DSIconSlots } from './theming';\n\ninterface StyledWrapperPropsT {\n  size: SvgIconT.SizeType | undefined;\n  svgColor: string | undefined;\n  width: number | undefined;\n  height: number | undefined;\n}\n\nconst displaySizes = css`\n  display: inline-flex;\n  vertical-align: middle;\n`;\nconst xxlSizes = css`\n  width: 64px;\n  height: 64px;\n`;\n\nconst xlSizes = css`\n  width: 48px;\n  height: 48px;\n`;\n\nconst lSizes = css`\n  width: 32px;\n  height: 32px;\n`;\n\nconst mSizes = css`\n  width: 24px;\n  height: 24px;\n`;\n\nconst sSizes = css`\n  width: 16px;\n  height: 16px;\n`;\n\nconst xsSizes = css`\n  width: 8px;\n  height: 8px;\n`;\n\nconst xxsSizes = css`\n  width: 4px;\n  height: 4px;\n`;\n\nconst standarSizes = css`\n  ${sSizes}\n`;\n\nconst getSize = (size: SvgIconT.SizeType | undefined) => {\n  if (size === 'xxl') return xxlSizes;\n  if (size === 'xl') return xlSizes;\n  if (size === 'l') return lSizes;\n  if (size === 'm') return mSizes;\n  if (size === 's') return sSizes;\n  if (size === 'xs') return xsSizes;\n  if (size === 'xxs') return xxsSizes;\n  return standarSizes;\n};\n\nexport const StyledSvg = styled('svg', {\n  name: DSIconName,\n  slot: DSIconSlots.SVG,\n})``;\n\nexport const StyledWrapper = styled('span', {\n  name: DSIconName,\n  slot: DSIconSlots.ICON_WRAPPER,\n})<StyledWrapperPropsT>`\n  ${({ size, width, height }) => !width && !height && getSize(size)}\n  ${({ width }) => {\n    if (String(width).includes('rem')) return `width: ${width};`;\n    if (width) return `width: ${width}px;`;\n  }}\n  ${({ height }) => {\n    if (String(height).includes('rem')) return `height: ${height};`;\n    if (height) return `height: ${height}px;`;\n  }}\n  ${displaySizes}\n\n  &.em-ds-icon svg {\n    ${({ size, width, height }) => !width && !height && getSize(size)}\n    ${({ width }) => {\n      if (String(width).includes('rem')) return `width: ${width};`;\n      if (width) return `width: ${width}px;`;\n    }}\n    ${({ height }) => {\n      if (String(height).includes('rem')) return `height: ${height};`;\n      if (height) return `height: ${height}px;`;\n    }}\n    ${({ svgColor, theme }) => {\n      if (svgColor) return `fill: ${th.color(svgColor, svgColor)({ theme })};`;\n    }}\n  }\n  ${layout}\n  ${space}\n  ${sizing}\n  ${background}\n  ${borders}\n  ${boxShadows}\n  ${flexboxes}\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n  styled,\n  css,\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  layout,\n  th,\n} from '@elliemae/ds-system';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { DSIconName, DSIconSlots } from './theming';\n\ninterface StyledWrapperPropsT {\n  size: SvgIconT.SizeType | undefined;\n  svgColor: string | undefined;\n  width: number | undefined;\n  height: number | undefined;\n}\n\nconst displaySizes = css`\n  display: inline-flex;\n  vertical-align: middle;\n`;\nconst xxlSizes = css`\n  width: 4.923rem;\n  height: 4.923rem;\n`;\n\nconst xlSizes = css`\n  width: 3.692rem;\n  height: 3.692rem;\n`;\n\nconst lSizes = css`\n  width: 2.462rem;\n  height: 2.462rem;\n`;\n\nconst mSizes = css`\n  width: 1.846rem;\n  height: 1.846rem;\n`;\n\nconst sSizes = css`\n  width: 1.231rem;\n  height: 1.231rem;\n`;\n\nconst xsSizes = css`\n  width: 0.615rem;\n  height: 0.615rem;\n`;\n\nconst xxsSizes = css`\n  width: 0.308rem;\n  height: 0.308rem;\n`;\n\nconst standarSizes = css`\n  ${sSizes}\n`;\n\nconst getSize = (size: SvgIconT.SizeType | undefined) => {\n  if (size === 'xxl') return xxlSizes;\n  if (size === 'xl') return xlSizes;\n  if (size === 'l') return lSizes;\n  if (size === 'm') return mSizes;\n  if (size === 's') return sSizes;\n  if (size === 'xs') return xsSizes;\n  if (size === 'xxs') return xxsSizes;\n  return standarSizes;\n};\n\nexport const StyledSvg = styled('svg', {\n  name: DSIconName,\n  slot: DSIconSlots.SVG,\n})``;\n\nexport const StyledWrapper = styled('span', {\n  name: DSIconName,\n  slot: DSIconSlots.ICON_WRAPPER,\n})<StyledWrapperPropsT>`\n  ${({ size, width, height }) => !width && !height && getSize(size)}\n  ${({ width }) => {\n    if (String(width).includes('rem')) return `width: ${width};`;\n    if (width) return `width: ${width}px;`;\n  }}\n  ${({ height }) => {\n    if (String(height).includes('rem')) return `height: ${height};`;\n    if (height) return `height: ${height}px;`;\n  }}\n  ${displaySizes}\n\n  &.em-ds-icon svg {\n    ${({ size, width, height }) => !width && !height && getSize(size)}\n    ${({ width }) => {\n      if (String(width).includes('rem')) return `width: ${width};`;\n      if (width) return `width: ${width}px;`;\n    }}\n    ${({ height }) => {\n      if (String(height).includes('rem')) return `height: ${height};`;\n      if (height) return `height: ${height}px;`;\n    }}\n    ${({ svgColor, theme }) => {\n      if (svgColor) return `fill: ${th.color(svgColor, svgColor)({ theme })};`;\n    }}\n  }\n  ${layout}\n  ${space}\n  ${sizing}\n  ${background}\n  ${borders}\n  ${boxShadows}\n  ${flexboxes}\n`;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY,mBAAmB;AASxC,MAAM,eAAe;AAAA;AAAA;AAAA;AAIrB,MAAM,WAAW;AAAA;AAAA;AAAA;AAKjB,MAAM,UAAU;AAAA;AAAA;AAAA;AAKhB,MAAM,SAAS;AAAA;AAAA;AAAA;AAKf,MAAM,SAAS;AAAA;AAAA;AAAA;AAKf,MAAM,SAAS;AAAA;AAAA;AAAA;AAKf,MAAM,UAAU;AAAA;AAAA;AAAA;AAKhB,MAAM,WAAW;AAAA;AAAA;AAAA;AAKjB,MAAM,eAAe;AAAA,IACjB;AAAA;AAGJ,MAAM,UAAU,CAAC,SAAwC;AACvD,MAAI,SAAS;AAAO,WAAO;AAC3B,MAAI,SAAS;AAAM,WAAO;AAC1B,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAM,WAAO;AAC1B,MAAI,SAAS;AAAO,WAAO;AAC3B,SAAO;AACT;AAEO,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,YAAY;AACpB,CAAC;AAEM,MAAM,gBAAgB,OAAO,QAAQ;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,YAAY;AACpB,CAAC;AAAA,IACG,CAAC,EAAE,MAAM,OAAO,OAAO,MAAM,CAAC,SAAS,CAAC,UAAU,QAAQ,IAAI;AAAA,IAC9D,CAAC,EAAE,MAAM,MAAM;AACf,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,WAAO,UAAU;AACpD,MAAI;AAAO,WAAO,UAAU;AAC9B;AAAA,IACE,CAAC,EAAE,OAAO,MAAM;AAChB,MAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,WAAO,WAAW;AACtD,MAAI;AAAQ,WAAO,WAAW;AAChC;AAAA,IACE;AAAA;AAAA;AAAA,MAGE,CAAC,EAAE,MAAM,OAAO,OAAO,MAAM,CAAC,SAAS,CAAC,UAAU,QAAQ,IAAI;AAAA,MAC9D,CAAC,EAAE,MAAM,MAAM;AACf,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,WAAO,UAAU;AACpD,MAAI;AAAO,WAAO,UAAU;AAC9B;AAAA,MACE,CAAC,EAAE,OAAO,MAAM;AAChB,MAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,WAAO,WAAW;AACtD,MAAI;AAAQ,WAAO,WAAW;AAChC;AAAA,MACE,CAAC,EAAE,UAAU,MAAM,MAAM;AACzB,MAAI;AAAU,WAAO,SAAS,GAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AACtE;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-icons",
-  "version": "3.14.0-next.10",
+  "version": "3.14.0-next.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Icons",
   "files": [
@@ -1571,9 +1571,9 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-classnames": "3.14.0-next.10",
-    "@elliemae/ds-system": "3.14.0-next.10",
-    "@elliemae/ds-utilities": "3.14.0-next.10"
+    "@elliemae/ds-classnames": "3.14.0-next.12",
+    "@elliemae/ds-utilities": "3.14.0-next.12",
+    "@elliemae/ds-system": "3.14.0-next.12"
   },
   "devDependencies": {
     "styled-components": "~5.3.6"