@elliemae/ds-chip 3.25.0-next.2 → 3.25.0-next.4

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.
@@ -91,13 +91,14 @@ const StyledChildrenWrapper = (0, import_ds_system.styled)("div", { name: import
91
91
  height: 100%;
92
92
  `;
93
93
  const styledChipSelectedCss = import_ds_system.css`
94
- ${StyledRoundShape} {
94
+ // TODO: wrap css processor to process new HOC wrapping styled components
95
+ ${StyledRoundShape.toString()} {
95
96
  background-color: ${({ theme }) => theme.colors.brand[800]};
96
97
  }
97
98
  color: ${({ theme }) => theme.colors.brand[800]};
98
99
  background-color: ${({ theme }) => theme.colors.brand[200]};
99
100
 
100
- .DSIcon-svg {
101
+ .DSIcon-root .DSIcon-svg {
101
102
  fill: ${({ theme }) => theme.colors.brand[800]};
102
103
  }
103
104
 
@@ -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 { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: 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\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.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: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')} 6px 6px 6px;\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.span`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\n display: flex;\n height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\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: DSChipSlots.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 margin-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\n`;\n\nexport const StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n width: 100%;\n height: 100%;\n`;\n\nconst styledChipSelectedCss = css`\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\n .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[800]};\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0;\n padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: #fff;\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: #fff;\n height: 24px;\n width: 24px;\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\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n height: 24px;\n width: 24px;\n }\n\n & .DSIcon-root {\n height: 24px;\n width: 24px;\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n\n ${StyledChipLabel} {\n text-align: left;\n }\n\n ${StyledSpanWithEllipsis} {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\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 border-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:disabled {\n color: ${({ theme }) => theme.colors.neutral[500]};\n cursor: not-allowed;\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n\n &:focus,\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: #fff;\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: 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\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.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: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')} 6px 6px 6px;\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.span`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\n display: flex;\n height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\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: DSChipSlots.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 margin-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\n`;\n\nexport const StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n width: 100%;\n height: 100%;\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[800]};\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0;\n padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: #fff;\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: #fff;\n height: 24px;\n width: 24px;\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\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n height: 24px;\n width: 24px;\n }\n\n & .DSIcon-root {\n height: 24px;\n width: 24px;\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n\n ${StyledChipLabel} {\n text-align: left;\n }\n\n ${StyledSpanWithEllipsis} {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\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 border-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:disabled {\n color: ${({ theme }) => theme.colors.neutral[500]};\n cursor: not-allowed;\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n\n &:focus,\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: #fff;\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -53,13 +53,14 @@ const StyledChildrenWrapper = styled("div", { name: DSChipName, slot: DSChipSlot
53
53
  height: 100%;
54
54
  `;
55
55
  const styledChipSelectedCss = css`
56
- ${StyledRoundShape} {
56
+ // TODO: wrap css processor to process new HOC wrapping styled components
57
+ ${StyledRoundShape.toString()} {
57
58
  background-color: ${({ theme }) => theme.colors.brand[800]};
58
59
  }
59
60
  color: ${({ theme }) => theme.colors.brand[800]};
60
61
  background-color: ${({ theme }) => theme.colors.brand[200]};
61
62
 
62
- .DSIcon-svg {
63
+ .DSIcon-root .DSIcon-svg {
63
64
  fill: ${({ theme }) => theme.colors.brand[800]};
64
65
  }
65
66
 
@@ -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 { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: 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\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.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: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')} 6px 6px 6px;\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.span`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\n display: flex;\n height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\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: DSChipSlots.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 margin-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\n`;\n\nexport const StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n width: 100%;\n height: 100%;\n`;\n\nconst styledChipSelectedCss = css`\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\n .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[800]};\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0;\n padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: #fff;\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: #fff;\n height: 24px;\n width: 24px;\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\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n height: 24px;\n width: 24px;\n }\n\n & .DSIcon-root {\n height: 24px;\n width: 24px;\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n\n ${StyledChipLabel} {\n text-align: left;\n }\n\n ${StyledSpanWithEllipsis} {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\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 border-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:disabled {\n color: ${({ theme }) => theme.colors.neutral[500]};\n cursor: not-allowed;\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n\n &:focus,\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: #fff;\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\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 { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: 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\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.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: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')} 6px 6px 6px;\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.span`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\n display: flex;\n height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\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: DSChipSlots.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 margin-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\n`;\n\nexport const StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n width: 100%;\n height: 100%;\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[800]};\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0;\n padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: #fff;\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: #fff;\n height: 24px;\n width: 24px;\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\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n height: 24px;\n width: 24px;\n }\n\n & .DSIcon-root {\n height: 24px;\n width: 24px;\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n\n ${StyledChipLabel} {\n text-align: left;\n }\n\n ${StyledSpanWithEllipsis} {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\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 border-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:disabled {\n color: ${({ theme }) => theme.colors.neutral[500]};\n cursor: not-allowed;\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n\n &:focus,\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: #fff;\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-chip",
3
- "version": "3.25.0-next.2",
3
+ "version": "3.25.0-next.4",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Chip",
6
6
  "files": [
@@ -63,15 +63,15 @@
63
63
  "indent": 4
64
64
  },
65
65
  "dependencies": {
66
- "@elliemae/ds-props-helpers": "3.25.0-next.2",
67
- "@elliemae/ds-utilities": "3.25.0-next.2",
68
- "@elliemae/ds-system": "3.25.0-next.2"
66
+ "@elliemae/ds-props-helpers": "3.25.0-next.4",
67
+ "@elliemae/ds-system": "3.25.0-next.4",
68
+ "@elliemae/ds-utilities": "3.25.0-next.4"
69
69
  },
70
70
  "devDependencies": {
71
71
  "@elliemae/pui-cli": "~9.0.0-next.31",
72
72
  "styled-components": "~5.3.9",
73
- "@elliemae/ds-monorepo-devops": "3.25.0-next.2",
74
- "@elliemae/ds-icons": "3.25.0-next.2"
73
+ "@elliemae/ds-monorepo-devops": "3.25.0-next.4",
74
+ "@elliemae/ds-icons": "3.25.0-next.4"
75
75
  },
76
76
  "peerDependencies": {
77
77
  "lodash": "^4.17.21",