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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -38,7 +38,7 @@ const displaySizes = import_ds_system.css`
38
38
  const xxlSizes = import_ds_system.css`
39
39
  width: 4rem;
40
40
  height: 4rem;
41
- @media (min-width: ${import_ds_system.th.breakpoint.small}) {
41
+ @media (min-width: ${import_ds_system.th.breakpoint("small")}) {
42
42
  width: 4.923rem;
43
43
  height: 4.923rem;
44
44
  }
@@ -46,7 +46,7 @@ const xxlSizes = import_ds_system.css`
46
46
  const xlSizes = import_ds_system.css`
47
47
  width: 3rem;
48
48
  height: 3rem;
49
- @media (min-width: ${import_ds_system.th.breakpoint.small}) {
49
+ @media (min-width: ${import_ds_system.th.breakpoint("small")}) {
50
50
  width: 3.692rem;
51
51
  height: 3.692rem;
52
52
  }
@@ -54,7 +54,7 @@ const xlSizes = import_ds_system.css`
54
54
  const lSizes = import_ds_system.css`
55
55
  width: 2rem;
56
56
  height: 2rem;
57
- @media (min-width: ${import_ds_system.th.breakpoint.small}) {
57
+ @media (min-width: ${import_ds_system.th.breakpoint("small")}) {
58
58
  width: 2.462rem;
59
59
  height: 2.462rem;
60
60
  }
@@ -62,7 +62,7 @@ const lSizes = import_ds_system.css`
62
62
  const mSizes = import_ds_system.css`
63
63
  width: 1.5rem;
64
64
  height: 1.5rem;
65
- @media (min-width: ${import_ds_system.th.breakpoint.small}) {
65
+ @media (min-width: ${import_ds_system.th.breakpoint("small")}) {
66
66
  width: 1.846rem;
67
67
  height: 1.846rem;
68
68
  }
@@ -70,7 +70,7 @@ const mSizes = import_ds_system.css`
70
70
  const sSizes = import_ds_system.css`
71
71
  width: 1rem;
72
72
  height: 1rem;
73
- @media (min-width: ${import_ds_system.th.breakpoint.small}) {
73
+ @media (min-width: ${import_ds_system.th.breakpoint("small")}) {
74
74
  width: 1.231rem;
75
75
  height: 1.231rem;
76
76
  }
@@ -78,7 +78,7 @@ const sSizes = import_ds_system.css`
78
78
  const xsSizes = import_ds_system.css`
79
79
  width: 0.5rem;
80
80
  height: 0.5rem;
81
- @media (min-width: ${import_ds_system.th.breakpoint.small}) {
81
+ @media (min-width: ${import_ds_system.th.breakpoint("small")}) {
82
82
  width: 0.615rem;
83
83
  height: 0.615rem;
84
84
  }
@@ -86,7 +86,7 @@ const xsSizes = import_ds_system.css`
86
86
  const xxsSizes = import_ds_system.css`
87
87
  width: 0.25rem;
88
88
  height: 0.25rem;
89
- @media (min-width: ${import_ds_system.th.breakpoint.small}) {
89
+ @media (min-width: ${import_ds_system.th.breakpoint("small")}) {
90
90
  width: 0.308rem;
91
91
  height: 0.308rem;
92
92
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/utils/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import {\n styled,\n css,\n background,\n borders,\n sizing,\n space,\n boxShadows,\n flexboxes,\n layout,\n th,\n} from '@elliemae/ds-system';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { DSIconName, DSIconSlots } from './theming';\n\ninterface StyledWrapperPropsT {\n size: SvgIconT.SizeType | undefined;\n svgColor: string | undefined;\n width: number | undefined;\n height: number | undefined;\n}\n\nconst displaySizes = css`\n display: inline-flex;\n vertical-align: middle;\n`;\nconst xxlSizes = css`\n width: 4rem;\n height: 4rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 4.923rem;\n height: 4.923rem;\n }\n`;\n\nconst xlSizes = css`\n width: 3rem;\n height: 3rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 3.692rem;\n height: 3.692rem;\n }\n`;\n\nconst lSizes = css`\n width: 2rem;\n height: 2rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 2.462rem;\n height: 2.462rem;\n }\n`;\n\nconst mSizes = css`\n width: 1.5rem;\n height: 1.5rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 1.846rem;\n height: 1.846rem;\n }\n`;\n\nconst sSizes = css`\n width: 1rem;\n height: 1rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 1.231rem;\n height: 1.231rem;\n }\n`;\n\nconst xsSizes = css`\n width: 0.5rem;\n height: 0.5rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 0.615rem;\n height: 0.615rem;\n }\n`;\n\nconst xxsSizes = css`\n width: 0.25rem;\n height: 0.25rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 0.308rem;\n height: 0.308rem;\n }\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 ${({ width, height, theme, size }) => {\n if (size) return getSize(size);\n\n if (String(width).includes('rem') && String(height).includes('rem'))\n return `\n width: ${width};\n height: ${height};\n `;\n\n return `\n width: ${width / 16}rem;\n height: ${height / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${width / 13}rem;\n height: ${height / 13}rem;\n\n }`;\n }}\n`;\n\nexport const StyledWrapper = styled('span', {\n name: DSIconName,\n slot: DSIconSlots.ICON_WRAPPER,\n})<StyledWrapperPropsT>`\n ${({ width, height, size, theme }) => {\n if (size) return getSize(size);\n if (String(width).includes('rem') && String(height).includes('rem'))\n return `\n width: ${width};\n height: ${height};\n `;\n\n return `\n width: ${width / 16}rem;\n height: ${height / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${width / 13}rem;\n height: ${height / 13}rem;\n\n }`;\n }}\n ${displaySizes}\n\n & svg {\n ${({ svgColor, theme }) => {\n if (svgColor) return `fill: ${th.color(svgColor, svgColor)({ theme })};`;\n }}\n }\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,uBAGM,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGO,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGO,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGM,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,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;AAAA,IACG,CAAC,EAAE,OAAO,QAAQ,OAAO,KAAK,MAAM;AACpC,MAAI;AAAM,WAAO,QAAQ,IAAI;AAE7B,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,KAAK;AAChE,WAAO;AAAA,aACA;AAAA,cACC;AAAA;AAGV,SAAO;AAAA,aACE,QAAQ;AAAA,cACP,SAAS;AAAA;AAAA,yBAEE,MAAM,aAAa;AAAA,eAC7B,QAAQ;AAAA,gBACP,SAAS;AAAA;AAAA;AAGvB;AAAA;AAGK,MAAM,oBAAgB,yBAAO,QAAQ;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,2BAAY;AACpB,CAAC;AAAA,IACG,CAAC,EAAE,OAAO,QAAQ,MAAM,MAAM,MAAM;AACpC,MAAI;AAAM,WAAO,QAAQ,IAAI;AAC7B,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,KAAK;AAChE,WAAO;AAAA,aACA;AAAA,cACC;AAAA;AAGV,SAAO;AAAA,aACE,QAAQ;AAAA,cACP,SAAS;AAAA;AAAA,yBAEE,MAAM,aAAa;AAAA,eAC7B,QAAQ;AAAA,gBACP,SAAS;AAAA;AAAA;AAGvB;AAAA,IACE;AAAA;AAAA;AAAA,MAGE,CAAC,EAAE,UAAU,MAAM,MAAM;AACzB,MAAI;AAAU,WAAO,SAAS,oBAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AACtE;AAAA;AAAA;",
4
+ "sourcesContent": ["import { styled, css, th } 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: 4rem;\n height: 4rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 4.923rem;\n height: 4.923rem;\n }\n`;\n\nconst xlSizes = css`\n width: 3rem;\n height: 3rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 3.692rem;\n height: 3.692rem;\n }\n`;\n\nconst lSizes = css`\n width: 2rem;\n height: 2rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 2.462rem;\n height: 2.462rem;\n }\n`;\n\nconst mSizes = css`\n width: 1.5rem;\n height: 1.5rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 1.846rem;\n height: 1.846rem;\n }\n`;\n\nconst sSizes = css`\n width: 1rem;\n height: 1rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 1.231rem;\n height: 1.231rem;\n }\n`;\n\nconst xsSizes = css`\n width: 0.5rem;\n height: 0.5rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 0.615rem;\n height: 0.615rem;\n }\n`;\n\nconst xxsSizes = css`\n width: 0.25rem;\n height: 0.25rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 0.308rem;\n height: 0.308rem;\n }\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 ${({ width, height, theme, size }) => {\n if (size) return getSize(size);\n\n if (String(width).includes('rem') && String(height).includes('rem'))\n return `\n width: ${width};\n height: ${height};\n `;\n\n return `\n width: ${width / 16}rem;\n height: ${height / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${width / 13}rem;\n height: ${height / 13}rem;\n\n }`;\n }}\n`;\n\nexport const StyledWrapper = styled('span', {\n name: DSIconName,\n slot: DSIconSlots.ICON_WRAPPER,\n})<StyledWrapperPropsT>`\n ${({ width, height, size, theme }) => {\n if (size) return getSize(size);\n if (String(width).includes('rem') && String(height).includes('rem'))\n return `\n width: ${width};\n height: ${height};\n `;\n\n return `\n width: ${width / 16}rem;\n height: ${height / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${width / 13}rem;\n height: ${height / 13}rem;\n\n }`;\n }}\n ${displaySizes}\n\n & svg {\n ${({ svgColor, theme }) => {\n if (svgColor) return `fill: ${th.color(svgColor, svgColor)({ theme })};`;\n }}\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgC;AAEhC,qBAAwC;AASxC,MAAM,eAAe;AAAA;AAAA;AAAA;AAIrB,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGM,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGO,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGO,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGM,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,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;AAAA,IACG,CAAC,EAAE,OAAO,QAAQ,OAAO,KAAK,MAAM;AACpC,MAAI;AAAM,WAAO,QAAQ,IAAI;AAE7B,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,KAAK;AAChE,WAAO;AAAA,aACA;AAAA,cACC;AAAA;AAGV,SAAO;AAAA,aACE,QAAQ;AAAA,cACP,SAAS;AAAA;AAAA,yBAEE,MAAM,aAAa;AAAA,eAC7B,QAAQ;AAAA,gBACP,SAAS;AAAA;AAAA;AAGvB;AAAA;AAGK,MAAM,oBAAgB,yBAAO,QAAQ;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,2BAAY;AACpB,CAAC;AAAA,IACG,CAAC,EAAE,OAAO,QAAQ,MAAM,MAAM,MAAM;AACpC,MAAI;AAAM,WAAO,QAAQ,IAAI;AAC7B,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,KAAK;AAChE,WAAO;AAAA,aACA;AAAA,cACC;AAAA;AAGV,SAAO;AAAA,aACE,QAAQ;AAAA,cACP,SAAS;AAAA;AAAA,yBAEE,MAAM,aAAa;AAAA,eAC7B,QAAQ;AAAA,gBACP,SAAS;AAAA;AAAA;AAGvB;AAAA,IACE;AAAA;AAAA;AAAA,MAGE,CAAC,EAAE,UAAU,MAAM,MAAM;AACzB,MAAI;AAAU,WAAO,SAAS,oBAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AACtE;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -1,9 +1,5 @@
1
1
  import * as React from "react";
2
- import {
3
- styled,
4
- css,
5
- th
6
- } from "@elliemae/ds-system";
2
+ import { styled, css, th } from "@elliemae/ds-system";
7
3
  import { DSIconName, DSIconSlots } from "./theming";
8
4
  const displaySizes = css`
9
5
  display: inline-flex;
@@ -12,7 +8,7 @@ const displaySizes = css`
12
8
  const xxlSizes = css`
13
9
  width: 4rem;
14
10
  height: 4rem;
15
- @media (min-width: ${th.breakpoint.small}) {
11
+ @media (min-width: ${th.breakpoint("small")}) {
16
12
  width: 4.923rem;
17
13
  height: 4.923rem;
18
14
  }
@@ -20,7 +16,7 @@ const xxlSizes = css`
20
16
  const xlSizes = css`
21
17
  width: 3rem;
22
18
  height: 3rem;
23
- @media (min-width: ${th.breakpoint.small}) {
19
+ @media (min-width: ${th.breakpoint("small")}) {
24
20
  width: 3.692rem;
25
21
  height: 3.692rem;
26
22
  }
@@ -28,7 +24,7 @@ const xlSizes = css`
28
24
  const lSizes = css`
29
25
  width: 2rem;
30
26
  height: 2rem;
31
- @media (min-width: ${th.breakpoint.small}) {
27
+ @media (min-width: ${th.breakpoint("small")}) {
32
28
  width: 2.462rem;
33
29
  height: 2.462rem;
34
30
  }
@@ -36,7 +32,7 @@ const lSizes = css`
36
32
  const mSizes = css`
37
33
  width: 1.5rem;
38
34
  height: 1.5rem;
39
- @media (min-width: ${th.breakpoint.small}) {
35
+ @media (min-width: ${th.breakpoint("small")}) {
40
36
  width: 1.846rem;
41
37
  height: 1.846rem;
42
38
  }
@@ -44,7 +40,7 @@ const mSizes = css`
44
40
  const sSizes = css`
45
41
  width: 1rem;
46
42
  height: 1rem;
47
- @media (min-width: ${th.breakpoint.small}) {
43
+ @media (min-width: ${th.breakpoint("small")}) {
48
44
  width: 1.231rem;
49
45
  height: 1.231rem;
50
46
  }
@@ -52,7 +48,7 @@ const sSizes = css`
52
48
  const xsSizes = css`
53
49
  width: 0.5rem;
54
50
  height: 0.5rem;
55
- @media (min-width: ${th.breakpoint.small}) {
51
+ @media (min-width: ${th.breakpoint("small")}) {
56
52
  width: 0.615rem;
57
53
  height: 0.615rem;
58
54
  }
@@ -60,7 +56,7 @@ const xsSizes = css`
60
56
  const xxsSizes = css`
61
57
  width: 0.25rem;
62
58
  height: 0.25rem;
63
- @media (min-width: ${th.breakpoint.small}) {
59
+ @media (min-width: ${th.breakpoint("small")}) {
64
60
  width: 0.308rem;
65
61
  height: 0.308rem;
66
62
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styled.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n styled,\n css,\n background,\n borders,\n sizing,\n space,\n boxShadows,\n flexboxes,\n layout,\n th,\n} from '@elliemae/ds-system';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { DSIconName, DSIconSlots } from './theming';\n\ninterface StyledWrapperPropsT {\n size: SvgIconT.SizeType | undefined;\n svgColor: string | undefined;\n width: number | undefined;\n height: number | undefined;\n}\n\nconst displaySizes = css`\n display: inline-flex;\n vertical-align: middle;\n`;\nconst xxlSizes = css`\n width: 4rem;\n height: 4rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 4.923rem;\n height: 4.923rem;\n }\n`;\n\nconst xlSizes = css`\n width: 3rem;\n height: 3rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 3.692rem;\n height: 3.692rem;\n }\n`;\n\nconst lSizes = css`\n width: 2rem;\n height: 2rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 2.462rem;\n height: 2.462rem;\n }\n`;\n\nconst mSizes = css`\n width: 1.5rem;\n height: 1.5rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 1.846rem;\n height: 1.846rem;\n }\n`;\n\nconst sSizes = css`\n width: 1rem;\n height: 1rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 1.231rem;\n height: 1.231rem;\n }\n`;\n\nconst xsSizes = css`\n width: 0.5rem;\n height: 0.5rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 0.615rem;\n height: 0.615rem;\n }\n`;\n\nconst xxsSizes = css`\n width: 0.25rem;\n height: 0.25rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 0.308rem;\n height: 0.308rem;\n }\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 ${({ width, height, theme, size }) => {\n if (size) return getSize(size);\n\n if (String(width).includes('rem') && String(height).includes('rem'))\n return `\n width: ${width};\n height: ${height};\n `;\n\n return `\n width: ${width / 16}rem;\n height: ${height / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${width / 13}rem;\n height: ${height / 13}rem;\n\n }`;\n }}\n`;\n\nexport const StyledWrapper = styled('span', {\n name: DSIconName,\n slot: DSIconSlots.ICON_WRAPPER,\n})<StyledWrapperPropsT>`\n ${({ width, height, size, theme }) => {\n if (size) return getSize(size);\n if (String(width).includes('rem') && String(height).includes('rem'))\n return `\n width: ${width};\n height: ${height};\n `;\n\n return `\n width: ${width / 16}rem;\n height: ${height / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${width / 13}rem;\n height: ${height / 13}rem;\n\n }`;\n }}\n ${displaySizes}\n\n & svg {\n ${({ svgColor, theme }) => {\n if (svgColor) return `fill: ${th.color(svgColor, svgColor)({ theme })};`;\n }}\n }\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EAQA;AAAA,OACK;AAEP,SAAS,YAAY,mBAAmB;AASxC,MAAM,eAAe;AAAA;AAAA;AAAA;AAIrB,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGM,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGO,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGO,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGM,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,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;AAAA,IACG,CAAC,EAAE,OAAO,QAAQ,OAAO,KAAK,MAAM;AACpC,MAAI;AAAM,WAAO,QAAQ,IAAI;AAE7B,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,KAAK;AAChE,WAAO;AAAA,aACA;AAAA,cACC;AAAA;AAGV,SAAO;AAAA,aACE,QAAQ;AAAA,cACP,SAAS;AAAA;AAAA,yBAEE,MAAM,aAAa;AAAA,eAC7B,QAAQ;AAAA,gBACP,SAAS;AAAA;AAAA;AAGvB;AAAA;AAGK,MAAM,gBAAgB,OAAO,QAAQ;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,YAAY;AACpB,CAAC;AAAA,IACG,CAAC,EAAE,OAAO,QAAQ,MAAM,MAAM,MAAM;AACpC,MAAI;AAAM,WAAO,QAAQ,IAAI;AAC7B,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,KAAK;AAChE,WAAO;AAAA,aACA;AAAA,cACC;AAAA;AAGV,SAAO;AAAA,aACE,QAAQ;AAAA,cACP,SAAS;AAAA;AAAA,yBAEE,MAAM,aAAa;AAAA,eAC7B,QAAQ;AAAA,gBACP,SAAS;AAAA;AAAA;AAGvB;AAAA,IACE;AAAA;AAAA;AAAA,MAGE,CAAC,EAAE,UAAU,MAAM,MAAM;AACzB,MAAI;AAAU,WAAO,SAAS,GAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AACtE;AAAA;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, th } 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: 4rem;\n height: 4rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 4.923rem;\n height: 4.923rem;\n }\n`;\n\nconst xlSizes = css`\n width: 3rem;\n height: 3rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 3.692rem;\n height: 3.692rem;\n }\n`;\n\nconst lSizes = css`\n width: 2rem;\n height: 2rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 2.462rem;\n height: 2.462rem;\n }\n`;\n\nconst mSizes = css`\n width: 1.5rem;\n height: 1.5rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 1.846rem;\n height: 1.846rem;\n }\n`;\n\nconst sSizes = css`\n width: 1rem;\n height: 1rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 1.231rem;\n height: 1.231rem;\n }\n`;\n\nconst xsSizes = css`\n width: 0.5rem;\n height: 0.5rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 0.615rem;\n height: 0.615rem;\n }\n`;\n\nconst xxsSizes = css`\n width: 0.25rem;\n height: 0.25rem;\n @media (min-width: ${th.breakpoint('small')}) {\n width: 0.308rem;\n height: 0.308rem;\n }\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 ${({ width, height, theme, size }) => {\n if (size) return getSize(size);\n\n if (String(width).includes('rem') && String(height).includes('rem'))\n return `\n width: ${width};\n height: ${height};\n `;\n\n return `\n width: ${width / 16}rem;\n height: ${height / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${width / 13}rem;\n height: ${height / 13}rem;\n\n }`;\n }}\n`;\n\nexport const StyledWrapper = styled('span', {\n name: DSIconName,\n slot: DSIconSlots.ICON_WRAPPER,\n})<StyledWrapperPropsT>`\n ${({ width, height, size, theme }) => {\n if (size) return getSize(size);\n if (String(width).includes('rem') && String(height).includes('rem'))\n return `\n width: ${width};\n height: ${height};\n `;\n\n return `\n width: ${width / 16}rem;\n height: ${height / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${width / 13}rem;\n height: ${height / 13}rem;\n\n }`;\n }}\n ${displaySizes}\n\n & svg {\n ${({ svgColor, theme }) => {\n if (svgColor) return `fill: ${th.color(svgColor, svgColor)({ theme })};`;\n }}\n }\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,UAAU;AAEhC,SAAS,YAAY,mBAAmB;AASxC,MAAM,eAAe;AAAA;AAAA;AAAA;AAIrB,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGM,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGO,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGO,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGM,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5C,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;AAAA,IACG,CAAC,EAAE,OAAO,QAAQ,OAAO,KAAK,MAAM;AACpC,MAAI;AAAM,WAAO,QAAQ,IAAI;AAE7B,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,KAAK;AAChE,WAAO;AAAA,aACA;AAAA,cACC;AAAA;AAGV,SAAO;AAAA,aACE,QAAQ;AAAA,cACP,SAAS;AAAA;AAAA,yBAEE,MAAM,aAAa;AAAA,eAC7B,QAAQ;AAAA,gBACP,SAAS;AAAA;AAAA;AAGvB;AAAA;AAGK,MAAM,gBAAgB,OAAO,QAAQ;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,YAAY;AACpB,CAAC;AAAA,IACG,CAAC,EAAE,OAAO,QAAQ,MAAM,MAAM,MAAM;AACpC,MAAI;AAAM,WAAO,QAAQ,IAAI;AAC7B,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,KAAK;AAChE,WAAO;AAAA,aACA;AAAA,cACC;AAAA;AAGV,SAAO;AAAA,aACE,QAAQ;AAAA,cACP,SAAS;AAAA;AAAA,yBAEE,MAAM,aAAa;AAAA,eAC7B,QAAQ;AAAA,gBACP,SAAS;AAAA;AAAA;AAGvB;AAAA,IACE;AAAA;AAAA;AAAA,MAGE,CAAC,EAAE,UAAU,MAAM,MAAM;AACzB,MAAI;AAAU,WAAO,SAAS,GAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AACtE;AAAA;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-rc.5",
3
+ "version": "3.14.0-rc.7",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Icons",
6
6
  "files": [
@@ -1571,9 +1571,9 @@
1571
1571
  "indent": 4
1572
1572
  },
1573
1573
  "dependencies": {
1574
- "@elliemae/ds-classnames": "3.14.0-rc.5",
1575
- "@elliemae/ds-system": "3.14.0-rc.5",
1576
- "@elliemae/ds-utilities": "3.14.0-rc.5"
1574
+ "@elliemae/ds-classnames": "3.14.0-rc.7",
1575
+ "@elliemae/ds-system": "3.14.0-rc.7",
1576
+ "@elliemae/ds-utilities": "3.14.0-rc.7"
1577
1577
  },
1578
1578
  "devDependencies": {
1579
1579
  "styled-components": "~5.3.6"