@elliemae/ds-icons 3.14.0-next.1 → 3.14.0-next.11

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 (19) 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 +35 -17
  5. package/dist/cjs/utils/SvgIcon.js.map +2 -2
  6. package/dist/cjs/utils/pixToRem.js +32 -0
  7. package/dist/cjs/utils/pixToRem.js.map +7 -0
  8. package/dist/cjs/utils/styled.js +26 -18
  9. package/dist/cjs/utils/styled.js.map +2 -2
  10. package/dist/esm/DocumentModifiedIcon.js.map +1 -1
  11. package/dist/esm/DocumentRemovedIcon.js.map +1 -1
  12. package/dist/esm/TaskGroupIcon.js.map +1 -1
  13. package/dist/esm/utils/SvgIcon.js +35 -17
  14. package/dist/esm/utils/SvgIcon.js.map +2 -2
  15. package/dist/esm/utils/pixToRem.js +6 -0
  16. package/dist/esm/utils/pixToRem.js.map +7 -0
  17. package/dist/esm/utils/styled.js +38 -19
  18. package/dist/esm/utils/styled.js.map +2 -2
  19. 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
@@ -32,39 +32,54 @@ module.exports = __toCommonJS(SvgIcon_exports);
32
32
  var React = __toESM(require("react"));
33
33
  var import_jsx_runtime = require("react/jsx-runtime");
34
34
  var import_react = require("react");
35
- var import_ds_system = require("@elliemae/ds-system");
36
35
  var import_ds_utilities = require("@elliemae/ds-utilities");
37
36
  var import_ds_classnames = require("@elliemae/ds-classnames");
38
37
  var import_react_desc_prop_types = require("./react-desc-prop-types");
39
38
  var import_styled = require("./styled");
39
+ var import_pixToRem = require("./pixToRem");
40
40
  const renderPaths = (paths) => paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: p }, i));
41
41
  const SvgIcon = (props) => {
42
- const { size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
43
- const { className, width, height, style, color, ...restGlobals } = (0, import_ds_utilities.useGetGlobalAttributes)(props);
44
- const defaultWidth = ((width || height) && parseInt((width || height || "16").toString(), 10)) ?? 16;
45
- const defaultHeight = ((height || width) && parseInt((height || width || "16").toString(), 10)) ?? 16;
42
+ const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
43
+ const { className, width, height, style, title, ...restGlobals } = (0, import_ds_utilities.useGetGlobalAttributes)(props);
44
+ const defaultWidth = (0, import_react.useMemo)(() => {
45
+ if (String(width).includes("rem"))
46
+ return width;
47
+ if (String(height).includes("rem"))
48
+ return height;
49
+ if (width)
50
+ return (0, import_pixToRem.pixToRem)(parseInt(width.toString(), 10));
51
+ if (height)
52
+ return (0, import_pixToRem.pixToRem)(parseInt(height.toString(), 10));
53
+ return (0, import_pixToRem.pixToRem)(16);
54
+ }, [width, height]);
55
+ const defaultHeight = (0, import_react.useMemo)(() => {
56
+ if (String(height).includes("rem"))
57
+ return height;
58
+ if (String(width).includes("rem"))
59
+ return width;
60
+ if (height)
61
+ return (0, import_pixToRem.pixToRem)(parseInt(height.toString(), 10));
62
+ if (width)
63
+ return (0, import_pixToRem.pixToRem)(parseInt(width.toString(), 10));
64
+ return (0, import_pixToRem.pixToRem)(16);
65
+ }, [width, height]);
46
66
  const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(props);
47
67
  const { cssClassName } = (0, import_ds_classnames.convertPropToCssClassName)("icon", className, {
48
68
  size,
49
69
  color
50
70
  });
51
71
  const finalColor = (0, import_react.useMemo)(() => {
52
- if (!fill && !color)
53
- return void 0;
54
- let themeColor = "";
55
72
  if (fill)
56
73
  return fill;
57
74
  if (!color)
58
- return themeColor;
75
+ return void 0;
59
76
  if (color[0] === "brand-primary")
60
- themeColor = `brand-${color[1]}`;
61
- else if (color[0] === "neutral" && color[1].toString() === "0")
62
- themeColor = `neutral-000`;
63
- else if (color[0] === "neutral" && color[1].toString() === "900")
64
- themeColor = `neutral-800`;
65
- else
66
- themeColor = `${color[0]}-${color[1]}`;
67
- return import_ds_system.th.color(themeColor);
77
+ return `brand-${color[1]}`;
78
+ if (color[0] === "neutral" && color[1].toString() === "0")
79
+ return `neutral-000`;
80
+ if (color[0] === "neutral" && color[1].toString() === "900")
81
+ return `neutral-800`;
82
+ return `${color[0]}-${color[1]}`;
68
83
  }, [color, fill]);
69
84
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
70
85
  import_styled.StyledWrapper,
@@ -72,12 +87,15 @@ const SvgIcon = (props) => {
72
87
  as: component,
73
88
  ref: innerRef,
74
89
  className: cssClassName,
90
+ "aria-hidden": title !== void 0 ? false : true,
91
+ title,
75
92
  ...restGlobals,
76
93
  ...containerProps,
77
94
  ...xstyledProps,
78
95
  style,
79
96
  height: !size ? defaultHeight : void 0,
80
97
  width: !size ? defaultWidth : void 0,
98
+ size,
81
99
  svgColor: finalColor,
82
100
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSvg, { viewBox, width: !size ? defaultWidth : void 0, height: !size ? defaultHeight : void 0, children: paths ? renderPaths(paths) : children })
83
101
  }
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 complexity */\n/* eslint-disable react/no-array-index-key */\nimport React, { useMemo } from 'react';\nimport { th } from '@elliemae/ds-system';\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';\nconst renderPaths = (paths: string[]) => paths.map((p, i) => <path key={i} d={p} />);\n\nconst SvgIcon: React.ComponentType<SvgIconT.Props> = (props) => {\n const { size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;\n\n const { className, width, height, style, color, ...restGlobals } = useGetGlobalAttributes(props);\n\n const defaultWidth = ((width || height) && parseInt((width || height || '16').toString(), 10)) ?? 16;\n const defaultHeight = ((height || width) && parseInt((height || width || '16').toString(), 10)) ?? 16;\n const xstyledProps = useGetXstyledProps(props);\n const { cssClassName } = convertPropToCssClassName('icon', className, {\n size,\n color,\n });\n\n const finalColor = useMemo(() => {\n if (!fill && !color) return undefined;\n let themeColor = '';\n if (fill) return fill;\n if (!color) return themeColor;\n if (color[0] === 'brand-primary') themeColor = `brand-${color[1]}`;\n else if (color[0] === 'neutral' && color[1].toString() === '0') themeColor = `neutral-000`;\n else if (color[0] === 'neutral' && color[1].toString() === '900') themeColor = `neutral-800`;\n else themeColor = `${color[0]}-${color[1]}`;\n\n return th.color(themeColor);\n }, [color, fill]);\n\n return (\n <StyledWrapper\n as={component}\n ref={innerRef}\n className={cssClassName}\n {...restGlobals}\n {...containerProps}\n {...xstyledProps}\n style={style}\n height={!size ? defaultHeight : undefined}\n width={!size ? defaultWidth : undefined}\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;ADSsC;AAP7D,mBAA+B;AAC/B,uBAAmB;AACnB,0BAAqE;AACrE,2BAA0C;AAE1C,mCAA0B;AAC1B,oBAAyC;AACzC,MAAM,cAAc,CAAC,UAAoB,MAAM,IAAI,CAAC,GAAG,MAAM,4CAAC,UAAa,GAAG,KAAN,CAAS,CAAE;AAEnF,MAAM,UAA+C,CAAC,UAAU;AAC9D,QAAM,EAAE,MAAM,UAAU,gBAAgB,OAAO,MAAM,SAAS,UAAU,UAAU,IAAI;AAEtF,QAAM,EAAE,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,QAAI,4CAAuB,KAAK;AAE/F,QAAM,iBAAiB,SAAS,WAAW,UAAU,SAAS,UAAU,MAAM,SAAS,GAAG,EAAE,MAAM;AAClG,QAAM,kBAAkB,UAAU,UAAU,UAAU,UAAU,SAAS,MAAM,SAAS,GAAG,EAAE,MAAM;AACnG,QAAM,mBAAe,wCAAmB,KAAK;AAC7C,QAAM,EAAE,aAAa,QAAI,gDAA0B,QAAQ,WAAW;AAAA,IACpE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,QAAI,CAAC,QAAQ,CAAC;AAAO,aAAO;AAC5B,QAAI,aAAa;AACjB,QAAI;AAAM,aAAO;AACjB,QAAI,CAAC;AAAO,aAAO;AACnB,QAAI,MAAM,OAAO;AAAiB,mBAAa,SAAS,MAAM;AAAA,aACrD,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAK,mBAAa;AAAA,aACpE,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAO,mBAAa;AAAA;AAC1E,mBAAa,GAAG,MAAM,MAAM,MAAM;AAEvC,WAAO,oBAAG,MAAM,UAAU;AAAA,EAC5B,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW;AAAA,MACV,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,QAAQ,CAAC,OAAO,gBAAgB;AAAA,MAChC,OAAO,CAAC,OAAO,eAAe;AAAA,MAC9B,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';\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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
package/dist/cjs/utils/pixToRem.js ADDED
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
24
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
25
+ var pixToRem_exports = {};
26
+ __export(pixToRem_exports, {
27
+ pixToRem: () => pixToRem
28
+ });
29
+ module.exports = __toCommonJS(pixToRem_exports);
30
+ var React = __toESM(require("react"));
31
+ const pixToRem = (size) => `${size / 16}rem`;
32
+ //# sourceMappingURL=pixToRem.js.map
package/dist/cjs/utils/pixToRem.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/utils/pixToRem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["export const pixToRem = (size: number) => `${size / 16}rem`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,WAAW,CAAC,SAAiB,GAAG,OAAO;",
6
+ "names": []
7
+ }
package/dist/cjs/utils/styled.js CHANGED
@@ -36,39 +36,36 @@ const displaySizes = import_ds_system.css`
36
36
  vertical-align: middle;
37
37
  `;
38
38
  const xxlSizes = import_ds_system.css`
39
- width: 64px;
40
- height: 64px;
39
+ width: 4.923rem;
40
+ height: 4.923rem;
41
41
  `;
42
42
  const xlSizes = import_ds_system.css`
43
- width: 48px;
44
- height: 48px;
43
+ width: 3.692rem;
44
+ height: 3.692rem;
45
45
  `;
46
46
  const lSizes = import_ds_system.css`
47
- width: 32px;
48
- height: 32px;
47
+ width: 2.462rem;
48
+ height: 2.462rem;
49
49
  `;
50
50
  const mSizes = import_ds_system.css`
51
- width: 24px;
52
- height: 24px;
51
+ width: 1.846rem;
52
+ height: 1.846rem;
53
53
  `;
54
54
  const sSizes = import_ds_system.css`
55
- width: 16px;
56
- height: 16px;
55
+ width: 1.231rem;
56
+ height: 1.231rem;
57
57
  `;
58
58
  const xsSizes = import_ds_system.css`
59
- width: 8px;
60
- height: 8px;
59
+ width: 0.615rem;
60
+ height: 0.615rem;
61
61
  `;
62
62
  const xxsSizes = import_ds_system.css`
63
- width: 4px;
64
- height: 4px;
63
+ width: 0.308rem;
64
+ height: 0.308rem;
65
65
  `;
66
66
  const standarSizes = import_ds_system.css`
67
67
  ${sSizes}
68
68
  `;
69
- const svgColorCss = import_ds_system.css`
70
- fill: ${({ svgColor }) => svgColor} !important;
71
- `;
72
69
  const getSize = (size) => {
73
70
  if (size === "xxl")
74
71
  return xxlSizes;
@@ -96,10 +93,14 @@ const StyledWrapper = (0, import_ds_system.styled)("span", {
96
93
  })`
97
94
  ${({ size, width, height }) => !width && !height && getSize(size)}
98
95
  ${({ width }) => {
96
+ if (String(width).includes("rem"))
97
+ return `width: ${width};`;
99
98
  if (width)
100
99
  return `width: ${width}px;`;
101
100
  }}
102
101
  ${({ height }) => {
102
+ if (String(height).includes("rem"))
103
+ return `height: ${height};`;
103
104
  if (height)
104
105
  return `height: ${height}px;`;
105
106
  }}
@@ -108,14 +109,21 @@ const StyledWrapper = (0, import_ds_system.styled)("span", {
108
109
  &.em-ds-icon svg {
109
110
  ${({ size, width, height }) => !width && !height && getSize(size)}
110
111
  ${({ width }) => {
112
+ if (String(width).includes("rem"))
113
+ return `width: ${width};`;
111
114
  if (width)
112
115
  return `width: ${width}px;`;
113
116
  }}
114
117
  ${({ height }) => {
118
+ if (String(height).includes("rem"))
119
+ return `height: ${height};`;
115
120
  if (height)
116
121
  return `height: ${height}px;`;
117
122
  }}
118
- ${({ svgColor }) => svgColor && svgColorCss}
123
+ ${({ svgColor, theme }) => {
124
+ if (svgColor)
125
+ return `fill: ${import_ds_system.th.color(svgColor, svgColor)({ theme })};`;
126
+ }}
119
127
  }
120
128
  ${import_ds_system.layout}
121
129
  ${import_ds_system.space}
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 { styled, css, background, borders, sizing, space, boxShadows, flexboxes, layout } from '@elliemae/ds-system';\nimport { DSIconName, DSIconSlots } from './theming';\n\ninterface StyledWrapperPropsT {\n size: string;\n svgColor: string[];\n width: string;\n height: string;\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 svgColorCss = css`\n fill: ${({ svgColor }) => svgColor} !important;\n`;\n\nconst getSize = (size: string) => {\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 }) => svgColor && svgColorCss}\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,uBAA+F;AAC/F,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,cAAc;AAAA,UACV,CAAC,EAAE,SAAS,MAAM;AAAA;AAG5B,MAAM,UAAU,CAAC,SAAiB;AAChC,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,SAAS,MAAM,YAAY;AAAA;AAAA,IAEhC;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: 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"],
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
@@ -1,39 +1,54 @@
1
1
  import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
3
  import { useMemo } from "react";
4
- import { th } from "@elliemae/ds-system";
5
4
  import { describe, useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-utilities";
6
5
  import { convertPropToCssClassName } from "@elliemae/ds-classnames";
7
6
  import { propTypes } from "./react-desc-prop-types";
8
7
  import { StyledSvg, StyledWrapper } from "./styled";
8
+ import { pixToRem } from "./pixToRem";
9
9
  const renderPaths = (paths) => paths.map((p, i) => /* @__PURE__ */ jsx("path", { d: p }, i));
10
10
  const SvgIcon = (props) => {
11
- const { size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
12
- const { className, width, height, style, color, ...restGlobals } = useGetGlobalAttributes(props);
13
- const defaultWidth = ((width || height) && parseInt((width || height || "16").toString(), 10)) ?? 16;
14
- const defaultHeight = ((height || width) && parseInt((height || width || "16").toString(), 10)) ?? 16;
11
+ const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
12
+ const { className, width, height, style, title, ...restGlobals } = useGetGlobalAttributes(props);
13
+ const defaultWidth = useMemo(() => {
14
+ if (String(width).includes("rem"))
15
+ return width;
16
+ if (String(height).includes("rem"))
17
+ return height;
18
+ if (width)
19
+ return pixToRem(parseInt(width.toString(), 10));
20
+ if (height)
21
+ return pixToRem(parseInt(height.toString(), 10));
22
+ return pixToRem(16);
23
+ }, [width, height]);
24
+ const defaultHeight = useMemo(() => {
25
+ if (String(height).includes("rem"))
26
+ return height;
27
+ if (String(width).includes("rem"))
28
+ return width;
29
+ if (height)
30
+ return pixToRem(parseInt(height.toString(), 10));
31
+ if (width)
32
+ return pixToRem(parseInt(width.toString(), 10));
33
+ return pixToRem(16);
34
+ }, [width, height]);
15
35
  const xstyledProps = useGetXstyledProps(props);
16
36
  const { cssClassName } = convertPropToCssClassName("icon", className, {
17
37
  size,
18
38
  color
19
39
  });
20
40
  const finalColor = useMemo(() => {
21
- if (!fill && !color)
22
- return void 0;
23
- let themeColor = "";
24
41
  if (fill)
25
42
  return fill;
26
43
  if (!color)
27
- return themeColor;
44
+ return void 0;
28
45
  if (color[0] === "brand-primary")
29
- themeColor = `brand-${color[1]}`;
30
- else if (color[0] === "neutral" && color[1].toString() === "0")
31
- themeColor = `neutral-000`;
32
- else if (color[0] === "neutral" && color[1].toString() === "900")
33
- themeColor = `neutral-800`;
34
- else
35
- themeColor = `${color[0]}-${color[1]}`;
36
- return th.color(themeColor);
46
+ return `brand-${color[1]}`;
47
+ if (color[0] === "neutral" && color[1].toString() === "0")
48
+ return `neutral-000`;
49
+ if (color[0] === "neutral" && color[1].toString() === "900")
50
+ return `neutral-800`;
51
+ return `${color[0]}-${color[1]}`;
37
52
  }, [color, fill]);
38
53
  return /* @__PURE__ */ jsx(
39
54
  StyledWrapper,
@@ -41,12 +56,15 @@ const SvgIcon = (props) => {
41
56
  as: component,
42
57
  ref: innerRef,
43
58
  className: cssClassName,
59
+ "aria-hidden": title !== void 0 ? false : true,
60
+ title,
44
61
  ...restGlobals,
45
62
  ...containerProps,
46
63
  ...xstyledProps,
47
64
  style,
48
65
  height: !size ? defaultHeight : void 0,
49
66
  width: !size ? defaultWidth : void 0,
67
+ size,
50
68
  svgColor: finalColor,
51
69
  children: /* @__PURE__ */ jsx(StyledSvg, { viewBox, width: !size ? defaultWidth : void 0, height: !size ? defaultHeight : void 0, children: paths ? renderPaths(paths) : children })
52
70
  }
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 complexity */\n/* eslint-disable react/no-array-index-key */\nimport React, { useMemo } from 'react';\nimport { th } from '@elliemae/ds-system';\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';\nconst renderPaths = (paths: string[]) => paths.map((p, i) => <path key={i} d={p} />);\n\nconst SvgIcon: React.ComponentType<SvgIconT.Props> = (props) => {\n const { size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;\n\n const { className, width, height, style, color, ...restGlobals } = useGetGlobalAttributes(props);\n\n const defaultWidth = ((width || height) && parseInt((width || height || '16').toString(), 10)) ?? 16;\n const defaultHeight = ((height || width) && parseInt((height || width || '16').toString(), 10)) ?? 16;\n const xstyledProps = useGetXstyledProps(props);\n const { cssClassName } = convertPropToCssClassName('icon', className, {\n size,\n color,\n });\n\n const finalColor = useMemo(() => {\n if (!fill && !color) return undefined;\n let themeColor = '';\n if (fill) return fill;\n if (!color) return themeColor;\n if (color[0] === 'brand-primary') themeColor = `brand-${color[1]}`;\n else if (color[0] === 'neutral' && color[1].toString() === '0') themeColor = `neutral-000`;\n else if (color[0] === 'neutral' && color[1].toString() === '900') themeColor = `neutral-800`;\n else themeColor = `${color[0]}-${color[1]}`;\n\n return th.color(themeColor);\n }, [color, fill]);\n\n return (\n <StyledWrapper\n as={component}\n ref={innerRef}\n className={cssClassName}\n {...restGlobals}\n {...containerProps}\n {...xstyledProps}\n style={style}\n height={!size ? defaultHeight : undefined}\n width={!size ? defaultWidth : undefined}\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;ACSsC;AAP7D,SAAgB,eAAe;AAC/B,SAAS,UAAU;AACnB,SAAS,UAAU,wBAAwB,0BAA0B;AACrE,SAAS,iCAAiC;AAE1C,SAAS,iBAAiB;AAC1B,SAAS,WAAW,qBAAqB;AACzC,MAAM,cAAc,CAAC,UAAoB,MAAM,IAAI,CAAC,GAAG,MAAM,oBAAC,UAAa,GAAG,KAAN,CAAS,CAAE;AAEnF,MAAM,UAA+C,CAAC,UAAU;AAC9D,QAAM,EAAE,MAAM,UAAU,gBAAgB,OAAO,MAAM,SAAS,UAAU,UAAU,IAAI;AAEtF,QAAM,EAAE,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,IAAI,uBAAuB,KAAK;AAE/F,QAAM,iBAAiB,SAAS,WAAW,UAAU,SAAS,UAAU,MAAM,SAAS,GAAG,EAAE,MAAM;AAClG,QAAM,kBAAkB,UAAU,UAAU,UAAU,UAAU,SAAS,MAAM,SAAS,GAAG,EAAE,MAAM;AACnG,QAAM,eAAe,mBAAmB,KAAK;AAC7C,QAAM,EAAE,aAAa,IAAI,0BAA0B,QAAQ,WAAW;AAAA,IACpE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,CAAC,QAAQ,CAAC;AAAO,aAAO;AAC5B,QAAI,aAAa;AACjB,QAAI;AAAM,aAAO;AACjB,QAAI,CAAC;AAAO,aAAO;AACnB,QAAI,MAAM,OAAO;AAAiB,mBAAa,SAAS,MAAM;AAAA,aACrD,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAK,mBAAa;AAAA,aACpE,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAO,mBAAa;AAAA;AAC1E,mBAAa,GAAG,MAAM,MAAM,MAAM;AAEvC,WAAO,GAAG,MAAM,UAAU;AAAA,EAC5B,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW;AAAA,MACV,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,QAAQ,CAAC,OAAO,gBAAgB;AAAA,MAChC,OAAO,CAAC,OAAO,eAAe;AAAA,MAC9B,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';\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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
package/dist/esm/utils/pixToRem.js ADDED
@@ -0,0 +1,6 @@
1
+ import * as React from "react";
2
+ const pixToRem = (size) => `${size / 16}rem`;
3
+ export {
4
+ pixToRem
5
+ };
6
+ //# sourceMappingURL=pixToRem.js.map
package/dist/esm/utils/pixToRem.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/pixToRem.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const pixToRem = (size: number) => `${size / 16}rem`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,WAAW,CAAC,SAAiB,GAAG,OAAO;",
6
+ "names": []
7
+ }
package/dist/esm/utils/styled.js CHANGED
@@ -1,44 +1,52 @@
1
1
  import * as React from "react";
2
- import { styled, css, background, borders, sizing, space, boxShadows, flexboxes, layout } from "@elliemae/ds-system";
2
+ import {
3
+ styled,
4
+ css,
5
+ background,
6
+ borders,
7
+ sizing,
8
+ space,
9
+ boxShadows,
10
+ flexboxes,
11
+ layout,
12
+ th
13
+ } from "@elliemae/ds-system";
3
14
  import { DSIconName, DSIconSlots } from "./theming";
4
15
  const displaySizes = css`
5
16
  display: inline-flex;
6
17
  vertical-align: middle;
7
18
  `;
8
19
  const xxlSizes = css`
9
- width: 64px;
10
- height: 64px;
20
+ width: 4.923rem;
21
+ height: 4.923rem;
11
22
  `;
12
23
  const xlSizes = css`
13
- width: 48px;
14
- height: 48px;
24
+ width: 3.692rem;
25
+ height: 3.692rem;
15
26
  `;
16
27
  const lSizes = css`
17
- width: 32px;
18
- height: 32px;
28
+ width: 2.462rem;
29
+ height: 2.462rem;
19
30
  `;
20
31
  const mSizes = css`
21
- width: 24px;
22
- height: 24px;
32
+ width: 1.846rem;
33
+ height: 1.846rem;
23
34
  `;
24
35
  const sSizes = css`
25
- width: 16px;
26
- height: 16px;
36
+ width: 1.231rem;
37
+ height: 1.231rem;
27
38
  `;
28
39
  const xsSizes = css`
29
- width: 8px;
30
- height: 8px;
40
+ width: 0.615rem;
41
+ height: 0.615rem;
31
42
  `;
32
43
  const xxsSizes = css`
33
- width: 4px;
34
- height: 4px;
44
+ width: 0.308rem;
45
+ height: 0.308rem;
35
46
  `;
36
47
  const standarSizes = css`
37
48
  ${sSizes}
38
49
  `;
39
- const svgColorCss = css`
40
- fill: ${({ svgColor }) => svgColor} !important;
41
- `;
42
50
  const getSize = (size) => {
43
51
  if (size === "xxl")
44
52
  return xxlSizes;
@@ -66,10 +74,14 @@ const StyledWrapper = styled("span", {
66
74
  })`
67
75
  ${({ size, width, height }) => !width && !height && getSize(size)}
68
76
  ${({ width }) => {
77
+ if (String(width).includes("rem"))
78
+ return `width: ${width};`;
69
79
  if (width)
70
80
  return `width: ${width}px;`;
71
81
  }}
72
82
  ${({ height }) => {
83
+ if (String(height).includes("rem"))
84
+ return `height: ${height};`;
73
85
  if (height)
74
86
  return `height: ${height}px;`;
75
87
  }}
@@ -78,14 +90,21 @@ const StyledWrapper = styled("span", {
78
90
  &.em-ds-icon svg {
79
91
  ${({ size, width, height }) => !width && !height && getSize(size)}
80
92
  ${({ width }) => {
93
+ if (String(width).includes("rem"))
94
+ return `width: ${width};`;
81
95
  if (width)
82
96
  return `width: ${width}px;`;
83
97
  }}
84
98
  ${({ height }) => {
99
+ if (String(height).includes("rem"))
100
+ return `height: ${height};`;
85
101
  if (height)
86
102
  return `height: ${height}px;`;
87
103
  }}
88
- ${({ svgColor }) => svgColor && svgColorCss}
104
+ ${({ svgColor, theme }) => {
105
+ if (svgColor)
106
+ return `fill: ${th.color(svgColor, svgColor)({ theme })};`;
107
+ }}
89
108
  }
90
109
  ${layout}
91
110
  ${space}
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 { styled, css, background, borders, sizing, space, boxShadows, flexboxes, layout } from '@elliemae/ds-system';\nimport { DSIconName, DSIconSlots } from './theming';\n\ninterface StyledWrapperPropsT {\n size: string;\n svgColor: string[];\n width: string;\n height: string;\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 svgColorCss = css`\n fill: ${({ svgColor }) => svgColor} !important;\n`;\n\nconst getSize = (size: string) => {\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 }) => svgColor && svgColorCss}\n }\n ${layout}\n ${space}\n ${sizing}\n ${background}\n ${borders}\n ${boxShadows}\n ${flexboxes}\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,YAAY,SAAS,QAAQ,OAAO,YAAY,WAAW,cAAc;AAC/F,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,cAAc;AAAA,UACV,CAAC,EAAE,SAAS,MAAM;AAAA;AAG5B,MAAM,UAAU,CAAC,SAAiB;AAChC,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,SAAS,MAAM,YAAY;AAAA;AAAA,IAEhC;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: 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"],
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.1",
3
+ "version": "3.14.0-next.11",
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.1",
1575
- "@elliemae/ds-system": "3.14.0-next.1",
1576
- "@elliemae/ds-utilities": "3.14.0-next.1"
1574
+ "@elliemae/ds-classnames": "3.14.0-next.11",
1575
+ "@elliemae/ds-system": "3.14.0-next.11",
1576
+ "@elliemae/ds-utilities": "3.14.0-next.11"
1577
1577
  },
1578
1578
  "devDependencies": {
1579
1579
  "styled-components": "~5.3.6"