npm - acinguiux-ds-react-framework - Versions diffs - 0.1.24 → 0.1.26 - Mend

acinguiux-ds-react-framework 0.1.24 → 0.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1553) hide show

package/build/esm/components/Alert/Alert.styles.js.map CHANGED Viewed

	@@ -1 +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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"}
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 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":"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"}

package/build/esm/components/Avatar/Avatar.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { styled as e, css as i } from "styled-components";
+import { css as i, styled as e } from "styled-components";
 import { FabricsVariables as a } from "acinguiux-ds-fabrics";
 import { Sizes as f } from "../../react-base/src/consts/index.js";
 import { Variables as s } from "../../react-base/src/theme/types/layer.js";

package/build/esm/components/Avatar/components/SimpleAvatar.js CHANGED Viewed

@@ -1,22 +1,22 @@
 import { jsx as t } from "react/jsx-runtime";
-import { useState as m, useEffect as l } from "react";
+import { useState as m, useEffect as c } from "react";
 import f from "../../Icon/components/PersonSolid.js";
 import { Image as p } from "../SimpleAvatar.styles.js";
 import g from "../../Flag/Flag.js";
-const e = () => /* @__PURE__ */ t(f, {}), d = ({ abbreviation: o }) => o && o.length > 0 ? o.slice(0, 2) : /* @__PURE__ */ t(e, {}), A = ({ src: o, alt: c }) => {
-  const [i, s] = m(!1), [a, n] = m();
-  return l(() => {
-    s(!1), n(void 0);
+const a = () => /* @__PURE__ */ t(f, { "aria-label": "Default user avatar" }), d = ({ abbreviation: o }) => o && o.length > 0 ? o.slice(0, 2) : /* @__PURE__ */ t(a, {}), u = ({ src: o, alt: l }) => {
+  const [i, e] = m(!1), [s, n] = m();
+  return c(() => {
+    e(!1), n(void 0);
     const r = new Image();
-    r.onload = () => n(o), r.onerror = () => s(!0), r.src = o;
-  }, [o]), !a || i ? /* @__PURE__ */ t(e, {}) : /* @__PURE__ */ t(p, { src: a, alt: c }, o);
-}, S = {
+    r.onload = () => n(o), r.onerror = () => e(!0), r.src = o;
+  }, [o]), !s || i ? /* @__PURE__ */ t(a, {}) : /* @__PURE__ */ t(p, { src: s, alt: l }, o);
+}, A = {
   initials: d,
-  icon: e,
-  photo: A,
+  icon: a,
+  photo: u,
   flag: g
-}, v = (o) => S[o];
+}, P = (o) => A[o];
 export {
-  v as getSimpleAvatarComponent
+  P as getSimpleAvatarComponent
 };
 //# sourceMappingURL=SimpleAvatar.js.map

package/build/esm/components/Avatar/components/SimpleAvatar.js.map CHANGED Viewed

	@@ -1 +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":";;;;;AAOA,MAAMA,IAAsD,MAAM,gBAAAC,EAACC,GAAA,EAAY,~~GACzEC~~,IAA8D,CAAC,EAAE,cAAAC,EAAA,MACrEA,KAAgBA,EAAa,SAAS,IAAIA,EAAa,MAAM,GAAG,CAAC,sBAAKJ,GAAA,EAAW,GAC7EK,IAAwD,CAAC,EAAE,KAAAC,GAAK,KAAAC,QAAU;AAC9E,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAWC,CAAY,IAAIF,EAAA;AAWlC,SATAG,EAAU,MAAM;AACd,IAAAJ,EAAY,EAAK,GACjBG,EAAa,MAAS;AACtB,UAAME,IAAM,IAAI,MAAA;AAChB,IAAAA,EAAI,SAAS,MAAMF,EAAaN,CAAG,GACnCQ,EAAI,UAAU,MAAML,EAAY,EAAI,GACpCK,EAAI,MAAMR;AAAA,EACZ,GAAG,CAACA,CAAG,CAAC,GAEJ,CAACK,KAAaH,sBACRR,GAAA,EAAW,sBAGbe,GAAA,EAAuB,KAAKJ,GAAW,KAAAJ,KAArBD,CAA+B;AAC3D,GAEMU,IAA4G;AAAA,EAChH,UAAUb;AAAA,EACV,MAAMH;AAAA,EACN,OAAOK;AAAA,EACP,MAAMY;AACR,GAEaC,IAA2B,CACtCC,MAC6CH,EAAyBG,CAAO;"}
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 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":";;;;;AAOA,MAAMA,IAAsD,MAAM,gBAAAC,EAACC,GAAA,EAAY,cAAW,sBAAA,CAAsB,GAC1GC,IAA8D,CAAC,EAAE,cAAAC,EAAA,MACrEA,KAAgBA,EAAa,SAAS,IAAIA,EAAa,MAAM,GAAG,CAAC,sBAAKJ,GAAA,EAAW,GAC7EK,IAAwD,CAAC,EAAE,KAAAC,GAAK,KAAAC,QAAU;AAC9E,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAWC,CAAY,IAAIF,EAAA;AAWlC,SATAG,EAAU,MAAM;AACd,IAAAJ,EAAY,EAAK,GACjBG,EAAa,MAAS;AACtB,UAAME,IAAM,IAAI,MAAA;AAChB,IAAAA,EAAI,SAAS,MAAMF,EAAaN,CAAG,GACnCQ,EAAI,UAAU,MAAML,EAAY,EAAI,GACpCK,EAAI,MAAMR;AAAA,EACZ,GAAG,CAACA,CAAG,CAAC,GAEJ,CAACK,KAAaH,sBACRR,GAAA,EAAW,sBAGbe,GAAA,EAAuB,KAAKJ,GAAW,KAAAJ,KAArBD,CAA+B;AAC3D,GAEMU,IAA4G;AAAA,EAChH,UAAUb;AAAA,EACV,MAAMH;AAAA,EACN,OAAOK;AAAA,EACP,MAAMY;AACR,GAEaC,IAA2B,CACtCC,MAC6CH,EAAyBG,CAAO;"}

package/build/esm/components/Avatar/utils/useDetailedProps.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { getSimpleProps as l, simpleAvatarContainerProps as i } from "./useSimpleProps.js";
+import { simpleAvatarContainerProps as l, getSimpleProps as i } from "./useSimpleProps.js";
 import { removePropFromObject as o } from "./object.js";
 const r = (t) => ({
   detailedProps: {
@@ -8,9 +8,9 @@ const r = (t) => ({
     title: t.title
   }
 }), a = (t) => o(t, ["label", "multiline", "title", "strongTitle"]), s = (t, e) => ({
-  ...l(t)(e),
+  ...i(t)(e),
   ...r(e),
-  ...a(i(t, e))
+  ...a(l(t, e))
 });
 export {
   a as detailedAvatarContainerProps,

package/build/esm/components/Avatar/utils/useDropdownProps.js CHANGED Viewed

@@ -1,16 +1,16 @@
-import { getSimpleProps as t, simpleAvatarContainerProps as e } from "./useSimpleProps.js";
+import { simpleAvatarContainerProps as t, getSimpleProps as e } from "./useSimpleProps.js";
 import { removePropFromObject as n } from "./object.js";
-import { getDetailedProps as i, detailedAvatarContainerProps as p } from "./useDetailedProps.js";
+import { detailedAvatarContainerProps as i, getDetailedProps as p } from "./useDetailedProps.js";
 const a = (o) => ({
   dropdownProps: {
     icon: o.icon
   }
 }), m = (o) => n(o, ["icon"]), c = (o, r) => ({
-  ...t(o)(r),
-  ...i(r),
+  ...e(o)(r),
+  ...p(r),
   ...a(r),
   ...m(
-    p(e(o, r))
+    i(t(o, r))
   )
 });
 export {

package/build/esm/components/Badge/Badge.js CHANGED Viewed

@@ -9,10 +9,10 @@ const N = h(({ className: r, ...o }, s) => {
     size: e,
     variant: i,
     sentiment: t,
-    iconComponent: d,
-    shouldRenderChildren: n,
-    shouldRenderIcon: a,
-    children: m,
+    icon: d,
+    shouldRenderChildren: a,
+    shouldRenderIcon: m,
+    children: n,
     fixedWidth: f,
     ...p
   } = g(o);
@@ -27,8 +27,8 @@ const N = h(({ className: r, ...o }, s) => {
       $sentiment: t,
       ...p,
       children: [
-        a && d,
-        n && /* @__PURE__ */ l(B, { $size: e, children: m })
+        m && d,
+        a && /* @__PURE__ */ l(B, { $size: e, children: n })
       ]
     }
   );

package/build/esm/components/Badge/Badge.js.map CHANGED Viewed

	@@ -1 +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":";;;;;;AASA,MAAMA,IAAQC,EAAwC,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAAQ;AACtF,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,~~eAAAC~~;AAAA,IACA,sBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDC,EAAoBX,CAAK;AAE7B,SACE,gBAAAY;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,GAAahB,CAAS;AAAA,MAC5C,KAAAE;AAAA,MACA,OAAOC;AAAA,MACP,UAAUC;AAAA,MACV,aAAaM;AAAA,MACb,YAAYL;AAAA,MACX,GAAGM;AAAA,MAEH,UAAA;AAAA,QAAAH,KAAoBF;AAAA,QACpBC,KAAwB,gBAAAU,EAACC,GAAA,EAAiB,OAAOf,GAAO,UAAAM,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE,CAAC;"}
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 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":";;;;;;AASA,MAAMA,IAAQC,EAAwC,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAAQ;AACtF,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDC,EAAoBX,CAAK;AAE7B,SACE,gBAAAY;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,GAAahB,CAAS;AAAA,MAC5C,KAAAE;AAAA,MACA,OAAOC;AAAA,MACP,UAAUC;AAAA,MACV,aAAaM;AAAA,MACb,YAAYL;AAAA,MACX,GAAGM;AAAA,MAEH,UAAA;AAAA,QAAAH,KAAoBF;AAAA,QACpBC,KAAwB,gBAAAU,EAACC,GAAA,EAAiB,OAAOf,GAAO,UAAAM,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE,CAAC;"}

package/build/esm/components/Button/Button.styles.js CHANGED Viewed

@@ -2,25 +2,26 @@ import { styled as i, css as o } from "styled-components";
 import { getFocusStyles as S } from "../../react-base/src/utils/stylesUtils.js";
 import { Variables as m } from "../../react-base/src/theme/types/layer.js";
 import { getSizeStyles as u, getSvgStyles as b, getFabricStyles as p } from "../../react-base/src/components/Button/Button.utils.js";
-import { containerStylesForVariant as g, stylesForVariant as $ } from "../../react-base/src/components/Button/Button.styles.js";
+import { containerStylesForVariant as $, stylesForVariant as g } from "../../react-base/src/components/Button/Button.styles.js";
 import { FabricsVariables as s } from "acinguiux-ds-fabrics";
 import { Variants as f } from "../../react-base/src/consts/index.js";
-const y = i.span``, c = i.span``, l = (t, e) => o(
+import { ICON_CLASS as y } from "../../react-base/src/consts/classes.js";
+const F = i.span``, c = i.span``, l = (t, e) => o(
   ({ $size: n, theme: r }) => o`
-      ${g(t)};
+      ${$(t)};
       &[aria-busy='true'] {
         & > ${c}, & > ${c} > svg,
-        & ${c} > ${y} {
+        & ${c} > ${F} {
           opacity: 0;
           min-height: 0;
           height: 0;
         }
       }
-      & ${c}, &:is(a) {
-        ${$(t)};
+      & ${c} {
+        ${g(t)};
         ${u(r, n)};
-        & > svg {
+        & > .${y} {
           ${b(n)};
         }
       }
@@ -50,14 +51,14 @@ const y = i.span``, c = i.span``, l = (t, e) => o(
       ${d.press};
     }
   `;
-}, F = (t) => o`
+}, O = (t) => o`
   ${l(t)};
-  ${({ $variant: e, theme: n }) => a(n, "Foundation", e, {
-  transparentRestingState: e === "filled" ? s.TransparentRestingStates.False : s.TransparentRestingStates.True
+  ${({ $variant: e, theme: n }) => a(n, "Foundation", t ?? e, {
+  transparentRestingState: (t ?? e) === "filled" ? s.TransparentRestingStates.False : s.TransparentRestingStates.True
 })};
-`, k = i.button`
-  ${F()};
-`, h = i.a(
+`, x = i.button`
+  ${O()};
+`, C = i.a(
   ({ $variant: t, theme: e, $disabled: n }) => o`
     ${l()};
     text-decoration: underline;
@@ -79,7 +80,7 @@ const y = i.span``, c = i.span``, l = (t, e) => o(
     transparentRestingState: t === "filled" ? s.TransparentRestingStates.False : s.TransparentRestingStates.True
   })};
   `
-), x = i.button(
+), w = i.button(
   ({ $variant: t, theme: e, $sentiment: n }) => o`
     ${l(t, "Sentiment")};
     ${a(e, "Sentiment", t, {
@@ -87,7 +88,7 @@ const y = i.span``, c = i.span``, l = (t, e) => o(
     sentimentProminence: t === "filled" ? s.SentimentProminences.Strong : s.SentimentProminences.Transparent
   })};
   `
-), w = i.button(
+), A = i.button(
   ({ $variant: t, theme: e, $sentiment: n, $sentimentProminence: r }) => o`
     ${l(t, "On Sentiment")};
     ${a(e, "On Sentiment", t, {
@@ -95,12 +96,12 @@ const y = i.span``, c = i.span``, l = (t, e) => o(
     sentimentProminence: r
   })};
   `
-), C = i.button(
+), I = i.button(
   ({ $variant: t, theme: e, $brand: n }) => o`
     ${l(t, "On Brand")};
     ${a(e, "On Brand", t, { brand: n })};
   `
-), W = i.button(
+), N = i.button(
   ({ $variant: t, theme: e }) => o`
     ${l(t, "On Selected")};
     ${a(e, "On Selected", t, {
@@ -109,14 +110,14 @@ const y = i.span``, c = i.span``, l = (t, e) => o(
   `
 );
 export {
-  k as Button,
-  y as ButtonLabel,
+  x as Button,
+  F as ButtonLabel,
   c as ButtonLabelContainer,
-  h as ButtonLink,
-  C as OnBrandButton,
-  W as OnSelectedButton,
-  w as OnSentimentButton,
-  x as SentimentButton,
-  F as buttonCssWithVariant
+  C as ButtonLink,
+  I as OnBrandButton,
+  N as OnSelectedButton,
+  A as OnSentimentButton,
+  w as SentimentButton,
+  O as buttonCssWithVariant
 };
 //# sourceMappingURL=Button.styles.js.map

package/build/esm/components/Button/Button.styles.js.map CHANGED Viewed

	@@ -1 +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":"~~;;;;;;;~~AAeO,MAAMA,IAAcC,EAAO,QACrBC,IAAuBD,EAAO,QAErCE,IAAyB,CAACC,GAA+BC,MAC7DC;AAAA,EACE,CAAC,EAAE,OAAAC,GAAO,OAAAC,EAAA,MAAYF;AAAA,QAClBG,EAAuCL,CAAO,CAAC;AAAA;AAAA,cAEzCF,CAAoB,SAASA,CAAoB;AAAA,YACnDA,CAAoB,MAAMF,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOvCE,CAAoB;AAAA,UACpBQ,EAA8BN,CAAO,CAAC;AAAA,UACtCO,EAA0BH,GAAOD,CAAK,CAAC;AAAA;AAAA,~~YAErCK~~,~~EAAyBL~~,CAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,~~UAKjCM~~,~~EAAeL~~,GAAOJ,MAAY,YAAYC,MAAU,YAAY,CAAC;AAAA;AAAA;AAG7E,~~GAEIS~~,IAAc,~~CAClBN~~,GACAH,GACAD,IAA+BW,EAAS,QACxCC,IAAmB,OAChB;AACH,QAAMC,IAASC,~~EAA4BV~~,GAAOJ,GAASC,~~GAAOW~~,CAAK;AAEvE,~~SAAOV~~;AAAA;AAAA;AAAA,~~QAGDW~~,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAKdA,EAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,QAIfA,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA,QAIZA,EAAO,KAAK;AAAA;AAAA;AAGpB,GAEaE,IAAuB,~~CAACf~~,MAAkCE;AAAA,IACnEH,EAAuBC,CAAO,CAAC;AAAA,IAC/B,CAAC,EAAE,~~UAAAgB~~,GAAU,~~OAAAZ~~,EAAA,~~MACbM~~,~~EAAYN~~,GAAO,~~cAAyBY~~,GAAU;AAAA,EACpD,~~yBACcA~~,~~MAAc~~,WACtBC,EAAiB,yBAAyB,QAC1CA,EAAiB,yBAAyB;AAClD,CAAC,CAAC;AAAA,GAGOC,~~IAASrB~~,EAAO;AAAA,~~IACzBkB~~,GAAsB;AAAA,GAGbI,~~IAAatB~~,EAAO;AAAA,EAC/B,CAAC,EAAE,~~UAAAmB~~,GAAU,~~OAAAZ~~,GAAO,~~WAAAgB~~,~~QAAgBlB~~;AAAA,MAChCH,GAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~MAQxBiB~~,KACFA,MAAa,~~YACbd~~;AAAA;AAAA,iBAEaE,EAAM,MAAM,EAAE,~~UAAUgB~~,GAAW,EAAEC,EAAU,2BAA2B,CAAC;AAAA,~~wBACpEjB~~,EAAM,MAAM,EAAE,~~UAAUgB~~,GAAW,EAAEC,EAAU,2BAA2B,CAAC;AAAA;AAAA,KAE9F;AAAA;AAAA,MAECX,~~EAAYN~~,GAAO,~~QAAQY~~,GAAU;AAAA,IACrC,UAAUI;AAAA,IACV,yBACEJ,MAAa,WACTC,EAAiB,yBAAyB,QAC1CA,EAAiB,yBAAyB;AAAA,EAAA,CACjD,CAAC;AAAA;AAEN,GAEaK,~~IAAkBzB~~,EAAO;AAAA,EACpC,CAAC,EAAE,~~UAAAmB~~,GAAU,~~OAAAZ~~,GAAO,~~YAAAmB~~,~~QAAiBrB~~;AAAA,MACjCH,~~EAAuBiB~~,GAAU,WAAW,CAAC;AAAA,MAC7CN,~~EAAYN~~,GAAO,~~aAAaY~~,GAAU;AAAA,IAC1C,WAAWO;AAAA,IACX,qBACEP,MAAa,WACTC,EAAiB,qBAAqB,SACtCA,EAAiB,qBAAqB;AAAA,EAAA,CAC7C,CAAC;AAAA;AAEN,GAEaO,~~IAAoB3B~~,EAAO;AAAA,EACtC,CAAC,EAAE,~~UAAAmB~~,GAAU,~~OAAAZ~~,GAAO,~~YAAAmB~~,GAAY,sBAAAE,~~QAA2BvB~~;AAAA,MACvDH,~~EAAuBiB~~,GAAU,cAAc,CAAC;AAAA,MAChDN,~~EAAYN~~,GAAO,~~gBAAgBY~~,GAAU;AAAA,IAC7C,WAAWO;AAAA,IACX,qBAAqBE;AAAA,EAAA,CACtB,CAAC;AAAA;AAEN,GAEaC,~~IAAgB7B~~,EAAO;AAAA,EAClC,CAAC,EAAE,~~UAAAmB~~,GAAU,~~OAAAZ~~,GAAO,~~QAAAuB~~,~~QAAazB~~;AAAA,MAC7BH,~~EAAuBiB~~,GAAU,UAAU,CAAC;AAAA,MAC5CN,~~EAAYN~~,GAAO,~~YAAYY~~,GAAU,EAAE,OAAOW,EAAA,CAAQ,CAAC;AAAA;AAEjE,GAEaC,~~IAAmB/B~~,EAAO;AAAA,EACrC,CAAC,EAAE,~~UAAAmB~~,GAAU,~~OAAAZ~~,EAAA,MAAYF;AAAA,MACrBH,~~EAAuBiB~~,GAAU,aAAa,CAAC;AAAA,MAC/CN,~~EAAYN~~,GAAO,~~eAAeY~~,GAAU;AAAA,IAC5C,oBACEA,MAAa,WACTC,EAAiB,oBAAoB,SACrCA,EAAiB,oBAAoB;AAAA,EAAA,CAC5C,CAAC;AAAA;AAEN;"}
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 { 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/esm/components/Card/Card.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,QAAA,MAAM,IAAI,~~oHAkET~~,CAAC;AAEF,eAAe,IAAI,CAAC"}
1	+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,QAAA,MAAM,IAAI,oHAoET,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build/esm/components/Card/Card.js CHANGED Viewed

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

package/build/esm/components/Card/Card.js.map CHANGED Viewed

	@@ -1 +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":";;;;;;;AASA,MAAMA,IAAOC;AAAA,EACX,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,WAAAC,IAAY,GAAGC,EAAW,QAAQ;AAAA,IAClC,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAWC,GAAYrB,CAAS;AAAA,MAC3C,OAAOC;AAAA,MACP,YAAYE;AAAA,MACZ,WAAWO;AAAA,MACX,cAAc,CAAC,CAACK,KAAe,CAAC,CAACH;AAAA,MACjC,SAAAA;AAAA,MACC,GAAGI;AAAA,MAEH,UAAA;AAAA,QAAA,CAAC,CAACH,KACD,gBAAAS;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAAtB;AAAA,YACA,KAAKY;AAAA,YACL,MAAK;AAAA,YACL,WAAAV;AAAA,YACA,SAASI,KAAgBE;AAAA,YACzB,SAAAH;AAAA,YACA,SAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,~~QAGJ~~,~~gBAAAiB~~;AAAA,~~UAACE~~;AAAAA,UAAA;AAAA,YACC,~~OAAOvB~~;AAAA,YACP,YAAYE;AAAA,YACZ,aAAa,CAAC,CAACU,KAAU,OAAO,KAAKA,CAAM,EAAE,SAAS;AAAA,YACtD,aAAa,CAAC,CAACC,KAAU,OAAO,KAAKA,CAAM,EAAE,SAAS;AAAA,YACtD,UAAUT;AAAA,YACV,UAAUI;AAAA,YACV,UAAUH;AAAA,YAET,UAAAK;AAAA,UAAA;AAAA,QAAA;AAAA,~~QAEF~~,CAAC,CAACG,KACD,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAAtB;AAAA,YACA,KAAKa;AAAA,YACL,MAAK;AAAA,YACL,WAAAX;AAAA,YACA,SAASK,KAAgBC;AAAA,YACzB,SAAAH;AAAA,YACA,SAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
1	+ {"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":";;;;;;;AASA,MAAMA,IAAOC;AAAA,EACX,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,WAAAC,IAAY,GAAGC,EAAW,QAAQ;AAAA,IAClC,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAWC,GAAYrB,CAAS;AAAA,MAC3C,OAAOC;AAAA,MACP,YAAYE;AAAA,MACZ,WAAWO;AAAA,MACX,cAAc,CAAC,CAACK,KAAe,CAAC,CAACH;AAAA,MACjC,SAAAA;AAAA,MACC,GAAGI;AAAA,MAEH,UAAA;AAAA,QAAA,CAAC,CAACH,KACD,gBAAAS;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAAtB;AAAA,YACA,KAAKY;AAAA,YACL,MAAK;AAAA,YACL,WAAAV;AAAA,YACA,SAASI,KAAgBE;AAAA,YACzB,SAAAH;AAAA,YACA,SAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHmB,EAAS,QAAQb,CAAQ,EAAE,SAAS,IACnC,gBAAAW;AAAA,UAACG;AAAAA,UAAA;AAAA,YACC,OAAOxB;AAAA,YACP,YAAYE;AAAA,YACZ,aAAa,CAAC,CAACU,KAAU,OAAO,KAAKA,CAAM,EAAE,SAAS;AAAA,YACtD,aAAa,CAAC,CAACC,KAAU,OAAO,KAAKA,CAAM,EAAE,SAAS;AAAA,YACtD,UAAUT;AAAA,YACV,UAAUI;AAAA,YACV,UAAUH;AAAA,YAET,UAAAK;AAAA,UAAA;AAAA,QAAA,IAED;AAAA,QACH,CAAC,CAACG,KACD,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAAtB;AAAA,YACA,KAAKa;AAAA,YACL,MAAK;AAAA,YACL,WAAAX;AAAA,YACA,SAASK,KAAgBC;AAAA,YACzB,SAAAH;AAAA,YACA,SAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/build/esm/components/Card/Card.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAM9D,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGhE,KAAK,iBAAiB,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC;AAE3E,QAAA,MAAM,IAAI,2RAoCT,CAAC;AAEF,QAAA,MAAM,aAAa,6NAQlB,CAAC;AAEF,QAAA,MAAM,SAAS;;sGAiCd,CAAC;AAEF,KAAK,qBAAqB,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAE7E,QAAA,MAAM,QAAQ;kBAGM,OAAO;kBACP,OAAO;~~YAmDzB~~,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC"}
1	+ {"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAM9D,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGhE,KAAK,iBAAiB,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC;AAE3E,QAAA,MAAM,IAAI,2RAoCT,CAAC;AAEF,QAAA,MAAM,aAAa,6NAQlB,CAAC;AAEF,QAAA,MAAM,SAAS;;sGAiCd,CAAC;AAEF,KAAK,qBAAqB,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAE7E,QAAA,MAAM,QAAQ;kBAGM,OAAO;kBACP,OAAO;YAkDzB,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC"}

package/build/esm/components/Card/Card.styles.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { styled as l, css as d } from "styled-components";
+import { styled as u, css as d } from "styled-components";
 import { Directions as s, Sizes as g } from "../../react-base/src/consts/index.js";
 import { consts as o } from "../../react-base/src/components/Card/Card.consts.js";
 import { Variables as p } from "../../react-base/src/theme/types/layer.js";
 import { getFocusStyles as f } from "../../react-base/src/utils/stylesUtils.js";
-import { getParagraphTypographySize as x } from "../../react-base/src/utils/sizesUtils.js";
-import { CardBar as $ } from "./components/CardBar/CardBar.styles.js";
-const m = l.div(
+import { getParagraphTypographySize as $ } from "../../react-base/src/utils/sizesUtils.js";
+import { CardBar as m } from "./components/CardBar/CardBar.styles.js";
+const x = u.div(
   ({ $size: r, $outlined: i, $direction: e, $isClickable: n, theme: a }) => {
     const t = a.layer({ foundation: "surface" });
     return d`
@@ -38,7 +38,7 @@ const m = l.div(
       }
     `;
   }
-), b = l.div`
+), b = u.div`
   display: block;
   position: absolute;
   top: 0;
@@ -46,7 +46,7 @@ const m = l.div(
   width: 100%;
   height: 100%;
   transition: transform 0.5s;
-`, S = l(m)(
+`, S = u(x)(
   ({ $size: r = `${g.Medium}`, $backgroundImage: i, $interactive: e, $backgroundPosition: n = "center", theme: a }) => d`
     position: relative;
     align-items: flex-end;
@@ -56,7 +56,7 @@ const m = l.div(
     background-color: ${a.layer()[p.BackgroundFoundation]};
     overflow: hidden;
-    & > ${$} {
+    & > ${m} {
       padding: ${o[r].innerCardPadding}px;
       position: relative;
     }
@@ -75,12 +75,11 @@ const m = l.div(
       }
     `}
   `
-), C = l.div(({ $size: r, $padding: i, $bgColor: e, $withHeader: n, $withFooter: a, $direction: t, theme: u }) => {
-  const c = u.layer({ foundation: e ? "section" : "surface" });
+), C = u.div(({ $size: r, $padding: i, $bgColor: e, $withHeader: n, $withFooter: a, $direction: t, theme: l }) => {
+  const c = l.layer({ foundation: e ? "section" : "surface" });
   return d`
-    ${u.typography("paragraph", x(r))};
+    ${l.typography("paragraph", $(r))};
     display: grid;
-    flex-grow: 1;
     color: ${c[p.TextOnFoundationStrong]};
     background-color: ${c[p.BackgroundFoundation]};
@@ -116,7 +115,7 @@ const m = l.div(
   `;
 });
 export {
-  m as Card,
+  x as Card,
   C as CardBody,
   S as InsetCard,
   b as InsetCardBody