@pega/cosmos-react-work 9.0.0-build.2.0 → 9.0.0-build.2.1

package/lib/components/Details/Details.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AActD,OAAO,KAAK,EACV,yBAAyB,EAG1B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,UAAU,sBAAuB,SAAQ,yBAAyB;IAChE,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;CACrB;AAED,UAAU,wBAAwB;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,EAAE,YAAY,CAAC;CACrB;AAKD,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,2BAA2B,UAAU,CAAC;AACnD,eAAO,MAAM,6BAA6B,SAAS,CAAC;AAEpD,eAAO,MAAM,0BAA0B,6EAkCrC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAYlC,CAAC;AAIH,eAAO,MAAM,kBAAkB,6EAW7B,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,0BAA0B,6EAItC,CAAC;AAEF,eAAO,MAAM,iBAAiB,gNAgI5B,CAAC;AAgBH,eAAO,MAAM,aAAa;cAA0B,YAAY,CAAC,SAAS,CAAC;SAmB1E,CAAC;AAIF,eAAO,MAAM,mBAAmB,mGAwH/B,CAAC"}
+{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AActD,OAAO,KAAK,EACV,yBAAyB,EAG1B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,UAAU,sBAAuB,SAAQ,yBAAyB;IAChE,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;CACrB;AAED,UAAU,wBAAwB;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,EAAE,YAAY,CAAC;CACrB;AAKD,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,2BAA2B,UAAU,CAAC;AACnD,eAAO,MAAM,6BAA6B,SAAS,CAAC;AAEpD,eAAO,MAAM,0BAA0B,6EAkCrC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAYlC,CAAC;AAIH,eAAO,MAAM,kBAAkB,6EAW7B,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,0BAA0B,6EAItC,CAAC;AAEF,eAAO,MAAM,iBAAiB,gNAgI5B,CAAC;AAgBH,eAAO,MAAM,aAAa;cAA0B,YAAY,CAAC,SAAS,CAAC;SAiC1E,CAAC;AAIF,eAAO,MAAM,mBAAmB,mGAwH/B,CAAC"}

package/lib/components/Details/Details.styles.js

@@ -206,7 +206,7 @@ const spacingTop = (spacing) => {
   `;
 };
 export const StyledDetails = styled.div(({ variant, theme }) => {
-    const { base: { spacing } } = theme;
+    const { base: { spacing }, components: { 'field-value-list': { inline: { detached } } } } = theme;
     return css `
       &:not(:first-child) {
         ${spacingTop(spacing)}
@@ -214,10 +214,19 @@ export const StyledDetails = styled.div(({ variant, theme }) => {
 
       ${variant === 'field-group' &&
         css `
-        + ${StyledDetailsList} {
+        & + ${StyledDetailsList} {
           margin-block-start: calc(1.5 * ${spacing});
         }
       `}
+
+      ${!variant &&
+        detached &&
+        css `
+        & + ${StyledDetailsList} {
+          margin-block-start: 0;
+          border-block-start: 0.0625rem dashed ${theme.base.palette['border-line']};
+        }
+      `};
     `;
 });
 StyledDetails.defaultProps = defaultThemeProp;

package/lib/components/Details/Details.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { useContext } from 'react';\nimport { transparentize } from 'polished';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\n  StyledIcon,\n  useDirection,\n  StyledButtonLink\n} from '@pega/cosmos-react-core';\nimport type {\n  StyledFieldValueListProps,\n  FontSize,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nimport type { DetailsProps } from './Details';\nimport DetailsContext from './DetailsContext';\n\ninterface StyledDetailsListProps extends StyledFieldValueListProps {\n  /** Whether individual list items all have labels stacks on top */\n  stacked?: boolean;\n  /** The character length applied to all list labels */\n  labelLength?: number;\n  /**\n   * Whether to apply narrow list styles\n   * @default false\n   */\n  narrow?: boolean;\n  theme: DefaultTheme;\n}\n\ninterface StyledDetailColumnsProps {\n  /**\n   * Number of columns in the list\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /**\n   * Arrangement of columns\n   */\n  arrangement?: DetailsProps['arrangement'];\n  /**\n   * Style variations\n   */\n  variant?: DetailsProps['variant'];\n  theme: DefaultTheme;\n}\n\ntype StyledDetailsListPropsWithDefaults = PropsWithDefaults<StyledDetailsListProps>;\n\nconst rowGapMultiplier = 1;\nexport const columnGapMultiplier = 5.5;\nexport const oneColumnDetailsColumnWidth = '100ch';\nexport const multiColumnDetailsColumnWidth = '80ch';\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n  const {\n    base: { spacing, animation, palette }\n  } = theme;\n  const { rtl } = useDirection();\n  const {\n    components: {\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n  return css`\n    width: 100%;\n    grid-column: 1 / -1;\n    margin-block-end: calc(${rowGapMultiplier} * ${spacing});\n    ${detached &&\n    css`\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      padding-bottom: calc(0.5 * ${spacing});\n    `}\n\n    ${StyledButtonLink} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n  const {\n    base: {\n      spacing,\n      'content-width': { xl }\n    }\n  } = theme;\n\n  return css`\n    max-width: ${xl};\n    margin-block-end: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumn = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(${rowGapMultiplier} * ${spacing});\n    width: 100%;\n  `;\n});\n\nStyledDetailColumn.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n  const {\n    base: { spacing, palette }\n  } = theme;\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    max-width: calc(${multiColumnDetailsColumnWidth} * 3 + ${columnGapMultiplier} * ${spacing} * 2);\n    padding-block-end: calc(1.5 * ${spacing});\n\n    dd {\n      font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n      font-weight: ${theme.components.text.h1['font-weight']};\n    }\n\n    + hr {\n      border-top: unset;\n      border-radius: unset;\n      border-style: unset;\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      margin-block-end: calc(1.5 * ${spacing});\n    }\n  `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledInlineFieldValueItem = styled.div`\n  > * {\n    min-width: 0;\n  }\n`;\n\nexport const StyledDetailsList = styled(StyledFieldValueList)<StyledDetailsListPropsWithDefaults>(({\n  stacked,\n  labelLength,\n  variant,\n  theme,\n  narrow = false\n}) => {\n  const {\n    base: { spacing, palette },\n    components: {\n      details: { 'field-label': fieldLabelPosition },\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n\n  const { inFieldGroup } = useContext(DetailsContext);\n  const labelTop = (stacked || fieldLabelPosition === 'stacked') && variant !== 'value-comparison';\n  const isValueComparison = variant === 'value-comparison';\n  const fieldValueGapMultiplier = 2;\n\n  return css`\n    /* Field Grid Styles */\n    display: flex;\n    flex-direction: column;\n    row-gap: ${detached ? 0 : `calc(${rowGapMultiplier} * ${spacing})`};\n    width: 100%;\n    max-width: ${oneColumnDetailsColumnWidth};\n    height: fit-content;\n\n    ${StyledFieldValue} {\n      word-break: break-word;\n      overflow: auto;\n\n      /* Negative margin to account for overflow clipping of focus indicator */\n      padding: 0.3rem;\n      margin: -0.3rem;\n    }\n\n    ${StyledInlineFieldValueItem}, ${StyledStackedFieldValue} {\n      width: 100%;\n    }\n\n    ${StyledInlineFieldValueItem} {\n      grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n      grid-template-rows: max-content;\n      column-gap: calc(${fieldValueGapMultiplier} * ${spacing});\n      ${detached &&\n      css`\n        padding-block: calc(0.5 * ${spacing});\n        &:not(:last-child) {\n          border-bottom: 0.0625rem dashed ${palette['border-line']};\n        }\n      `}\n\n      ${inFieldGroup &&\n      css`\n        grid-template-columns:\n          minmax(calc(14ch - ${spacing}), calc(${labelLength}ch - ${spacing}))\n          minmax(14ch, 1fr);\n      `};\n    }\n\n    ${StyledStackedFieldValue} {\n      ${detached &&\n      css`\n        padding-block: calc(0.5 * ${spacing});\n        &:not(:last-child) {\n          border-bottom: 0.0625rem dashed ${palette['border-line']};\n        }\n      `}\n    }\n\n    /* Stacked Label Styles */\n    ${labelTop &&\n    css`\n      grid-template-columns: minmax(0, 1fr);\n      row-gap: 0;\n\n      dt {\n        max-width: 100%;\n      }\n\n      ${!isValueComparison &&\n      css`\n        ${StyledStackedFieldValue}:not(:first-child) {\n          margin-block-start: calc(${rowGapMultiplier} * ${spacing});\n        }\n      `}\n    `}\n\n    /* Value Comparison Styles */\n      ${isValueComparison &&\n    css`\n      display: grid;\n      grid-template-columns: auto auto;\n      column-gap: 0;\n      row-gap: calc(0.5 * ${spacing});\n\n      > dd {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n      }\n    `}\n\n      /* Responsive behavior */\n      ${narrow &&\n    !labelTop &&\n    !isValueComparison &&\n    css`\n      ${StyledInlineFieldValueItem} {\n        grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);\n\n        ${inFieldGroup &&\n        css`\n          grid-template-columns:\n            minmax(0, calc(${labelLength}ch - ${spacing}))\n            minmax(calc(50% + 0.5 * ${spacing}), 1fr);\n        `}\n      }\n\n      dd {\n        min-width: 50%;\n      }\n    `}\n  `;\n});\n\nStyledDetailsList.defaultProps = defaultThemeProp;\n\nconst spacingTop = (spacing: string) => {\n  return css`\n    > ${StyledFieldValueGroupLabel} {\n      margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});\n    }\n\n    > ${StyledDetailDescription}:first-child {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n  `;\n};\n\nexport const StyledDetails = styled.div<{ variant?: DetailsProps['variant'] }>(\n  ({ variant, theme }) => {\n    const {\n      base: { spacing }\n    } = theme;\n\n    return css`\n      &:not(:first-child) {\n        ${spacingTop(spacing)}\n      }\n\n      ${variant === 'field-group' &&\n      css`\n        + ${StyledDetailsList} {\n          margin-block-start: calc(1.5 * ${spacing});\n        }\n      `}\n    `;\n  }\n);\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumns = styled.div<StyledDetailColumnsProps>(\n  ({ theme, arrangement, variant, columnCount = 1 }) => {\n    const {\n      base: {\n        palette: { 'border-line': borderColor },\n        spacing,\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        'form-control': { 'border-width': borderWidth },\n        button: { 'border-radius': buttonBorderRadius },\n        'field-value-list': {\n          inline: { detached }\n        }\n      }\n    } = theme;\n\n    return css`\n      width: 100%;\n\n      ${columnCount === 2 &&\n      !arrangement &&\n      css`\n        flex-wrap: wrap;\n      `}\n\n      ${columnCount === 1 &&\n      css`\n        flex-direction: column;\n        row-gap: calc(${rowGapMultiplier} * ${spacing});\n\n        ${variant === 'field-group' &&\n        css`\n          position: relative;\n          padding-inline-start: ${spacing};\n\n          ${detached &&\n          css`\n            padding-inline-start: calc(1.25 * ${spacing});\n          `}\n\n          &::before {\n            content: '';\n            position: absolute;\n            top: calc(-1 * ${spacing});\n            bottom: 0;\n            left: 0;\n            width: ${borderWidth};\n            background: ${borderColor};\n\n            ${detached &&\n            css`\n              top: 0;\n              width: 0.25rem;\n              background: ${transparentize(0.67, borderColor)};\n              border-radius: calc(${buttonBorderRadius} * ${baseBorderRadius});\n            `}\n          }\n        `}\n      `};\n\n      /* Column Widths */\n      > ${StyledDetailColumn} {\n        overflow: hidden;\n\n        /* Negative margin to account for overflow clipping of focus indicator */\n        padding: 0.3rem;\n        margin: -0.3rem;\n\n        ${columnCount === 3 &&\n        css`\n          width: ${multiColumnDetailsColumnWidth};\n          max-width: calc(33.33% - (${columnGapMultiplier} * ${spacing} * 2) / 3);\n        `}\n\n        ${columnCount === 2 &&\n        css`\n          width: calc(50% - (${columnGapMultiplier} * ${spacing}) / 2);\n          max-width: unset;\n\n          &:nth-child(3) > ${StyledDetails}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n\n        ${columnCount !== 1 &&\n        css`\n          ${arrangement === 'narrowWide' &&\n          css`\n            &:nth-child(2) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n\n          ${arrangement === 'wideNarrow' &&\n          css`\n            &:nth-child(1) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n        `}\n\n        ${columnCount === 1 &&\n        css`\n          width: 100%;\n          max-width: 100%;\n\n          &:not(:first-child) > ${StyledDetails}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n      }\n    `;\n  }\n);\n\nStyledDetailColumns.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { useContext } from 'react';\nimport { transparentize } from 'polished';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\n  StyledIcon,\n  useDirection,\n  StyledButtonLink\n} from '@pega/cosmos-react-core';\nimport type {\n  StyledFieldValueListProps,\n  FontSize,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nimport type { DetailsProps } from './Details';\nimport DetailsContext from './DetailsContext';\n\ninterface StyledDetailsListProps extends StyledFieldValueListProps {\n  /** Whether individual list items all have labels stacks on top */\n  stacked?: boolean;\n  /** The character length applied to all list labels */\n  labelLength?: number;\n  /**\n   * Whether to apply narrow list styles\n   * @default false\n   */\n  narrow?: boolean;\n  theme: DefaultTheme;\n}\n\ninterface StyledDetailColumnsProps {\n  /**\n   * Number of columns in the list\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /**\n   * Arrangement of columns\n   */\n  arrangement?: DetailsProps['arrangement'];\n  /**\n   * Style variations\n   */\n  variant?: DetailsProps['variant'];\n  theme: DefaultTheme;\n}\n\ntype StyledDetailsListPropsWithDefaults = PropsWithDefaults<StyledDetailsListProps>;\n\nconst rowGapMultiplier = 1;\nexport const columnGapMultiplier = 5.5;\nexport const oneColumnDetailsColumnWidth = '100ch';\nexport const multiColumnDetailsColumnWidth = '80ch';\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n  const {\n    base: { spacing, animation, palette }\n  } = theme;\n  const { rtl } = useDirection();\n  const {\n    components: {\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n  return css`\n    width: 100%;\n    grid-column: 1 / -1;\n    margin-block-end: calc(${rowGapMultiplier} * ${spacing});\n    ${detached &&\n    css`\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      padding-bottom: calc(0.5 * ${spacing});\n    `}\n\n    ${StyledButtonLink} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n  const {\n    base: {\n      spacing,\n      'content-width': { xl }\n    }\n  } = theme;\n\n  return css`\n    max-width: ${xl};\n    margin-block-end: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumn = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(${rowGapMultiplier} * ${spacing});\n    width: 100%;\n  `;\n});\n\nStyledDetailColumn.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n  const {\n    base: { spacing, palette }\n  } = theme;\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    max-width: calc(${multiColumnDetailsColumnWidth} * 3 + ${columnGapMultiplier} * ${spacing} * 2);\n    padding-block-end: calc(1.5 * ${spacing});\n\n    dd {\n      font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n      font-weight: ${theme.components.text.h1['font-weight']};\n    }\n\n    + hr {\n      border-top: unset;\n      border-radius: unset;\n      border-style: unset;\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      margin-block-end: calc(1.5 * ${spacing});\n    }\n  `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledInlineFieldValueItem = styled.div`\n  > * {\n    min-width: 0;\n  }\n`;\n\nexport const StyledDetailsList = styled(StyledFieldValueList)<StyledDetailsListPropsWithDefaults>(({\n  stacked,\n  labelLength,\n  variant,\n  theme,\n  narrow = false\n}) => {\n  const {\n    base: { spacing, palette },\n    components: {\n      details: { 'field-label': fieldLabelPosition },\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n\n  const { inFieldGroup } = useContext(DetailsContext);\n  const labelTop = (stacked || fieldLabelPosition === 'stacked') && variant !== 'value-comparison';\n  const isValueComparison = variant === 'value-comparison';\n  const fieldValueGapMultiplier = 2;\n\n  return css`\n    /* Field Grid Styles */\n    display: flex;\n    flex-direction: column;\n    row-gap: ${detached ? 0 : `calc(${rowGapMultiplier} * ${spacing})`};\n    width: 100%;\n    max-width: ${oneColumnDetailsColumnWidth};\n    height: fit-content;\n\n    ${StyledFieldValue} {\n      word-break: break-word;\n      overflow: auto;\n\n      /* Negative margin to account for overflow clipping of focus indicator */\n      padding: 0.3rem;\n      margin: -0.3rem;\n    }\n\n    ${StyledInlineFieldValueItem}, ${StyledStackedFieldValue} {\n      width: 100%;\n    }\n\n    ${StyledInlineFieldValueItem} {\n      grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n      grid-template-rows: max-content;\n      column-gap: calc(${fieldValueGapMultiplier} * ${spacing});\n      ${detached &&\n      css`\n        padding-block: calc(0.5 * ${spacing});\n        &:not(:last-child) {\n          border-bottom: 0.0625rem dashed ${palette['border-line']};\n        }\n      `}\n\n      ${inFieldGroup &&\n      css`\n        grid-template-columns:\n          minmax(calc(14ch - ${spacing}), calc(${labelLength}ch - ${spacing}))\n          minmax(14ch, 1fr);\n      `};\n    }\n\n    ${StyledStackedFieldValue} {\n      ${detached &&\n      css`\n        padding-block: calc(0.5 * ${spacing});\n        &:not(:last-child) {\n          border-bottom: 0.0625rem dashed ${palette['border-line']};\n        }\n      `}\n    }\n\n    /* Stacked Label Styles */\n    ${labelTop &&\n    css`\n      grid-template-columns: minmax(0, 1fr);\n      row-gap: 0;\n\n      dt {\n        max-width: 100%;\n      }\n\n      ${!isValueComparison &&\n      css`\n        ${StyledStackedFieldValue}:not(:first-child) {\n          margin-block-start: calc(${rowGapMultiplier} * ${spacing});\n        }\n      `}\n    `}\n\n    /* Value Comparison Styles */\n      ${isValueComparison &&\n    css`\n      display: grid;\n      grid-template-columns: auto auto;\n      column-gap: 0;\n      row-gap: calc(0.5 * ${spacing});\n\n      > dd {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n      }\n    `}\n\n      /* Responsive behavior */\n      ${narrow &&\n    !labelTop &&\n    !isValueComparison &&\n    css`\n      ${StyledInlineFieldValueItem} {\n        grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);\n\n        ${inFieldGroup &&\n        css`\n          grid-template-columns:\n            minmax(0, calc(${labelLength}ch - ${spacing}))\n            minmax(calc(50% + 0.5 * ${spacing}), 1fr);\n        `}\n      }\n\n      dd {\n        min-width: 50%;\n      }\n    `}\n  `;\n});\n\nStyledDetailsList.defaultProps = defaultThemeProp;\n\nconst spacingTop = (spacing: string) => {\n  return css`\n    > ${StyledFieldValueGroupLabel} {\n      margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});\n    }\n\n    > ${StyledDetailDescription}:first-child {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n  `;\n};\n\nexport const StyledDetails = styled.div<{ variant?: DetailsProps['variant'] }>(\n  ({ variant, theme }) => {\n    const {\n      base: { spacing },\n      components: {\n        'field-value-list': {\n          inline: { detached }\n        }\n      }\n    } = theme;\n\n    return css`\n      &:not(:first-child) {\n        ${spacingTop(spacing)}\n      }\n\n      ${variant === 'field-group' &&\n      css`\n        & + ${StyledDetailsList} {\n          margin-block-start: calc(1.5 * ${spacing});\n        }\n      `}\n\n      ${!variant &&\n      detached &&\n      css`\n        & + ${StyledDetailsList} {\n          margin-block-start: 0;\n          border-block-start: 0.0625rem dashed ${theme.base.palette['border-line']};\n        }\n      `};\n    `;\n  }\n);\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumns = styled.div<StyledDetailColumnsProps>(\n  ({ theme, arrangement, variant, columnCount = 1 }) => {\n    const {\n      base: {\n        palette: { 'border-line': borderColor },\n        spacing,\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        'form-control': { 'border-width': borderWidth },\n        button: { 'border-radius': buttonBorderRadius },\n        'field-value-list': {\n          inline: { detached }\n        }\n      }\n    } = theme;\n\n    return css`\n      width: 100%;\n\n      ${columnCount === 2 &&\n      !arrangement &&\n      css`\n        flex-wrap: wrap;\n      `}\n\n      ${columnCount === 1 &&\n      css`\n        flex-direction: column;\n        row-gap: calc(${rowGapMultiplier} * ${spacing});\n\n        ${variant === 'field-group' &&\n        css`\n          position: relative;\n          padding-inline-start: ${spacing};\n\n          ${detached &&\n          css`\n            padding-inline-start: calc(1.25 * ${spacing});\n          `}\n\n          &::before {\n            content: '';\n            position: absolute;\n            top: calc(-1 * ${spacing});\n            bottom: 0;\n            left: 0;\n            width: ${borderWidth};\n            background: ${borderColor};\n\n            ${detached &&\n            css`\n              top: 0;\n              width: 0.25rem;\n              background: ${transparentize(0.67, borderColor)};\n              border-radius: calc(${buttonBorderRadius} * ${baseBorderRadius});\n            `}\n          }\n        `}\n      `};\n\n      /* Column Widths */\n      > ${StyledDetailColumn} {\n        overflow: hidden;\n\n        /* Negative margin to account for overflow clipping of focus indicator */\n        padding: 0.3rem;\n        margin: -0.3rem;\n\n        ${columnCount === 3 &&\n        css`\n          width: ${multiColumnDetailsColumnWidth};\n          max-width: calc(33.33% - (${columnGapMultiplier} * ${spacing} * 2) / 3);\n        `}\n\n        ${columnCount === 2 &&\n        css`\n          width: calc(50% - (${columnGapMultiplier} * ${spacing}) / 2);\n          max-width: unset;\n\n          &:nth-child(3) > ${StyledDetails}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n\n        ${columnCount !== 1 &&\n        css`\n          ${arrangement === 'narrowWide' &&\n          css`\n            &:nth-child(2) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n\n          ${arrangement === 'wideNarrow' &&\n          css`\n            &:nth-child(1) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n        `}\n\n        ${columnCount === 1 &&\n        css`\n          width: 100%;\n          max-width: 100%;\n\n          &:not(:first-child) > ${StyledDetails}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n      }\n    `;\n  }\n);\n\nStyledDetailColumns.defaultProps = defaultThemeProp;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "9.0.0-build.2.0",
+  "version": "9.0.0-build.2.1",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,8 +14,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "9.0.0-build.2.0",
-    "@pega/cosmos-react-rte": "9.0.0-build.2.0",
+    "@pega/cosmos-react-core": "9.0.0-build.2.1",
+    "@pega/cosmos-react-rte": "9.0.0-build.2.1",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "@types/styled-components": "^5.1.26",