@elliemae/ds-icons 3.29.2-rc.0 → 3.30.0-next.0
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.
package/dist/cjs/utils/styled.js
CHANGED
|
@@ -161,12 +161,12 @@ const StyledWrapper = (0, import_ds_system.styled)("span", {
|
|
|
161
161
|
height: ${height};
|
|
162
162
|
`;
|
|
163
163
|
return `
|
|
164
|
-
width: ${width /
|
|
165
|
-
height: ${height /
|
|
164
|
+
width: ${width / 13}rem;
|
|
165
|
+
height: ${height / 13}rem;
|
|
166
166
|
|
|
167
|
-
@media (
|
|
168
|
-
width: ${width /
|
|
169
|
-
height: ${height /
|
|
167
|
+
@media (max-width: ${theme.breakpoints?.small}) {
|
|
168
|
+
width: ${width / 16}rem;
|
|
169
|
+
height: ${height / 16}rem;
|
|
170
170
|
|
|
171
171
|
}`;
|
|
172
172
|
}}
|
|
@@ -188,7 +188,6 @@ const StyledWrapper = (0, import_ds_system.styled)("span", {
|
|
|
188
188
|
|
|
189
189
|
${import_ds_system2.background}
|
|
190
190
|
${import_ds_system2.borders}
|
|
191
|
-
${import_ds_system2.sizing}
|
|
192
191
|
${import_ds_system2.space}
|
|
193
192
|
${import_ds_system2.boxShadows}
|
|
194
193
|
`;
|
|
@@ -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, th, type Theme, type FlattenInterpolation } from '@elliemae/ds-system';\nimport { background, borders, sizing, space, boxShadows } from '@elliemae/ds-system';\n\nimport type {} from '@xstyled/system';\nimport type { SvgIconT } from './react-desc-prop-types.js';\nimport { DSIconName, DSIconSlots } from './theming.js';\n\ninterface StyledWrapperPropsT {\n size: SvgIconT.SizeType | undefined;\n svgColor?: string | undefined;\n width: string | number | undefined;\n height: string | number | undefined;\n}\n\nconst displaySizes = css`\n display: inline-flex;\n vertical-align: middle;\n`;\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const standarSizes = css`\n ${sSizes}\n`;\n\nexport const getSize = (\n size: SvgIconT.SizeType | undefined,\n): FlattenInterpolation<{\n theme: Theme;\n}> => {\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})<StyledWrapperPropsT>`\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 as string};\n height: ${height as string};\n `;\n\n return `\n width: ${(width as number) / 16}rem;\n height: ${(height as number) / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${(width as number) / 13}rem;\n height: ${(height as number) / 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 as string};\n height: ${height as string};\n `;\n\n return `\n width: ${(width as number) /
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuE;AACvE,IAAAA,oBAA+D;AAI/D,qBAAwC;AASxC,MAAM,eAAe;AAAA;AAAA;AAAA;AAId,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGD,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGA,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGC,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGC,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGC,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGA,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGD,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,eAAe;AAAA,IACxB;AAAA;AAGG,MAAM,UAAU,CACrB,SAGI;AACJ,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,aACG,QAAmB;AAAA,cAClB,SAAoB;AAAA;AAAA,yBAEV,MAAM,aAAa;AAAA,eAC5B,QAAmB;AAAA,gBAClB,SAAoB;AAAA;AAAA;AAGnC;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,aACG,QAAmB;AAAA,cAClB,SAAoB;AAAA;AAAA,yBAEV,MAAM,aAAa;AAAA,eAC5B,QAAmB;AAAA,gBAClB,SAAoB;AAAA;AAAA;AAGnC;AAAA,IACE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,CAAC,EAAE,UAAU,MAAM,MAAM;AACzB,MAAI;AACF,WAAO;AAAA;AAAA;AAAA,oBAGO,oBAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AAAA;AAAA,gBAE1C,oBAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AAAA;AAEpD;AAAA;AAAA,IAEE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA
|
|
4
|
+
"sourcesContent": ["import { styled, css, th, type Theme, type FlattenInterpolation } from '@elliemae/ds-system';\nimport { background, borders, sizing, space, boxShadows } from '@elliemae/ds-system';\n\nimport type {} from '@xstyled/system';\nimport type { SvgIconT } from './react-desc-prop-types.js';\nimport { DSIconName, DSIconSlots } from './theming.js';\n\ninterface StyledWrapperPropsT {\n size: SvgIconT.SizeType | undefined;\n svgColor?: string | undefined;\n width: string | number | undefined;\n height: string | number | undefined;\n}\n\nconst displaySizes = css`\n display: inline-flex;\n vertical-align: middle;\n`;\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const standarSizes = css`\n ${sSizes}\n`;\n\nexport const getSize = (\n size: SvgIconT.SizeType | undefined,\n): FlattenInterpolation<{\n theme: Theme;\n}> => {\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})<StyledWrapperPropsT>`\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 as string};\n height: ${height as string};\n `;\n\n return `\n width: ${(width as number) / 16}rem;\n height: ${(height as number) / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${(width as number) / 13}rem;\n height: ${(height as number) / 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 as string};\n height: ${height as string};\n `;\n\n return `\n width: ${(width as number) / 13}rem;\n height: ${(height as number) / 13}rem;\n\n @media (max-width: ${theme.breakpoints?.small}) {\n width: ${(width as number) / 16}rem;\n height: ${(height as number) / 16}rem;\n\n }`;\n }}\n ${displaySizes}\n \n & svg path[fill=\"none\"] {\n stroke: #000;\n }\n ${({ svgColor, theme }) => {\n if (svgColor)\n return `\n & svg {\n path[fill=\"none\"] {\n stroke: ${th.color(svgColor, svgColor)({ theme })} !important;\n } \n fill: ${th.color(svgColor, svgColor)({ theme })} !important;\n }`;\n }}\n\n ${background}\n ${borders}\n ${space}\n ${boxShadows}\n`;\n// \u21E7\u21E7\u21E7\u21E7\u21E7\u21E7\n// we cannot use xStyledProps because has a conflict in how we use the color prop\n\n// this has to be done to cover the cases where the svg has a path with fill none and\n// the color is given by the stroke\n// & svg path[fill=\"none\"] {\n// stroke: #000;\n// }\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuE;AACvE,IAAAA,oBAA+D;AAI/D,qBAAwC;AASxC,MAAM,eAAe;AAAA;AAAA;AAAA;AAId,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGD,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGA,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGC,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGC,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGC,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGA,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGD,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,eAAe;AAAA,IACxB;AAAA;AAGG,MAAM,UAAU,CACrB,SAGI;AACJ,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,aACG,QAAmB;AAAA,cAClB,SAAoB;AAAA;AAAA,yBAEV,MAAM,aAAa;AAAA,eAC5B,QAAmB;AAAA,gBAClB,SAAoB;AAAA;AAAA;AAGnC;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,aACG,QAAmB;AAAA,cAClB,SAAoB;AAAA;AAAA,yBAEV,MAAM,aAAa;AAAA,eAC5B,QAAmB;AAAA,gBAClB,SAAoB;AAAA;AAAA;AAGnC;AAAA,IACE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,CAAC,EAAE,UAAU,MAAM,MAAM;AACzB,MAAI;AACF,WAAO;AAAA;AAAA;AAAA,oBAGO,oBAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AAAA;AAAA,gBAE1C,oBAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AAAA;AAEpD;AAAA;AAAA,IAEE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": ["import_ds_system"]
|
|
7
7
|
}
|
package/dist/esm/utils/styled.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled, css, th } from "@elliemae/ds-system";
|
|
3
|
-
import { background, borders,
|
|
3
|
+
import { background, borders, space, boxShadows } from "@elliemae/ds-system";
|
|
4
4
|
import { DSIconName, DSIconSlots } from "./theming.js";
|
|
5
5
|
const displaySizes = css`
|
|
6
6
|
display: inline-flex;
|
|
@@ -118,12 +118,12 @@ const StyledWrapper = styled("span", {
|
|
|
118
118
|
height: ${height};
|
|
119
119
|
`;
|
|
120
120
|
return `
|
|
121
|
-
width: ${width /
|
|
122
|
-
height: ${height /
|
|
121
|
+
width: ${width / 13}rem;
|
|
122
|
+
height: ${height / 13}rem;
|
|
123
123
|
|
|
124
|
-
@media (
|
|
125
|
-
width: ${width /
|
|
126
|
-
height: ${height /
|
|
124
|
+
@media (max-width: ${theme.breakpoints?.small}) {
|
|
125
|
+
width: ${width / 16}rem;
|
|
126
|
+
height: ${height / 16}rem;
|
|
127
127
|
|
|
128
128
|
}`;
|
|
129
129
|
}}
|
|
@@ -145,7 +145,6 @@ const StyledWrapper = styled("span", {
|
|
|
145
145
|
|
|
146
146
|
${background}
|
|
147
147
|
${borders}
|
|
148
|
-
${sizing}
|
|
149
148
|
${space}
|
|
150
149
|
${boxShadows}
|
|
151
150
|
`;
|
|
@@ -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, th, type Theme, type FlattenInterpolation } from '@elliemae/ds-system';\nimport { background, borders, sizing, space, boxShadows } from '@elliemae/ds-system';\n\nimport type {} from '@xstyled/system';\nimport type { SvgIconT } from './react-desc-prop-types.js';\nimport { DSIconName, DSIconSlots } from './theming.js';\n\ninterface StyledWrapperPropsT {\n size: SvgIconT.SizeType | undefined;\n svgColor?: string | undefined;\n width: string | number | undefined;\n height: string | number | undefined;\n}\n\nconst displaySizes = css`\n display: inline-flex;\n vertical-align: middle;\n`;\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const standarSizes = css`\n ${sSizes}\n`;\n\nexport const getSize = (\n size: SvgIconT.SizeType | undefined,\n): FlattenInterpolation<{\n theme: Theme;\n}> => {\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})<StyledWrapperPropsT>`\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 as string};\n height: ${height as string};\n `;\n\n return `\n width: ${(width as number) / 16}rem;\n height: ${(height as number) / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${(width as number) / 13}rem;\n height: ${(height as number) / 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 as string};\n height: ${height as string};\n `;\n\n return `\n width: ${(width as number) /
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,UAAiD;AACvE,SAAS,YAAY,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, th, type Theme, type FlattenInterpolation } from '@elliemae/ds-system';\nimport { background, borders, sizing, space, boxShadows } from '@elliemae/ds-system';\n\nimport type {} from '@xstyled/system';\nimport type { SvgIconT } from './react-desc-prop-types.js';\nimport { DSIconName, DSIconSlots } from './theming.js';\n\ninterface StyledWrapperPropsT {\n size: SvgIconT.SizeType | undefined;\n svgColor?: string | undefined;\n width: string | number | undefined;\n height: string | number | undefined;\n}\n\nconst displaySizes = css`\n display: inline-flex;\n vertical-align: middle;\n`;\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const 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\nexport const standarSizes = css`\n ${sSizes}\n`;\n\nexport const getSize = (\n size: SvgIconT.SizeType | undefined,\n): FlattenInterpolation<{\n theme: Theme;\n}> => {\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})<StyledWrapperPropsT>`\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 as string};\n height: ${height as string};\n `;\n\n return `\n width: ${(width as number) / 16}rem;\n height: ${(height as number) / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${(width as number) / 13}rem;\n height: ${(height as number) / 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 as string};\n height: ${height as string};\n `;\n\n return `\n width: ${(width as number) / 13}rem;\n height: ${(height as number) / 13}rem;\n\n @media (max-width: ${theme.breakpoints?.small}) {\n width: ${(width as number) / 16}rem;\n height: ${(height as number) / 16}rem;\n\n }`;\n }}\n ${displaySizes}\n \n & svg path[fill=\"none\"] {\n stroke: #000;\n }\n ${({ svgColor, theme }) => {\n if (svgColor)\n return `\n & svg {\n path[fill=\"none\"] {\n stroke: ${th.color(svgColor, svgColor)({ theme })} !important;\n } \n fill: ${th.color(svgColor, svgColor)({ theme })} !important;\n }`;\n }}\n\n ${background}\n ${borders}\n ${space}\n ${boxShadows}\n`;\n// \u21E7\u21E7\u21E7\u21E7\u21E7\u21E7\n// we cannot use xStyledProps because has a conflict in how we use the color prop\n\n// this has to be done to cover the cases where the svg has a path with fill none and\n// the color is given by the stroke\n// & svg path[fill=\"none\"] {\n// stroke: #000;\n// }\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,UAAiD;AACvE,SAAS,YAAY,SAAiB,OAAO,kBAAkB;AAI/D,SAAS,YAAY,mBAAmB;AASxC,MAAM,eAAe;AAAA;AAAA;AAAA;AAId,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGD,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGA,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGC,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGC,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGC,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGA,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGD,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,eAAe;AAAA,IACxB;AAAA;AAGG,MAAM,UAAU,CACrB,SAGI;AACJ,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,aACG,QAAmB;AAAA,cAClB,SAAoB;AAAA;AAAA,yBAEV,MAAM,aAAa;AAAA,eAC5B,QAAmB;AAAA,gBAClB,SAAoB;AAAA;AAAA;AAGnC;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,aACG,QAAmB;AAAA,cAClB,SAAoB;AAAA;AAAA,yBAEV,MAAM,aAAa;AAAA,eAC5B,QAAmB;AAAA,gBAClB,SAAoB;AAAA;AAAA;AAGnC;AAAA,IACE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,CAAC,EAAE,UAAU,MAAM,MAAM;AACzB,MAAI;AACF,WAAO;AAAA;AAAA;AAAA,oBAGO,GAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AAAA;AAAA,gBAE1C,GAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AAAA;AAEpD;AAAA;AAAA,IAEE;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.
|
|
3
|
+
"version": "3.30.0-next.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Icons",
|
|
6
6
|
"files": [
|
|
@@ -1572,14 +1572,14 @@
|
|
|
1572
1572
|
},
|
|
1573
1573
|
"dependencies": {
|
|
1574
1574
|
"@xstyled/system": "~3.7.3",
|
|
1575
|
-
"@elliemae/ds-classnames": "3.
|
|
1576
|
-
"@elliemae/ds-props-helpers": "3.
|
|
1577
|
-
"@elliemae/ds-system": "3.
|
|
1575
|
+
"@elliemae/ds-classnames": "3.30.0-next.0",
|
|
1576
|
+
"@elliemae/ds-props-helpers": "3.30.0-next.0",
|
|
1577
|
+
"@elliemae/ds-system": "3.30.0-next.0"
|
|
1578
1578
|
},
|
|
1579
1579
|
"devDependencies": {
|
|
1580
1580
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
1581
1581
|
"styled-components": "~5.3.9",
|
|
1582
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
1582
|
+
"@elliemae/ds-monorepo-devops": "3.30.0-next.0"
|
|
1583
1583
|
},
|
|
1584
1584
|
"peerDependencies": {
|
|
1585
1585
|
"lodash": "^4.17.21",
|