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

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.
@@ -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
  }
@@ -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
  }
@@ -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
  }
@@ -32,39 +32,53 @@ 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");
40
39
  const renderPaths = (paths) => paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: p }, i));
41
40
  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;
41
+ const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
42
+ const { className, width, height, style, title, ...restGlobals } = (0, import_ds_utilities.useGetGlobalAttributes)(props);
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;
48
+ if (width)
49
+ return parseInt(width.toString(), 10);
50
+ if (height)
51
+ return parseInt(height.toString(), 10);
52
+ return 16;
53
+ }, [width, height]);
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;
59
+ if (height)
60
+ return parseInt(height.toString(), 10);
61
+ if (width)
62
+ return parseInt(width.toString(), 10);
63
+ return 16;
64
+ }, [width, height]);
46
65
  const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(props);
47
66
  const { cssClassName } = (0, import_ds_classnames.convertPropToCssClassName)("icon", className, {
48
67
  size,
49
68
  color
50
69
  });
51
70
  const finalColor = (0, import_react.useMemo)(() => {
52
- if (!fill && !color)
53
- return void 0;
54
- let themeColor = "";
55
71
  if (fill)
56
72
  return fill;
57
73
  if (!color)
58
- return themeColor;
74
+ return void 0;
59
75
  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);
76
+ return `brand-${color[1]}`;
77
+ if (color[0] === "neutral" && color[1].toString() === "0")
78
+ return `neutral-000`;
79
+ if (color[0] === "neutral" && color[1].toString() === "900")
80
+ return `neutral-800`;
81
+ return `${color[0]}-${color[1]}`;
68
82
  }, [color, fill]);
69
83
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
70
84
  import_styled.StyledWrapper,
@@ -72,12 +86,15 @@ const SvgIcon = (props) => {
72
86
  as: component,
73
87
  ref: innerRef,
74
88
  className: cssClassName,
89
+ "aria-hidden": title !== void 0 ? false : true,
90
+ title,
75
91
  ...restGlobals,
76
92
  ...containerProps,
77
93
  ...xstyledProps,
78
94
  style,
79
95
  height: !size ? defaultHeight : void 0,
80
96
  width: !size ? defaultWidth : void 0,
97
+ size,
81
98
  svgColor: finalColor,
82
99
  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
100
  }
@@ -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';\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
  }
@@ -66,9 +66,6 @@ const xxsSizes = import_ds_system.css`
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}
@@ -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: 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
  }
@@ -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
  }
@@ -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
  }
@@ -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
  }
@@ -1,39 +1,53 @@
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";
9
8
  const renderPaths = (paths) => paths.map((p, i) => /* @__PURE__ */ jsx("path", { d: p }, i));
10
9
  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;
10
+ const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
11
+ const { className, width, height, style, title, ...restGlobals } = useGetGlobalAttributes(props);
12
+ const defaultWidth = useMemo(() => {
13
+ if (String(width).includes("rem"))
14
+ return width;
15
+ if (String(height).includes("rem"))
16
+ return height;
17
+ if (width)
18
+ return parseInt(width.toString(), 10);
19
+ if (height)
20
+ return parseInt(height.toString(), 10);
21
+ return 16;
22
+ }, [width, height]);
23
+ const defaultHeight = useMemo(() => {
24
+ if (String(height).includes("rem"))
25
+ return height;
26
+ if (String(width).includes("rem"))
27
+ return width;
28
+ if (height)
29
+ return parseInt(height.toString(), 10);
30
+ if (width)
31
+ return parseInt(width.toString(), 10);
32
+ return 16;
33
+ }, [width, height]);
15
34
  const xstyledProps = useGetXstyledProps(props);
16
35
  const { cssClassName } = convertPropToCssClassName("icon", className, {
17
36
  size,
18
37
  color
19
38
  });
20
39
  const finalColor = useMemo(() => {
21
- if (!fill && !color)
22
- return void 0;
23
- let themeColor = "";
24
40
  if (fill)
25
41
  return fill;
26
42
  if (!color)
27
- return themeColor;
43
+ return void 0;
28
44
  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);
45
+ return `brand-${color[1]}`;
46
+ if (color[0] === "neutral" && color[1].toString() === "0")
47
+ return `neutral-000`;
48
+ if (color[0] === "neutral" && color[1].toString() === "900")
49
+ return `neutral-800`;
50
+ return `${color[0]}-${color[1]}`;
37
51
  }, [color, fill]);
38
52
  return /* @__PURE__ */ jsx(
39
53
  StyledWrapper,
@@ -41,12 +55,15 @@ const SvgIcon = (props) => {
41
55
  as: component,
42
56
  ref: innerRef,
43
57
  className: cssClassName,
58
+ "aria-hidden": title !== void 0 ? false : true,
59
+ title,
44
60
  ...restGlobals,
45
61
  ...containerProps,
46
62
  ...xstyledProps,
47
63
  style,
48
64
  height: !size ? defaultHeight : void 0,
49
65
  width: !size ? defaultWidth : void 0,
66
+ size,
50
67
  svgColor: finalColor,
51
68
  children: /* @__PURE__ */ jsx(StyledSvg, { viewBox, width: !size ? defaultWidth : void 0, height: !size ? defaultHeight : void 0, children: paths ? renderPaths(paths) : children })
52
69
  }
@@ -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';\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
  }
@@ -1,5 +1,16 @@
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;
@@ -36,9 +47,6 @@ const xxsSizes = css`
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}
@@ -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: 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.1",
3
+ "version": "3.14.0-next.10",
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.10",
1575
+ "@elliemae/ds-system": "3.14.0-next.10",
1576
+ "@elliemae/ds-utilities": "3.14.0-next.10"
1577
1577
  },
1578
1578
  "devDependencies": {
1579
1579
  "styled-components": "~5.3.6"