acinguiux-ds-react-framework 0.0.6 → 0.0.7

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.styles.js","sources":["../../../../src/components/Alert/Alert.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { Alignments, RequiredProperties, Transient, ALERT_CLASS, LayerColor, Sizes } from 'acinguiux-ds-react-base';\r\nimport { Prominences } from 'acinguiux-ds-fabrics';\r\n\r\nimport Button from '../Button/Button';\r\nimport { IAlertProps } from './Alert.types';\r\nimport { alertConsts } from './Alert.consts';\r\nimport { IButtonProps } from '../Button/Button.types';\r\n\r\nconst getProminence = (solidBgColor: boolean) => {\r\n  if (solidBgColor) {\r\n    return Prominences.Subtle;\r\n  }\r\n\r\n  return Prominences.Transparent;\r\n};\r\n\r\nconst Alert = styled.div<\r\n  RequiredProperties<IAlertProps, 'sentiment' | 'size' | 'solidBgColor' | 'actionsAlignment'> &\r\n  Transient<Pick<IAlertProps, 'elevation'>, 'elevation'>\r\n>`\r\n  ${({ size, sentiment, $elevation, solidBgColor, actionsAlignment, theme }) => {\r\n    const layer = theme.getLayer({ sentiment, prominence: getProminence(solidBgColor) });\r\n\r\n    return css`\r\n      background-color: ${layer[LayerColor[solidBgColor ? 'BackgroundSentiment' : 'BackgroundSurface']]};\r\n      color: ${layer[LayerColor.TextOnSentimentDefault]};\r\n      border-color: ${layer[LayerColor.BorderOnSentimentColour]};\r\n\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: flex-start;\r\n      width: 100%;\r\n      min-height: ${alertConsts.minHeight[size]}px;\r\n      padding: ${alertConsts.padding[size]};\r\n      border-width: 1px;\r\n      border-style: solid;\r\n      border-radius: 12px;\r\n\r\n      ${$elevation &&\r\n      css`\r\n        box-shadow: ${theme.elevation.level1};\r\n        border: 0;\r\n      `}\r\n\r\n      ${actionsAlignment === Alignments.Right &&\r\n      css`\r\n        padding-right: ${alertConsts.paddingRight[size]};\r\n      `}\r\n    `;\r\n  }}\r\n`;\r\n\r\nconst AlertLabel = styled.span<RequiredProperties<IAlertProps, 'size'>>`\r\n  ${({ size, theme }) => css`\r\n    ${size === Sizes.Small && theme.heading['5'].bold};\r\n    ${size === Sizes.Medium && theme.heading['4'].bold};\r\n    ${size === Sizes.Large && theme.heading['3'].demi};\r\n  `}\r\n`;\r\n\r\nconst AlertMessage = styled.span<RequiredProperties<IAlertProps, 'size'>>`\r\n  ${({ size, theme }) => css`\r\n    ${size === Sizes.Large ? theme.paragraph[Sizes.Medium].normal : theme.paragraph[Sizes.Small].normal};\r\n  `}\r\n`;\r\n\r\nconst AlertContentContainer = styled.div<RequiredProperties<IAlertProps, 'actionsAlignment'>>`\r\n  ${({ actionsAlignment }) => css`\r\n    display: flex;\r\n    flex-grow: 1;\r\n\r\n    ${actionsAlignment === Alignments.Bottom &&\r\n    css`\r\n      flex-direction: column;\r\n    `}\r\n\r\n    ${actionsAlignment === Alignments.Right &&\r\n    css`\r\n      justify-content: space-between;\r\n    `}\r\n  `}\r\n`;\r\n\r\nconst AlertContent = styled.div<RequiredProperties<IAlertProps, 'size'> & { $hasLabel?: boolean }>`\r\n  ${({ size, $hasLabel, theme }) => css`\r\n    ${theme.paragraph[size].normal};\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: start;\r\n    min-height: 20px;\r\n    row-gap: 8px;\r\n    margin: ${alertConsts[$hasLabel ? 'labelMarginTop' : 'childrenMarginTop'][size]}px 0;\r\n  `};\r\n`;\r\n\r\nconst Actions = styled.div<RequiredProperties<IAlertProps, 'size' | 'actionsAlignment' | 'dismissible'>>`\r\n  ${({ size, actionsAlignment, dismissible }) => css`\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: flex-end;\r\n    gap: 8px;\r\n    height: fit-content;\r\n\r\n    ${actionsAlignment === Alignments.Bottom &&\r\n    css`\r\n      margin-top: 20px;\r\n      margin-bottom: 4px;\r\n    `};\r\n\r\n    ${actionsAlignment === Alignments.Bottom &&\r\n    dismissible &&\r\n    css`\r\n      margin-right: ${alertConsts.actionsMarginRight[size]}px;\r\n    `};\r\n\r\n    ${actionsAlignment === Alignments.Right &&\r\n    dismissible &&\r\n    css`\r\n      margin-right: 12px;\r\n    `};\r\n  `};\r\n`;\r\n\r\nconst IconContainer = styled.div<RequiredProperties<IAlertProps, 'size'>>`\r\n  ${({ theme, size, sentiment }) => {\r\n    const layer = theme.getLayer({ sentiment });\r\n\r\n    return css`\r\n      color: ${layer[LayerColor.BackgroundSentiment]};\r\n      display: flex;\r\n      height: 100%;\r\n      margin-right: ${alertConsts.iconMarginRight[size]}px;\r\n\r\n      .${ALERT_CLASS}-icon {\r\n        margin-top: ${alertConsts.iconMarginTop[size]}px;\r\n      }\r\n    `;\r\n  }};\r\n`;\r\n\r\nconst DismissContainer = styled.div`\r\n  height: 20px;\r\n  width: 20px;\r\n  min-height: 20px;\r\n  position: relative;\r\n`;\r\n\r\nconst DismissButton = styled(Button) <RequiredProperties<IButtonProps, 'size'>>`\r\n  ${({ size }) => css`\r\n    margin-left: ${size === Sizes.Medium ? -16 : -8}px;\r\n  `}\r\n`;\r\n\r\nexport {\r\n  Alert,\r\n  AlertContentContainer,\r\n  AlertContent,\r\n  AlertLabel,\r\n  AlertMessage,\r\n  Actions,\r\n  IconContainer,\r\n  DismissContainer,\r\n  DismissButton,\r\n};\r\n"],"names":["getProminence","solidBgColor","Prominences","Alert","styled","size","sentiment","$elevation","actionsAlignment","theme","layer","css","LayerColor","alertConsts","Alignments","AlertLabel","Sizes","AlertMessage","AlertContentContainer","AlertContent","$hasLabel","Actions","dismissible","IconContainer","ALERT_CLASS","DismissContainer","DismissButton","Button"],"mappings":"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"}
+{"version":3,"file":"Alert.styles.js","sources":["../../../../src/components/Alert/Alert.styles.ts"],"sourcesContent":["import { ALERT_CLASS, Alignments, RequiredProperties, Sizes, Transient, VariablesNames } from 'acinguiux-ds-react-base';\nimport { Prominences } from 'acinguiux-ds-fabrics';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button/Button';\nimport { IButtonProps } from '../Button/Button.types';\nimport { alertConsts } from './Alert.consts';\nimport { IAlertProps } from './Alert.types';\n\nconst getProminence = (solidBgColor: boolean) => {\n  if (solidBgColor) {\n    return Prominences.Subtle;\n  }\n\n  return Prominences.Transparent;\n};\n\nconst Alert = styled.div<\n  RequiredProperties<IAlertProps, 'sentiment' | 'size' | 'solidBgColor' | 'actionsAlignment'> &\n    Transient<Pick<IAlertProps, 'elevation'>, 'elevation'>\n>`\n  ${({ size, sentiment, $elevation, solidBgColor, actionsAlignment, theme }) => {\n    const currentModes = { sentiment, sentimentProminence: getProminence(solidBgColor) };\n    const layer = theme.getVariablesLayer(currentModes);\n\n    return css`\n      background-color: ${layer[VariablesNames[solidBgColor ? 'BackgroundSentiment' : 'BackgroundFoundation']]};\n\n      color: ${layer[VariablesNames.TextOnSentimentOnBackground]};\n      border-color: ${layer[VariablesNames.BorderOnSentimentOnBackground]};\n\n      display: flex;\n      flex-direction: row;\n      align-items: flex-start;\n      width: 100%;\n      min-height: ${alertConsts.minHeight[size]}px;\n      padding: ${alertConsts.padding[size]};\n      border-width: 1px;\n      border-style: solid;\n      border-radius: 12px;\n\n      ${$elevation &&\n      css`\n        box-shadow: ${theme.elevation.level1};\n        border: 0;\n      `}\n\n      ${actionsAlignment === Alignments.Right &&\n      css`\n        padding-right: ${alertConsts.paddingRight[size]};\n      `}\n    `;\n  }}\n`;\n\nconst AlertLabel = styled.span<RequiredProperties<IAlertProps, 'size'>>`\n  ${({ size, theme }) => css`\n    ${size === Sizes.Small && theme.heading['5'].bold};\n    ${size === Sizes.Medium && theme.heading['4'].bold};\n    ${size === Sizes.Large && theme.heading['3'].demi};\n  `}\n`;\n\nconst AlertMessage = styled.span<RequiredProperties<IAlertProps, 'size'>>`\n  ${({ size, theme }) => css`\n    ${size === Sizes.Large ? theme.paragraph[Sizes.Medium].normal : theme.paragraph[Sizes.Small].normal};\n  `}\n`;\n\nconst AlertContentContainer = styled.div<RequiredProperties<IAlertProps, 'actionsAlignment'>>`\n  ${({ actionsAlignment }) => css`\n    display: flex;\n    flex-grow: 1;\n\n    ${actionsAlignment === Alignments.Bottom &&\n    css`\n      flex-direction: column;\n    `}\n\n    ${actionsAlignment === Alignments.Right &&\n    css`\n      justify-content: space-between;\n    `}\n  `}\n`;\n\nconst AlertContent = styled.div<RequiredProperties<IAlertProps, 'size'> & { $hasLabel?: boolean }>`\n  ${({ size, $hasLabel, theme }) => css`\n    ${theme.paragraph[size].normal};\n\n    display: flex;\n    flex-direction: column;\n    justify-content: start;\n    min-height: 20px;\n    row-gap: 8px;\n    margin: ${alertConsts[$hasLabel ? 'labelMarginTop' : 'childrenMarginTop'][size]}px 0;\n  `};\n`;\n\nconst Actions = styled.div<RequiredProperties<IAlertProps, 'size' | 'actionsAlignment' | 'dismissible'>>`\n  ${({ size, actionsAlignment, dismissible }) => css`\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    height: fit-content;\n\n    ${actionsAlignment === Alignments.Bottom &&\n    css`\n      margin-top: 20px;\n      margin-bottom: 4px;\n    `};\n\n    ${actionsAlignment === Alignments.Bottom &&\n    dismissible &&\n    css`\n      margin-right: ${alertConsts.actionsMarginRight[size]}px;\n    `};\n\n    ${actionsAlignment === Alignments.Right &&\n    dismissible &&\n    css`\n      margin-right: 12px;\n    `};\n  `};\n`;\n\nconst IconContainer = styled.div<RequiredProperties<IAlertProps, 'size'>>`\n  ${({ theme, size, sentiment }) => {\n    const layer = theme.getVariablesLayer({ sentiment });\n\n    return css`\n      color: ${layer[VariablesNames.BackgroundSentiment]};\n      display: flex;\n      height: 100%;\n      margin-right: ${alertConsts.iconMarginRight[size]}px;\n\n      .${ALERT_CLASS}-icon {\n        margin-top: ${alertConsts.iconMarginTop[size]}px;\n      }\n    `;\n  }};\n`;\n\nconst DismissContainer = styled.div`\n  height: 20px;\n  width: 20px;\n  min-height: 20px;\n  position: relative;\n`;\n\nconst DismissButton = styled(Button)<RequiredProperties<IButtonProps, 'size'>>`\n  ${({ size }) => css`\n    margin-left: ${size === Sizes.Medium ? -16 : -8}px;\n  `}\n`;\n\nexport {\n  Actions,\n  Alert,\n  AlertContent,\n  AlertContentContainer,\n  AlertLabel,\n  AlertMessage,\n  DismissButton,\n  DismissContainer,\n  IconContainer,\n};\n"],"names":["getProminence","solidBgColor","Prominences","Alert","styled","size","sentiment","$elevation","actionsAlignment","theme","currentModes","layer","css","VariablesNames","alertConsts","Alignments","AlertLabel","Sizes","AlertMessage","AlertContentContainer","AlertContent","$hasLabel","Actions","dismissible","IconContainer","ALERT_CLASS","DismissContainer","DismissButton","Button"],"mappings":";;;;;;AASA,MAAMA,IAAgB,CAACC,MACjBA,IACKC,EAAY,SAGdA,EAAY,aAGfC,IAAQC,EAAO;AAAA,IAIjB,CAAC,EAAE,MAAAC,GAAM,WAAAC,GAAW,YAAAC,GAAY,cAAAN,GAAc,kBAAAO,GAAkB,OAAAC,QAAY;AAC5E,QAAMC,IAAe,EAAE,WAAAJ,GAAW,qBAAqBN,EAAcC,CAAY,EAAE,GAC7EU,IAAQF,EAAM,kBAAkBC,CAAY;AAE3C,SAAAE;AAAA,0BACeD,EAAME,EAAeZ,IAAe,wBAAwB,sBAAsB,CAAC,CAAC;AAAA;AAAA,eAE/FU,EAAME,EAAe,2BAA2B,CAAC;AAAA,sBAC1CF,EAAME,EAAe,6BAA6B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMrDC,EAAY,UAAUT,CAAI,CAAC;AAAA,iBAC9BS,EAAY,QAAQT,CAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,QAKlCE,KACFK;AAAA,sBACgBH,EAAM,UAAU,MAAM;AAAA;AAAA,OAErC;AAAA;AAAA,QAECD,MAAqBO,EAAW,SAClCH;AAAA,yBACmBE,EAAY,aAAaT,CAAI,CAAC;AAAA,OAChD;AAAA;AAEL,CAAC;AAAA,GAGGW,IAAaZ,EAAO;AAAA,IACtB,CAAC,EAAE,MAAAC,GAAM,OAAAI,EAAA,MAAYG;AAAA,MACnBP,MAASY,EAAM,SAASR,EAAM,QAAQ,CAAG,EAAE,IAAI;AAAA,MAC/CJ,MAASY,EAAM,UAAUR,EAAM,QAAQ,CAAG,EAAE,IAAI;AAAA,MAChDJ,MAASY,EAAM,SAASR,EAAM,QAAQ,CAAG,EAAE,IAAI;AAAA,GAClD;AAAA,GAGGS,IAAed,EAAO;AAAA,IACxB,CAAC,EAAE,MAAAC,GAAM,OAAAI,EAAA,MAAYG;AAAA,MACnBP,MAASY,EAAM,QAAQR,EAAM,UAAUQ,EAAM,MAAM,EAAE,SAASR,EAAM,UAAUQ,EAAM,KAAK,EAAE,MAAM;AAAA,GACpG;AAAA,GAGGE,IAAwBf,EAAO;AAAA,IACjC,CAAC,EAAE,kBAAAI,EAAA,MAAuBI;AAAA;AAAA;AAAA;AAAA,MAIxBJ,MAAqBO,EAAW,UAClCH;AAAA;AAAA,KAEC;AAAA;AAAA,MAECJ,MAAqBO,EAAW,SAClCH;AAAA;AAAA,KAEC;AAAA,GACF;AAAA,GAGGQ,IAAehB,EAAO;AAAA,IACxB,CAAC,EAAE,MAAAC,GAAM,WAAAgB,GAAW,OAAAZ,EAAY,MAAAG;AAAA,MAC9BH,EAAM,UAAUJ,CAAI,EAAE,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOpBS,EAAYO,IAAY,mBAAmB,mBAAmB,EAAEhB,CAAI,CAAC;AAAA,GAChF;AAAA,GAGGiB,IAAUlB,EAAO;AAAA,IACnB,CAAC,EAAE,MAAAC,GAAM,kBAAAG,GAAkB,aAAAe,EAAkB,MAAAX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAO3CJ,MAAqBO,EAAW,UAClCH;AAAA;AAAA;AAAA,KAGC;AAAA;AAAA,MAECJ,MAAqBO,EAAW,UAClCQ,KACAX;AAAA,sBACkBE,EAAY,mBAAmBT,CAAI,CAAC;AAAA,KACrD;AAAA;AAAA,MAECG,MAAqBO,EAAW,SAClCQ,KACAX;AAAA;AAAA,KAEC;AAAA,GACF;AAAA,GAGGY,IAAgBpB,EAAO;AAAA,IACzB,CAAC,EAAE,OAAAK,GAAO,MAAAJ,GAAM,WAAAC,QAAgB;AAChC,QAAMK,IAAQF,EAAM,kBAAkB,EAAE,WAAAH,GAAW;AAE5C,SAAAM;AAAA,eACID,EAAME,EAAe,mBAAmB,CAAC;AAAA;AAAA;AAAA,sBAGlCC,EAAY,gBAAgBT,CAAI,CAAC;AAAA;AAAA,SAE9CoB,CAAW;AAAA,sBACEX,EAAY,cAAcT,CAAI,CAAC;AAAA;AAAA;AAGnD,CAAC;AAAA,GAGGqB,IAAmBtB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO1BuB,IAAgBvB,EAAOwB,CAAM;AAAA,IAC/B,CAAC,EAAE,MAAAvB,EAAA,MAAWO;AAAA,mBACCP,MAASY,EAAM,SAAS,MAAM,EAAE;AAAA,GAChD;AAAA;"}

package/build/esm/components/Alert/utils/alertUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"alertUtils.js","sources":["../../../../../src/components/Alert/utils/alertUtils.tsx"],"sourcesContent":["import React, { JSX, cloneElement, ReactElement } from 'react';\r\n\r\nimport { ALERT_CLASS } from 'acinguiux-ds-react-base';\r\nimport { Sentiments } from 'acinguiux-ds-fabrics';\r\n\r\nimport { AlertSentiments, AlertSize, IAlertProps } from '../Alert.types';\r\nimport { QuestionMarkCircle, CheckCircle, CrossCircle, AlertCircle, InfoCircle } from '../../Icon/components';\r\nimport { alertConsts } from '../Alert.consts';\r\n\r\nexport const getAlertStateIcon = (\r\n  sentiment: AlertSentiments,\r\n  size: AlertSize,\r\n  icon?: IAlertProps['icon'],\r\n  iconAreaLabel?: IAlertProps['iconAriaLabel'],\r\n  iconClassName?: IAlertProps['iconClassName'],\r\n): ReactElement => {\r\n  const iconProps = {\r\n    className: iconClassName || `${ALERT_CLASS}-icon`,\r\n    width: alertConsts.icon[size],\r\n    height: alertConsts.icon[size],\r\n    ...(iconAreaLabel ? { 'aria-label': iconAreaLabel } : {}),\r\n  };\r\n\r\n  if (icon) {\r\n    return cloneElement(icon as ReactElement, iconProps);\r\n  }\r\n\r\n  const icons: { [key: string]: JSX.Element } = {\r\n    [Sentiments.Neutral]: <QuestionMarkCircle aria-label=\"Neutral alert\" {...iconProps} />,\r\n    [Sentiments.Positive]: <CheckCircle aria-label=\"Positive alert\" {...iconProps} />,\r\n    [Sentiments.Negative]: <CrossCircle aria-label=\"Negative alert\" {...iconProps} />,\r\n    [Sentiments.Warning]: <AlertCircle aria-label=\"Waring alert\" {...iconProps} />,\r\n    [Sentiments.Information]: <InfoCircle aria-label=\"Information alert\" {...iconProps} />,\r\n  };\r\n\r\n  return icons[sentiment];\r\n};\r\n"],"names":["getAlertStateIcon","sentiment","size","icon","iconAreaLabel","iconClassName","iconProps","ALERT_CLASS","alertConsts","cloneElement","Sentiments","QuestionMarkCircle","CheckCircle","CrossCircle","AlertCircle","InfoCircle"],"mappings":";;;;;;;;;;AASO,MAAMA,IAAoB,CAC/BC,GACAC,GACAC,GACAC,GACAC,MACiB;AACjB,QAAMC,IAAY;AAAA,IAChB,WAAWD,KAAiB,GAAGE,CAAW;AAAA,IAC1C,OAAOC,EAAY,KAAKN,CAAI;AAAA,IAC5B,QAAQM,EAAY,KAAKN,CAAI;AAAA,IAC7B,GAAIE,IAAgB,EAAE,cAAcA,MAAkB,CAAC;AAAA,EAAA;AAGzD,SAAID,IACKM,EAAaN,GAAsBG,CAAS,IAGP;AAAA,IAC5C,CAACI,EAAW,OAAO,qBAAIC,GAAmB,EAAA,cAAW,iBAAiB,GAAGL,GAAW;AAAA,IACpF,CAACI,EAAW,QAAQ,qBAAIE,GAAY,EAAA,cAAW,kBAAkB,GAAGN,GAAW;AAAA,IAC/E,CAACI,EAAW,QAAQ,qBAAIG,GAAY,EAAA,cAAW,kBAAkB,GAAGP,GAAW;AAAA,IAC/E,CAACI,EAAW,OAAO,qBAAII,GAAY,EAAA,cAAW,gBAAgB,GAAGR,GAAW;AAAA,IAC5E,CAACI,EAAW,WAAW,qBAAIK,GAAW,EAAA,cAAW,qBAAqB,GAAGT,GAAW;AAAA,EAAA,EAGzEL,CAAS;AACxB;"}
+{"version":3,"file":"alertUtils.js","sources":["../../../../../src/components/Alert/utils/alertUtils.tsx"],"sourcesContent":["import React, { JSX, cloneElement, ReactElement } from 'react';\n\nimport { ALERT_CLASS } from 'acinguiux-ds-react-base';\nimport { Sentiments } from 'acinguiux-ds-fabrics';\n\nimport { AlertSentiments, AlertSize, IAlertProps } from '../Alert.types';\nimport { QuestionMarkCircle, CheckCircle, CrossCircle, AlertCircle, InfoCircle } from '../../Icon/components';\nimport { alertConsts } from '../Alert.consts';\n\nexport const getAlertStateIcon = (\n  sentiment: AlertSentiments,\n  size: AlertSize,\n  icon?: IAlertProps['icon'],\n  iconAreaLabel?: IAlertProps['iconAriaLabel'],\n  iconClassName?: IAlertProps['iconClassName'],\n): ReactElement => {\n  const iconProps = {\n    className: iconClassName || `${ALERT_CLASS}-icon`,\n    width: alertConsts.icon[size],\n    height: alertConsts.icon[size],\n    ...(iconAreaLabel ? { 'aria-label': iconAreaLabel } : {}),\n  };\n\n  if (icon) {\n    return cloneElement(icon as ReactElement, iconProps);\n  }\n\n  const icons: { [key: string]: JSX.Element } = {\n    [Sentiments.Neutral]: <QuestionMarkCircle aria-label=\"Neutral alert\" {...iconProps} />,\n    [Sentiments.Positive]: <CheckCircle aria-label=\"Positive alert\" {...iconProps} />,\n    [Sentiments.Negative]: <CrossCircle aria-label=\"Negative alert\" {...iconProps} />,\n    [Sentiments.Warning]: <AlertCircle aria-label=\"Waring alert\" {...iconProps} />,\n    [Sentiments.Information]: <InfoCircle aria-label=\"Information alert\" {...iconProps} />,\n  };\n\n  return icons[sentiment];\n};\n"],"names":["getAlertStateIcon","sentiment","size","icon","iconAreaLabel","iconClassName","iconProps","ALERT_CLASS","alertConsts","cloneElement","Sentiments","QuestionMarkCircle","CheckCircle","CrossCircle","AlertCircle","InfoCircle"],"mappings":";;;;;;;;;;AASO,MAAMA,IAAoB,CAC/BC,GACAC,GACAC,GACAC,GACAC,MACiB;AACjB,QAAMC,IAAY;AAAA,IAChB,WAAWD,KAAiB,GAAGE,CAAW;AAAA,IAC1C,OAAOC,EAAY,KAAKN,CAAI;AAAA,IAC5B,QAAQM,EAAY,KAAKN,CAAI;AAAA,IAC7B,GAAIE,IAAgB,EAAE,cAAcA,MAAkB,CAAA;AAAA,EACxD;AAEA,SAAID,IACKM,EAAaN,GAAsBG,CAAS,IAGP;AAAA,IAC5C,CAACI,EAAW,OAAO,qBAAIC,GAAmB,EAAA,cAAW,iBAAiB,GAAGL,GAAW;AAAA,IACpF,CAACI,EAAW,QAAQ,qBAAIE,GAAY,EAAA,cAAW,kBAAkB,GAAGN,GAAW;AAAA,IAC/E,CAACI,EAAW,QAAQ,qBAAIG,GAAY,EAAA,cAAW,kBAAkB,GAAGP,GAAW;AAAA,IAC/E,CAACI,EAAW,OAAO,qBAAII,GAAY,EAAA,cAAW,gBAAgB,GAAGR,GAAW;AAAA,IAC5E,CAACI,EAAW,WAAW,qBAAIK,GAAW,EAAA,cAAW,qBAAqB,GAAGT,EAAW,CAAA;AAAA,EACtF,EAEaL,CAAS;AACxB;"}

package/build/esm/components/Avatar/Avatar.d.ts

@@ -1,5 +1,8 @@
 import { ReactElement } from 'react';
-import { IAvatarProps } from './Avatar.types';
-declare const Avatar: ({ className, size, src, alt, abbreviation, label, secondaryLabel, dropdownOverlay, dropdownAlign, collapsed, ...rest }: IAvatarProps) => ReactElement;
+import { AvatarTypes } from '..\..\react-base\src';
+import * as Flags from '../Flag/components/index';
+type FlagComponentKey = keyof typeof Flags;
+type FlagName = Lowercase<FlagComponentKey> | Uppercase<FlagComponentKey>;
+declare const Avatar: ({ className, size, src, flag, alt, abbreviation, label, secondaryLabel, dropdownOverlay, dropdownAlign, collapsed, extraLabel, textAndChevron, ...rest }: AvatarTypes.IAvatarProps<FlagName>) => ReactElement;
 export default Avatar;
 //# sourceMappingURL=Avatar.d.ts.map

package/build/esm/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAS5C,OAAO,EAAE,YAAY,EAAsE,MAAM,gBAAgB,CAAC;AAmClH,QAAA,MAAM,MAAM,2HAYT,YAAY,KAAG,YA8CjB,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AAInE,OAAO,EAA+C,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMnG,OAAO,KAAK,KAAK,MAAM,0BAA0B,CAAC;AA6DlD,KAAK,gBAAgB,GAAG,MAAM,OAAO,KAAK,CAAC;AAC3C,KAAK,QAAQ,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAC;AAO1E,QAAA,MAAM,MAAM,6JAeT,YAAY,YAAY,CAAC,QAAQ,CAAC,KAAG,YAyDvC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/esm/components/Avatar/Avatar.js

@@ -1,63 +1,97 @@
-import { jsxs as n, jsx as r, Fragment as p } from "react/jsx-runtime";
-import g from "classnames";
-import { useTheme as v } from "styled-components";
-import C from "../Icon/components/PersonSolid.js";
-import { altDefaultText as x, avatarConsts as I } from "./Avatar.consts.js";
-import { AvatarWrapper as S, Avatar as T, TextBox as N, Label as P, AdditionalText as b, Image as V, NoImageCircleWrapper as $, NoImageCircle as j } from "./Avatar.styles.js";
-import w from "../Button/Button.js";
-import B from "../Icon/components/ChevronDown.js";
-import { Popover as D, PopoverTrigger as W, PopoverContent as F } from "../Popover/Popover.js";
-import { AVATAR_CLASS as L, Sizes as d, Variants as M } from "../../react-base/src/consts.js";
-const A = ({ size: a, ariaLabel: t, children: e }) => /* @__PURE__ */ r($, { size: a, children: /* @__PURE__ */ r(j, { "aria-label": t, children: e }) }), R = ({ abbreviation: a, size: t, ariaLabel: e }) => /* @__PURE__ */ r(A, { size: t, ariaLabel: e, children: a }), _ = ({ size: a, ariaLabel: t }) => {
-  const e = v(), i = I[a].icon;
-  return /* @__PURE__ */ r(A, { size: a, children: /* @__PURE__ */ r(
-    C,
+import { jsxs as p, jsx as t, Fragment as T } from "react/jsx-runtime";
+import { useMemo as x, useState as N, useEffect as F } from "react";
+import M from "classnames";
+import { useTheme as P } from "styled-components";
+import $ from "../Icon/components/PersonSolid.js";
+import { AvatarWrapper as D, Avatar as V, FlagContainer as _, TextAndChevronContainer as B, TextBox as K, Label as W, AdditionalText as G, StyledButton as H, Image as R, NoImageCircleWrapper as U, NoImageCircle as Y } from "./Avatar.styles.js";
+import q from "../Icon/components/ChevronDown.js";
+import { Popover as J, PopoverTrigger as Q, PopoverContent as X } from "../Popover/Popover.js";
+import * as C from "../Flag/components/index.js";
+import { AVATAR_CLASS as Z, Sizes as A, Variants as k } from "../../react-base/src/consts.js";
+import { altDefaultText as L, consts as w } from "../../react-base/src/components/Avatar/Avatar.consts.js";
+const E = ({ size: i, ariaLabel: r, label: n, secondaryLabel: e, children: c, textAndChevron: m, dropdownOverlay: a }) => /* @__PURE__ */ t(U, { size: i, tabIndex: (n || e || a) && m ? -1 : 0, children: /* @__PURE__ */ t(Y, { "aria-label": r, children: c }) }), d = ({ abbreviation: i, size: r, ariaLabel: n, label: e, secondaryLabel: c, textAndChevron: m, dropdownOverlay: a }) => /* @__PURE__ */ t(E, { size: r, ariaLabel: n, label: e, secondaryLabel: c, textAndChevron: m, dropdownOverlay: a, children: i }), j = ({ size: i, ariaLabel: r, label: n, secondaryLabel: e, textAndChevron: c, dropdownOverlay: m }) => {
+  const a = P(), o = w[i].icon;
+  return /* @__PURE__ */ t(E, { size: i, label: n, secondaryLabel: e, textAndChevron: c, dropdownOverlay: m, children: /* @__PURE__ */ t(
+    $,
     {
-      width: i,
-      height: i,
-      "aria-label": t,
-      fill: e.onSentiment.default.strong.primary.default.text.default
+      width: o,
+      height: o,
+      "aria-label": r || "Default user avatar",
+      fill: a.onSentiment.default.strong.primary.default.text.default
     }
   ) });
-}, k = ({ src: a, alt: t }) => /* @__PURE__ */ r(V, { src: a, alt: t }), q = ({
-  className: a,
-  size: t = d.Medium,
-  src: e,
-  alt: i = x,
-  abbreviation: h,
-  label: l,
+}, z = ({ size: i, src: r, alt: n, label: e, secondaryLabel: c, textAndChevron: m, dropdownOverlay: a, abbreviation: o, ...s }) => {
+  const [g, f] = N(!1), [h, l] = N(null);
+  return F(() => {
+    f(!1), l(null);
+    const u = new Image();
+    u.onload = () => l(r), u.onerror = () => f(!0), u.src = r;
+  }, [r]), !h || g ? o ? /* @__PURE__ */ t(d, { abbreviation: o, size: i, label: e, secondaryLabel: c, textAndChevron: m, dropdownOverlay: a, ariaLabel: s["aria-label"] }) : /* @__PURE__ */ t(j, { size: i, label: e, secondaryLabel: c, textAndChevron: m, dropdownOverlay: a, ariaLabel: s["aria-label"] }) : /* @__PURE__ */ t(
+    R,
+    {
+      src: h,
+      alt: n,
+      tabIndex: (e || c || a) && m ? -1 : 0
+    },
+    r
+  );
+}, O = Object.fromEntries(Object.keys(C).flatMap((i) => [[i.toLowerCase(), i], [i.toUpperCase(), i]])), v = (i) => O[i], ct = ({
+  className: i,
+  size: r = A.Medium,
+  src: n,
+  flag: e,
+  alt: c = L,
+  abbreviation: m,
+  label: a,
   secondaryLabel: o,
-  dropdownOverlay: m,
-  dropdownAlign: u,
-  collapsed: s = !1,
-  ...c
+  dropdownOverlay: s,
+  dropdownAlign: g,
+  collapsed: f = !1,
+  extraLabel: h = !0,
+  textAndChevron: l = !0,
+  ...u
 }) => {
-  const f = /* @__PURE__ */ n(S, { className: g(L, a), ...c, children: [
-    /* @__PURE__ */ n(T, { size: t, children: [
-      !!e && /* @__PURE__ */ r(k, { size: t, src: e, alt: i }),
-      !e && (h ? /* @__PURE__ */ r(R, { abbreviation: h, size: t, ariaLabel: c["aria-label"] }) : /* @__PURE__ */ r(_, { size: t, ariaLabel: c["aria-label"] }))
-    ] }),
-    (!!l || !!o) && /* @__PURE__ */ n(N, { collapsed: s, children: [
-      !!l && /* @__PURE__ */ r(P, { size: t, secondaryLabel: o, children: l }),
-      !!o && /* @__PURE__ */ r(b, { size: t, children: o })
-    ] }),
-    !s && !!m && /* @__PURE__ */ r(
-      w,
-      {
-        size: d.Small,
-        variant: M.Transparent,
-        icon: /* @__PURE__ */ r(B, { width: 16 }),
-        iconOnly: !0,
-        "aria-label": "View profile and more"
-      }
-    )
-  ] });
-  return /* @__PURE__ */ r(p, { children: m ? /* @__PURE__ */ n(D, { children: [
-    /* @__PURE__ */ r(W, { asChild: !0, children: f }),
-    /* @__PURE__ */ r(F, { ...u, children: m })
-  ] }) : /* @__PURE__ */ r(p, { children: f }) });
-}, O = q;
+  const S = x(() => e !== void 0 ? C[v(e)] : null, [e]), I = /* @__PURE__ */ p(
+    D,
+    {
+      className: M(Z, i),
+      hasText: !!a || !!o,
+      dropdownOverlay: s,
+      textAndChevron: l,
+      size: r,
+      ...u,
+      children: [
+        /* @__PURE__ */ p(V, { size: r, children: [
+          !n && (!e || !S) && m && /* @__PURE__ */ t(d, { abbreviation: m, size: r, label: a, secondaryLabel: o, textAndChevron: l, dropdownOverlay: s, ariaLabel: u["aria-label"] }),
+          !!n && /* @__PURE__ */ t(z, { size: r, src: n, alt: c, label: a, secondaryLabel: o, textAndChevron: l, dropdownOverlay: s, abbreviation: m }),
+          !n && e && S && /* @__PURE__ */ t(_, { size: r, tabIndex: (a || o || s) && l ? -1 : 0, children: /* @__PURE__ */ t("div", { "data-testid": `flag-${e}`, children: /* @__PURE__ */ t(S, {}) }) }),
+          !n && !m && (!e || !S) && /* @__PURE__ */ t(j, { size: r, label: a, secondaryLabel: o, textAndChevron: l, dropdownOverlay: s, ariaLabel: u["aria-label"] })
+        ] }),
+        /* @__PURE__ */ p(B, { children: [
+          l && (!!a || !!o) && /* @__PURE__ */ p(K, { collapsed: f, children: [
+            !!a && /* @__PURE__ */ t(W, { size: r, extraLabel: h, secondaryLabel: o, children: a }),
+            !!o && !!h && /* @__PURE__ */ t(G, { size: r, children: o })
+          ] }),
+          l && !f && !!s && /* @__PURE__ */ t(
+            H,
+            {
+              size: A.Small,
+              variant: k.Transparent,
+              icon: /* @__PURE__ */ t(q, { width: 16 }),
+              iconOnly: !0,
+              "aria-label": "View profile and more"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ t(T, { children: s && l ? /* @__PURE__ */ p(J, { children: [
+    /* @__PURE__ */ t(Q, { asChild: !0, children: I }),
+    /* @__PURE__ */ t(X, { ...g, children: s })
+  ] }) : /* @__PURE__ */ t(T, { children: I }) });
+};
 export {
-  O as default
+  ct as default
 };
 //# sourceMappingURL=Avatar.js.map

package/build/esm/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\r\n\r\nimport classNames from 'classnames';\r\nimport { useTheme } from 'styled-components';\r\nimport { Sizes, Variants, AVATAR_CLASS } from 'acinguiux-ds-react-base';\r\n\r\nimport PersonSolid from '../Icon/components/PersonSolid';\r\nimport { altDefaultText, avatarConsts } from './Avatar.consts';\r\nimport * as Styled from './Avatar.styles';\r\nimport { IAvatarProps, IAvatarNoImageCircle, IAvatarAsText, IAvatarAsIcon, IAvatarAsImage } from './Avatar.types';\r\nimport Button from '../Button/Button';\r\nimport { ChevronDown } from '../Icon/components';\r\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover';\r\n\r\nconst NoImageCircle = ({ size, ariaLabel, children }: IAvatarNoImageCircle) => (\r\n  <Styled.NoImageCircleWrapper size={size}>\r\n    <Styled.NoImageCircle aria-label={ariaLabel}>{children}</Styled.NoImageCircle>\r\n  </Styled.NoImageCircleWrapper>\r\n);\r\n\r\nconst AsAbbreviation = ({ abbreviation, size, ariaLabel }: IAvatarAsText) => (\r\n  <NoImageCircle size={size} ariaLabel={ariaLabel}>\r\n    {abbreviation}\r\n  </NoImageCircle>\r\n);\r\n\r\nconst AsIcon = ({ size, ariaLabel }: IAvatarAsIcon) => {\r\n  const theme = useTheme();\r\n  const iconSize = avatarConsts[size].icon;\r\n\r\n  return (\r\n    <NoImageCircle size={size}>\r\n      <PersonSolid\r\n        width={iconSize}\r\n        height={iconSize}\r\n        aria-label={ariaLabel}\r\n        fill={theme.onSentiment.default.strong.primary.default.text.default}\r\n      />\r\n    </NoImageCircle>\r\n  );\r\n};\r\n\r\nconst AsImage = ({ src, alt }: IAvatarAsImage) => <Styled.Image src={src} alt={alt} />;\r\n\r\nconst Avatar = ({\r\n  className,\r\n  size = Sizes.Medium,\r\n  src,\r\n  alt = altDefaultText,\r\n  abbreviation,\r\n  label,\r\n  secondaryLabel,\r\n  dropdownOverlay,\r\n  dropdownAlign,\r\n  collapsed = false,\r\n  ...rest\r\n}: IAvatarProps): ReactElement => {\r\n  const content = (\r\n    <Styled.AvatarWrapper className={classNames(AVATAR_CLASS, className)} {...rest}>\r\n      <Styled.Avatar size={size}>\r\n        {!!src && <AsImage size={size} src={src} alt={alt} />}\r\n        {!src &&\r\n          (abbreviation ? (\r\n            <AsAbbreviation abbreviation={abbreviation} size={size} ariaLabel={rest['aria-label']} />\r\n          ) : (\r\n            <AsIcon size={size} ariaLabel={rest['aria-label']} />\r\n          ))}\r\n      </Styled.Avatar>\r\n      {(!!label || !!secondaryLabel) && (\r\n        <Styled.TextBox collapsed={collapsed}>\r\n          {!!label && (\r\n            <Styled.Label size={size} secondaryLabel={secondaryLabel}>\r\n              {label}\r\n            </Styled.Label>\r\n          )}\r\n          {!!secondaryLabel && <Styled.AdditionalText size={size}>{secondaryLabel}</Styled.AdditionalText>}\r\n        </Styled.TextBox>\r\n      )}\r\n      {!collapsed && !!dropdownOverlay && (\r\n        <Button\r\n          size={Sizes.Small}\r\n          variant={Variants.Transparent}\r\n          icon={<ChevronDown width={16} />}\r\n          iconOnly\r\n          aria-label=\"View profile and more\"\r\n        />\r\n      )}\r\n    </Styled.AvatarWrapper>\r\n  );\r\n\r\n  return (\r\n    <>\r\n      {dropdownOverlay ? (\r\n        <Popover>\r\n          <PopoverTrigger asChild>{content}</PopoverTrigger>\r\n          <PopoverContent {...dropdownAlign}>{dropdownOverlay}</PopoverContent>\r\n        </Popover>\r\n      ) : (\r\n        <>{content}</>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default Avatar;\r\n"],"names":["NoImageCircle","size","ariaLabel","children","jsx","Styled.NoImageCircleWrapper","Styled.NoImageCircle","AsAbbreviation","abbreviation","AsIcon","theme","useTheme","iconSize","avatarConsts","PersonSolid","AsImage","src","alt","Styled.Image","Avatar","className","Sizes","altDefaultText","label","secondaryLabel","dropdownOverlay","dropdownAlign","collapsed","rest","content","jsxs","Styled.AvatarWrapper","classNames","AVATAR_CLASS","Styled.Avatar","Styled.TextBox","Styled.Label","Styled.AdditionalText","Button","Variants","ChevronDown","Fragment","Popover","PopoverTrigger","PopoverContent","Avatar$1"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { ReactElement, useMemo, useState, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { useTheme } from 'styled-components';\nimport { Sizes, Variants, AVATAR_CLASS, AvatarConsts, AvatarTypes } from 'acinguiux-ds-react-base';\n\nimport PersonSolid from '../Icon/components/PersonSolid';\nimport * as Styled from './Avatar.styles';\nimport { ChevronDown } from '../Icon/components';\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover';\nimport * as Flags from '../Flag/components/index';\n\nconst NoImageCircle = ({ size, ariaLabel, label, secondaryLabel, children, textAndChevron, dropdownOverlay }: AvatarTypes.IAvatarNoImageCircle) => (\n  <Styled.NoImageCircleWrapper size={size} tabIndex={((!!label || !!secondaryLabel || !!dropdownOverlay) && !!textAndChevron) ? -1 : 0} >\n    <Styled.NoImageCircle aria-label={ariaLabel}>{children}</Styled.NoImageCircle>\n  </Styled.NoImageCircleWrapper>\n);\n\nconst AsAbbreviation = ({ abbreviation, size, ariaLabel, label, secondaryLabel, textAndChevron, dropdownOverlay }: AvatarTypes.IAvatarAsText) => (\n  <NoImageCircle size={size} ariaLabel={ariaLabel} label={label} secondaryLabel={secondaryLabel} textAndChevron={textAndChevron} dropdownOverlay={dropdownOverlay}>\n    {abbreviation}\n  </NoImageCircle>\n);\n\nconst AsIcon = ({ size, ariaLabel, label, secondaryLabel, textAndChevron, dropdownOverlay }: AvatarTypes.IAvatarAsIcon) => {\n  const theme = useTheme();\n  const iconSize = AvatarConsts.consts[size].icon;\n\n  return (\n    <NoImageCircle size={size} label={label} secondaryLabel={secondaryLabel} textAndChevron={textAndChevron} dropdownOverlay={dropdownOverlay}>\n      <PersonSolid\n        width={iconSize}\n        height={iconSize}\n        aria-label={ariaLabel || 'Default user avatar'}\n        fill={theme.onSentiment.default.strong.primary.default.text.default}\n      />\n    </NoImageCircle>\n  );\n};\n\nconst AsImage = ({ size, src, alt, label, secondaryLabel, textAndChevron, dropdownOverlay, abbreviation, ...rest }: AvatarTypes.IAvatarAsImage) => {\n  const [hasError, setHasError] = useState(false);\n  const [loadedSrc, setLoadedSrc] = useState<string | null>(null);\n\n  useEffect(() => {\n    setHasError(false);\n    setLoadedSrc(null);\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    if (abbreviation) {\n        return <AsAbbreviation abbreviation={abbreviation} size={size} label={label} secondaryLabel={secondaryLabel} textAndChevron={textAndChevron} dropdownOverlay={dropdownOverlay} ariaLabel={rest['aria-label']} />;\n    }\n    \n    return <AsIcon size={size} label={label} secondaryLabel={secondaryLabel} textAndChevron={textAndChevron} dropdownOverlay={dropdownOverlay} ariaLabel={rest['aria-label']} />;\n}\n\n  return (\n    <Styled.Image\n      key={src} \n      src={loadedSrc}\n      alt={alt}\n      tabIndex={((!!label || !!secondaryLabel || !!dropdownOverlay) && !!textAndChevron) ? -1 : 0}\n    />\n  );\n};\n\ntype FlagComponentKey = keyof typeof Flags;\ntype FlagName = Lowercase<FlagComponentKey> | Uppercase<FlagComponentKey>;\ntype FlagNameKeyRecord = { [key in FlagComponentKey as Lowercase<key>]: key } & { [key in FlagComponentKey as Uppercase<key>]: key }\n\nconst FLAG_NAMES_KEYS = Object.fromEntries(Object.keys(Flags).flatMap(key => ([[key.toLowerCase(), key], [key.toUpperCase(), key]]))) as FlagNameKeyRecord;\n\nconst flagNameToComponentKey = (flag: FlagName): FlagComponentKey => FLAG_NAMES_KEYS[flag];\n\nconst Avatar = ({\n  className,\n  size = Sizes.Medium,\n  src,\n  flag,\n  alt = AvatarConsts.altDefaultText,\n  abbreviation,\n  label,\n  secondaryLabel,\n  dropdownOverlay,\n  dropdownAlign,\n  collapsed = false,\n  extraLabel = true,\n  textAndChevron = true,\n  ...rest\n}: AvatarTypes.IAvatarProps<FlagName>): ReactElement => {\n  const FlagComponent = useMemo(() => flag !== undefined ? Flags[flagNameToComponentKey(flag)] : null, [flag]);\n\n  const content = (\n    <Styled.AvatarWrapper\n      className={classNames(AVATAR_CLASS, className)}\n      hasText={!!label || !!secondaryLabel}\n      dropdownOverlay={dropdownOverlay}\n      textAndChevron={textAndChevron}\n      size={size}\n      {...rest}\n    >\n      <Styled.Avatar size={size}>\n      {!src && (!flag || !FlagComponent) && abbreviation && <AsAbbreviation abbreviation={abbreviation} size={size} label={label} secondaryLabel={secondaryLabel} textAndChevron={textAndChevron} dropdownOverlay={dropdownOverlay} ariaLabel={rest['aria-label']} />}\n      {!!src && <AsImage size={size} src={src} alt={alt} label={label} secondaryLabel={secondaryLabel} textAndChevron={textAndChevron} dropdownOverlay={dropdownOverlay} abbreviation={abbreviation} />}\n      {!src && flag && FlagComponent && <Styled.FlagContainer size={size} tabIndex={((!!label || !!secondaryLabel || !!dropdownOverlay) && !!textAndChevron) ? -1 : 0} >\n      <div data-testid={`flag-${flag}`}><FlagComponent /></div>\n      </Styled.FlagContainer>}\n        {!src && !abbreviation && (!flag || !FlagComponent) && <AsIcon size={size} label={label} secondaryLabel={secondaryLabel} textAndChevron={textAndChevron} dropdownOverlay={dropdownOverlay} ariaLabel={rest['aria-label']} />}\n      </Styled.Avatar>\n      <Styled.TextAndChevronContainer>\n      {textAndChevron && (!!label || !!secondaryLabel) && (\n        <Styled.TextBox collapsed={collapsed}>\n          {!!label && (\n            <Styled.Label size={size} extraLabel={extraLabel} secondaryLabel={secondaryLabel}>\n              {label}\n            </Styled.Label>\n          )}\n          {!!secondaryLabel && !!extraLabel && <Styled.AdditionalText size={size}>{secondaryLabel}</Styled.AdditionalText>}\n        </Styled.TextBox>\n      )}\n      {textAndChevron && !collapsed && !!dropdownOverlay && (\n        <Styled.StyledButton\n          size={Sizes.Small}\n          variant={Variants.Transparent}\n          icon={<ChevronDown width={16} />}\n          iconOnly\n          aria-label=\"View profile and more\"\n      \n        />\n      )}\n      </Styled.TextAndChevronContainer>\n    </Styled.AvatarWrapper>\n );\n\n  return (\n    <>\n      {(dropdownOverlay && textAndChevron) ? (\n        <Popover>\n          <PopoverTrigger asChild>{content}</PopoverTrigger>\n          <PopoverContent {...dropdownAlign}>{dropdownOverlay}</PopoverContent>\n        </Popover>\n      ) : (\n        <>{content}</>\n      )}\n    </>\n  );\n};\n\nexport default Avatar;"],"names":["NoImageCircle","size","ariaLabel","label","secondaryLabel","children","textAndChevron","dropdownOverlay","jsx","Styled.NoImageCircleWrapper","Styled.NoImageCircle","AsAbbreviation","abbreviation","AsIcon","theme","useTheme","iconSize","AvatarConsts.consts","PersonSolid","AsImage","src","alt","rest","hasError","setHasError","useState","loadedSrc","setLoadedSrc","useEffect","img","Styled.Image","FLAG_NAMES_KEYS","Flags","key","flagNameToComponentKey","flag","Avatar","className","Sizes","AvatarConsts.altDefaultText","dropdownAlign","collapsed","extraLabel","FlagComponent","useMemo","content","jsxs","Styled.AvatarWrapper","classNames","AVATAR_CLASS","Styled.Avatar","Styled.FlagContainer","Styled.TextAndChevronContainer","Styled.TextBox","Styled.Label","Styled.AdditionalText","Styled.StyledButton","Variants","ChevronDown","Fragment","Popover","PopoverTrigger","PopoverContent"],"mappings":"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"}

package/build/esm/components/Avatar/Avatar.styles.d.ts

@@ -1,11 +1,22 @@
-import { IAvatarProps } from './Avatar.types';
-declare const AvatarWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const Avatar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Required<Pick<IAvatarProps, "size">>, never>;
-declare const NoImageCircleWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Required<Pick<IAvatarProps, "size">>, never>;
+/// <reference types="react" />
+import { AvatarTypes } from '..\..\react-base\src';
+import { FlagName, IAvatarProps } from './Avatar.types';
+declare const NoImageCircleWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Required<Pick<IAvatarProps<FlagName>, "size">>, never>;
+declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../..").IButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, {}, never>;
+declare const AvatarWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    tabIndex: number;
+} & AvatarTypes.IAvatarWrapperProps, "tabIndex">;
+declare const Avatar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Required<Pick<IAvatarProps<FlagName>, "size">>, never>;
 declare const NoImageCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const Image: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
-declare const TextBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<IAvatarProps, "collapsed">, never>;
-declare const Label: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, IAvatarProps, never>;
-declare const AdditionalText: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, Required<Pick<IAvatarProps, "size">>, never>;
-export { AvatarWrapper, Avatar, NoImageCircleWrapper, NoImageCircle, Image, TextBox, Label, AdditionalText };
+declare const Image: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {
+    tabIndex: number;
+}, "tabIndex">;
+declare const FlagContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    tabIndex: number;
+} & Required<Pick<IAvatarProps<FlagName>, "size">>, "tabIndex">;
+declare const TextBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<IAvatarProps<FlagName>, "collapsed">, never>;
+declare const Label: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, IAvatarProps<FlagName>, never>;
+declare const AdditionalText: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, Required<Pick<IAvatarProps<FlagName>, "size">>, never>;
+declare const TextAndChevronContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export { AvatarWrapper, Avatar, NoImageCircleWrapper, NoImageCircle, StyledButton, Image, FlagContainer, TextBox, Label, AdditionalText, TextAndChevronContainer };
 //# sourceMappingURL=Avatar.styles.d.ts.map

package/build/esm/components/Avatar/Avatar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,QAAA,MAAM,aAAa,yGAIlB,CAAC;AAEF,QAAA,MAAM,MAAM,2IAaX,CAAC;AAEF,QAAA,MAAM,oBAAoB,2IAgBzB,CAAC;AAEF,QAAA,MAAM,aAAa,yGAGlB,CAAC;AAEF,QAAA,MAAM,KAAK,yGAIV,CAAC;AAEF,QAAA,MAAM,OAAO,sIAWZ,CAAC;AAEF,QAAA,MAAM,KAAK,iHAuBV,CAAC;AAEF,QAAA,MAAM,cAAc,yIAanB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,oBAAoB,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"Avatar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAmC,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKpG,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAIxD,QAAA,MAAM,oBAAoB,qJAqCzB,CAAC;AAEA,QAAA,MAAM,YAAY,2OAQnB,CAAC;AAEF,QAAA,MAAM,aAAa;;gDAmDlB,CAAC;AAEF,QAAA,MAAM,MAAM,qJAaX,CAAC;AAEF,QAAA,MAAM,aAAa,yGAGlB,CAAC;AAEF,QAAA,MAAM,KAAK;;cAUV,CAAC;AAEF,QAAA,MAAM,aAAa;;+DAclB,CAAC;AAEF,QAAA,MAAM,OAAO,gJAWZ,CAAC;AAEF,QAAA,MAAM,KAAK,2HAqBV,CAAC;AAEF,QAAA,MAAM,cAAc,mJAYnB,CAAC;AAEF,QAAA,MAAM,uBAAuB,yGAM5B,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,oBAAoB,EAAE,aAAa,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,uBAAuB,EAAE,CAAC"}

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

@@ -1,47 +1,142 @@
-import r, { css as e } from "styled-components";
-import { avatarConsts as o } from "./Avatar.consts.js";
-import { Sizes as l } from "../../react-base/src/consts.js";
-const c = r.div`
-  display: flex;
+import n, { css as r } from "styled-components";
+import { States as c } from "acinguiux-ds-fabrics";
+import p from "../Button/Button.js";
+import { getFocusStyles as s } from "../../utils/styleUtils.js";
+import { getFabricStyles as g } from "../../react-base/src/components/Avatar/Avatar.utils.js";
+import { Sizes as o } from "../../react-base/src/consts.js";
+import { LayerColor as d } from "../../react-base/src/theme/theme.js";
+import { consts as i } from "../../react-base/src/components/Avatar/Avatar.consts.js";
+const f = n.div`
+  ${({ size: t, theme: e }) => {
+  const a = g(e), l = e.getLayer({ state: c.Hover }), u = e.getLayer({ state: c.Active });
+  return r`
+      ${t === o.XSmall && e.label.small.bold};
+      ${(t === o.Small || t === o.Medium || t === o.Large) && e.heading[5].bold};
+
+      display: flex;
+      flex: 1 0 0;
+      justify-content: center;
+      align-items: center;
+
+      border-radius: 100%;
+      text-align: center;
+      white-space: nowrap;
+      color: ${e.onSentiment.default.strong.primary.default.text.default};
+      background-color: ${e.onSentiment.default.strong.primary.default.background};
+      outline: none;
+
+      &:hover {
+        ${a.hover};
+        background-color: ${l[d.BackgroundSentiment]};
+      }
+
+      &:active {
+        ${a.active};
+        background-color: ${u[d.BackgroundSentiment]};
+      }
+
+      &:focus-visible {
+        ${s(e)};
+      }
+    `;
+}}
+`, w = n(p)`
+  &&:hover {
+    background-color: transparent;
+  }
+
+  &&:focus-visible {
+    outline: none;
+  }
+`, k = n.div.attrs((t) => ({ tabIndex: t.tabIndex }))`
+  display: inline-flex;
+  min-height: ${(t) => i[t.size].minHeight};
+  padding: ${(t) => i[t.size].padding};
   align-items: center;
-  gap: 12px;
-`, p = r.div(
-  ({ size: a }) => e`
+  justify-content: flex-start;
+  gap: ${(t) => t.hasText ? i[t.size].gap : "0"};
+  border-radius: var(--radius-small, 8px);
+  outline: none;
+
+  ${({ theme: t, dropdownOverlay: e }) => {
+  const a = g(t), l = t.getLayer({ state: c.Hover }), u = t.getLayer({ state: c.Active });
+  return !!e && r`
+      cursor: pointer;
+
+      &:hover {
+        ${a.hover};
+
+        ${f} {
+          ${a.hover};
+          background-color: ${l[d.BackgroundSentiment]};
+        }
+      }
+
+      &:active {
+        ${a.active};
+
+        ${f} {
+          ${a.active};
+          background-color: ${u[d.BackgroundSentiment]};
+        }
+      }
+
+      &:has(:focus-visible) {
+        ${s(t)};
+      }
+
+      ${f} {
+        &:focus-visible {
+          outline: none;
+        }
+      }
+
+      &:focus-visible {
+        ${s(t)};
+      }
+    `;
+}}
+`, I = n.div(
+  ({ size: t }) => r`
     display: flex;
     align-items: stretch;
     flex: 0;
-    ${a && e`
-      min-width: ${o[a].avatar}px;
-      min-height: ${o[a].avatar}px;
-      width: ${o[a].avatar}px;
-      height: ${o[a].avatar}px;
+    ${t && r`
+      min-width: ${i[t].avatar}px;
+      min-height: ${i[t].avatar}px;
+      width: ${i[t].avatar}px;
+      height: ${i[t].avatar}px;
     `}
   `
-), f = r.div`
-  ${({ size: a, theme: t }) => e`
-    ${(a === l.Small || a === l.Medium) && t.heading[5].bold}
-    ${a === l.Large && t.heading[3].demi}
-
-    display: flex;
-    flex: 1 0 0;
-    justify-content: center;
-    align-items: center;
-
-    border-radius: 100%;
-    text-align: center;
-    white-space: nowrap;
-    color: ${t.onSentiment.default.strong.primary.default.text.default};
-    background-color: ${t.onSentiment.default.strong.primary.default.background};
-  `}
-`, s = r.div`
+), L = n.div`
   display: flex;
   font-size: 100%;
-`, g = r.img`
+`, B = n.img.attrs((t) => ({ tabIndex: t.tabIndex }))`
+${({ theme: t }) => r`
   max-width: 100%;
   border-radius: 100%;
   object-fit: cover;
-`, x = r.div(
-  ({ collapsed: a }) => e`
+
+  &:focus-visible {
+      ${s(t)};
+    }
+`}
+`, j = n.div.attrs((t) => ({ tabIndex: t.tabIndex }))`
+${({ theme: t, size: e }) => r`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  font-size: ${i[e].avatar}px;
+
+  &:focus-visible {
+      ${s(t)};
+    }
+`}
+`, A = n.div(
+  ({ collapsed: t }) => r`
     display: flex;
     flex: 1 1 0;
     min-width: 0;
@@ -49,50 +144,56 @@ const c = r.div`
     align-items: flex-start;
     flex-direction: column;
     transition: opacity 0.2s linear;
-    opacity: ${a ? "0" : "1"};
+    opacity: ${t ? "0" : "1"};
   `
-), u = r.p`
-  ${({ theme: a, size: t, secondaryLabel: i }) => e`
+), C = n.p`
+  ${({ theme: t, size: e, secondaryLabel: a, extraLabel: l }) => r`
     margin: 0;
-
-    ${i && i.length > 0 && e`
-      ${t === l.Large && a.label.medium.bold}
-      ${(t === l.Small || t === l.Medium) && a.label.small.bold}
-    `}
-
-    ${(!i || i && i.length === 0) && e`
-      ${(t === l.Large || t === l.Medium) && a.label.medium.bold}
-      ${t === l.Small && a.label.small.bold}
-    `}
-    
-    color: ${a.onSurface.surface.default.text.strong};
+    color: ${t.onSurface.surface.default.text.strong};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100%;
+
+    ${l && a && a.length > 0 && r`
+      ${t.label.small.bold}
+    `}
+    
+    ${(!l || !a || a.length === 0) && r`
+      ${(e === o.XSmall || e === o.Small || e === o.Medium) && t.label.small.bold}
+      ${e === o.Large && t.label.medium.bold}
+    `}
   `}
-`, $ = r.p`
-  ${({ size: a, theme: t }) => e`
-    margin: ${a === l.Large ? "4px" : "0"} 0 0;
+`, T = n.p`
+  ${({ size: t, theme: e }) => r`
+    margin: ${t === o.XSmall ? "-2px 0 0 0" : "0"};
 
-    ${a === l.Large && t.label.medium.normal}
-    ${(a === l.Small || a === l.Medium) && t.label.small.normal}
+    ${(t === o.XSmall || t === o.Small || t === o.Medium || t === o.Large) && e.label.small.normal}
 
-    color: ${t.onSurface.surface.default.text.subtle};
+    color: ${e.onSurface.surface.default.text.subtle};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100%;
   `}
+`, X = n.div`
+  display: flex;
+  align-items: center;
+  justify-content: justify-between;
+  flex-grow: 1;
+  gap: 4px;
 `;
 export {
-  $ as AdditionalText,
-  p as Avatar,
-  c as AvatarWrapper,
-  g as Image,
-  u as Label,
-  s as NoImageCircle,
+  T as AdditionalText,
+  I as Avatar,
+  k as AvatarWrapper,
+  j as FlagContainer,
+  B as Image,
+  C as Label,
+  L as NoImageCircle,
   f as NoImageCircleWrapper,
-  x as TextBox
+  w as StyledButton,
+  X as TextAndChevronContainer,
+  A as TextBox
 };
 //# sourceMappingURL=Avatar.styles.js.map