@elliemae/ds-chip 3.53.0-next.6 → 3.53.0-next.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -155,7 +155,6 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
155
155
  border: 2px solid transparent;
156
156
  pointer-events: none;
157
157
  }
158
-
159
158
  & .DSIcon-root .DSIcon-svg {
160
159
  fill: ${({ theme }) => theme.colors.brand[600]};
161
160
  height: 1.85rem;
@@ -165,7 +164,6 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
165
164
  width: 1.5rem;
166
165
  }
167
166
  }
168
-
169
167
  & .DSIcon-root {
170
168
  height: 1.85rem;
171
169
  width: 1.85rem;
@@ -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 name: DSChipName,\n slot: DSChipSlots.ELLIPSIS,\n})`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: DSChipSlots.ROOT,\n})<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\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 justify-content: 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: 1.85rem;\n width: 1.85rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\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: 1.85rem;\n width: 1.85rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\n }\n\n & .DSIcon-root {\n height: 1.85rem;\n width: 1.85rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\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 &[aria-disabled='true'] {\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 ${StyledRoundShape} {\n ${disabledRoundShape}\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\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover {\n &:not(:focus) {\n &:before {\n border-color: transparent;\n }\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 name: DSChipName,\n slot: DSChipSlots.ELLIPSIS,\n})`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: DSChipSlots.ROOT,\n})<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\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 justify-content: 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: 1.85rem;\n width: 1.85rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\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 height: 1.85rem;\n width: 1.85rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\n }\n & .DSIcon-root {\n height: 1.85rem;\n width: 1.85rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\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 &[aria-disabled='true'] {\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 ${StyledRoundShape} {\n ${disabledRoundShape}\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\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover {\n &:not(:focus) {\n &:before {\n border-color: transparent;\n }\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
  }
@@ -118,7 +118,6 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
118
118
  border: 2px solid transparent;
119
119
  pointer-events: none;
120
120
  }
121
-
122
121
  & .DSIcon-root .DSIcon-svg {
123
122
  fill: ${({ theme }) => theme.colors.brand[600]};
124
123
  height: 1.85rem;
@@ -128,7 +127,6 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
128
127
  width: 1.5rem;
129
128
  }
130
129
  }
131
-
132
130
  & .DSIcon-root {
133
131
  height: 1.85rem;
134
132
  width: 1.85rem;
@@ -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 name: DSChipName,\n slot: DSChipSlots.ELLIPSIS,\n})`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: DSChipSlots.ROOT,\n})<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\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 justify-content: 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: 1.85rem;\n width: 1.85rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\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: 1.85rem;\n width: 1.85rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\n }\n\n & .DSIcon-root {\n height: 1.85rem;\n width: 1.85rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\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 &[aria-disabled='true'] {\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 ${StyledRoundShape} {\n ${disabledRoundShape}\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\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover {\n &:not(:focus) {\n &:before {\n border-color: transparent;\n }\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 name: DSChipName,\n slot: DSChipSlots.ELLIPSIS,\n})`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: DSChipSlots.ROOT,\n})<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\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 justify-content: 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: 1.85rem;\n width: 1.85rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\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 height: 1.85rem;\n width: 1.85rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\n }\n & .DSIcon-root {\n height: 1.85rem;\n width: 1.85rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\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 &[aria-disabled='true'] {\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 ${StyledRoundShape} {\n ${disabledRoundShape}\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\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover {\n &:not(:focus) {\n &:before {\n border-color: transparent;\n }\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.53.0-next.6",
3
+ "version": "3.53.0-next.7",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Chip",
6
6
  "files": [
@@ -36,16 +36,16 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-props-helpers": "3.53.0-next.6",
40
- "@elliemae/ds-system": "3.53.0-next.6",
41
- "@elliemae/ds-typescript-helpers": "3.53.0-next.6"
39
+ "@elliemae/ds-system": "3.53.0-next.7",
40
+ "@elliemae/ds-typescript-helpers": "3.53.0-next.7",
41
+ "@elliemae/ds-props-helpers": "3.53.0-next.7"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@elliemae/pui-cli": "9.0.0-next.63",
45
45
  "jest": "~29.7.0",
46
46
  "styled-components": "~5.3.9",
47
- "@elliemae/ds-monorepo-devops": "3.53.0-next.6",
48
- "@elliemae/ds-icons": "3.53.0-next.6"
47
+ "@elliemae/ds-icons": "3.53.0-next.7",
48
+ "@elliemae/ds-monorepo-devops": "3.53.0-next.7"
49
49
  },
50
50
  "peerDependencies": {
51
51
  "lodash-es": "^4.17.21",