@elliemae/ds-pills-v2 3.51.0-next.9 → 3.51.0-rc.1

package/dist/cjs/components/Pill.js

@@ -43,6 +43,7 @@ const pillComponentGetter = {
   menubutton: import_types.MenuButtonPill,
   input: import_types.InputPill,
   label: import_types.LabelPill,
+  labelOnly: import_types.LabelOnlyPill,
   readonly: import_types.ReadOnlyPill,
   removable: import_types.RemovablePill,
   value: import_types.ValuePill

package/dist/cjs/components/Pill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Pill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { DSPillName } from '../DSPillDefinitions.js';\nimport { DSPillV2DefaultProps, DSPillV2PropTypesSchema, type DSPillT } from '../react-desc-prop-types.js';\nimport {\n  DropdownPill,\n  InputPill,\n  LabelPill,\n  MenuButtonPill,\n  ReadOnlyPill,\n  RemovablePill,\n  ValuePill,\n} from './types/index.js';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillT.InternalProps>> = {\n  dropdown: DropdownPill,\n  menubutton: MenuButtonPill,\n  input: InputPill,\n  label: LabelPill,\n  readonly: ReadOnlyPill,\n  removable: RemovablePill,\n  value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSPillT.InternalProps>(props, DSPillV2DefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypesSchema, DSPillName);\n  const { type } = propsWithDefaults;\n  const PillComponent = pillComponentGetter[type];\n\n  return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.displayName = DSPillName;\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypesSchema;\n\nexport { DSPillV2, DSPillV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Bd;AA9BT,8BAAuF;AAEvF,+BAA2B;AAC3B,mCAA4E;AAC5E,mBAQO;AAEP,MAAM,sBAAkF;AAAA,EACtF,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAA+C,CAAC,UAAU;AAC9D,QAAM,wBAAoB,sDAAoD,OAAO,iDAAoB;AACzG,8DAA+B,mBAAmB,sDAAyB,mCAAU;AACrF,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAgB,oBAAoB,IAAI;AAE9C,SAAO,4CAAC,iBAAe,GAAG,mBAAmB;AAC/C;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
+  "sourcesContent": ["import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { DSPillName } from '../DSPillDefinitions.js';\nimport { DSPillV2DefaultProps, DSPillV2PropTypesSchema, type DSPillT } from '../react-desc-prop-types.js';\nimport {\n  DropdownPill,\n  InputPill,\n  LabelPill,\n  LabelOnlyPill,\n  MenuButtonPill,\n  ReadOnlyPill,\n  RemovablePill,\n  ValuePill,\n} from './types/index.js';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillT.InternalProps>> = {\n  dropdown: DropdownPill,\n  menubutton: MenuButtonPill,\n  input: InputPill,\n  label: LabelPill,\n  labelOnly: LabelOnlyPill,\n  readonly: ReadOnlyPill,\n  removable: RemovablePill,\n  value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSPillT.InternalProps>(props, DSPillV2DefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypesSchema, DSPillName);\n  const { type } = propsWithDefaults;\n  const PillComponent = pillComponentGetter[type];\n\n  return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.displayName = DSPillName;\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypesSchema;\n\nexport { DSPillV2, DSPillV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCd;AAhCT,8BAAuF;AAEvF,+BAA2B;AAC3B,mCAA4E;AAC5E,mBASO;AAEP,MAAM,sBAAkF;AAAA,EACtF,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAA+C,CAAC,UAAU;AAC9D,QAAM,wBAAoB,sDAAoD,OAAO,iDAAoB;AACzG,8DAA+B,mBAAmB,sDAAyB,mCAAU;AACrF,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAgB,oBAAoB,IAAI;AAE9C,SAAO,4CAAC,iBAAe,GAAG,mBAAmB;AAC/C;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
   "names": []
 }

package/dist/cjs/components/styled.js

@@ -30,6 +30,7 @@ var styled_exports = {};
 __export(styled_exports, {
   StyledDropdownPillWrapper: () => StyledDropdownPillWrapper,
   StyledInputPillWrapper: () => StyledInputPillWrapper,
+  StyledLabelOnlyPillWrapper: () => StyledLabelOnlyPillWrapper,
   StyledLabelPillWrapper: () => StyledLabelPillWrapper,
   StyledPillButton: () => StyledPillButton,
   StyledPillGroup: () => StyledPillGroup,
@@ -60,7 +61,7 @@ const borderOutside = ({
     right: 0px;
     bottom: 0px;
     border: ${size}px solid
-      ${({ disabled, applyAriaDisabled, theme }) => disabled || applyAriaDisabled ? theme.colors.neutral[400] : color};
+      ${({ disabled, applyAriaDisabled, readOnly, theme }) => disabled || applyAriaDisabled || readOnly ? theme.colors.neutral[400] : color};
     border-top-left-radius: ${borderRadius};
     border-top-right-radius: ${borderRadius};
     border-bottom-left-radius: ${borderRadius};
@@ -78,7 +79,11 @@ const commonPillWrapperCss = import_ds_system.css`
 
   width: fit-content;
 
-  background-color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? theme.colors.neutral["080"] : theme.colors.brand[200]};
+  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {
+  if (disabled) return theme.colors.neutral["080"];
+  if (applyAriaDisabled || readOnly) return theme.colors.neutral["050"];
+  return theme.colors.brand[200];
+}};
 
   outline: none;
 
@@ -91,20 +96,26 @@ const commonPillWrapperCss = import_ds_system.css`
   line-height: 1;
   user-select: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "none" : "auto"};
   cursor: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "not-allowed" : "default"};
-  color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "#616b7f" : theme.colors.brand["800"]};
-  ${(props) => borderOutside({ color: props.theme.colors.brand[300] })};
+  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : theme.colors.brand["800"]};
+  ${({ theme, disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly ? borderOutside({ color: theme.colors.brand[300] }) : ""};
 `;
 const StyledLabelPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   ${commonPillWrapperCss}
 
   font-weight: ${(props) => props.theme.fontWeights.semibold};
-  padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
+  padding-left: ${(props) => props.hasIcon || props.applyAriaDisabled || props.readOnly ? "0px !important" : "12px"};
+`;
+const StyledLabelOnlyPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  ${commonPillWrapperCss}
+
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+  padding-left: ${(props) => props.hasIcon || props.applyAriaDisabled ? "0px !important" : "12px"};
 `;
 const StyledValuePillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   ${commonPillWrapperCss}
 
   font-weight: ${(props) => props.theme.fontWeights.regular};
-  padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
+  padding-left: ${(props) => props.hasIcon || props.disabled ? "0px !important" : "12px"};
 `;
 const StyledInputPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   ${commonPillWrapperCss}
@@ -157,7 +168,7 @@ const StyledRemovablePillWrapper = (0, import_ds_system.styled)(import_ds_grid.G
   ${commonPillWrapperCss}
   font-weight: ${(props) => props.theme.fontWeights.regular};
   padding: 0 0 0 12px;
-  padding: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "0 12px 0 12px" : "0 0 0 12px"};
+  padding: ${({ disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "0 12px 0 12px" : "0 0 0 12px"};
   line-height: 1.2307rem;
   @media (max-width: ${(props) => props.theme.breakpoints?.small}) {
     line-height: 1rem;

package/dist/cjs/components/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuButton } from '@elliemae/ds-menu-button';\nimport { css, styled } from '@elliemae/ds-system';\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nexport const borderOutside = ({\n  color,\n  size = 1,\n  zIndex = 0,\n  borderRadius = '12px',\n}: {\n  color: string;\n  size?: number;\n  zIndex?: number;\n  borderRadius?: string;\n}) => css<{ disabled?: boolean; applyAriaDisabled?: boolean }>`\n  :after {\n    content: ' ';\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ${size}px solid\n      ${({ disabled, applyAriaDisabled, theme }) => (disabled || applyAriaDisabled ? theme.colors.neutral[400] : color)};\n    border-top-left-radius: ${borderRadius};\n    border-top-right-radius: ${borderRadius};\n    border-bottom-left-radius: ${borderRadius};\n    border-bottom-right-radius: ${borderRadius};\n    pointer-events: none;\n    z-index: ${zIndex || ''};\n  }\n`;\n\nconst commonPillWrapperCss = css<{ pillSize: 'm' | 's'; disabled?: boolean; applyAriaDisabled?: boolean }>`\n  height: ${(props) => (props?.pillSize === 'm' ? '1.846rem' : '1.3846rem')};\n  @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n    height: ${(props) => (props?.pillSize === 'm' ? '1.5rem' : '1.125rem')};\n  }\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ${({ theme, disabled, applyAriaDisabled }) =>\n    disabled || applyAriaDisabled ? theme.colors.neutral['080'] : theme.colors.brand[200]};\n\n  outline: none;\n\n  white-space: nowrap;\n\n  padding: 0px 12px 0 12px;\n  border-radius: 12px;\n\n  font-size: 1rem;\n  line-height: 1;\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : 'auto')};\n  cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'default')};\n  color: ${({ theme, disabled, applyAriaDisabled }) =>\n    disabled || applyAriaDisabled ? '#616b7f' : theme.colors.brand['800']};\n  ${(props) => borderOutside({ color: props.theme.colors.brand[300] })};\n`;\n\ninterface InputPillWrapperProps {\n  value: string;\n  inputWidth: number;\n  inputHasFocus: boolean;\n  hasError: boolean;\n  pillSize: 'm' | 's';\n  disabled?: boolean;\n}\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)<{ pillSize: 'm' | 's'; hasIcon: boolean }>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\ntype StyledValuePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  applyAriaDisabled: boolean;\n};\nexport const StyledValuePillWrapper = styled(Grid)<StyledValuePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<InputPillWrapperProps>`\n  ${commonPillWrapperCss}\n\n  background: ${(props) => props.theme.colors.neutral['000']};\n  padding: 0;\n\n  ${({ theme, hasError }) => {\n    if (hasError) return borderOutside({ color: theme.colors.danger[900] });\n    return borderOutside({ color: theme.colors.brand[500] });\n  }}\n\n  :focus-within {\n    ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[700], size: 2 }) : '')}\n  }\n\n  :active {\n    ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : '')}\n  }\n\n  & .em-ds-input {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: 0 !important;\n    height: 100%;\n    background: transparent;\n    width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n    padding: 0;\n    margin: 0 0 0 8px;\n  }\n\n  & .em-ds-input__tooltip-ref {\n    height: 100%;\n  }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)<{ pillSize: 'm' | 's' }>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  padding: 0 0 0 12px;\n`;\ntype StyledMenuButtonPillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIconRight: boolean;\n  hasIconLeft: boolean;\n  disabled?: boolean;\n};\nexport const StyledReadonlyPillWrapper = styled(Grid)<StyledMenuButtonPillWrapperPropsT>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n  padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\ntype StyledRemovablePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n};\nexport const StyledRemovablePillWrapper = styled(Grid)<StyledRemovablePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding: 0 0 0 12px;\n  padding: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? '0 12px 0 12px' : '0 0 0 12px')};\n  line-height: 1.2307rem;\n  @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n    line-height: 1rem;\n  }\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n  width: ${({ width }) => width};\n\n  // Pill edges\n  & .ds-pill-wrapper {\n    &:not(:first-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    &:not(:last-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n\n  // Pill paddings to the left / right\n  & .ds-pill-wrapper-label,\n  & .ds-pill-wrapper-value,\n  & .ds-pill-wrapper-readonly {\n    &:not(:first-of-type) {\n      padding-left: 8px;\n    }\n    &:not(:last-of-type) {\n      padding-right: 8px;\n    }\n  }\n\n  & .ds-pill-wrapper-removable:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper {\n    :not(:first-of-type) {\n      .ds-pill-button-left {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    :not(:last-of-type) {\n      .ds-pill-button-right {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n  outline: none;\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}\n  }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string | number; height: string | number }>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  ${({ width, height, theme }) => {\n    if (String(width).includes('px') && String(height).includes('px'))\n      return `\n      width: ${parseInt(width as string, 10) / 13}rem;\n    height: ${parseInt(height as string, 10) / 13}rem;\n\n    @media (max-width: ${theme.breakpoints?.small}) {\n      width: ${parseInt(width as string, 10) / 16}rem;\n      height: ${parseInt(height as string, 10) / 16}rem;\n    }`;\n\n    return `\n    width: ${width};\n    height: ${height};\n    `;\n  }}\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n  }\n\n  cursor: pointer;\n`;\nexport const StyledPillMenuButton = styled(DSMenuButton)<{ width: string; height: string }>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  ${({ width, height, theme }) => {\n    if (String(width).includes('px') && String(height).includes('px'))\n      return `\n      width: ${parseInt(width, 10) / 13}rem;\n    height: ${parseInt(height, 10) / 13}rem;\n\n    @media (max-width: ${theme.breakpoints?.small}) {\n      width: ${parseInt(width, 10) / 16}rem;\n      height: ${parseInt(height, 10) / 16}rem;\n    }`;\n\n    return `\n    width: ${width};\n    height: ${height};\n    `;\n  }}\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n  }\n\n  cursor: pointer;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuButton } from '@elliemae/ds-menu-button';\nimport { css, styled } from '@elliemae/ds-system';\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nexport const borderOutside = ({\n  color,\n  size = 1,\n  zIndex = 0,\n  borderRadius = '12px',\n}: {\n  color: string;\n  size?: number;\n  zIndex?: number;\n  borderRadius?: string;\n}) => css<{ disabled?: boolean; applyAriaDisabled?: boolean; readOnly?: boolean }>`\n  :after {\n    content: ' ';\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ${size}px solid\n      ${({ disabled, applyAriaDisabled, readOnly, theme }) =>\n        disabled || applyAriaDisabled || readOnly ? theme.colors.neutral[400] : color};\n    border-top-left-radius: ${borderRadius};\n    border-top-right-radius: ${borderRadius};\n    border-bottom-left-radius: ${borderRadius};\n    border-bottom-right-radius: ${borderRadius};\n    pointer-events: none;\n    z-index: ${zIndex || ''};\n  }\n`;\n\nconst commonPillWrapperCss = css<{\n  pillSize: 'm' | 's';\n  disabled?: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n}>`\n  height: ${(props) => (props?.pillSize === 'm' ? '1.846rem' : '1.3846rem')};\n  @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n    height: ${(props) => (props?.pillSize === 'm' ? '1.5rem' : '1.125rem')};\n  }\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['080'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n    return theme.colors.brand[200];\n  }};\n\n  outline: none;\n\n  white-space: nowrap;\n\n  padding: 0px 12px 0 12px;\n  border-radius: 12px;\n\n  font-size: 1rem;\n  line-height: 1;\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : 'auto')};\n  cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'default')};\n  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? '#616b7f' : theme.colors.brand['800']};\n  ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    !disabled && !applyAriaDisabled && !readOnly ? borderOutside({ color: theme.colors.brand[300] }) : ''};\n`;\n\ninterface InputPillWrapperProps {\n  value: string;\n  inputWidth: number;\n  inputHasFocus: boolean;\n  hasError: boolean;\n  pillSize: 'm' | 's';\n  disabled?: boolean;\n}\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)<{\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n}>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-left: ${(props) => (props.hasIcon || props.applyAriaDisabled || props.readOnly ? '0px !important' : '12px')};\n`;\n\nexport const StyledLabelOnlyPillWrapper = styled(Grid)<{\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  applyAriaDisabled?: boolean;\n}>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon || props.applyAriaDisabled ? '0px !important' : '12px')};\n`;\n\ntype StyledValuePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  applyAriaDisabled: boolean;\n};\n\nexport const StyledValuePillWrapper = styled(Grid)<StyledValuePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon || props.disabled ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<InputPillWrapperProps>`\n  ${commonPillWrapperCss}\n\n  background: ${(props) => props.theme.colors.neutral['000']};\n  padding: 0;\n\n  ${({ theme, hasError }) => {\n    if (hasError) return borderOutside({ color: theme.colors.danger[900] });\n    return borderOutside({ color: theme.colors.brand[500] });\n  }}\n\n  :focus-within {\n    ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[700], size: 2 }) : '')}\n  }\n\n  :active {\n    ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : '')}\n  }\n\n  & .em-ds-input {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: 0 !important;\n    height: 100%;\n    background: transparent;\n    width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n    padding: 0;\n    margin: 0 0 0 8px;\n  }\n\n  & .em-ds-input__tooltip-ref {\n    height: 100%;\n  }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)<{ pillSize: 'm' | 's' }>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  padding: 0 0 0 12px;\n`;\n\ntype StyledMenuButtonPillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIconRight: boolean;\n  hasIconLeft: boolean;\n  disabled?: boolean;\n};\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<StyledMenuButtonPillWrapperPropsT>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n  padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\ntype StyledRemovablePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n};\n\nexport const StyledRemovablePillWrapper = styled(Grid)<StyledRemovablePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding: 0 0 0 12px;\n  padding: ${({ disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? '0 12px 0 12px' : '0 0 0 12px'};\n  line-height: 1.2307rem;\n  @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n    line-height: 1rem;\n  }\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n  width: ${({ width }) => width};\n\n  // Pill edges\n  & .ds-pill-wrapper {\n    &:not(:first-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    &:not(:last-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n\n  // Pill paddings to the left / right\n  & .ds-pill-wrapper-label,\n  & .ds-pill-wrapper-value,\n  & .ds-pill-wrapper-readonly {\n    &:not(:first-of-type) {\n      padding-left: 8px;\n    }\n    &:not(:last-of-type) {\n      padding-right: 8px;\n    }\n  }\n\n  & .ds-pill-wrapper-removable:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper {\n    :not(:first-of-type) {\n      .ds-pill-button-left {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    :not(:last-of-type) {\n      .ds-pill-button-right {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n  outline: none;\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}\n  }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string | number; height: string | number }>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  ${({ width, height, theme }) => {\n    if (String(width).includes('px') && String(height).includes('px'))\n      return `\n      width: ${parseInt(width as string, 10) / 13}rem;\n    height: ${parseInt(height as string, 10) / 13}rem;\n\n    @media (max-width: ${theme.breakpoints?.small}) {\n      width: ${parseInt(width as string, 10) / 16}rem;\n      height: ${parseInt(height as string, 10) / 16}rem;\n    }`;\n\n    return `\n    width: ${width};\n    height: ${height};\n    `;\n  }}\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n  }\n\n  cursor: pointer;\n`;\n\nexport const StyledPillMenuButton = styled(DSMenuButton)<{ width: string; height: string }>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  ${({ width, height, theme }) => {\n    if (String(width).includes('px') && String(height).includes('px'))\n      return `\n      width: ${parseInt(width, 10) / 13}rem;\n    height: ${parseInt(height, 10) / 13}rem;\n\n    @media (max-width: ${theme.breakpoints?.small}) {\n      width: ${parseInt(width, 10) / 16}rem;\n      height: ${parseInt(height, 10) / 16}rem;\n    }`;\n\n    return `\n    width: ${width};\n    height: ${height};\n    `;\n  }}\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n  }\n\n  cursor: pointer;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/components/types/LabelOnlyPill.js

@@ -0,0 +1,62 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LabelOnlyPill_exports = {};
+__export(LabelOnlyPill_exports, {
+  LabelOnlyPill: () => LabelOnlyPill
+});
+module.exports = __toCommonJS(LabelOnlyPill_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_TextComponent = require("../TextComponent.js");
+var import_styled = require("../styled.js");
+const LabelOnlyPill = import_react.default.memo(
+  ({ label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledLabelOnlyPillWrapper,
+    {
+      pillSize: size,
+      alignItems: "center",
+      className: "ds-pill-wrapper ds-pill-wrapper-label",
+      "data-testid": "ds-pill-wrapper",
+      "data-label": ariaLabel || label,
+      cols: [(iconLeft || IconLeft) && "min-content", "auto"].filter((notFalse) => notFalse),
+      gutter: "xxxs",
+      hasIcon: (iconLeft || IconLeft) !== null,
+      role: "group",
+      "aria-label": label,
+      applyAriaDisabled,
+      readOnly,
+      children: [
+        IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
+      ]
+    }
+  )
+);
+//# sourceMappingURL=LabelOnlyPill.js.map

package/dist/cjs/components/types/LabelOnlyPill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/types/LabelOnlyPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledLabelOnlyPillWrapper } from '../styled.js';\n\nexport const LabelOnlyPill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma }) => (\n    <StyledLabelOnlyPillWrapper\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      data-label={ariaLabel || label}\n      cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={(iconLeft || IconLeft) !== null}\n      role=\"group\"\n      aria-label={label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n    >\n      {IconLeft ? <IconLeft label={label} /> : iconLeft}\n      <TextComponent labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n    </StyledLabelOnlyPillWrapper>\n  ),\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQnB;AAPJ,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA2C;AAEpC,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,WAAW,mBAAmB,UAAU,cAAc,MACxG;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAO;AAAA,MACP,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MAEC;AAAA,mBAAW,4CAAC,YAAS,OAAc,IAAK;AAAA,QACzC,4CAAC,sCAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAC/F;AAEJ;",
+  "names": ["React"]
+}

package/dist/cjs/components/types/ValuePill.js

@@ -47,7 +47,9 @@ const ValuePill = import_react.default.memo(
     iconLeft,
     ariaLabel,
     applyAriaDisabled,
-    applyTooltipOverflowWrap
+    readOnly,
+    applyTooltipOverflowWrap,
+    trailingComma
   }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styled.StyledValuePillWrapper,
     {
@@ -61,6 +63,7 @@ const ValuePill = import_react.default.memo(
       hasIcon: iconLeft !== null,
       "data-label": ariaLabel || label,
       applyAriaDisabled,
+      readOnly,
       children: [
         iconLeft,
         tooltipValue !== "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -71,7 +74,7 @@ const ValuePill = import_react.default.memo(
             applyTooltipOverflowWrap,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSpanWithTooltip, { className: "ds-pill-tooltip-value", "aria-disabled": applyAriaDisabled, tabIndex: 0, children: label })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
       ]
     }
   )

package/dist/cjs/components/types/ValuePill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/ValuePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>(\n  ({\n    label,\n    size,\n    labelTruncated,\n    disabled,\n    tooltipValue,\n    iconLeft,\n    ariaLabel,\n    applyAriaDisabled,\n    applyTooltipOverflowWrap,\n  }) => (\n    <StyledValuePillWrapper\n      disabled={disabled}\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n      data-testid=\"ds-pill-wrapper\"\n      cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={iconLeft !== null}\n      data-label={ariaLabel || label}\n      applyAriaDisabled={applyAriaDisabled}\n    >\n      {iconLeft}\n      {tooltipValue !== '' ? (\n        <DSTooltipV3\n          text={tooltipValue ?? ''}\n          ariaLabel={tooltipValue ?? ''}\n          applyTooltipOverflowWrap={applyTooltipOverflowWrap}\n        >\n          <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" aria-disabled={applyAriaDisabled} tabIndex={0}>\n            {label}\n          </StyledSpanWithTooltip>\n        </DSTooltipV3>\n      ) : (\n        <TextComponent labelTruncated={labelTruncated} label={label} />\n      )}\n    </StyledValuePillWrapper>\n  ),\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAlBJ,2BAA4B;AAC5B,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA8D;AAEvD,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,MACtB,cAAY,aAAa;AAAA,MACzB;AAAA,MAEC;AAAA;AAAA,QACA,iBAAiB,KAChB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,gBAAgB;AAAA,YACtB,WAAW,gBAAgB;AAAA,YAC3B;AAAA,YAEA,sDAAC,uCAAsB,WAAU,yBAAwB,iBAAe,mBAAmB,UAAU,GAClG,iBACH;AAAA;AAAA,QACF,IAEA,4CAAC,sCAAc,gBAAgC,OAAc;AAAA;AAAA;AAAA,EAEjE;AAEJ;",
+  "sourcesContent": ["import { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>(\n  ({\n    label,\n    size,\n    labelTruncated,\n    disabled,\n    tooltipValue,\n    iconLeft,\n    ariaLabel,\n    applyAriaDisabled,\n    readOnly,\n    applyTooltipOverflowWrap,\n    trailingComma,\n  }) => (\n    <StyledValuePillWrapper\n      disabled={disabled}\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n      data-testid=\"ds-pill-wrapper\"\n      cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={iconLeft !== null}\n      data-label={ariaLabel || label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n    >\n      {iconLeft}\n      {tooltipValue !== '' ? (\n        <DSTooltipV3\n          text={tooltipValue ?? ''}\n          ariaLabel={tooltipValue ?? ''}\n          applyTooltipOverflowWrap={applyTooltipOverflowWrap}\n        >\n          <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" aria-disabled={applyAriaDisabled} tabIndex={0}>\n            {label}\n          </StyledSpanWithTooltip>\n        </DSTooltipV3>\n      ) : (\n        <TextComponent labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n      )}\n    </StyledValuePillWrapper>\n  ),\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBnB;AApBJ,2BAA4B;AAC5B,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA8D;AAEvD,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,MACtB,cAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,iBAAiB,KAChB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,gBAAgB;AAAA,YACtB,WAAW,gBAAgB;AAAA,YAC3B;AAAA,YAEA,sDAAC,uCAAsB,WAAU,yBAAwB,iBAAe,mBAAmB,UAAU,GAClG,iBACH;AAAA;AAAA,QACF,IAEA,4CAAC,sCAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAEjG;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/components/types/index.js

@@ -30,6 +30,7 @@ var types_exports = {};
 __export(types_exports, {
   DropdownPill: () => import_DropdownPill.DropdownPill,
   InputPill: () => import_InputPill.InputPill,
+  LabelOnlyPill: () => import_LabelOnlyPill.LabelOnlyPill,
   LabelPill: () => import_LabelPill.LabelPill,
   MenuButtonPill: () => import_MenuButtonPill.MenuButtonPill,
   ReadOnlyPill: () => import_ReadOnlyPill.ReadOnlyPill,
@@ -41,6 +42,7 @@ var React = __toESM(require("react"));
 var import_DropdownPill = require("./DropdownPill.js");
 var import_InputPill = require("./InputPill.js");
 var import_LabelPill = require("./LabelPill.js");
+var import_LabelOnlyPill = require("./LabelOnlyPill.js");
 var import_MenuButtonPill = require("./MenuButtonPill.js");
 var import_ReadOnlyPill = require("./ReadOnlyPill.js");
 var import_RemovablePill = require("./RemovablePill.js");

package/dist/cjs/components/types/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/index.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { DropdownPill } from './DropdownPill.js';\nexport { InputPill } from './InputPill.js';\nexport { LabelPill } from './LabelPill.js';\nexport { MenuButtonPill } from './MenuButtonPill.js';\nexport { ReadOnlyPill } from './ReadOnlyPill.js';\nexport { RemovablePill } from './RemovablePill.js';\nexport { ValuePill } from './ValuePill.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA6B;AAC7B,uBAA0B;AAC1B,uBAA0B;AAC1B,4BAA+B;AAC/B,0BAA6B;AAC7B,2BAA8B;AAC9B,uBAA0B;",
+  "sourcesContent": ["export { DropdownPill } from './DropdownPill.js';\nexport { InputPill } from './InputPill.js';\nexport { LabelPill } from './LabelPill.js';\nexport { LabelOnlyPill } from './LabelOnlyPill.js';\nexport { MenuButtonPill } from './MenuButtonPill.js';\nexport { ReadOnlyPill } from './ReadOnlyPill.js';\nexport { RemovablePill } from './RemovablePill.js';\nexport { ValuePill } from './ValuePill.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA6B;AAC7B,uBAA0B;AAC1B,uBAA0B;AAC1B,2BAA8B;AAC9B,4BAA+B;AAC/B,0BAA6B;AAC7B,2BAA8B;AAC9B,uBAA0B;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -47,6 +47,7 @@ const DSPillV2DefaultProps = {
   innerRef: () => null,
   disabled: false,
   applyAriaDisabled: false,
+  readOnly: false,
   applyTooltipOverflowWrap: false,
   // turn on for > 25.1
   hasError: false,
@@ -83,7 +84,16 @@ const DSPillGroupDefaultProps = {
   width: "fit-content",
   innerRef: () => null
 };
-const pillTypes = import_ds_props_helpers.PropTypes.oneOf(["label", "value", "input", "dropdown", "removable", "readonly", "menubutton"]);
+const pillTypes = import_ds_props_helpers.PropTypes.oneOf([
+  "label",
+  "labelOnly",
+  "value",
+  "input",
+  "dropdown",
+  "removable",
+  "readonly",
+  "menubutton"
+]);
 const { children, ...menuButtonPropsPropTypes } = import_ds_menu_button.DSMenuButtonPropTypes;
 const DSPillV2PropTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
@@ -115,12 +125,16 @@ const DSPillV2PropTypes = {
   applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
     "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
   ).defaultValue(false),
+  readOnly: import_ds_props_helpers.PropTypes.bool.description("Whether the Pill is in readonly state or not.").defaultValue(false),
   applyTooltipOverflowWrap: import_ds_props_helpers.PropTypes.bool.description(
     "when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap"
   ).defaultValue(false),
   hasError: import_ds_props_helpers.PropTypes.bool.description("Whether the pill should be in an error state. Only for input pill").defaultValue(false),
   inputRender: import_ds_props_helpers.PropTypes.func.description("Custom render function for the input pill").defaultValue(`DSInput`),
   menuButtonProps: import_ds_props_helpers.PropTypes.shape(menuButtonPropsPropTypes).description("Props for the menu button pill").isRequiredIf((props) => props.type === "menubutton"),
+  trailingComma: import_ds_props_helpers.PropTypes.bool.description(
+    "Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not"
+  ),
   dropdownProps: import_ds_props_helpers.PropTypes.object.description(
     "Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps"
   ).defaultValue({}).deprecated({ version: "25.3" }),

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nexport namespace DSPillT {\n  export interface DefaultProps {\n    innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    applyTooltipOverflowWrap: boolean;\n    hasError: boolean;\n    ariaLabel: string;\n    size: 'm' | 's';\n    labelTruncated: boolean;\n    tooltipValue: string;\n    iconLeft: JSX.Element | null;\n    IconLeft: React.ComponentType<{ label: string }> | null;\n    IconRight: React.ComponentType<{ label: string }> | null;\n    iconRight: JSX.Element | null;\n    onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputPlaceholder: string;\n    onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n    onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputWidth: number;\n    inputRender: React.ComponentType<any>;\n    dropdownProps: DSDropdownMenuT.Props;\n    onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    tabIndex: TypescriptHelpersT.WCAGTabIndex;\n  }\n  export interface OptionalProps {\n    inputId?: string;\n    menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n  }\n  export interface RequiredProps {\n    label: string;\n    type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n  }\n\n  export interface Props\n    extends RequiredProps,\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends RequiredProps,\n      DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface DSPillButtonDefaultPropsT {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n  }\n  export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n    type?: 'left' | 'right' | 'only';\n    width?: string;\n    height?: string;\n    applyAriaDisabled?: boolean;\n  }\n  export interface InternalButtonProps\n    extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface DefaultGroupPropsT {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n  export interface GroupProps extends GlobalAttributesT {\n    width?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n  export interface InternalGroupProps extends GlobalAttributesT {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  applyTooltipOverflowWrap: false, // turn on for > 25.1\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  IconLeft: null,\n  IconRight: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  // TODO: remove DSInput in favor of V2\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  inputRender: DSInput,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: DSPillT.DSPillButtonDefaultPropsT = {\n  type: 'right',\n  width: '100%',\n  height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: DSPillT.DefaultGroupPropsT = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly', 'menubutton']);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('Label to show in the pill').isRequired,\n  type: pillTypes.description('The type of pill that you want to render').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n    .defaultValue(() => null),\n  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n  ariaLabel: PropTypes.string\n    .description('Aria label for the pill. If not provided we will use the label')\n    .defaultValue(''),\n  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n  iconLeft: PropTypes.node\n    .description('A component to show int the left of a readonly pill')\n    .defaultValue(null)\n    .deprecated({\n      version: '4.x',\n      message: 'Use IconLeft instead for accessibility reasons',\n    }),\n  IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n  IconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n  iconRight: PropTypes.node\n    .description('A component to show in the right of a readonly pill')\n    .defaultValue(null)\n    .deprecated({\n      version: '4.x',\n      message: 'Use IconRight instead for accessibility reasons',\n    }),\n  onRemove: PropTypes.func\n    .description('Callback triggered when removing a pill with the close icon')\n    .defaultValue(() => null),\n  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n  onInputChange: PropTypes.func\n    .description('Callback triggered when user provides input to the input pill')\n    .defaultValue(() => null),\n  onInputClear: PropTypes.func\n    .description('Callback triggered when the user clears an input pill')\n    .defaultValue(() => null),\n  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n  inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n  disabled: PropTypes.bool\n    .description('Whether the pill should be disabled. Only for value and removable pill')\n    .defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  applyTooltipOverflowWrap: PropTypes.bool\n    .description(\n      'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n    )\n    .defaultValue(false),\n  hasError: PropTypes.bool\n    .description('Whether the pill should be in an error state. Only for input pill')\n    .defaultValue(false),\n  inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n  menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n    .description('Props for the menu button pill')\n    .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n  dropdownProps: PropTypes.object\n    .description(\n      'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n    )\n    .defaultValue({})\n    .deprecated({ version: '25.3' }),\n  onDropdownClick: PropTypes.func\n    .description(\n      'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n    )\n    .defaultValue(() => null)\n    .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  'data-testid': PropTypes.string.description('root element data-testid'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n  ...globalAttributesPropTypes,\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillT.GroupProps>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nexport namespace DSPillT {\n  export interface DefaultProps {\n    innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n    applyTooltipOverflowWrap: boolean;\n    hasError: boolean;\n    ariaLabel: string;\n    size: 'm' | 's';\n    labelTruncated: boolean;\n    tooltipValue: string;\n    iconLeft: JSX.Element | null;\n    IconLeft: React.ComponentType<{ label: string }> | null;\n    IconRight: React.ComponentType<{ label: string }> | null;\n    iconRight: JSX.Element | null;\n    onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputPlaceholder: string;\n    onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n    onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputWidth: number;\n    inputRender: React.ComponentType<any>;\n    dropdownProps: DSDropdownMenuT.Props;\n    onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    tabIndex: TypescriptHelpersT.WCAGTabIndex;\n  }\n  export interface OptionalProps {\n    inputId?: string;\n    menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n    trailingComma?: boolean;\n  }\n  export interface RequiredProps {\n    label: string;\n    type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n  }\n\n  export interface Props\n    extends RequiredProps,\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends RequiredProps,\n      DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface DSPillButtonDefaultPropsT {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n  }\n  export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n    type?: 'left' | 'right' | 'only';\n    width?: string;\n    height?: string;\n    applyAriaDisabled?: boolean;\n  }\n  export interface InternalButtonProps\n    extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface DefaultGroupPropsT {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n  export interface GroupProps extends GlobalAttributesT {\n    width?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n  export interface InternalGroupProps extends GlobalAttributesT {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  applyTooltipOverflowWrap: false, // turn on for > 25.1\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  IconLeft: null,\n  IconRight: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  // TODO: remove DSInput in favor of V2\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  inputRender: DSInput,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: DSPillT.DSPillButtonDefaultPropsT = {\n  type: 'right',\n  width: '100%',\n  height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: DSPillT.DefaultGroupPropsT = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf([\n  'label',\n  'labelOnly',\n  'value',\n  'input',\n  'dropdown',\n  'removable',\n  'readonly',\n  'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('Label to show in the pill').isRequired,\n  type: pillTypes.description('The type of pill that you want to render').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n    .defaultValue(() => null),\n  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n  ariaLabel: PropTypes.string\n    .description('Aria label for the pill. If not provided we will use the label')\n    .defaultValue(''),\n  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n  iconLeft: PropTypes.node\n    .description('A component to show int the left of a readonly pill')\n    .defaultValue(null)\n    .deprecated({\n      version: '4.x',\n      message: 'Use IconLeft instead for accessibility reasons',\n    }),\n  IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n  IconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n  iconRight: PropTypes.node\n    .description('A component to show in the right of a readonly pill')\n    .defaultValue(null)\n    .deprecated({\n      version: '4.x',\n      message: 'Use IconRight instead for accessibility reasons',\n    }),\n  onRemove: PropTypes.func\n    .description('Callback triggered when removing a pill with the close icon')\n    .defaultValue(() => null),\n  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n  onInputChange: PropTypes.func\n    .description('Callback triggered when user provides input to the input pill')\n    .defaultValue(() => null),\n  onInputClear: PropTypes.func\n    .description('Callback triggered when the user clears an input pill')\n    .defaultValue(() => null),\n  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n  inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n  disabled: PropTypes.bool\n    .description('Whether the pill should be disabled. Only for value and removable pill')\n    .defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n  applyTooltipOverflowWrap: PropTypes.bool\n    .description(\n      'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n    )\n    .defaultValue(false),\n  hasError: PropTypes.bool\n    .description('Whether the pill should be in an error state. Only for input pill')\n    .defaultValue(false),\n  inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n  menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n    .description('Props for the menu button pill')\n    .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n  trailingComma: PropTypes.bool.description(\n    'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n  ),\n  dropdownProps: PropTypes.object\n    .description(\n      'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n    )\n    .defaultValue({})\n    .deprecated({ version: '25.3' }),\n  onDropdownClick: PropTypes.func\n    .description(\n      'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n    )\n    .defaultValue(() => null)\n    .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  'data-testid': PropTypes.string.description('root element data-testid'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n  ...globalAttributesPropTypes,\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillT.GroupProps>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js

@@ -37,7 +37,8 @@ const testOptionalProps = {
     },
     onActivateItem: () => {
     }
-  }
+  },
+  trailingComma: true
 };
 const testPartialDefaults = {
   innerRef: () => null,
@@ -67,6 +68,7 @@ const testCompleteDefaults = {
   innerRef: () => null,
   disabled: false,
   applyAriaDisabled: false,
+  readOnly: false,
   hasError: false,
   ariaLabel: "",
   size: "m",
@@ -108,6 +110,7 @@ const testExplicitDefinition = {
   innerRef: () => null,
   disabled: false,
   applyAriaDisabled: false,
+  readOnly: false,
   hasError: false,
   ariaLabel: "",
   size: "m",
@@ -126,6 +129,7 @@ const testExplicitDefinition = {
     isSkeleton: false,
     isOpened: false
   },
+  trailingComma: false,
   onDropdownClick: () => null,
   tabIndex: 0
 };
@@ -136,6 +140,7 @@ const testInferedTypeCompatibility = {
   innerRef: () => null,
   disabled: false,
   applyAriaDisabled: false,
+  readOnly: false,
   hasError: false,
   ariaLabel: "",
   size: "m",
@@ -154,6 +159,7 @@ const testInferedTypeCompatibility = {
     isSkeleton: false,
     isOpened: false
   },
+  trailingComma: false,
   onDropdownClick: () => null,
   tabIndex: 0
 };
@@ -164,6 +170,7 @@ const testDefinitionAsConst = {
   innerRef: () => null,
   disabled: false,
   applyAriaDisabled: false,
+  readOnly: false,
   hasError: false,
   ariaLabel: "",
   size: "m",
@@ -182,6 +189,7 @@ const testDefinitionAsConst = {
     isSkeleton: false,
     isOpened: false
   },
+  trailingComma: false,
   onDropdownClick: () => null,
   tabIndex: 0
 };
@@ -198,6 +206,7 @@ const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)
       innerRef: () => null,
       disabled: false,
       applyAriaDisabled: false,
+      readOnly: false,
       hasError: false,
       ariaLabel: "",
       size: "m",
@@ -215,6 +224,7 @@ const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)
         isSkeleton: false,
         isOpened: false
       },
+      trailingComma: false,
       onDropdownClick: () => null,
       tabIndex: 0,
       children: "Button Label"

package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-pills-v2-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPillV2 } from '../index.js';\nimport type { DSPillT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPillT.Props;\ntype ComponentPropsInternals = DSPillT.InternalProps;\ntype ComponentPropsDefaultProps = DSPillT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPillT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPillT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  type: 'value',\n  label: 'label',\n};\nconst testOptionalProps: Required<ComponentPropsOptionalProps> = {\n  inputId: 'dsId',\n  menuButtonProps: {\n    options: [],\n    selectedItems: [],\n    onItemSelected: () => {},\n    onActivateItem: () => {},\n  },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  ariaLabel: '',\n  size: 'm',\n  tooltipValue: '',\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  inputWidth: 72,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  IconLeft: () => null,\n  IconRight: () => null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n  applyTooltipOverflowWrap: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSPillV2 {...testExplicitDefinition} />\n    <DSPillV2 {...testInferedTypeCompatibility} />\n    <DSPillV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSPillV2\n      type=\"value\"\n      label=\"label\"\n      inputId=\"dsId\"\n      innerRef={() => null}\n      disabled={false}\n      applyAriaDisabled={false}\n      hasError={false}\n      ariaLabel=\"\"\n      size=\"m\"\n      labelTruncated\n      tooltipValue=\"\"\n      iconLeft={null}\n      iconRight={null}\n      onRemove={() => null}\n      inputPlaceholder=\"\"\n      onInputChange={() => null}\n      onInputClear={() => null}\n      inputWidth={72}\n      // inputRender={() => <input type=\"text\"></input>}\n      dropdownProps={{\n        options: [],\n        isSkeleton: false,\n        isOpened: false,\n      }}\n      onDropdownClick={() => null}\n      tabIndex={0}\n    >\n      Button Label\n    </DSPillV2>\n  </>\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPillV2 } from '../index.js';\nimport type { DSPillT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPillT.Props;\ntype ComponentPropsInternals = DSPillT.InternalProps;\ntype ComponentPropsDefaultProps = DSPillT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPillT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPillT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  type: 'value',\n  label: 'label',\n};\nconst testOptionalProps: Required<ComponentPropsOptionalProps> = {\n  inputId: 'dsId',\n  menuButtonProps: {\n    options: [],\n    selectedItems: [],\n    onItemSelected: () => {},\n    onActivateItem: () => {},\n  },\n  trailingComma: true,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  ariaLabel: '',\n  size: 'm',\n  tooltipValue: '',\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  inputWidth: 72,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  IconLeft: () => null,\n  IconRight: () => null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n  applyTooltipOverflowWrap: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  trailingComma: false,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  trailingComma: false,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  trailingComma: false,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSPillV2 {...testExplicitDefinition} />\n    <DSPillV2 {...testInferedTypeCompatibility} />\n    <DSPillV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSPillV2\n      type=\"value\"\n      label=\"label\"\n      inputId=\"dsId\"\n      innerRef={() => null}\n      disabled={false}\n      applyAriaDisabled={false}\n      readOnly={false}\n      hasError={false}\n      ariaLabel=\"\"\n      size=\"m\"\n      labelTruncated\n      tooltipValue=\"\"\n      iconLeft={null}\n      iconRight={null}\n      onRemove={() => null}\n      inputPlaceholder=\"\"\n      onInputChange={() => null}\n      onInputClear={() => null}\n      inputWidth={72}\n      // inputRender={() => <input type=\"text\"></input>}\n      dropdownProps={{\n        options: [],\n        isSkeleton: false,\n        isOpened: false,\n      }}\n      trailingComma={false}\n      onDropdownClick={() => null}\n      tabIndex={0}\n    >\n      Button Label\n    </DSPillV2>\n  </>\n);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/components/Pill.js

@@ -7,6 +7,7 @@ import {
   DropdownPill,
   InputPill,
   LabelPill,
+  LabelOnlyPill,
   MenuButtonPill,
   ReadOnlyPill,
   RemovablePill,
@@ -17,6 +18,7 @@ const pillComponentGetter = {
   menubutton: MenuButtonPill,
   input: InputPill,
   label: LabelPill,
+  labelOnly: LabelOnlyPill,
   readonly: ReadOnlyPill,
   removable: RemovablePill,
   value: ValuePill