@mittwald/flow-react-components 1.3.0-next.20 → 1.3.0-next.21

package/dist/js/packages/components/src/components/Avatar/Avatar.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.module.mjs","names":[],"sources":["../../../../../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n  border-radius: var(--corner-radius--round);\n  width: var(--avatar-size);\n  height: var(--avatar-size);\n  overflow: hidden;\n  flex-shrink: 0;\n  font-weight: var(--font-weight--bold);\n  font-size: calc(var(--avatar-size) * 0.35);\n  background-color: var(--background-color);\n  color: var(--content-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* Elements */\n\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .icon {\n    width: calc(var(--avatar-size) * 0.7);\n    height: calc(var(--avatar-size) * 0.7);\n  }\n\n  .initials {\n    font-size: calc(var(--avatar-size) * 0.4);\n  }\n\n  @extend .size-m;\n  @extend .blue;\n\n  /* Sizes */\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      --avatar-size: var(--avatar--size--#{$size});\n    }\n  }\n\n  @include size(m);\n  @include size(xs);\n  @include size(s);\n  @include size(l);\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:has(.initials[data-dynamic-color=\"#{$color}\"]),\n    &.#{$color} {\n      --background-color: var(--decorative--#{$color}-background-color);\n      --content-color: var(--decorative--#{$color}-content-color);\n      --content-accent-color: var(--decorative--#{$color}-content-accent-color);\n    }\n  }\n\n  @include color(\"blue\");\n  @include color(\"teal\");\n  @include color(\"green\");\n  @include color(\"violet\");\n  @include color(\"lilac\");\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      --background-color: var(--avatar--#{$status}-status-background-color);\n    }\n  }\n\n  @include status(\"info\");\n  @include status(\"success\");\n  @include status(\"warning\");\n  @include status(\"danger\");\n  @include status(\"unavailable\");\n}\n"],"mappings":""}
+{"version":3,"file":"Avatar.module.mjs","names":[],"sources":["../../../../../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n  border-radius: var(--corner-radius--round);\n  width: var(--avatar-size);\n  height: var(--avatar-size);\n  overflow: hidden;\n  flex-shrink: 0;\n  font-weight: var(--font-weight--bold);\n  font-size: calc(var(--avatar-size) * 0.35);\n  background-color: var(--background-color);\n  color: var(--content-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* Elements */\n\n  // The image is a child the consumer passes — Flow `Image` or a bare `<img>`.\n  // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .icon {\n    width: calc(var(--avatar-size) * 0.7);\n    height: calc(var(--avatar-size) * 0.7);\n  }\n\n  .initials {\n    font-size: calc(var(--avatar-size) * 0.4);\n  }\n\n  @extend .size-m;\n  @extend .blue;\n\n  /* Sizes */\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      --avatar-size: var(--avatar--size--#{$size});\n    }\n  }\n\n  @include size(m);\n  @include size(xs);\n  @include size(s);\n  @include size(l);\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:has(.initials[data-dynamic-color=\"#{$color}\"]),\n    &.#{$color} {\n      --background-color: var(--decorative--#{$color}-background-color);\n      --content-color: var(--decorative--#{$color}-content-color);\n      --content-accent-color: var(--decorative--#{$color}-content-accent-color);\n    }\n  }\n\n  @include color(\"blue\");\n  @include color(\"teal\");\n  @include color(\"green\");\n  @include color(\"violet\");\n  @include color(\"lilac\");\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      --background-color: var(--avatar--#{$status}-status-background-color);\n    }\n  }\n\n  @include status(\"info\");\n  @include status(\"success\");\n  @include status(\"warning\");\n  @include status(\"danger\");\n  @include status(\"unavailable\");\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Calendar/Calendar.module.mjs

@@ -2,16 +2,18 @@
 /* */
 //#region src/components/Calendar/Calendar.module.scss
 var calendar = "flow--calendar";
+var calendarHeader = "flow--calendar--calendar-header";
 var container = "flow--calendar--container";
 var presetMenu = "flow--calendar--preset-menu";
 var range = "flow--calendar--range";
 var Calendar_module_default = {
 	calendar,
+	calendarHeader,
 	container,
 	presetMenu,
 	range
 };
 //#endregion
-export { calendar, container, Calendar_module_default as default, presetMenu, range };
+export { calendar, calendarHeader, container, Calendar_module_default as default, presetMenu, range };
 
 //# sourceMappingURL=Calendar.module.mjs.map

package/dist/js/packages/components/src/components/Calendar/Calendar.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.calendar {\n  width: fit-content;\n\n  header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--calendar--spacing);\n\n    h2 {\n      font-size: var(--calendar--heading-font-size);\n    }\n  }\n\n  .container {\n    display: flex;\n    flex-direction: row;\n    gap: var(--popover--padding--m);\n\n    .presetMenu {\n      max-width: 200px;\n    }\n  }\n\n  @media (max-width: 530px) {\n    .container {\n      flex-direction: column-reverse;\n    }\n  }\n\n  :global(.react-aria-CalendarHeaderCell) {\n    font-size: var(--calendar--cell-font-size);\n    height: var(--calendar--cell-size);\n  }\n\n  table {\n    border-spacing: var(--calendar--spacing);\n  }\n\n  :global(.react-aria-CalendarCell) {\n    width: var(--calendar--cell-size);\n    height: var(--calendar--cell-size);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n    border-radius: var(--calendar--cell-corner-radius);\n    font-size: var(--calendar--cell-font-size);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    @include focus.focus;\n\n    &[data-outside-month] {\n      display: none;\n    }\n\n    &:hover {\n      background: var(--calendar--cell-background-color--hover);\n    }\n\n    &[data-pressed] {\n      background: var(--calendar--cell-background-color--pressed);\n    }\n\n    &[data-selected] {\n      background: var(--calendar--cell-background-color--selected);\n      color: var(--calendar--cell-content-color--selected);\n    }\n\n    &[data-disabled],\n    &[data-unavailable=\"true\"] {\n      background: var(--calendar--cell-background-color--disabled);\n      color: var(--calendar--cell-content-color--disabled);\n    }\n\n    @include focus.focus;\n  }\n\n  &.range {\n    :global(.react-aria-CalendarCell) {\n      position: relative;\n      isolation: isolate;\n      transition-duration: 0s;\n\n      &[data-selected] {\n        &::before {\n          content: \"\";\n          background: var(--calendar--range-background-color);\n          border-block: var(--calendar--range-border-width)\n            var(--calendar--range-border-style)\n            var(--calendar--range-border-color);\n          width: calc(100% + 0.375rem);\n          height: 100%;\n          position: absolute;\n          z-index: -1;\n        }\n\n        &::after {\n          content: \"\";\n          width: 100%;\n          height: 100%;\n          position: absolute;\n          z-index: -1;\n          border-radius: var(--calendar--cell-corner-radius);\n        }\n\n        &:hover {\n          &::after {\n            background: var(--calendar--cell-background-color--hover);\n          }\n        }\n\n        &[data-pressed] {\n          &::after {\n            background: var(--calendar--cell-background-color--pressed);\n          }\n        }\n\n        &[data-selection-start],\n        &[data-selection-end] {\n          &::after {\n            background: var(--calendar--cell-background-color--selected);\n          }\n        }\n\n        &[data-selection-start] {\n          &::before {\n            border-start-start-radius: var(--calendar--cell-corner-radius);\n            border-end-start-radius: var(--calendar--cell-corner-radius);\n            inset-inline-start: 0;\n          }\n        }\n\n        &[data-selection-end] {\n          &::before {\n            border-start-end-radius: var(--calendar--cell-corner-radius);\n            border-end-end-radius: var(--calendar--cell-corner-radius);\n            inset-inline-end: 0;\n          }\n        }\n\n        &:not([data-selection-start], [data-selection-end]) {\n          color: var(--text--color--default);\n          background: none;\n        }\n\n        &[data-selection-start][data-selection-end] {\n          &::before {\n            display: none;\n          }\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 360px) {\n  .calendar {\n    --calendar--cell-size: 2.1rem;\n    --calendar--cell-font-size: 0.8rem;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.calendar {\n  width: fit-content;\n\n  .calendarHeader {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--calendar--spacing);\n\n    /* react-aria's Heading — CalendarHeader passes no className, so its\n       default class is the handle. */\n    :global(.react-aria-Heading) {\n      font-size: var(--calendar--heading-font-size);\n    }\n  }\n\n  .container {\n    display: flex;\n    flex-direction: row;\n    gap: var(--popover--padding--m);\n\n    .presetMenu {\n      max-width: 200px;\n    }\n  }\n\n  @media (max-width: 530px) {\n    .container {\n      flex-direction: column-reverse;\n    }\n  }\n\n  :global(.react-aria-CalendarHeaderCell) {\n    font-size: var(--calendar--cell-font-size);\n    height: var(--calendar--cell-size);\n  }\n\n  :global(.react-aria-CalendarGrid) {\n    border-spacing: var(--calendar--spacing);\n  }\n\n  :global(.react-aria-CalendarCell) {\n    width: var(--calendar--cell-size);\n    height: var(--calendar--cell-size);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n    border-radius: var(--calendar--cell-corner-radius);\n    font-size: var(--calendar--cell-font-size);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    @include focus.focus;\n\n    &[data-outside-month] {\n      display: none;\n    }\n\n    &:hover {\n      background: var(--calendar--cell-background-color--hover);\n    }\n\n    &[data-pressed] {\n      background: var(--calendar--cell-background-color--pressed);\n    }\n\n    &[data-selected] {\n      background: var(--calendar--cell-background-color--selected);\n      color: var(--calendar--cell-content-color--selected);\n    }\n\n    &[data-disabled],\n    &[data-unavailable=\"true\"] {\n      background: var(--calendar--cell-background-color--disabled);\n      color: var(--calendar--cell-content-color--disabled);\n    }\n\n    @include focus.focus;\n  }\n\n  &.range {\n    :global(.react-aria-CalendarCell) {\n      position: relative;\n      isolation: isolate;\n      transition-duration: 0s;\n\n      &[data-selected] {\n        &::before {\n          content: \"\";\n          background: var(--calendar--range-background-color);\n          border-block: var(--calendar--range-border-width)\n            var(--calendar--range-border-style)\n            var(--calendar--range-border-color);\n          width: calc(100% + 0.375rem);\n          height: 100%;\n          position: absolute;\n          z-index: -1;\n        }\n\n        &::after {\n          content: \"\";\n          width: 100%;\n          height: 100%;\n          position: absolute;\n          z-index: -1;\n          border-radius: var(--calendar--cell-corner-radius);\n        }\n\n        &:hover {\n          &::after {\n            background: var(--calendar--cell-background-color--hover);\n          }\n        }\n\n        &[data-pressed] {\n          &::after {\n            background: var(--calendar--cell-background-color--pressed);\n          }\n        }\n\n        &[data-selection-start],\n        &[data-selection-end] {\n          &::after {\n            background: var(--calendar--cell-background-color--selected);\n          }\n        }\n\n        &[data-selection-start] {\n          &::before {\n            border-start-start-radius: var(--calendar--cell-corner-radius);\n            border-end-start-radius: var(--calendar--cell-corner-radius);\n            inset-inline-start: 0;\n          }\n        }\n\n        &[data-selection-end] {\n          &::before {\n            border-start-end-radius: var(--calendar--cell-corner-radius);\n            border-end-end-radius: var(--calendar--cell-corner-radius);\n            inset-inline-end: 0;\n          }\n        }\n\n        &:not([data-selection-start], [data-selection-end]) {\n          color: var(--text--color--default);\n          background: none;\n        }\n\n        &[data-selection-start][data-selection-end] {\n          &::before {\n            display: none;\n          }\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 360px) {\n  .calendar {\n    --calendar--cell-size: 2.1rem;\n    --calendar--cell-font-size: 0.8rem;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Calendar/components/CalendarHeader/CalendarHeader.mjs

@@ -3,25 +3,29 @@
 import { IconChevronLeft } from "../../../Icon/components/icons/IconChevronLeft.mjs";
 import { IconChevronRight } from "../../../Icon/components/icons/IconChevronRight.mjs";
 import { Button } from "../../../Button/Button.mjs";
+import Calendar_module_default from "../../Calendar.module.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx
 var CalendarHeader = () => {
-	return /* @__PURE__ */ jsxs("header", { children: [
-		/* @__PURE__ */ jsx(Button, {
-			ariaSlot: "previous",
-			variant: "plain",
-			color: "secondary",
-			children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-		}),
-		/* @__PURE__ */ jsx(Aria.Heading, {}),
-		/* @__PURE__ */ jsx(Button, {
-			ariaSlot: "next",
-			variant: "plain",
-			color: "secondary",
-			children: /* @__PURE__ */ jsx(IconChevronRight, {})
-		})
-	] });
+	return /* @__PURE__ */ jsxs("header", {
+		className: Calendar_module_default.calendarHeader,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				ariaSlot: "previous",
+				variant: "plain",
+				color: "secondary",
+				children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+			}),
+			/* @__PURE__ */ jsx(Aria.Heading, {}),
+			/* @__PURE__ */ jsx(Button, {
+				ariaSlot: "next",
+				variant: "plain",
+				color: "secondary",
+				children: /* @__PURE__ */ jsx(IconChevronRight, {})
+			})
+		]
+	});
 };
 //#endregion
 export { CalendarHeader, CalendarHeader as default };

package/dist/js/packages/components/src/components/Calendar/components/CalendarHeader/CalendarHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n} from \"@/components/Icon/components/icons\";\n\nexport const CalendarHeader: FC = () => {\n  return (\n    <header>\n      <Button ariaSlot=\"previous\" variant=\"plain\" color=\"secondary\">\n        <IconChevronLeft />\n      </Button>\n      <Aria.Heading />\n      <Button ariaSlot=\"next\" variant=\"plain\" color=\"secondary\">\n        <IconChevronRight />\n      </Button>\n    </header>\n  );\n};\n\nexport default CalendarHeader;\n"],"mappings":";;;;;;;;AAQA,IAAa,uBAA2B;CACtC,OACE,qBAAC,UAAD,EAAA,UAAA;EACE,oBAAC,QAAD;GAAQ,UAAS;GAAW,SAAQ;GAAQ,OAAM;GAChD,UAAA,oBAAC,iBAAD,CAAkB,CAAA;EACZ,CAAA;EACR,oBAAC,KAAK,SAAN,CAAe,CAAA;EACf,oBAAC,QAAD;GAAQ,UAAS;GAAO,SAAQ;GAAQ,OAAM;GAC5C,UAAA,oBAAC,kBAAD,CAAmB,CAAA;EACb,CAAA;CACF,EAAA,CAAA;AAEZ"}
+{"version":3,"file":"CalendarHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n} from \"@/components/Icon/components/icons\";\nimport styles from \"../../Calendar.module.scss\";\n\nexport const CalendarHeader: FC = () => {\n  return (\n    <header className={styles.calendarHeader}>\n      <Button ariaSlot=\"previous\" variant=\"plain\" color=\"secondary\">\n        <IconChevronLeft />\n      </Button>\n      <Aria.Heading />\n      <Button ariaSlot=\"next\" variant=\"plain\" color=\"secondary\">\n        <IconChevronRight />\n      </Button>\n    </header>\n  );\n};\n\nexport default CalendarHeader;\n"],"mappings":";;;;;;;;;AASA,IAAa,uBAA2B;CACtC,OACE,qBAAC,UAAD;EAAQ,WAAW,wBAAO;EAA1B,UAAA;GACE,oBAAC,QAAD;IAAQ,UAAS;IAAW,SAAQ;IAAQ,OAAM;IAChD,UAAA,oBAAC,iBAAD,CAAkB,CAAA;GACZ,CAAA;GACR,oBAAC,KAAK,SAAN,CAAe,CAAA;GACf,oBAAC,QAAD;IAAQ,UAAS;IAAO,SAAQ;IAAQ,OAAM;IAC5C,UAAA,oBAAC,kBAAD,CAAmB,CAAA;GACb,CAAA;EACF;;AAEZ"}

package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.module.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.module.scss"],"sourcesContent":[".cartesianChart {\n  font-family: Inter, sans-serif;\n  isolation: isolate;\n\n  *:focus:not(:focus-visible) {\n    outline: none !important;\n  }\n\n  :global(.flow--illustrated-message--illustrated-message-container) {\n    container-type: normal;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .emptyViewContainer {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &.emptyView {\n    :global(.recharts-cartesian-grid) {\n      display: none;\n    }\n  }\n\n  svg {\n    overflow: visible;\n  }\n\n  :global(.recharts-tooltip-wrapper) {\n    z-index: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"CartesianChart.module.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.module.scss"],"sourcesContent":[".cartesianChart {\n  font-family: Inter, sans-serif;\n  isolation: isolate;\n\n  *:focus:not(:focus-visible) {\n    outline: none !important;\n  }\n\n  .emptyViewContainer {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &.emptyView {\n    :global(.recharts-cartesian-grid) {\n      display: none;\n    }\n  }\n\n  // recharts renders every svg here; only its outermost surface is classed.\n  // stylelint-disable-next-line selector-max-type -- third-party svgs\n  svg {\n    overflow: visible;\n  }\n\n  :global(.recharts-tooltip-wrapper) {\n    z-index: 1;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Chat/Chat.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.module.mjs","names":[],"sources":["../../../../../../../src/components/Chat/Chat.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.chat {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  .messageThreadContainer {\n    @include scrollbar.scrollbar;\n\n    overflow: auto;\n    padding-bottom: var(--chat--spacing);\n    padding-inline-end: var(--size-px--m);\n    margin-inline-end: calc(var(--size-px--m) * -1);\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column-reverse;\n  }\n\n  .fileCardList {\n    margin-top: var(--chat--spacing);\n  }\n\n  .controls:not(:has(form)),\n  .controls form {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--chat--spacing);\n    flex-wrap: wrap;\n    padding-top: var(--chat--spacing);\n\n    > :first-child {\n      order: 0;\n      width: 100%;\n    }\n\n    .successButton,\n    .button {\n      order: 1;\n    }\n\n    .successButton {\n      margin-inline-start: auto;\n    }\n  }\n}\n\n@media (max-width: 550px) {\n  .successButton,\n  .button {\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Chat.module.mjs","names":[],"sources":["../../../../../../../src/components/Chat/Chat.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.chat {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  .messageThreadContainer {\n    @include scrollbar.scrollbar;\n\n    overflow: auto;\n    padding-bottom: var(--chat--spacing);\n    padding-inline-end: var(--size-px--m);\n    margin-inline-end: calc(var(--size-px--m) * -1);\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column-reverse;\n  }\n\n  .fileCardList {\n    margin-top: var(--chat--spacing);\n  }\n\n  /* The `<form>` comes from the consumer wrapping the controls in the\n     react-hook-form `Form` (or its own `formComponent`). `Form` is a plain FC,\n     not a flowComponent, so Chat's props context cannot give it a class. */\n  // stylelint-disable selector-max-type -- consumer-supplied form, no class\n  .controls:not(:has(form)),\n  .controls form {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--chat--spacing);\n    flex-wrap: wrap;\n    padding-top: var(--chat--spacing);\n\n    > :first-child {\n      order: 0;\n      width: 100%;\n    }\n\n    .successButton,\n    .button {\n      order: 1;\n    }\n\n    .successButton {\n      margin-inline-start: auto;\n    }\n  }\n  // stylelint-enable selector-max-type\n}\n\n@media (max-width: 550px) {\n  .successButton,\n  .button {\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/CheckboxGroup/CheckboxGroup.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.module.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.module.scss"],"sourcesContent":[".checkboxGroup {\n  order: 2;\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--form-control--spacing-y);\n\n  .checkboxButton {\n    width: auto;\n\n    &[data-invalid]:not([data-selected]) {\n      border-color: var(--form-control--border-color--default);\n      background-color: var(--form-control--background-color--default);\n    }\n  }\n\n  .checkbox,\n  .checkboxButton {\n    :global(.flow--form-field) {\n      display: block;\n    }\n\n    &[data-invalid]:not([data-selected]) {\n      svg {\n        color: var(--form-control--border-color--default);\n      }\n    }\n  }\n\n  &:empty {\n    display: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"CheckboxGroup.module.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.module.scss"],"sourcesContent":[".checkboxGroup {\n  order: 2;\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--form-control--spacing-y);\n\n  .checkboxButton {\n    width: auto;\n\n    &[data-invalid]:not([data-selected]) {\n      border-color: var(--form-control--border-color--default);\n      background-color: var(--form-control--background-color--default);\n    }\n  }\n\n  .checkbox,\n  .checkboxButton {\n    :global(.flow--form-field) {\n      display: block;\n    }\n\n    &[data-invalid]:not([data-selected]) {\n      // Every icon in the checkbox, consumer icons in the label included —\n      // the indicator's own `flow--checkbox--icon` would narrow the match.\n      // stylelint-disable-next-line selector-max-type -- see above\n      svg {\n        color: var(--form-control--border-color--default);\n      }\n    }\n  }\n\n  &:empty {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useId, useState } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface CodeBlockProps\n  extends\n    PropsWithClassName,\n    PropsWithChildren,\n    Partial<\n      Pick<CodeEditorProps, \"language\" | \"showLineNumbers\" | \"copyable\">\n    > {\n  /** The code displayed in the block. */\n  code?: string;\n  /**\n   * Controls truncation of long code blocks. `false` disables it, `true`\n   * truncates after 8 lines, and a number sets the maximum line count.\n   *\n   * @default: false\n   */\n  truncateLines?: boolean | number;\n}\n\n/** @flr-generate all */\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n  const {\n    code,\n    className,\n    copyable = false,\n    showLineNumbers = false,\n    children,\n    truncateLines = false,\n    ...rest\n  } = props;\n\n  const [folded, setFolded] = useState(truncateLines !== false);\n  const [maxHeight, setMaxHeight] = useState<number>();\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n\n  const rootClassName = clsx(styles.codeBlock, className);\n\n  const id = useId();\n\n  if (!code) {\n    return (\n      <div className={clsx(rootClassName, styles.withChildren)}>\n        <pre>\n          <code>{children}</code>\n        </pre>\n      </div>\n    );\n  }\n\n  const maxHeightVariable = maxHeight\n    ? ({ \"--max-height\": `${maxHeight}px` } as React.CSSProperties)\n    : undefined;\n\n  return (\n    <div\n      className={clsx(rootClassName, folded ? styles.folded : undefined)}\n      style={maxHeightVariable}\n    >\n      <CodeEditor\n        {...rest}\n        value={code}\n        editable={false}\n        copyable={copyable}\n        showLineNumbers={showLineNumbers}\n        showLinterMarkers={false}\n        showCodeFolding={false}\n        showActiveLineMarker={false}\n        isReadOnly\n        onCreateEditor={(view) => {\n          if (!truncateLines) {\n            return;\n          }\n\n          const lineHeight = 20;\n          const padding = 12;\n\n          const visibleLines =\n            typeof truncateLines === \"number\" ? truncateLines : 8;\n\n          const totalLines = view.state.doc.lines;\n\n          if (totalLines > visibleLines)\n            setMaxHeight(lineHeight * visibleLines + padding);\n        }}\n        id={id}\n      >\n        {truncateLines && maxHeight && (\n          <div className={clsx(styles.buttonContainer)}>\n            <Button\n              variant=\"plain\"\n              color=\"secondary\"\n              size=\"s\"\n              onPress={() => setFolded((folded) => !folded)}\n              aria-expanded={!folded}\n              aria-controls={id}\n            >\n              {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n            </Button>\n          </div>\n        )}\n      </CodeEditor>\n    </div>\n  );\n};\n\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;AA4BA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,kBAAkB,4BAA4B,kBAAS,WAAW;CAExE,MAAM,gBAAgB,KAAK,yBAAO,WAAW,SAAS;CAEtD,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,eAAe,yBAAO,YAAY;EACrD,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAO,SAAe,CAAA,EACnB,CAAA;CACF,CAAA;CAIT,MAAM,oBAAoB,YACrB,EAAE,gBAAgB,GAAG,UAAU,IAAI,IACpC,KAAA;CAEJ,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,eAAe,SAAS,yBAAO,SAAS,KAAA,CAAS;EACjE,OAAO;EAEP,UAAA,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,KAAK,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,eAAe,WAAW,WAAW,CAAC,MAAM;KAC5C,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA;CACT,CAAA;AAET"}
+{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useId, useState } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface CodeBlockProps\n  extends\n    PropsWithClassName,\n    PropsWithChildren,\n    Partial<\n      Pick<CodeEditorProps, \"language\" | \"showLineNumbers\" | \"copyable\">\n    > {\n  /** The code displayed in the block. */\n  code?: string;\n  /**\n   * Controls truncation of long code blocks. `false` disables it, `true`\n   * truncates after 8 lines, and a number sets the maximum line count.\n   *\n   * @default: false\n   */\n  truncateLines?: boolean | number;\n}\n\n/** @flr-generate all */\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n  const {\n    code,\n    className,\n    copyable = false,\n    showLineNumbers = false,\n    children,\n    truncateLines = false,\n    ...rest\n  } = props;\n\n  const [folded, setFolded] = useState(truncateLines !== false);\n  const [maxHeight, setMaxHeight] = useState<number>();\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n\n  const rootClassName = clsx(styles.codeBlock, className);\n\n  const id = useId();\n\n  if (!code) {\n    return (\n      <div className={clsx(rootClassName, styles.withChildren)}>\n        {/* Deliberately class-less: a `flow--` class would make the global\n            reset's `font: inherit` apply and replace the UA monospace\n            metrics. See CodeBlock.module.scss. */}\n        <pre>\n          <code>{children}</code>\n        </pre>\n      </div>\n    );\n  }\n\n  const maxHeightVariable = maxHeight\n    ? ({ \"--max-height\": `${maxHeight}px` } as React.CSSProperties)\n    : undefined;\n\n  return (\n    <div\n      className={clsx(rootClassName, folded ? styles.folded : undefined)}\n      style={maxHeightVariable}\n    >\n      <CodeEditor\n        {...rest}\n        value={code}\n        editable={false}\n        copyable={copyable}\n        showLineNumbers={showLineNumbers}\n        showLinterMarkers={false}\n        showCodeFolding={false}\n        showActiveLineMarker={false}\n        isReadOnly\n        onCreateEditor={(view) => {\n          if (!truncateLines) {\n            return;\n          }\n\n          const lineHeight = 20;\n          const padding = 12;\n\n          const visibleLines =\n            typeof truncateLines === \"number\" ? truncateLines : 8;\n\n          const totalLines = view.state.doc.lines;\n\n          if (totalLines > visibleLines)\n            setMaxHeight(lineHeight * visibleLines + padding);\n        }}\n        id={id}\n      >\n        {truncateLines && maxHeight && (\n          <div className={clsx(styles.buttonContainer)}>\n            <Button\n              variant=\"plain\"\n              color=\"secondary\"\n              size=\"s\"\n              onPress={() => setFolded((folded) => !folded)}\n              aria-expanded={!folded}\n              aria-controls={id}\n            >\n              {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n            </Button>\n          </div>\n        )}\n      </CodeEditor>\n    </div>\n  );\n};\n\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;AA4BA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,kBAAkB,4BAA4B,kBAAS,WAAW;CAExE,MAAM,gBAAgB,KAAK,yBAAO,WAAW,SAAS;CAEtD,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,eAAe,yBAAO,YAAY;EAIrD,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAO,SAAe,CAAA,EACnB,CAAA;CACF,CAAA;CAIT,MAAM,oBAAoB,YACrB,EAAE,gBAAgB,GAAG,UAAU,IAAI,IACpC,KAAA;CAEJ,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,eAAe,SAAS,yBAAO,SAAS,KAAA,CAAS;EACjE,OAAO;EAEP,UAAA,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,KAAK,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,eAAe,WAAW,WAAW,CAAC,MAAM;KAC5C,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA;CACT,CAAA;AAET"}

package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.module.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.codeBlock {\n  display: block;\n  font-size: var(--code-block--font-size);\n  font-family: var(--code-block--font-family);\n  overflow: hidden;\n  min-width: 0;\n\n  &.withChildren {\n    color: var(--code-block--content-color);\n    background-color: var(--code-block--background-color);\n    border: var(--code-block--border-width) var(--code-block--border-style)\n      var(--code-block--border-color);\n    border-radius: var(--code-block--corner-radius);\n\n    > pre {\n      @include scrollbar.scrollbar;\n\n      overflow-x: auto;\n      padding: var(--code-block--padding);\n\n      > code {\n        text-shadow: none;\n      }\n    }\n  }\n\n  &.folded {\n    :global(.cm-content) {\n      max-height: var(--max-height);\n      overflow: hidden;\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        inset-inline: 0;\n        bottom: 0;\n        height: 50%;\n        pointer-events: none;\n        background: linear-gradient(\n          to bottom,\n          transparent,\n          var(--code-block--background-color)\n        );\n      }\n    }\n  }\n\n  /* A code block is not an input – both axes use its own padding. */\n  &.codeBlock div:global(.flow--code-editor--code-mirror) {\n    --form-control--padding-y: var(--code-block--padding);\n    --form-control--padding-x: var(--code-block--padding);\n\n    border-color: var(--code-block--border-color);\n  }\n\n  .buttonContainer {\n    position: relative;\n    margin-top: calc(var(--code-block--show-more-padding) * -1);\n    display: flex;\n    justify-content: center;\n    padding-block: var(--code-block--show-more-padding);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"CodeBlock.module.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.codeBlock {\n  display: block;\n  font-size: var(--code-block--font-size);\n  font-family: var(--code-block--font-family);\n  overflow: hidden;\n  min-width: 0;\n\n  &.withChildren {\n    color: var(--code-block--content-color);\n    background-color: var(--code-block--background-color);\n    border: var(--code-block--border-width) var(--code-block--border-style)\n      var(--code-block--border-color);\n    border-radius: var(--code-block--corner-radius);\n\n    /* These stay element selectors on purpose. Classing them would give them a\n       `flow--` class, and the global reset's\n       `*:where([class*=\"flow--\"] [class*=\"flow--\"]) { font: inherit }` would\n       then replace the UA monospace metrics — the code text visibly reflows.\n       Fixing that is a design decision for UX, not a lint cleanup. */\n    // stylelint-disable selector-max-type -- see above\n    > pre {\n      @include scrollbar.scrollbar;\n\n      overflow-x: auto;\n      padding: var(--code-block--padding);\n\n      > code {\n        text-shadow: none;\n      }\n    }\n    // stylelint-enable selector-max-type\n  }\n\n  &.folded {\n    :global(.cm-content) {\n      max-height: var(--max-height);\n      overflow: hidden;\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        inset-inline: 0;\n        bottom: 0;\n        height: 50%;\n        pointer-events: none;\n        background: linear-gradient(\n          to bottom,\n          transparent,\n          var(--code-block--background-color)\n        );\n      }\n    }\n  }\n\n  /* A code block is not an input – both axes use its own padding. The repeated\n     root class only buys specificity over CodeEditor's own `.codeMirror` rules\n     (incl. `.readonly`); it identifies nothing. */\n  &.codeBlock.codeBlock :global(.flow--code-editor--code-mirror) {\n    --form-control--padding-y: var(--code-block--padding);\n    --form-control--padding-x: var(--code-block--padding);\n\n    border-color: var(--code-block--border-color);\n  }\n\n  .buttonContainer {\n    position: relative;\n    margin-top: calc(var(--code-block--show-more-padding) * -1);\n    display: flex;\n    justify-content: center;\n    padding-block: var(--code-block--show-more-padding);\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Combine/Combine.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combine.module.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.module.scss"],"sourcesContent":[".combine {\n  &:has(.avatar):has(.text) {\n    display: flex;\n    gap: var(--combine--avatar-text--spacing);\n    height: fit-content;\n\n    --first-two-lines-height: calc(var(--line-height-s) * 2);\n\n    min-height: var(--first-two-lines-height);\n\n    .text {\n      flex-grow: 1;\n      display: flex;\n      flex-direction: column;\n      align-self: center;\n      font-size: var(--font-size-text--s);\n    }\n\n    .avatar {\n      margin-top: calc(\n        (var(--first-two-lines-height) - var(--avatar--size--m)) / 2\n      );\n    }\n  }\n\n  &:has(:global(.flow--form-field)):has(.button) {\n    display: flex;\n    align-items: flex-start;\n    column-gap: var(--combine--input-button--spacing);\n\n    :global(.flow--form-field) {\n      flex-grow: 1;\n    }\n\n    &:has(label) {\n      .button {\n        margin-top: calc(var(--line-height-s) + var(--form-control--spacing-y));\n      }\n    }\n  }\n\n  &:has(.text):has(.contextualHelpTriggerButton),\n  &:has(.text):has(.copyButton) {\n    display: inline-flex;\n    align-items: center;\n    column-gap: var(--combine--text-button--spacing);\n  }\n\n  &:has(> .text):has(> .icon) {\n    display: inline-flex;\n    align-items: center;\n    column-gap: var(--combine--icon-text--spacing);\n  }\n}\n\n@media (max-width: 550px) {\n  .combine:has(:global(.flow--form-field)):has(.button) {\n    flex-direction: column;\n    row-gap: var(--section--spacing);\n    align-items: stretch;\n\n    .button {\n      width: 100%;\n    }\n\n    &:has(label) {\n      .button {\n        margin-top: 0;\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Combine.module.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.module.scss"],"sourcesContent":[".combine {\n  &:has(.avatar):has(.text) {\n    display: flex;\n    gap: var(--combine--avatar-text--spacing);\n    height: fit-content;\n\n    --first-two-lines-height: calc(var(--line-height-s) * 2);\n\n    min-height: var(--first-two-lines-height);\n\n    .text {\n      flex-grow: 1;\n      display: flex;\n      flex-direction: column;\n      align-self: center;\n      font-size: var(--font-size-text--s);\n    }\n\n    .avatar {\n      margin-top: calc(\n        (var(--first-two-lines-height) - var(--avatar--size--m)) / 2\n      );\n    }\n  }\n\n  &:has(:global(.flow--form-field)):has(.button) {\n    display: flex;\n    align-items: flex-start;\n    column-gap: var(--combine--input-button--spacing);\n\n    :global(.flow--form-field) {\n      flex-grow: 1;\n    }\n\n    // `<label>` is also the root element react-aria renders for Checkbox and\n    // Switch, so `Label`'s class would not match the same set of children.\n    // stylelint-disable-next-line selector-max-type -- see above\n    &:has(label) {\n      .button {\n        margin-top: calc(var(--line-height-s) + var(--form-control--spacing-y));\n      }\n    }\n  }\n\n  &:has(.text):has(.contextualHelpTriggerButton),\n  &:has(.text):has(.copyButton) {\n    display: inline-flex;\n    align-items: center;\n    column-gap: var(--combine--text-button--spacing);\n  }\n\n  &:has(> .text):has(> .icon) {\n    display: inline-flex;\n    align-items: center;\n    column-gap: var(--combine--icon-text--spacing);\n  }\n}\n\n@media (max-width: 550px) {\n  .combine:has(:global(.flow--form-field)):has(.button) {\n    flex-direction: column;\n    row-gap: var(--section--spacing);\n    align-items: stretch;\n\n    .button {\n      width: 100%;\n    }\n\n    // stylelint-disable-next-line selector-max-type -- see the `:has(label)` above\n    &:has(label) {\n      .button {\n        margin-top: 0;\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/ComboBox/ComboBox.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.module.mjs","names":[],"sources":["../../../../../../../src/components/ComboBox/ComboBox.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.comboBox {\n  .input {\n    order: 2;\n    display: grid;\n    grid-template-areas: \"input\";\n\n    input {\n      @include formControl.formControl();\n\n      grid-area: input;\n      padding-inline-end: calc(\n        var(--button--padding-icon-only) * 2 + var(--icon--size--s)\n      );\n    }\n\n    .toggle {\n      grid-area: input;\n      justify-self: end;\n      margin: var(--form-control--border-width);\n      padding: calc(\n        var(--button--padding-icon-only) - var(--form-control--border-width)\n      );\n\n      &:hover {\n        background-color: transparent;\n      }\n\n      &[data-pressed] {\n        background-color: transparent;\n      }\n    }\n  }\n\n  &:not([data-disabled=\"true\"]):hover {\n    input:not(:read-only),\n    .toggle:not([data-disabled=\"true\"]) {\n      background-color: var(--form-control--background-color--hover);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ComboBox.module.mjs","names":[],"sources":["../../../../../../../src/components/ComboBox/ComboBox.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.comboBox {\n  .input {\n    order: 2;\n    display: grid;\n    grid-template-areas: \"input\";\n\n    /* react-aria's Input — ComboBox passes no className, so its default\n       class is the handle. */\n    :global(.react-aria-Input) {\n      @include formControl.formControl();\n\n      grid-area: input;\n      padding-inline-end: calc(\n        var(--button--padding-icon-only) * 2 + var(--icon--size--s)\n      );\n    }\n\n    .toggle {\n      grid-area: input;\n      justify-self: end;\n      margin: var(--form-control--border-width);\n      padding: calc(\n        var(--button--padding-icon-only) - var(--form-control--border-width)\n      );\n\n      &:hover {\n        background-color: transparent;\n      }\n\n      &[data-pressed] {\n        background-color: transparent;\n      }\n    }\n  }\n\n  &:not([data-disabled=\"true\"]):hover {\n    :global(.react-aria-Input):not(:read-only),\n    .toggle:not([data-disabled=\"true\"]) {\n      background-color: var(--form-control--background-color--hover);\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/ContextMenu/ContextMenu.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.module.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.module.scss"],"sourcesContent":[".contextMenu {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--menu--item-to-item-spacing);\n  padding: var(--popover--padding--s);\n\n  > hr {\n    margin-block: var(--popover--spacing);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n}\n\n.section {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--menu--item-to-item-spacing);\n\n  &:has(:global(.flow--avatar)) {\n    align-items: center;\n    padding-top: var(--menu--item-to-item-spacing);\n  }\n}\n\n.popover {\n  max-width: fit-content;\n}\n"],"mappings":""}
+{"version":3,"file":"ContextMenu.module.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.module.scss"],"sourcesContent":[".contextMenu {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--menu--item-to-item-spacing);\n  padding: var(--popover--padding--s);\n\n  // A consumer-placed `Separator`. Its `flow--separator` class also covers the\n  // vertical `<div>` variant, which must not get this block margin.\n  // stylelint-disable-next-line selector-max-type -- see above\n  > hr {\n    margin-block: var(--popover--spacing);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n}\n\n.section {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--menu--item-to-item-spacing);\n\n  &:has(:global(.flow--avatar)) {\n    align-items: center;\n    padding-top: var(--menu--item-to-item-spacing);\n  }\n}\n\n.popover {\n  max-width: fit-content;\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.mjs

@@ -11,17 +11,20 @@ var DateRangeInput = (props) => {
 	const { isDisabled, ref } = props;
 	return /* @__PURE__ */ jsxs(Aria.Group, {
 		className: DateRangeInput_module_default.dateRangeInput,
-		children: [/* @__PURE__ */ jsxs("div", { children: [
-			/* @__PURE__ */ jsx(DateInput, {
-				slot: "start",
-				ref
-			}),
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				children: "–"
-			}),
-			/* @__PURE__ */ jsx(DateInput, { slot: "end" })
-		] }), /* @__PURE__ */ jsx(Button, {
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: DateRangeInput_module_default.inputs,
+			children: [
+				/* @__PURE__ */ jsx(DateInput, {
+					slot: "start",
+					ref
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "–"
+				}),
+				/* @__PURE__ */ jsx(DateInput, { slot: "end" })
+			]
+		}), /* @__PURE__ */ jsx(Button, {
 			variant: "plain",
 			color: "secondary",
 			isDisabled,

package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.mjs","names":[],"sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type React from \"react\";\nimport styles from \"./DateRangeInput.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconDate } from \"@/components/Icon/components/icons\";\nimport DateInput from \"@/components/DateInput\";\n\nexport interface DateInputProps {\n  isDisabled?: boolean;\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\nexport const DateRangeInput: FC<DateInputProps> = (props) => {\n  const { isDisabled, ref } = props;\n\n  return (\n    <Aria.Group className={styles.dateRangeInput}>\n      <div>\n        <DateInput slot=\"start\" ref={ref} />\n        <span aria-hidden=\"true\">–</span>\n        <DateInput slot=\"end\" />\n      </div>\n      <Button variant=\"plain\" color=\"secondary\" isDisabled={isDisabled}>\n        <IconDate />\n      </Button>\n    </Aria.Group>\n  );\n};\n\nexport default DateRangeInput;\n"],"mappings":";;;;;;;;;AAaA,IAAa,kBAAsC,UAAU;CAC3D,MAAM,EAAE,YAAY,QAAQ;CAE5B,OACE,qBAAC,KAAK,OAAN;EAAY,WAAW,8BAAO;EAA9B,UAAA,CACE,qBAAC,OAAD,EAAA,UAAA;GACE,oBAAC,WAAD;IAAW,MAAK;IAAa;GAAM,CAAA;GACnC,oBAAC,QAAD;IAAM,eAAY;IAAO,UAAA;GAAO,CAAA;GAChC,oBAAC,WAAD,EAAW,MAAK,MAAO,CAAA;EACpB,EAAA,CAAA,GACL,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAwB;GACpD,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA,CACE;;AAEhB"}
+{"version":3,"file":"DateRangeInput.mjs","names":[],"sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type React from \"react\";\nimport styles from \"./DateRangeInput.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconDate } from \"@/components/Icon/components/icons\";\nimport DateInput from \"@/components/DateInput\";\n\nexport interface DateInputProps {\n  isDisabled?: boolean;\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\nexport const DateRangeInput: FC<DateInputProps> = (props) => {\n  const { isDisabled, ref } = props;\n\n  return (\n    <Aria.Group className={styles.dateRangeInput}>\n      <div className={styles.inputs}>\n        <DateInput slot=\"start\" ref={ref} />\n        <span aria-hidden=\"true\">–</span>\n        <DateInput slot=\"end\" />\n      </div>\n      <Button variant=\"plain\" color=\"secondary\" isDisabled={isDisabled}>\n        <IconDate />\n      </Button>\n    </Aria.Group>\n  );\n};\n\nexport default DateRangeInput;\n"],"mappings":";;;;;;;;;AAaA,IAAa,kBAAsC,UAAU;CAC3D,MAAM,EAAE,YAAY,QAAQ;CAE5B,OACE,qBAAC,KAAK,OAAN;EAAY,WAAW,8BAAO;EAA9B,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,8BAAO;GAAvB,UAAA;IACE,oBAAC,WAAD;KAAW,MAAK;KAAa;IAAM,CAAA;IACnC,oBAAC,QAAD;KAAM,eAAY;KAAO,UAAA;IAAO,CAAA;IAChC,oBAAC,WAAD,EAAW,MAAK,MAAO,CAAA;GACpB;EACL,CAAA,GAAA,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAwB;GACpD,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA,CACE;;AAEhB"}

package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.mjs

@@ -3,11 +3,13 @@
 //#region src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.scss
 var dateRangeInput = "flow--date-range-picker--date-range-input";
 var readonly = "flow--date-range-picker--date-range-input--readonly";
+var inputs = "flow--date-range-picker--date-range-input--inputs";
 var DateRangeInput_module_default = {
 	dateRangeInput,
-	readonly
+	readonly,
+	inputs
 };
 //#endregion
-export { dateRangeInput, DateRangeInput_module_default as default, readonly };
+export { dateRangeInput, DateRangeInput_module_default as default, inputs, readonly };
 
 //# sourceMappingURL=DateRangeInput.module.mjs.map

package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.module.mjs","names":[],"sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.dateRangeInput {\n  display: flex;\n  justify-content: space-between;\n\n  @include formControl.formControl();\n\n  > div {\n    display: flex;\n    align-items: center;\n  }\n\n  :global(.react-aria-DateInput) {\n    display: flex;\n  }\n\n  :global(.react-aria-DateSegment) {\n    border-radius: var(--date-picker--date-segment-corner-radius);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    &:focus {\n      background: var(--date-picker--date-segment-background-color--focused);\n      outline: none;\n    }\n  }\n\n  > span {\n    display: flex;\n    align-items: center;\n  }\n\n  :global(.react-aria-DateInput):first-of-type {\n    padding-inline-end: var(--size-px--xxs);\n  }\n\n  :global(.react-aria-DateInput):last-of-type {\n    padding-inline-start: var(--size-px--xxs);\n  }\n\n  :global(.flow--button) {\n    margin-block: calc((var(--form-control--padding-y) - 1px) * -1);\n    margin-inline-end: calc(var(--form-control--padding-x) * -1);\n    padding: calc(\n      var(--button--padding-icon-only) - var(--form-control--border-width)\n    );\n    outline-offset: calc(var(--size-px--xxxs) * -1);\n  }\n\n  [data-placeholder=\"true\"] ~ * {\n    color: var(--form-control--placeholder-color--default);\n  }\n\n  [data-disabled=\"true\"] ~ * {\n    color: var(--form-control--placeholder-color--disabled);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"DateRangeInput.module.mjs","names":[],"sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.dateRangeInput {\n  display: flex;\n  justify-content: space-between;\n\n  @include formControl.formControl();\n\n  > .inputs {\n    display: flex;\n    align-items: center;\n  }\n\n  :global(.react-aria-DateInput) {\n    display: flex;\n  }\n\n  :global(.react-aria-DateSegment) {\n    border-radius: var(--date-picker--date-segment-corner-radius);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    &:focus {\n      background: var(--date-picker--date-segment-background-color--focused);\n      outline: none;\n    }\n  }\n\n  :global(.react-aria-DateInput):first-of-type {\n    padding-inline-end: var(--size-px--xxs);\n  }\n\n  :global(.react-aria-DateInput):last-of-type {\n    padding-inline-start: var(--size-px--xxs);\n  }\n\n  :global(.flow--button) {\n    margin-block: calc((var(--form-control--padding-y) - 1px) * -1);\n    margin-inline-end: calc(var(--form-control--padding-x) * -1);\n    padding: calc(\n      var(--button--padding-icon-only) - var(--form-control--border-width)\n    );\n    outline-offset: calc(var(--size-px--xxxs) * -1);\n  }\n\n  [data-placeholder=\"true\"] ~ * {\n    color: var(--form-control--placeholder-color--default);\n  }\n\n  [data-disabled=\"true\"] ~ * {\n    color: var(--form-control--placeholder-color--disabled);\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/DonutChart/DonutChart.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.module.mjs","names":[],"sources":["../../../../../../../src/components/DonutChart/DonutChart.module.scss"],"sourcesContent":[".donutChart {\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  flex-shrink: 0;\n\n  .border {\n    stroke: var(--donut-chart--border-color);\n  }\n\n  .background {\n    stroke: var(--donut-chart--background-color);\n  }\n\n  .value {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    overflow-wrap: anywhere;\n    padding: var(--donut-chart--padding--m);\n  }\n\n  &.size-l {\n    .value {\n      font-size: var(--font-size-heading--xl);\n      padding: var(--donut-chart--padding--l);\n\n      small {\n        font-size: var(--font-size-heading--l);\n      }\n    }\n  }\n\n  /* Variants */\n  @mixin status($status) {\n    &.#{$status} {\n      .fill {\n        stroke: var(--donut-chart--#{$status}-fill-background-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(success);\n  @include status(danger);\n  @include status(warning);\n}\n\n.donutChartContainer {\n  display: flex;\n  gap: var(--donut-chart--spacing-y) var(--donut-chart--spacing-x);\n  align-items: center;\n\n  &.bottom {\n    flex-direction: column;\n  }\n\n  &.top {\n    flex-direction: column-reverse;\n  }\n\n  &.right {\n    .legend {\n      justify-content: start;\n    }\n  }\n\n  &.left {\n    flex-direction: row-reverse;\n\n    .legend {\n      justify-content: start;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"DonutChart.module.mjs","names":[],"sources":["../../../../../../../src/components/DonutChart/DonutChart.module.scss"],"sourcesContent":[".donutChart {\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  flex-shrink: 0;\n\n  .border {\n    stroke: var(--donut-chart--border-color);\n  }\n\n  .background {\n    stroke: var(--donut-chart--background-color);\n  }\n\n  .value {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    overflow-wrap: anywhere;\n    padding: var(--donut-chart--padding--m);\n  }\n\n  &.size-l {\n    .value {\n      font-size: var(--font-size-heading--xl);\n      padding: var(--donut-chart--padding--l);\n\n      // Raw consumer markup inside the value slot — nothing to class.\n      // stylelint-disable-next-line selector-max-type -- consumer markup\n      small {\n        font-size: var(--font-size-heading--l);\n      }\n    }\n  }\n\n  /* Variants */\n  @mixin status($status) {\n    &.#{$status} {\n      .fill {\n        stroke: var(--donut-chart--#{$status}-fill-background-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(success);\n  @include status(danger);\n  @include status(warning);\n}\n\n.donutChartContainer {\n  display: flex;\n  gap: var(--donut-chart--spacing-y) var(--donut-chart--spacing-x);\n  align-items: center;\n\n  &.bottom {\n    flex-direction: column;\n  }\n\n  &.top {\n    flex-direction: column-reverse;\n  }\n\n  &.right {\n    .legend {\n      justify-content: start;\n    }\n  }\n\n  &.left {\n    flex-direction: row-reverse;\n\n    .legend {\n      justify-content: start;\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.mjs

@@ -14,7 +14,7 @@ var HeaderNavigation = (props) => {
 	const rootClassName = clsx(HeaderNavigation_module_default.headerNavigation, isAlphaColor(color) && HeaderNavigation_module_default[color], className);
 	const propsContext = {
 		Link: {
-			wrapWith: /* @__PURE__ */ jsx("li", {}),
+			wrapWith: /* @__PURE__ */ jsx("li", { className: HeaderNavigation_module_default.item }),
 			className: HeaderNavigation_module_default.link,
 			unstyled: true,
 			children: dynamic((props) => /* @__PURE__ */ jsx(Text, {
@@ -26,17 +26,20 @@ var HeaderNavigation = (props) => {
 			className: HeaderNavigation_module_default.button,
 			color: isAlphaColor(color) ? color : "secondary",
 			variant: "plain",
-			wrapWith: /* @__PURE__ */ jsx("li", {})
+			wrapWith: /* @__PURE__ */ jsx("li", { className: HeaderNavigation_module_default.item })
 		}
 	};
 	return /* @__PURE__ */ jsx("nav", {
 		className: rootClassName,
 		role: "navigation",
 		...rest,
-		children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(PropsContextProvider, {
-			props: propsContext,
-			children
-		}) })
+		children: /* @__PURE__ */ jsx("ul", {
+			className: HeaderNavigation_module_default.list,
+			children: /* @__PURE__ */ jsx(PropsContextProvider, {
+				props: propsContext,
+				children
+			})
+		})
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigation.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n  extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n  /** The color of the header navigation. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n  const { children, className, color = \"default\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.headerNavigation,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((props) => (\n        <Text emulateBoldWidth>{props.children}</Text>\n      )),\n    },\n    Button: {\n      className: styles.button,\n      color: isAlphaColor(color) ? color : \"secondary\",\n      variant: \"plain\",\n      wrapWith: <li />,\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest}>\n      <ul>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n    </nav>\n  );\n};\n\nexport default HeaderNavigation;\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpB,gCAAO,kBACP,aAAa,KAAK,KAAK,gCAAO,QAC9B,SACF;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,UAAU,oBAAC,MAAD,CAAK,CAAA;GACf,WAAW,gCAAO;GAClB,UAAU;GACV,UAAU,SAAS,UACjB,oBAAC,MAAD;IAAM,kBAAA;IAAkB,UAAA,MAAM;GAAe,CAAA,CAC9C;EACH;EACA,QAAQ;GACN,WAAW,gCAAO;GAClB,OAAO,aAAa,KAAK,IAAI,QAAQ;GACrC,SAAS;GACT,UAAU,oBAAC,MAAD,CAAK,CAAA;EACjB;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EACnD,UAAA,oBAAC,MAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA,EACpB,CAAA;CACD,CAAA;AAET"}
+{"version":3,"file":"HeaderNavigation.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n  extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n  /** The color of the header navigation. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n  const { children, className, color = \"default\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.headerNavigation,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li className={styles.item} />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((props) => (\n        <Text emulateBoldWidth>{props.children}</Text>\n      )),\n    },\n    Button: {\n      className: styles.button,\n      color: isAlphaColor(color) ? color : \"secondary\",\n      variant: \"plain\",\n      wrapWith: <li className={styles.item} />,\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest}>\n      <ul className={styles.list}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n    </nav>\n  );\n};\n\nexport default HeaderNavigation;\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpB,gCAAO,kBACP,aAAa,KAAK,KAAK,gCAAO,QAC9B,SACF;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,UAAU,oBAAC,MAAD,EAAI,WAAW,gCAAO,KAAO,CAAA;GACvC,WAAW,gCAAO;GAClB,UAAU;GACV,UAAU,SAAS,UACjB,oBAAC,MAAD;IAAM,kBAAA;IAAkB,UAAA,MAAM;GAAe,CAAA,CAC9C;EACH;EACA,QAAQ;GACN,WAAW,gCAAO;GAClB,OAAO,aAAa,KAAK,IAAI,QAAQ;GACrC,SAAS;GACT,UAAU,oBAAC,MAAD,EAAI,WAAW,gCAAO,KAAO,CAAA;EACzC;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EACnD,UAAA,oBAAC,MAAD;GAAI,WAAW,gCAAO;GACpB,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA;CACD,CAAA;AAET"}

package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.module.mjs

@@ -2,12 +2,16 @@
 /* */
 //#region src/components/HeaderNavigation/HeaderNavigation.module.scss
 var headerNavigation = "flow--header-navigation";
+var list = "flow--header-navigation--list";
+var item = "flow--header-navigation--item";
 var link = "flow--header-navigation--link";
 var button = "flow--header-navigation--button";
 var dark = "flow--header-navigation--dark";
 var light = "flow--header-navigation--light";
 var HeaderNavigation_module_default = {
 	headerNavigation,
+	list,
+	item,
 	link,
 	button,
 	dark,
@@ -16,6 +20,6 @@ var HeaderNavigation_module_default = {
 	"light-static": "flow--header-navigation--light-static"
 };
 //#endregion
-export { button, dark, HeaderNavigation_module_default as default, headerNavigation, light, link };
+export { button, dark, HeaderNavigation_module_default as default, headerNavigation, item, light, link, list };
 
 //# sourceMappingURL=HeaderNavigation.module.mjs.map

package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.headerNavigation {\n  ul {\n    display: flex;\n    flex-flow: row wrap;\n    align-items: center;\n    gap: var(--header-navigation--spacing);\n  }\n\n  li {\n    list-style: none;\n  }\n\n  .link {\n    padding: var(--header-navigation--padding);\n    border-radius: var(--header-navigation--corner-radius);\n    color: var(--header-navigation--color);\n    position: relative;\n\n    @include focus.focus;\n\n    &:hover:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--hover);\n    }\n\n    &[data-pressed]:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--pressed);\n    }\n\n    &[aria-current] {\n      font-weight: var(--header-navigation--font-weight-current);\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        inset-inline: 0;\n        background-color: var(--header-navigation--color);\n        height: var(--header-navigation--underline-width-current);\n      }\n    }\n  }\n\n  .button {\n    color: var(--header-navigation--color);\n    border-radius: var(--header-navigation--corner-radius-round);\n\n    &:hover,\n    &[data-pressed] {\n      color: var(--header-navigation--color);\n    }\n  }\n\n  /* Color */\n\n  @mixin color($color) {\n    &.#{$color} {\n      .link,\n      .button {\n        color: var(--header-navigation--color-#{$color});\n\n        &:hover:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--hover\n          );\n        }\n\n        &[data-pressed]:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--pressed\n          );\n        }\n\n        &[aria-current] {\n          &::after {\n            background-color: var(--header-navigation--color-#{$color});\n          }\n        }\n      }\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n}\n"],"mappings":""}
+{"version":3,"file":"HeaderNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.headerNavigation {\n  .list {\n    display: flex;\n    flex-flow: row wrap;\n    align-items: center;\n    gap: var(--header-navigation--spacing);\n  }\n\n  .item {\n    list-style: none;\n  }\n\n  .link {\n    padding: var(--header-navigation--padding);\n    border-radius: var(--header-navigation--corner-radius);\n    color: var(--header-navigation--color);\n    position: relative;\n\n    @include focus.focus;\n\n    &:hover:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--hover);\n    }\n\n    &[data-pressed]:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--pressed);\n    }\n\n    &[aria-current] {\n      font-weight: var(--header-navigation--font-weight-current);\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        inset-inline: 0;\n        background-color: var(--header-navigation--color);\n        height: var(--header-navigation--underline-width-current);\n      }\n    }\n  }\n\n  .button {\n    color: var(--header-navigation--color);\n    border-radius: var(--header-navigation--corner-radius-round);\n\n    &:hover,\n    &[data-pressed] {\n      color: var(--header-navigation--color);\n    }\n  }\n\n  /* Color */\n\n  @mixin color($color) {\n    &.#{$color} {\n      .link,\n      .button {\n        color: var(--header-navigation--color-#{$color});\n\n        &:hover:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--hover\n          );\n        }\n\n        &[data-pressed]:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--pressed\n          );\n        }\n\n        &[aria-current] {\n          &::after {\n            background-color: var(--header-navigation--color-#{$color});\n          }\n        }\n      }\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Heading/Heading.mjs

@@ -22,7 +22,7 @@ var sizeByLevel = {
 /** @flr-generate all */
 var Heading = flowComponent("Heading", (props) => {
 	const { children, className, level = 2, color = "default", wrap, size, ref, elementType, ...rest } = props;
-	const rootClassName = clsx(Heading_module_default.heading, size && Heading_module_default[`size-${size}`], color !== "default" && Heading_module_default[color], wrap && Heading_module_default[`wrap-${wrap}`], elementType && styleClassname(Heading_module_default, `h${level}`), className);
+	const rootClassName = clsx(Heading_module_default.heading, size && Heading_module_default[`size-${size}`], color !== "default" && Heading_module_default[color], wrap && Heading_module_default[`wrap-${wrap}`], styleClassname(Heading_module_default, `h${level}`), className);
 	const Element = elementType ?? Aria.Heading;
 	const effectiveSize = size ?? sizeByLevel[level] ?? "xs";
 	const buttonSize = effectiveSize === "xl" || effectiveSize === "xxl" ? "m" : "s";

package/dist/js/packages/components/src/components/Heading/Heading.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n  extends\n    Aria.HeadingProps,\n    FlowComponentProps,\n    PropsWithElementType<\"span\" | \"p\"> {\n  /** The font size of the heading. */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n  /** The color of the heading. @default \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n  /** The text-wrap property of the text. @default undefined */\n  wrap?: \"wrap\" | \"balance\";\n}\n\n/**\n * The font size each heading level renders at — the TypeScript half of the\n * level-based `--font-size` rules in Heading.module.scss. Levels 4 to 6 fall\n * through to the `xs` default.\n */\nconst sizeByLevel: Record<number, NonNullable<HeadingProps[\"size\"]>> = {\n  1: \"xl\",\n  2: \"m\",\n  3: \"s\",\n};\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n  const {\n    children,\n    className,\n    level = 2,\n    color = \"default\",\n    wrap,\n    size,\n    ref,\n    elementType,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[`size-${size}`],\n    color !== \"default\" && styles[color],\n    wrap && styles[`wrap-${wrap}`],\n    elementType && styleClassname(styles, `h${level}`),\n    className,\n  );\n\n  const Element = elementType ?? Aria.Heading;\n\n  const effectiveSize = size ?? sizeByLevel[level] ?? \"xs\";\n  const buttonSize =\n    effectiveSize === \"xl\" || effectiveSize === \"xxl\" ? \"m\" : \"s\";\n\n  const propsContext: PropsContext = {\n    Icon: {\n      \"aria-hidden\": true,\n      className: styles.icon,\n    },\n    AlertBadge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Badge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Button: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    CopyButton: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      Button: {\n        tunnel: null,\n      },\n    },\n    AlertText: {\n      Icon: {\n        className: styles.icon,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element className={rootClassName} {...rest} ref={ref} level={level}>\n        <span className={styles.headingText}>{children}</span>\n        <span className={styles.headingContent}>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\" />\n        </span>\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;AA6BA,IAAM,cAAiE;CACrE,GAAG;CACH,GAAG;CACH,GAAG;AACL;;AAGA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,uBAAO,SACP,QAAQ,uBAAO,QAAQ,SACvB,UAAU,aAAa,uBAAO,QAC9B,QAAQ,uBAAO,QAAQ,SACvB,eAAe,eAAe,wBAAQ,IAAI,OAAO,GACjD,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,gBAAgB,QAAQ,YAAY,UAAU;CACpD,MAAM,aACJ,kBAAkB,QAAQ,kBAAkB,QAAQ,MAAM;CAE5D,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAW,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAW,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GAAS,WAAW;GAAe,GAAI;GAAW;GAAY;GAA9D,UAAA,CACE,oBAAC,QAAD;IAAM,WAAW,uBAAO;IAAc;GAAe,CAAA,GACrD,oBAAC,QAAD;IAAM,WAAW,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;IAAW,CAAA;GAC5D,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Heading.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n  extends\n    Aria.HeadingProps,\n    FlowComponentProps,\n    PropsWithElementType<\"span\" | \"p\"> {\n  /** The font size of the heading. */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n  /** The color of the heading. @default \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n  /** The text-wrap property of the text. @default undefined */\n  wrap?: \"wrap\" | \"balance\";\n}\n\n/**\n * The font size each heading level renders at — the TypeScript half of the\n * level-based `--font-size` rules in Heading.module.scss. Levels 4 to 6 fall\n * through to the `xs` default.\n */\nconst sizeByLevel: Record<number, NonNullable<HeadingProps[\"size\"]>> = {\n  1: \"xl\",\n  2: \"m\",\n  3: \"s\",\n};\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n  const {\n    children,\n    className,\n    level = 2,\n    color = \"default\",\n    wrap,\n    size,\n    ref,\n    elementType,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[`size-${size}`],\n    color !== \"default\" && styles[color],\n    wrap && styles[`wrap-${wrap}`],\n    // The level class carries the font size. Emitted for every heading — not\n    // just the `elementType` ones — so the stylesheet can select on the class\n    // instead of the h1–h6 element react-aria renders without one.\n    styleClassname(styles, `h${level}`),\n    className,\n  );\n\n  const Element = elementType ?? Aria.Heading;\n\n  const effectiveSize = size ?? sizeByLevel[level] ?? \"xs\";\n  const buttonSize =\n    effectiveSize === \"xl\" || effectiveSize === \"xxl\" ? \"m\" : \"s\";\n\n  const propsContext: PropsContext = {\n    Icon: {\n      \"aria-hidden\": true,\n      className: styles.icon,\n    },\n    AlertBadge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Badge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Button: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    CopyButton: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      Button: {\n        tunnel: null,\n      },\n    },\n    AlertText: {\n      Icon: {\n        className: styles.icon,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element className={rootClassName} {...rest} ref={ref} level={level}>\n        <span className={styles.headingText}>{children}</span>\n        <span className={styles.headingContent}>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\" />\n        </span>\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;AA6BA,IAAM,cAAiE;CACrE,GAAG;CACH,GAAG;CACH,GAAG;AACL;;AAGA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,uBAAO,SACP,QAAQ,uBAAO,QAAQ,SACvB,UAAU,aAAa,uBAAO,QAC9B,QAAQ,uBAAO,QAAQ,SAIvB,eAAe,wBAAQ,IAAI,OAAO,GAClC,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,gBAAgB,QAAQ,YAAY,UAAU;CACpD,MAAM,aACJ,kBAAkB,QAAQ,kBAAkB,QAAQ,MAAM;CAE5D,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAW,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAW,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GAAS,WAAW;GAAe,GAAI;GAAW;GAAY;GAA9D,UAAA,CACE,oBAAC,QAAD;IAAM,WAAW,uBAAO;IAAc;GAAe,CAAA,GACrD,oBAAC,QAAD;IAAM,WAAW,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;IAAW,CAAA;GAC5D,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}

package/dist/js/packages/components/src/components/Heading/Heading.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n  color: var(--heading--color);\n  font-size: var(--font-size);\n  font-weight: var(--heading--font-weight);\n  text-wrap-style: pretty;\n\n  --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n  @mixin color($color) {\n    &.#{$color} {\n      color: var(--heading--color-#{$color});\n    }\n  }\n\n  @include color(\"danger\");\n  @include color(\"unavailable\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  .headingText {\n    .icon {\n      height: var(--heading-line-height);\n      width: var(--heading-line-height);\n      vertical-align: bottom;\n      display: inline-block;\n      margin-inline-end: var(--heading--icon-to-text-spacing);\n    }\n  }\n\n  .headingContent {\n    vertical-align: bottom;\n    display: inline-flex;\n    margin-inline-start: var(--heading--icon-to-text-spacing);\n    min-height: var(--heading-line-height);\n    align-items: center;\n    gap: var(--heading--icon-to-text-spacing);\n    flex-wrap: wrap;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &:where(h1),\n  &:where(.h1) {\n    --font-size: var(--font-size-heading--xl);\n  }\n\n  &:where(h2),\n  &:where(.h2) {\n    --font-size: var(--font-size-heading--m);\n  }\n\n  &:where(h3),\n  &:where(.h3) {\n    --font-size: var(--font-size-heading--s);\n  }\n\n  &:where(h4),\n  &:where(.h4),\n  &:where(h5),\n  &:where(.h5),\n  &:where(h6),\n  &:where(.h6) {\n    --font-size: var(--font-size-heading--xs);\n  }\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      --font-size: var(--font-size-heading--#{$size});\n    }\n  }\n\n  @include size(\"xs\");\n  @include size(\"s\");\n  @include size(\"m\");\n  @include size(\"l\");\n  @include size(\"xl\");\n  @include size(\"xxl\");\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n}\n\n@media (max-width: 768px) {\n  .heading {\n    &:where(h1),\n    &.size-xl {\n      --font-size: var(--font-size-heading--l);\n    }\n\n    &.size-l {\n      --font-size: var(--font-size-heading--m);\n    }\n\n    &:where(h2),\n    &.size-m {\n      --font-size: var(--font-size-heading--s);\n    }\n\n    &:where(h3),\n    &.size-s {\n      --font-size: var(--font-size-heading--xs);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n  color: var(--heading--color);\n  font-size: var(--font-size);\n  font-weight: var(--heading--font-weight);\n  text-wrap-style: pretty;\n\n  --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n  @mixin color($color) {\n    &.#{$color} {\n      color: var(--heading--color-#{$color});\n    }\n  }\n\n  @include color(\"danger\");\n  @include color(\"unavailable\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  .headingText {\n    .icon {\n      height: var(--heading-line-height);\n      width: var(--heading-line-height);\n      vertical-align: bottom;\n      display: inline-block;\n      margin-inline-end: var(--heading--icon-to-text-spacing);\n    }\n  }\n\n  .headingContent {\n    vertical-align: bottom;\n    display: inline-flex;\n    margin-inline-start: var(--heading--icon-to-text-spacing);\n    min-height: var(--heading-line-height);\n    align-items: center;\n    gap: var(--heading--icon-to-text-spacing);\n    flex-wrap: wrap;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &:where(.h1) {\n    --font-size: var(--font-size-heading--xl);\n  }\n\n  &:where(.h2) {\n    --font-size: var(--font-size-heading--m);\n  }\n\n  &:where(.h3) {\n    --font-size: var(--font-size-heading--s);\n  }\n\n  &:where(.h4),\n  &:where(.h5),\n  &:where(.h6) {\n    --font-size: var(--font-size-heading--xs);\n  }\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      --font-size: var(--font-size-heading--#{$size});\n    }\n  }\n\n  @include size(\"xs\");\n  @include size(\"s\");\n  @include size(\"m\");\n  @include size(\"l\");\n  @include size(\"xl\");\n  @include size(\"xxl\");\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n}\n\n@media (max-width: 768px) {\n  .heading {\n    &:where(.h1),\n    &.size-xl {\n      --font-size: var(--font-size-heading--l);\n    }\n\n    &.size-l {\n      --font-size: var(--font-size-heading--m);\n    }\n\n    &:where(.h2),\n    &.size-m {\n      --font-size: var(--font-size-heading--s);\n    }\n\n    &:where(.h3),\n    &.size-s {\n      --font-size: var(--font-size-heading--xs);\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/LayoutCard/LayoutCard.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutCard.module.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.layoutCard {\n  @include scrollbar.scrollbar;\n\n  align-self: normal;\n  background-color: var(--layout-card--background-color);\n  box-shadow: var(--layout-card--box-shadow);\n  border-radius: var(--layout-card--corner-radius);\n  padding: var(--layout-card--padding);\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border: var(--layout-card--border-width) var(--layout-card--border-style)\n    var(--layout-card--border-color);\n\n  > .tabNavigation {\n    margin-top: calc(var(--layout-card--padding) * -1);\n    margin-inline: calc(var(--layout-card--padding) * -1);\n    margin-bottom: var(--layout-card--padding);\n    border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n\n    li:first-child :global(.flow--tab-navigation--link) {\n      border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n\n    :global(.flow--tab-navigation--more-button) {\n      border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n  }\n\n  &:has(> .accentBox:only-child) {\n    padding: 0;\n    border: none;\n\n    .accentBox {\n      padding: var(--layout-card--padding);\n      border-radius: calc(var(--layout-card--corner-radius) - 1px);\n      flex-grow: 1;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .layoutCard {\n    padding: var(--layout-card--padding-mobile);\n\n    > .tabNavigation {\n      margin-top: calc(var(--layout-card--padding-mobile) * -1);\n      margin-inline: calc(var(--layout-card--padding-mobile) * -1);\n      margin-bottom: var(--layout-card--padding-mobile);\n    }\n\n    &:has(> .accentBox:only-child) {\n      padding: 0;\n\n      .accentBox {\n        padding: var(--layout-card--padding-mobile);\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"LayoutCard.module.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.layoutCard {\n  @include scrollbar.scrollbar;\n\n  align-self: normal;\n  background-color: var(--layout-card--background-color);\n  box-shadow: var(--layout-card--box-shadow);\n  border-radius: var(--layout-card--corner-radius);\n  padding: var(--layout-card--padding);\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border: var(--layout-card--border-width) var(--layout-card--border-style)\n    var(--layout-card--border-color);\n\n  > .tabNavigation {\n    margin-top: calc(var(--layout-card--padding) * -1);\n    margin-inline: calc(var(--layout-card--padding) * -1);\n    margin-bottom: var(--layout-card--padding);\n    border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n\n    :global(.flow--tab-navigation--item):first-child\n      :global(.flow--tab-navigation--link) {\n      border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n\n    :global(.flow--tab-navigation--more-button) {\n      border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n  }\n\n  &:has(> .accentBox:only-child) {\n    padding: 0;\n    border: none;\n\n    .accentBox {\n      padding: var(--layout-card--padding);\n      border-radius: calc(var(--layout-card--corner-radius) - 1px);\n      flex-grow: 1;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .layoutCard {\n    padding: var(--layout-card--padding-mobile);\n\n    > .tabNavigation {\n      margin-top: calc(var(--layout-card--padding-mobile) * -1);\n      margin-inline: calc(var(--layout-card--padding-mobile) * -1);\n      margin-bottom: var(--layout-card--padding-mobile);\n    }\n\n    &:has(> .accentBox:only-child) {\n      padding: 0;\n\n      .accentBox {\n        padding: var(--layout-card--padding-mobile);\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/LightBox/LightBox.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LightBox.module.mjs","names":[],"sources":["../../../../../../../src/components/LightBox/LightBox.module.scss"],"sourcesContent":[".lightBox {\n  > div {\n    position: fixed;\n    height: var(--visual-viewport-height);\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    justify-content: center;\n    align-items: center;\n\n    > div {\n      display: flex;\n      justify-content: center;\n      width: inherit;\n      max-height: var(--visual-viewport-height);\n    }\n  }\n\n  [role=\"dialog\"] {\n    outline: none;\n    display: flex;\n    justify-content: center;\n    max-width: var(--light-box--max-width);\n    max-height: var(--light-box--max-height);\n  }\n\n  .content {\n    overflow: auto;\n\n    > img {\n      width: 100%;\n    }\n  }\n\n  &.fitScreen {\n    .content {\n      > * {\n        max-height: var(--light-box--max-height);\n      }\n    }\n  }\n\n  .actions,\n  .actionGroup {\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n  }\n\n  .actions {\n    row-gap: var(--light-box--spacing);\n    padding-inline-start: var(--light-box--spacing);\n  }\n\n  .gallery {\n    width: var(--light-box--max-width);\n  }\n\n  &:has(.gallery) {\n    .actions {\n      display: none;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .lightBox {\n    [role=\"dialog\"] {\n      max-width: var(--light-box--max-width-mobile);\n      max-height: var(--light-box--max-height-mobile);\n    }\n\n    &.fitScreen {\n      .content {\n        > * {\n          max-height: var(--light-box--max-height-mobile);\n        }\n      }\n    }\n\n    .gallery {\n      width: var(--light-box--max-width-mobile);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"LightBox.module.mjs","names":[],"sources":["../../../../../../../src/components/LightBox/LightBox.module.scss"],"sourcesContent":[".lightBox {\n  /* Overlay.module.scss lays the viewport out. */\n  > :global(.flow--overlay--viewport) {\n    /* react-aria's own modal wrapper — no className from Flow, so its\n       default `react-aria-Modal` class is the handle. */\n    > :global(.react-aria-Modal) {\n      display: flex;\n      justify-content: center;\n      width: inherit;\n      max-height: var(--visual-viewport-height);\n    }\n  }\n\n  [role=\"dialog\"] {\n    outline: none;\n    display: flex;\n    justify-content: center;\n    max-width: var(--light-box--max-width);\n    max-height: var(--light-box--max-height);\n  }\n\n  .content {\n    overflow: auto;\n\n    // The image is a consumer child — Flow `Image` or a bare `<img>`.\n    // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n    > img {\n      width: 100%;\n    }\n  }\n\n  &.fitScreen {\n    .content {\n      > * {\n        max-height: var(--light-box--max-height);\n      }\n    }\n  }\n\n  .actions,\n  .actionGroup {\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n  }\n\n  .actions {\n    row-gap: var(--light-box--spacing);\n    padding-inline-start: var(--light-box--spacing);\n  }\n\n  .gallery {\n    width: var(--light-box--max-width);\n  }\n\n  &:has(.gallery) {\n    .actions {\n      display: none;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .lightBox {\n    [role=\"dialog\"] {\n      max-width: var(--light-box--max-width-mobile);\n      max-height: var(--light-box--max-height-mobile);\n    }\n\n    &.fitScreen {\n      .content {\n        > * {\n          max-height: var(--light-box--max-height-mobile);\n        }\n      }\n    }\n\n    .gallery {\n      width: var(--light-box--max-width-mobile);\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Header/components/SearchField/SearchField.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.module.scss"],"sourcesContent":[".searchField {\n  max-width: 500px;\n  margin-inline-start: auto;\n  flex-grow: 1;\n\n  input {\n    width: 200px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.module.scss"],"sourcesContent":[".searchField {\n  max-width: 500px;\n  margin-inline-start: auto;\n  flex-grow: 1;\n\n  // The list's search field can be swapped out by the consumer's\n  // `search.render`, so this has to match whatever input that renders.\n  // stylelint-disable-next-line selector-max-type -- replaceable field\n  input {\n    width: 200px;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n  position: relative;\n\n  /* The link overlay and the interactive content lifted above it (see .link\n     below) stack against each other only — never against anything outside the\n     item. */\n  isolation: isolate;\n  cursor: default;\n  background-color: var(--list-item--background-color--default);\n  transition-property: background-color;\n  transition-duration: var(--transition--duration--default);\n\n  @include focus.focus;\n\n  &.item {\n    outline-offset: calc(var(--size-px--xs) * -1);\n    box-shadow: none;\n  }\n\n  &:where(.isSelected) {\n    background-color: var(--list-item--background-color--pressed);\n  }\n\n  &:not(:last-child) {\n    border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n      var(--list-item--border-color);\n  }\n\n  &[data-href] {\n    cursor: pointer;\n  }\n\n  /*\n   * The bottom content carries its own interactive elements, so hovering it\n   * must not highlight the whole item. `.bottomContent` is defined here and\n   * applied by ListItemViewContent, so the class name stays type-checked\n   * instead of naming ListItemView's generated class from the outside.\n   */\n  &:where(.hasAction):not(:has(.bottomContent:hover)) {\n    &:where(:not(.isSelected)) {\n      &:hover {\n        background-color: var(--list-item--background-color--hover);\n      }\n    }\n\n    &[data-pressed] {\n      background-color: var(--list-item--background-color--pressed);\n    }\n  }\n\n  :global(.flow--avatar) {\n    transition-property: filter;\n    transition-duration: var(--transition--duration--default);\n  }\n\n  /* Elements */\n\n  /*\n   * Covers the whole item so a right-click anywhere on it hits a real link.\n   * Interactive content is lifted back above the overlay, so buttons, context\n   * menus and checkboxes keep receiving their own clicks.\n   */\n  .link {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  &:has(.link) {\n    :where(\n      a,\n      button,\n      input,\n      label,\n      select,\n      summary,\n      textarea,\n      [role=\"button\"],\n      [role=\"checkbox\"],\n      [role=\"link\"],\n      [role=\"switch\"],\n      [tabindex]\n    ):not(.link) {\n      position: relative;\n      z-index: 2;\n    }\n\n    /*\n     * The bottom slot carries arbitrary consumer content (and the accordion's\n     * expanded content), so it stays fully clickable and selectable.\n     */\n    .bottomContent {\n      position: relative;\n      z-index: 2;\n    }\n  }\n\n  &.tile {\n    border: none;\n    border-radius: var(--list-item--corner-radius);\n\n    &.item {\n      outline-offset: var(--size-px--xxs);\n    }\n\n    &:where(.hasAction) {\n      &:not(.isSelected) {\n        &:hover {\n          :global(.flow--avatar) {\n            filter: brightness(var(--image-button--brightness--hover));\n          }\n        }\n      }\n\n      &[data-pressed] {\n        :global(.flow--avatar) {\n          filter: brightness(var(--image-button--brightness--pressed));\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n  position: relative;\n\n  /* The link overlay and the interactive content lifted above it (see .link\n     below) stack against each other only — never against anything outside the\n     item. */\n  isolation: isolate;\n  cursor: default;\n  background-color: var(--list-item--background-color--default);\n  transition-property: background-color;\n  transition-duration: var(--transition--duration--default);\n\n  @include focus.focus;\n\n  &.item {\n    outline-offset: calc(var(--size-px--xs) * -1);\n    box-shadow: none;\n  }\n\n  &:where(.isSelected) {\n    background-color: var(--list-item--background-color--pressed);\n  }\n\n  &:not(:last-child) {\n    border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n      var(--list-item--border-color);\n  }\n\n  &[data-href] {\n    cursor: pointer;\n  }\n\n  /*\n   * The bottom content carries its own interactive elements, so hovering it\n   * must not highlight the whole item. `.bottomContent` is defined here and\n   * applied by ListItemViewContent, so the class name stays type-checked\n   * instead of naming ListItemView's generated class from the outside.\n   */\n  &:where(.hasAction):not(:has(.bottomContent:hover)) {\n    &:where(:not(.isSelected)) {\n      &:hover {\n        background-color: var(--list-item--background-color--hover);\n      }\n    }\n\n    &[data-pressed] {\n      background-color: var(--list-item--background-color--pressed);\n    }\n  }\n\n  :global(.flow--avatar) {\n    transition-property: filter;\n    transition-duration: var(--transition--duration--default);\n  }\n\n  /* Elements */\n\n  /*\n   * Covers the whole item so a right-click anywhere on it hits a real link.\n   * Interactive content is lifted back above the overlay, so buttons, context\n   * menus and checkboxes keep receiving their own clicks.\n   */\n  .link {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  &:has(.link) {\n    // Matches interactive markup the item does not author: consumer children\n    // and react-aria internals, none of which carry a class.\n    // stylelint-disable-next-line selector-max-type -- foreign interactive markup\n    :where(\n      a,\n      button,\n      input,\n      label,\n      select,\n      summary,\n      textarea,\n      [role=\"button\"],\n      [role=\"checkbox\"],\n      [role=\"link\"],\n      [role=\"switch\"],\n      [tabindex]\n    ):not(.link) {\n      position: relative;\n      z-index: 2;\n    }\n\n    /*\n     * The bottom slot carries arbitrary consumer content (and the accordion's\n     * expanded content), so it stays fully clickable and selectable.\n     */\n    .bottomContent {\n      position: relative;\n      z-index: 2;\n    }\n  }\n\n  &.tile {\n    border: none;\n    border-radius: var(--list-item--corner-radius);\n\n    &.item {\n      outline-offset: var(--size-px--xxs);\n    }\n\n    &:where(.hasAction) {\n      &:not(.isSelected) {\n        &:hover {\n          :global(.flow--avatar) {\n            filter: brightness(var(--image-button--brightness--hover));\n          }\n        }\n      }\n\n      &[data-pressed] {\n        :global(.flow--avatar) {\n          filter: brightness(var(--image-button--brightness--pressed));\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/ListItemView/ListItemView.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemView.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.module.scss"],"sourcesContent":[".view {\n  display: flex;\n  flex-direction: column;\n\n  .checkboxContainer {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .content {\n    min-width: 0;\n    display: flex;\n    gap: var(--list-item--spacing);\n    flex-grow: 1;\n    flex-wrap: wrap;\n  }\n\n  .topContent {\n    overflow-wrap: anywhere;\n    display: flex;\n  }\n\n  .bottomContent {\n    width: 100%;\n    overflow-wrap: anywhere;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .heading {\n    color: var(--text--color--default);\n    overflow-wrap: anywhere;\n  }\n\n  .header {\n    overflow-wrap: anywhere;\n    display: flex;\n    gap: var(--list-item--avatar-to-title-spacing);\n    max-width: 100%;\n  }\n\n  .subTitle {\n    font-size: var(--list-item--subtitle-font-size);\n\n    .text:not(:last-child)::after {\n      content: \"–\";\n      display: inline-block;\n      margin: 0 var(--size-rem--s);\n    }\n  }\n\n  .badge {\n    max-width: 100%;\n  }\n\n  &.listView {\n    padding: var(--list-item--padding);\n    gap: var(--list-item--spacing);\n\n    .columnLayout {\n      flex-grow: 1;\n\n      > div {\n        flex-grow: 1;\n        align-items: center;\n      }\n    }\n\n    .contentWrapper {\n      display: flex;\n      gap: var(--list-item--spacing);\n      justify-content: space-between;\n      flex-grow: 1;\n      align-items: flex-start;\n    }\n\n    .content {\n      align-items: center;\n      align-self: center;\n      max-width: 100%;\n    }\n\n    .title {\n      max-width: 100%;\n      min-width: 0;\n    }\n\n    .action {\n      margin-inline-start: auto;\n\n      button {\n        margin-inline-end: 0;\n      }\n    }\n\n    .header {\n      order: 0;\n      flex-grow: 1;\n      align-items: center;\n\n      &:empty,\n      .subTitle:empty {\n        display: none;\n      }\n\n      .avatar,\n      .checkboxContainer {\n        align-self: start;\n      }\n\n      .checkboxContainer {\n        height: var(--avatar--size--m);\n      }\n    }\n\n    &:has(.subTitle:not(:empty)) {\n      .action,\n      .avatar,\n      .checkboxContainer {\n        margin-top: var(--size-px--xxs);\n      }\n    }\n\n    .topContent {\n      order: 1;\n    }\n\n    :global(.flow--heading--heading-content) {\n      max-width: 100%;\n    }\n  }\n\n  &.tileView {\n    gap: var(--list-item--padding);\n    border-color: var(--list-item--border-color);\n    border-width: var(--list-item--border-width);\n    border-style: var(--list-item--border-style);\n    border-radius: var(--list-item--corner-radius);\n    align-content: flex-start;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n\n    .content {\n      flex-direction: column;\n      justify-content: flex-start;\n      align-items: flex-start;\n      padding-inline: var(--list-item--padding);\n      padding-bottom: var(--list-item--padding);\n      width: 100%;\n    }\n\n    .avatarContainer {\n      width: 100%;\n      border-bottom: var(--list-item--border-width)\n        var(--list-item--border-style) var(--list-item--border-color);\n      aspect-ratio: 16 / 9;\n\n      img {\n        overflow-clip-margin: unset;\n        aspect-ratio: 16 / 9;\n      }\n    }\n\n    .avatar {\n      width: 100%;\n      height: 100%;\n      border-radius: 0;\n\n      :global(.flow--avatar--icon) {\n        width: var(--size-px--xxl);\n        height: var(--size-px--xxl);\n      }\n\n      :global(.flow--avatar--initials) {\n        font-size: var(--size-px--xxl);\n      }\n    }\n\n    .checkboxContainer {\n      position: absolute;\n      top: var(--list-item--padding);\n      inset-inline-start: var(--list-item--padding);\n      background-color: var(--list-item--checkbox-background-color);\n      border-radius: var(--list-item--checkbox-corner-radius);\n\n      :global(.flow--checkbox .flow--checkbox--icon) {\n        color: var(--list-item--checkbox-color);\n        padding: var(--size-px--xxxs);\n      }\n    }\n\n    .title {\n      width: 100%;\n      min-width: 0;\n\n      :global(.flow--heading--heading-content) {\n        position: absolute;\n        top: var(--list-item--padding);\n        inset-inline: var(--list-item--padding);\n        justify-content: end;\n      }\n    }\n\n    &:has(.checkboxContainer:not(:empty)) {\n      :global(.flow--heading--heading-content) {\n        inset-inline-start: calc(var(--list-item--padding) * 2 + var(--icon--size--m));\n      }\n    }\n\n    .topContent,\n    .header {\n      width: 100%;\n    }\n\n    .action {\n      align-self: start;\n    }\n\n    .bottomContent {\n      margin-top: auto;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ListItemView.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.module.scss"],"sourcesContent":[".view {\n  display: flex;\n  flex-direction: column;\n\n  .checkboxContainer {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .content {\n    min-width: 0;\n    display: flex;\n    gap: var(--list-item--spacing);\n    flex-grow: 1;\n    flex-wrap: wrap;\n  }\n\n  .topContent {\n    overflow-wrap: anywhere;\n    display: flex;\n  }\n\n  .bottomContent {\n    width: 100%;\n    overflow-wrap: anywhere;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .heading {\n    color: var(--text--color--default);\n    overflow-wrap: anywhere;\n  }\n\n  .header {\n    overflow-wrap: anywhere;\n    display: flex;\n    gap: var(--list-item--avatar-to-title-spacing);\n    max-width: 100%;\n  }\n\n  .subTitle {\n    font-size: var(--list-item--subtitle-font-size);\n\n    .text:not(:last-child)::after {\n      content: \"–\";\n      display: inline-block;\n      margin: 0 var(--size-rem--s);\n    }\n  }\n\n  .badge {\n    max-width: 100%;\n  }\n\n  &.listView {\n    padding: var(--list-item--padding);\n    gap: var(--list-item--spacing);\n\n    .columnLayout {\n      flex-grow: 1;\n\n      > :global(.flow--column-layout) {\n        flex-grow: 1;\n        align-items: center;\n      }\n    }\n\n    .contentWrapper {\n      display: flex;\n      gap: var(--list-item--spacing);\n      justify-content: space-between;\n      flex-grow: 1;\n      align-items: flex-start;\n    }\n\n    .content {\n      align-items: center;\n      align-self: center;\n      max-width: 100%;\n    }\n\n    .title {\n      max-width: 100%;\n      min-width: 0;\n    }\n\n    .action {\n      margin-inline-start: auto;\n\n      :global(.flow--button) {\n        margin-inline-end: 0;\n      }\n    }\n\n    .header {\n      order: 0;\n      flex-grow: 1;\n      align-items: center;\n\n      &:empty,\n      .subTitle:empty {\n        display: none;\n      }\n\n      .avatar,\n      .checkboxContainer {\n        align-self: start;\n      }\n\n      .checkboxContainer {\n        height: var(--avatar--size--m);\n      }\n    }\n\n    &:has(.subTitle:not(:empty)) {\n      .action,\n      .avatar,\n      .checkboxContainer {\n        margin-top: var(--size-px--xxs);\n      }\n    }\n\n    .topContent {\n      order: 1;\n    }\n\n    :global(.flow--heading--heading-content) {\n      max-width: 100%;\n    }\n  }\n\n  &.tileView {\n    gap: var(--list-item--padding);\n    border-color: var(--list-item--border-color);\n    border-width: var(--list-item--border-width);\n    border-style: var(--list-item--border-style);\n    border-radius: var(--list-item--corner-radius);\n    align-content: flex-start;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n\n    .content {\n      flex-direction: column;\n      justify-content: flex-start;\n      align-items: flex-start;\n      padding-inline: var(--list-item--padding);\n      padding-bottom: var(--list-item--padding);\n      width: 100%;\n    }\n\n    .avatarContainer {\n      width: 100%;\n      border-bottom: var(--list-item--border-width)\n        var(--list-item--border-style) var(--list-item--border-color);\n      aspect-ratio: 16 / 9;\n\n      // A consumer child inside `Avatar` — Flow `Image` or a bare `<img>`.\n      // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n      img {\n        overflow-clip-margin: unset;\n        aspect-ratio: 16 / 9;\n      }\n    }\n\n    .avatar {\n      width: 100%;\n      height: 100%;\n      border-radius: 0;\n\n      :global(.flow--avatar--icon) {\n        width: var(--size-px--xxl);\n        height: var(--size-px--xxl);\n      }\n\n      :global(.flow--avatar--initials) {\n        font-size: var(--size-px--xxl);\n      }\n    }\n\n    .checkboxContainer {\n      position: absolute;\n      top: var(--list-item--padding);\n      inset-inline-start: var(--list-item--padding);\n      background-color: var(--list-item--checkbox-background-color);\n      border-radius: var(--list-item--checkbox-corner-radius);\n\n      :global(.flow--checkbox .flow--checkbox--icon) {\n        color: var(--list-item--checkbox-color);\n        padding: var(--size-px--xxxs);\n      }\n    }\n\n    .title {\n      width: 100%;\n      min-width: 0;\n\n      :global(.flow--heading--heading-content) {\n        position: absolute;\n        top: var(--list-item--padding);\n        inset-inline: var(--list-item--padding);\n        justify-content: end;\n      }\n    }\n\n    &:has(.checkboxContainer:not(:empty)) {\n      :global(.flow--heading--heading-content) {\n        inset-inline-start: calc(var(--list-item--padding) * 2 + var(--icon--size--m));\n      }\n    }\n\n    .topContent,\n    .header {\n      width: 100%;\n    }\n\n    .action {\n      align-self: start;\n    }\n\n    .bottomContent {\n      margin-top: auto;\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Markdown/Markdown.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":[".markdown {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--markdown--spacing);\n  min-width: 0;\n\n  p {\n    white-space: break-spaces;\n  }\n\n  table {\n    border-radius: var(--table--corner-radius);\n    overflow: hidden;\n    border-width: var(--table--border-width);\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-spacing: 0;\n    background-color: var(--table--background-color);\n\n    thead {\n      font-weight: var(--table--header-font-weight);\n    }\n\n    th,\n    td {\n      padding-inline: var(--table--padding-x);\n      padding-block: var(--table--padding-y);\n      text-align: start;\n      border-style: var(--table--border-style);\n      border-color: var(--table--border-color);\n      border-width: 0;\n    }\n\n    th {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    tbody tr {\n      &:nth-of-type(odd) td {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) td {\n        border-block-end-width: var(--table--border-width);\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":[".markdown {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--markdown--spacing);\n  min-width: 0;\n\n  /* Everything below styles react-markdown's output. Consumers can replace any\n     renderer through the `components` prop, so these rules have to match the\n     element, not a Flow class that a replacement would not carry. */\n  // stylelint-disable-next-line selector-max-type -- react-markdown output\n  p {\n    white-space: break-spaces;\n  }\n\n  // remark-gfm renders the table markup itself — Markdown overrides no table\n  // renderer, so none of these elements carries a class.\n  // stylelint-disable selector-max-type -- react-markdown table output\n  table {\n    border-radius: var(--table--corner-radius);\n    overflow: hidden;\n    border-width: var(--table--border-width);\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-spacing: 0;\n    background-color: var(--table--background-color);\n\n    thead {\n      font-weight: var(--table--header-font-weight);\n    }\n\n    th,\n    td {\n      padding-inline: var(--table--padding-x);\n      padding-block: var(--table--padding-y);\n      text-align: start;\n      border-style: var(--table--border-style);\n      border-color: var(--table--border-color);\n      border-width: 0;\n    }\n\n    th {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    tbody tr {\n      &:nth-of-type(odd) td {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) td {\n        border-block-end-width: var(--table--border-width);\n      }\n    }\n  }\n  // stylelint-enable selector-max-type\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/MarkdownEditor/MarkdownEditor.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.module.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.markdownEditor {\n  display: grid;\n  grid-template-areas:\n    \"label\"\n    \"toolbar\"\n    \"content\"\n    \"fieldDescription\";\n\n  .toolbar {\n    grid-area: toolbar;\n    display: flex;\n    justify-content: space-between;\n    padding: var(--form-control--padding-y);\n    column-gap: var(--form-control--padding-y);\n    flex-wrap: wrap;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n    @include formControl.formAnimation;\n\n    & {\n      border-bottom: none;\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  .toolbarButtons {\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: var(--form-control--padding-y);\n  }\n\n  .modeButton {\n    margin-inline-start: auto;\n  }\n\n  .markdown {\n    overflow-y: auto;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n  }\n\n  :global(.flow--form-field) {\n    display: contents;\n  }\n\n  textarea,\n  .markdown {\n    @include scrollbar.scrollbar;\n\n    grid-area: content;\n    padding-block: calc(\n      var(--form-control--padding-y) - var(--form-control--border-width)\n    );\n    padding-inline: var(--form-control--padding-x);\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n  }\n\n  &.mode-editor {\n    .markdown {\n      display: none;\n    }\n  }\n\n  &.mode-preview {\n    textarea {\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n      width: 1px;\n      height: 1px;\n      inset-inline-start: 0;\n    }\n  }\n\n  /* States */\n\n  &:has(textarea:hover) .toolbar {\n    background-color: var(--form-control--background-color--hover);\n  }\n\n  &:has(textarea[data-invalid]) .toolbar,\n  &:has(textarea[data-invalid]) .markdown {\n    background-color: var(--form-control--background-color--invalid);\n    border-color: var(--form-control--border-color--invalid);\n  }\n\n  &:has(textarea[data-focused=\"true\"]) .toolbar,\n  &:has(textarea[data-focused=\"true\"]) .markdown {\n    background-color: var(--form-control--background-color--focused);\n    border-color: var(--form-control--border-color--focused);\n  }\n\n  &:has(textarea[data-disabled]).mode-editor .toolbar {\n    background-color: var(--form-control--background-color--disabled);\n    border-color: var(--form-control--border-color--disabled);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"MarkdownEditor.module.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.markdownEditor {\n  display: grid;\n  grid-template-areas:\n    \"label\"\n    \"toolbar\"\n    \"content\"\n    \"fieldDescription\";\n\n  .toolbar {\n    grid-area: toolbar;\n    display: flex;\n    justify-content: space-between;\n    padding: var(--form-control--padding-y);\n    column-gap: var(--form-control--padding-y);\n    flex-wrap: wrap;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n    @include formControl.formAnimation;\n\n    & {\n      border-bottom: none;\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  .toolbarButtons {\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: var(--form-control--padding-y);\n  }\n\n  .modeButton {\n    margin-inline-start: auto;\n  }\n\n  .markdown {\n    overflow-y: auto;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n  }\n\n  :global(.flow--form-field) {\n    display: contents;\n  }\n\n  /* The inner text-area element is react-aria's, but Flow's TextArea puts a\n     class on it — select through that class instead of the element type. */\n  :global(.flow--text-area--input),\n  .markdown {\n    @include scrollbar.scrollbar;\n\n    grid-area: content;\n    padding-block: calc(\n      var(--form-control--padding-y) - var(--form-control--border-width)\n    );\n    padding-inline: var(--form-control--padding-x);\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n  }\n\n  &.mode-editor {\n    .markdown {\n      display: none;\n    }\n  }\n\n  &.mode-preview {\n    :global(.flow--text-area--input) {\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n      width: 1px;\n      height: 1px;\n      inset-inline-start: 0;\n    }\n  }\n\n  /* States */\n\n  &:has(:global(.flow--text-area--input:hover)) .toolbar {\n    background-color: var(--form-control--background-color--hover);\n  }\n\n  &:has(:global(.flow--text-area--input[data-invalid])) .toolbar,\n  &:has(:global(.flow--text-area--input[data-invalid])) .markdown {\n    background-color: var(--form-control--background-color--invalid);\n    border-color: var(--form-control--border-color--invalid);\n  }\n\n  &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .toolbar,\n  &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .markdown {\n    background-color: var(--form-control--background-color--focused);\n    border-color: var(--form-control--border-color--focused);\n  }\n\n  &:has(:global(.flow--text-area--input[data-disabled])).mode-editor .toolbar {\n    background-color: var(--form-control--background-color--disabled);\n    border-color: var(--form-control--border-color--disabled);\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/MessageThread/MessageThread.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.module.mjs","names":[],"sources":["../../../../../../../src/components/MessageThread/MessageThread.module.scss"],"sourcesContent":[".messageThread {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--message-thread--spacing);\n  width: 100%;\n\n  > li {\n    list-style: none;\n  }\n\n  .message {\n    &.responder {\n      padding-inline-end: var(--message-thread--indentation);\n    }\n\n    &.sender {\n      padding-inline-start: var(--message-thread--indentation);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"MessageThread.module.mjs","names":[],"sources":["../../../../../../../src/components/MessageThread/MessageThread.module.scss"],"sourcesContent":[".messageThread {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--message-thread--spacing);\n  width: 100%;\n\n  /* `> li` is load-bearing: #3160 narrowed it from `li` so that an ordered\n     list inside a message keeps its markers. The items come from `Message` /\n     `MessageSeparator`, so a class would have to enumerate the slot. */\n  // stylelint-disable-next-line selector-max-type -- see above\n  > li {\n    list-style: none;\n  }\n\n  .message {\n    &.responder {\n      padding-inline-end: var(--message-thread--indentation);\n    }\n\n    &.sender {\n      padding-inline-start: var(--message-thread--indentation);\n    }\n  }\n}\n"],"mappings":""}