@elliemae/ds-icons 3.21.2 → 3.22.0-next.1
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
|
@@ -43,6 +43,7 @@ __export(styled_exports, {
|
|
|
43
43
|
module.exports = __toCommonJS(styled_exports);
|
|
44
44
|
var React = __toESM(require("react"));
|
|
45
45
|
var import_ds_system = require("@elliemae/ds-system");
|
|
46
|
+
var import_ds_system2 = require("@elliemae/ds-system");
|
|
46
47
|
var import_theming = require("./theming.js");
|
|
47
48
|
const displaySizes = import_ds_system.css`
|
|
48
49
|
display: inline-flex;
|
|
@@ -184,5 +185,11 @@ const StyledWrapper = (0, import_ds_system.styled)("span", {
|
|
|
184
185
|
fill: ${import_ds_system.th.color(svgColor, svgColor)({ theme })} !important;
|
|
185
186
|
}`;
|
|
186
187
|
}}
|
|
188
|
+
|
|
189
|
+
${import_ds_system2.background}
|
|
190
|
+
${import_ds_system2.borders}
|
|
191
|
+
${import_ds_system2.sizing}
|
|
192
|
+
${import_ds_system2.space}
|
|
193
|
+
${import_ds_system2.boxShadows}
|
|
187
194
|
`;
|
|
188
195
|
//# sourceMappingURL=styled.js.map
|
|
@@ -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 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) / 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 ${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// 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;
|
|
6
|
-
"names": []
|
|
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) / 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 ${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 ${sizing}\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,IACA;AAAA;",
|
|
6
|
+
"names": ["import_ds_system"]
|
|
7
7
|
}
|
package/dist/esm/utils/styled.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled, css, th } from "@elliemae/ds-system";
|
|
3
|
+
import { background, borders, sizing, space, boxShadows } from "@elliemae/ds-system";
|
|
3
4
|
import { DSIconName, DSIconSlots } from "./theming.js";
|
|
4
5
|
const displaySizes = css`
|
|
5
6
|
display: inline-flex;
|
|
@@ -141,6 +142,12 @@ const StyledWrapper = styled("span", {
|
|
|
141
142
|
fill: ${th.color(svgColor, svgColor)({ theme })} !important;
|
|
142
143
|
}`;
|
|
143
144
|
}}
|
|
145
|
+
|
|
146
|
+
${background}
|
|
147
|
+
${borders}
|
|
148
|
+
${sizing}
|
|
149
|
+
${space}
|
|
150
|
+
${boxShadows}
|
|
144
151
|
`;
|
|
145
152
|
export {
|
|
146
153
|
StyledSvg,
|
|
@@ -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 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) / 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 ${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// 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;
|
|
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) / 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 ${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 ${sizing}\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,SAAS,QAAQ,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,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.22.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Icons",
|
|
6
6
|
"files": [
|
|
@@ -1572,9 +1572,9 @@
|
|
|
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.22.0-next.1",
|
|
1576
|
+
"@elliemae/ds-props-helpers": "3.22.0-next.1",
|
|
1577
|
+
"@elliemae/ds-system": "3.22.0-next.1"
|
|
1578
1578
|
},
|
|
1579
1579
|
"devDependencies": {
|
|
1580
1580
|
"styled-components": "~5.3.9"
|