@elliemae/ds-icons 3.14.0-next.5 → 3.14.0-next.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/DocumentModifiedIcon.js.map +1 -1
  2. package/dist/cjs/DocumentRemovedIcon.js.map +1 -1
  3. package/dist/cjs/TaskGroupIcon.js.map +1 -1
  4. package/dist/cjs/utils/SvgIcon.js +8 -0
  5. package/dist/cjs/utils/SvgIcon.js.map +2 -2
  6. package/dist/cjs/utils/styled.js +8 -0
  7. package/dist/cjs/utils/styled.js.map +2 -2
  8. package/dist/esm/DocumentModifiedIcon.js.map +1 -1
  9. package/dist/esm/DocumentRemovedIcon.js.map +1 -1
  10. package/dist/esm/TaskGroupIcon.js.map +1 -1
  11. package/dist/esm/utils/SvgIcon.js +8 -0
  12. package/dist/esm/utils/SvgIcon.js.map +2 -2
  13. package/dist/esm/utils/styled.js +8 -0
  14. package/dist/esm/utils/styled.js.map +2 -2
  15. package/package.json +4 -4
package/dist/cjs/DocumentModifiedIcon.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/DocumentModifiedIcon.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SvgIcon } from './utils/SvgIcon';\nimport { SvgIconT } from './utils/react-desc-prop-types';\n\nconst DocumentModifiedIcon = (props: SvgIconT.Props) => (\n <SvgIcon {...props} viewBox=\"0 0 24 24\">\n <g transform=\"translate(2 3)\">\n <path d=\"M17 5h-2.798C13.54 5 13 4.46 13 3.798V1h1v2.798c0 .111.09.202.202.202H17v1Z\" />\n <path d=\"m17.707 3.693-3.4-3.4A1 1 0 0 0 13.6 0H4a1 1 0 0 0-1 1v1.5h1V1h9.6L17 4.4V18H4v-1.5H3V18a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V4.4a1 1 0 0 0-.293-.707Z\" />\n <circle cx={3.5} cy={2.5} r={1} />\n <circle cx={3.5} cy={16.5} r={1} />\n <path d=\"m5.5 5 4.5 8H1l4.5-8m0-1a1 1 0 0 0-.872.51l-4.5 8A1 1 0 0 0 1 14h9a1 1 0 0 0 .872-1.49l-4.5-8A1 1 0 0 0 5.5 4Z\" />\n </g>\n </SvgIcon>\n);\n\nexport default DocumentModifiedIcon;\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SvgIcon } from './utils/SvgIcon';\nimport type { SvgIconT } from './utils/react-desc-prop-types';\n\nconst DocumentModifiedIcon = (props: SvgIconT.Props) => (\n <SvgIcon {...props} viewBox=\"0 0 24 24\">\n <g transform=\"translate(2 3)\">\n <path d=\"M17 5h-2.798C13.54 5 13 4.46 13 3.798V1h1v2.798c0 .111.09.202.202.202H17v1Z\" />\n <path d=\"m17.707 3.693-3.4-3.4A1 1 0 0 0 13.6 0H4a1 1 0 0 0-1 1v1.5h1V1h9.6L17 4.4V18H4v-1.5H3V18a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V4.4a1 1 0 0 0-.293-.707Z\" />\n <circle cx={3.5} cy={2.5} r={1} />\n <circle cx={3.5} cy={16.5} r={1} />\n <path d=\"m5.5 5 4.5 8H1l4.5-8m0-1a1 1 0 0 0-.872.51l-4.5 8A1 1 0 0 0 1 14h9a1 1 0 0 0 .872-1.49l-4.5-8A1 1 0 0 0 5.5 4Z\" />\n </g>\n </SvgIcon>\n);\n\nexport default DocumentModifiedIcon;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOnB;AALJ,qBAAwB;AAGxB,MAAM,uBAAuB,CAAC,UAC5B,4CAAC,0BAAS,GAAG,OAAO,SAAQ,aAC1B,uDAAC,OAAE,WAAU,kBACX;AAAA,8CAAC,UAAK,GAAE,+EAA8E;AAAA,EACtF,4CAAC,UAAK,GAAE,oJAAmJ;AAAA,EAC3J,4CAAC,YAAO,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG;AAAA,EAChC,4CAAC,YAAO,IAAI,KAAK,IAAI,MAAM,GAAG,GAAG;AAAA,EACjC,4CAAC,UAAK,GAAE,kHAAiH;AAAA,GAC3H,GACF;AAGF,IAAO,+BAAQ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/DocumentRemovedIcon.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/DocumentRemovedIcon.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SvgIcon } from './utils/SvgIcon';\nimport { SvgIconT } from './utils/react-desc-prop-types';\n\nconst DocumentRemovedIcon = (props: SvgIconT.Props) => (\n <SvgIcon {...props} viewBox=\"0 0 24 24\">\n <g transform=\"translate(2 3)\">\n <path d=\"M17 5h-2.798C13.54 5 13 4.46 13 3.798V1h1v2.798c0 .111.09.202.202.202H17v1Zm-7 4.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0m1 0C11 6.467 8.533 4 5.5 4A5.506 5.506 0 0 0 0 9.5C0 12.533 2.467 15 5.5 15S11 12.533 11 9.5Z\" />\n <path d=\"m1.964 12.328 6.718-6.717.707.707-6.717 6.717z\" />\n <path d=\"m1.61 6.318.708-.707 6.717 6.717-.707.708z\" />\n <path d=\"m17.707 3.693-3.4-3.4A1 1 0 0 0 13.6 0H4a1 1 0 0 0-1 1v1.5h1V1h9.6L17 4.4V18H4v-1.5H3V18a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V4.4a1 1 0 0 0-.293-.707Z\" />\n <circle cx={3.5} cy={2.5} r={1} />\n <circle cx={3.5} cy={16.5} r={1} />\n </g>\n </SvgIcon>\n);\n\nexport default DocumentRemovedIcon;\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SvgIcon } from './utils/SvgIcon';\nimport type { SvgIconT } from './utils/react-desc-prop-types';\n\nconst DocumentRemovedIcon = (props: SvgIconT.Props) => (\n <SvgIcon {...props} viewBox=\"0 0 24 24\">\n <g transform=\"translate(2 3)\">\n <path d=\"M17 5h-2.798C13.54 5 13 4.46 13 3.798V1h1v2.798c0 .111.09.202.202.202H17v1Zm-7 4.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0m1 0C11 6.467 8.533 4 5.5 4A5.506 5.506 0 0 0 0 9.5C0 12.533 2.467 15 5.5 15S11 12.533 11 9.5Z\" />\n <path d=\"m1.964 12.328 6.718-6.717.707.707-6.717 6.717z\" />\n <path d=\"m1.61 6.318.708-.707 6.717 6.717-.707.708z\" />\n <path d=\"m17.707 3.693-3.4-3.4A1 1 0 0 0 13.6 0H4a1 1 0 0 0-1 1v1.5h1V1h9.6L17 4.4V18H4v-1.5H3V18a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V4.4a1 1 0 0 0-.293-.707Z\" />\n <circle cx={3.5} cy={2.5} r={1} />\n <circle cx={3.5} cy={16.5} r={1} />\n </g>\n </SvgIcon>\n);\n\nexport default DocumentRemovedIcon;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOnB;AALJ,qBAAwB;AAGxB,MAAM,sBAAsB,CAAC,UAC3B,4CAAC,0BAAS,GAAG,OAAO,SAAQ,aAC1B,uDAAC,OAAE,WAAU,kBACX;AAAA,8CAAC,UAAK,GAAE,wNAAuN;AAAA,EAC/N,4CAAC,UAAK,GAAE,kDAAiD;AAAA,EACzD,4CAAC,UAAK,GAAE,8CAA6C;AAAA,EACrD,4CAAC,UAAK,GAAE,oJAAmJ;AAAA,EAC3J,4CAAC,YAAO,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG;AAAA,EAChC,4CAAC,YAAO,IAAI,KAAK,IAAI,MAAM,GAAG,GAAG;AAAA,GACnC,GACF;AAGF,IAAO,8BAAQ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/TaskGroupIcon.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/TaskGroupIcon.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SvgIcon } from './utils/SvgIcon';\nimport { SvgIconT } from './utils/react-desc-prop-types';\n\nconst TaskGroupIcon = (props: SvgIconT.Props) => (\n <SvgIcon {...props} viewBox=\"0 0 24 24\">\n <path\n d=\"M6.5 4a.5.5 0 0 1 0 1h-1a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 1 0-1h1c.827 0 1.5.673 1.5 1.5v15c0 .827-.673 1.5-1.5 1.5h-14c-.827 0-1.5-.673-1.5-1.5v-15C4 4.673 4.673 4 5.5 4h1zM9 16a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1zm8.5 1a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1h6zM9 17H8v1h1v-1zm0-5a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1zm8.5 1a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1h6zM9 13H8v1h1v-1zm0-5a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1zm8.5 1a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1h6zM9 9H8v1h1V9zm3.499-8c1.224 0 2.246.885 2.459 2.049.218.041.489.116.764.254.816.408 1.268 1.178 1.276 2.17l.001.027a.5.5 0 0 1-.5.5H8.5a.5.5 0 0 1-.5-.5c0-1.005.453-1.786 1.276-2.197.275-.138.547-.213.764-.254A2.504 2.504 0 0 1 12.499 1zm.001 1c-.827 0-1.5.673-1.5 1.5a.5.5 0 0 1-.5.5c-.001 0-.413.007-.802.21A1.208 1.208 0 0 0 9.06 5h6.88a1.21 1.21 0 0 0-.638-.79c-.389-.203-.8-.21-.805-.21A.498.498 0 0 1 14 3.5c0-.827-.673-1.5-1.5-1.5zm0 1a.498.498 0 0 1 .5.5.5.5 0 1 1-.5-.5z\"\n style={{\n fillRule: 'evenodd',\n clipRule: 'evenodd',\n }}\n />\n </SvgIcon>\n);\n\nexport default TaskGroupIcon;\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SvgIcon } from './utils/SvgIcon';\nimport type { SvgIconT } from './utils/react-desc-prop-types';\n\nconst TaskGroupIcon = (props: SvgIconT.Props) => (\n <SvgIcon {...props} viewBox=\"0 0 24 24\">\n <path\n d=\"M6.5 4a.5.5 0 0 1 0 1h-1a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 1 0-1h1c.827 0 1.5.673 1.5 1.5v15c0 .827-.673 1.5-1.5 1.5h-14c-.827 0-1.5-.673-1.5-1.5v-15C4 4.673 4.673 4 5.5 4h1zM9 16a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1zm8.5 1a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1h6zM9 17H8v1h1v-1zm0-5a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1zm8.5 1a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1h6zM9 13H8v1h1v-1zm0-5a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1zm8.5 1a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1h6zM9 9H8v1h1V9zm3.499-8c1.224 0 2.246.885 2.459 2.049.218.041.489.116.764.254.816.408 1.268 1.178 1.276 2.17l.001.027a.5.5 0 0 1-.5.5H8.5a.5.5 0 0 1-.5-.5c0-1.005.453-1.786 1.276-2.197.275-.138.547-.213.764-.254A2.504 2.504 0 0 1 12.499 1zm.001 1c-.827 0-1.5.673-1.5 1.5a.5.5 0 0 1-.5.5c-.001 0-.413.007-.802.21A1.208 1.208 0 0 0 9.06 5h6.88a1.21 1.21 0 0 0-.638-.79c-.389-.203-.8-.21-.805-.21A.498.498 0 0 1 14 3.5c0-.827-.673-1.5-1.5-1.5zm0 1a.498.498 0 0 1 .5.5.5.5 0 1 1-.5-.5z\"\n style={{\n fillRule: 'evenodd',\n clipRule: 'evenodd',\n }}\n />\n </SvgIcon>\n);\n\nexport default TaskGroupIcon;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOnB;AALJ,qBAAwB;AAGxB,MAAM,gBAAgB,CAAC,UACrB,4CAAC,0BAAS,GAAG,OAAO,SAAQ,aAC1B;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,OAAO;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA;AACF,GACF;AAGF,IAAO,wBAAQ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/utils/SvgIcon.js CHANGED
@@ -41,6 +41,10 @@ const SvgIcon = (props) => {
41
41
  const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
42
42
  const { className, width, height, style, title, ...restGlobals } = (0, import_ds_utilities.useGetGlobalAttributes)(props);
43
43
  const defaultWidth = (0, import_react.useMemo)(() => {
44
+ if (String(width).includes("rem"))
45
+ return width;
46
+ if (String(height).includes("rem"))
47
+ return height;
44
48
  if (width)
45
49
  return parseInt(width.toString(), 10);
46
50
  if (height)
@@ -48,6 +52,10 @@ const SvgIcon = (props) => {
48
52
  return 16;
49
53
  }, [width, height]);
50
54
  const defaultHeight = (0, import_react.useMemo)(() => {
55
+ if (String(height).includes("rem"))
56
+ return height;
57
+ if (String(width).includes("rem"))
58
+ return width;
51
59
  if (height)
52
60
  return parseInt(height.toString(), 10);
53
61
  if (width)
package/dist/cjs/utils/SvgIcon.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/utils/SvgIcon.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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 (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 (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"],
5
- "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;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;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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
package/dist/cjs/utils/styled.js CHANGED
@@ -93,10 +93,14 @@ const StyledWrapper = (0, import_ds_system.styled)("span", {
93
93
  })`
94
94
  ${({ size, width, height }) => !width && !height && getSize(size)}
95
95
  ${({ width }) => {
96
+ if (String(width).includes("rem"))
97
+ return `width: ${width};`;
96
98
  if (width)
97
99
  return `width: ${width}px;`;
98
100
  }}
99
101
  ${({ height }) => {
102
+ if (String(height).includes("rem"))
103
+ return `height: ${height};`;
100
104
  if (height)
101
105
  return `height: ${height}px;`;
102
106
  }}
@@ -105,10 +109,14 @@ const StyledWrapper = (0, import_ds_system.styled)("span", {
105
109
  &.em-ds-icon svg {
106
110
  ${({ size, width, height }) => !width && !height && getSize(size)}
107
111
  ${({ width }) => {
112
+ if (String(width).includes("rem"))
113
+ return `width: ${width};`;
108
114
  if (width)
109
115
  return `width: ${width}px;`;
110
116
  }}
111
117
  ${({ height }) => {
118
+ if (String(height).includes("rem"))
119
+ return `height: ${height};`;
112
120
  if (height)
113
121
  return `height: ${height}px;`;
114
122
  }}
package/dist/cjs/utils/styled.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/utils/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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 (width) return `width: ${width}px;`;\n }}\n ${({ 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 (width) return `width: ${width}px;`;\n }}\n ${({ 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"],
5
- "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;AAAO,WAAO,UAAU;AAC9B;AAAA,IACE,CAAC,EAAE,OAAO,MAAM;AAChB,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;AAAO,WAAO,UAAU;AAC9B;AAAA,MACE,CAAC,EAAE,OAAO,MAAM;AAChB,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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
package/dist/esm/DocumentModifiedIcon.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DocumentModifiedIcon.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SvgIcon } from './utils/SvgIcon';\nimport { SvgIconT } from './utils/react-desc-prop-types';\n\nconst DocumentModifiedIcon = (props: SvgIconT.Props) => (\n <SvgIcon {...props} viewBox=\"0 0 24 24\">\n <g transform=\"translate(2 3)\">\n <path d=\"M17 5h-2.798C13.54 5 13 4.46 13 3.798V1h1v2.798c0 .111.09.202.202.202H17v1Z\" />\n <path d=\"m17.707 3.693-3.4-3.4A1 1 0 0 0 13.6 0H4a1 1 0 0 0-1 1v1.5h1V1h9.6L17 4.4V18H4v-1.5H3V18a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V4.4a1 1 0 0 0-.293-.707Z\" />\n <circle cx={3.5} cy={2.5} r={1} />\n <circle cx={3.5} cy={16.5} r={1} />\n <path d=\"m5.5 5 4.5 8H1l4.5-8m0-1a1 1 0 0 0-.872.51l-4.5 8A1 1 0 0 0 1 14h9a1 1 0 0 0 .872-1.49l-4.5-8A1 1 0 0 0 5.5 4Z\" />\n </g>\n </SvgIcon>\n);\n\nexport default DocumentModifiedIcon;\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SvgIcon } from './utils/SvgIcon';\nimport type { SvgIconT } from './utils/react-desc-prop-types';\n\nconst DocumentModifiedIcon = (props: SvgIconT.Props) => (\n <SvgIcon {...props} viewBox=\"0 0 24 24\">\n <g transform=\"translate(2 3)\">\n <path d=\"M17 5h-2.798C13.54 5 13 4.46 13 3.798V1h1v2.798c0 .111.09.202.202.202H17v1Z\" />\n <path d=\"m17.707 3.693-3.4-3.4A1 1 0 0 0 13.6 0H4a1 1 0 0 0-1 1v1.5h1V1h9.6L17 4.4V18H4v-1.5H3V18a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V4.4a1 1 0 0 0-.293-.707Z\" />\n <circle cx={3.5} cy={2.5} r={1} />\n <circle cx={3.5} cy={16.5} r={1} />\n <path d=\"m5.5 5 4.5 8H1l4.5-8m0-1a1 1 0 0 0-.872.51l-4.5 8A1 1 0 0 0 1 14h9a1 1 0 0 0 .872-1.49l-4.5-8A1 1 0 0 0 5.5 4Z\" />\n </g>\n </SvgIcon>\n);\n\nexport default DocumentModifiedIcon;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACOnB,SACE,KADF;AALJ,SAAS,eAAe;AAGxB,MAAM,uBAAuB,CAAC,UAC5B,oBAAC,WAAS,GAAG,OAAO,SAAQ,aAC1B,+BAAC,OAAE,WAAU,kBACX;AAAA,sBAAC,UAAK,GAAE,+EAA8E;AAAA,EACtF,oBAAC,UAAK,GAAE,oJAAmJ;AAAA,EAC3J,oBAAC,YAAO,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG;AAAA,EAChC,oBAAC,YAAO,IAAI,KAAK,IAAI,MAAM,GAAG,GAAG;AAAA,EACjC,oBAAC,UAAK,GAAE,kHAAiH;AAAA,GAC3H,GACF;AAGF,IAAO,+BAAQ;",
6
6
  "names": []
7
7
  }
package/dist/esm/DocumentRemovedIcon.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DocumentRemovedIcon.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SvgIcon } from './utils/SvgIcon';\nimport { SvgIconT } from './utils/react-desc-prop-types';\n\nconst DocumentRemovedIcon = (props: SvgIconT.Props) => (\n <SvgIcon {...props} viewBox=\"0 0 24 24\">\n <g transform=\"translate(2 3)\">\n <path d=\"M17 5h-2.798C13.54 5 13 4.46 13 3.798V1h1v2.798c0 .111.09.202.202.202H17v1Zm-7 4.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0m1 0C11 6.467 8.533 4 5.5 4A5.506 5.506 0 0 0 0 9.5C0 12.533 2.467 15 5.5 15S11 12.533 11 9.5Z\" />\n <path d=\"m1.964 12.328 6.718-6.717.707.707-6.717 6.717z\" />\n <path d=\"m1.61 6.318.708-.707 6.717 6.717-.707.708z\" />\n <path d=\"m17.707 3.693-3.4-3.4A1 1 0 0 0 13.6 0H4a1 1 0 0 0-1 1v1.5h1V1h9.6L17 4.4V18H4v-1.5H3V18a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V4.4a1 1 0 0 0-.293-.707Z\" />\n <circle cx={3.5} cy={2.5} r={1} />\n <circle cx={3.5} cy={16.5} r={1} />\n </g>\n </SvgIcon>\n);\n\nexport default DocumentRemovedIcon;\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SvgIcon } from './utils/SvgIcon';\nimport type { SvgIconT } from './utils/react-desc-prop-types';\n\nconst DocumentRemovedIcon = (props: SvgIconT.Props) => (\n <SvgIcon {...props} viewBox=\"0 0 24 24\">\n <g transform=\"translate(2 3)\">\n <path d=\"M17 5h-2.798C13.54 5 13 4.46 13 3.798V1h1v2.798c0 .111.09.202.202.202H17v1Zm-7 4.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0m1 0C11 6.467 8.533 4 5.5 4A5.506 5.506 0 0 0 0 9.5C0 12.533 2.467 15 5.5 15S11 12.533 11 9.5Z\" />\n <path d=\"m1.964 12.328 6.718-6.717.707.707-6.717 6.717z\" />\n <path d=\"m1.61 6.318.708-.707 6.717 6.717-.707.708z\" />\n <path d=\"m17.707 3.693-3.4-3.4A1 1 0 0 0 13.6 0H4a1 1 0 0 0-1 1v1.5h1V1h9.6L17 4.4V18H4v-1.5H3V18a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V4.4a1 1 0 0 0-.293-.707Z\" />\n <circle cx={3.5} cy={2.5} r={1} />\n <circle cx={3.5} cy={16.5} r={1} />\n </g>\n </SvgIcon>\n);\n\nexport default DocumentRemovedIcon;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACOnB,SACE,KADF;AALJ,SAAS,eAAe;AAGxB,MAAM,sBAAsB,CAAC,UAC3B,oBAAC,WAAS,GAAG,OAAO,SAAQ,aAC1B,+BAAC,OAAE,WAAU,kBACX;AAAA,sBAAC,UAAK,GAAE,wNAAuN;AAAA,EAC/N,oBAAC,UAAK,GAAE,kDAAiD;AAAA,EACzD,oBAAC,UAAK,GAAE,8CAA6C;AAAA,EACrD,oBAAC,UAAK,GAAE,oJAAmJ;AAAA,EAC3J,oBAAC,YAAO,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG;AAAA,EAChC,oBAAC,YAAO,IAAI,KAAK,IAAI,MAAM,GAAG,GAAG;AAAA,GACnC,GACF;AAGF,IAAO,8BAAQ;",
6
6
  "names": []
7
7
  }
package/dist/esm/TaskGroupIcon.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TaskGroupIcon.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SvgIcon } from './utils/SvgIcon';\nimport { SvgIconT } from './utils/react-desc-prop-types';\n\nconst TaskGroupIcon = (props: SvgIconT.Props) => (\n <SvgIcon {...props} viewBox=\"0 0 24 24\">\n <path\n d=\"M6.5 4a.5.5 0 0 1 0 1h-1a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 1 0-1h1c.827 0 1.5.673 1.5 1.5v15c0 .827-.673 1.5-1.5 1.5h-14c-.827 0-1.5-.673-1.5-1.5v-15C4 4.673 4.673 4 5.5 4h1zM9 16a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1zm8.5 1a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1h6zM9 17H8v1h1v-1zm0-5a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1zm8.5 1a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1h6zM9 13H8v1h1v-1zm0-5a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1zm8.5 1a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1h6zM9 9H8v1h1V9zm3.499-8c1.224 0 2.246.885 2.459 2.049.218.041.489.116.764.254.816.408 1.268 1.178 1.276 2.17l.001.027a.5.5 0 0 1-.5.5H8.5a.5.5 0 0 1-.5-.5c0-1.005.453-1.786 1.276-2.197.275-.138.547-.213.764-.254A2.504 2.504 0 0 1 12.499 1zm.001 1c-.827 0-1.5.673-1.5 1.5a.5.5 0 0 1-.5.5c-.001 0-.413.007-.802.21A1.208 1.208 0 0 0 9.06 5h6.88a1.21 1.21 0 0 0-.638-.79c-.389-.203-.8-.21-.805-.21A.498.498 0 0 1 14 3.5c0-.827-.673-1.5-1.5-1.5zm0 1a.498.498 0 0 1 .5.5.5.5 0 1 1-.5-.5z\"\n style={{\n fillRule: 'evenodd',\n clipRule: 'evenodd',\n }}\n />\n </SvgIcon>\n);\n\nexport default TaskGroupIcon;\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SvgIcon } from './utils/SvgIcon';\nimport type { SvgIconT } from './utils/react-desc-prop-types';\n\nconst TaskGroupIcon = (props: SvgIconT.Props) => (\n <SvgIcon {...props} viewBox=\"0 0 24 24\">\n <path\n d=\"M6.5 4a.5.5 0 0 1 0 1h-1a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 1 0-1h1c.827 0 1.5.673 1.5 1.5v15c0 .827-.673 1.5-1.5 1.5h-14c-.827 0-1.5-.673-1.5-1.5v-15C4 4.673 4.673 4 5.5 4h1zM9 16a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1zm8.5 1a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1h6zM9 17H8v1h1v-1zm0-5a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1zm8.5 1a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1h6zM9 13H8v1h1v-1zm0-5a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1zm8.5 1a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1h6zM9 9H8v1h1V9zm3.499-8c1.224 0 2.246.885 2.459 2.049.218.041.489.116.764.254.816.408 1.268 1.178 1.276 2.17l.001.027a.5.5 0 0 1-.5.5H8.5a.5.5 0 0 1-.5-.5c0-1.005.453-1.786 1.276-2.197.275-.138.547-.213.764-.254A2.504 2.504 0 0 1 12.499 1zm.001 1c-.827 0-1.5.673-1.5 1.5a.5.5 0 0 1-.5.5c-.001 0-.413.007-.802.21A1.208 1.208 0 0 0 9.06 5h6.88a1.21 1.21 0 0 0-.638-.79c-.389-.203-.8-.21-.805-.21A.498.498 0 0 1 14 3.5c0-.827-.673-1.5-1.5-1.5zm0 1a.498.498 0 0 1 .5.5.5.5 0 1 1-.5-.5z\"\n style={{\n fillRule: 'evenodd',\n clipRule: 'evenodd',\n }}\n />\n </SvgIcon>\n);\n\nexport default TaskGroupIcon;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACOnB;AALJ,SAAS,eAAe;AAGxB,MAAM,gBAAgB,CAAC,UACrB,oBAAC,WAAS,GAAG,OAAO,SAAQ,aAC1B;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,OAAO;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA;AACF,GACF;AAGF,IAAO,wBAAQ;",
6
6
  "names": []
7
7
  }
package/dist/esm/utils/SvgIcon.js CHANGED
@@ -10,6 +10,10 @@ const SvgIcon = (props) => {
10
10
  const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
11
11
  const { className, width, height, style, title, ...restGlobals } = useGetGlobalAttributes(props);
12
12
  const defaultWidth = useMemo(() => {
13
+ if (String(width).includes("rem"))
14
+ return width;
15
+ if (String(height).includes("rem"))
16
+ return height;
13
17
  if (width)
14
18
  return parseInt(width.toString(), 10);
15
19
  if (height)
@@ -17,6 +21,10 @@ const SvgIcon = (props) => {
17
21
  return 16;
18
22
  }, [width, height]);
19
23
  const defaultHeight = useMemo(() => {
24
+ if (String(height).includes("rem"))
25
+ return height;
26
+ if (String(width).includes("rem"))
27
+ return width;
20
28
  if (height)
21
29
  return parseInt(height.toString(), 10);
22
30
  if (width)
package/dist/esm/utils/SvgIcon.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/SvgIcon.tsx"],
4
- "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 (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 (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"],
5
- "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;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;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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
package/dist/esm/utils/styled.js CHANGED
@@ -74,10 +74,14 @@ const StyledWrapper = styled("span", {
74
74
  })`
75
75
  ${({ size, width, height }) => !width && !height && getSize(size)}
76
76
  ${({ width }) => {
77
+ if (String(width).includes("rem"))
78
+ return `width: ${width};`;
77
79
  if (width)
78
80
  return `width: ${width}px;`;
79
81
  }}
80
82
  ${({ height }) => {
83
+ if (String(height).includes("rem"))
84
+ return `height: ${height};`;
81
85
  if (height)
82
86
  return `height: ${height}px;`;
83
87
  }}
@@ -86,10 +90,14 @@ const StyledWrapper = styled("span", {
86
90
  &.em-ds-icon svg {
87
91
  ${({ size, width, height }) => !width && !height && getSize(size)}
88
92
  ${({ width }) => {
93
+ if (String(width).includes("rem"))
94
+ return `width: ${width};`;
89
95
  if (width)
90
96
  return `width: ${width}px;`;
91
97
  }}
92
98
  ${({ height }) => {
99
+ if (String(height).includes("rem"))
100
+ return `height: ${height};`;
93
101
  if (height)
94
102
  return `height: ${height}px;`;
95
103
  }}
package/dist/esm/utils/styled.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styled.tsx"],
4
- "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 (width) return `width: ${width}px;`;\n }}\n ${({ 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 (width) return `width: ${width}px;`;\n }}\n ${({ 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"],
5
- "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;AAAO,WAAO,UAAU;AAC9B;AAAA,IACE,CAAC,EAAE,OAAO,MAAM;AAChB,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;AAAO,WAAO,UAAU;AAC9B;AAAA,MACE,CAAC,EAAE,OAAO,MAAM;AAChB,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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-icons",
3
- "version": "3.14.0-next.5",
3
+ "version": "3.14.0-next.7",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Icons",
6
6
  "files": [
@@ -1571,9 +1571,9 @@
1571
1571
  "indent": 4
1572
1572
  },
1573
1573
  "dependencies": {
1574
- "@elliemae/ds-classnames": "3.14.0-next.5",
1575
- "@elliemae/ds-system": "3.14.0-next.5",
1576
- "@elliemae/ds-utilities": "3.14.0-next.5"
1574
+ "@elliemae/ds-classnames": "3.14.0-next.7",
1575
+ "@elliemae/ds-system": "3.14.0-next.7",
1576
+ "@elliemae/ds-utilities": "3.14.0-next.7"
1577
1577
  },
1578
1578
  "devDependencies": {
1579
1579
  "styled-components": "~5.3.6"