acinguiux-ds-react-framework 0.1.23 → 0.1.25

package/build/cjs/components/Alert/Alert.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.styles.js","sources":["../../../../src/components/Alert/Alert.styles.tsx"],"sourcesContent":["import { PropsWithChildren } from 'react';\n\nimport { Directions, LINK_CLASS, Sizes, Variants } from 'acinguiux-ds-react-base/consts';\nimport { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { AlertConsts, AlertTypes } from 'acinguiux-ds-react-base/components/Alert';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { styled, css, keyframes } from 'styled-components';\nimport { getLargerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { LabelTypes, TextTypes } from 'acinguiux-ds-react-base/components/Text';\n\nimport Label from '../Text/components/Label/Label';\nimport Text from '../Text/components/Text/Text';\nimport type { IAlertProps } from './Alert.types';\nimport OnSentimentButton from '../Button/OnSentimentButton';\nimport { getAlertBodySize } from './utils/alertUtils';\n\nconst getProminence = (variant: AlertTypes.Variant) => {\n  if (variant === Variants.Filled) {\n    return FabricsVariables.SentimentProminences.Strong;\n  }\n\n  if (variant === Variants.Subtle) {\n    return FabricsVariables.SentimentProminences.Subtle;\n  }\n\n  return FabricsVariables.SentimentProminences.Transparent;\n};\n\ntype AlertBasicProps = Required<PickTransient<IAlertProps, 'size' | 'alignment'>>;\ntype AlertVariantProps = Required<PickTransient<IAlertProps, 'variant'>>;\ntype AlertSentimentProps = Required<PickTransient<IAlertProps, 'sentiment'>>;\ntype AlertBannerProps = Required<PickTransient<IAlertProps, 'banner'>>;\ntype AlertAutocloseProps = Required<PickTransient<IAlertProps, 'autoCloseTimeout'>>;\n\nconst fullWidth = keyframes`\n  from {\n    width: 0;\n  }\n  \n  to {\n    width: 100%;\n  }\n`;\n\nconst opacity = keyframes`\n  from {\n    opacity: 0;\n  }\n  \n  to {\n    opacity: 1;\n  }\n`;\n\nconst miniOpacity = keyframes`\n  from {\n    opacity: 0;\n  }\n  \n  to {\n    opacity: .1;\n  }\n`;\n\nconst AutoCloseContainer = styled.div<AlertVariantProps & AlertSentimentProps & AlertAutocloseProps>`\n  ${({ $sentiment, $variant, $autoCloseTimeout, theme }) => {\n    const layer = theme.layer({\n      sentiment: $sentiment,\n      sentimentProminence: FabricsVariables.SentimentProminences.Strong,\n    });\n\n    return css`\n      position: absolute;\n      inset-block: 0;\n      opacity: ${$variant === Variants.Filled ? 1 : 0.1};\n      left: 0;\n      right: 0;\n      overflow: hidden;\n      pointer-events: none;\n\n      &::after {\n        content: '';\n        position: relative;\n        height: 100%;\n        display: block;\n\n        @media (prefers-reduced-motion: no-preference) {\n          width: 0;\n          opacity: ${$variant === Variants.Filled ? 0.1 : 1};\n          will-change: width;\n          animation: ${fullWidth} ${$autoCloseTimeout}ms ease-out forwards;\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n          width: 100%;\n          opacity: 0;\n          will-change: opacity;\n          animation: ${$variant === Variants.Filled ? miniOpacity : opacity} 1s ease-out forwards;\n        }\n        background-color: ${layer[Variables.BackgroundSentiment]};\n        ${$variant === Variants.Filled &&\n        css`\n          mix-blend-mode: difference;\n        `}\n      }\n    `;\n  }};\n`;\n\nconst Alert = styled.div<AlertBasicProps & AlertVariantProps & AlertSentimentProps & AlertBannerProps>`\n  ${({ $size, $sentiment, $banner, $variant, $alignment, theme }) => {\n    const currentModes = { sentiment: $sentiment, sentimentProminence: getProminence($variant) };\n    const layer = theme.layer(currentModes);\n\n    return css`\n      position: relative;\n      background-color: ${layer[Variables.BackgroundSentiment]};\n      color: ${layer[Variables.TextOnSentimentOnBackground]};\n      border-color: ${layer[Variables.BorderOnSentimentOnBackground]};\n\n      display: flex;\n      align-items: flex-start;\n      width: 100%;\n      &,\n      & > ${AutoCloseContainer} {\n        border-radius: ${$banner ? 0 : AlertConsts.consts[$size][$alignment].radius}px;\n      }\n      box-sizing: border-box;\n      min-height: ${AlertConsts.consts[$size][$alignment].minHeight}px;\n      min-width: 0;\n      margin: 0;\n      padding: 0;\n\n      ${$variant === Variants.Outlined &&\n      css`\n        border-width: 1px;\n        border-style: solid;\n      `}\n\n      ${$alignment === Directions.Horizontal &&\n      css`\n        justify-content: center;\n      `}\n      \n      ${$banner &&\n      $variant === Variants.Outlined &&\n      css`\n        border-right-width: 0;\n        border-left-width: 0;\n      `}\n    `;\n  }}\n`;\n\nconst HighlightIndicator = styled.div<AlertBasicProps & AlertVariantProps & AlertSentimentProps>`\n  ${({ theme, $sentiment, $size, $alignment, $variant }) => {\n    const layer = theme.layer({ sentiment: $sentiment, sentimentProminence: getProminence($variant) });\n\n    return css`\n      position: relative;\n      padding: 0;\n      margin: 0;\n      height: 100%;\n      width: ${AlertConsts.consts[$size][$alignment].highlightContainerWidth}px;\n\n      &::after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: ${AlertConsts.consts[$size][$alignment].highlightPadding}px;\n        bottom: ${AlertConsts.consts[$size][$alignment].highlightPadding}px;\n        left: calc(100% + ${AlertConsts.consts[$size][$alignment].highlightContainerOffset}px);\n        width: ${AlertConsts.consts[$size][$alignment].highlightWidth}px;\n        border-radius: 10000px;\n        background-color: ${layer[Variables.ForegroundOnSentiment]};\n      }\n    `;\n  }};\n`;\n\nconst AlertContentContainer = styled.div<AlertBasicProps & AlertVariantProps>`\n  ${({ $size, $alignment, $variant }) => css`\n    display: flex;\n    flex: 1 0 0;\n    min-width: 0;\n    min-height: 100%;\n    overflow: hidden;\n    padding: ${AlertConsts.consts[$size][$alignment].padding.vertical}px\n      ${AlertConsts.consts[$size][$alignment].padding.horizontal}px;\n\n    ${$variant === Variants.Outlined &&\n    css`\n      padding: ${AlertConsts.consts[$size][$alignment].padding.vertical - 1}px\n        ${AlertConsts.consts[$size][$alignment].padding.horizontal - 1}px;\n    `}\n  `};\n`;\n\nconst MessageAndButtonContainer = styled.div<AlertBasicProps>`\n  ${({ $size, $alignment }) => css`\n    display: flex;\n    flex: 1 1 100%;\n    width: 100%;\n    min-width: 0;\n    overflow: hidden;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    gap: ${AlertConsts.consts[$size][$alignment].textIconGap}px;\n  `};\n`;\n\nconst MessageAndIconVerticalContainer = styled.div<AlertBasicProps>`\n  ${({ $alignment, $size }) => css`\n    display: flex;\n    flex: 1 0 0;\n    width: 100%;\n    min-width: 0;\n    flex-wrap: nowrap;\n    align-items: ${$alignment === Directions.Horizontal ? 'center' : 'flex-start'};\n    gap: ${AlertConsts.consts[$size][$alignment].textIconGap}px;\n    padding: ${AlertConsts.consts[$size][$alignment].innerPadding.top}px\n      ${AlertConsts.consts[$size][$alignment].innerPadding.right}px\n      ${AlertConsts.consts[$size][$alignment].innerPadding.bottom}px\n      ${AlertConsts.consts[$size][$alignment].innerPadding.left}px;\n\n    ${$alignment === Directions.Vertical &&\n    css`\n      padding-right: 0;\n    `};\n  `};\n`;\n\nconst IconContainer = styled.div<AlertBasicProps>`\n  ${({ $alignment, $size }) => css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    min-width: ${AlertConsts.consts[$size][$alignment].minIconSize ?? AlertConsts.consts[$size][$alignment].iconSize}px;\n    min-height: ${AlertConsts.consts[$size][$alignment].minIconSize ??\n    AlertConsts.consts[$size][$alignment].iconSize}px;\n\n    & > svg {\n      width: ${AlertConsts.consts[$size][$alignment].iconSize}px;\n      height: ${AlertConsts.consts[$size][$alignment].iconSize}px;\n    }\n  `};\n`;\n\nconst InnerContainer = styled.div<AlertBasicProps>`\n  ${({ $size, $alignment }) => css`\n    display: flex;\n    flex: 1 1 100%;\n    justify-content: space-between;\n    flex-wrap: nowrap;\n    min-width: 0;\n    gap: ${AlertConsts.consts[$size][$alignment].innerGap}px;\n    align-self: stretch;\n    align-items: center;\n\n    ${$alignment === Directions.Vertical &&\n    css`\n      flex-direction: column;\n      align-items: flex-start;\n    `}\n  `}\n`;\n\nconst AlertMessageContainer = styled.div<AlertBasicProps & AlertVariantProps>`\n  ${({ $size, $variant, $alignment, theme }) => css`\n    ${theme.typography('paragraph', getAlertBodySize($size))};\n    display: flex;\n    flex: 1 0 0;\n    padding: 0 ${AlertConsts.consts[$size][$alignment].innerPadding.right}px 0\n      ${AlertConsts.consts[$size][$alignment].innerPadding.left}px;\n\n    ${$alignment === Directions.Horizontal &&\n    css`\n      padding-left: 0;\n      padding-right: 0;\n    `};\n\n    overflow: hidden;\n\n    > * {\n      color: inherit;\n      ${(!$variant || $variant === 'filled') &&\n      css`\n        .${LINK_CLASS} a {\n          &,\n          &:hover,\n          &:visited {\n            color: inherit;\n            border-color: inherit;\n          }\n        }\n      `};\n\n      ${$alignment === Directions.Horizontal &&\n      css`\n        white-space: nowrap;\n      `};\n    }\n\n    ${$alignment === Directions.Horizontal &&\n    css`\n      > p {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    `};\n\n    gap: ${AlertConsts.consts[$size][$alignment].textGap}px;\n\n    ${$alignment === Directions.Horizontal &&\n    css`\n      align-items: baseline;\n    `}\n\n    ${$alignment === Directions.Vertical &&\n    css`\n      align-items: flex-start;\n      flex-direction: column;\n    `}\n  `};\n`;\n\nconst AlertTitle = ({\n  $size,\n  $alignment,\n  children,\n}: PropsWithChildren<Required<PickTransient<IAlertProps, 'size' | 'alignment'>>>) => {\n  if ($alignment === Directions.Vertical) {\n    if ($size === Sizes.Large) {\n      return (\n        <Text bold={true} size={getLargerSize($size) as TextTypes.Size}>\n          {children}\n        </Text>\n      );\n    }\n\n    return (\n      <Label bold={true} size={getLargerSize($size) as LabelTypes.Size}>\n        {children}\n      </Label>\n    );\n  }\n\n  return (\n    <Text bold={true} size={$size}>\n      {children}\n    </Text>\n  );\n};\n\nconst AlertMessage = styled(Text)``;\n\nconst Actions = styled.div<AlertBasicProps>`\n  ${({ $size, $alignment }) => css`\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    gap: ${AlertConsts.consts[$size][$alignment].buttonGap}px;\n\n    ${$alignment === Directions.Vertical &&\n    css`\n      align-self: stretch;\n    `};\n  `};\n`;\n\nconst ActionButton = styled(OnSentimentButton)``;\n\nconst CloseButton = styled(OnSentimentButton)``;\n\nexport {\n  ActionButton,\n  Actions,\n  Alert,\n  AutoCloseContainer,\n  AlertContentContainer,\n  AlertTitle,\n  AlertMessage,\n  AlertMessageContainer,\n  CloseButton,\n  HighlightIndicator,\n  IconContainer,\n  InnerContainer,\n  MessageAndButtonContainer,\n  MessageAndIconVerticalContainer,\n};\n"],"names":["getProminence","variant","Variants","FabricsVariables","fullWidth","keyframes","opacity","miniOpacity","AutoCloseContainer","styled","$sentiment","$variant","$autoCloseTimeout","theme","layer","css","Variables","Alert","$size","$banner","$alignment","currentModes","AlertConsts.consts","Directions","HighlightIndicator","AlertContentContainer","MessageAndButtonContainer","MessageAndIconVerticalContainer","IconContainer","InnerContainer","AlertMessageContainer","getAlertBodySize","LINK_CLASS","AlertTitle","children","Sizes","jsx","Text","getLargerSize","Label","AlertMessage","Actions","ActionButton","OnSentimentButton","CloseButton"],"mappings":"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"}
+{"version":3,"file":"Alert.styles.js","sources":["../../../../src/components/Alert/Alert.styles.tsx"],"sourcesContent":["import { PropsWithChildren } from 'react';\n\nimport { Directions, LINK_CLASS, Sizes, Variants } from 'acinguiux-ds-react-base/consts';\nimport { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { AlertConsts, AlertTypes } from 'acinguiux-ds-react-base/components/Alert';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { styled, css, keyframes } from 'styled-components';\nimport { getLargerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { LabelTypes, TextTypes } from 'acinguiux-ds-react-base/components/Text';\n\nimport Label from '../Text/components/Label/Label';\nimport Text from '../Text/components/Text/Text';\nimport type { IAlertProps } from './Alert.types';\nimport OnSentimentButton from '../Button/OnSentimentButton';\nimport { getAlertBodySize } from './utils/alertUtils';\n\nconst getProminence = (variant: AlertTypes.Variant) => {\n  if (variant === Variants.Filled) {\n    return FabricsVariables.SentimentProminences.Strong;\n  }\n\n  if (variant === Variants.Subtle) {\n    return FabricsVariables.SentimentProminences.Subtle;\n  }\n\n  return FabricsVariables.SentimentProminences.Transparent;\n};\n\ntype AlertBasicProps = Required<PickTransient<IAlertProps, 'size' | 'alignment'>>;\ntype AlertVariantProps = Required<PickTransient<IAlertProps, 'variant'>>;\ntype AlertSentimentProps = Required<PickTransient<IAlertProps, 'sentiment'>>;\ntype AlertBannerProps = Required<PickTransient<IAlertProps, 'banner'>>;\ntype AlertHighlightProps = Required<PickTransient<IAlertProps, 'highlight'>>;\ntype AlertAutocloseProps = Required<PickTransient<IAlertProps, 'autoCloseTimeout'>>;\n\nconst fullWidth = keyframes`\n  from {\n    width: 0;\n  }\n  \n  to {\n    width: 100%;\n  }\n`;\n\nconst opacity = keyframes`\n  from {\n    opacity: 0;\n  }\n  \n  to {\n    opacity: 1;\n  }\n`;\n\nconst miniOpacity = keyframes`\n  from {\n    opacity: 0;\n  }\n  \n  to {\n    opacity: .1;\n  }\n`;\n\nconst AutoCloseContainer = styled.div<AlertVariantProps & AlertSentimentProps & AlertAutocloseProps>`\n  ${({ $sentiment, $variant, $autoCloseTimeout, theme }) => {\n    const layer = theme.layer({\n      sentiment: $sentiment,\n      sentimentProminence: FabricsVariables.SentimentProminences.Strong,\n    });\n\n    return css`\n      position: absolute;\n      inset-block: 0;\n      opacity: ${$variant === Variants.Filled ? 1 : 0.1};\n      left: 0;\n      right: 0;\n      overflow: hidden;\n      pointer-events: none;\n\n      &::after {\n        content: '';\n        position: relative;\n        height: 100%;\n        display: block;\n\n        @media (prefers-reduced-motion: no-preference) {\n          width: 0;\n          opacity: ${$variant === Variants.Filled ? 0.1 : 1};\n          will-change: width;\n          animation: ${fullWidth} ${$autoCloseTimeout}ms ease-out forwards;\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n          width: 100%;\n          opacity: 0;\n          will-change: opacity;\n          animation: ${$variant === Variants.Filled ? miniOpacity : opacity} 1s ease-out forwards;\n        }\n        background-color: ${layer[Variables.BackgroundSentiment]};\n        ${$variant === Variants.Filled &&\n        css`\n          mix-blend-mode: difference;\n        `}\n      }\n    `;\n  }};\n`;\n\nconst AlertContentContainer = styled.div<AlertBasicProps & AlertVariantProps>`\n  ${({ $size, $alignment, $variant }) => css`\n    position: relative;\n    display: flex;\n    flex: 1 0 0;\n    min-width: 0;\n    min-height: 100%;\n    overflow: hidden;\n    padding: ${AlertConsts.consts[$size][$alignment].padding.vertical}px\n      ${AlertConsts.consts[$size][$alignment].padding.horizontal}px;\n\n    ${$variant === Variants.Outlined &&\n    css`\n      padding: ${AlertConsts.consts[$size][$alignment].padding.vertical - 1}px\n        ${AlertConsts.consts[$size][$alignment].padding.horizontal - 1}px;\n    `}\n  `};\n`;\n\nconst Alert = styled.div<\n  AlertBasicProps & AlertVariantProps & AlertSentimentProps & AlertBannerProps & AlertHighlightProps\n>`\n  ${({ $size, $sentiment, $banner, $highlight, $variant, $alignment, theme }) => {\n    const currentModes = { sentiment: $sentiment, sentimentProminence: getProminence($variant) };\n    const layer = theme.layer(currentModes);\n\n    return css`\n      position: relative;\n      background-color: ${layer[Variables.BackgroundSentiment]};\n      color: ${layer[Variables.TextOnSentimentOnBackground]};\n      border-color: ${layer[Variables.BorderOnSentimentOnBackground]};\n\n      display: flex;\n      align-items: flex-start;\n      width: 100%;\n      &,\n      & > ${AutoCloseContainer} {\n        border-radius: ${$banner ? 0 : AlertConsts.consts[$size][$alignment].radius}px;\n      }\n      box-sizing: border-box;\n      min-height: ${AlertConsts.consts[$size][$alignment].minHeight}px;\n      min-width: 0;\n      margin: 0;\n      padding: 0;\n\n      ${$highlight &&\n      !$banner &&\n      css`\n        & > ${AlertContentContainer} {\n          margin-left: ${AlertConsts.consts[$size][$alignment].highlightContainerWidth}px;\n\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            top: ${AlertConsts.consts[$size][$alignment].highlightPadding}px;\n            bottom: ${AlertConsts.consts[$size][$alignment].highlightPadding}px;\n            left: calc(${AlertConsts.consts[$size][$alignment].highlightContainerOffset}px);\n            width: ${AlertConsts.consts[$size][$alignment].highlightWidth}px;\n            border-radius: 10000px;\n            background-color: ${layer[Variables.ForegroundOnSentiment]};\n          }\n        }\n      `};\n\n      ${$variant === Variants.Outlined &&\n      css`\n        border-width: 1px;\n        border-style: solid;\n      `}\n\n      ${$alignment === Directions.Horizontal &&\n      css`\n        justify-content: center;\n      `}\n      \n      ${$banner &&\n      $variant === Variants.Outlined &&\n      css`\n        border-right-width: 0;\n        border-left-width: 0;\n      `}\n    `;\n  }}\n`;\n\nconst MessageAndButtonContainer = styled.div<AlertBasicProps>`\n  ${({ $size, $alignment }) => css`\n    display: flex;\n    flex: 1 1 100%;\n    width: 100%;\n    min-width: 0;\n    overflow: hidden;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    gap: ${AlertConsts.consts[$size][$alignment].textIconGap}px;\n  `};\n`;\n\nconst MessageAndIconVerticalContainer = styled.div<AlertBasicProps>`\n  ${({ $alignment, $size }) => css`\n    display: flex;\n    flex: 1 0 0;\n    width: 100%;\n    min-width: 0;\n    flex-wrap: nowrap;\n    align-items: ${$alignment === Directions.Horizontal ? 'center' : 'flex-start'};\n    gap: ${AlertConsts.consts[$size][$alignment].textIconGap}px;\n    padding: ${AlertConsts.consts[$size][$alignment].innerPadding.top}px\n      ${AlertConsts.consts[$size][$alignment].innerPadding.right}px\n      ${AlertConsts.consts[$size][$alignment].innerPadding.bottom}px\n      ${AlertConsts.consts[$size][$alignment].innerPadding.left}px;\n\n    ${$alignment === Directions.Vertical &&\n    css`\n      padding-right: 0;\n    `};\n  `};\n`;\n\nconst IconContainer = styled.div<AlertBasicProps>`\n  ${({ $alignment, $size }) => css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    min-width: ${AlertConsts.consts[$size][$alignment].minIconSize ?? AlertConsts.consts[$size][$alignment].iconSize}px;\n    min-height: ${AlertConsts.consts[$size][$alignment].minIconSize ??\n    AlertConsts.consts[$size][$alignment].iconSize}px;\n\n    & > svg {\n      width: ${AlertConsts.consts[$size][$alignment].iconSize}px;\n      height: ${AlertConsts.consts[$size][$alignment].iconSize}px;\n    }\n  `};\n`;\n\nconst InnerContainer = styled.div<AlertBasicProps>`\n  ${({ $size, $alignment }) => css`\n    display: flex;\n    flex: 1 1 100%;\n    justify-content: space-between;\n    flex-wrap: nowrap;\n    min-width: 0;\n    gap: ${AlertConsts.consts[$size][$alignment].innerGap}px;\n    align-self: stretch;\n    align-items: center;\n\n    ${$alignment === Directions.Vertical &&\n    css`\n      flex-direction: column;\n      align-items: flex-start;\n    `}\n  `}\n`;\n\nconst AlertMessageContainer = styled.div<AlertBasicProps & AlertVariantProps>`\n  ${({ $size, $variant, $alignment, theme }) => css`\n    ${theme.typography('paragraph', getAlertBodySize($size))};\n    display: flex;\n    flex: 1 0 0;\n    padding: 0 ${AlertConsts.consts[$size][$alignment].innerPadding.right}px 0\n      ${AlertConsts.consts[$size][$alignment].innerPadding.left}px;\n\n    ${$alignment === Directions.Horizontal &&\n    css`\n      padding-left: 0;\n      padding-right: 0;\n    `};\n\n    overflow: hidden;\n\n    * {\n      color: inherit;\n      margin: 0;\n      padding: 0;\n\n      ${(!$variant || $variant === 'filled') &&\n      css`\n        .${LINK_CLASS} a {\n          &,\n          &:hover,\n          &:visited {\n            color: inherit;\n            border-color: inherit;\n          }\n        }\n      `};\n\n      ${$alignment === Directions.Horizontal &&\n      css`\n        white-space: nowrap;\n      `};\n    }\n\n    ${$alignment === Directions.Horizontal &&\n    css`\n      > p {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    `};\n\n    gap: ${AlertConsts.consts[$size][$alignment].textGap}px;\n\n    ${$alignment === Directions.Horizontal &&\n    css`\n      align-items: baseline;\n    `}\n\n    ${$alignment === Directions.Vertical &&\n    css`\n      align-items: flex-start;\n      flex-direction: column;\n    `}\n  `};\n`;\n\nconst AlertTitle = ({\n  $size,\n  $alignment,\n  children,\n}: PropsWithChildren<Required<PickTransient<IAlertProps, 'size' | 'alignment'>>>) => {\n  if ($alignment === Directions.Vertical) {\n    if ($size === Sizes.Large) {\n      return (\n        <Text bold={true} size={getLargerSize($size) as TextTypes.Size}>\n          {children}\n        </Text>\n      );\n    }\n\n    return (\n      <Label bold={true} size={getLargerSize($size) as LabelTypes.Size}>\n        {children}\n      </Label>\n    );\n  }\n\n  return (\n    <Text bold={true} size={$size}>\n      {children}\n    </Text>\n  );\n};\n\nconst AlertMessage = styled(Text)``;\n\nconst Actions = styled.div<AlertBasicProps>`\n  ${({ $size, $alignment }) => css`\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    gap: ${AlertConsts.consts[$size][$alignment].buttonGap}px;\n\n    ${$alignment === Directions.Vertical &&\n    css`\n      align-self: stretch;\n    `};\n  `};\n`;\n\nconst ActionButton = styled(OnSentimentButton)``;\n\nconst CloseButton = styled(OnSentimentButton)``;\n\nexport {\n  ActionButton,\n  Actions,\n  Alert,\n  AutoCloseContainer,\n  AlertContentContainer,\n  AlertTitle,\n  AlertMessage,\n  AlertMessageContainer,\n  CloseButton,\n  IconContainer,\n  InnerContainer,\n  MessageAndButtonContainer,\n  MessageAndIconVerticalContainer,\n};\n"],"names":["getProminence","variant","Variants","FabricsVariables","fullWidth","keyframes","opacity","miniOpacity","AutoCloseContainer","styled","$sentiment","$variant","$autoCloseTimeout","theme","layer","css","Variables","AlertContentContainer","$size","$alignment","AlertConsts.consts","Alert","$banner","$highlight","currentModes","Directions","MessageAndButtonContainer","MessageAndIconVerticalContainer","IconContainer","InnerContainer","AlertMessageContainer","getAlertBodySize","LINK_CLASS","AlertTitle","children","Sizes","jsx","Text","getLargerSize","Label","AlertMessage","Actions","ActionButton","OnSentimentButton","CloseButton"],"mappings":"mpBAiBMA,EAAiBC,GACjBA,IAAYC,EAAAA,SAAS,OAChBC,EAAAA,iBAAiB,qBAAqB,OAG3CF,IAAYC,EAAAA,SAAS,OAChBC,EAAAA,iBAAiB,qBAAqB,OAGxCA,EAAAA,iBAAiB,qBAAqB,YAUzCC,EAAYC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAUZC,EAAUD,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAUVE,EAAcF,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAUdG,EAAqBC,EAAAA,OAAO;AAAA,IAC9B,CAAC,CAAE,WAAAC,EAAY,SAAAC,EAAU,kBAAAC,EAAmB,MAAAC,KAAY,CACxD,MAAMC,EAAQD,EAAM,MAAM,CACxB,UAAWH,EACX,oBAAqBP,EAAAA,iBAAiB,qBAAqB,MAAA,CAC5D,EAED,OAAOY,EAAAA;AAAAA;AAAAA;AAAAA,iBAGMJ,IAAaT,EAAAA,SAAS,OAAS,EAAI,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAclCS,IAAaT,EAAAA,SAAS,OAAS,GAAM,CAAC;AAAA;AAAA,uBAEpCE,CAAS,IAAIQ,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAO9BD,IAAaT,EAAAA,SAAS,OAASK,EAAcD,CAAO;AAAA;AAAA,4BAE/CQ,EAAME,YAAU,mBAAmB,CAAC;AAAA,UACtDL,IAAaT,WAAS,QACxBa,EAAAA;AAAAA;AAAAA,SAEC;AAAA;AAAA,KAGP,CAAC;AAAA,EAGGE,EAAwBR,EAAAA,OAAO;AAAA,IACjC,CAAC,CAAE,MAAAS,EAAO,WAAAC,EAAY,SAAAR,KAAeI,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,eAO1BK,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,QAAQ,QAAQ;AAAA,QAC7DC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,QAAQ,UAAU;AAAA;AAAA,MAE1DR,IAAaT,WAAS,UACxBa,EAAAA;AAAAA,iBACaK,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,QAAQ,SAAW,CAAC;AAAA,UACjEC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,QAAQ,WAAa,CAAC;AAAA,KACjE;AAAA,GACF;AAAA,EAGGE,EAAQZ,EAAAA,OAAO;AAAA,IAGjB,CAAC,CAAE,MAAAS,EAAO,WAAAR,EAAY,QAAAY,EAAS,WAAAC,EAAY,SAAAZ,EAAU,WAAAQ,EAAY,MAAAN,KAAY,CAC7E,MAAMW,EAAe,CAAE,UAAWd,EAAY,oBAAqBV,EAAcW,CAAQ,CAAA,EACnFG,EAAQD,EAAM,MAAMW,CAAY,EAEtC,OAAOT,EAAAA;AAAAA;AAAAA,0BAEeD,EAAME,YAAU,mBAAmB,CAAC;AAAA,eAC/CF,EAAME,YAAU,2BAA2B,CAAC;AAAA,sBACrCF,EAAME,YAAU,6BAA6B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMxDR,CAAkB;AAAA,yBACLc,EAAU,EAAIF,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,MAAM;AAAA;AAAA;AAAA,oBAG/DC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,QAK3DI,GACF,CAACD,GACDP,EAAAA;AAAAA,cACQE,CAAqB;AAAA,yBACVG,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMnEC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,gBAAgB;AAAA,sBACnDC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,gBAAgB;AAAA,yBACnDC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,wBAAwB;AAAA,qBAClEC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,cAAc;AAAA;AAAA,gCAEzCL,EAAME,YAAU,qBAAqB,CAAC;AAAA;AAAA;AAAA,OAG/D;AAAA;AAAA,QAECL,IAAaT,WAAS,UACxBa,EAAAA;AAAAA;AAAAA;AAAAA,OAGC;AAAA;AAAA,QAECI,IAAeM,aAAW,YAC5BV,EAAAA;AAAAA;AAAAA,OAEC;AAAA;AAAA,QAECO,GACFX,IAAaT,EAAAA,SAAS,UACtBa,EAAAA;AAAAA;AAAAA;AAAAA,OAGC;AAAA,KAEL,CAAC;AAAA,EAGGW,EAA4BjB,EAAAA,OAAO;AAAA,IACrC,CAAC,CAAE,MAAAS,EAAO,WAAAC,CAAA,IAAiBJ,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,WAQpBK,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,WAAW;AAAA,GACzD;AAAA,EAGGQ,EAAkClB,EAAAA,OAAO;AAAA,IAC3C,CAAC,CAAE,WAAAU,EAAY,MAAAD,CAAA,IAAYH,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,mBAMZI,IAAeM,EAAAA,WAAW,WAAa,SAAW,YAAY;AAAA,WACtEL,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,WAAW;AAAA,eAC7CC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,aAAa,GAAG;AAAA,QAC7DC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,aAAa,KAAK;AAAA,QACxDC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,aAAa,MAAM;AAAA,QACzDC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,aAAa,IAAI;AAAA;AAAA,MAEzDA,IAAeM,aAAW,UAC5BV,EAAAA;AAAAA;AAAAA,KAEC;AAAA,GACF;AAAA,EAGGa,EAAgBnB,EAAAA,OAAO;AAAA,IACzB,CAAC,CAAE,WAAAU,EAAY,MAAAD,CAAA,IAAYH,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,iBAKdK,SAAmBF,CAAK,EAAEC,CAAU,EAAE,aAAeC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,QAAQ;AAAA,kBAClGC,SAAmBF,CAAK,EAAEC,CAAU,EAAE,aACpDC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,QAAQ;AAAA;AAAA;AAAA,eAGnCC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,QAAQ;AAAA,gBAC7CC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,QAAQ;AAAA;AAAA,GAE3D;AAAA,EAGGU,EAAiBpB,EAAAA,OAAO;AAAA,IAC1B,CAAC,CAAE,MAAAS,EAAO,WAAAC,CAAA,IAAiBJ,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,WAMpBK,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,QAAQ;AAAA;AAAA;AAAA;AAAA,MAInDA,IAAeM,aAAW,UAC5BV,EAAAA;AAAAA;AAAAA;AAAAA,KAGC;AAAA,GACF;AAAA,EAGGe,EAAwBrB,EAAAA,OAAO;AAAA,IACjC,CAAC,CAAE,MAAAS,EAAO,SAAAP,EAAU,WAAAQ,EAAY,MAAAN,KAAYE,EAAAA;AAAAA,MAC1CF,EAAM,WAAW,YAAakB,EAAAA,iBAAiBb,CAAK,CAAC,CAAC;AAAA;AAAA;AAAA,iBAG3CE,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,aAAa,KAAK;AAAA,QACjEC,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,aAAa,IAAI;AAAA;AAAA,MAEzDA,IAAeM,aAAW,YAC5BV,EAAAA;AAAAA;AAAAA;AAAAA,KAGC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SASI,CAACJ,GAAYA,IAAa,WAC7BI,EAAAA;AAAAA,WACKiB,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAQd;AAAA;AAAA,QAECb,IAAeM,aAAW,YAC5BV,EAAAA;AAAAA;AAAAA,OAEC;AAAA;AAAA;AAAA,MAGDI,IAAeM,aAAW,YAC5BV,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,KAKC;AAAA;AAAA,WAEMK,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,OAAO;AAAA;AAAA,MAElDA,IAAeM,aAAW,YAC5BV,EAAAA;AAAAA;AAAAA,KAEC;AAAA;AAAA,MAECI,IAAeM,aAAW,UAC5BV,EAAAA;AAAAA;AAAAA;AAAAA,KAGC;AAAA,GACF;AAAA,EAGGkB,EAAa,CAAC,CAClB,MAAAf,EACA,WAAAC,EACA,SAAAe,CACF,IACMf,IAAeM,EAAAA,WAAW,SACxBP,IAAUiB,EAAAA,MAAM,MAEhBC,EAAAA,IAACC,GAAK,KAAM,GAAM,KAAMC,gBAAcpB,CAAK,EACxC,SAAAgB,EACH,EAKFE,EAAAA,IAACG,GAAM,KAAM,GAAM,KAAMD,gBAAcpB,CAAK,EACzC,SAAAgB,EACH,QAKDG,EAAA,CAAK,KAAM,GAAM,KAAMnB,EACrB,SAAAgB,EACH,EAIEM,EAAe/B,EAAAA,OAAO4B,CAAI,IAE1BI,EAAUhC,EAAAA,OAAO;AAAA,IACnB,CAAC,CAAE,MAAAS,EAAO,WAAAC,CAAA,IAAiBJ,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,WAKpBK,EAAAA,OAAmBF,CAAK,EAAEC,CAAU,EAAE,SAAS;AAAA;AAAA,MAEpDA,IAAeM,aAAW,UAC5BV,EAAAA;AAAAA;AAAAA,KAEC;AAAA,GACF;AAAA,EAGG2B,EAAejC,EAAAA,OAAOkC,CAAiB,IAEvCC,EAAcnC,EAAAA,OAAOkC,CAAiB"}

package/build/cjs/components/Avatar/components/SimpleAvatar.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),r=require("react"),u=require("../../Icon/components/PersonSolid.js"),S=require("../SimpleAvatar.styles.js"),d=require("../../Flag/Flag.js"),s=()=>t.jsx(u,{}),g=({abbreviation:e})=>e&&e.length>0?e.slice(0,2):t.jsx(s,{}),m=({src:e,alt:i})=>{const[l,n]=r.useState(!1),[a,c]=r.useState();return r.useEffect(()=>{n(!1),c(void 0);const o=new Image;o.onload=()=>c(e),o.onerror=()=>n(!0),o.src=e},[e]),!a||l?t.jsx(s,{}):t.jsx(S.Image,{src:a,alt:i},e)},A={initials:g,icon:s,photo:m,flag:d},f=e=>A[e];exports.getSimpleAvatarComponent=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),o=require("react"),u=require("../../Icon/components/PersonSolid.js"),S=require("../SimpleAvatar.styles.js"),d=require("../../Flag/Flag.js"),s=()=>t.jsx(u,{"aria-label":"Default user avatar"}),g=({abbreviation:e})=>e&&e.length>0?e.slice(0,2):t.jsx(s,{}),m=({src:e,alt:c})=>{const[i,a]=o.useState(!1),[n,l]=o.useState();return o.useEffect(()=>{a(!1),l(void 0);const r=new Image;r.onload=()=>l(e),r.onerror=()=>a(!0),r.src=e},[e]),!n||i?t.jsx(s,{}):t.jsx(S.Image,{src:n,alt:c},e)},A={initials:g,icon:s,photo:m,flag:d},f=e=>A[e];exports.getSimpleAvatarComponent=f;
 //# sourceMappingURL=SimpleAvatar.js.map

package/build/cjs/components/Avatar/components/SimpleAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleAvatar.js","sources":["../../../../../src/components/Avatar/components/SimpleAvatar.tsx"],"sourcesContent":["import { type FC, useState, useEffect } from 'react';\n\nimport type { SimpleVariantComponentProps, VariantType } from '../utils/useSimpleProps';\nimport PersonSolid from '../../Icon/components/PersonSolid';\nimport * as Styled from '../SimpleAvatar.styles';\nimport Flag from '../../Flag/Flag';\n\nconst AvatarIcon: FC<SimpleVariantComponentProps<'icon'>> = () => <PersonSolid />;\nconst AvatarInitials: FC<SimpleVariantComponentProps<'initials'>> = ({ abbreviation }) =>\n  abbreviation && abbreviation.length > 0 ? abbreviation.slice(0, 2) : <AvatarIcon />;\nconst AvatarPhoto: FC<SimpleVariantComponentProps<'photo'>> = ({ src, alt }) => {\n  const [hasError, setHasError] = useState(false);\n  const [loadedSrc, setLoadedSrc] = useState<string>();\n\n  useEffect(() => {\n    setHasError(false);\n    setLoadedSrc(undefined);\n    const img = new Image();\n    img.onload = () => setLoadedSrc(src);\n    img.onerror = () => setHasError(true);\n    img.src = src;\n  }, [src]);\n\n  if (!loadedSrc || hasError) {\n    return <AvatarIcon />;\n  }\n\n  return <Styled.Image key={src} src={loadedSrc} alt={alt} />;\n};\n\nconst SIMPLE_AVATAR_COMPONENTS: { readonly [Variant in VariantType]: FC<SimpleVariantComponentProps<Variant>> } = {\n  initials: AvatarInitials,\n  icon: AvatarIcon,\n  photo: AvatarPhoto,\n  flag: Flag,\n} as const;\n\nexport const getSimpleAvatarComponent = <Variant extends VariantType>(\n  variant: Variant,\n): FC<SimpleVariantComponentProps<Variant>> => SIMPLE_AVATAR_COMPONENTS[variant];\n"],"names":["AvatarIcon","jsx","PersonSolid","AvatarInitials","abbreviation","AvatarPhoto","src","alt","hasError","setHasError","useState","loadedSrc","setLoadedSrc","useEffect","img","Styled.Image","SIMPLE_AVATAR_COMPONENTS","Flag","getSimpleAvatarComponent","variant"],"mappings":"6RAOMA,EAAsD,IAAMC,EAAAA,IAACC,EAAA,EAAY,EACzEC,EAA8D,CAAC,CAAE,aAAAC,CAAA,IACrEA,GAAgBA,EAAa,OAAS,EAAIA,EAAa,MAAM,EAAG,CAAC,QAAKJ,EAAA,EAAW,EAC7EK,EAAwD,CAAC,CAAE,IAAAC,EAAK,IAAAC,KAAU,CAC9E,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAAS,EAAK,EACxC,CAACC,EAAWC,CAAY,EAAIF,WAAA,EAWlC,OATAG,EAAAA,UAAU,IAAM,CACdJ,EAAY,EAAK,EACjBG,EAAa,MAAS,EACtB,MAAME,EAAM,IAAI,MAChBA,EAAI,OAAS,IAAMF,EAAaN,CAAG,EACnCQ,EAAI,QAAU,IAAML,EAAY,EAAI,EACpCK,EAAI,IAAMR,CACZ,EAAG,CAACA,CAAG,CAAC,EAEJ,CAACK,GAAaH,QACRR,EAAA,EAAW,QAGbe,EAAAA,MAAA,CAAuB,IAAKJ,EAAW,IAAAJ,GAArBD,CAA+B,CAC3D,EAEMU,EAA4G,CAChH,SAAUb,EACV,KAAMH,EACN,MAAOK,EACP,KAAMY,CACR,EAEaC,EACXC,GAC6CH,EAAyBG,CAAO"}
+{"version":3,"file":"SimpleAvatar.js","sources":["../../../../../src/components/Avatar/components/SimpleAvatar.tsx"],"sourcesContent":["import { type FC, useState, useEffect } from 'react';\n\nimport type { SimpleVariantComponentProps, VariantType } from '../utils/useSimpleProps';\nimport PersonSolid from '../../Icon/components/PersonSolid';\nimport * as Styled from '../SimpleAvatar.styles';\nimport Flag from '../../Flag/Flag';\n\nconst AvatarIcon: FC<SimpleVariantComponentProps<'icon'>> = () => <PersonSolid aria-label=\"Default user avatar\" />;\nconst AvatarInitials: FC<SimpleVariantComponentProps<'initials'>> = ({ abbreviation }) =>\n  abbreviation && abbreviation.length > 0 ? abbreviation.slice(0, 2) : <AvatarIcon />;\nconst AvatarPhoto: FC<SimpleVariantComponentProps<'photo'>> = ({ src, alt }) => {\n  const [hasError, setHasError] = useState(false);\n  const [loadedSrc, setLoadedSrc] = useState<string>();\n\n  useEffect(() => {\n    setHasError(false);\n    setLoadedSrc(undefined);\n    const img = new Image();\n    img.onload = () => setLoadedSrc(src);\n    img.onerror = () => setHasError(true);\n    img.src = src;\n  }, [src]);\n\n  if (!loadedSrc || hasError) {\n    return <AvatarIcon />;\n  }\n\n  return <Styled.Image key={src} src={loadedSrc} alt={alt} />;\n};\n\nconst SIMPLE_AVATAR_COMPONENTS: { readonly [Variant in VariantType]: FC<SimpleVariantComponentProps<Variant>> } = {\n  initials: AvatarInitials,\n  icon: AvatarIcon,\n  photo: AvatarPhoto,\n  flag: Flag,\n} as const;\n\nexport const getSimpleAvatarComponent = <Variant extends VariantType>(\n  variant: Variant,\n): FC<SimpleVariantComponentProps<Variant>> => SIMPLE_AVATAR_COMPONENTS[variant];\n"],"names":["AvatarIcon","jsx","PersonSolid","AvatarInitials","abbreviation","AvatarPhoto","src","alt","hasError","setHasError","useState","loadedSrc","setLoadedSrc","useEffect","img","Styled.Image","SIMPLE_AVATAR_COMPONENTS","Flag","getSimpleAvatarComponent","variant"],"mappings":"6RAOMA,EAAsD,IAAMC,EAAAA,IAACC,EAAA,CAAY,aAAW,qBAAA,CAAsB,EAC1GC,EAA8D,CAAC,CAAE,aAAAC,CAAA,IACrEA,GAAgBA,EAAa,OAAS,EAAIA,EAAa,MAAM,EAAG,CAAC,QAAKJ,EAAA,EAAW,EAC7EK,EAAwD,CAAC,CAAE,IAAAC,EAAK,IAAAC,KAAU,CAC9E,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAAS,EAAK,EACxC,CAACC,EAAWC,CAAY,EAAIF,WAAA,EAWlC,OATAG,EAAAA,UAAU,IAAM,CACdJ,EAAY,EAAK,EACjBG,EAAa,MAAS,EACtB,MAAME,EAAM,IAAI,MAChBA,EAAI,OAAS,IAAMF,EAAaN,CAAG,EACnCQ,EAAI,QAAU,IAAML,EAAY,EAAI,EACpCK,EAAI,IAAMR,CACZ,EAAG,CAACA,CAAG,CAAC,EAEJ,CAACK,GAAaH,QACRR,EAAA,EAAW,QAGbe,EAAAA,MAAA,CAAuB,IAAKJ,EAAW,IAAAJ,GAArBD,CAA+B,CAC3D,EAEMU,EAA4G,CAChH,SAAUb,EACV,KAAMH,EACN,MAAOK,EACP,KAAMY,CACR,EAEaC,EACXC,GAC6CH,EAAyBG,CAAO"}

package/build/cjs/components/Badge/Badge.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime"),g=require("react"),m=require("classnames"),q=require("../../react-base/src/consts/classes.js"),B=require("../../react-base/src/components/Badge/Badge.utils.js"),r=require("./Badge.styles.js"),$=g.forwardRef(({className:t,...n},i)=>{const{size:e,variant:d,sentiment:o,iconComponent:a,shouldRenderChildren:c,shouldRenderIcon:u,children:l,fixedWidth:h,...x}=B.useProps(n);return s.jsxs(r.Badge,{className:m(q.BADGE_CLASS,t),ref:i,$size:e,$variant:d,$fixedWidth:h,$sentiment:o,...x,children:[u&&a,c&&s.jsx(r.BadgeText,{$size:e,children:l})]})});module.exports=$;
+"use strict";const s=require("react/jsx-runtime"),g=require("react"),q=require("classnames"),B=require("../../react-base/src/consts/classes.js"),m=require("../../react-base/src/components/Badge/Badge.utils.js"),r=require("./Badge.styles.js"),$=g.forwardRef(({className:t,...i},n)=>{const{size:e,variant:d,sentiment:a,icon:c,shouldRenderChildren:o,shouldRenderIcon:u,children:l,fixedWidth:h,...x}=m.useProps(i);return s.jsxs(r.Badge,{className:q(B.BADGE_CLASS,t),ref:n,$size:e,$variant:d,$fixedWidth:h,$sentiment:a,...x,children:[u&&c,o&&s.jsx(r.BadgeText,{$size:e,children:l})]})});module.exports=$;
 //# sourceMappingURL=Badge.js.map

package/build/cjs/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport { BADGE_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { BadgeUtils } from 'acinguiux-ds-react-base/components/Badge';\n\nimport * as Styled from './Badge.styles';\nimport type { IBadgeProps } from './Badge.types';\n\nconst Badge = forwardRef<HTMLDivElement, IBadgeProps>(({ className, ...props }, ref) => {\n  const {\n    size,\n    variant,\n    sentiment,\n    iconComponent,\n    shouldRenderChildren,\n    shouldRenderIcon,\n    children,\n    fixedWidth,\n    ...badgeProps\n  } = BadgeUtils.useProps(props);\n\n  return (\n    <Styled.Badge\n      className={classNames(BADGE_CLASS, className)}\n      ref={ref}\n      $size={size}\n      $variant={variant}\n      $fixedWidth={fixedWidth}\n      $sentiment={sentiment}\n      {...badgeProps}\n    >\n      {shouldRenderIcon && iconComponent}\n      {shouldRenderChildren && <Styled.BadgeText $size={size}>{children}</Styled.BadgeText>}\n    </Styled.Badge>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","forwardRef","className","props","ref","size","variant","sentiment","iconComponent","shouldRenderChildren","shouldRenderIcon","children","fixedWidth","badgeProps","BadgeUtils.useProps","jsxs","Styled.Badge","classNames","BADGE_CLASS","jsx","Styled.BadgeText"],"mappings":"kPASMA,EAAQC,EAAAA,WAAwC,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAA,EAASC,IAAQ,CACtF,KAAM,CACJ,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,cAAAC,EACA,qBAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,WAAAC,EACA,GAAGC,CAAA,EACDC,EAAAA,SAAoBX,CAAK,EAE7B,OACEY,EAAAA,KAACC,EAAAA,MAAA,CACC,UAAWC,EAAWC,EAAAA,YAAahB,CAAS,EAC5C,IAAAE,EACA,MAAOC,EACP,SAAUC,EACV,YAAaM,EACb,WAAYL,EACX,GAAGM,EAEH,SAAA,CAAAH,GAAoBF,EACpBC,GAAwBU,EAAAA,IAACC,EAAAA,UAAA,CAAiB,MAAOf,EAAO,SAAAM,CAAA,CAAS,CAAA,CAAA,CAAA,CAGxE,CAAC"}
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport { BADGE_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { BadgeUtils } from 'acinguiux-ds-react-base/components/Badge';\n\nimport * as Styled from './Badge.styles';\nimport type { IBadgeProps } from './Badge.types';\n\nconst Badge = forwardRef<HTMLDivElement, IBadgeProps>(({ className, ...props }, ref) => {\n  const {\n    size,\n    variant,\n    sentiment,\n    icon,\n    shouldRenderChildren,\n    shouldRenderIcon,\n    children,\n    fixedWidth,\n    ...badgeProps\n  } = BadgeUtils.useProps(props);\n\n  return (\n    <Styled.Badge\n      className={classNames(BADGE_CLASS, className)}\n      ref={ref}\n      $size={size}\n      $variant={variant}\n      $fixedWidth={fixedWidth}\n      $sentiment={sentiment}\n      {...badgeProps}\n    >\n      {shouldRenderIcon && icon}\n      {shouldRenderChildren && <Styled.BadgeText $size={size}>{children}</Styled.BadgeText>}\n    </Styled.Badge>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","forwardRef","className","props","ref","size","variant","sentiment","icon","shouldRenderChildren","shouldRenderIcon","children","fixedWidth","badgeProps","BadgeUtils.useProps","jsxs","Styled.Badge","classNames","BADGE_CLASS","jsx","Styled.BadgeText"],"mappings":"kPASMA,EAAQC,EAAAA,WAAwC,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAA,EAASC,IAAQ,CACtF,KAAM,CACJ,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,KAAAC,EACA,qBAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,WAAAC,EACA,GAAGC,CAAA,EACDC,EAAAA,SAAoBX,CAAK,EAE7B,OACEY,EAAAA,KAACC,EAAAA,MAAA,CACC,UAAWC,EAAWC,EAAAA,YAAahB,CAAS,EAC5C,IAAAE,EACA,MAAOC,EACP,SAAUC,EACV,YAAaM,EACb,WAAYL,EACX,GAAGM,EAEH,SAAA,CAAAH,GAAoBF,EACpBC,GAAwBU,EAAAA,IAACC,EAAAA,UAAA,CAAiB,MAAOf,EAAO,SAAAM,CAAA,CAAS,CAAA,CAAA,CAAA,CAGxE,CAAC"}

package/build/cjs/components/Button/Button.styles.js

@@ -1,18 +1,18 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),m=require("../../react-base/src/utils/stylesUtils.js"),u=require("../../react-base/src/theme/types/layer.js"),d=require("../../react-base/src/components/Button/Button.utils.js"),b=require("../../react-base/src/components/Button/Button.styles.js"),i=require("acinguiux-ds-fabrics"),B=require("../../react-base/src/consts/index.js"),S=n.styled.span``,l=n.styled.span``,r=(e,t)=>n.css(({$size:s,theme:o})=>n.css`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),m=require("../../react-base/src/utils/stylesUtils.js"),u=require("../../react-base/src/theme/types/layer.js"),d=require("../../react-base/src/components/Button/Button.utils.js"),b=require("../../react-base/src/components/Button/Button.styles.js"),i=require("acinguiux-ds-fabrics"),B=require("../../react-base/src/consts/index.js"),F=require("../../react-base/src/consts/classes.js"),S=n.styled.span``,a=n.styled.span``,r=(e,t)=>n.css(({$size:s,theme:o})=>n.css`
       ${b.containerStylesForVariant(e)};
       &[aria-busy='true'] {
-        & > ${l}, & > ${l} > svg,
-        & ${l} > ${S} {
+        & > ${a}, & > ${a} > svg,
+        & ${a} > ${S} {
           opacity: 0;
           min-height: 0;
           height: 0;
         }
       }
 
-      & ${l}, &:is(a) {
+      & ${a} {
         ${b.stylesForVariant(e)};
         ${d.getSizeStyles(o,s)};
-        & > svg {
+        & > .${F.ICON_CLASS} {
           ${d.getSvgStyles(s)};
         }
       }
@@ -20,7 +20,7 @@
       &:focus-visible {
         ${m.getFocusStyles(o,e==="filled"&&t!=="Foundation")};
       }
-    `),a=(e,t,s=B.Variants.Filled,o={})=>{const c=d.getFabricStyles(e,s,t,o);return n.css`
+    `),l=(e,t,s=B.Variants.Filled,o={})=>{const c=d.getFabricStyles(e,s,t,o);return n.css`
     &,
     &:not(:disabled) {
       ${c.resting};
@@ -40,10 +40,10 @@
     }
   `},y=e=>n.css`
   ${r(e)};
-  ${({$variant:t,theme:s})=>a(s,"Foundation",t,{transparentRestingState:t==="filled"?i.FabricsVariables.TransparentRestingStates.False:i.FabricsVariables.TransparentRestingStates.True})};
+  ${({$variant:t,theme:s})=>l(s,"Foundation",e??t,{transparentRestingState:(e??t)==="filled"?i.FabricsVariables.TransparentRestingStates.False:i.FabricsVariables.TransparentRestingStates.True})};
 `,g=n.styled.button`
   ${y()};
-`,F=n.styled.a(({$variant:e,theme:t,$disabled:s})=>n.css`
+`,V=n.styled.a(({$variant:e,theme:t,$disabled:s})=>n.css`
     ${r()};
     text-decoration: underline;
 
@@ -59,18 +59,18 @@
       }
     `};
 
-    ${a(t,"Link",e,{disabled:s,transparentRestingState:e==="filled"?i.FabricsVariables.TransparentRestingStates.False:i.FabricsVariables.TransparentRestingStates.True})};
-  `),V=n.styled.button(({$variant:e,theme:t,$sentiment:s})=>n.css`
+    ${l(t,"Link",e,{disabled:s,transparentRestingState:e==="filled"?i.FabricsVariables.TransparentRestingStates.False:i.FabricsVariables.TransparentRestingStates.True})};
+  `),$=n.styled.button(({$variant:e,theme:t,$sentiment:s})=>n.css`
     ${r(e,"Sentiment")};
-    ${a(t,"Sentiment",e,{sentiment:s,sentimentProminence:e==="filled"?i.FabricsVariables.SentimentProminences.Strong:i.FabricsVariables.SentimentProminences.Transparent})};
-  `),$=n.styled.button(({$variant:e,theme:t,$sentiment:s,$sentimentProminence:o})=>n.css`
+    ${l(t,"Sentiment",e,{sentiment:s,sentimentProminence:e==="filled"?i.FabricsVariables.SentimentProminences.Strong:i.FabricsVariables.SentimentProminences.Transparent})};
+  `),O=n.styled.button(({$variant:e,theme:t,$sentiment:s,$sentimentProminence:o})=>n.css`
     ${r(e,"On Sentiment")};
-    ${a(t,"On Sentiment",e,{sentiment:s,sentimentProminence:o})};
-  `),O=n.styled.button(({$variant:e,theme:t,$brand:s})=>n.css`
+    ${l(t,"On Sentiment",e,{sentiment:s,sentimentProminence:o})};
+  `),p=n.styled.button(({$variant:e,theme:t,$brand:s})=>n.css`
     ${r(e,"On Brand")};
-    ${a(t,"On Brand",e,{brand:s})};
-  `),p=n.styled.button(({$variant:e,theme:t})=>n.css`
+    ${l(t,"On Brand",e,{brand:s})};
+  `),L=n.styled.button(({$variant:e,theme:t})=>n.css`
     ${r(e,"On Selected")};
-    ${a(t,"On Selected",e,{selectedProminence:e==="filled"?i.FabricsVariables.SelectedProminences.Strong:i.FabricsVariables.SelectedProminences.Subtle})};
-  `);exports.Button=g;exports.ButtonLabel=S;exports.ButtonLabelContainer=l;exports.ButtonLink=F;exports.OnBrandButton=O;exports.OnSelectedButton=p;exports.OnSentimentButton=$;exports.SentimentButton=V;exports.buttonCssWithVariant=y;
+    ${l(t,"On Selected",e,{selectedProminence:e==="filled"?i.FabricsVariables.SelectedProminences.Strong:i.FabricsVariables.SelectedProminences.Subtle})};
+  `);exports.Button=g;exports.ButtonLabel=S;exports.ButtonLabelContainer=a;exports.ButtonLink=V;exports.OnBrandButton=p;exports.OnSelectedButton=L;exports.OnSentimentButton=O;exports.SentimentButton=$;exports.buttonCssWithVariant=y;
 //# sourceMappingURL=Button.styles.js.map

package/build/cjs/components/Button/Button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.js","sources":["../../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { type Theme, type ModesType, Variables } from 'acinguiux-ds-react-base/theme';\nimport { ButtonStyles, ButtonTypes, ButtonUtils } from 'acinguiux-ds-react-base/components/Button';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { Variants } from 'acinguiux-ds-react-base/consts';\n\nimport type {\n  StyledButtonProps,\n  StyledOnBrandButtonProps,\n  StyledOnSelectedButtonProps,\n  StyledOnSentimentButtonProps,\n  StyledSentimentButtonProps,\n} from './Button.types';\n\nexport const ButtonLabel = styled.span``;\nexport const ButtonLabelContainer = styled.span``;\n\nconst commonStylesForVariant = (variant?: ButtonTypes.Variant, style?: ButtonUtils.ButtonKinds) =>\n  css<StyledButtonProps>(\n    ({ $size, theme }) => css<StyledButtonProps>`\n      ${ButtonStyles.containerStylesForVariant(variant)};\n      &[aria-busy='true'] {\n        & > ${ButtonLabelContainer}, & > ${ButtonLabelContainer} > svg,\n        & ${ButtonLabelContainer} > ${ButtonLabel} {\n          opacity: 0;\n          min-height: 0;\n          height: 0;\n        }\n      }\n\n      & ${ButtonLabelContainer}, &:is(a) {\n        ${ButtonStyles.stylesForVariant(variant)};\n        ${ButtonUtils.getSizeStyles(theme, $size)};\n        & > svg {\n          ${ButtonUtils.getSvgStyles($size)};\n        }\n      }\n\n      &:focus-visible {\n        ${getFocusStyles(theme, variant === 'filled' && style !== 'Foundation')};\n      }\n    `,\n  );\n\nconst stateStyles = (\n  theme: Theme,\n  style: ButtonUtils.ButtonKinds,\n  variant: ButtonTypes.Variant = Variants.Filled,\n  modes: ModesType = {},\n) => {\n  const styles = ButtonUtils.getFabricStyles(theme, variant, style, modes);\n\n  return css`\n    &,\n    &:not(:disabled) {\n      ${styles.resting};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      ${styles.disabled};\n    }\n\n    &:not(:disabled):hover {\n      ${styles.hover};\n    }\n\n    &:not(:disabled):active {\n      ${styles.press};\n    }\n  `;\n};\n\nexport const buttonCssWithVariant = (variant?: ButtonTypes.Variant) => css<StyledButtonProps>`\n  ${commonStylesForVariant(variant)};\n  ${({ $variant, theme }) =>\n    stateStyles(theme, 'Foundation', variant ?? $variant, {\n      transparentRestingState:\n        (variant ?? $variant) === 'filled'\n          ? FabricsVariables.TransparentRestingStates.False\n          : FabricsVariables.TransparentRestingStates.True,\n    })};\n`;\n\nexport const Button = styled.button<StyledButtonProps>`\n  ${buttonCssWithVariant()};\n`;\n\nexport const ButtonLink = styled.a<StyledButtonProps>(\n  ({ $variant, theme, $disabled }) => css<StyledButtonProps>`\n    ${commonStylesForVariant()};\n    text-decoration: underline;\n\n    &[aria-disabled='true'] {\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    ${$variant &&\n    $variant !== 'filled' &&\n    css`\n      &:link:visited {\n        color: ${theme.layer({ disabled: $disabled })[Variables.TextOnFoundationLinkVisited]};\n        border-color: ${theme.layer({ disabled: $disabled })[Variables.TextOnFoundationLinkVisited]};\n      }\n    `};\n\n    ${stateStyles(theme, 'Link', $variant, {\n      disabled: $disabled,\n      transparentRestingState:\n        $variant === 'filled'\n          ? FabricsVariables.TransparentRestingStates.False\n          : FabricsVariables.TransparentRestingStates.True,\n    })};\n  `,\n);\n\nexport const SentimentButton = styled.button<StyledSentimentButtonProps>(\n  ({ $variant, theme, $sentiment }) => css<StyledSentimentButtonProps>`\n    ${commonStylesForVariant($variant, 'Sentiment')};\n    ${stateStyles(theme, 'Sentiment', $variant, {\n      sentiment: $sentiment,\n      sentimentProminence:\n        $variant === 'filled'\n          ? FabricsVariables.SentimentProminences.Strong\n          : FabricsVariables.SentimentProminences.Transparent,\n    })};\n  `,\n);\n\nexport const OnSentimentButton = styled.button<StyledOnSentimentButtonProps>(\n  ({ $variant, theme, $sentiment, $sentimentProminence }) => css<StyledOnSentimentButtonProps>`\n    ${commonStylesForVariant($variant, 'On Sentiment')};\n    ${stateStyles(theme, 'On Sentiment', $variant, {\n      sentiment: $sentiment,\n      sentimentProminence: $sentimentProminence,\n    })};\n  `,\n);\n\nexport const OnBrandButton = styled.button<StyledOnBrandButtonProps>(\n  ({ $variant, theme, $brand }) => css<StyledOnBrandButtonProps>`\n    ${commonStylesForVariant($variant, 'On Brand')};\n    ${stateStyles(theme, 'On Brand', $variant, { brand: $brand })};\n  `,\n);\n\nexport const OnSelectedButton = styled.button<StyledOnSelectedButtonProps>(\n  ({ $variant, theme }) => css<StyledOnSelectedButtonProps>`\n    ${commonStylesForVariant($variant, 'On Selected')};\n    ${stateStyles(theme, 'On Selected', $variant, {\n      selectedProminence:\n        $variant === 'filled'\n          ? FabricsVariables.SelectedProminences.Strong\n          : FabricsVariables.SelectedProminences.Subtle,\n    })};\n  `,\n);\n"],"names":["ButtonLabel","styled","ButtonLabelContainer","commonStylesForVariant","variant","style","css","$size","theme","ButtonStyles.containerStylesForVariant","ButtonStyles.stylesForVariant","ButtonUtils.getSizeStyles","ButtonUtils.getSvgStyles","getFocusStyles","stateStyles","Variants","modes","styles","ButtonUtils.getFabricStyles","buttonCssWithVariant","$variant","FabricsVariables","Button","ButtonLink","$disabled","Variables","SentimentButton","$sentiment","OnSentimentButton","$sentimentProminence","OnBrandButton","$brand","OnSelectedButton"],"mappings":"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"}
+{"version":3,"file":"Button.styles.js","sources":["../../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { type Theme, type ModesType, Variables } from 'acinguiux-ds-react-base/theme';\nimport { ButtonStyles, ButtonTypes, ButtonUtils } from 'acinguiux-ds-react-base/components/Button';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { ICON_CLASS, Variants } from 'acinguiux-ds-react-base/consts';\n\nimport type {\n  StyledButtonProps,\n  StyledOnBrandButtonProps,\n  StyledOnSelectedButtonProps,\n  StyledOnSentimentButtonProps,\n  StyledSentimentButtonProps,\n} from './Button.types';\n\nexport const ButtonLabel = styled.span``;\nexport const ButtonLabelContainer = styled.span``;\n\nconst commonStylesForVariant = (variant?: ButtonTypes.Variant, style?: ButtonUtils.ButtonKinds) =>\n  css<StyledButtonProps>(\n    ({ $size, theme }) => css<StyledButtonProps>`\n      ${ButtonStyles.containerStylesForVariant(variant)};\n      &[aria-busy='true'] {\n        & > ${ButtonLabelContainer}, & > ${ButtonLabelContainer} > svg,\n        & ${ButtonLabelContainer} > ${ButtonLabel} {\n          opacity: 0;\n          min-height: 0;\n          height: 0;\n        }\n      }\n\n      & ${ButtonLabelContainer} {\n        ${ButtonStyles.stylesForVariant(variant)};\n        ${ButtonUtils.getSizeStyles(theme, $size)};\n        & > .${ICON_CLASS} {\n          ${ButtonUtils.getSvgStyles($size)};\n        }\n      }\n\n      &:focus-visible {\n        ${getFocusStyles(theme, variant === 'filled' && style !== 'Foundation')};\n      }\n    `,\n  );\n\nconst stateStyles = (\n  theme: Theme,\n  style: ButtonUtils.ButtonKinds,\n  variant: ButtonTypes.Variant = Variants.Filled,\n  modes: ModesType = {},\n) => {\n  const styles = ButtonUtils.getFabricStyles(theme, variant, style, modes);\n\n  return css`\n    &,\n    &:not(:disabled) {\n      ${styles.resting};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      ${styles.disabled};\n    }\n\n    &:not(:disabled):hover {\n      ${styles.hover};\n    }\n\n    &:not(:disabled):active {\n      ${styles.press};\n    }\n  `;\n};\n\nexport const buttonCssWithVariant = (variant?: ButtonTypes.Variant) => css<StyledButtonProps>`\n  ${commonStylesForVariant(variant)};\n  ${({ $variant, theme }) =>\n    stateStyles(theme, 'Foundation', variant ?? $variant, {\n      transparentRestingState:\n        (variant ?? $variant) === 'filled'\n          ? FabricsVariables.TransparentRestingStates.False\n          : FabricsVariables.TransparentRestingStates.True,\n    })};\n`;\n\nexport const Button = styled.button<StyledButtonProps>`\n  ${buttonCssWithVariant()};\n`;\n\nexport const ButtonLink = styled.a<StyledButtonProps>(\n  ({ $variant, theme, $disabled }) => css<StyledButtonProps>`\n    ${commonStylesForVariant()};\n    text-decoration: underline;\n\n    &[aria-disabled='true'] {\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    ${$variant &&\n    $variant !== 'filled' &&\n    css`\n      &:link:visited {\n        color: ${theme.layer({ disabled: $disabled })[Variables.TextOnFoundationLinkVisited]};\n        border-color: ${theme.layer({ disabled: $disabled })[Variables.TextOnFoundationLinkVisited]};\n      }\n    `};\n\n    ${stateStyles(theme, 'Link', $variant, {\n      disabled: $disabled,\n      transparentRestingState:\n        $variant === 'filled'\n          ? FabricsVariables.TransparentRestingStates.False\n          : FabricsVariables.TransparentRestingStates.True,\n    })};\n  `,\n);\n\nexport const SentimentButton = styled.button<StyledSentimentButtonProps>(\n  ({ $variant, theme, $sentiment }) => css<StyledSentimentButtonProps>`\n    ${commonStylesForVariant($variant, 'Sentiment')};\n    ${stateStyles(theme, 'Sentiment', $variant, {\n      sentiment: $sentiment,\n      sentimentProminence:\n        $variant === 'filled'\n          ? FabricsVariables.SentimentProminences.Strong\n          : FabricsVariables.SentimentProminences.Transparent,\n    })};\n  `,\n);\n\nexport const OnSentimentButton = styled.button<StyledOnSentimentButtonProps>(\n  ({ $variant, theme, $sentiment, $sentimentProminence }) => css<StyledOnSentimentButtonProps>`\n    ${commonStylesForVariant($variant, 'On Sentiment')};\n    ${stateStyles(theme, 'On Sentiment', $variant, {\n      sentiment: $sentiment,\n      sentimentProminence: $sentimentProminence,\n    })};\n  `,\n);\n\nexport const OnBrandButton = styled.button<StyledOnBrandButtonProps>(\n  ({ $variant, theme, $brand }) => css<StyledOnBrandButtonProps>`\n    ${commonStylesForVariant($variant, 'On Brand')};\n    ${stateStyles(theme, 'On Brand', $variant, { brand: $brand })};\n  `,\n);\n\nexport const OnSelectedButton = styled.button<StyledOnSelectedButtonProps>(\n  ({ $variant, theme }) => css<StyledOnSelectedButtonProps>`\n    ${commonStylesForVariant($variant, 'On Selected')};\n    ${stateStyles(theme, 'On Selected', $variant, {\n      selectedProminence:\n        $variant === 'filled'\n          ? FabricsVariables.SelectedProminences.Strong\n          : FabricsVariables.SelectedProminences.Subtle,\n    })};\n  `,\n);\n"],"names":["ButtonLabel","styled","ButtonLabelContainer","commonStylesForVariant","variant","style","css","$size","theme","ButtonStyles.containerStylesForVariant","ButtonStyles.stylesForVariant","ButtonUtils.getSizeStyles","ICON_CLASS","ButtonUtils.getSvgStyles","getFocusStyles","stateStyles","Variants","modes","styles","ButtonUtils.getFabricStyles","buttonCssWithVariant","$variant","FabricsVariables","Button","ButtonLink","$disabled","Variables","SentimentButton","$sentiment","OnSentimentButton","$sentimentProminence","OnBrandButton","$brand","OnSelectedButton"],"mappings":"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"}

package/build/cjs/components/Card/Card.js

@@ -1,2 +1,2 @@
-"use strict";const a=require("react/jsx-runtime"),f=require("react"),h=require("classnames"),n=require("../../react-base/src/consts/index.js"),u=require("./Card.styles.js"),d=require("./components/CardBar/CardBar.js"),w=require("../../react-base/src/consts/classes.js"),R=f.forwardRef(({className:o,size:e=`${n.Sizes.Medium}`,direction:s=`${n.Directions.Vertical}`,padding:c=!0,bgColor:i=!1,headerBorder:j,footerBorder:q,borders:$=!1,outlined:x=!1,children:y,onClick:l,header:r,footer:t,isClickable:C,...b},m)=>a.jsxs(u.Card,{ref:m,className:h(w.CARD_CLASS,o),$size:e,$direction:s,$outlined:x,$isClickable:!!C||!!l,onClick:l,...b,children:[!!r&&a.jsx(d,{size:e,bar:r,type:"header",direction:s,borders:j??$,bgColor:i,padding:c}),a.jsx(u.CardBody,{$size:e,$direction:s,$withHeader:!!r&&Object.keys(r).length>0,$withFooter:!!t&&Object.keys(t).length>0,$padding:c,$borders:$,$bgColor:i,children:y}),!!t&&a.jsx(d,{size:e,bar:t,type:"footer",direction:s,borders:q??$,bgColor:i,padding:c})]}));module.exports=R;
+"use strict";const a=require("react/jsx-runtime"),$=require("react"),f=require("classnames"),o=require("../../react-base/src/consts/index.js"),d=require("./Card.styles.js"),j=require("./components/CardBar/CardBar.js"),w=require("../../react-base/src/consts/classes.js"),A=$.forwardRef(({className:q,size:e=`${o.Sizes.Medium}`,direction:s=`${o.Directions.Vertical}`,padding:c=!0,bgColor:i=!1,headerBorder:x,footerBorder:y,borders:l=!1,outlined:C=!1,children:n,onClick:u,header:r,footer:t,isClickable:b,...h},m)=>a.jsxs(d.Card,{ref:m,className:f(w.CARD_CLASS,q),$size:e,$direction:s,$outlined:C,$isClickable:!!b||!!u,onClick:u,...h,children:[!!r&&a.jsx(j,{size:e,bar:r,type:"header",direction:s,borders:x??l,bgColor:i,padding:c}),$.Children.toArray(n).length>0?a.jsx(d.CardBody,{$size:e,$direction:s,$withHeader:!!r&&Object.keys(r).length>0,$withFooter:!!t&&Object.keys(t).length>0,$padding:c,$borders:l,$bgColor:i,children:n}):null,!!t&&a.jsx(j,{size:e,bar:t,type:"footer",direction:s,borders:y??l,bgColor:i,padding:c})]}));module.exports=A;
 //# sourceMappingURL=Card.js.map

package/build/cjs/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { forwardRef, type ReactElement } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, Directions, CARD_CLASS } from 'acinguiux-ds-react-base/consts';\n\nimport * as Styled from './Card.styles';\nimport type { ICardProps } from './Card.types';\nimport CardBar from './components/CardBar/CardBar';\n\nconst Card = forwardRef<HTMLDivElement, ICardProps>(\n  (\n    {\n      className,\n      size = `${Sizes.Medium}`,\n      direction = `${Directions.Vertical}`,\n      padding = true,\n      bgColor = false,\n      headerBorder,\n      footerBorder,\n      borders = false,\n      outlined = false,\n      children,\n      onClick,\n      header,\n      footer,\n      isClickable,\n      ...rest\n    },\n    ref,\n  ): ReactElement => (\n    <Styled.Card\n      ref={ref}\n      className={classNames(CARD_CLASS, className)}\n      $size={size}\n      $direction={direction}\n      $outlined={outlined}\n      $isClickable={!!isClickable || !!onClick}\n      onClick={onClick}\n      {...rest}\n    >\n      {!!header && (\n        <CardBar\n          size={size}\n          bar={header}\n          type=\"header\"\n          direction={direction}\n          borders={headerBorder ?? borders}\n          bgColor={bgColor}\n          padding={padding}\n        />\n      )}\n      <Styled.CardBody\n        $size={size}\n        $direction={direction}\n        $withHeader={!!header && Object.keys(header).length > 0}\n        $withFooter={!!footer && Object.keys(footer).length > 0}\n        $padding={padding}\n        $borders={borders}\n        $bgColor={bgColor}\n      >\n        {children}\n      </Styled.CardBody>\n      {!!footer && (\n        <CardBar\n          size={size}\n          bar={footer}\n          type=\"footer\"\n          direction={direction}\n          borders={footerBorder ?? borders}\n          bgColor={bgColor}\n          padding={padding}\n        />\n      )}\n    </Styled.Card>\n  ),\n);\n\nexport default Card;\n"],"names":["Card","forwardRef","className","size","Sizes","direction","Directions","padding","bgColor","headerBorder","footerBorder","borders","outlined","children","onClick","header","footer","isClickable","rest","ref","jsxs","Styled.Card","classNames","CARD_CLASS","jsx","CardBar","Styled.CardBody"],"mappings":"8QASMA,EAAOC,EAAAA,WACX,CACE,CACE,UAAAC,EACA,KAAAC,EAAO,GAAGC,QAAM,MAAM,GACtB,UAAAC,EAAY,GAAGC,aAAW,QAAQ,GAClC,QAAAC,EAAU,GACV,QAAAC,EAAU,GACV,aAAAC,EACA,aAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EAAW,GACX,SAAAC,EACA,QAAAC,EACA,OAAAC,EACA,OAAAC,EACA,YAAAC,EACA,GAAGC,CAAA,EAELC,IAEAC,EAAAA,KAACC,EAAAA,KAAA,CACC,IAAAF,EACA,UAAWG,EAAWC,EAAAA,WAAYrB,CAAS,EAC3C,MAAOC,EACP,WAAYE,EACZ,UAAWO,EACX,aAAc,CAAC,CAACK,GAAe,CAAC,CAACH,EACjC,QAAAA,EACC,GAAGI,EAEH,SAAA,CAAA,CAAC,CAACH,GACDS,EAAAA,IAACC,EAAA,CACC,KAAAtB,EACA,IAAKY,EACL,KAAK,SACL,UAAAV,EACA,QAASI,GAAgBE,EACzB,QAAAH,EACA,QAAAD,CAAA,CAAA,EAGJiB,EAAAA,IAACE,EAAAA,SAAA,CACC,MAAOvB,EACP,WAAYE,EACZ,YAAa,CAAC,CAACU,GAAU,OAAO,KAAKA,CAAM,EAAE,OAAS,EACtD,YAAa,CAAC,CAACC,GAAU,OAAO,KAAKA,CAAM,EAAE,OAAS,EACtD,SAAUT,EACV,SAAUI,EACV,SAAUH,EAET,SAAAK,CAAA,CAAA,EAEF,CAAC,CAACG,GACDQ,EAAAA,IAACC,EAAA,CACC,KAAAtB,EACA,IAAKa,EACL,KAAK,SACL,UAAAX,EACA,QAASK,GAAgBC,EACzB,QAAAH,EACA,QAAAD,CAAA,CAAA,CACF,CAAA,CAAA,CAIR"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { Children, forwardRef, type ReactElement } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, Directions, CARD_CLASS } from 'acinguiux-ds-react-base/consts';\n\nimport * as Styled from './Card.styles';\nimport type { ICardProps } from './Card.types';\nimport CardBar from './components/CardBar/CardBar';\n\nconst Card = forwardRef<HTMLDivElement, ICardProps>(\n  (\n    {\n      className,\n      size = `${Sizes.Medium}`,\n      direction = `${Directions.Vertical}`,\n      padding = true,\n      bgColor = false,\n      headerBorder,\n      footerBorder,\n      borders = false,\n      outlined = false,\n      children,\n      onClick,\n      header,\n      footer,\n      isClickable,\n      ...rest\n    },\n    ref,\n  ): ReactElement => (\n    <Styled.Card\n      ref={ref}\n      className={classNames(CARD_CLASS, className)}\n      $size={size}\n      $direction={direction}\n      $outlined={outlined}\n      $isClickable={!!isClickable || !!onClick}\n      onClick={onClick}\n      {...rest}\n    >\n      {!!header && (\n        <CardBar\n          size={size}\n          bar={header}\n          type=\"header\"\n          direction={direction}\n          borders={headerBorder ?? borders}\n          bgColor={bgColor}\n          padding={padding}\n        />\n      )}\n      {Children.toArray(children).length > 0 ? (\n        <Styled.CardBody\n          $size={size}\n          $direction={direction}\n          $withHeader={!!header && Object.keys(header).length > 0}\n          $withFooter={!!footer && Object.keys(footer).length > 0}\n          $padding={padding}\n          $borders={borders}\n          $bgColor={bgColor}\n        >\n          {children}\n        </Styled.CardBody>\n      ) : null}\n      {!!footer && (\n        <CardBar\n          size={size}\n          bar={footer}\n          type=\"footer\"\n          direction={direction}\n          borders={footerBorder ?? borders}\n          bgColor={bgColor}\n          padding={padding}\n        />\n      )}\n    </Styled.Card>\n  ),\n);\n\nexport default Card;\n"],"names":["Card","forwardRef","className","size","Sizes","direction","Directions","padding","bgColor","headerBorder","footerBorder","borders","outlined","children","onClick","header","footer","isClickable","rest","ref","jsxs","Styled.Card","classNames","CARD_CLASS","jsx","CardBar","Children","Styled.CardBody"],"mappings":"8QASMA,EAAOC,EAAAA,WACX,CACE,CACE,UAAAC,EACA,KAAAC,EAAO,GAAGC,QAAM,MAAM,GACtB,UAAAC,EAAY,GAAGC,aAAW,QAAQ,GAClC,QAAAC,EAAU,GACV,QAAAC,EAAU,GACV,aAAAC,EACA,aAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EAAW,GACX,SAAAC,EACA,QAAAC,EACA,OAAAC,EACA,OAAAC,EACA,YAAAC,EACA,GAAGC,CAAA,EAELC,IAEAC,EAAAA,KAACC,EAAAA,KAAA,CACC,IAAAF,EACA,UAAWG,EAAWC,EAAAA,WAAYrB,CAAS,EAC3C,MAAOC,EACP,WAAYE,EACZ,UAAWO,EACX,aAAc,CAAC,CAACK,GAAe,CAAC,CAACH,EACjC,QAAAA,EACC,GAAGI,EAEH,SAAA,CAAA,CAAC,CAACH,GACDS,EAAAA,IAACC,EAAA,CACC,KAAAtB,EACA,IAAKY,EACL,KAAK,SACL,UAAAV,EACA,QAASI,GAAgBE,EACzB,QAAAH,EACA,QAAAD,CAAA,CAAA,EAGHmB,EAAAA,SAAS,QAAQb,CAAQ,EAAE,OAAS,EACnCW,EAAAA,IAACG,EAAAA,SAAA,CACC,MAAOxB,EACP,WAAYE,EACZ,YAAa,CAAC,CAACU,GAAU,OAAO,KAAKA,CAAM,EAAE,OAAS,EACtD,YAAa,CAAC,CAACC,GAAU,OAAO,KAAKA,CAAM,EAAE,OAAS,EACtD,SAAUT,EACV,SAAUI,EACV,SAAUH,EAET,SAAAK,CAAA,CAAA,EAED,KACH,CAAC,CAACG,GACDQ,EAAAA,IAACC,EAAA,CACC,KAAAtB,EACA,IAAKa,EACL,KAAK,SACL,UAAAX,EACA,QAASK,GAAgBC,EACzB,QAAAH,EACA,QAAAD,CAAA,CAAA,CACF,CAAA,CAAA,CAIR"}

package/build/cjs/components/Card/Card.styles.js

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),i=require("../../react-base/src/consts/index.js"),s=require("../../react-base/src/components/Card/Card.consts.js"),c=require("../../react-base/src/theme/types/layer.js"),g=require("../../react-base/src/utils/stylesUtils.js"),y=require("../../react-base/src/utils/sizesUtils.js"),$=require("./components/CardBar/CardBar.styles.js"),b=o.styled.div(({$size:r,$outlined:d,$direction:n,$isClickable:a,theme:t})=>{const e=t.layer({foundation:"surface"});return o.css`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),i=require("../../react-base/src/consts/index.js"),s=require("../../react-base/src/components/Card/Card.consts.js"),c=require("../../react-base/src/theme/types/layer.js"),g=require("../../react-base/src/utils/stylesUtils.js"),y=require("../../react-base/src/utils/sizesUtils.js"),$=require("./components/CardBar/CardBar.styles.js"),b=o.styled.div(({$size:r,$outlined:e,$direction:n,$isClickable:a,theme:t})=>{const d=t.layer({foundation:"surface"});return o.css`
       display: flex;
       flex-direction: ${n===i.Directions.Vertical?"column":"row"};
       width: 100%;
-      background-color: ${e[c.Variables.BackgroundFoundation]};
-      ${d&&o.css`
-        border: 1px solid ${e[c.Variables.BorderOnFoundationSubtle]};
+      background-color: ${d[c.Variables.BackgroundFoundation]};
+      ${e&&o.css`
+        border: 1px solid ${d[c.Variables.BorderOnFoundationSubtle]};
       `};
       transition: filter 0.3s ease;
       border-radius: ${s.consts[r].borderRadius}px;
@@ -34,7 +34,7 @@
   width: 100%;
   height: 100%;
   transition: transform 0.5s;
-`,f=o.styled(b)(({$size:r=`${i.Sizes.Medium}`,$backgroundImage:d,$interactive:n,$backgroundPosition:a="center",theme:t})=>o.css`
+`,f=o.styled(b)(({$size:r=`${i.Sizes.Medium}`,$backgroundImage:e,$interactive:n,$backgroundPosition:a="center",theme:t})=>o.css`
     position: relative;
     align-items: flex-end;
     height: 100%;
@@ -49,8 +49,8 @@
     }
 
     & > ${l} {
-      ${d&&o.css`
-        background-image: url(${d});
+      ${e&&o.css`
+        background-image: url(${e});
         background-position: ${a};
         background-size: cover;
       `}
@@ -61,33 +61,32 @@
         transform: scale(1.05);
       }
     `}
-  `),x=o.styled.div(({$size:r,$padding:d,$bgColor:n,$withHeader:a,$withFooter:t,$direction:e,theme:u})=>{const p=u.layer({foundation:n?"section":"surface"});return o.css`
+  `),x=o.styled.div(({$size:r,$padding:e,$bgColor:n,$withHeader:a,$withFooter:t,$direction:d,theme:u})=>{const p=u.layer({foundation:n?"section":"surface"});return o.css`
     ${u.typography("paragraph",y.getParagraphTypographySize(r))};
     display: grid;
-    flex-grow: 1;
     color: ${p[c.Variables.TextOnFoundationStrong]};
     background-color: ${p[c.Variables.BackgroundFoundation]};
 
-    ${d&&o.css`
+    ${e&&o.css`
       padding: ${s.consts[r].padding}px;
     `}
 
-    ${e===i.Directions.Horizontal&&!a&&o.css`
+    ${d===i.Directions.Horizontal&&!a&&o.css`
       border-top-left-radius: ${s.consts[r].borderRadius}px;
       border-bottom-left-radius: ${s.consts[r].borderRadius}px;
     `}
       
-      ${e===i.Directions.Horizontal&&!t&&o.css`
+      ${d===i.Directions.Horizontal&&!t&&o.css`
       border-top-right-radius: ${s.consts[r].borderRadius}px;
       border-bottom-right-radius: ${s.consts[r].borderRadius}px;
     `}
 
-      ${e===i.Directions.Vertical&&!a&&o.css`
+      ${d===i.Directions.Vertical&&!a&&o.css`
       border-top-left-radius: ${s.consts[r].borderRadius}px;
       border-top-right-radius: ${s.consts[r].borderRadius}px;
     `}
 
-      ${e===i.Directions.Vertical&&!t&&o.css`
+      ${d===i.Directions.Vertical&&!t&&o.css`
       border-bottom-right-radius: ${s.consts[r].borderRadius}px;
       border-bottom-left-radius: ${s.consts[r].borderRadius}px;
     `}

package/build/cjs/components/Card/Card.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.js","sources":["../../../../src/components/Card/Card.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { Directions, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { CardConsts } from 'acinguiux-ds-react-base/components/Card';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { getParagraphTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport type { ICardProps, IInsetCardProps } from './Card.types';\nimport { CardBar } from './components/CardBar/CardBar.styles';\n\ntype CardStylePropKeys = 'outlined' | 'direction' | 'isClickable' | 'size';\n\nconst Card = styled.div<Required<PickTransient<ICardProps, CardStylePropKeys>>>(\n  ({ $size, $outlined, $direction, $isClickable, theme }) => {\n    const layer = theme.layer({ foundation: 'surface' });\n\n    return css`\n      display: flex;\n      flex-direction: ${$direction === Directions.Vertical ? 'column' : 'row'};\n      width: 100%;\n      background-color: ${layer[Variables.BackgroundFoundation]};\n      ${$outlined &&\n      css`\n        border: 1px solid ${layer[Variables.BorderOnFoundationSubtle]};\n      `};\n      transition: filter 0.3s ease;\n      border-radius: ${CardConsts.consts[$size].borderRadius}px;\n\n      ${$isClickable &&\n      css`\n        text-decoration: none;\n        color: inherit;\n        cursor: pointer;\n\n        &:hover {\n          filter: ${theme.dropShadows.low2};\n        }\n\n        &:active {\n          filter: ${theme.dropShadows.low1};\n        }\n      `}\n\n      &:focus-visible {\n        ${getFocusStyles(theme)};\n      }\n    `;\n  },\n);\n\nconst InsetCardBody = styled.div`\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.5s;\n`;\n\nconst InsetCard = styled(Card)<\n  PickTransient<IInsetCardProps, 'backgroundImage' | 'backgroundPosition' | 'interactive'>\n>(\n  ({ $size = `${Sizes.Medium}`, $backgroundImage, $interactive, $backgroundPosition = 'center', theme }) => css`\n    position: relative;\n    align-items: flex-end;\n    height: 100%;\n    padding: ${CardConsts.consts[$size].padding}px;\n    border-radius: ${CardConsts.consts[$size].borderRadius}px;\n    background-color: ${theme.layer()[Variables.BackgroundFoundation]};\n    overflow: hidden;\n\n    & > ${CardBar} {\n      padding: ${CardConsts.consts[$size].innerCardPadding}px;\n      position: relative;\n    }\n\n    & > ${InsetCardBody} {\n      ${$backgroundImage &&\n      css`\n        background-image: url(${$backgroundImage});\n        background-position: ${$backgroundPosition};\n        background-size: cover;\n      `}\n    }\n\n    ${$interactive &&\n    css`\n      &:hover > ${InsetCardBody} {\n        transform: scale(1.05);\n      }\n    `}\n  `,\n);\n\ntype CardBodyStylePropKeys = 'padding' | 'bgColor' | 'direction' | 'borders';\n\nconst CardBody = styled.div<\n  Required<PickTransient<ICardProps, 'size'>> &\n    PickTransient<ICardProps, CardBodyStylePropKeys> & {\n      $withHeader?: boolean;\n      $withFooter?: boolean;\n    }\n>(({ $size, $padding, $bgColor, $withHeader, $withFooter, $direction, theme }) => {\n  const layer = theme.layer({ foundation: $bgColor ? 'section' : 'surface' });\n\n  return css`\n    ${theme.typography('paragraph', getParagraphTypographySize($size))};\n    display: grid;\n    flex-grow: 1;\n    color: ${layer[Variables.TextOnFoundationStrong]};\n    background-color: ${layer[Variables.BackgroundFoundation]};\n\n    ${$padding &&\n    css`\n      padding: ${CardConsts.consts[$size].padding}px;\n    `}\n\n    ${$direction === Directions.Horizontal &&\n    !$withHeader &&\n    css`\n      border-top-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n      border-bottom-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n    `}\n      \n      ${$direction === Directions.Horizontal &&\n    !$withFooter &&\n    css`\n      border-top-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n      border-bottom-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n    `}\n\n      ${$direction === Directions.Vertical &&\n    !$withHeader &&\n    css`\n      border-top-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n      border-top-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n    `}\n\n      ${$direction === Directions.Vertical &&\n    !$withFooter &&\n    css`\n      border-bottom-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n      border-bottom-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n    `}\n\n      > img {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n    }\n  `;\n});\n\nexport { Card, InsetCard, InsetCardBody, CardBody };\n"],"names":["Card","styled","$size","$outlined","$direction","$isClickable","theme","layer","css","Directions","Variables","CardConsts.consts","getFocusStyles","InsetCardBody","InsetCard","Sizes","$backgroundImage","$interactive","$backgroundPosition","CardBar","CardBody","$padding","$bgColor","$withHeader","$withFooter","getParagraphTypographySize"],"mappings":"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"}
+{"version":3,"file":"Card.styles.js","sources":["../../../../src/components/Card/Card.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { Directions, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { CardConsts } from 'acinguiux-ds-react-base/components/Card';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { getParagraphTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport type { ICardProps, IInsetCardProps } from './Card.types';\nimport { CardBar } from './components/CardBar/CardBar.styles';\n\ntype CardStylePropKeys = 'outlined' | 'direction' | 'isClickable' | 'size';\n\nconst Card = styled.div<Required<PickTransient<ICardProps, CardStylePropKeys>>>(\n  ({ $size, $outlined, $direction, $isClickable, theme }) => {\n    const layer = theme.layer({ foundation: 'surface' });\n\n    return css`\n      display: flex;\n      flex-direction: ${$direction === Directions.Vertical ? 'column' : 'row'};\n      width: 100%;\n      background-color: ${layer[Variables.BackgroundFoundation]};\n      ${$outlined &&\n      css`\n        border: 1px solid ${layer[Variables.BorderOnFoundationSubtle]};\n      `};\n      transition: filter 0.3s ease;\n      border-radius: ${CardConsts.consts[$size].borderRadius}px;\n\n      ${$isClickable &&\n      css`\n        text-decoration: none;\n        color: inherit;\n        cursor: pointer;\n\n        &:hover {\n          filter: ${theme.dropShadows.low2};\n        }\n\n        &:active {\n          filter: ${theme.dropShadows.low1};\n        }\n      `}\n\n      &:focus-visible {\n        ${getFocusStyles(theme)};\n      }\n    `;\n  },\n);\n\nconst InsetCardBody = styled.div`\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.5s;\n`;\n\nconst InsetCard = styled(Card)<\n  PickTransient<IInsetCardProps, 'backgroundImage' | 'backgroundPosition' | 'interactive'>\n>(\n  ({ $size = `${Sizes.Medium}`, $backgroundImage, $interactive, $backgroundPosition = 'center', theme }) => css`\n    position: relative;\n    align-items: flex-end;\n    height: 100%;\n    padding: ${CardConsts.consts[$size].padding}px;\n    border-radius: ${CardConsts.consts[$size].borderRadius}px;\n    background-color: ${theme.layer()[Variables.BackgroundFoundation]};\n    overflow: hidden;\n\n    & > ${CardBar} {\n      padding: ${CardConsts.consts[$size].innerCardPadding}px;\n      position: relative;\n    }\n\n    & > ${InsetCardBody} {\n      ${$backgroundImage &&\n      css`\n        background-image: url(${$backgroundImage});\n        background-position: ${$backgroundPosition};\n        background-size: cover;\n      `}\n    }\n\n    ${$interactive &&\n    css`\n      &:hover > ${InsetCardBody} {\n        transform: scale(1.05);\n      }\n    `}\n  `,\n);\n\ntype CardBodyStylePropKeys = 'padding' | 'bgColor' | 'direction' | 'borders';\n\nconst CardBody = styled.div<\n  Required<PickTransient<ICardProps, 'size'>> &\n    PickTransient<ICardProps, CardBodyStylePropKeys> & {\n      $withHeader?: boolean;\n      $withFooter?: boolean;\n    }\n>(({ $size, $padding, $bgColor, $withHeader, $withFooter, $direction, theme }) => {\n  const layer = theme.layer({ foundation: $bgColor ? 'section' : 'surface' });\n\n  return css`\n    ${theme.typography('paragraph', getParagraphTypographySize($size))};\n    display: grid;\n    color: ${layer[Variables.TextOnFoundationStrong]};\n    background-color: ${layer[Variables.BackgroundFoundation]};\n\n    ${$padding &&\n    css`\n      padding: ${CardConsts.consts[$size].padding}px;\n    `}\n\n    ${$direction === Directions.Horizontal &&\n    !$withHeader &&\n    css`\n      border-top-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n      border-bottom-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n    `}\n      \n      ${$direction === Directions.Horizontal &&\n    !$withFooter &&\n    css`\n      border-top-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n      border-bottom-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n    `}\n\n      ${$direction === Directions.Vertical &&\n    !$withHeader &&\n    css`\n      border-top-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n      border-top-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n    `}\n\n      ${$direction === Directions.Vertical &&\n    !$withFooter &&\n    css`\n      border-bottom-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n      border-bottom-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n    `}\n\n      > img {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n    }\n  `;\n});\n\nexport { Card, InsetCard, InsetCardBody, CardBody };\n"],"names":["Card","styled","$size","$outlined","$direction","$isClickable","theme","layer","css","Directions","Variables","CardConsts.consts","getFocusStyles","InsetCardBody","InsetCard","Sizes","$backgroundImage","$interactive","$backgroundPosition","CardBar","CardBody","$padding","$bgColor","$withHeader","$withFooter","getParagraphTypographySize"],"mappings":"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"}

package/build/cjs/components/Card/InsetCard.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),g=require("react"),m=require("classnames"),r=require("../../react-base/src/consts/index.js"),n=require("./Card.styles.js"),f=require("./components/CardBar/CardBar.js"),j=require("../../react-base/src/consts/classes.js"),I=g.forwardRef(({className:o,size:s=`${r.Sizes.Medium}`,bar:i,borders:b,outlined:a=!1,fullBar:c,interactive:d,onClick:t,isClickable:u,backgroundImage:l,backgroundPosition:$,children:q,...C},x)=>e.jsxs(n.InsetCard,{ref:x,className:m(j.CARD_CLASS,o),$size:s,$direction:r.Directions.Horizontal,$outlined:a,$isClickable:!!u||!!t,$interactive:d,onClick:t,$backgroundPosition:$,$backgroundImage:l,...C,children:[e.jsx(n.InsetCardBody,{children:q}),!!i&&e.jsx(f,{size:s,bar:i,fullBar:c,padding:!0,direction:r.Directions.Vertical,type:"floatingFooter"})]}));module.exports=I;
+"use strict";const e=require("react/jsx-runtime"),m=require("react"),f=require("classnames"),r=require("../../react-base/src/consts/index.js"),n=require("./Card.styles.js"),j=require("./components/CardBar/CardBar.js"),I=require("../../react-base/src/consts/classes.js"),p=m.forwardRef(({className:o,size:s=`${r.Sizes.Medium}`,bar:i,borders:a,outlined:c=!1,fullBar:d,interactive:u,onClick:t,isClickable:l,backgroundImage:$,backgroundPosition:q,children:C,...x},g)=>e.jsxs(n.InsetCard,{ref:g,className:f(I.CARD_CLASS,o),$size:s,$direction:r.Directions.Horizontal,$outlined:c,$isClickable:!!l||!!t,$interactive:u,onClick:t,$backgroundPosition:q,$backgroundImage:$,...x,children:[e.jsx(n.InsetCardBody,{children:C}),!!i&&e.jsx(j,{size:s,bar:i,borders:a,fullBar:d,padding:!0,direction:r.Directions.Vertical,type:"floatingFooter"})]}));module.exports=p;
 //# sourceMappingURL=InsetCard.js.map

package/build/cjs/components/Card/InsetCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsetCard.js","sources":["../../../../src/components/Card/InsetCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, CARD_CLASS, Directions } from 'acinguiux-ds-react-base/consts';\n\nimport type { IInsetCardProps } from './Card.types';\nimport * as Styled from './Card.styles';\nimport CardBar from './components/CardBar/CardBar';\n\nconst InsetCard = forwardRef<HTMLDivElement, IInsetCardProps>(\n  (\n    {\n      className,\n      size = `${Sizes.Medium}`,\n      bar,\n      borders,\n      outlined = false,\n      fullBar,\n      interactive,\n      onClick,\n      isClickable,\n      backgroundImage,\n      backgroundPosition,\n      children,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Styled.InsetCard\n      ref={ref}\n      className={classNames(CARD_CLASS, className)}\n      $size={size}\n      $direction={Directions.Horizontal}\n      $outlined={outlined}\n      $isClickable={!!isClickable || !!onClick}\n      $interactive={interactive}\n      onClick={onClick}\n      $backgroundPosition={backgroundPosition}\n      $backgroundImage={backgroundImage}\n      {...rest}\n    >\n      <Styled.InsetCardBody>{children}</Styled.InsetCardBody>\n      {!!bar && (\n        <CardBar\n          size={size}\n          bar={bar}\n          fullBar={fullBar}\n          padding={true}\n          direction={Directions.Vertical}\n          type=\"floatingFooter\"\n        />\n      )}\n    </Styled.InsetCard>\n  ),\n);\n\nexport default InsetCard;\n"],"names":["InsetCard","forwardRef","className","size","Sizes","bar","borders","outlined","fullBar","interactive","onClick","isClickable","backgroundImage","backgroundPosition","children","rest","ref","jsxs","Styled.InsetCard","classNames","CARD_CLASS","Directions","jsx","Styled.InsetCardBody","CardBar"],"mappings":"8QASMA,EAAYC,EAAAA,WAChB,CACE,CACE,UAAAC,EACA,KAAAC,EAAO,GAAGC,QAAM,MAAM,GACtB,IAAAC,EACA,QAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EACA,YAAAC,EACA,QAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,SAAAC,EACA,GAAGC,CAAA,EAELC,IAEAC,EAAAA,KAACC,EAAAA,UAAA,CACC,IAAAF,EACA,UAAWG,EAAWC,EAAAA,WAAYlB,CAAS,EAC3C,MAAOC,EACP,WAAYkB,EAAAA,WAAW,WACvB,UAAWd,EACX,aAAc,CAAC,CAACI,GAAe,CAAC,CAACD,EACjC,aAAcD,EACd,QAAAC,EACA,oBAAqBG,EACrB,iBAAkBD,EACjB,GAAGG,EAEJ,SAAA,CAAAO,MAACC,EAAAA,cAAA,CAAsB,SAAAT,EAAS,EAC/B,CAAC,CAACT,GACDiB,EAAAA,IAACE,EAAA,CACC,KAAArB,EACA,IAAAE,EACA,QAAAG,EACA,QAAS,GACT,UAAWa,EAAAA,WAAW,SACtB,KAAK,gBAAA,CAAA,CACP,CAAA,CAAA,CAIR"}
+{"version":3,"file":"InsetCard.js","sources":["../../../../src/components/Card/InsetCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, CARD_CLASS, Directions } from 'acinguiux-ds-react-base/consts';\n\nimport type { IInsetCardProps } from './Card.types';\nimport * as Styled from './Card.styles';\nimport CardBar from './components/CardBar/CardBar';\n\nconst InsetCard = forwardRef<HTMLDivElement, IInsetCardProps>(\n  (\n    {\n      className,\n      size = `${Sizes.Medium}`,\n      bar,\n      borders,\n      outlined = false,\n      fullBar,\n      interactive,\n      onClick,\n      isClickable,\n      backgroundImage,\n      backgroundPosition,\n      children,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Styled.InsetCard\n      ref={ref}\n      className={classNames(CARD_CLASS, className)}\n      $size={size}\n      $direction={Directions.Horizontal}\n      $outlined={outlined}\n      $isClickable={!!isClickable || !!onClick}\n      $interactive={interactive}\n      onClick={onClick}\n      $backgroundPosition={backgroundPosition}\n      $backgroundImage={backgroundImage}\n      {...rest}\n    >\n      <Styled.InsetCardBody>{children}</Styled.InsetCardBody>\n      {!!bar && (\n        <CardBar\n          size={size}\n          bar={bar}\n          borders={borders}\n          fullBar={fullBar}\n          padding={true}\n          direction={Directions.Vertical}\n          type=\"floatingFooter\"\n        />\n      )}\n    </Styled.InsetCard>\n  ),\n);\n\nexport default InsetCard;\n"],"names":["InsetCard","forwardRef","className","size","Sizes","bar","borders","outlined","fullBar","interactive","onClick","isClickable","backgroundImage","backgroundPosition","children","rest","ref","jsxs","Styled.InsetCard","classNames","CARD_CLASS","Directions","jsx","Styled.InsetCardBody","CardBar"],"mappings":"8QASMA,EAAYC,EAAAA,WAChB,CACE,CACE,UAAAC,EACA,KAAAC,EAAO,GAAGC,QAAM,MAAM,GACtB,IAAAC,EACA,QAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EACA,YAAAC,EACA,QAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,SAAAC,EACA,GAAGC,CAAA,EAELC,IAEAC,EAAAA,KAACC,EAAAA,UAAA,CACC,IAAAF,EACA,UAAWG,EAAWC,EAAAA,WAAYlB,CAAS,EAC3C,MAAOC,EACP,WAAYkB,EAAAA,WAAW,WACvB,UAAWd,EACX,aAAc,CAAC,CAACI,GAAe,CAAC,CAACD,EACjC,aAAcD,EACd,QAAAC,EACA,oBAAqBG,EACrB,iBAAkBD,EACjB,GAAGG,EAEJ,SAAA,CAAAO,MAACC,EAAAA,cAAA,CAAsB,SAAAT,EAAS,EAC/B,CAAC,CAACT,GACDiB,EAAAA,IAACE,EAAA,CACC,KAAArB,EACA,IAAAE,EACA,QAAAC,EACA,QAAAE,EACA,QAAS,GACT,UAAWa,EAAAA,WAAW,SACtB,KAAK,gBAAA,CAAA,CACP,CAAA,CAAA,CAIR"}

package/build/cjs/components/Card/components/CardBar/CardBar.styles.js

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("styled-components"),u=require("../../../../react-base/src/components/Card/Card.consts.js"),f=require("../../../../react-base/src/theme/types/layer.js"),a=require("../../../../react-base/src/consts/index.js"),g=require("../../../Flexbox/Flexbox.js"),x=(o,r,t,e)=>{const n=o==="floatingFooter"?u.consts[t].innerCardPadding:u.consts[t].padding,i=r===a.Directions.Vertical&&o==="footer"&&e?0:n,s=r===a.Directions.Vertical&&o==="header"&&e?0:n,l=r===a.Directions.Horizontal&&o==="header"&&e?0:n,c=r===a.Directions.Horizontal&&o==="footer"&&e?0:n;return`padding: ${i}px ${l}px ${s}px ${c}px`},$=(o,r,t=!1)=>{const e=t&&r===a.Directions.Vertical&&o==="footer"?1:0,n=t&&r===a.Directions.Vertical&&o==="header"?1:0,i=t&&r===a.Directions.Horizontal&&o==="header"?1:0,s=t&&r===a.Directions.Horizontal&&o==="footer"?1:0;return`border-width: ${e}px ${i}px ${n}px ${s}px`},b=d.styled(g)`
-  ${({$type:o,$size:r,$direction:t,$padding:e,$bgColor:n,$fullBar:i,$borders:s,theme:l})=>{const c=l.layer({foundation:"surface"});return d.css`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("styled-components"),u=require("../../../../react-base/src/components/Card/Card.consts.js"),f=require("../../../../react-base/src/theme/types/layer.js"),a=require("../../../../react-base/src/consts/index.js"),g=require("../../../Flexbox/Flexbox.js"),x=(o,r,t,e)=>{const n=o==="floatingFooter"?u.consts[t].innerCardPadding:u.consts[t].padding,s=r===a.Directions.Vertical&&o==="footer"&&e?0:n,i=r===a.Directions.Vertical&&o==="header"&&e?0:n,l=r===a.Directions.Horizontal&&o==="header"&&e?0:n,c=r===a.Directions.Horizontal&&o==="footer"&&e?0:n;return`padding: ${s}px ${l}px ${i}px ${c}px`},h=(o,r,t=!1)=>{if(o==="floatingFooter"&&t)return"border-width: 1px";const e=t&&r===a.Directions.Vertical&&o==="footer"?1:0,n=t&&r===a.Directions.Vertical&&o==="header"?1:0,s=t&&r===a.Directions.Horizontal&&o==="header"?1:0,i=t&&r===a.Directions.Horizontal&&o==="footer"?1:0;return`border-width: ${e}px ${s}px ${n}px ${i}px`},$=d.styled(g)`
+  ${({$type:o,$size:r,$direction:t,$padding:e,$bgColor:n,$fullBar:s,$borders:i,theme:l})=>{const c=l.layer({foundation:"surface"});return d.css`
       display: flex;
       min-height: auto;
       border-color: ${c[f.Variables.BorderOnFoundationSubtle]};
       border-style: solid;
-      ${$(o,t,s)};
-      ${x(o,t,r,!s&&!n&&e===!0)};
+      ${h(o,t,i)};
+      ${x(o,t,r,!i&&!n&&e===!0)};
 
       ${o==="floatingFooter"&&d.css`
         background-color: ${c[f.Variables.BackgroundFoundation]};
         border-radius: ${u.consts[r].floatingBarBorderRadius}px;
-        flex-basis: ${o==="floatingFooter"&&i?"100%":"50%"};
+        flex-basis: ${o==="floatingFooter"&&s?"100%":"50%"};
       `}
     `}};
-`;exports.CardBar=b;
+`;exports.CardBar=$;
 //# sourceMappingURL=CardBar.styles.js.map

package/build/cjs/components/Card/components/CardBar/CardBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardBar.styles.js","sources":["../../../../../../src/components/Card/components/CardBar/CardBar.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { CardConsts } from 'acinguiux-ds-react-base/components/Card';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { Directions } from 'acinguiux-ds-react-base/consts';\n\nimport type { ICardBarProps } from './CardBar.types';\nimport Flexbox from '../../../Flexbox/Flexbox';\n\ntype CardBarStylePropKeys = 'size' | 'type' | 'direction' | 'padding';\n\nconst getCardBarPadding = (\n  type: ICardBarProps['type'],\n  direction: ICardBarProps['direction'],\n  size: ICardBarProps['size'],\n  lessPadding: boolean,\n) => {\n  const paddingValue =\n    type === 'floatingFooter' ? CardConsts.consts[size].innerCardPadding : CardConsts.consts[size].padding;\n\n  const top = direction === Directions.Vertical && type === 'footer' && lessPadding ? 0 : paddingValue;\n  const bottom = direction === Directions.Vertical && type === 'header' && lessPadding ? 0 : paddingValue;\n  const right = direction === Directions.Horizontal && type === 'header' && lessPadding ? 0 : paddingValue;\n  const left = direction === Directions.Horizontal && type === 'footer' && lessPadding ? 0 : paddingValue;\n\n  return `padding: ${top}px ${right}px ${bottom}px ${left}px`;\n};\n\nconst getCardBarBorderWidth = (type: ICardBarProps['type'], direction: ICardBarProps['direction'], borders = false) => {\n  const top = borders && direction === Directions.Vertical && type === 'footer' ? 1 : 0;\n  const bottom = borders && direction === Directions.Vertical && type === 'header' ? 1 : 0;\n  const right = borders && direction === Directions.Horizontal && type === 'header' ? 1 : 0;\n  const left = borders && direction === Directions.Horizontal && type === 'footer' ? 1 : 0;\n\n  return `border-width: ${top}px ${right}px ${bottom}px ${left}px`;\n};\n\nconst CardBar = styled(Flexbox)<\n  Required<PickTransient<ICardBarProps, CardBarStylePropKeys>> &\n    PickTransient<ICardBarProps, 'fullBar' | 'borders' | 'bgColor'>\n>`\n  ${({ $type, $size, $direction, $padding, $bgColor, $fullBar, $borders, theme }) => {\n    const layer = theme.layer({ foundation: 'surface' });\n\n    return css`\n      display: flex;\n      min-height: auto;\n      border-color: ${layer[Variables.BorderOnFoundationSubtle]};\n      border-style: solid;\n      ${getCardBarBorderWidth($type, $direction, $borders)};\n      ${getCardBarPadding($type, $direction, $size, !$borders && !$bgColor && $padding === true)};\n\n      ${$type === 'floatingFooter' &&\n      css`\n        background-color: ${layer[Variables.BackgroundFoundation]};\n        border-radius: ${CardConsts.consts[$size].floatingBarBorderRadius}px;\n        flex-basis: ${$type === 'floatingFooter' && $fullBar ? '100%' : '50%'};\n      `}\n    `;\n  }};\n`;\n\nexport { CardBar };\n"],"names":["getCardBarPadding","type","direction","size","lessPadding","paddingValue","CardConsts.consts","top","Directions","bottom","right","left","getCardBarBorderWidth","borders","CardBar","styled","Flexbox","$type","$size","$direction","$padding","$bgColor","$fullBar","$borders","theme","layer","css","Variables"],"mappings":"sXAWMA,EAAoB,CACxBC,EACAC,EACAC,EACAC,IACG,CACH,MAAMC,EACJJ,IAAS,iBAAmBK,EAAAA,OAAkBH,CAAI,EAAE,iBAAmBG,EAAAA,OAAkBH,CAAI,EAAE,QAE3FI,EAAML,IAAcM,aAAW,UAAYP,IAAS,UAAYG,EAAc,EAAIC,EAClFI,EAASP,IAAcM,aAAW,UAAYP,IAAS,UAAYG,EAAc,EAAIC,EACrFK,EAAQR,IAAcM,aAAW,YAAcP,IAAS,UAAYG,EAAc,EAAIC,EACtFM,EAAOT,IAAcM,aAAW,YAAcP,IAAS,UAAYG,EAAc,EAAIC,EAE3F,MAAO,YAAYE,CAAG,MAAMG,CAAK,MAAMD,CAAM,MAAME,CAAI,IACzD,EAEMC,EAAwB,CAACX,EAA6BC,EAAuCW,EAAU,KAAU,CACrH,MAAMN,EAAMM,GAAWX,IAAcM,EAAAA,WAAW,UAAYP,IAAS,SAAW,EAAI,EAC9EQ,EAASI,GAAWX,IAAcM,EAAAA,WAAW,UAAYP,IAAS,SAAW,EAAI,EACjFS,EAAQG,GAAWX,IAAcM,EAAAA,WAAW,YAAcP,IAAS,SAAW,EAAI,EAClFU,EAAOE,GAAWX,IAAcM,EAAAA,WAAW,YAAcP,IAAS,SAAW,EAAI,EAEvF,MAAO,iBAAiBM,CAAG,MAAMG,CAAK,MAAMD,CAAM,MAAME,CAAI,IAC9D,EAEMG,EAAUC,EAAAA,OAAOC,CAAO;AAAA,IAI1B,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,WAAAC,EAAY,SAAAC,EAAU,SAAAC,EAAU,SAAAC,EAAU,SAAAC,EAAU,MAAAC,KAAY,CACjF,MAAMC,EAAQD,EAAM,MAAM,CAAE,WAAY,UAAW,EAEnD,OAAOE,EAAAA;AAAAA;AAAAA;AAAAA,sBAGWD,EAAME,YAAU,wBAAwB,CAAC;AAAA;AAAA,QAEvDf,EAAsBK,EAAOE,EAAYI,CAAQ,CAAC;AAAA,QAClDvB,EAAkBiB,EAAOE,EAAYD,EAAO,CAACK,GAAY,CAACF,GAAYD,IAAa,EAAI,CAAC;AAAA;AAAA,QAExFH,IAAU,kBACZS,EAAAA;AAAAA,4BACsBD,EAAME,YAAU,oBAAoB,CAAC;AAAA,yBACxCrB,EAAAA,OAAkBY,CAAK,EAAE,uBAAuB;AAAA,sBACnDD,IAAU,kBAAoBK,EAAW,OAAS,KAAK;AAAA,OACtE;AAAA,KAEL,CAAC;AAAA"}
+{"version":3,"file":"CardBar.styles.js","sources":["../../../../../../src/components/Card/components/CardBar/CardBar.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { CardConsts } from 'acinguiux-ds-react-base/components/Card';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { Directions } from 'acinguiux-ds-react-base/consts';\n\nimport type { ICardBarProps } from './CardBar.types';\nimport Flexbox from '../../../Flexbox/Flexbox';\n\ntype CardBarStylePropKeys = 'size' | 'type' | 'direction' | 'padding';\n\nconst getCardBarPadding = (\n  type: ICardBarProps['type'],\n  direction: ICardBarProps['direction'],\n  size: ICardBarProps['size'],\n  lessPadding: boolean,\n) => {\n  const paddingValue =\n    type === 'floatingFooter' ? CardConsts.consts[size].innerCardPadding : CardConsts.consts[size].padding;\n\n  const top = direction === Directions.Vertical && type === 'footer' && lessPadding ? 0 : paddingValue;\n  const bottom = direction === Directions.Vertical && type === 'header' && lessPadding ? 0 : paddingValue;\n  const right = direction === Directions.Horizontal && type === 'header' && lessPadding ? 0 : paddingValue;\n  const left = direction === Directions.Horizontal && type === 'footer' && lessPadding ? 0 : paddingValue;\n\n  return `padding: ${top}px ${right}px ${bottom}px ${left}px`;\n};\n\nconst getCardBarBorderWidth = (type: ICardBarProps['type'], direction: ICardBarProps['direction'], borders = false) => {\n  if (type === 'floatingFooter' && borders) {\n    return `border-width: 1px`;\n  }\n\n  const top = borders && direction === Directions.Vertical && type === 'footer' ? 1 : 0;\n  const bottom = borders && direction === Directions.Vertical && type === 'header' ? 1 : 0;\n  const right = borders && direction === Directions.Horizontal && type === 'header' ? 1 : 0;\n  const left = borders && direction === Directions.Horizontal && type === 'footer' ? 1 : 0;\n\n  return `border-width: ${top}px ${right}px ${bottom}px ${left}px`;\n};\n\nconst CardBar = styled(Flexbox)<\n  Required<PickTransient<ICardBarProps, CardBarStylePropKeys>> &\n    PickTransient<ICardBarProps, 'fullBar' | 'borders' | 'bgColor'>\n>`\n  ${({ $type, $size, $direction, $padding, $bgColor, $fullBar, $borders, theme }) => {\n    const layer = theme.layer({ foundation: 'surface' });\n\n    return css`\n      display: flex;\n      min-height: auto;\n      border-color: ${layer[Variables.BorderOnFoundationSubtle]};\n      border-style: solid;\n      ${getCardBarBorderWidth($type, $direction, $borders)};\n      ${getCardBarPadding($type, $direction, $size, !$borders && !$bgColor && $padding === true)};\n\n      ${$type === 'floatingFooter' &&\n      css`\n        background-color: ${layer[Variables.BackgroundFoundation]};\n        border-radius: ${CardConsts.consts[$size].floatingBarBorderRadius}px;\n        flex-basis: ${$type === 'floatingFooter' && $fullBar ? '100%' : '50%'};\n      `}\n    `;\n  }};\n`;\n\nexport { CardBar };\n"],"names":["getCardBarPadding","type","direction","size","lessPadding","paddingValue","CardConsts.consts","top","Directions","bottom","right","left","getCardBarBorderWidth","borders","CardBar","styled","Flexbox","$type","$size","$direction","$padding","$bgColor","$fullBar","$borders","theme","layer","css","Variables"],"mappings":"sXAWMA,EAAoB,CACxBC,EACAC,EACAC,EACAC,IACG,CACH,MAAMC,EACJJ,IAAS,iBAAmBK,EAAAA,OAAkBH,CAAI,EAAE,iBAAmBG,EAAAA,OAAkBH,CAAI,EAAE,QAE3FI,EAAML,IAAcM,aAAW,UAAYP,IAAS,UAAYG,EAAc,EAAIC,EAClFI,EAASP,IAAcM,aAAW,UAAYP,IAAS,UAAYG,EAAc,EAAIC,EACrFK,EAAQR,IAAcM,aAAW,YAAcP,IAAS,UAAYG,EAAc,EAAIC,EACtFM,EAAOT,IAAcM,aAAW,YAAcP,IAAS,UAAYG,EAAc,EAAIC,EAE3F,MAAO,YAAYE,CAAG,MAAMG,CAAK,MAAMD,CAAM,MAAME,CAAI,IACzD,EAEMC,EAAwB,CAACX,EAA6BC,EAAuCW,EAAU,KAAU,CACrH,GAAIZ,IAAS,kBAAoBY,EAC/B,MAAO,oBAGT,MAAMN,EAAMM,GAAWX,IAAcM,EAAAA,WAAW,UAAYP,IAAS,SAAW,EAAI,EAC9EQ,EAASI,GAAWX,IAAcM,EAAAA,WAAW,UAAYP,IAAS,SAAW,EAAI,EACjFS,EAAQG,GAAWX,IAAcM,EAAAA,WAAW,YAAcP,IAAS,SAAW,EAAI,EAClFU,EAAOE,GAAWX,IAAcM,EAAAA,WAAW,YAAcP,IAAS,SAAW,EAAI,EAEvF,MAAO,iBAAiBM,CAAG,MAAMG,CAAK,MAAMD,CAAM,MAAME,CAAI,IAC9D,EAEMG,EAAUC,EAAAA,OAAOC,CAAO;AAAA,IAI1B,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,WAAAC,EAAY,SAAAC,EAAU,SAAAC,EAAU,SAAAC,EAAU,SAAAC,EAAU,MAAAC,KAAY,CACjF,MAAMC,EAAQD,EAAM,MAAM,CAAE,WAAY,UAAW,EAEnD,OAAOE,EAAAA;AAAAA;AAAAA;AAAAA,sBAGWD,EAAME,YAAU,wBAAwB,CAAC;AAAA;AAAA,QAEvDf,EAAsBK,EAAOE,EAAYI,CAAQ,CAAC;AAAA,QAClDvB,EAAkBiB,EAAOE,EAAYD,EAAO,CAACK,GAAY,CAACF,GAAYD,IAAa,EAAI,CAAC;AAAA;AAAA,QAExFH,IAAU,kBACZS,EAAAA;AAAAA,4BACsBD,EAAME,YAAU,oBAAoB,CAAC;AAAA,yBACxCrB,EAAAA,OAAkBY,CAAK,EAAE,uBAAuB;AAAA,sBACnDD,IAAU,kBAAoBK,EAAW,OAAS,KAAK;AAAA,OACtE;AAAA,KAEL,CAAC;AAAA"}

package/build/cjs/components/Chart/Highcharts/HighchartsChart.js

@@ -1,2 +1,2 @@
-"use strict";var l=Object.create;var a=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(e,s,t,i)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of g(s))!m.call(e,r)&&r!==t&&a(e,r,{get:()=>s[r],enumerable:!(i=q(s,r))||i.enumerable});return e};var R=(e,s,t)=>(t=e!=null?l(H(e)):{},p(s||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e));const h=require("react/jsx-runtime"),c=require("react"),x=require("../../../react-base/src/consts/index.js"),o=require("highcharts"),C=require("highcharts-react-official"),w=require("classnames"),j=require("./HighchartsChart.styles.js"),y=require("./hooks/useHighchartsOptions.js"),N=require("../../../react-base/src/consts/classes.js");let n=!1;const O=c.forwardRef(({className:e,containerProps:s,...t},i)=>h.jsx(C.HighchartsReact,{ref:i,containerProps:{...s,className:w(e,N.CHART_CLASS,s?.className)},...t})),S=c.forwardRef(({size:e=x.Sizes.Medium,highcharts:s=o,options:t,option:i=[],...r},u)=>{const f=y(t,e,i);return c.useEffect(()=>{!n&&typeof window<"u"&&import("highcharts/modules/accessibility").then(d=>{d.default(o),n=!0})},[]),h.jsx(j.Highcharts,{as:O,ref:u,highcharts:s,options:f,...r})});module.exports=S;
+"use strict";const c=require("react/jsx-runtime"),i=require("react"),h=require("../../../react-base/src/consts/index.js"),u=require("highcharts"),q=require("highcharts-react-official"),g=require("classnames");require("highcharts/modules/accessibility");const H=require("./HighchartsChart.styles.js"),R=require("./hooks/useHighchartsOptions.js"),f=require("../../../react-base/src/consts/classes.js"),l=i.forwardRef(({className:e,containerProps:s,...r},t)=>c.jsx(q.HighchartsReact,{ref:t,containerProps:{...s,className:g(e,f.CHART_CLASS,s?.className)},...r})),m=i.forwardRef(({size:e=h.Sizes.Medium,highcharts:s=u,options:r,option:t=[],...a},o)=>{const n=R(r,e,t);return c.jsx(H.Highcharts,{as:l,ref:o,highcharts:s,options:n,...a})});module.exports=m;
 //# sourceMappingURL=HighchartsChart.js.map

package/build/cjs/components/Chart/Highcharts/HighchartsChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighchartsChart.js","sources":["../../../../../src/components/Chart/Highcharts/HighchartsChart.tsx"],"sourcesContent":["import { forwardRef, useEffect } from 'react';\n\nimport { CHART_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport Highcharts from 'highcharts';\nimport { HighchartsReact, HighchartsReactProps, HighchartsReactRefObject } from 'highcharts-react-official';\nimport cx from 'classnames';\n\n// Import accessibility module dynamically on client side to avoid SSR issues\nlet accessibilityLoaded = false;\n\nimport type { IHighchartsChartProps } from './HighchartsChart.types';\nimport * as Styled from './HighchartsChart.styles';\nimport useHighchartsOptions from './hooks/useHighchartsOptions';\n\nconst HighchartsReactComponent = forwardRef<HighchartsReactRefObject, HighchartsReactProps>(\n  ({ className, containerProps, ...rest }, ref) => (\n    <HighchartsReact\n      ref={ref}\n      containerProps={{ ...containerProps, className: cx(className, CHART_CLASS, containerProps?.className) }}\n      {...rest}\n    />\n  ),\n);\n\nconst HighchartsChart = forwardRef<HighchartsReactRefObject, IHighchartsChartProps>(\n  ({ size = Sizes.Medium, highcharts = Highcharts, options, option = [], ...rest }, ref) => {\n    const sdsOptions = useHighchartsOptions(options, size, option);\n\n    // Load accessibility module on client side\n    useEffect(() => {\n      if (!accessibilityLoaded && typeof window !== 'undefined') {\n        import('highcharts/modules/accessibility').then((module) => {\n          module.default(Highcharts);\n          accessibilityLoaded = true;\n        });\n      }\n    }, []);\n\n    return (\n      <Styled.Highcharts\n        as={HighchartsReactComponent}\n        ref={ref}\n        highcharts={highcharts}\n        options={sdsOptions}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default HighchartsChart;"],"names":["accessibilityLoaded","HighchartsReactComponent","forwardRef","className","containerProps","rest","ref","jsx","HighchartsReact","cx","CHART_CLASS","HighchartsChart","size","Sizes","highcharts","Highcharts","options","option","sdsOptions","useHighchartsOptions","useEffect","module","Styled.Highcharts"],"mappings":"yyBAQA,IAAIA,EAAsB,GAM1B,MAAMC,EAA2BC,EAAAA,WAC/B,CAAC,CAAE,UAAAC,EAAW,eAAAC,EAAgB,GAAGC,CAAA,EAAQC,IACvCC,EAAAA,IAACC,EAAAA,gBAAA,CACC,IAAAF,EACA,eAAgB,CAAE,GAAGF,EAAgB,UAAWK,EAAGN,EAAWO,EAAAA,YAAaN,GAAgB,SAAS,CAAA,EACnG,GAAGC,CAAA,CAAA,CAGV,EAEMM,EAAkBT,EAAAA,WACtB,CAAC,CAAE,KAAAU,EAAOC,QAAM,OAAQ,WAAAC,EAAaC,EAAY,QAAAC,EAAS,OAAAC,EAAS,CAAA,EAAI,GAAGZ,CAAA,EAAQC,IAAQ,CACxF,MAAMY,EAAaC,EAAqBH,EAASJ,EAAMK,CAAM,EAG7DG,OAAAA,EAAAA,UAAU,IAAM,CACV,CAACpB,GAAuB,OAAO,OAAW,KAC5C,OAAO,kCAAkC,EAAE,KAAMqB,GAAW,CAC1DA,EAAO,QAAQN,CAAU,EACzBf,EAAsB,EACxB,CAAC,CAEL,EAAG,CAAA,CAAE,EAGHO,EAAAA,IAACe,EAAAA,WAAA,CACC,GAAIrB,EACJ,IAAAK,EACA,WAAAQ,EACA,QAASI,EACR,GAAGb,CAAA,CAAA,CAGV,CACF"}
+{"version":3,"file":"HighchartsChart.js","sources":["../../../../../src/components/Chart/Highcharts/HighchartsChart.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { CHART_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport Highcharts from 'highcharts';\nimport { HighchartsReact, HighchartsReactProps, HighchartsReactRefObject } from 'highcharts-react-official';\nimport cx from 'classnames';\nimport 'highcharts/modules/accessibility';\n\nimport type { IHighchartsChartProps } from './HighchartsChart.types';\nimport * as Styled from './HighchartsChart.styles';\nimport useHighchartsOptions from './hooks/useHighchartsOptions';\n\nconst HighchartsReactComponent = forwardRef<HighchartsReactRefObject, HighchartsReactProps>(\n  ({ className, containerProps, ...rest }, ref) => (\n    <HighchartsReact\n      ref={ref}\n      containerProps={{ ...containerProps, className: cx(className, CHART_CLASS, containerProps?.className) }}\n      {...rest}\n    />\n  ),\n);\n\nconst HighchartsChart = forwardRef<HighchartsReactRefObject, IHighchartsChartProps>(\n  ({ size = Sizes.Medium, highcharts = Highcharts, options, option = [], ...rest }, ref) => {\n    const sdsOptions = useHighchartsOptions(options, size, option);\n\n    return (\n      <Styled.Highcharts\n        as={HighchartsReactComponent}\n        ref={ref}\n        highcharts={highcharts}\n        options={sdsOptions}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default HighchartsChart;\n"],"names":["HighchartsReactComponent","forwardRef","className","containerProps","rest","ref","jsx","HighchartsReact","cx","CHART_CLASS","HighchartsChart","size","Sizes","highcharts","Highcharts","options","option","sdsOptions","useHighchartsOptions","Styled.Highcharts"],"mappings":"gZAYMA,EAA2BC,EAAAA,WAC/B,CAAC,CAAE,UAAAC,EAAW,eAAAC,EAAgB,GAAGC,CAAA,EAAQC,IACvCC,EAAAA,IAACC,EAAAA,gBAAA,CACC,IAAAF,EACA,eAAgB,CAAE,GAAGF,EAAgB,UAAWK,EAAGN,EAAWO,EAAAA,YAAaN,GAAgB,SAAS,CAAA,EACnG,GAAGC,CAAA,CAAA,CAGV,EAEMM,EAAkBT,EAAAA,WACtB,CAAC,CAAE,KAAAU,EAAOC,QAAM,OAAQ,WAAAC,EAAaC,EAAY,QAAAC,EAAS,OAAAC,EAAS,CAAA,EAAI,GAAGZ,CAAA,EAAQC,IAAQ,CACxF,MAAMY,EAAaC,EAAqBH,EAASJ,EAAMK,CAAM,EAE7D,OACEV,EAAAA,IAACa,EAAAA,WAAA,CACC,GAAInB,EACJ,IAAAK,EACA,WAAAQ,EACA,QAASI,EACR,GAAGb,CAAA,CAAA,CAGV,CACF"}