@elliemae/ds-chip 3.60.0-next.14 → 3.60.0-next.16
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/styles.js +3 -4
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/styles.js +3 -4
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/config/useConfig.d.ts +29 -29
- package/package.json +8 -9
package/dist/cjs/styles.js
CHANGED
|
@@ -195,11 +195,10 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_constan
|
|
|
195
195
|
&:hover,
|
|
196
196
|
&:focus {
|
|
197
197
|
z-index: 10;
|
|
198
|
-
${
|
|
199
|
-
|
|
198
|
+
${StyledSpanWithEllipsis} {
|
|
199
|
+
${({ wrapText }) => !wrapText && import_ds_system.css`
|
|
200
200
|
${wrapTextStyles}
|
|
201
|
-
}
|
|
202
|
-
`}
|
|
201
|
+
`}
|
|
203
202
|
}
|
|
204
203
|
}
|
|
205
204
|
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n basicSizes,\n shapeSizes,\n CHIP_SHAPES,\n CHIP_SIZES,\n roundShapeLarge,\n roundShapeSmall,\n DSChipName,\n CHIP_SLOTS,\n roundShapeLargeMobile,\n roundShapeSmallMobile,\n} from './constants/index.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n wrapText?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nconst wrapTextStyles = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n`;\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: CHIP_SLOTS.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding-top: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')};\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled(DSTypography, {\n name: DSChipName,\n slot: CHIP_SLOTS.ELLIPSIS,\n})<{ wrapText?: boolean }>`\n ${({ wrapText }) => (wrapText ? wrapTextStyles : ellipsisStyles)};\n max-width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROOT,\n})<StyledChipPropsT>`\n display: flex;\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n max-width: ${({ buttonSize }) => basicSizes[buttonSize].maxWidth};\n ${({ wrapText, buttonSize, buttonShape }) =>\n wrapText ? `height: auto;` : ` height: ${getChipSize(buttonShape)[buttonSize].height};`}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n background-color: ${({ theme }) => theme.colors.brand[600]};\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n }\n`;\n\nconst styledChipSelectedCss = css`\n // TODO: wrap css processor to process new HOC wrapping styled components\n ${StyledRoundShape.toString()} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n\n .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n\n &:before {\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nconst disabledStyles = css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[400]};\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: ${({ theme }) => theme.colors.neutral['050']};\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: CHIP_SLOTS.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape' | 'buttonSize' | 'wrapText'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n ${({ buttonShape, buttonSize }) => {\n if (buttonShape === CHIP_SHAPES.ROUND && buttonSize === CHIP_SIZES.L) {\n return css`\n padding: 6px;\n `;\n }\n return css`\n padding: 10px 6px;\n `;\n }}\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n ${({ disabled }) => disabled && disabledRoundShape}\n }\n &:before {\n content: '';\n position: absolute;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n pointer-events: none;\n }\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n ${({ wrapText }) =>\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAChD,2BAA6B;AAC7B,uBAWO;AAeP,MAAM,cAAc,CAAC,UAAwB,UAAU,6BAAY,QAAQ,8BAAa;AAExF,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAMhB,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,6BAAY,MAAM,4BAAW,MAAM,CAAC;AAAA,eAC1E,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBACvC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA,iBAGzC,CAAC,EAAE,KAAK,MAAO,SAAS,4BAAW,IAAI,QAAQ,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/D,MAAM,6BAAyB,yBAAO,mCAAc;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA,IACG,CAAC,EAAE,SAAS,MAAO,WAAW,iBAAiB,cAAe;AAAA;AAAA,iBAEjD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAGnD,MAAM,oBAAgB,yBAAO,OAAO;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA;AAAA,WAEU,CAAC,EAAE,YAAY,YAAY,MAAM,YAAY,WAAW,EAAE,UAAU,EAAE,KAAK;AAAA,IAClF,mCAAkB;AAAA,gBACN,CAAC,EAAE,WAAW,MAAM,4BAAW,UAAU,EAAE,QAAQ;AAAA,IAC/D,CAAC,EAAE,UAAU,YAAY,YAAY,MACrC,WAAW,kBAAkB,YAAY,YAAY,WAAW,EAAE,UAAU,EAAE,MAAM,GAAG;AAAA;AAG3F,MAAM,qBAAqB;AAAA,sBACL,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,YAGlD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI7C,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA,sBACqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,WACjD,CAAC,EAAE,KAAK,MAAO,SAAS,4BAAW,IAAI,mCAAkB,gCAAgB;AAAA,YACxE,CAAC,EAAE,KAAK,MAAO,SAAS,4BAAW,IAAI,mCAAkB,gCAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,uBAK9D,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,aAChD,CAAC,EAAE,KAAK,MAAO,SAAS,4BAAW,IAAI,yCAAwB,sCAAsB;AAAA,cACpF,CAAC,EAAE,KAAK,MAAO,SAAS,4BAAW,IAAI,yCAAwB,sCAAsB;AAAA;AAAA;AAInG,MAAM,wBAAwB;AAAA;AAAA,IAE1B,iBAAiB,SAAS,CAAC;AAAA,wBACP,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,WAEnD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,sBAC3B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,YAGhD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,wBAI1B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKhE,MAAM,iBAAiB;AAAA,WACZ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,YAGvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAI9C,gBAAgB;AAAA,0BACI,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,wBAE1C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3D,MAAM,iBAAa,yBAAO,UAAU,EAAE,MAAM,6BAAY,MAAM,4BAAW,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAYlE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,WACrD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAI7C,CAAC,EAAE,aAAa,WAAW,MAAM;AACjC,MAAI,gBAAgB,6BAAY,SAAS,eAAe,4BAAW,GAAG;AACpE,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AAAA;AAAA;AAGT,CAAC;AAAA,IACC,gBAAgB;AAAA;AAAA,cAEN,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,MAElD,CAAC,EAAE,SAAS,MAAM,YAAY,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAe1C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,aACrC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM/C,CAAC,EAAE,SAAS,MACZ,CAAC,YACD;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n basicSizes,\n shapeSizes,\n CHIP_SHAPES,\n CHIP_SIZES,\n roundShapeLarge,\n roundShapeSmall,\n DSChipName,\n CHIP_SLOTS,\n roundShapeLargeMobile,\n roundShapeSmallMobile,\n} from './constants/index.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n wrapText?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nconst wrapTextStyles = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n`;\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: CHIP_SLOTS.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding-top: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')};\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled(DSTypography, {\n name: DSChipName,\n slot: CHIP_SLOTS.ELLIPSIS,\n})<{ wrapText?: boolean }>`\n ${({ wrapText }) => (wrapText ? wrapTextStyles : ellipsisStyles)};\n max-width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROOT,\n})<StyledChipPropsT>`\n display: flex;\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n max-width: ${({ buttonSize }) => basicSizes[buttonSize].maxWidth};\n ${({ wrapText, buttonSize, buttonShape }) =>\n wrapText ? `height: auto;` : ` height: ${getChipSize(buttonShape)[buttonSize].height};`}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n background-color: ${({ theme }) => theme.colors.brand[600]};\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n }\n`;\n\nconst styledChipSelectedCss = css`\n // TODO: wrap css processor to process new HOC wrapping styled components\n ${StyledRoundShape.toString()} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n\n .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n\n &:before {\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nconst disabledStyles = css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[400]};\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: ${({ theme }) => theme.colors.neutral['050']};\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: CHIP_SLOTS.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape' | 'buttonSize' | 'wrapText'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n ${({ buttonShape, buttonSize }) => {\n if (buttonShape === CHIP_SHAPES.ROUND && buttonSize === CHIP_SIZES.L) {\n return css`\n padding: 6px;\n `;\n }\n return css`\n padding: 10px 6px;\n `;\n }}\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n ${({ disabled }) => disabled && disabledRoundShape}\n }\n &:before {\n content: '';\n position: absolute;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n pointer-events: none;\n }\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n ${StyledSpanWithEllipsis} {\n ${({ wrapText }) =>\n !wrapText &&\n css`\n ${wrapTextStyles}\n `}\n }\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:focus {\n &:before {\n ${({ buttonShape }) =>\n buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `}\n }\n }\n\n &:disabled {\n ${disabledStyles}\n }\n\n &[aria-disabled='true'] {\n ${disabledStyles}\n ${StyledRoundShape} {\n ${disabledRoundShape}\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.neutral[400]};\n }\n }\n }\n\n ${({ selected, buttonShape }) =>\n !selected\n ? ''\n : css`\n ${styledChipSelectedCss}\n &:focus {\n &:before {\n ${buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `}\n }\n }\n `}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -169,11 +169,10 @@ const StyledChip = styled("button", { name: DSChipName, slot: CHIP_SLOTS.BUTTON
|
|
|
169
169
|
&:hover,
|
|
170
170
|
&:focus {
|
|
171
171
|
z-index: 10;
|
|
172
|
-
${
|
|
173
|
-
|
|
172
|
+
${StyledSpanWithEllipsis} {
|
|
173
|
+
${({ wrapText }) => !wrapText && css`
|
|
174
174
|
${wrapTextStyles}
|
|
175
|
-
}
|
|
176
|
-
`}
|
|
175
|
+
`}
|
|
177
176
|
}
|
|
178
177
|
}
|
|
179
178
|
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n basicSizes,\n shapeSizes,\n CHIP_SHAPES,\n CHIP_SIZES,\n roundShapeLarge,\n roundShapeSmall,\n DSChipName,\n CHIP_SLOTS,\n roundShapeLargeMobile,\n roundShapeSmallMobile,\n} from './constants/index.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n wrapText?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nconst wrapTextStyles = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n`;\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: CHIP_SLOTS.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding-top: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')};\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled(DSTypography, {\n name: DSChipName,\n slot: CHIP_SLOTS.ELLIPSIS,\n})<{ wrapText?: boolean }>`\n ${({ wrapText }) => (wrapText ? wrapTextStyles : ellipsisStyles)};\n max-width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROOT,\n})<StyledChipPropsT>`\n display: flex;\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n max-width: ${({ buttonSize }) => basicSizes[buttonSize].maxWidth};\n ${({ wrapText, buttonSize, buttonShape }) =>\n wrapText ? `height: auto;` : ` height: ${getChipSize(buttonShape)[buttonSize].height};`}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n background-color: ${({ theme }) => theme.colors.brand[600]};\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n }\n`;\n\nconst styledChipSelectedCss = css`\n // TODO: wrap css processor to process new HOC wrapping styled components\n ${StyledRoundShape.toString()} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n\n .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n\n &:before {\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nconst disabledStyles = css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[400]};\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: ${({ theme }) => theme.colors.neutral['050']};\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: CHIP_SLOTS.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape' | 'buttonSize' | 'wrapText'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n ${({ buttonShape, buttonSize }) => {\n if (buttonShape === CHIP_SHAPES.ROUND && buttonSize === CHIP_SIZES.L) {\n return css`\n padding: 6px;\n `;\n }\n return css`\n padding: 10px 6px;\n `;\n }}\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n ${({ disabled }) => disabled && disabledRoundShape}\n }\n &:before {\n content: '';\n position: absolute;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n pointer-events: none;\n }\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n ${({ wrapText }) =>\n
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n basicSizes,\n shapeSizes,\n CHIP_SHAPES,\n CHIP_SIZES,\n roundShapeLarge,\n roundShapeSmall,\n DSChipName,\n CHIP_SLOTS,\n roundShapeLargeMobile,\n roundShapeSmallMobile,\n} from './constants/index.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n wrapText?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nconst wrapTextStyles = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n`;\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: CHIP_SLOTS.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding-top: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')};\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled(DSTypography, {\n name: DSChipName,\n slot: CHIP_SLOTS.ELLIPSIS,\n})<{ wrapText?: boolean }>`\n ${({ wrapText }) => (wrapText ? wrapTextStyles : ellipsisStyles)};\n max-width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROOT,\n})<StyledChipPropsT>`\n display: flex;\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n max-width: ${({ buttonSize }) => basicSizes[buttonSize].maxWidth};\n ${({ wrapText, buttonSize, buttonShape }) =>\n wrapText ? `height: auto;` : ` height: ${getChipSize(buttonShape)[buttonSize].height};`}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n background-color: ${({ theme }) => theme.colors.brand[600]};\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n }\n`;\n\nconst styledChipSelectedCss = css`\n // TODO: wrap css processor to process new HOC wrapping styled components\n ${StyledRoundShape.toString()} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n\n .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n\n &:before {\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nconst disabledStyles = css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[400]};\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: ${({ theme }) => theme.colors.neutral['050']};\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: CHIP_SLOTS.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape' | 'buttonSize' | 'wrapText'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n ${({ buttonShape, buttonSize }) => {\n if (buttonShape === CHIP_SHAPES.ROUND && buttonSize === CHIP_SIZES.L) {\n return css`\n padding: 6px;\n `;\n }\n return css`\n padding: 10px 6px;\n `;\n }}\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n ${({ disabled }) => disabled && disabledRoundShape}\n }\n &:before {\n content: '';\n position: absolute;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n pointer-events: none;\n }\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n ${StyledSpanWithEllipsis} {\n ${({ wrapText }) =>\n !wrapText &&\n css`\n ${wrapTextStyles}\n `}\n }\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:focus {\n &:before {\n ${({ buttonShape }) =>\n buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `}\n }\n }\n\n &:disabled {\n ${disabledStyles}\n }\n\n &[aria-disabled='true'] {\n ${disabledStyles}\n ${StyledRoundShape} {\n ${disabledRoundShape}\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.neutral[400]};\n }\n }\n }\n\n ${({ selected, buttonShape }) =>\n !selected\n ? ''\n : css`\n ${styledChipSelectedCss}\n &:focus {\n &:before {\n ${buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `}\n }\n }\n `}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAeP,MAAM,cAAc,CAAC,UAAwB,UAAU,YAAY,QAAQ,aAAa;AAExF,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAMhB,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,YAAY,MAAM,WAAW,MAAM,CAAC;AAAA,eAC1E,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBACvC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA,iBAGzC,CAAC,EAAE,KAAK,MAAO,SAAS,WAAW,IAAI,QAAQ,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/D,MAAM,yBAAyB,OAAO,cAAc;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA,IACG,CAAC,EAAE,SAAS,MAAO,WAAW,iBAAiB,cAAe;AAAA;AAAA,iBAEjD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAGnD,MAAM,gBAAgB,OAAO,OAAO;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA;AAAA,WAEU,CAAC,EAAE,YAAY,YAAY,MAAM,YAAY,WAAW,EAAE,UAAU,EAAE,KAAK;AAAA,IAClF,kBAAkB;AAAA,gBACN,CAAC,EAAE,WAAW,MAAM,WAAW,UAAU,EAAE,QAAQ;AAAA,IAC/D,CAAC,EAAE,UAAU,YAAY,YAAY,MACrC,WAAW,kBAAkB,YAAY,YAAY,WAAW,EAAE,UAAU,EAAE,MAAM,GAAG;AAAA;AAG3F,MAAM,qBAAqB;AAAA,sBACL,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,YAGlD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI7C,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA,sBACqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,WACjD,CAAC,EAAE,KAAK,MAAO,SAAS,WAAW,IAAI,kBAAkB,eAAgB;AAAA,YACxE,CAAC,EAAE,KAAK,MAAO,SAAS,WAAW,IAAI,kBAAkB,eAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,uBAK9D,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,aAChD,CAAC,EAAE,KAAK,MAAO,SAAS,WAAW,IAAI,wBAAwB,qBAAsB;AAAA,cACpF,CAAC,EAAE,KAAK,MAAO,SAAS,WAAW,IAAI,wBAAwB,qBAAsB;AAAA;AAAA;AAInG,MAAM,wBAAwB;AAAA;AAAA,IAE1B,iBAAiB,SAAS,CAAC;AAAA,wBACP,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,WAEnD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,sBAC3B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,YAGhD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,wBAI1B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKhE,MAAM,iBAAiB;AAAA,WACZ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,YAGvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAI9C,gBAAgB;AAAA,0BACI,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,wBAE1C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3D,MAAM,aAAa,OAAO,UAAU,EAAE,MAAM,YAAY,MAAM,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAYlE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,WACrD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAI7C,CAAC,EAAE,aAAa,WAAW,MAAM;AACjC,MAAI,gBAAgB,YAAY,SAAS,eAAe,WAAW,GAAG;AACpE,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AAAA;AAAA;AAGT,CAAC;AAAA,IACC,gBAAgB;AAAA;AAAA,cAEN,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,MAElD,CAAC,EAAE,SAAS,MAAM,YAAY,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAe1C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,aACrC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM/C,sBAAsB;AAAA,QACpB,CAAC,EAAE,SAAS,MACZ,CAAC,YACD;AAAA,YACI,cAAc;AAAA,SACjB;AAAA;AAAA;AAAA;AAAA;AAAA,MAKH,gBAAgB;AAAA,0BACI,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,aAEnD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,wBAC3B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,cAEhD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAM5C,CAAC,EAAE,YAAY,MACf,gBAAgB,YAAY,QACxB;AAAA,kCACsB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,gBAE5D;AAAA,kCACsB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,aAC3D;AAAA;AAAA;AAAA;AAAA;AAAA,MAKP,cAAc;AAAA;AAAA;AAAA;AAAA,MAId,cAAc;AAAA,MACd,gBAAgB;AAAA,QACd,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKhE,CAAC,EAAE,UAAU,YAAY,MACzB,CAAC,WACG,KACA;AAAA,YACI,qBAAqB;AAAA;AAAA;AAAA,gBAGjB,gBAAgB,YAAY,QAC1B;AAAA,wCACsB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,sBAE5D;AAAA,wCACsB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,mBAC3D;AAAA;AAAA;AAAA,SAGV;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -744,30 +744,30 @@ export declare const useConfig: (props: DSChipT.Props) => {
|
|
|
744
744
|
width?: number | string | undefined | undefined;
|
|
745
745
|
wmode?: string | undefined | undefined;
|
|
746
746
|
wrap?: string | undefined | undefined;
|
|
747
|
-
margin?: ((
|
|
748
|
-
m?: ((
|
|
749
|
-
marginTop?: ((
|
|
750
|
-
mt?: ((
|
|
751
|
-
marginRight?: ((
|
|
752
|
-
mr?: ((
|
|
753
|
-
marginBottom?: ((
|
|
754
|
-
mb?: ((
|
|
755
|
-
marginLeft?: ((
|
|
756
|
-
ml?: ((
|
|
757
|
-
mx?: (import("@xstyled/styled-components").SystemProp<
|
|
758
|
-
my?: (import("@xstyled/styled-components").SystemProp<
|
|
759
|
-
padding?: ((
|
|
760
|
-
p?: ((
|
|
761
|
-
paddingTop?: ((
|
|
762
|
-
pt?: ((
|
|
763
|
-
paddingRight?: ((
|
|
764
|
-
pr?: ((
|
|
765
|
-
paddingBottom?: ((
|
|
766
|
-
pb?: ((
|
|
767
|
-
paddingLeft?: ((
|
|
768
|
-
pl?: ((
|
|
769
|
-
px?: (import("@xstyled/styled-components").SystemProp<
|
|
770
|
-
py?: (import("@xstyled/styled-components").SystemProp<
|
|
747
|
+
margin?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
748
|
+
m?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
749
|
+
marginTop?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
750
|
+
mt?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
751
|
+
marginRight?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
752
|
+
mr?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
753
|
+
marginBottom?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
754
|
+
mb?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
755
|
+
marginLeft?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
756
|
+
ml?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
757
|
+
mx?: (import("@xstyled/styled-components").SystemProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/styled-components").Theme> & (string | {} | 0 | (string & {}) | (number & {}) | import("@xstyled/styled-components").ThemeProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/styled-components").Theme>)) | undefined;
|
|
758
|
+
my?: (import("@xstyled/styled-components").SystemProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/styled-components").Theme> & (string | {} | 0 | (string & {}) | (number & {}) | import("@xstyled/styled-components").ThemeProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/styled-components").Theme>)) | undefined;
|
|
759
|
+
padding?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
760
|
+
p?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
761
|
+
paddingTop?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
762
|
+
pt?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
763
|
+
paddingRight?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
764
|
+
pr?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
765
|
+
paddingBottom?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
766
|
+
pb?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
767
|
+
paddingLeft?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
768
|
+
pl?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>) & ({} | 0 | "s" | "l" | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/styled-components").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/styled-components").Theme>)) | undefined;
|
|
769
|
+
px?: (import("@xstyled/styled-components").SystemProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/styled-components").Theme> & (string | {} | 0 | (string & {}) | (number & {}) | import("@xstyled/styled-components").ThemeProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/styled-components").Theme>)) | undefined;
|
|
770
|
+
py?: (import("@xstyled/styled-components").SystemProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/styled-components").Theme> & (string | {} | 0 | (string & {}) | (number & {}) | import("@xstyled/styled-components").ThemeProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/styled-components").Theme>)) | undefined;
|
|
771
771
|
spaceX?: import("@xstyled/styled-components").SystemProp<import("@xstyled/styled-components").Space<import("@xstyled/styled-components").Theme>, import("@xstyled/styled-components").Theme> | undefined;
|
|
772
772
|
spaceY?: import("@xstyled/styled-components").SystemProp<import("@xstyled/styled-components").Space<import("@xstyled/styled-components").Theme>, import("@xstyled/styled-components").Theme> | undefined;
|
|
773
773
|
spaceXReverse?: import("@xstyled/styled-components").SystemProp<true, import("@xstyled/styled-components").Theme> | undefined;
|
|
@@ -791,10 +791,10 @@ export declare const useConfig: (props: DSChipT.Props) => {
|
|
|
791
791
|
overflowY?: import("@xstyled/styled-components").SystemProp<import("csstype").Property.OverflowY, import("@xstyled/styled-components").Theme> | undefined;
|
|
792
792
|
position?: import("@xstyled/styled-components").SystemProp<import("csstype").Property.Position, import("@xstyled/styled-components").Theme> | undefined;
|
|
793
793
|
zIndex?: import("@xstyled/styled-components").SystemProp<string | number | true | symbol | {} | (string & {}) | (number & {}), import("@xstyled/styled-components").Theme> | undefined;
|
|
794
|
-
top?: import("@xstyled/styled-components").SystemProp<string | number | true | symbol | {} | (string & {}), import("@xstyled/styled-components").Theme> | undefined;
|
|
795
|
-
right?: import("@xstyled/styled-components").SystemProp<string | number | true | symbol | {} | (string & {}), import("@xstyled/styled-components").Theme> | undefined;
|
|
796
|
-
bottom?: import("@xstyled/styled-components").SystemProp<string | number | true | symbol | {} | (string & {}), import("@xstyled/styled-components").Theme> | undefined;
|
|
797
|
-
left?: import("@xstyled/styled-components").SystemProp<string | number | true | symbol | {} | (string & {}), import("@xstyled/styled-components").Theme> | undefined;
|
|
794
|
+
top?: import("@xstyled/styled-components").SystemProp<string | number | true | symbol | {} | (string & {}) | (number & {}), import("@xstyled/styled-components").Theme> | undefined;
|
|
795
|
+
right?: import("@xstyled/styled-components").SystemProp<string | number | true | symbol | {} | (string & {}) | (number & {}), import("@xstyled/styled-components").Theme> | undefined;
|
|
796
|
+
bottom?: import("@xstyled/styled-components").SystemProp<string | number | true | symbol | {} | (string & {}) | (number & {}), import("@xstyled/styled-components").Theme> | undefined;
|
|
797
|
+
left?: import("@xstyled/styled-components").SystemProp<string | number | true | symbol | {} | (string & {}) | (number & {}), import("@xstyled/styled-components").Theme> | undefined;
|
|
798
798
|
visibility?: import("@xstyled/styled-components").SystemProp<import("csstype").Property.Visibility, import("@xstyled/styled-components").Theme> | undefined;
|
|
799
799
|
overscrollBehavior?: import("@xstyled/styled-components").SystemProp<import("csstype").Property.OverscrollBehavior, import("@xstyled/styled-components").Theme> | undefined;
|
|
800
800
|
objectFit?: import("@xstyled/styled-components").SystemProp<import("csstype").Property.ObjectFit, import("@xstyled/styled-components").Theme> | undefined;
|
|
@@ -822,7 +822,7 @@ export declare const useConfig: (props: DSChipT.Props) => {
|
|
|
822
822
|
borderRadius?: string;
|
|
823
823
|
backgroundColor?: keyof import("@elliemae/ds-system").DummyColorTheme | `neutral-100-${string}` | `neutral-200-${string}` | `neutral-300-${string}` | `neutral-400-${string}` | `neutral-500-${string}` | `neutral-600-${string}` | `neutral-700-${string}` | `neutral-800-${string}` | `neutral-000-${string}` | `neutral-050-${string}` | `neutral-080-${string}` | `brand-100-${string}` | `brand-200-${string}` | `brand-300-${string}` | `brand-400-${string}` | `brand-500-${string}` | `brand-600-${string}` | `brand-700-${string}` | `brand-800-${string}` | `success-300-${string}` | `success-900-${string}` | `warning-400-${string}` | `warning-600-${string}` | `warning-900-${string}` | `danger-200-${string}` | `danger-900-${string}` | `#${string}` | `rgba(${string})` | `rgb(${string})`;
|
|
824
824
|
bg?: keyof import("@elliemae/ds-system").DummyColorTheme | `neutral-100-${string}` | `neutral-200-${string}` | `neutral-300-${string}` | `neutral-400-${string}` | `neutral-500-${string}` | `neutral-600-${string}` | `neutral-700-${string}` | `neutral-800-${string}` | `neutral-000-${string}` | `neutral-050-${string}` | `neutral-080-${string}` | `brand-100-${string}` | `brand-200-${string}` | `brand-300-${string}` | `brand-400-${string}` | `brand-500-${string}` | `brand-600-${string}` | `brand-700-${string}` | `brand-800-${string}` | `success-300-${string}` | `success-900-${string}` | `warning-400-${string}` | `warning-600-${string}` | `warning-900-${string}` | `danger-200-${string}` | `danger-900-${string}` | `#${string}` | `rgba(${string})` | `rgb(${string})`;
|
|
825
|
-
fontWeight?: import("@xstyled/styled-components").SystemProp<{} | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" |
|
|
825
|
+
fontWeight?: import("@xstyled/styled-components").SystemProp<{} | (string & {}) | "inherit" | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "bold" | "normal" | "bolder" | "lighter" | "thin" | "light" | "regular" | "semibold", import("@xstyled/styled-components").Theme> | undefined;
|
|
826
826
|
textAlign?: import("@xstyled/styled-components").SystemProp<import("csstype").Property.TextAlign, import("@xstyled/styled-components").Theme> | undefined;
|
|
827
827
|
label: string;
|
|
828
828
|
icon: React.ComponentType<{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-chip",
|
|
3
|
-
"version": "3.60.0-next.
|
|
3
|
+
"version": "3.60.0-next.16",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Chip",
|
|
6
6
|
"files": [
|
|
@@ -36,16 +36,15 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-props-helpers": "3.60.0-next.16",
|
|
40
|
+
"@elliemae/ds-system": "3.60.0-next.16",
|
|
41
|
+
"@elliemae/ds-typescript-helpers": "3.60.0-next.16"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"
|
|
45
|
-
"jest": "~29.7.0",
|
|
44
|
+
"jest": "^30.0.0",
|
|
46
45
|
"styled-components": "~5.3.9",
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
46
|
+
"@elliemae/ds-test-utils": "3.60.0-next.16",
|
|
47
|
+
"@elliemae/ds-monorepo-devops": "3.60.0-next.16"
|
|
49
48
|
},
|
|
50
49
|
"peerDependencies": {
|
|
51
50
|
"lodash-es": "^4.17.21",
|
|
@@ -59,7 +58,7 @@
|
|
|
59
58
|
},
|
|
60
59
|
"scripts": {
|
|
61
60
|
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|
|
62
|
-
"test": "
|
|
61
|
+
"test": "ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
|
|
63
62
|
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
64
63
|
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
65
64
|
"dts": "node ../../../scripts/dts.mjs",
|