@procore/core-react 12.51.0 → 12.53.0

package/dist/PageLayout/PageLayout.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.styles.js","names":["styled","css","keyframes","StyledAnchorNavigation","StyledRequiredContainer","minScrimSize","colors","getShadow","spacing","isIE11","mediaBreakpointsDown","headerVerticalSpacing","sm","outerPageSpacing","lg","outerPageSpacingSmaller","md","StyledPageHeader","div","withConfig","displayName","componentId","tabletMd","_ref","$transparent","white","StyledPageHeaderItem","StyledPageTitle","StyledPageBreadcrumbs","attrs","as","StyledPageBanner","getActions","xl","StyledPageActions","StyledPageTabs","StyledBody","navigationWidth","StyledNavigation","StyledContent","panelWidth","zIndexes","panelWideScreen","panelNarrowScreen","footer","animationDuration","panel","StyledFooter","_ref2","$hasShadow","_ref3","$isAsideOpen","StyledAside","_ref4","$closed","$open","slideDistance","slideIn","slideOut","getPanelAnimation","_ref5","$opening","_ref6","$closing","StyledAsidePanel","_ref7","$rightOffset","_ref8","$altAnimation","_ref9","gray85","gray96","_ref0","$fillHeight","$minusHeight","_ref1","$offsetTop","StyledPageMain","p","$flex","_ref10","$tearsheetPlacement","includes","StyledPageContainer","StyledAsideFluidContainer","_ref11"],"sources":["../../src/PageLayout/PageLayout.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledAnchorNavigation } from '../AnchorNavigation/AnchorNavigation.styles'\nimport { StyledRequiredContainer } from '../Required/Required.styles'\nimport { minScrimSize } from '../Tearsheet/Tearsheet.styles'\nimport type { Placement } from '../Tearsheet/Tearsheet.types'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport { isIE11 } from '../_utils/isIE11'\nimport { mediaBreakpointsDown } from './PageLayout.utils'\n\nconst headerVerticalSpacing = spacing.sm\nconst outerPageSpacing = spacing.lg\nconst outerPageSpacingSmaller = spacing.md\n\nexport const StyledPageHeader = styled.div<{ $transparent?: boolean }>`\n  padding-top: ${headerVerticalSpacing}px;\n  padding-right: ${outerPageSpacing}px;\n  padding-left: ${outerPageSpacing}px;\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    padding-right: ${outerPageSpacingSmaller}px;\n    padding-left: ${outerPageSpacingSmaller}px;\n  }\n\n  ${({ $transparent }) =>\n    !$transparent &&\n    css`\n      ${getShadow(1.5)}\n      background-color: ${colors.white};\n    `}\n`\n\nexport const StyledPageHeaderItem = styled.div`\n  margin-top: ${headerVerticalSpacing}px;\n\n  &:first-child {\n    margin-top: 0;\n  }\n`\n\nexport const StyledPageTitle = styled(StyledPageHeaderItem)`\n  &:last-child {\n    padding-bottom: ${headerVerticalSpacing}px;\n  }\n`\n\nexport const StyledPageBreadcrumbs = styled(StyledPageHeaderItem).attrs({\n  as: 'nav',\n})``\n\nexport const StyledPageBanner = styled(StyledPageHeaderItem)``\n\nexport const getActions = () => css`\n  flex-shrink: 0;\n  padding-left: ${spacing.xl}px;\n\n  > button,\n  > a {\n    &:first-child {\n      margin-left: 0;\n    }\n\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nexport const StyledPageActions = styled.div`\n  ${getActions()}\n`\n\nexport const StyledPageTabs = styled(StyledPageHeaderItem)``\n\nexport const StyledBody = styled.div`\n  flex-grow: 1;\n  padding-top: ${outerPageSpacing}px;\n  padding-left: ${outerPageSpacing}px;\n  padding-right: ${outerPageSpacing}px;\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    padding-top: ${outerPageSpacingSmaller}px;\n    padding-left: ${outerPageSpacingSmaller}px;\n    padding-right: ${outerPageSpacingSmaller}px;\n  }\n\n  > ${StyledRequiredContainer} {\n    margin-bottom: 16px;\n  }\n`\n\nconst navigationWidth = 200\n\nexport const StyledNavigation = styled.div`\n  float: left;\n  max-height: 100vh;\n  min-width: ${navigationWidth}px;\n  overflow-y: auto;\n  position: sticky;\n  top: 0;\n  width: ${navigationWidth}px;\n\n  ${StyledAnchorNavigation} {\n    padding: 20px ${spacing.sm}px 0 0;\n  }\n\n  @media screen and (max-width: 1024px) {\n    display: none;\n  }\n`\n\nexport const StyledContent = styled.div``\n\nconst panelWidth = 400\nconst zIndexes = {\n  panelWideScreen: 3,\n  panelNarrowScreen: 1,\n  footer: 2,\n}\n\nexport const animationDuration = {\n  panel: 600,\n}\n\nexport const StyledFooter = styled.div<{\n  $isAsideOpen: boolean\n  $hasShadow: boolean\n}>`\n  background-color: ${colors.white};\n\n  ${({ $hasShadow }) => $hasShadow && getShadow(2, 'top')}\n\n  position: sticky;\n  bottom: 0;\n  z-index: ${zIndexes.footer};\n\n  ${({ $isAsideOpen }) =>\n    $isAsideOpen &&\n    css`\n      @media ${mediaBreakpointsDown.tabletMd} {\n        z-index: ${zIndexes.footer};\n      }\n    `}\n`\n\nexport const StyledAside = styled.div<{ $open: boolean; $closed: boolean }>`\n  ${({ $closed, $open }) =>\n    isIE11() &&\n    css`\n      display: flex;\n      flex-grow: 0;\n      flex-shrink: 0;\n      flex-basis: 0;\n\n      transition: flex-basis ${animationDuration.panel}ms;\n\n      ${$closed &&\n      css`\n        flex-basis: 0;\n      `}\n\n      ${$open &&\n      css`\n        flex-basis: ${panelWidth}px;\n      `}\n    `}\n\n  // remove aside block from the main flow on smaller screens, enabling overlay-like positioning\n  @media ${mediaBreakpointsDown.tabletMd} {\n    position: absolute;\n    right: 0;\n  }\n`\n\nconst slideDistance = '100%'\n\nconst slideIn = keyframes`\n  from {\n    transform: translateX(${slideDistance});\n  }\n  to {\n    transform: translateX(0);\n  }\n`\n\nconst slideOut = keyframes`\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(${slideDistance});\n  }\n`\n\nconst getPanelAnimation = () => css<{ $opening: boolean; $closing: boolean }>`\n  ${({ $opening }) =>\n    $opening &&\n    css`\n      animation: ${slideIn} ease-out ${animationDuration.panel}ms;\n    `}\n\n  ${({ $closing }) =>\n    $closing &&\n    css`\n      animation: ${slideOut} ease-out ${animationDuration.panel}ms;\n    `}\n`\n\nexport const StyledAsidePanel = styled.div<{\n  $offsetTop: number | null\n  $minusHeight: number\n  $closing: boolean\n  $closed: boolean\n  $opening: boolean\n  $rightOffset: number\n  $altAnimation: boolean\n  $fillHeight?: boolean\n}>`\n  // position panel behind the page sticky footer on smaller screens\n  ${({ $rightOffset }) => css`\n    @media ${mediaBreakpointsDown.tabletMd} {\n      ${getShadow(2)}\n      border-left: 0;\n      z-index: ${zIndexes.panelNarrowScreen};\n      right: ${$rightOffset}px;\n    }\n  `}\n\n  /*\n   * On smaller screens, the panel is positioned absolutely,\n   *  so the animation needs to happen here\n  */\n  @media ${mediaBreakpointsDown.tabletMd} {\n    ${getPanelAnimation()}\n  }\n\n  ${({ $altAnimation }) => $altAnimation && getPanelAnimation()}\n\n  ${({ $closed }) =>\n    $closed &&\n    css`\n      display: none;\n    `}\n\n  border-left: 1px solid ${colors.gray85};\n  width: ${panelWidth}px;\n  position: fixed;\n  background-color: ${colors.gray96};\n\n  overflow: auto;\n  z-index: ${zIndexes.panelWideScreen};\n\n  ${({ $fillHeight, $minusHeight }) => {\n    return $fillHeight\n      ? css`\n          height: 100%;\n        `\n      : css`\n          height: calc(100dvh - ${$minusHeight}px);\n        `\n  }}\n\n  ${({ $offsetTop }) =>\n    $offsetTop !== null &&\n    css`\n      top: ${$offsetTop}px;\n    `}\n`\n\nexport const StyledPageMain = styled.div<{\n  $flex?: boolean\n  $fillHeight?: boolean\n  $tearsheetPlacement: Placement | null\n}>`\n  position: relative;\n  max-width: 100%;\n  background-color: ${colors.gray96};\n\n  ${() =>\n    isIE11() &&\n    css`\n      flex: 1 0 0%;\n    `}\n\n  ${(p) => (p.$fillHeight ? `height: 100%;` : '')}\n  ${(p) => (p.$flex ? `display: flex; flex-direction: column;` : '')}\n\n  ${({ $tearsheetPlacement }) => {\n    if (!$tearsheetPlacement) {\n      return ''\n    }\n\n    if (['top', 'bottom'].includes($tearsheetPlacement)) {\n      return css`\n        min-height: calc(100vh - ${minScrimSize}px);\n      `\n    }\n\n    return css`\n      min-height: 100vh;\n    `\n  }}\n`\n\nexport const StyledPageContainer = styled.div<{\n  $fillHeight?: boolean\n}>`\n  display: grid;\n  grid-template-columns: 1fr auto;\n\n  height: ${(p) => (p.$fillHeight ? '100%' : '')};\n  ${() =>\n    isIE11() &&\n    css`\n      display: flex;\n      flex-wrap: wrap;\n    `}\n`\n\nexport const StyledAsideFluidContainer = styled.div<{\n  $open: boolean\n  $closed: boolean\n}>`\n  ${({ $closed, $open }) =>\n    !isIE11() &&\n    css`\n      transition: width ${animationDuration.panel}ms;\n\n      ${$closed &&\n      css`\n        width: 0;\n      `}\n\n      ${$open &&\n      css`\n        width: ${panelWidth}px;\n      `}\n    `}\n`\n"],"mappings":"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"}
+{"version":3,"file":"PageLayout.styles.js","names":["styled","css","keyframes","StyledAnchorNavigation","StyledRequiredContainer","minScrimSize","colors","getShadow","spacing","isIE11","mediaBreakpointsDown","headerVerticalSpacing","sm","outerPageSpacing","lg","outerPageSpacingSmaller","md","StyledPageHeader","div","withConfig","displayName","componentId","tabletMd","_ref","$transparent","white","StyledPageHeaderItem","StyledPageTitle","StyledPageBreadcrumbs","attrs","as","StyledPageBanner","getActions","xl","StyledPageActions","StyledPageTabs","StyledBody","navigationWidth","StyledNavigation","StyledContent","panelWidth","zIndexes","panelWideScreen","panelNarrowScreen","footer","animationDuration","panel","StyledFooter","_ref2","$hasShadow","_ref3","$isAsideOpen","StyledAside","_ref4","$closed","$open","slideDistance","slideIn","slideOut","getPanelAnimation","_ref5","$opening","_ref6","$closing","StyledAsidePanel","_ref7","$rightOffset","_ref8","$altAnimation","_ref9","gray85","gray96","_ref0","$minusHeight","_ref1","$offsetTop","StyledPageMain","p","$fillHeight","$flex","_ref10","$tearsheetPlacement","includes","StyledPageContainer","StyledAsideFluidContainer","_ref11"],"sources":["../../src/PageLayout/PageLayout.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledAnchorNavigation } from '../AnchorNavigation/AnchorNavigation.styles'\nimport { StyledRequiredContainer } from '../Required/Required.styles'\nimport { minScrimSize } from '../Tearsheet/Tearsheet.styles'\nimport type { Placement } from '../Tearsheet/Tearsheet.types'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport { isIE11 } from '../_utils/isIE11'\nimport { mediaBreakpointsDown } from './PageLayout.utils'\n\nconst headerVerticalSpacing = spacing.sm\nconst outerPageSpacing = spacing.lg\nconst outerPageSpacingSmaller = spacing.md\n\nexport const StyledPageHeader = styled.div<{ $transparent?: boolean }>`\n  padding-top: ${headerVerticalSpacing}px;\n  padding-right: ${outerPageSpacing}px;\n  padding-left: ${outerPageSpacing}px;\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    padding-right: ${outerPageSpacingSmaller}px;\n    padding-left: ${outerPageSpacingSmaller}px;\n  }\n\n  ${({ $transparent }) =>\n    !$transparent &&\n    css`\n      ${getShadow(1.5)}\n      background-color: ${colors.white};\n    `}\n`\n\nexport const StyledPageHeaderItem = styled.div`\n  margin-top: ${headerVerticalSpacing}px;\n\n  &:first-child {\n    margin-top: 0;\n  }\n`\n\nexport const StyledPageTitle = styled(StyledPageHeaderItem)`\n  &:last-child {\n    padding-bottom: ${headerVerticalSpacing}px;\n  }\n`\n\nexport const StyledPageBreadcrumbs = styled(StyledPageHeaderItem).attrs({\n  as: 'nav',\n})``\n\nexport const StyledPageBanner = styled(StyledPageHeaderItem)``\n\nexport const getActions = () => css`\n  flex-shrink: 0;\n  padding-left: ${spacing.xl}px;\n\n  > button,\n  > a {\n    &:first-child {\n      margin-left: 0;\n    }\n\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nexport const StyledPageActions = styled.div`\n  ${getActions()}\n`\n\nexport const StyledPageTabs = styled(StyledPageHeaderItem)``\n\nexport const StyledBody = styled.div`\n  flex-grow: 1;\n  padding-top: ${outerPageSpacing}px;\n  padding-left: ${outerPageSpacing}px;\n  padding-right: ${outerPageSpacing}px;\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    padding-top: ${outerPageSpacingSmaller}px;\n    padding-left: ${outerPageSpacingSmaller}px;\n    padding-right: ${outerPageSpacingSmaller}px;\n  }\n\n  > ${StyledRequiredContainer} {\n    margin-bottom: 16px;\n  }\n`\n\nconst navigationWidth = 200\n\nexport const StyledNavigation = styled.div`\n  float: left;\n  max-height: 100vh;\n  min-width: ${navigationWidth}px;\n  overflow-y: auto;\n  position: sticky;\n  top: 0;\n  width: ${navigationWidth}px;\n\n  ${StyledAnchorNavigation} {\n    padding: 20px ${spacing.sm}px 0 0;\n  }\n\n  @media screen and (max-width: 1024px) {\n    display: none;\n  }\n`\n\nexport const StyledContent = styled.div``\n\nconst panelWidth = 400\nconst zIndexes = {\n  panelWideScreen: 3,\n  panelNarrowScreen: 1,\n  footer: 2,\n}\n\nexport const animationDuration = {\n  panel: 600,\n}\n\nexport const StyledFooter = styled.div<{\n  $isAsideOpen: boolean\n  $hasShadow: boolean\n}>`\n  background-color: ${colors.white};\n\n  ${({ $hasShadow }) => $hasShadow && getShadow(2, 'top')}\n\n  position: sticky;\n  bottom: 0;\n  z-index: ${zIndexes.footer};\n\n  ${({ $isAsideOpen }) =>\n    $isAsideOpen &&\n    css`\n      @media ${mediaBreakpointsDown.tabletMd} {\n        z-index: ${zIndexes.footer};\n      }\n    `}\n`\n\nexport const StyledAside = styled.div<{ $open: boolean; $closed: boolean }>`\n  ${({ $closed, $open }) =>\n    isIE11() &&\n    css`\n      display: flex;\n      flex-grow: 0;\n      flex-shrink: 0;\n      flex-basis: 0;\n\n      transition: flex-basis ${animationDuration.panel}ms;\n\n      ${$closed &&\n      css`\n        flex-basis: 0;\n      `}\n\n      ${$open &&\n      css`\n        flex-basis: ${panelWidth}px;\n      `}\n    `}\n\n  // remove aside block from the main flow on smaller screens, enabling overlay-like positioning\n  @media ${mediaBreakpointsDown.tabletMd} {\n    position: absolute;\n    right: 0;\n  }\n`\n\nconst slideDistance = '100%'\n\nconst slideIn = keyframes`\n  from {\n    transform: translateX(${slideDistance});\n  }\n  to {\n    transform: translateX(0);\n  }\n`\n\nconst slideOut = keyframes`\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(${slideDistance});\n  }\n`\n\nconst getPanelAnimation = () => css<{ $opening: boolean; $closing: boolean }>`\n  ${({ $opening }) =>\n    $opening &&\n    css`\n      animation: ${slideIn} ease-out ${animationDuration.panel}ms;\n    `}\n\n  ${({ $closing }) =>\n    $closing &&\n    css`\n      animation: ${slideOut} ease-out ${animationDuration.panel}ms;\n    `}\n`\n\nexport const StyledAsidePanel = styled.div<{\n  $offsetTop: number | null\n  $minusHeight: number\n  $closing: boolean\n  $closed: boolean\n  $opening: boolean\n  $rightOffset: number\n  $altAnimation: boolean\n}>`\n  // position panel behind the page sticky footer on smaller screens\n  ${({ $rightOffset }) => css`\n    @media ${mediaBreakpointsDown.tabletMd} {\n      ${getShadow(2)}\n      border-left: 0;\n      z-index: ${zIndexes.panelNarrowScreen};\n      right: ${$rightOffset}px;\n    }\n  `}\n\n  /*\n   * On smaller screens, the panel is positioned absolutely,\n   *  so the animation needs to happen here\n  */\n  @media ${mediaBreakpointsDown.tabletMd} {\n    ${getPanelAnimation()}\n  }\n\n  ${({ $altAnimation }) => $altAnimation && getPanelAnimation()}\n\n  ${({ $closed }) =>\n    $closed &&\n    css`\n      display: none;\n    `}\n\n  border-left: 1px solid ${colors.gray85};\n  width: ${panelWidth}px;\n  position: fixed;\n  background-color: ${colors.gray96};\n\n  overflow: auto;\n  z-index: ${zIndexes.panelWideScreen};\n  ${({ $minusHeight }) =>\n    css`\n      height: calc(100dvh - ${$minusHeight}px);\n    `}\n\n  ${({ $offsetTop }) =>\n    $offsetTop !== null &&\n    css`\n      top: ${$offsetTop}px;\n    `}\n`\n\nexport const StyledPageMain = styled.div<{\n  $flex?: boolean\n  $fillHeight?: boolean\n  $tearsheetPlacement: Placement | null\n}>`\n  position: relative;\n  max-width: 100%;\n  background-color: ${colors.gray96};\n\n  ${() =>\n    isIE11() &&\n    css`\n      flex: 1 0 0%;\n    `}\n\n  ${(p) => (p.$fillHeight ? `height: 100%;` : '')}\n  ${(p) => (p.$flex ? `display: flex; flex-direction: column;` : '')}\n\n  ${({ $tearsheetPlacement }) => {\n    if (!$tearsheetPlacement) {\n      return ''\n    }\n\n    if (['top', 'bottom'].includes($tearsheetPlacement)) {\n      return css`\n        min-height: calc(100vh - ${minScrimSize}px);\n      `\n    }\n\n    return css`\n      min-height: 100vh;\n    `\n  }}\n`\n\nexport const StyledPageContainer = styled.div<{\n  $fillHeight?: boolean\n}>`\n  display: grid;\n  grid-template-columns: 1fr auto;\n\n  height: ${(p) => (p.$fillHeight ? '100%' : '')};\n  ${() =>\n    isIE11() &&\n    css`\n      display: flex;\n      flex-wrap: wrap;\n    `}\n`\n\nexport const StyledAsideFluidContainer = styled.div<{\n  $open: boolean\n  $closed: boolean\n}>`\n  ${({ $closed, $open }) =>\n    !isIE11() &&\n    css`\n      transition: width ${animationDuration.panel}ms;\n\n      ${$closed &&\n      css`\n        width: 0;\n      `}\n\n      ${$open &&\n      css`\n        width: ${panelWidth}px;\n      `}\n    `}\n`\n"],"mappings":"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"}

package/dist/PageLayout/PageLayout.types.d.ts

@@ -39,20 +39,28 @@ export interface PageHeaderProps extends PageComponentProps {
 }
 export interface PageAsideProps extends PageComponentProps {
     /**
-     * @description If the aside block should be open
+     * If the aside block should be open
      * @since 10.19.0
      */
     open?: boolean;
     /**
-     * @description When true, moves keyboard focus to the aside container when it opens (on a closed -> open transition).
+     * When true, moves keyboard focus to the aside container when it opens (on a closed -> open transition).
+     * @a11y Moves focus into the aside as it appears, so keyboard and screen reader users are not left behind on the trigger.
      * @since 12.36.1
      */
     focusOnOpen?: boolean;
     /**
-     * @description When true, restores focus back to the element that was focused before the aside opened (on an open -> closed transition).
+     * When true, restores focus back to the element that was focused before the aside opened (on an open -> closed transition).
+     * @a11y Returns keyboard focus to the triggering control when the aside closes, so users are not dropped at the top of the page.
      * @since 12.36.1
      */
     restoreFocusOnClose?: boolean;
+    /**
+     * When true, contains keyboard focus inside the aside while it is open, so focus cannot move to the rest of the page (a focus trap). Backed by the `FocusScope` `contain` behavior.
+     * @a11y Use for modal-like asides so focus stays inside the panel even when the focused element is removed (e.g. selecting a filter with no results).
+     * @since 12.51.0
+     */
+    containFocus?: boolean;
 }
 export interface PageMainProps extends PageComponentProps {
     /**

package/dist/PageLayout/PageLayout.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.types.js","names":[],"sources":["../../src/PageLayout/PageLayout.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { AnchorNavigationSection } from '../AnchorNavigation/AnchorNavigation.types'\nimport type { Props } from '../_utils/types'\n\ninterface CustomizableStyledComponent {\n  as?: string | React.ComponentType<any>\n}\n\nexport interface PageComponentProps\n  extends CustomizableStyledComponent,\n    Props,\n    React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface PageProps extends PageComponentProps {\n  /**\n   * Opt-in: makes Page fill its parent height and propagates that layout behavior\n   * to Page.Main and Page.Aside to improve sticky footer/page height behavior.\n   *\n   * @since 12.45.0\n   */\n  fillHeight?: boolean\n}\n\nexport interface PageBodyProps extends PageComponentProps {}\n\nexport interface PageBodyNavigationProps\n  extends Omit<React.HtmlHTMLAttributes<HTMLUListElement>, 'onSelect'> {\n  sections?: AnchorNavigationSection[]\n  selected?: string\n  onSelect?: (id: string) => void\n  minSections?: number\n}\n\nexport interface PageBodyProps extends PageComponentProps {\n  /**\n   * @description If the content of the Page has required fields\n   * @since 12.48.0\n   */\n  required?: boolean\n}\n\nexport interface PageHeaderProps extends PageComponentProps {\n  /**\n   * @description If the header should have no background.\n   * @since 10.19.0\n   */\n  transparent?: boolean\n}\n\nexport interface PageAsideProps extends PageComponentProps {\n  /**\n   * @description If the aside block should be open\n   * @since 10.19.0\n   */\n  open?: boolean\n  /**\n   * @description When true, moves keyboard focus to the aside container when it opens (on a closed -> open transition).\n   * @since 12.36.1\n   */\n  focusOnOpen?: boolean\n  /**\n   * @description When true, restores focus back to the element that was focused before the aside opened (on an open -> closed transition).\n   * @since 12.36.1\n   */\n  restoreFocusOnClose?: boolean\n}\n\nexport interface PageMainProps extends PageComponentProps {\n  /**\n   * Sets display flex column on the element and makes the body grow.\n   *\n   * Helps with small content and pushing the footer to the bottom of the screen.\n   *\n   * @since 12.45.0\n   */\n  flex?: boolean\n}\n\nexport interface PageFooterProps extends PageComponentProps {}\n\nexport type PageAsideAnimationStatus = 'open' | 'closed' | 'opening' | 'closing'\n"],"mappings":""}
+{"version":3,"file":"PageLayout.types.js","names":[],"sources":["../../src/PageLayout/PageLayout.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { AnchorNavigationSection } from '../AnchorNavigation/AnchorNavigation.types'\nimport type { Props } from '../_utils/types'\n\ninterface CustomizableStyledComponent {\n  as?: string | React.ComponentType<any>\n}\n\nexport interface PageComponentProps\n  extends CustomizableStyledComponent,\n    Props,\n    React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface PageProps extends PageComponentProps {\n  /**\n   * Opt-in: makes Page fill its parent height and propagates that layout behavior\n   * to Page.Main and Page.Aside to improve sticky footer/page height behavior.\n   *\n   * @since 12.45.0\n   */\n  fillHeight?: boolean\n}\n\nexport interface PageBodyProps extends PageComponentProps {}\n\nexport interface PageBodyNavigationProps\n  extends Omit<React.HtmlHTMLAttributes<HTMLUListElement>, 'onSelect'> {\n  sections?: AnchorNavigationSection[]\n  selected?: string\n  onSelect?: (id: string) => void\n  minSections?: number\n}\n\nexport interface PageBodyProps extends PageComponentProps {\n  /**\n   * @description If the content of the Page has required fields\n   * @since 12.48.0\n   */\n  required?: boolean\n}\n\nexport interface PageHeaderProps extends PageComponentProps {\n  /**\n   * @description If the header should have no background.\n   * @since 10.19.0\n   */\n  transparent?: boolean\n}\n\nexport interface PageAsideProps extends PageComponentProps {\n  /**\n   * If the aside block should be open\n   * @since 10.19.0\n   */\n  open?: boolean\n  /**\n   * When true, moves keyboard focus to the aside container when it opens (on a closed -> open transition).\n   * @a11y Moves focus into the aside as it appears, so keyboard and screen reader users are not left behind on the trigger.\n   * @since 12.36.1\n   */\n  focusOnOpen?: boolean\n  /**\n   * When true, restores focus back to the element that was focused before the aside opened (on an open -> closed transition).\n   * @a11y Returns keyboard focus to the triggering control when the aside closes, so users are not dropped at the top of the page.\n   * @since 12.36.1\n   */\n  restoreFocusOnClose?: boolean\n  /**\n   * When true, contains keyboard focus inside the aside while it is open, so focus cannot move to the rest of the page (a focus trap). Backed by the `FocusScope` `contain` behavior.\n   * @a11y Use for modal-like asides so focus stays inside the panel even when the focused element is removed (e.g. selecting a filter with no results).\n   * @since 12.51.0\n   */\n  containFocus?: boolean\n}\n\nexport interface PageMainProps extends PageComponentProps {\n  /**\n   * Sets display flex column on the element and makes the body grow.\n   *\n   * Helps with small content and pushing the footer to the bottom of the screen.\n   *\n   * @since 12.45.0\n   */\n  flex?: boolean\n}\n\nexport interface PageFooterProps extends PageComponentProps {}\n\nexport type PageAsideAnimationStatus = 'open' | 'closed' | 'opening' | 'closing'\n"],"mappings":""}

package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.styles.js

@@ -3,6 +3,6 @@ import { colors } from '../../_styles/colors';
 import { spacing } from '../../_styles/spacing';
 export var StyledPageFooter = /*#__PURE__*/styled.footer.withConfig({
   displayName: "StyledPageFooter",
-  componentId: "core-12_51_0__sc-1f0zfyf-0"
+  componentId: "core-12_53_0__sc-1f0zfyf-0"
 })(["display:flex;align-items:center;justify-content:space-between;background-color:", ";padding:", "px;width:100%;box-shadow:0 -2px 6px 0 rgba(0,0,0,0.1);position:sticky;bottom:0;"], colors.white, spacing.lg);
 //# sourceMappingURL=PageFooterTemplate.styles.js.map

package/dist/PageTemplate/PageHeaderTemplate/PageHeaderTemplate.styles.js

@@ -5,16 +5,16 @@ import { colors } from '../../_styles/colors';
 import { spacing } from '../../_styles/spacing';
 export var StyledPageHeader = /*#__PURE__*/styled(Page.Header).withConfig({
   displayName: "StyledPageHeader",
-  componentId: "core-12_51_0__sc-1d5kop0-0"
+  componentId: "core-12_53_0__sc-1d5kop0-0"
 })(["border-bottom:1px solid ", ";padding-top:", "px;", ""], colors.gray85, spacing.lg, function (p) {
   return p.$hasPaddingBottom && "padding-bottom: ".concat(spacing.lg, "px;");
 });
 export var StyledActions = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledActions",
-  componentId: "core-12_51_0__sc-1d5kop0-1"
+  componentId: "core-12_53_0__sc-1d5kop0-1"
 })(["width:fit-content;"]);
 export var StyledToggleActionBox = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledToggleActionBox",
-  componentId: "core-12_51_0__sc-1d5kop0-2"
+  componentId: "core-12_53_0__sc-1d5kop0-2"
 })(["bottom:", "px;position:relative;padding-left:48px;"], spacing.lg);
 //# sourceMappingURL=PageHeaderTemplate.styles.js.map

package/dist/PageTemplate/PagePaneTemplate/PagePaneTemplate.styles.js

@@ -10,10 +10,10 @@ var panelWidthSmall = 360;
 export var mobileBreakpoint = 440;
 export var StyledPageAside = /*#__PURE__*/styled(Page.Aside).withConfig({
   displayName: "StyledPageAside",
-  componentId: "core-12_51_0__sc-1p7nu53-0"
+  componentId: "core-12_53_0__sc-1p7nu53-0"
 })(["position:sticky;top:0;right:0;max-height:100vh;width:100%;height:100%;@media ", "{position:sticky;max-width:", "px;flex-basis:", "px;}", "{@media ", "{max-width:", "px;}}", "{position:sticky;top:0;right:0;box-shadow:none;animation:none;padding-bottom:68px;@media ", "{width:", "px;}@media (max-width:", "px){padding-bottom:0;}}", "{position:fixed;bottom:0;display:flex;width:100%;max-width:400px;@media ", "{max-width:", "px;}}"], mediaBreakpointsDown.tabletLg, panelWidthSmall, panelWidthSmall, StyledAsideFluidContainer, mediaBreakpointsDown.tabletLg, panelWidthSmall, StyledAsidePanel, mediaBreakpointsDown.tabletLg, panelWidthSmall, mobileBreakpoint, StyledPanelFooter, mediaBreakpointsDown.tabletLg, panelWidthSmall);
 export var StyledModal = /*#__PURE__*/styled(Modal).withConfig({
   displayName: "StyledModal",
-  componentId: "core-12_51_0__sc-1p7nu53-1"
+  componentId: "core-12_53_0__sc-1p7nu53-1"
 })(["top:", "px;bottom:", "px;max-width:416px;transform:none;", "{max-height:100vh;}@media (max-width:", "px){top:0;bottom:0;left:0;right:0;max-width:100%;}"], spacing.md, spacing.md, StyledModalContent, mobileBreakpoint);
 //# sourceMappingURL=PagePaneTemplate.styles.js.map

package/dist/PageTemplate/PageTemplate/PageTemplate.styles.js

@@ -5,14 +5,14 @@ import { spacing } from '../../_styles/spacing';
 export var mobileBreakpoint = 440;
 export var StyledPageWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageWrapper",
-  componentId: "core-12_51_0__sc-uuo7st-0"
+  componentId: "core-12_53_0__sc-uuo7st-0"
 })(["display:flex;flex-direction:column;"]);
 export var StyledPageBodyWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageBodyWrapper",
-  componentId: "core-12_51_0__sc-uuo7st-1"
+  componentId: "core-12_53_0__sc-uuo7st-1"
 })(["display:grid;grid-template-columns:1fr auto;"]);
 export var StyledPageBody = /*#__PURE__*/styled(Page.Body).withConfig({
   displayName: "StyledPageBody",
-  componentId: "core-12_51_0__sc-uuo7st-2"
+  componentId: "core-12_53_0__sc-uuo7st-2"
 })(["padding-bottom:", "px;@media ", "{padding:", "px;}"], spacing.lg, mediaBreakpointsDown.desktopMd, spacing.md);
 //# sourceMappingURL=PageTemplate.styles.js.map

package/dist/Pagination/Pagination.styles.js

@@ -5,22 +5,22 @@ import { Typography } from '../Typography/Typography';
 import { spacing } from '../_styles/spacing';
 export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_51_0__sc-fy34i1-0"
+  componentId: "core-12_53_0__sc-fy34i1-0"
 })(["display:flex;align-items:center;"]);
 export var StyledPageCount = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledPageCount",
-  componentId: "core-12_51_0__sc-fy34i1-1"
+  componentId: "core-12_53_0__sc-fy34i1-1"
 })(["margin-right:", "px;"], spacing.xl);
 export var StyledCurrentPage = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledCurrentPage",
-  componentId: "core-12_51_0__sc-fy34i1-2"
+  componentId: "core-12_53_0__sc-fy34i1-2"
 })(["margin-right:", "px;"], spacing.sm);
 export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledButton",
-  componentId: "core-12_51_0__sc-fy34i1-3"
+  componentId: "core-12_53_0__sc-fy34i1-3"
 })(["margin-left:", "px;"], spacing.sm);
 export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledOverlay",
-  componentId: "core-12_51_0__sc-fy34i1-4"
+  componentId: "core-12_53_0__sc-fy34i1-4"
 })(["min-height:80px;max-height:300px;max-width:248px;"]);
 //# sourceMappingURL=Pagination.styles.js.map

package/dist/Panel/Panel.styles.js

@@ -12,15 +12,15 @@ var gutter = /*#__PURE__*/css(["> * + *{margin-left:", "px;}"], spacing.sm);
 var panel = /*#__PURE__*/css(["display:flex;padding:", "px;background:", ";"], spacing.lg, colors.white);
 export var StyledHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeader",
-  componentId: "core-12_51_0__sc-lidix2-0"
+  componentId: "core-12_53_0__sc-lidix2-0"
 })(["border-bottom:1px solid ", ";", ""], colors.gray85, panel);
 export var StyledTitle = /*#__PURE__*/styled(H2).withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_51_0__sc-lidix2-1"
+  componentId: "core-12_53_0__sc-lidix2-1"
 })(["flex-grow:1;"]);
 export var StyledHeaderBackAction = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderBackAction",
-  componentId: "core-12_51_0__sc-lidix2-2"
+  componentId: "core-12_53_0__sc-lidix2-2"
 })(["transition:all 300ms ease-out;flex-shrink:0;width:", "px;margin-right:", "px;opacity:", ";transform:translateX( ", "px );"], function (_ref) {
   var $active = _ref.$active;
   return $active ? headerActionSize : 0;
@@ -36,38 +36,38 @@ export var StyledHeaderBackAction = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledMoreMenu = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledMoreMenu",
-  componentId: "core-12_51_0__sc-lidix2-3"
+  componentId: "core-12_53_0__sc-lidix2-3"
 })(["max-height:128px;"]);
 export var StyledHeaderActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderActions",
-  componentId: "core-12_51_0__sc-lidix2-4"
+  componentId: "core-12_53_0__sc-lidix2-4"
 })(["display:flex;margin-left:", "px;flex-shrink:0;", ""], spacing.lg, gutter);
 export var StyledCloseButton = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCloseButton",
-  componentId: "core-12_51_0__sc-lidix2-5"
+  componentId: "core-12_53_0__sc-lidix2-5"
 })(["margin-left:", "px;"], spacing.sm);
 export var StyledBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBody",
-  componentId: "core-12_51_0__sc-lidix2-6"
+  componentId: "core-12_53_0__sc-lidix2-6"
 })(["height:100%;background:", ";overflow-y:auto;> ", "{margin:", "px;}&:focus-visible{", "}> ", "{padding-left:", "px;padding-right:", "px;", "{padding-left:0;padding-right:0;}&:first-child > ", "{padding-top:", "px;}}"], function (_ref5) {
   var secondaryBgColor = _ref5.secondaryBgColor;
   return secondaryBgColor ? colors.gray96 : colors.white;
 }, StyledRequiredContainer, spacing.lg, getFocusInset(), StyledSection, spacing.lg, spacing.lg, StyledSection, StyledSectionInner, spacing.lg);
 export var StyledPanel = /*#__PURE__*/styled.aside.withConfig({
   displayName: "StyledPanel",
-  componentId: "core-12_51_0__sc-lidix2-7"
+  componentId: "core-12_53_0__sc-lidix2-7"
 })(["display:flex;flex-direction:column;width:100%;height:100%;background:", ";overflow:hidden;"], colors.white);
 export var StyledFooterNotation = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooterNotation",
-  componentId: "core-12_51_0__sc-lidix2-8"
+  componentId: "core-12_53_0__sc-lidix2-8"
 })(["flex-grow:1;"]);
 export var StyledFooterActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooterActions",
-  componentId: "core-12_51_0__sc-lidix2-9"
+  componentId: "core-12_53_0__sc-lidix2-9"
 })(["", ""], gutter);
 export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooter",
-  componentId: "core-12_51_0__sc-lidix2-10"
+  componentId: "core-12_53_0__sc-lidix2-10"
 })(["border-top:1px solid ", ";justify-content:flex-end;", " ", ""], colors.gray85, panel, function (_ref6) {
   var $hasShadow = _ref6.$hasShadow;
   return $hasShadow && css(["box-shadow:0 -4px 6px 0 #0000001a;z-index:1;"]);

package/dist/Pill/Pill.styles.js

@@ -6,18 +6,18 @@ import { PillColorPalets } from './Pill.colorPalette';
 var pillButtonSize = 16;
 export var StyledPill = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledPill",
-  componentId: "core-12_51_0__sc-99e1t5-0"
+  componentId: "core-12_53_0__sc-99e1t5-0"
 })(["", " display:inline-block;padding:1px ", "px;border:1px solid;border-radius:10px;font-weight:600;& + &{margin-left:", "px;}", ""], getTypographyIntent('small'), spacing.sm, spacing.xs, function (_ref) {
   var $color = _ref.$color;
   return css(["background-color:", ";border-color:", ";color:", ";"], PillColorPalets[$color].backgroundColor, PillColorPalets[$color].borderColor, PillColorPalets[$color].color);
 });
 export var StyledRemove = /*#__PURE__*/styled(Clear).withConfig({
   displayName: "StyledRemove",
-  componentId: "core-12_51_0__sc-99e1t5-1"
+  componentId: "core-12_53_0__sc-99e1t5-1"
 })(["border-radius:100%;cursor:pointer;flex:0 0 auto;height:", "px;width:", "px;vertical-align:top;"], pillButtonSize, pillButtonSize);
 export var StyledRemoveButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledRemoveButton",
-  componentId: "core-12_51_0__sc-99e1t5-2"
+  componentId: "core-12_53_0__sc-99e1t5-2"
 })(["border:0;padding:0;border-radius:100%;margin:0 -", "px 0 ", "px;color:inherit;", ""], pillButtonSize / 2 - spacing.xxs, spacing.xxs, function (_ref2) {
   var $color = _ref2.$color;
   return css(["&:hover{background:", ";color:", ";}"], PillColorPalets[$color].color, PillColorPalets[$color].backgroundColor);

package/dist/PillSelect/PillSelect.styles.js

@@ -6,19 +6,19 @@ import { spacing } from '../_styles/spacing';
 var checkedIconPlaceholderWidth = 32;
 export var PillSelectOptionWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectOptionWrapper",
-  componentId: "core-12_51_0__sc-1ai2ze0-0"
+  componentId: "core-12_53_0__sc-1ai2ze0-0"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
 export var PillSelectCheckedContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectCheckedContainer",
-  componentId: "core-12_51_0__sc-1ai2ze0-1"
+  componentId: "core-12_53_0__sc-1ai2ze0-1"
 })(["align-items:center;color:", ";display:inline-flex;padding-left:", "px;width:", "px;"], colors.blue50, spacing.sm, checkedIconPlaceholderWidth);
 export var PillSelectLabel = /*#__PURE__*/styled(Pill).withConfig({
   displayName: "PillSelectLabel",
-  componentId: "core-12_51_0__sc-1ai2ze0-2"
+  componentId: "core-12_53_0__sc-1ai2ze0-2"
 })(["", ""], getEllipsis);
 export var PillSelectLabelWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectLabelWrapper",
-  componentId: "core-12_51_0__sc-1ai2ze0-3"
+  componentId: "core-12_53_0__sc-1ai2ze0-3"
 })(["display:flex;max-width:100%;pointer-events:auto;", ""], function (_ref) {
   var disabled = _ref.disabled;
   return disabled && css(["pointer-events:none;"]);

package/dist/Popover/Popover.styles.js

@@ -5,7 +5,7 @@ import { getShadow } from '../_styles/shadows';
 export var popoverArrowSize = 6;
 export var StyledPopoverContent = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledPopoverContent",
-  componentId: "core-12_51_0__sc-1cd0ihn-0"
+  componentId: "core-12_53_0__sc-1cd0ihn-0"
 })(["background-color:", ";border-radius:inherit;color:", ";display:inline-block;max-width:250px;position:relative;", ""], colors.white, colors.gray15, function (_ref) {
   var $block = _ref.$block,
     $fluid = _ref.$fluid;
@@ -15,6 +15,6 @@ export var StyledPopoverContent = /*#__PURE__*/styled.span.withConfig({
 });
 export var StyledPopover = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPopover",
-  componentId: "core-12_51_0__sc-1cd0ihn-1"
+  componentId: "core-12_53_0__sc-1cd0ihn-1"
 })(["display:inline-block;border-radius:", "px;", " & + [data-overlay-arrow]{background:", ";}"], borderRadius.md, getShadow(3), colors.white);
 //# sourceMappingURL=Popover.styles.js.map

package/dist/Portal/Portal.styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 export var StyledPortal = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPortal",
-  componentId: "core-12_51_0__sc-15o1h2-0"
+  componentId: "core-12_53_0__sc-15o1h2-0"
 })(["left:0;pointer-events:none;position:fixed;top:0;> *{pointer-events:all;}"]);
 //# sourceMappingURL=Portal.styles.js.map

package/dist/ProgressBar/ProgressBar.styles.js

@@ -7,11 +7,11 @@ var animationDelay = '300ms';
 var fadeIn = /*#__PURE__*/keyframes(["from{opacity:1;}to{opacity:0;}"]);
 export var StyledProgressBarLoader = /*#__PURE__*/styled(Loader).withConfig({
   displayName: "StyledProgressBarLoader",
-  componentId: "core-12_51_0__sc-vdy2wl-0"
+  componentId: "core-12_53_0__sc-vdy2wl-0"
 })([""]);
 export var StyledProgressBar = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledProgressBar",
-  componentId: "core-12_51_0__sc-vdy2wl-1"
+  componentId: "core-12_53_0__sc-vdy2wl-1"
 })(["background-color:", ";border-radius:", "px;border:1px solid ", ";display:block;height:", "px;margin:", "px 0;overflow:hidden;position:relative;transition:background-color 0s linear;", " ", ";"], function (_ref) {
   var $complete = _ref.$complete;
   return $complete ? colors.blue50 : colors.gray94;

package/dist/RadioButton/RadioButton.styles.js

@@ -9,7 +9,7 @@ export var dataQa = {
 var radioButtonSize = 20;
 export var StyledRadioButton = /*#__PURE__*/styled.label.withConfig({
   displayName: "StyledRadioButton",
-  componentId: "core-12_51_0__sc-nd95zs-0"
+  componentId: "core-12_53_0__sc-nd95zs-0"
 })(["color:", ";display:flex;position:relative;vertical-align:middle;& + &{margin-top:", "px;}", " ", ""], colors.gray15, spacing.md, function (_ref) {
   var $error = _ref.$error;
   return $error && css(["", ":before,", ":checked:not(:disabled) + ", ":before{border-color:", ";}", ":checked:disabled + ", ":before{border-color:", ";}"], StyledRadioButtonLabel, StyledRadioButtonInput, StyledRadioButtonLabel, colors.red50, StyledRadioButtonInput, StyledRadioButtonLabel, colors.gray85);
@@ -19,10 +19,10 @@ export var StyledRadioButton = /*#__PURE__*/styled.label.withConfig({
 });
 export var StyledRadioButtonLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledRadioButtonLabel",
-  componentId: "core-12_51_0__sc-nd95zs-1"
+  componentId: "core-12_53_0__sc-nd95zs-1"
 })(["", ";cursor:default;display:flex;&:before{background:", ";border-radius:100%;border:2px solid ", ";content:'';display:inline-block;flex:0;height:", "px;min-width:", "px;width:", "px;}"], getTypographyIntent('body'), colors.white, colors.gray50, radioButtonSize, radioButtonSize, radioButtonSize);
 export var StyledRadioButtonInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledRadioButtonInput",
-  componentId: "core-12_51_0__sc-nd95zs-2"
+  componentId: "core-12_53_0__sc-nd95zs-2"
 })(["left:0;margin:0;opacity:0;padding:0;position:absolute;top:0;&:focus:not(:checked),&[data-qa=", "]:not(:checked){&:not(:disabled) + ", ":before{", "}}&:focus:checked:not(:disabled),&[data-qa=", "]:checked:not(:disabled){+ ", ":before{box-shadow:0 0 0 2px ", ";}}&:checked + ", ":before{border:6px solid ", ";}&:disabled + ", ":before{border-color:", ";}&:disabled:checked + ", ":before{border-color:", ";}"], dataQa.focused, StyledRadioButtonLabel, getFocus(), dataQa.focused, StyledRadioButtonLabel, colors.blue40, StyledRadioButtonLabel, colors.blue50, StyledRadioButtonLabel, colors.gray85, StyledRadioButtonLabel, colors.blue85);
 //# sourceMappingURL=RadioButton.styles.js.map

package/dist/Required/Required.styles.js

@@ -5,7 +5,7 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledRequiredMark = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledRequiredMark",
-  componentId: "core-12_51_0__sc-bja1ql-0"
+  componentId: "core-12_53_0__sc-bja1ql-0"
 })(["color:", ";font-weight:bold;", ""], colors.red50, function (_ref) {
   var $showLabel = _ref.$showLabel;
   if ($showLabel) {
@@ -15,10 +15,10 @@ export var StyledRequiredMark = /*#__PURE__*/styled.span.withConfig({
 });
 export var StyledRequiredContainer = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledRequiredContainer",
-  componentId: "core-12_51_0__sc-bja1ql-1"
+  componentId: "core-12_53_0__sc-bja1ql-1"
 })(["display:inline-flex;", " ", " > &{margin-left:", "px;}"], getTypographyIntent('small'), StyledCheckboxLabel, spacing.xs);
 export var StyledRequiredText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledRequiredText",
-  componentId: "core-12_51_0__sc-bja1ql-2"
+  componentId: "core-12_53_0__sc-bja1ql-2"
 })(["font-style:italic;color:", ";margin-left:4px;"], colors.gray45);
 //# sourceMappingURL=Required.styles.js.map

package/dist/Search/Search.styles.js

@@ -33,22 +33,22 @@ export function getSearchInputStyles() {
 }
 export var StyledInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledInput",
-  componentId: "core-12_51_0__sc-3j8khv-0"
+  componentId: "core-12_53_0__sc-3j8khv-0"
 })(["", ""], getSearchInputStyles);
 var StyledButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledButton",
-  componentId: "core-12_51_0__sc-3j8khv-1"
+  componentId: "core-12_53_0__sc-3j8khv-1"
 })(["position:absolute;top:", "px;"], buttonTop);
 export var StyledSearchButton = /*#__PURE__*/styled(StyledButton).withConfig({
   displayName: "StyledSearchButton",
-  componentId: "core-12_51_0__sc-3j8khv-2"
+  componentId: "core-12_53_0__sc-3j8khv-2"
 })([""]);
 export var StyledClearButton = /*#__PURE__*/styled(StyledButton).withConfig({
   displayName: "StyledClearButton",
-  componentId: "core-12_51_0__sc-3j8khv-3"
+  componentId: "core-12_53_0__sc-3j8khv-3"
 })([""]);
 export var StyledSearch = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSearch",
-  componentId: "core-12_51_0__sc-3j8khv-4"
+  componentId: "core-12_53_0__sc-3j8khv-4"
 })(["position:relative;width:100%;", "{padding-right:", "px;}", "{right:", "px;}", "{right:", "px;}"], StyledInput, inputRight, StyledSearchButton, searchRight, StyledClearButton, clearRight);
 //# sourceMappingURL=Search.styles.js.map

package/dist/Section/Section.styles.js

@@ -6,15 +6,15 @@ import { getGapOutlineFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledSectionBanner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSectionBanner",
-  componentId: "core-12_51_0__sc-1lxbrwv-0"
+  componentId: "core-12_53_0__sc-1lxbrwv-0"
 })(["margin-bottom:", "px;> * + *{margin-top:", "px;}"], spacing.sm, spacing.sm);
 export var StyledSectionInner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSectionInner",
-  componentId: "core-12_51_0__sc-1lxbrwv-1"
+  componentId: "core-12_53_0__sc-1lxbrwv-1"
 })([""]);
 export var StyledSectionCollapseHeading = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSectionCollapseHeading",
-  componentId: "core-12_51_0__sc-1lxbrwv-2"
+  componentId: "core-12_53_0__sc-1lxbrwv-2"
 })(["align-self:flex-start;margin-right:", "px;"], spacing.sm);
 export var sectionClassnames = {
   divide: 'section--divide',
@@ -25,11 +25,11 @@ export var sectionClassnames = {
 };
 export var StyledSection = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSection",
-  componentId: "core-12_51_0__sc-1lxbrwv-3"
+  componentId: "core-12_53_0__sc-1lxbrwv-3"
 })(["padding-left:", "px;padding-right:", "px;padding-bottom:", "px;& > ", "{padding-top:", "px;}&.", "{& > ", "{border-top:1px solid ", ";}}&:first-child > ", "{border-top:0;}& &{padding-left:0;padding-right:0;&:first-child > ", "{border-top:1px solid ", ";}&:last-child{padding-bottom:0;}}", ":last-of-type{margin-bottom:", "px;}", " + &&&{padding-top:", "px;}"], spacing.lg, spacing.lg, spacing.lg, StyledSectionInner, spacing.lg, sectionClassnames.divide, StyledSectionInner, colors.gray85, StyledSectionInner, StyledSectionInner, colors.gray85, StyledFormRow, spacing.lg * -1, StyledFormRow, spacing.xs);
 export var StyledSectionContentRegion = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSectionContentRegion",
-  componentId: "core-12_51_0__sc-1lxbrwv-4"
+  componentId: "core-12_53_0__sc-1lxbrwv-4"
 })(["padding-top:", "px;&:focus-visible{", "}", " ", " & > :not(", ") + ", "{padding-top:", "px;}", " ", " &:last-of-type{padding-bottom:0;}"], spacing.sm, getGapOutlineFocus('inside'), function (_ref) {
   var $closed = _ref.$closed;
   return $closed && css(["padding-top:0;"]);
@@ -39,10 +39,10 @@ export var StyledSectionContentRegion = /*#__PURE__*/styled.div.withConfig({
 }, StyledSection, StyledSection, spacing.xl, StyledSection, StyledSection);
 export var StyledSectionHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSectionHeader",
-  componentId: "core-12_51_0__sc-1lxbrwv-5"
+  componentId: "core-12_53_0__sc-1lxbrwv-5"
 })(["align-items:center;display:flex;min-height:36px;word-break:break-word;"]);
 export var StyledTitle = /*#__PURE__*/styled(Title).withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_51_0__sc-1lxbrwv-6"
+  componentId: "core-12_53_0__sc-1lxbrwv-6"
 })(["width:100%;"]);
 //# sourceMappingURL=Section.styles.js.map

package/dist/SegmentedController/SegmentedController.styles.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const segmentedControllerStackBreakpoint = 320;
 export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $block?: boolean | undefined;
 }>> & string;

package/dist/SegmentedController/SegmentedController.styles.js

@@ -1,22 +1,24 @@
 import styled, { css } from 'styled-components';
+import { breakpointRawMinWidthValues } from '../Grid/Grid.constants';
 import { getTypographyIntent } from '../Typography';
 import { borderRadius } from '../_styles/borderRadius';
 import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
+export var segmentedControllerStackBreakpoint = 320;
 export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_51_0__sc-ocai3-0"
-})(["align-items:center;display:", ";height:36px;justify-content:center;width:", ";"], function (_ref) {
+  componentId: "core-12_53_0__sc-ocai3-0"
+})(["align-items:center;display:", ";height:36px;justify-content:center;width:", ";@media (max-width:", "px){align-items:stretch;flex-direction:column;height:auto;}"], function (_ref) {
   var $block = _ref.$block;
   return $block ? 'flex' : 'inline-flex';
 }, function (_ref2) {
   var $block = _ref2.$block;
   return $block ? '100%' : null;
-});
+}, segmentedControllerStackBreakpoint);
 export var StyledSegment = /*#__PURE__*/styled.label.withConfig({
   displayName: "StyledSegment",
-  componentId: "core-12_51_0__sc-ocai3-1"
-})(["align-items:center;border-radius:0;border:1px solid ", ";cursor:pointer;display:flex;flex:1 1 auto;height:100%;justify-content:center;min-width:0;outline:0;padding:0 ", "px;position:relative;background-color:", ";color:", ";&:hover{background-color:", ";border-color:", ";color:", ";}", " ", ";"], colors.gray85, spacing.md, colors.white, colors.gray45, colors.gray94, colors.gray85, colors.gray45, function (_ref3) {
+  componentId: "core-12_53_0__sc-ocai3-1"
+})(["align-items:center;border-radius:0;border:1px solid ", ";cursor:pointer;display:flex;flex:1 1 auto;height:100%;justify-content:center;min-width:0;outline:0;padding:0 ", "px;@media (width <= ", "px){padding:0 ", "px;}position:relative;background-color:", ";color:", ";&:hover{background-color:", ";border-color:", ";color:", ";}", " ", ";"], colors.gray85, spacing.md, breakpointRawMinWidthValues.tabletMd, spacing.sm, colors.white, colors.gray45, colors.gray94, colors.gray85, colors.gray45, function (_ref3) {
   var _ref3$$focused = _ref3.$focused,
     $focused = _ref3$$focused === void 0 ? false : _ref3$$focused;
   if ($focused) {
@@ -37,10 +39,10 @@ export var StyledSegment = /*#__PURE__*/styled.label.withConfig({
 });
 export var StyledSegmentDisabledInteractiveWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSegmentDisabledInteractiveWrapper",
-  componentId: "core-12_51_0__sc-ocai3-2"
-})(["display:flex;flex:1 1 auto;min-width:0;height:100%;margin-right:-1px;&:first-child ", "{border-bottom-left-radius:", "px;border-top-left-radius:", "px;}&:last-child ", "{border-bottom-right-radius:", "px;border-top-right-radius:", "px;}"], StyledSegment, borderRadius.md, borderRadius.md, StyledSegment, borderRadius.md, borderRadius.md);
+  componentId: "core-12_53_0__sc-ocai3-2"
+})(["align-self:stretch;display:flex;flex:1 1 auto;min-height:36px;min-width:0;margin-right:-1px;&:first-child ", "{border-bottom-left-radius:", "px;border-top-left-radius:", "px;}&:last-child ", "{border-bottom-right-radius:", "px;border-top-right-radius:", "px;}@media (max-width:", "px){margin-bottom:-1px;margin-right:0;&:first-child ", "{border-bottom-left-radius:0;border-top-right-radius:", "px;}&:last-child{margin-bottom:0;", "{border-bottom-left-radius:", "px;border-top-right-radius:0;}}}"], StyledSegment, borderRadius.md, borderRadius.md, StyledSegment, borderRadius.md, borderRadius.md, segmentedControllerStackBreakpoint, StyledSegment, borderRadius.md, StyledSegment, borderRadius.md);
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_51_0__sc-ocai3-3"
-})(["", ";display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], getTypographyIntent('body'));
+  componentId: "core-12_53_0__sc-ocai3-3"
+})(["", ";display:-webkit-box;text-align:center;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;"], getTypographyIntent('body'));
 //# sourceMappingURL=SegmentedController.styles.js.map

package/dist/SegmentedController/SegmentedController.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedController.styles.js","names":["styled","css","getTypographyIntent","borderRadius","colors","spacing","StyledContainer","div","withConfig","displayName","componentId","_ref","$block","_ref2","StyledSegment","label","gray85","md","white","gray45","gray94","_ref3","_ref3$$focused","$focused","blue40","_ref4","_ref4$$disabled","$disabled","_ref4$$selected","$selected","blue50","StyledSegmentDisabledInteractiveWrapper","StyledLabel","span"],"sources":["../../src/SegmentedController/SegmentedController.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { getTypographyIntent } from '../Typography'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledContainer = styled.div<{ $block?: boolean }>`\n  align-items: center;\n  display: ${({ $block }) => ($block ? 'flex' : 'inline-flex')};\n  height: 36px;\n  justify-content: center;\n  width: ${({ $block }) => ($block ? '100%' : null)};\n`\n\nexport const StyledSegment = styled.label<{\n  $disabled: boolean\n  $focused: boolean\n  $selected: boolean\n}>`\n  align-items: center;\n  border-radius: 0;\n  border: 1px solid ${colors.gray85};\n  cursor: pointer;\n  display: flex;\n  flex: 1 1 auto;\n  height: 100%;\n  justify-content: center;\n  min-width: 0;\n  outline: 0;\n  padding: 0 ${spacing.md}px;\n  position: relative;\n  background-color: ${colors.white};\n  color: ${colors.gray45};\n\n  &:hover {\n    background-color: ${colors.gray94};\n    border-color: ${colors.gray85};\n    color: ${colors.gray45};\n  }\n\n  ${({ $focused = false }) => {\n    if ($focused) {\n      return css`\n        border-color: ${colors.blue40};\n        box-shadow: 0 0 0 1px ${colors.blue40};\n        z-index: 1;\n      `\n    }\n  }}\n\n  ${({ $disabled = false, $selected = false }) => {\n    if ($disabled && $selected) {\n      return css`\n        &,\n        &:hover,\n        &:disabled {\n          background-color: ${colors.gray85};\n          border-color: ${colors.gray85};\n          color: ${colors.white};\n          pointer-events: none;\n        }\n      `\n    } else if ($disabled) {\n      return css`\n        &,\n        &:hover,\n        &:disabled {\n          background-color: ${colors.white};\n          border-color: ${colors.gray85};\n          color: ${colors.gray85};\n          pointer-events: none;\n      `\n    } else if ($selected) {\n      return css`\n        &,\n        &:hover {\n          background-color: ${colors.blue50};\n          border-color: ${colors.blue50};\n          color: ${colors.white};\n        }\n      `\n    }\n  }};\n`\n\nexport const StyledSegmentDisabledInteractiveWrapper = styled.div`\n  display: flex;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  margin-right: -1px;\n\n  &:first-child ${StyledSegment} {\n    border-bottom-left-radius: ${borderRadius.md}px;\n    border-top-left-radius: ${borderRadius.md}px;\n  }\n\n  &:last-child ${StyledSegment} {\n    border-bottom-right-radius: ${borderRadius.md}px;\n    border-top-right-radius: ${borderRadius.md}px;\n  }\n`\n\nexport const StyledLabel = styled.span`\n  ${getTypographyIntent('body')};\n\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,eAAe,gBAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uFAE5B,UAAAC,IAAA;EAAA,IAAGC,MAAM,GAAAD,IAAA,CAANC,MAAM;EAAA,OAAQA,MAAM,GAAG,MAAM,GAAG,aAAa;AAAA,CAAC,EAGnD,UAAAC,KAAA;EAAA,IAAGD,MAAM,GAAAC,KAAA,CAAND,MAAM;EAAA,OAAQA,MAAM,GAAG,MAAM,GAAG,IAAI;AAAA,CAAC,CAClD;AAED,OAAO,IAAME,aAAa,gBAAGd,MAAM,CAACe,KAAK,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+SAOnBN,MAAM,CAACY,MAAM,EAQpBX,OAAO,CAACY,EAAE,EAEHb,MAAM,CAACc,KAAK,EACvBd,MAAM,CAACe,MAAM,EAGAf,MAAM,CAACgB,MAAM,EACjBhB,MAAM,CAACY,MAAM,EACpBZ,MAAM,CAACe,MAAM,EAGtB,UAAAE,KAAA,EAA0B;EAAA,IAAAC,cAAA,GAAAD,KAAA,CAAvBE,QAAQ;IAARA,QAAQ,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;EACnB,IAAIC,QAAQ,EAAE;IACZ,OAAOtB,GAAG,6DACQG,MAAM,CAACoB,MAAM,EACLpB,MAAM,CAACoB,MAAM;EAGzC;AACF,CAAC,EAEC,UAAAC,KAAA,EAA8C;EAAA,IAAAC,eAAA,GAAAD,KAAA,CAA3CE,SAAS;IAATA,SAAS,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;IAAAE,eAAA,GAAAH,KAAA,CAAEI,SAAS;IAATA,SAAS,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;EACvC,IAAID,SAAS,IAAIE,SAAS,EAAE;IAC1B,OAAO5B,GAAG,oGAIcG,MAAM,CAACY,MAAM,EACjBZ,MAAM,CAACY,MAAM,EACpBZ,MAAM,CAACc,KAAK;EAI3B,CAAC,MAAM,IAAIS,SAAS,EAAE;IACpB,OAAO1B,GAAG,mGAIcG,MAAM,CAACc,KAAK,EAChBd,MAAM,CAACY,MAAM,EACpBZ,MAAM,CAACY,MAAM;EAG5B,CAAC,MAAM,IAAIa,SAAS,EAAE;IACpB,OAAO5B,GAAG,qEAGcG,MAAM,CAAC0B,MAAM,EACjB1B,MAAM,CAAC0B,MAAM,EACpB1B,MAAM,CAACc,KAAK;EAG3B;AACF,CAAC,CACF;AAED,OAAO,IAAMa,uCAAuC,gBAAG/B,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qPAO/CI,aAAa,EACEX,YAAY,CAACc,EAAE,EAClBd,YAAY,CAACc,EAAE,EAG5BH,aAAa,EACIX,YAAY,CAACc,EAAE,EAClBd,YAAY,CAACc,EAAE,CAE7C;AAED,OAAO,IAAMe,WAAW,gBAAGhC,MAAM,CAACiC,IAAI,CAAAzB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sFAClCR,mBAAmB,CAAC,MAAM,CAAC,CAM9B"}
+{"version":3,"file":"SegmentedController.styles.js","names":["styled","css","breakpointRawMinWidthValues","getTypographyIntent","borderRadius","colors","spacing","segmentedControllerStackBreakpoint","StyledContainer","div","withConfig","displayName","componentId","_ref","$block","_ref2","StyledSegment","label","gray85","md","tabletMd","sm","white","gray45","gray94","_ref3","_ref3$$focused","$focused","blue40","_ref4","_ref4$$disabled","$disabled","_ref4$$selected","$selected","blue50","StyledSegmentDisabledInteractiveWrapper","StyledLabel","span"],"sources":["../../src/SegmentedController/SegmentedController.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { breakpointRawMinWidthValues } from '../Grid/Grid.constants'\nimport { getTypographyIntent } from '../Typography'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nexport const segmentedControllerStackBreakpoint = 320\n\nexport const StyledContainer = styled.div<{ $block?: boolean }>`\n  align-items: center;\n  display: ${({ $block }) => ($block ? 'flex' : 'inline-flex')};\n  height: 36px;\n  justify-content: center;\n  width: ${({ $block }) => ($block ? '100%' : null)};\n\n  @media (max-width: ${segmentedControllerStackBreakpoint}px) {\n    align-items: stretch;\n    flex-direction: column;\n    height: auto;\n  }\n`\n\nexport const StyledSegment = styled.label<{\n  $disabled: boolean\n  $focused: boolean\n  $selected: boolean\n}>`\n  align-items: center;\n  border-radius: 0;\n  border: 1px solid ${colors.gray85};\n  cursor: pointer;\n  display: flex;\n  flex: 1 1 auto;\n  height: 100%;\n  justify-content: center;\n  min-width: 0;\n  outline: 0;\n  padding: 0 ${spacing.md}px;\n\n  @media (width <= ${breakpointRawMinWidthValues.tabletMd}px) {\n    padding: 0 ${spacing.sm}px;\n  }\n  position: relative;\n  background-color: ${colors.white};\n  color: ${colors.gray45};\n\n  &:hover {\n    background-color: ${colors.gray94};\n    border-color: ${colors.gray85};\n    color: ${colors.gray45};\n  }\n\n  ${({ $focused = false }) => {\n    if ($focused) {\n      return css`\n        border-color: ${colors.blue40};\n        box-shadow: 0 0 0 1px ${colors.blue40};\n        z-index: 1;\n      `\n    }\n  }}\n\n  ${({ $disabled = false, $selected = false }) => {\n    if ($disabled && $selected) {\n      return css`\n        &,\n        &:hover,\n        &:disabled {\n          background-color: ${colors.gray85};\n          border-color: ${colors.gray85};\n          color: ${colors.white};\n          pointer-events: none;\n        }\n      `\n    } else if ($disabled) {\n      return css`\n        &,\n        &:hover,\n        &:disabled {\n          background-color: ${colors.white};\n          border-color: ${colors.gray85};\n          color: ${colors.gray85};\n          pointer-events: none;\n      `\n    } else if ($selected) {\n      return css`\n        &,\n        &:hover {\n          background-color: ${colors.blue50};\n          border-color: ${colors.blue50};\n          color: ${colors.white};\n        }\n      `\n    }\n  }};\n`\n\nexport const StyledSegmentDisabledInteractiveWrapper = styled.div`\n  align-self: stretch;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 36px;\n  min-width: 0;\n  margin-right: -1px;\n\n  &:first-child ${StyledSegment} {\n    border-bottom-left-radius: ${borderRadius.md}px;\n    border-top-left-radius: ${borderRadius.md}px;\n  }\n\n  &:last-child ${StyledSegment} {\n    border-bottom-right-radius: ${borderRadius.md}px;\n    border-top-right-radius: ${borderRadius.md}px;\n  }\n\n  @media (max-width: ${segmentedControllerStackBreakpoint}px) {\n    margin-bottom: -1px;\n    margin-right: 0;\n\n    &:first-child ${StyledSegment} {\n      border-bottom-left-radius: 0;\n      border-top-right-radius: ${borderRadius.md}px;\n    }\n\n    &:last-child {\n      margin-bottom: 0;\n\n      ${StyledSegment} {\n        border-bottom-left-radius: ${borderRadius.md}px;\n        border-top-right-radius: 0;\n      }\n    }\n  }\n`\n\nexport const StyledLabel = styled.span`\n  ${getTypographyIntent('body')};\n  display: -webkit-box;\n  text-align: center;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n`\n"],"mappings":"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"}