acinguiux-ds-react-framework 0.1.18 → 0.1.20

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

@@ -1,193 +1,199 @@
-import { css as t, styled as c } from "styled-components";
-import { FabricsVariables as l } from "acinguiux-ds-fabrics";
-import { ICON_CLASS as s, LIST_ITEM_CHECKED_ICON_CLASS as $ } from "../../react-base/src/consts/classes.js";
-import { Variables as r } from "../../react-base/src/theme/types/layer.js";
-import { consts as o } from "../../react-base/src/components/ListItem/ListItem.consts.js";
-import { getGridTemplateStyles as x } from "../../react-base/src/components/ListItem/ListItem.utils.js";
-import { textStyles as k } from "../../react-base/src/components/ListItem/ListItem.styles.js";
-import { getFocusStyles as v } from "../../react-base/src/utils/stylesUtils.js";
-import h from "../Icon/components/Check.js";
-import B from "../Text/components/Label/Label.js";
-import L from "../Text/components/Text/Text.js";
-const S = c(h)`
-  grid-area: checkmark;
-`, C = c.div`
-  ${({ $size: e }) => t`
+import { styled as n, css as r } from "styled-components";
+import { FabricsVariables as c } from "acinguiux-ds-fabrics";
+import { Sizes as v } from "../../react-base/src/consts/index.js";
+import { Variables as o } from "../../react-base/src/theme/types/layer.js";
+import { getFocusStyles as h } from "../../react-base/src/utils/stylesUtils.js";
+import { consts as a } from "../../react-base/src/components/ListItem/ListItem.consts.js";
+import "../../react-base/src/components/ListItem/ListItemHeader.consts.js";
+import w from "../Icon/components/Check.js";
+import m from "../Text/components/Label/Label.js";
+import { getGridTemplateStyles as B } from "./ListItem.utils.js";
+import { ICON_CLASS as F } from "../../react-base/src/consts/classes.js";
+const d = n(w)`
+  transition: opacity 200ms;
+`, b = n.div`
+  background-color: currentColor;
+  width: 7px;
+  height: 7px;
+  border-radius: 100%;
+  transition: opacity 200ms;
+`, L = n.div`
+  pointer-events: none;
+  grid-area: selection;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`, P = n.div(
+  ({ $size: e }) => r`
+    grid-area: icon;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 100%;
-    font-size: ${o[e].iconSize}px;
-    grid-area: flag-icon;
-  `}
-`, N = c(B)`
+    font-size: ${a[e].iconSize}px;
+  `
+), C = n(m)`
   grid-area: label;
-
-  ${k}
-`, O = c(L)`
-  grid-area: meta;
-
-  ${({ $metaTextPosition: e }) => e === "right" && "text-align: right;"}
-  ${k}
-`, V = c.li`
+  cursor: default;
+`, z = n(m)(
+  ({ $metaTextPosition: e }) => r`
+    grid-area: meta;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: default;
+
+    ${e === "right" && r`
+      text-align: right;
+    `};
+  `
+), _ = n.li`
   ${({
   theme: e,
-  $metaTextPosition: a,
-  $size: i,
-  $ariaInteractiveOnly: d,
-  $variant: g,
-  $selected: u,
-  $withMetaText: f,
-  $disabled: n,
-  $iconOrFlagProvided: y
+  $metaTextPosition: $,
+  $size: t,
+  $ariaInteractiveOnly: l,
+  $variant: k,
+  $selected: y,
+  $withMetaText: S,
+  $disabled: i,
+  $iconOrFlagProvided: f,
+  $showInputControls: s,
+  $multiline: x
 }) => {
-  const p = e.layer({
-    state: "hover"
-  }), b = e.layer({
-    state: "press"
-  }), m = e.layer({
-    disabled: !0
-  });
-  return t`
+  const u = e.layer({ state: "hover" }), g = e.layer({ state: "press" }), p = e.layer({ disabled: !0 });
+  return r`
       display: grid;
-      align-items: center;
-      width: auto;
-      max-width: 100%;
-      column-gap: 6px;
+      align-items: start;
+      width: 100%;
+      column-gap: ${a[t].gap}px;
       border-radius: 4px;
-      padding: ${o[i].padding.vertical}px ${o[i].padding.horizontal}px;
+      padding: ${a[t].padding.vertical}px ${a[t].padding.horizontal}px;
       box-sizing: border-box;
-      cursor: pointer;
+      transition: background-color 0.3s ease-out;
+
+      ${B({
+    $metaTextPosition: $,
+    $variant: k,
+    $withMetaText: S,
+    $iconOrFlagProvided: f,
+    $showInputControls: s,
+    iconSize: a[t].iconSize
+  })}
 
-      .${s}:not(.${$}) {
-        grid-area: flag-icon;
+      .${F}, ${d} {
+        grid-area: icon;
+        display: block;
+        width: ${a[t].iconSize}px;
+        height: ${a[t].iconSize}px;
       }
 
-      ${S}, .${s} {
-        width: ${o[i].iconSize}px;
-        height: ${o[i].iconSize}px;
+      ${L} {
+        width: ${a[t].iconSize}px;
+        height: ${a[t].iconSize}px;
       }
 
-      ${x({
-    $metaTextPosition: a,
-    $variant: g,
-    $selected: u,
-    $withMetaText: f,
-    $iconOrFlagProvided: y,
-    $size: i
-  })}
+      ${z} {
+        margin: ${t === v.Medium ? "0" : "2px 0"};
+      }
 
-      ${n && t`
+      ${d},
+      ${b} {
+        opacity: 0;
+      }
+
+      ${!x && r`
         ${C} {
-          svg {
-            opacity: 0.3;
-          }
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      `}
+
+      ${i && r`
+        ${P} svg {
+          opacity: 0.3;
         }
-        background-color: ${m[r.BackgroundFoundation]};
-        color: ${m[r.TextOnFoundationStrong]};
+        background-color: ${p[o.BackgroundFoundation]};
+        color: ${p[o.TextOnFoundationStrong]};
         cursor: not-allowed;
       `}
 
-      ${!n && t`
+      ${!i && r`
         &[aria-selected='true'] {
-          background-color: ${p[r.BackgroundFoundation]};
+          background-color: ${u[o.BackgroundFoundation]};
         }
 
         &[aria-selected='true']:active {
-          background-color: ${b[r.BackgroundFoundation]};
+          background-color: ${g[o.BackgroundFoundation]};
         }
-        ${!d && t`
+        ${!l && r`
           &:hover {
-            background-color: ${p[r.BackgroundFoundation]};
+            background-color: ${u[o.BackgroundFoundation]};
           }
 
           &:active {
-            background-color: ${b[r.BackgroundFoundation]};
+            background-color: ${g[o.BackgroundFoundation]};
           }
         `}
       `}
 
-      ${u && t`
-        background: ${e.layer({ disabled: n, selectedProminence: "subtle" })[r.BackgroundSelected]};
+      ${y && r`
+        background-color: ${s ? "transparent" : e.layer({ disabled: i, selectedProminence: "subtle" })[o.BackgroundSelected]};
+
+        ${d},
+        ${b} {
+          opacity: 1;
+        }
 
         &[aria-selected='true'] {
-          background: ${e.layer({
-    disabled: n,
+          background-color: ${e.layer({
+    disabled: i,
     selectedProminence: "subtle",
-    state: l.States.Hover
-  })[r.BackgroundSelected]};
+    state: c.States.Hover
+  })[o.BackgroundSelected]};
         }
 
         &[aria-selected='true']:active {
-          background: ${e.layer({
-    disabled: n,
+          background-color: ${e.layer({
+    disabled: i,
     selectedProminence: "subtle",
-    state: l.States.Press
-  })[r.BackgroundSelected]};
+    state: c.States.Press
+  })[o.BackgroundSelected]};
         }
 
-        ${!d && t`
+        ${!l && r`
           &:hover {
-            background: ${e.layer({
-    disabled: n,
+            background-color: ${e.layer({
+    disabled: i,
     selectedProminence: "subtle",
-    state: l.States.Hover
-  })[r.BackgroundSelected]};
+    state: c.States.Hover
+  })[o.BackgroundSelected]};
           }
 
           &:active {
-            background: ${e.layer({
-    disabled: n,
+            background-color: ${e.layer({
+    disabled: i,
     selectedProminence: "subtle",
-    state: l.States.Press
-  })[r.BackgroundSelected]};
+    state: c.States.Press
+  })[o.BackgroundSelected]};
           }
         `}
       `}
       
       &:focus-visible {
-        ${v(e)};
+        ${h(e)};
       }
     `;
 }};
-`, W = c.li`
-  ${({ $metaTextPosition: e, $size: a, $variant: i, $withMetaText: d, $iconOrFlagProvided: g }) => t`
-      display: grid;
-      align-items: center;
-      width: 100%;
-      max-width: 100%;
-      column-gap: 6px;
-      border-radius: 4px;
-      padding: ${o[a].padding.vertical}px ${o[a].padding.horizontal}px;
-      box-sizing: border-box;
-      cursor: pointer;
-
-      .${s}:not(.${$}) {
-        grid-area: flag-icon;
-      }
-
-      ${S}, .${s} {
-        width: ${o[a].iconSize}px;
-        height: ${o[a].iconSize}px;
-      }
-
-      ${x({
-  $metaTextPosition: e,
-  $variant: i,
-  $selected: !1,
-  // ListItemHeaderWrapper does not support selected state
-  $withMetaText: d,
-  $iconOrFlagProvided: g,
-  $size: a
-})}
-    `};
 `;
 export {
-  S as CheckIcon,
-  C as FlagContainer,
-  N as Label,
-  W as ListItemHeaderWrapper,
-  V as ListItemWrapper,
-  O as MetaText
+  d as Check,
+  P as FlagContainer,
+  C as Label,
+  _ as ListItemWrapper,
+  z as MetaText,
+  b as Radio,
+  L as SelectionContainer
 };
 //# sourceMappingURL=ListItem.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","sources":["../../../../src/components/ListItem/ListItem.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { ICON_CLASS, LIST_ITEM_CHECKED_ICON_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { ListItemConsts, ListItemUtils, ListItemStyles } from 'acinguiux-ds-react-base/components/ListItem';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\n\nimport BaseCheck from '../Icon/components/Check';\nimport BaseLabel from '../Text/components/Label/Label';\nimport Text from '../Text/components/Text/Text';\nimport type { ListItemWrapperProps, PropsWithRequiredSize } from './ListItem.types';\n\nconst CheckIcon = styled(BaseCheck)`\n  grid-area: checkmark;\n`;\n\nconst FlagContainer = styled.div<PropsWithRequiredSize>`\n  ${({ $size }) => css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 100%;\n    font-size: ${ListItemConsts.consts[$size].iconSize}px;\n    grid-area: flag-icon;\n  `}\n`;\n\nconst Label = styled(BaseLabel)`\n  grid-area: label;\n\n  ${ListItemStyles.textStyles}\n`;\n\nconst MetaText = styled(Text)<Pick<ListItemWrapperProps, '$metaTextPosition'>>`\n  grid-area: meta;\n\n  ${({ $metaTextPosition }) => $metaTextPosition === 'right' && 'text-align: right;'}\n  ${ListItemStyles.textStyles}\n`;\n\nconst ListItemWrapper = styled.li<ListItemWrapperProps>`\n  ${({\n    theme,\n    $metaTextPosition,\n    $size,\n    $ariaInteractiveOnly,\n    $variant,\n    $selected,\n    $withMetaText,\n    $disabled,\n    $iconOrFlagProvided,\n  }) => {\n    const hoverLayer = theme.layer({\n      state: 'hover',\n    });\n\n    const activeLayer = theme.layer({\n      state: 'press',\n    });\n\n    const disabledLayer = theme.layer({\n      disabled: true,\n    });\n\n    return css`\n      display: grid;\n      align-items: center;\n      width: auto;\n      max-width: 100%;\n      column-gap: 6px;\n      border-radius: 4px;\n      padding: ${ListItemConsts.consts[$size].padding.vertical}px ${ListItemConsts.consts[$size].padding.horizontal}px;\n      box-sizing: border-box;\n      cursor: pointer;\n\n      .${ICON_CLASS}:not(.${LIST_ITEM_CHECKED_ICON_CLASS}) {\n        grid-area: flag-icon;\n      }\n\n      ${CheckIcon}, .${ICON_CLASS} {\n        width: ${ListItemConsts.consts[$size].iconSize}px;\n        height: ${ListItemConsts.consts[$size].iconSize}px;\n      }\n\n      ${ListItemUtils.getGridTemplateStyles({\n        $metaTextPosition,\n        $variant,\n        $selected,\n        $withMetaText,\n        $iconOrFlagProvided,\n        $size,\n      })}\n\n      ${$disabled &&\n      css`\n        ${FlagContainer} {\n          svg {\n            opacity: 0.3;\n          }\n        }\n        background-color: ${disabledLayer[Variables.BackgroundFoundation]};\n        color: ${disabledLayer[Variables.TextOnFoundationStrong]};\n        cursor: not-allowed;\n      `}\n\n      ${!$disabled &&\n      css`\n        &[aria-selected='true'] {\n          background-color: ${hoverLayer[Variables.BackgroundFoundation]};\n        }\n\n        &[aria-selected='true']:active {\n          background-color: ${activeLayer[Variables.BackgroundFoundation]};\n        }\n        ${!$ariaInteractiveOnly &&\n        css`\n          &:hover {\n            background-color: ${hoverLayer[Variables.BackgroundFoundation]};\n          }\n\n          &:active {\n            background-color: ${activeLayer[Variables.BackgroundFoundation]};\n          }\n        `}\n      `}\n\n      ${$selected &&\n      css`\n        background: ${theme.layer({ disabled: $disabled, selectedProminence: 'subtle' })[Variables.BackgroundSelected]};\n\n        &[aria-selected='true'] {\n          background: ${theme.layer({\n            disabled: $disabled,\n            selectedProminence: 'subtle',\n            state: FabricsVariables.States.Hover,\n          })[Variables.BackgroundSelected]};\n        }\n\n        &[aria-selected='true']:active {\n          background: ${theme.layer({\n            disabled: $disabled,\n            selectedProminence: 'subtle',\n            state: FabricsVariables.States.Press,\n          })[Variables.BackgroundSelected]};\n        }\n\n        ${!$ariaInteractiveOnly &&\n        css`\n          &:hover {\n            background: ${theme.layer({\n              disabled: $disabled,\n              selectedProminence: 'subtle',\n              state: FabricsVariables.States.Hover,\n            })[Variables.BackgroundSelected]};\n          }\n\n          &:active {\n            background: ${theme.layer({\n              disabled: $disabled,\n              selectedProminence: 'subtle',\n              state: FabricsVariables.States.Press,\n            })[Variables.BackgroundSelected]};\n          }\n        `}\n      `}\n      \n      &:focus-visible {\n        ${getFocusStyles(theme)};\n      }\n    `;\n  }};\n`;\n\nconst ListItemHeaderWrapper = styled.li<Omit<ListItemWrapperProps, '$selected' | '$ariaInteractiveOnly' | '$disabled'>>`\n  ${({ $metaTextPosition, $size, $variant, $withMetaText, $iconOrFlagProvided }) => {\n    return css`\n      display: grid;\n      align-items: center;\n      width: 100%;\n      max-width: 100%;\n      column-gap: 6px;\n      border-radius: 4px;\n      padding: ${ListItemConsts.consts[$size].padding.vertical}px ${ListItemConsts.consts[$size].padding.horizontal}px;\n      box-sizing: border-box;\n      cursor: pointer;\n\n      .${ICON_CLASS}:not(.${LIST_ITEM_CHECKED_ICON_CLASS}) {\n        grid-area: flag-icon;\n      }\n\n      ${CheckIcon}, .${ICON_CLASS} {\n        width: ${ListItemConsts.consts[$size].iconSize}px;\n        height: ${ListItemConsts.consts[$size].iconSize}px;\n      }\n\n      ${ListItemUtils.getGridTemplateStyles({\n        $metaTextPosition,\n        $variant,\n        $selected: false, // ListItemHeaderWrapper does not support selected state\n        $withMetaText,\n        $iconOrFlagProvided,\n        $size,\n      })}\n    `;\n  }};\n`;\n\nexport { ListItemHeaderWrapper, ListItemWrapper, FlagContainer, Label, MetaText, CheckIcon };\n"],"names":["CheckIcon","styled","BaseCheck","FlagContainer","$size","css","ListItemConsts.consts","Label","BaseLabel","ListItemStyles.textStyles","MetaText","Text","$metaTextPosition","ListItemWrapper","theme","$ariaInteractiveOnly","$variant","$selected","$withMetaText","$disabled","$iconOrFlagProvided","hoverLayer","activeLayer","disabledLayer","ICON_CLASS","LIST_ITEM_CHECKED_ICON_CLASS","ListItemUtils.getGridTemplateStyles","Variables","FabricsVariables","getFocusStyles","ListItemHeaderWrapper"],"mappings":"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"}
+{"version":3,"file":"ListItem.styles.js","sources":["../../../../src/components/ListItem/ListItem.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { ICON_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { ListItemConsts } from 'acinguiux-ds-react-base/components/ListItem';\n\nimport BaseCheck from '../Icon/components/Check';\nimport BaseLabel from '../Text/components/Label/Label';\nimport type { ListItemWrapperProps, PropsWithRequiredSize } from './ListItem.types';\nimport { getGridTemplateStyles } from './ListItem.utils';\n\nconst Check = styled(BaseCheck)`\n  transition: opacity 200ms;\n`;\n\nconst Radio = styled.div`\n  background-color: currentColor;\n  width: 7px;\n  height: 7px;\n  border-radius: 100%;\n  transition: opacity 200ms;\n`;\n\nconst SelectionContainer = styled.div`\n  pointer-events: none;\n  grid-area: selection;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst FlagContainer = styled.div<PropsWithRequiredSize>(\n  ({ $size }) => css`\n    grid-area: icon;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 100%;\n    font-size: ${ListItemConsts.consts[$size].iconSize}px;\n  `,\n);\n\nconst Label = styled(BaseLabel)`\n  grid-area: label;\n  cursor: default;\n`;\n\nconst MetaText = styled(BaseLabel)<Pick<ListItemWrapperProps, '$metaTextPosition'>>(\n  ({ $metaTextPosition }) => css`\n    grid-area: meta;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    cursor: default;\n\n    ${$metaTextPosition === 'right' &&\n    css`\n      text-align: right;\n    `};\n  `,\n);\n\nconst ListItemWrapper = styled.li<ListItemWrapperProps>`\n  ${({\n    theme,\n    $metaTextPosition,\n    $size,\n    $ariaInteractiveOnly,\n    $variant,\n    $selected,\n    $withMetaText,\n    $disabled,\n    $iconOrFlagProvided,\n    $showInputControls,\n    $multiline,\n  }) => {\n    const hoverLayer = theme.layer({ state: 'hover' });\n    const activeLayer = theme.layer({ state: 'press' });\n    const disabledLayer = theme.layer({ disabled: true });\n\n    return css`\n      display: grid;\n      align-items: start;\n      width: 100%;\n      column-gap: ${ListItemConsts.consts[$size].gap}px;\n      border-radius: 4px;\n      padding: ${ListItemConsts.consts[$size].padding.vertical}px ${ListItemConsts.consts[$size].padding.horizontal}px;\n      box-sizing: border-box;\n      transition: background-color 0.3s ease-out;\n\n      ${getGridTemplateStyles({\n        $metaTextPosition,\n        $variant,\n        $selected,\n        $withMetaText,\n        $iconOrFlagProvided,\n        $showInputControls,\n        iconSize: ListItemConsts.consts[$size].iconSize,\n      })}\n\n      .${ICON_CLASS}, ${Check} {\n        grid-area: icon;\n        display: block;\n        width: ${ListItemConsts.consts[$size].iconSize}px;\n        height: ${ListItemConsts.consts[$size].iconSize}px;\n      }\n\n      ${SelectionContainer} {\n        width: ${ListItemConsts.consts[$size].iconSize}px;\n        height: ${ListItemConsts.consts[$size].iconSize}px;\n      }\n\n      ${MetaText} {\n        margin: ${$size === Sizes.Medium ? '0' : '2px 0'};\n      }\n\n      ${Check},\n      ${Radio} {\n        opacity: 0;\n      }\n\n      ${!$multiline &&\n      css`\n        ${Label} {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      `}\n\n      ${$disabled &&\n      css`\n        ${FlagContainer} svg {\n          opacity: 0.3;\n        }\n        background-color: ${disabledLayer[Variables.BackgroundFoundation]};\n        color: ${disabledLayer[Variables.TextOnFoundationStrong]};\n        cursor: not-allowed;\n      `}\n\n      ${!$disabled &&\n      css`\n        &[aria-selected='true'] {\n          background-color: ${hoverLayer[Variables.BackgroundFoundation]};\n        }\n\n        &[aria-selected='true']:active {\n          background-color: ${activeLayer[Variables.BackgroundFoundation]};\n        }\n        ${!$ariaInteractiveOnly &&\n        css`\n          &:hover {\n            background-color: ${hoverLayer[Variables.BackgroundFoundation]};\n          }\n\n          &:active {\n            background-color: ${activeLayer[Variables.BackgroundFoundation]};\n          }\n        `}\n      `}\n\n      ${$selected &&\n      css`\n        background-color: ${$showInputControls\n          ? 'transparent'\n          : theme.layer({ disabled: $disabled, selectedProminence: 'subtle' })[Variables.BackgroundSelected]};\n\n        ${Check},\n        ${Radio} {\n          opacity: 1;\n        }\n\n        &[aria-selected='true'] {\n          background-color: ${theme.layer({\n            disabled: $disabled,\n            selectedProminence: 'subtle',\n            state: FabricsVariables.States.Hover,\n          })[Variables.BackgroundSelected]};\n        }\n\n        &[aria-selected='true']:active {\n          background-color: ${theme.layer({\n            disabled: $disabled,\n            selectedProminence: 'subtle',\n            state: FabricsVariables.States.Press,\n          })[Variables.BackgroundSelected]};\n        }\n\n        ${!$ariaInteractiveOnly &&\n        css`\n          &:hover {\n            background-color: ${theme.layer({\n              disabled: $disabled,\n              selectedProminence: 'subtle',\n              state: FabricsVariables.States.Hover,\n            })[Variables.BackgroundSelected]};\n          }\n\n          &:active {\n            background-color: ${theme.layer({\n              disabled: $disabled,\n              selectedProminence: 'subtle',\n              state: FabricsVariables.States.Press,\n            })[Variables.BackgroundSelected]};\n          }\n        `}\n      `}\n      \n      &:focus-visible {\n        ${getFocusStyles(theme)};\n      }\n    `;\n  }};\n`;\n\nexport { ListItemWrapper, FlagContainer, Label, MetaText, Check, Radio, SelectionContainer };\n"],"names":["Check","styled","BaseCheck","Radio","SelectionContainer","FlagContainer","$size","css","ListItemConsts.consts","Label","BaseLabel","MetaText","$metaTextPosition","ListItemWrapper","theme","$ariaInteractiveOnly","$variant","$selected","$withMetaText","$disabled","$iconOrFlagProvided","$showInputControls","$multiline","hoverLayer","activeLayer","disabledLayer","getGridTemplateStyles","ICON_CLASS","Sizes","Variables","FabricsVariables","getFocusStyles"],"mappings":"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"}

package/build/esm/components/ListItem/ListItem.types.d.ts

@@ -1,14 +1,24 @@
-import type { ComponentPropsWithoutRef } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import type { ListItemTypes } from '../../react-base/src/components/ListItem';
 import type { PickTransient } from '../../react-base/src/types';
 import { FlagName } from '../Flag/Flag.types';
 export type IListItemProps = ComponentPropsWithoutRef<'li'> & ListItemTypes.IProps<FlagName>;
 export type PropsWithRequiredSize = Required<PickTransient<IListItemProps, 'size'>>;
-type RequiredListWrapperProps = 'metaTextPosition' | 'selected' | 'variant' | 'disabled' | 'size';
+type RequiredListWrapperProps = 'selected' | 'variant' | 'size' | 'showInputControls' | 'multiline' | 'metaTextPosition' | 'disabled';
 export interface ListItemWrapperProps extends Required<PickTransient<IListItemProps, RequiredListWrapperProps>> {
-    $withMetaText: boolean;
     $iconOrFlagProvided: boolean;
+    $withMetaText?: boolean;
     $ariaInteractiveOnly?: boolean;
 }
+type OmittedListItemHeaderPropKeys = 'label' | 'disabled' | 'multiline' | 'showInputControls' | 'metaText' | 'metaTextPosition';
+export interface IListItemHeaderProps extends Omit<IListItemProps, OmittedListItemHeaderPropKeys> {
+    label?: ReactNode;
+    divider?: boolean;
+}
+type RequiredListHeaderWrapperProps = 'variant' | 'size' | 'divider';
+export interface ListItemHeaderWrapperProps extends Required<PickTransient<IListItemHeaderProps, RequiredListHeaderWrapperProps>> {
+    $iconOrFlagProvided: boolean;
+    $withMetaText?: boolean;
+}
 export {};
 //# sourceMappingURL=ListItem.types.d.ts.map

package/build/esm/components/ListItem/ListItem.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,MAAM,cAAc,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAE7F,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;AAEpF,KAAK,wBAAwB,GAAG,kBAAkB,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAClG,MAAM,WAAW,oBAAqB,SAAQ,QAAQ,CAAC,aAAa,CAAC,cAAc,EAAE,wBAAwB,CAAC,CAAC;IAC7G,aAAa,EAAE,OAAO,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC"}
+{"version":3,"file":"ListItem.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,MAAM,cAAc,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAE7F,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;AAEpF,KAAK,wBAAwB,GACzB,UAAU,GACV,SAAS,GACT,MAAM,GACN,mBAAmB,GACnB,WAAW,GACX,kBAAkB,GAClB,UAAU,CAAC;AAEf,MAAM,WAAW,oBAAqB,SAAQ,QAAQ,CAAC,aAAa,CAAC,cAAc,EAAE,wBAAwB,CAAC,CAAC;IAC7G,mBAAmB,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,KAAK,6BAA6B,GAC9B,OAAO,GACP,UAAU,GACV,WAAW,GACX,mBAAmB,GACnB,UAAU,GACV,kBAAkB,CAAC;AACvB,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,cAAc,EAAE,6BAA6B,CAAC;IAC/F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,KAAK,8BAA8B,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AACrE,MAAM,WAAW,0BACf,SAAQ,QAAQ,CAAC,aAAa,CAAC,oBAAoB,EAAE,8BAA8B,CAAC,CAAC;IACrF,mBAAmB,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/build/esm/components/ListItem/ListItem.utils.d.ts

@@ -0,0 +1,7 @@
+import { ListItemWrapperProps } from './ListItem.types';
+type ListItemGridTemplateKeys = '$metaTextPosition' | '$selected' | '$variant' | '$withMetaText' | '$iconOrFlagProvided' | '$showInputControls';
+export declare const getGridTemplateStyles: ({ $withMetaText, $metaTextPosition, $variant, $iconOrFlagProvided, $showInputControls, iconSize, }: Partial<Pick<ListItemWrapperProps, ListItemGridTemplateKeys>> & {
+    iconSize: number;
+}) => import("styled-components").RuleSet<object>;
+export {};
+//# sourceMappingURL=ListItem.utils.d.ts.map

package/build/esm/components/ListItem/ListItem.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/ListItem/ListItem.utils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAMxD,KAAK,wBAAwB,GACzB,mBAAmB,GACnB,WAAW,GACX,UAAU,GACV,eAAe,GACf,qBAAqB,GACrB,oBAAoB,CAAC;AAEzB,eAAO,MAAM,qBAAqB,uGAO/B,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,wBAAwB,CAAC,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,gDAgFtF,CAAC"}

package/build/esm/components/ListItem/ListItem.utils.js

@@ -0,0 +1,71 @@
+import { css as n } from "styled-components";
+import { Positions as m } from "../../react-base/src/consts/index.js";
+const e = (...d) => d.filter((i) => !!i).join(" "), T = ({
+  $withMetaText: d,
+  $metaTextPosition: i,
+  $variant: y,
+  $iconOrFlagProvided: b,
+  $showInputControls: f = !1,
+  iconSize: A
+}) => {
+  const g = y !== "default" && !!b, t = "label", a = "1fr", c = "meta", h = "fit-content(25%)", p = ".", r = "selection", s = `${A}px`, u = g && ".", l = g && "icon", o = g && `${A}px`, $ = f ? n`
+        grid-template-areas: '${e(r, l, t)}';
+        grid-template-columns: ${e(s, o, a)};
+      ` : n`
+        grid-template-areas: '${e(l, t, r)}';
+        grid-template-columns: ${e(o, a, s)};
+      `;
+  if (!d)
+    return $;
+  if (f)
+    switch (i) {
+      case m.Top:
+        return n`
+          grid-template-areas:
+            '${e(p, u, c)}'
+            '${e(r, l, t)}';
+          grid-template-columns: ${e(s, o, a)};
+        `;
+      case m.Bottom:
+        return n`
+          grid-template-areas:
+            '${e(r, l, t)}'
+            '${e(p, u, c)}';
+          grid-template-columns: ${e(s, o, a)};
+        `;
+      case m.Right:
+        return n`
+          grid-template-areas: '${e(r, l, t, c)}';
+          grid-template-columns: ${e(s, o, a, h)};
+        `;
+      default:
+        return $;
+    }
+  switch (i) {
+    case m.Top:
+      return n`
+        grid-template-areas:
+          '${e(u, c, p)}'
+          '${e(l, t, r)}';
+        grid-template-columns: ${e(o, a, s)};
+      `;
+    case m.Bottom:
+      return n`
+        grid-template-areas:
+          '${e(l, t, r)}'
+          '${e(u, c, p)}';
+        grid-template-columns: ${e(o, a, s)};
+      `;
+    case m.Right:
+      return n`
+        grid-template-areas: '${e(l, t, c, r)}';
+        grid-template-columns: ${e(o, a, h, s)};
+      `;
+    default:
+      return $;
+  }
+};
+export {
+  T as getGridTemplateStyles
+};
+//# sourceMappingURL=ListItem.utils.js.map

package/build/esm/components/ListItem/ListItem.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.utils.js","sources":["../../../../src/components/ListItem/ListItem.utils.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { Positions } from 'acinguiux-ds-react-base/consts';\n\nimport { ListItemWrapperProps } from './ListItem.types';\n\nconst getTemplate = (...arr: (string | boolean)[]) => {\n  return arr.filter((str) => !!str).join(' ');\n};\n\ntype ListItemGridTemplateKeys =\n  | '$metaTextPosition'\n  | '$selected'\n  | '$variant'\n  | '$withMetaText'\n  | '$iconOrFlagProvided'\n  | '$showInputControls';\n\nexport const getGridTemplateStyles = ({\n  $withMetaText,\n  $metaTextPosition,\n  $variant,\n  $iconOrFlagProvided,\n  $showInputControls = false,\n  iconSize,\n}: Partial<Pick<ListItemWrapperProps, ListItemGridTemplateKeys>> & { iconSize: number }) => {\n  const showIconArea = $variant !== 'default' && Boolean($iconOrFlagProvided);\n\n  const labelArea = 'label';\n  const labelColumns = '1fr';\n\n  const metaArea = 'meta';\n  const metaColumns = 'fit-content(25%)';\n\n  const selectionAreaEmpty = '.';\n  const selectionArea = 'selection';\n  const selectionColumns = `${iconSize}px`;\n\n  const iconAreaEmpty = showIconArea && '.';\n  const iconArea = showIconArea && 'icon';\n  const iconColumns = showIconArea && `${iconSize}px`;\n\n  const defaultStyle = $showInputControls\n    ? css`\n        grid-template-areas: '${getTemplate(selectionArea, iconArea, labelArea)}';\n        grid-template-columns: ${getTemplate(selectionColumns, iconColumns, labelColumns)};\n      `\n    : css`\n        grid-template-areas: '${getTemplate(iconArea, labelArea, selectionArea)}';\n        grid-template-columns: ${getTemplate(iconColumns, labelColumns, selectionColumns)};\n      `;\n\n  if (!$withMetaText) {\n    return defaultStyle;\n  }\n\n  if ($showInputControls) {\n    switch ($metaTextPosition) {\n      case Positions.Top:\n        return css`\n          grid-template-areas:\n            '${getTemplate(selectionAreaEmpty, iconAreaEmpty, metaArea)}'\n            '${getTemplate(selectionArea, iconArea, labelArea)}';\n          grid-template-columns: ${getTemplate(selectionColumns, iconColumns, labelColumns)};\n        `;\n      case Positions.Bottom:\n        return css`\n          grid-template-areas:\n            '${getTemplate(selectionArea, iconArea, labelArea)}'\n            '${getTemplate(selectionAreaEmpty, iconAreaEmpty, metaArea)}';\n          grid-template-columns: ${getTemplate(selectionColumns, iconColumns, labelColumns)};\n        `;\n      case Positions.Right:\n        return css`\n          grid-template-areas: '${getTemplate(selectionArea, iconArea, labelArea, metaArea)}';\n          grid-template-columns: ${getTemplate(selectionColumns, iconColumns, labelColumns, metaColumns)};\n        `;\n      default:\n        return defaultStyle;\n    }\n  }\n\n  switch ($metaTextPosition) {\n    case Positions.Top:\n      return css`\n        grid-template-areas:\n          '${getTemplate(iconAreaEmpty, metaArea, selectionAreaEmpty)}'\n          '${getTemplate(iconArea, labelArea, selectionArea)}';\n        grid-template-columns: ${getTemplate(iconColumns, labelColumns, selectionColumns)};\n      `;\n    case Positions.Bottom:\n      return css`\n        grid-template-areas:\n          '${getTemplate(iconArea, labelArea, selectionArea)}'\n          '${getTemplate(iconAreaEmpty, metaArea, selectionAreaEmpty)}';\n        grid-template-columns: ${getTemplate(iconColumns, labelColumns, selectionColumns)};\n      `;\n    case Positions.Right:\n      return css`\n        grid-template-areas: '${getTemplate(iconArea, labelArea, metaArea, selectionArea)}';\n        grid-template-columns: ${getTemplate(iconColumns, labelColumns, metaColumns, selectionColumns)};\n      `;\n    default:\n      return defaultStyle;\n  }\n};\n"],"names":["getTemplate","arr","str","getGridTemplateStyles","$withMetaText","$metaTextPosition","$variant","$iconOrFlagProvided","$showInputControls","iconSize","showIconArea","labelArea","labelColumns","metaArea","metaColumns","selectionAreaEmpty","selectionArea","selectionColumns","iconAreaEmpty","iconArea","iconColumns","defaultStyle","css","Positions"],"mappings":";;AAKA,MAAMA,IAAc,IAAIC,MACfA,EAAI,OAAO,CAACC,MAAQ,CAAC,CAACA,CAAG,EAAE,KAAK,GAAG,GAW/BC,IAAwB,CAAC;AAAA,EACpC,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,oBAAAC,IAAqB;AAAA,EACrB,UAAAC;AACF,MAA4F;AAC1F,QAAMC,IAAeJ,MAAa,aAAa,EAAQC,GAEjDI,IAAY,SACZC,IAAe,OAEfC,IAAW,QACXC,IAAc,oBAEdC,IAAqB,KACrBC,IAAgB,aAChBC,IAAmB,GAAGR,CAAQ,MAE9BS,IAAgBR,KAAgB,KAChCS,IAAWT,KAAgB,QAC3BU,IAAcV,KAAgB,GAAGD,CAAQ,MAEzCY,IAAeb,IACjBc;AAAA,gCAC0BtB,EAAYgB,GAAeG,GAAUR,CAAS,CAAC;AAAA,iCAC9CX,EAAYiB,GAAkBG,GAAaR,CAAY,CAAC;AAAA,UAEnFU;AAAA,gCAC0BtB,EAAYmB,GAAUR,GAAWK,CAAa,CAAC;AAAA,iCAC9ChB,EAAYoB,GAAaR,GAAcK,CAAgB,CAAC;AAAA;AAGvF,MAAI,CAACb;AACH,WAAOiB;AAGT,MAAIb;AACF,YAAQH,GAAA;AAAA,MACN,KAAKkB,EAAU;AACb,eAAOD;AAAA;AAAA,eAEAtB,EAAYe,GAAoBG,GAAeL,CAAQ,CAAC;AAAA,eACxDb,EAAYgB,GAAeG,GAAUR,CAAS,CAAC;AAAA,mCAC3BX,EAAYiB,GAAkBG,GAAaR,CAAY,CAAC;AAAA;AAAA,MAErF,KAAKW,EAAU;AACb,eAAOD;AAAA;AAAA,eAEAtB,EAAYgB,GAAeG,GAAUR,CAAS,CAAC;AAAA,eAC/CX,EAAYe,GAAoBG,GAAeL,CAAQ,CAAC;AAAA,mCACpCb,EAAYiB,GAAkBG,GAAaR,CAAY,CAAC;AAAA;AAAA,MAErF,KAAKW,EAAU;AACb,eAAOD;AAAA,kCACmBtB,EAAYgB,GAAeG,GAAUR,GAAWE,CAAQ,CAAC;AAAA,mCACxDb,EAAYiB,GAAkBG,GAAaR,GAAcE,CAAW,CAAC;AAAA;AAAA,MAElG;AACE,eAAOO;AAAA,IAAA;AAIb,UAAQhB,GAAA;AAAA,IACN,KAAKkB,EAAU;AACb,aAAOD;AAAA;AAAA,aAEAtB,EAAYkB,GAAeL,GAAUE,CAAkB,CAAC;AAAA,aACxDf,EAAYmB,GAAUR,GAAWK,CAAa,CAAC;AAAA,iCAC3BhB,EAAYoB,GAAaR,GAAcK,CAAgB,CAAC;AAAA;AAAA,IAErF,KAAKM,EAAU;AACb,aAAOD;AAAA;AAAA,aAEAtB,EAAYmB,GAAUR,GAAWK,CAAa,CAAC;AAAA,aAC/ChB,EAAYkB,GAAeL,GAAUE,CAAkB,CAAC;AAAA,iCACpCf,EAAYoB,GAAaR,GAAcK,CAAgB,CAAC;AAAA;AAAA,IAErF,KAAKM,EAAU;AACb,aAAOD;AAAA,gCACmBtB,EAAYmB,GAAUR,GAAWE,GAAUG,CAAa,CAAC;AAAA,iCACxDhB,EAAYoB,GAAaR,GAAcE,GAAaG,CAAgB,CAAC;AAAA;AAAA,IAElG;AACE,aAAOI;AAAA,EAAA;AAEb;"}

package/build/esm/components/ListItem/ListItemHeader.d.ts

@@ -0,0 +1,4 @@
+import type { IListItemHeaderProps } from './ListItem.types';
+declare const ListItemHeader: import("react").ForwardRefExoticComponent<IListItemHeaderProps & import("react").RefAttributes<HTMLLIElement>>;
+export default ListItemHeader;
+//# sourceMappingURL=ListItemHeader.d.ts.map

package/build/esm/components/ListItem/ListItemHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/ListItem/ListItemHeader.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,QAAA,MAAM,cAAc,gHAmCnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/esm/components/ListItem/ListItemHeader.js

@@ -0,0 +1,43 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import c from "classnames";
+import { Sizes as I, Contrasts as L } from "../../react-base/src/consts/index.js";
+import { ListItemVariants as m } from "../../react-base/src/components/ListItem/ListItem.types.js";
+import { consts as S } from "../../react-base/src/components/ListItem/ListItemHeader.consts.js";
+import { ListItemHeaderWrapper as $ } from "./ListItemHeader.styles.js";
+import { Label as u, FlagContainer as b } from "./ListItem.styles.js";
+import x from "../Flag/Flag.js";
+import { LIST_ITEM_HEADER_CLASS as F } from "../../react-base/src/consts/classes.js";
+const D = f(
+  ({
+    className: a,
+    icon: i,
+    flag: r,
+    label: s,
+    divider: d = !0,
+    size: o = I.Medium,
+    variant: e = m.Default,
+    ...l
+  }, n) => /* @__PURE__ */ p(
+    $,
+    {
+      className: c(F, a),
+      ref: n,
+      $size: o,
+      $variant: e,
+      $divider: d,
+      $iconOrFlagProvided: !!i || !!r,
+      tabIndex: -1,
+      ...l,
+      children: [
+        /* @__PURE__ */ t(u, { size: S[o].labelSize, contrast: L.Subtle, children: s }),
+        e === m.Flag && r && /* @__PURE__ */ t(b, { $size: o, "data-testid": `flag-${r}`, children: /* @__PURE__ */ t(x, { flag: r }) }),
+        e === m.Icon && i
+      ]
+    }
+  )
+);
+export {
+  D as default
+};
+//# sourceMappingURL=ListItemHeader.js.map

package/build/esm/components/ListItem/ListItemHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemHeader.js","sources":["../../../../src/components/ListItem/ListItemHeader.tsx"],"sourcesContent":["import { type ForwardedRef, type ReactElement, forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, Contrasts, LIST_ITEM_HEADER_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { ListItemVariants } from 'acinguiux-ds-react-base/components/ListItem/ListItem.types.js';\nimport { consts } from 'acinguiux-ds-react-base/components/ListItem/ListItemHeader.consts.js';\n\nimport * as Styled from './ListItemHeader.styles';\nimport * as ListItemStyled from './ListItem.styles';\nimport Flag from '../Flag/Flag';\nimport type { IListItemHeaderProps } from './ListItem.types';\n\nconst ListItemHeader = forwardRef(\n  (\n    {\n      className,\n      icon,\n      flag,\n      label,\n      divider = true,\n      size = Sizes.Medium,\n      variant = ListItemVariants.Default,\n      ...rest\n    }: IListItemHeaderProps,\n    ref: ForwardedRef<HTMLLIElement>,\n  ): ReactElement => (\n    <Styled.ListItemHeaderWrapper\n      className={classNames(LIST_ITEM_HEADER_CLASS, className)}\n      ref={ref}\n      $size={size}\n      $variant={variant}\n      $divider={divider}\n      $iconOrFlagProvided={Boolean(icon) || Boolean(flag)}\n      tabIndex={-1}\n      {...rest}\n    >\n      <ListItemStyled.Label size={consts[size].labelSize} contrast={Contrasts.Subtle}>\n        {label}\n      </ListItemStyled.Label>\n      {variant === ListItemVariants.Flag && flag && (\n        <ListItemStyled.FlagContainer $size={size} data-testid={`flag-${flag}`}>\n          <Flag flag={flag} />\n        </ListItemStyled.FlagContainer>\n      )}\n      {variant === ListItemVariants.Icon && icon}\n    </Styled.ListItemHeaderWrapper>\n  ),\n);\n\nexport default ListItemHeader;\n"],"names":["ListItemHeader","forwardRef","className","icon","flag","label","divider","size","Sizes","variant","ListItemVariants","rest","ref","jsxs","Styled.ListItemHeaderWrapper","classNames","LIST_ITEM_HEADER_CLASS","jsx","ListItemStyled.Label","consts","Contrasts","ListItemStyled.FlagContainer","Flag"],"mappings":";;;;;;;;;;AAYA,MAAMA,IAAiBC;AAAA,EACrB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAOC,EAAM;AAAA,IACb,SAAAC,IAAUC,EAAiB;AAAA,IAC3B,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,GAAwBd,CAAS;AAAA,MACvD,KAAAU;AAAA,MACA,OAAOL;AAAA,MACP,UAAUE;AAAA,MACV,UAAUH;AAAA,MACV,qBAAqB,EAAQH,KAAS,EAAQC;AAAA,MAC9C,UAAU;AAAA,MACT,GAAGO;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAM,EAACC,GAAA,EAAqB,MAAMC,EAAOZ,CAAI,EAAE,WAAW,UAAUa,EAAU,QACrE,UAAAf,EAAA,CACH;AAAA,QACCI,MAAYC,EAAiB,QAAQN,KACpC,gBAAAa,EAACI,GAAA,EAA6B,OAAOd,GAAM,eAAa,QAAQH,CAAI,IAClE,UAAA,gBAAAa,EAACK,GAAA,EAAK,MAAAlB,GAAY,GACpB;AAAA,QAEDK,MAAYC,EAAiB,QAAQP;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5C;"}

package/build/esm/components/ListItem/ListItemHeader.styles.d.ts

@@ -0,0 +1,4 @@
+import { ListItemHeaderWrapperProps } from './ListItem.types';
+declare const ListItemHeaderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, Omit<ListItemHeaderWrapperProps, "$disabled" | "$selected" | "$ariaInteractiveOnly">>> & string;
+export { ListItemHeaderWrapper };
+//# sourceMappingURL=ListItemHeader.styles.d.ts.map

package/build/esm/components/ListItem/ListItemHeader.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemHeader.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ListItem/ListItemHeader.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAG9D,QAAA,MAAM,qBAAqB,yTAsC1B,CAAC;AAEF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/build/esm/components/ListItem/ListItemHeader.styles.js

@@ -0,0 +1,43 @@
+import { styled as n, css as i } from "styled-components";
+import { consts as r } from "../../react-base/src/components/ListItem/ListItemHeader.consts.js";
+import { Variables as e } from "../../react-base/src/theme/types/layer.js";
+import { getGridTemplateStyles as l } from "./ListItem.utils.js";
+const s = n.li(
+  ({ theme: t, $size: o, $variant: p, $iconOrFlagProvided: a, $divider: d }) => i`
+    position: relative;
+    display: grid;
+    align-items: center;
+    width: 100%;
+    max-width: 100%;
+    column-gap: 6px;
+    border-radius: 4px;
+    padding: ${r[o].padding.vertical - 2}px ${r[o].padding.horizontal}px;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    ${d && i`
+      padding: ${r[o].padding.vertical + 3}px ${r[o].padding.horizontal}px
+        ${r[o].padding.vertical - 2}px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: ${r[o].padding.horizontal}px;
+        right: ${r[o].padding.horizontal}px;
+        height: 1px;
+        background-color: ${t.layer()[e.BorderOnFoundationSubtle]};
+      }
+    `}
+
+    ${l({
+    $variant: p,
+    $iconOrFlagProvided: a,
+    iconSize: 16
+  })}
+  `
+);
+export {
+  s as ListItemHeaderWrapper
+};
+//# sourceMappingURL=ListItemHeader.styles.js.map