@mittwald/flow-react-components 1.5.0-next.4 → 1.5.0-next.40

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

@@ -24,6 +24,7 @@ var plain = "flow--button--plain";
 var soft = "flow--button--soft";
 var avatar = "flow--button--avatar";
 var image = "flow--button--image";
+var skeleton = "flow--button--skeleton";
 var Button_module_default = {
 	button,
 	outline,
@@ -51,9 +52,12 @@ var Button_module_default = {
 	plain,
 	soft,
 	avatar,
-	image
+	image,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--button--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--button--skeleton-text-shimmer"
 };
 //#endregion
-export { ariaDisabled, avatar, button, content, counterBadge, danger, dark, Button_module_default as default, hasText, icon, image, isFailed, isPending, isSucceeded, light, outline, plain, primary, secondary, soft, solid, stateIcon, success, text };
+export { ariaDisabled, avatar, button, content, counterBadge, danger, dark, Button_module_default as default, hasText, icon, image, isFailed, isPending, isSucceeded, light, outline, plain, primary, secondary, skeleton, soft, solid, stateIcon, success, text };
 
 //# sourceMappingURL=Button.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n\n.button {\n  position: relative;\n  font-family: Inter, sans-serif;\n  font-size: var(--font-size-text--m);\n  font-weight: bold;\n  line-height: var(--line-height);\n  border: none;\n  border-radius: var(--button--corner-radius);\n  padding-block: var(--button--padding-y);\n  padding-inline: var(--button--padding-x);\n  transition-property: color, background-color, transform;\n  transition-duration:\n    var(--transition--duration--default), var(--transition--duration--default),\n    var(--transition--duration--fast);\n  transition-timing-function: ease, ease, ease-out;\n  max-width: 100%;\n  display: grid;\n  align-items: center;\n  grid-template-areas: \"content\";\n  width: fit-content;\n\n  &:where(.outline) {\n    border-width: var(--button--border-width);\n    border-style: var(--button--border-style);\n    padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n    padding-inline: calc(\n      var(--button--padding-x) - var(--button--border-width)\n    );\n  }\n\n  @include focus.focus;\n\n  @extend .primary;\n  @extend .solid;\n\n  /* Elements */\n  .content {\n    display: flex;\n    column-gap: var(--button--spacing);\n    align-items: center;\n    justify-content: center;\n    text-align: start;\n    text-wrap-style: pretty;\n\n    /* Fade the label out when a state icon (pending/success/fail) takes over. */\n    transition-property: opacity;\n    transition-duration: var(--transition--duration--fast);\n  }\n\n  .content,\n  .stateIcon {\n    grid-area: content;\n  }\n\n  .stateIcon {\n    justify-self: center;\n  }\n\n  &:where(:has(.icon):not(:has(.text), .hasText)) {\n    padding: var(--button--padding-icon-only);\n\n    &:where(.outline) {\n      padding: calc(\n        var(--button--padding-icon-only) - var(--button--border-width)\n      );\n    }\n  }\n\n  .counterBadge {\n    position: absolute;\n    top: calc(var(--size-px--xxs) * -1);\n    inset-inline-end: calc(var(--size-px--xxs) * -1);\n  }\n\n  /* States */\n\n  /* Subtle tactile press feedback: a slight inward scale while pressed.\n     Overlay triggers keep data-pressed while their overlay is open, so an\n     expanded trigger is excluded. */\n  &[data-pressed]:where(:not([data-readonly], [aria-expanded=\"true\"])) {\n    transform: scale(0.97);\n  }\n\n  &.isPending,\n  &.isFailed,\n  &.isSucceeded {\n    .content {\n      opacity: 0;\n    }\n  }\n\n  &.isPending {\n    .stateIcon {\n      color: var(--button--pending-icon-color);\n    }\n  }\n\n  /* Success/failure icon pops in when it replaces the label. The pending\n     spinner is left alone — it has its own animation. */\n  &.isSucceeded,\n  &.isFailed {\n    .stateIcon {\n      animation: state-icon-pop var(--transition--duration--default)\n        cubic-bezier(0.34, 1.35, 0.5, 1);\n    }\n  }\n\n  /* Size */\n\n  &:where(.size-s) {\n    font-size: var(--button--font-size-s);\n    line-height: var(--button--line-height-s);\n    padding-block: var(--button--padding-s-y);\n    padding-inline: var(--button--padding-s-x);\n    column-gap: var(--button--spacing-s);\n    border-radius: var(--button--corner-radius-s);\n\n    &:where(.outline) {\n      padding-block: calc(\n        var(--button--padding-s-y) - var(--button--border-width)\n      );\n      padding-inline: calc(\n        var(--button--padding-s-x) - var(--button--border-width)\n      );\n    }\n\n    &:where(:has(.icon):not(:has(.text), .hasText)) {\n      padding: var(--button--padding-s-icon-only);\n\n      &:where(.outline) {\n        padding: calc(\n          var(--button--padding-s-icon-only) - var(--button--border-width)\n        );\n      }\n    }\n\n    .content {\n      column-gap: var(--button--spacing-s);\n    }\n  }\n\n  /* Variants */\n\n  @mixin variant($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      background-color: var(\n        --button--#{$color}-#{$variant}-background-color--default\n      );\n      color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n      &:hover:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--hover\n        );\n      }\n\n      &[data-pressed]:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--pressed\n        );\n      }\n\n      &[disabled],\n      &[data-disabled],\n      &.ariaDisabled,\n      &.isPending,\n      &.isFailed,\n      &.isSucceeded {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--disabled\n        );\n        color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n      }\n    }\n  }\n\n  @include variant(primary, solid);\n  @include variant(success, solid);\n  @include variant(danger, solid);\n  @include variant(secondary, solid);\n  @include variant(dark, solid);\n  @include variant(light, solid);\n  @include variant(dark-static, solid);\n  @include variant(light-static, solid);\n  @include variant(primary, plain);\n  @include variant(success, plain);\n  @include variant(danger, plain);\n  @include variant(secondary, plain);\n  @include variant(dark, plain);\n  @include variant(light, plain);\n  @include variant(dark-static, plain);\n  @include variant(light-static, plain);\n  @include variant(primary, soft);\n  @include variant(success, soft);\n  @include variant(danger, soft);\n  @include variant(secondary, soft);\n  @include variant(dark, soft);\n  @include variant(light, soft);\n  @include variant(dark-static, soft);\n  @include variant(light-static, soft);\n  @include variant(primary, outline);\n  @include variant(success, outline);\n  @include variant(danger, outline);\n  @include variant(secondary, outline);\n  @include variant(dark, outline);\n  @include variant(light, outline);\n  @include variant(dark-static, outline);\n  @include variant(light-static, outline);\n\n  /* Outline */\n\n  @mixin outline($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      &.outline {\n        border-color: var(\n          --button--#{$color}-#{$variant}-border-color--default\n        );\n\n        &[disabled],\n        &[data-disabled],\n        &.ariaDisabled,\n        &.isPending,\n        &.isFailed {\n          border-color: var(\n            --button--#{$color}-#{$variant}-border-color--disabled\n          );\n        }\n      }\n    }\n  }\n\n  @include outline(primary, outline);\n  @include outline(success, outline);\n  @include outline(danger, outline);\n  @include outline(secondary, outline);\n  @include outline(dark, outline);\n  @include outline(light, outline);\n  @include outline(dark-static, outline);\n  @include outline(light-static, outline);\n  @include avatarButton.avatarButton();\n\n  &:has(.image) {\n    padding: 0;\n    background: none;\n    height: fit-content;\n\n    &:hover:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--hover);\n      filter: brightness(var(--image-button--brightness--hover));\n    }\n\n    &[data-pressed]:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--pressed);\n      filter: brightness(var(--image-button--brightness--pressed));\n    }\n\n    .image {\n      width: 100%;\n    }\n  }\n}\n\n@keyframes state-icon-pop {\n  from {\n    transform: scale(0.6);\n    opacity: 0;\n  }\n\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n@use \"@/styles/mixins/skeleton\";\n\n.button {\n  position: relative;\n  font-family: Inter, sans-serif;\n  font-size: var(--font-size-text--m);\n  font-weight: bold;\n  line-height: var(--line-height);\n  border: none;\n  border-radius: var(--button--corner-radius);\n  padding-block: var(--button--padding-y);\n  padding-inline: var(--button--padding-x);\n  transition-property: color, background-color, transform;\n  transition-duration:\n    var(--transition--duration--default), var(--transition--duration--default),\n    var(--transition--duration--fast);\n  transition-timing-function: ease, ease, ease-out;\n  max-width: 100%;\n  display: grid;\n  align-items: center;\n  grid-template-areas: \"content\";\n  width: fit-content;\n\n  &:where(.outline) {\n    border-width: var(--button--border-width);\n    border-style: var(--button--border-style);\n    padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n    padding-inline: calc(\n      var(--button--padding-x) - var(--button--border-width)\n    );\n  }\n\n  @include focus.focus;\n\n  @extend .primary;\n  @extend .solid;\n\n  /* Elements */\n  .content {\n    display: flex;\n    column-gap: var(--button--spacing);\n    align-items: center;\n    justify-content: center;\n    text-align: start;\n    text-wrap-style: pretty;\n\n    /* Fade the label out when a state icon (pending/success/fail) takes over. */\n    transition-property: opacity;\n    transition-duration: var(--transition--duration--fast);\n  }\n\n  .content,\n  .stateIcon {\n    grid-area: content;\n  }\n\n  .stateIcon {\n    justify-self: center;\n  }\n\n  &:where(:has(.icon):not(:has(.text), .hasText)) {\n    padding: var(--button--padding-icon-only);\n\n    &:where(.outline) {\n      padding: calc(\n        var(--button--padding-icon-only) - var(--button--border-width)\n      );\n    }\n  }\n\n  .counterBadge {\n    position: absolute;\n    top: calc(var(--size-px--xxs) * -1);\n    inset-inline-end: calc(var(--size-px--xxs) * -1);\n  }\n\n  /* States */\n\n  /* Subtle tactile press feedback: a slight inward scale while pressed.\n     A muted button ignores the press, so it does not scale. Overlay triggers\n     keep data-pressed while their overlay is open, so an expanded trigger is\n     excluded. */\n  &[data-pressed]:where(\n      :not([data-readonly], [aria-disabled=\"true\"], [aria-expanded=\"true\"])\n    ) {\n    transform: scale(0.97);\n  }\n\n  &.isPending,\n  &.isFailed,\n  &.isSucceeded {\n    .content {\n      opacity: 0;\n    }\n  }\n\n  &.isPending {\n    .stateIcon {\n      color: var(--button--pending-icon-color);\n    }\n  }\n\n  /* Success/failure icon pops in when it replaces the label. The pending\n     spinner is left alone — it has its own animation. */\n  &.isSucceeded,\n  &.isFailed {\n    .stateIcon {\n      animation: state-icon-pop var(--transition--duration--default)\n        cubic-bezier(0.34, 1.35, 0.5, 1);\n    }\n  }\n\n  /* Size */\n\n  &:where(.size-s) {\n    font-size: var(--button--font-size-s);\n    line-height: var(--button--line-height-s);\n    padding-block: var(--button--padding-s-y);\n    padding-inline: var(--button--padding-s-x);\n    column-gap: var(--button--spacing-s);\n    border-radius: var(--button--corner-radius-s);\n\n    &:where(.outline) {\n      padding-block: calc(\n        var(--button--padding-s-y) - var(--button--border-width)\n      );\n      padding-inline: calc(\n        var(--button--padding-s-x) - var(--button--border-width)\n      );\n    }\n\n    &:where(:has(.icon):not(:has(.text), .hasText)) {\n      padding: var(--button--padding-s-icon-only);\n\n      &:where(.outline) {\n        padding: calc(\n          var(--button--padding-s-icon-only) - var(--button--border-width)\n        );\n      }\n    }\n\n    .content {\n      column-gap: var(--button--spacing-s);\n    }\n  }\n\n  /* Variants */\n\n  @mixin variant($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      background-color: var(\n        --button--#{$color}-#{$variant}-background-color--default\n      );\n      color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n      &:hover:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--hover\n        );\n      }\n\n      &[data-pressed]:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--pressed\n        );\n      }\n\n      &[disabled],\n      &[data-disabled],\n      &.ariaDisabled,\n      &.isPending,\n      &.isFailed,\n      &.isSucceeded {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--disabled\n        );\n        color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n      }\n    }\n  }\n\n  @include variant(primary, solid);\n  @include variant(success, solid);\n  @include variant(danger, solid);\n  @include variant(secondary, solid);\n  @include variant(dark, solid);\n  @include variant(light, solid);\n  @include variant(dark-static, solid);\n  @include variant(light-static, solid);\n  @include variant(primary, plain);\n  @include variant(success, plain);\n  @include variant(danger, plain);\n  @include variant(secondary, plain);\n  @include variant(dark, plain);\n  @include variant(light, plain);\n  @include variant(dark-static, plain);\n  @include variant(light-static, plain);\n  @include variant(primary, soft);\n  @include variant(success, soft);\n  @include variant(danger, soft);\n  @include variant(secondary, soft);\n  @include variant(dark, soft);\n  @include variant(light, soft);\n  @include variant(dark-static, soft);\n  @include variant(light-static, soft);\n  @include variant(primary, outline);\n  @include variant(success, outline);\n  @include variant(danger, outline);\n  @include variant(secondary, outline);\n  @include variant(dark, outline);\n  @include variant(light, outline);\n  @include variant(dark-static, outline);\n  @include variant(light-static, outline);\n\n  /* Outline */\n\n  @mixin outline($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      &.outline {\n        border-color: var(\n          --button--#{$color}-#{$variant}-border-color--default\n        );\n\n        &[disabled],\n        &[data-disabled],\n        &.ariaDisabled,\n        &.isPending,\n        &.isFailed {\n          border-color: var(\n            --button--#{$color}-#{$variant}-border-color--disabled\n          );\n        }\n      }\n    }\n  }\n\n  @include outline(primary, outline);\n  @include outline(success, outline);\n  @include outline(danger, outline);\n  @include outline(secondary, outline);\n  @include outline(dark, outline);\n  @include outline(light, outline);\n  @include outline(dark-static, outline);\n  @include outline(light-static, outline);\n  @include avatarButton.avatarButton();\n\n  &:has(.image) {\n    padding: 0;\n    background: none;\n    height: fit-content;\n\n    &:hover:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--hover);\n      filter: brightness(var(--image-button--brightness--hover));\n    }\n\n    &[data-pressed]:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--pressed);\n      filter: brightness(var(--image-button--brightness--pressed));\n    }\n\n    .image {\n      width: 100%;\n    }\n  }\n\n  /* SkeletonMode — after the variants, so the surface wins over their colors */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: var(--button--corner-radius);\n\n    &:where(.size-s) {\n      --skeleton-radius: var(--button--corner-radius-s);\n    }\n\n    &:where(:has(.avatar)) {\n      --skeleton-radius: var(--corner-radius--round);\n    }\n  }\n}\n\n@include skeleton.keyframes;\n\n@keyframes state-icon-pop {\n  from {\n    transform: scale(0.6);\n    opacity: 0;\n  }\n\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"./components/CalendarHeader\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\n\nexport const Calendar: FC<PropsWithClassName> = (props) => {\n  const { className } = props;\n\n  const rootClassName = clsx(styles.calendar, className);\n\n  return (\n    <Aria.Calendar className={rootClassName}>\n      <CalendarHeader />\n      <Aria.CalendarGrid weekdayStyle=\"short\">\n        {(date) => <Aria.CalendarCell date={date} />}\n      </Aria.CalendarGrid>\n    </Aria.Calendar>\n  );\n};\n\nexport default Calendar;\n"],"mappings":";;;;;;;;AAOA,IAAa,YAAoC,UAAU;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,gBAAgB,KAAK,wBAAO,UAAU,SAAS;CAErD,OACE,qBAAC,KAAK,UAAN;EAAe,WAAW;EAA1B,UAAA,CACE,oBAAC,gBAAD,CAAiB,CAAA,GACjB,oBAAC,KAAK,cAAN;GAAmB,cAAa;GAC5B,WAAA,SAAS,oBAAC,KAAK,cAAN,EAAyB,KAAO,CAAA;EAC1B,CAAA,CACN;;AAEnB"}
+{"version":3,"file":"Calendar.mjs","names":["styles"],"sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"./components/CalendarHeader\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\n\nexport const Calendar: FC<PropsWithClassName> = (props) => {\n  const { className } = props;\n\n  const rootClassName = clsx(styles.calendar, className);\n\n  return (\n    <Aria.Calendar className={rootClassName}>\n      <CalendarHeader />\n      <Aria.CalendarGrid weekdayStyle=\"short\">\n        {(date) => <Aria.CalendarCell date={date} />}\n      </Aria.CalendarGrid>\n    </Aria.Calendar>\n  );\n};\n\nexport default Calendar;\n"],"mappings":";;;;;;;;AAOA,IAAa,YAAoC,UAAU;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,gBAAgB,KAAKA,wBAAO,UAAU,SAAS;CAErD,OACE,qBAAC,KAAK,UAAN;EAAe,WAAW;EAA1B,UAAA,CACE,oBAAC,gBAAD,CAAiB,CAAA,GACjB,oBAAC,KAAK,cAAN;GAAmB,cAAa;GAC5B,WAAA,SAAS,oBAAC,KAAK,cAAN,EAAyB,KAAO,CAAA;EAC1B,CAAA,CACN;;AAEnB"}

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\";\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"}
+{"version":3,"file":"CalendarHeader.mjs","names":["styles"],"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,WAAWA,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/Calendar/components/RangeCalendar/RangeCalendar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RangeCalendar.mjs","names":[],"sources":["../../../../../../../../../src/components/Calendar/components/RangeCalendar/RangeCalendar.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"../CalendarHeader\";\nimport clsx from \"clsx\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { useCalendarDateRangePresets } from \"@/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets\";\nimport { Separator } from \"@/components/Separator\";\nimport type { DateRangePickerProps } from \"@/components/DateRangePicker\";\n\nexport type RangeCalendarProps = Omit<\n  Aria.RangeCalendarProps<Aria.DateValue>,\n  \"children\"\n> &\n  Pick<DateRangePickerProps, \"withDatePickerPresets\">;\n\n/** @internal */\nconst InnerRangeCalendar: FC<RangeCalendarProps> = ({\n  withDatePickerPresets,\n}) => {\n  const dateRangeHelper = useCalendarDateRangePresets(withDatePickerPresets);\n\n  const predefinedDateHelperItems = dateRangeHelper.map((present) => {\n    return (\n      <MenuItem\n        key={present.label}\n        isDisabled={present.disabled}\n        onPress={present.onPress}\n        aria-label={present.label}\n      >\n        {present.label}\n      </MenuItem>\n    );\n  });\n\n  return (\n    <div className={styles.container}>\n      {withDatePickerPresets && (\n        <>\n          <Aria.Menu className={styles.presetMenu}>\n            {predefinedDateHelperItems}\n          </Aria.Menu>\n          <Separator\n            orientation=\"vertical\"\n            className={styles.presetSeparator}\n          />\n        </>\n      )}\n      <div>\n        <CalendarHeader />\n        <Aria.CalendarGrid>\n          {(date) => <Aria.CalendarCell date={date} />}\n        </Aria.CalendarGrid>\n      </div>\n    </div>\n  );\n};\n\n/** @flr-generate all */\nexport const RangeCalendar: FC<RangeCalendarProps> = (props) => {\n  const { className, withDatePickerPresets, ...rest } = props;\n  const rootClassName = clsx(styles.calendar, styles.range, className);\n\n  return (\n    <Aria.RangeCalendar {...rest} className={rootClassName}>\n      <InnerRangeCalendar withDatePickerPresets={withDatePickerPresets} />\n    </Aria.RangeCalendar>\n  );\n};\n\nexport default RangeCalendar;\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAM,sBAA8C,EAClD,4BACI;CAGJ,MAAM,4BAFkB,4BAA4B,qBAElB,CAAA,CAAgB,KAAK,YAAY;EACjE,OACE,oBAAC,UAAD;GAEE,YAAY,QAAQ;GACpB,SAAS,QAAQ;GACjB,cAAY,QAAQ;GAEnB,UAAA,QAAQ;EACD,GANH,QAAQ,KAML;CAEd,CAAC;CAED,OACE,qBAAC,OAAD;EAAK,WAAW,wBAAO;EAAvB,UAAA,CACG,yBACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,KAAK,MAAN;GAAW,WAAW,wBAAO;GAC1B,UAAA;EACQ,CAAA,GACX,oBAAC,WAAD;GACE,aAAY;GACZ,WAAW,wBAAO;EACnB,CAAA,CACD,EAAA,CAAA,GAEJ,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,gBAAD,CAAiB,CAAA,GACjB,oBAAC,KAAK,cAAN,EAAA,WACI,SAAS,oBAAC,KAAK,cAAN,EAAyB,KAAO,CAAA,EAC1B,CAAA,CAChB,EAAA,CAAA,CACF;;AAET;;AAGA,IAAa,iBAAyC,UAAU;CAC9D,MAAM,EAAE,WAAW,uBAAuB,GAAG,SAAS;CACtD,MAAM,gBAAgB,KAAK,wBAAO,UAAU,wBAAO,OAAO,SAAS;CAEnE,OACE,oBAAC,KAAK,eAAN;EAAoB,GAAI;EAAM,WAAW;EACvC,UAAA,oBAAC,oBAAD,EAA2C,sBAAwB,CAAA;CACjD,CAAA;AAExB"}
+{"version":3,"file":"RangeCalendar.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../../../src/components/Calendar/components/RangeCalendar/RangeCalendar.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"../CalendarHeader\";\nimport clsx from \"clsx\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { useCalendarDateRangePresets } from \"@/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets\";\nimport { Separator } from \"@/components/Separator\";\nimport type { DateRangePickerProps } from \"@/components/DateRangePicker\";\n\nexport type RangeCalendarProps = Omit<\n  Aria.RangeCalendarProps<Aria.DateValue>,\n  \"children\"\n> &\n  Pick<DateRangePickerProps, \"withDatePickerPresets\">;\n\n/** @internal */\nconst InnerRangeCalendar: FC<RangeCalendarProps> = ({\n  withDatePickerPresets,\n}) => {\n  const dateRangeHelper = useCalendarDateRangePresets(withDatePickerPresets);\n\n  const predefinedDateHelperItems = dateRangeHelper.map((present) => {\n    return (\n      <MenuItem\n        key={present.label}\n        isDisabled={present.disabled}\n        onPress={present.onPress}\n        aria-label={present.label}\n      >\n        {present.label}\n      </MenuItem>\n    );\n  });\n\n  return (\n    <div className={styles.container}>\n      {withDatePickerPresets && (\n        <>\n          <Aria.Menu className={styles.presetMenu}>\n            {predefinedDateHelperItems}\n          </Aria.Menu>\n          <Separator\n            orientation=\"vertical\"\n            className={styles.presetSeparator}\n          />\n        </>\n      )}\n      <div>\n        <CalendarHeader />\n        <Aria.CalendarGrid>\n          {(date) => <Aria.CalendarCell date={date} />}\n        </Aria.CalendarGrid>\n      </div>\n    </div>\n  );\n};\n\n/** @flr-generate all */\nexport const RangeCalendar: FC<RangeCalendarProps> = (props) => {\n  const { className, withDatePickerPresets, ...rest } = props;\n  const rootClassName = clsx(styles.calendar, styles.range, className);\n\n  return (\n    <Aria.RangeCalendar {...rest} className={rootClassName}>\n      <InnerRangeCalendar withDatePickerPresets={withDatePickerPresets} />\n    </Aria.RangeCalendar>\n  );\n};\n\nexport default RangeCalendar;\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAM,sBAA8C,EAClD,4BACI;CAGJ,MAAM,4BAFkB,4BAA4B,qBAElB,CAAA,CAAgB,KAAK,YAAY;EACjE,OACE,oBAAC,UAAD;GAEE,YAAY,QAAQ;GACpB,SAAS,QAAQ;GACjB,cAAY,QAAQ;GAEnB,UAAA,QAAQ;EACD,GANH,QAAQ,KAML;CAEd,CAAC;CAED,OACE,qBAAC,OAAD;EAAK,WAAWA,wBAAO;EAAvB,UAAA,CACG,yBACC,qBAAAC,YAAA,EAAA,UAAA,CACE,oBAAC,KAAK,MAAN;GAAW,WAAWD,wBAAO;GAC1B,UAAA;EACQ,CAAA,GACX,oBAAC,WAAD;GACE,aAAY;GACZ,WAAWA,wBAAO;EACnB,CAAA,CACD,EAAA,CAAA,GAEJ,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,gBAAD,CAAiB,CAAA,GACjB,oBAAC,KAAK,cAAN,EAAA,WACI,SAAS,oBAAC,KAAK,cAAN,EAAyB,KAAO,CAAA,EAC1B,CAAA,CAChB,EAAA,CAAA,CACF;;AAET;;AAGA,IAAa,iBAAyC,UAAU;CAC9D,MAAM,EAAE,WAAW,uBAAuB,GAAG,SAAS;CACtD,MAAM,gBAAgB,KAAKA,wBAAO,UAAUA,wBAAO,OAAO,SAAS;CAEnE,OACE,oBAAC,KAAK,eAAN;EAAoB,GAAI;EAAM,WAAW;EACvC,UAAA,oBAAC,oBAAD,EAA2C,sBAAwB,CAAA;CACjD,CAAA;AAExB"}

package/dist/js/packages/components/src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCalendarDateRangePresets.mjs","names":[],"sources":["../../../../../../../../../../src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.ts"],"sourcesContent":["import { DateTime } from \"luxon\";\nimport { CalendarDate, toCalendarDate } from \"@internationalized/date\";\nimport { useContext, useMemo } from \"react\";\nimport { RangeCalendarStateContext } from \"react-aria-components\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"../../../locales/*.locale.json\";\nimport invariant from \"invariant\";\n\nexport interface DateRangePresetItem {\n  start: CalendarDate;\n  end: CalendarDate;\n  label: string;\n}\n\nexport type DateRangePresets = DateRangePresetItem[];\n\ninterface CalendarDateRangePresetItem extends DateRangePresetItem {\n  onPress: () => void;\n  disabled: boolean;\n}\n\nconst clampCalendarDate = (\n  date: CalendarDate,\n  minDate?: CalendarDate,\n  maxDate?: CalendarDate,\n) => {\n  if (minDate && date.compare(minDate) < 0) {\n    return minDate;\n  }\n\n  if (maxDate && date.compare(maxDate) > 0) {\n    return maxDate;\n  }\n\n  return date;\n};\n\nconst clampCalendarDateRange = (\n  startDate: CalendarDate,\n  endDate: CalendarDate,\n  minDate?: CalendarDate,\n  maxDate?: CalendarDate,\n) => {\n  const clampedStart = clampCalendarDate(startDate, minDate, maxDate);\n  const clampedEnd = clampCalendarDate(endDate, minDate, maxDate);\n\n  return {\n    start: clampedStart,\n    end: clampedEnd,\n    invalid: clampedStart.compare(clampedEnd) > 0,\n  };\n};\n\n/** @internal * */\nexport const useCalendarDateRangePresets = (\n  customPresets?: DateRangePresets | boolean,\n): CalendarDateRangePresetItem[] => {\n  const now = DateTime.local();\n  const state = useContext(RangeCalendarStateContext);\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Calendar\");\n\n  invariant(!!state, \"Could not find RangeCalendarStateContext.\");\n\n  const minDate = state.minValue ? toCalendarDate(state.minValue) : undefined;\n  const maxDate = state.maxValue ? toCalendarDate(state.maxValue) : undefined;\n\n  const isValidRange = (range: { start: CalendarDate; end: CalendarDate }) =>\n    !state.isInvalid(range.start) && !state.isInvalid(range.end);\n\n  const possibleRanges = useMemo<DateRangePresets>(() => {\n    if (typeof customPresets !== \"boolean\") {\n      return customPresets ?? [];\n    }\n\n    const todayDate = new CalendarDate(now.year, now.month, now.day);\n    const yesterdayLuxon = now.minus({ days: 1 });\n    const yesterdayDate = new CalendarDate(\n      yesterdayLuxon.year,\n      yesterdayLuxon.month,\n      yesterdayLuxon.day,\n    );\n\n    const thisWeekStart = now.startOf(\"week\");\n    const thisWeekEnd = now.endOf(\"week\");\n    const lastWeekLuxon = now.minus({ week: 1 });\n    const lastWeekStart = lastWeekLuxon.startOf(\"week\");\n    const lastWeekEnd = lastWeekLuxon.endOf(\"week\");\n\n    const thisMonthStart = now.startOf(\"month\");\n    const thisMonthEnd = now.endOf(\"month\");\n    const lastMonthLuxon = now.minus({ month: 1 });\n    const lastMonthStart = lastMonthLuxon.startOf(\"month\");\n    const lastMonthEnd = lastMonthLuxon.endOf(\"month\");\n\n    const thisYearStart = now.startOf(\"year\");\n    const thisYearEnd = now.endOf(\"year\");\n    const lastYearLuxon = now.minus({ year: 1 });\n    const lastYearStart = lastYearLuxon.startOf(\"year\");\n    const lastYearEnd = lastYearLuxon.endOf(\"year\");\n\n    return [\n      {\n        label: stringFormatter.format(\"preset.today\"),\n        start: todayDate,\n        end: todayDate,\n      },\n      {\n        label: stringFormatter.format(\"preset.yesterday\"),\n        start: yesterdayDate,\n        end: yesterdayDate,\n      },\n      {\n        label: stringFormatter.format(\"preset.thisWeek\"),\n        start: new CalendarDate(\n          thisWeekStart.year,\n          thisWeekStart.month,\n          thisWeekStart.day,\n        ),\n        end: new CalendarDate(\n          thisWeekEnd.year,\n          thisWeekEnd.month,\n          thisWeekEnd.day,\n        ),\n      },\n      {\n        label: stringFormatter.format(\"preset.lastWeek\"),\n        start: new CalendarDate(\n          lastWeekStart.year,\n          lastWeekStart.month,\n          lastWeekStart.day,\n        ),\n        end: new CalendarDate(\n          lastWeekEnd.year,\n          lastWeekEnd.month,\n          lastWeekEnd.day,\n        ),\n      },\n      {\n        label: stringFormatter.format(\"preset.thisMonth\"),\n        start: new CalendarDate(\n          thisMonthStart.year,\n          thisMonthStart.month,\n          thisMonthStart.day,\n        ),\n        end: new CalendarDate(\n          thisMonthEnd.year,\n          thisMonthEnd.month,\n          thisMonthEnd.day,\n        ),\n      },\n      {\n        label: stringFormatter.format(\"preset.lastMonth\"),\n        start: new CalendarDate(\n          lastMonthStart.year,\n          lastMonthStart.month,\n          lastMonthStart.day,\n        ),\n        end: new CalendarDate(\n          lastMonthEnd.year,\n          lastMonthEnd.month,\n          lastMonthEnd.day,\n        ),\n      },\n      {\n        label: stringFormatter.format(\"preset.thisYear\"),\n        start: new CalendarDate(\n          thisYearStart.year,\n          thisYearStart.month,\n          thisYearStart.day,\n        ),\n        end: new CalendarDate(\n          thisYearEnd.year,\n          thisYearEnd.month,\n          thisYearEnd.day,\n        ),\n      },\n      {\n        label: stringFormatter.format(\"preset.lastYear\"),\n        start: new CalendarDate(\n          lastYearStart.year,\n          lastYearStart.month,\n          lastYearStart.day,\n        ),\n        end: new CalendarDate(\n          lastYearEnd.year,\n          lastYearEnd.month,\n          lastYearEnd.day,\n        ),\n      },\n    ];\n  }, [now, customPresets, stringFormatter]);\n\n  return possibleRanges.map((range) => {\n    if (\n      (minDate && range.end.compare(minDate) < 0) ||\n      (maxDate && range.start.compare(maxDate) > 0)\n    ) {\n      return {\n        ...range,\n        disabled: true,\n        onPress: () => {\n          // void\n        },\n      };\n    }\n\n    const { start, end, invalid } = clampCalendarDateRange(\n      range.start,\n      range.end,\n      minDate,\n      maxDate,\n    );\n\n    const presetDisabled = invalid || !isValidRange({ start, end });\n\n    return {\n      ...range,\n      start,\n      end,\n      disabled: presetDisabled,\n      onPress: () => {\n        if (!presetDisabled) {\n          state.setValue({ start, end });\n        }\n      },\n    };\n  });\n};\n"],"mappings":";;;;;;;;;;AAqBA,IAAM,qBACJ,MACA,SACA,YACG;CACH,IAAI,WAAW,KAAK,QAAQ,OAAO,IAAI,GACrC,OAAO;CAGT,IAAI,WAAW,KAAK,QAAQ,OAAO,IAAI,GACrC,OAAO;CAGT,OAAO;AACT;AAEA,IAAM,0BACJ,WACA,SACA,SACA,YACG;CACH,MAAM,eAAe,kBAAkB,WAAW,SAAS,OAAO;CAClE,MAAM,aAAa,kBAAkB,SAAS,SAAS,OAAO;CAE9D,OAAO;EACL,OAAO;EACP,KAAK;EACL,SAAS,aAAa,QAAQ,UAAU,IAAI;CAC9C;AACF;;AAGA,IAAa,+BACX,kBACkC;CAClC,MAAM,MAAM,SAAS,MAAM;CAC3B,MAAM,QAAQ,WAAW,yBAAyB;CAClD,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,UAAU,CAAC,CAAC,OAAO,2CAA2C;CAE9D,MAAM,UAAU,MAAM,WAAW,eAAe,MAAM,QAAQ,IAAI,KAAA;CAClE,MAAM,UAAU,MAAM,WAAW,eAAe,MAAM,QAAQ,IAAI,KAAA;CAElE,MAAM,gBAAgB,UACpB,CAAC,MAAM,UAAU,MAAM,KAAK,KAAK,CAAC,MAAM,UAAU,MAAM,GAAG;CA6H7D,OA3HuB,cAAgC;EACrD,IAAI,OAAO,kBAAkB,WAC3B,OAAO,iBAAiB,CAAC;EAG3B,MAAM,YAAY,IAAI,aAAa,IAAI,MAAM,IAAI,OAAO,IAAI,GAAG;EAC/D,MAAM,iBAAiB,IAAI,MAAM,EAAE,MAAM,EAAE,CAAC;EAC5C,MAAM,gBAAgB,IAAI,aACxB,eAAe,MACf,eAAe,OACf,eAAe,GACjB;EAEA,MAAM,gBAAgB,IAAI,QAAQ,MAAM;EACxC,MAAM,cAAc,IAAI,MAAM,MAAM;EACpC,MAAM,gBAAgB,IAAI,MAAM,EAAE,MAAM,EAAE,CAAC;EAC3C,MAAM,gBAAgB,cAAc,QAAQ,MAAM;EAClD,MAAM,cAAc,cAAc,MAAM,MAAM;EAE9C,MAAM,iBAAiB,IAAI,QAAQ,OAAO;EAC1C,MAAM,eAAe,IAAI,MAAM,OAAO;EACtC,MAAM,iBAAiB,IAAI,MAAM,EAAE,OAAO,EAAE,CAAC;EAC7C,MAAM,iBAAiB,eAAe,QAAQ,OAAO;EACrD,MAAM,eAAe,eAAe,MAAM,OAAO;EAEjD,MAAM,gBAAgB,IAAI,QAAQ,MAAM;EACxC,MAAM,cAAc,IAAI,MAAM,MAAM;EACpC,MAAM,gBAAgB,IAAI,MAAM,EAAE,MAAM,EAAE,CAAC;EAC3C,MAAM,gBAAgB,cAAc,QAAQ,MAAM;EAClD,MAAM,cAAc,cAAc,MAAM,MAAM;EAE9C,OAAO;GACL;IACE,OAAO,gBAAgB,OAAO,cAAc;IAC5C,OAAO;IACP,KAAK;GACP;GACA;IACE,OAAO,gBAAgB,OAAO,kBAAkB;IAChD,OAAO;IACP,KAAK;GACP;GACA;IACE,OAAO,gBAAgB,OAAO,iBAAiB;IAC/C,OAAO,IAAI,aACT,cAAc,MACd,cAAc,OACd,cAAc,GAChB;IACA,KAAK,IAAI,aACP,YAAY,MACZ,YAAY,OACZ,YAAY,GACd;GACF;GACA;IACE,OAAO,gBAAgB,OAAO,iBAAiB;IAC/C,OAAO,IAAI,aACT,cAAc,MACd,cAAc,OACd,cAAc,GAChB;IACA,KAAK,IAAI,aACP,YAAY,MACZ,YAAY,OACZ,YAAY,GACd;GACF;GACA;IACE,OAAO,gBAAgB,OAAO,kBAAkB;IAChD,OAAO,IAAI,aACT,eAAe,MACf,eAAe,OACf,eAAe,GACjB;IACA,KAAK,IAAI,aACP,aAAa,MACb,aAAa,OACb,aAAa,GACf;GACF;GACA;IACE,OAAO,gBAAgB,OAAO,kBAAkB;IAChD,OAAO,IAAI,aACT,eAAe,MACf,eAAe,OACf,eAAe,GACjB;IACA,KAAK,IAAI,aACP,aAAa,MACb,aAAa,OACb,aAAa,GACf;GACF;GACA;IACE,OAAO,gBAAgB,OAAO,iBAAiB;IAC/C,OAAO,IAAI,aACT,cAAc,MACd,cAAc,OACd,cAAc,GAChB;IACA,KAAK,IAAI,aACP,YAAY,MACZ,YAAY,OACZ,YAAY,GACd;GACF;GACA;IACE,OAAO,gBAAgB,OAAO,iBAAiB;IAC/C,OAAO,IAAI,aACT,cAAc,MACd,cAAc,OACd,cAAc,GAChB;IACA,KAAK,IAAI,aACP,YAAY,MACZ,YAAY,OACZ,YAAY,GACd;GACF;EACF;CACF,GAAG;EAAC;EAAK;EAAe;CAAe,CAEhC,CAAA,CAAe,KAAK,UAAU;EACnC,IACG,WAAW,MAAM,IAAI,QAAQ,OAAO,IAAI,KACxC,WAAW,MAAM,MAAM,QAAQ,OAAO,IAAI,GAE3C,OAAO;GACL,GAAG;GACH,UAAU;GACV,eAAe,CAEf;EACF;EAGF,MAAM,EAAE,OAAO,KAAK,YAAY,uBAC9B,MAAM,OACN,MAAM,KACN,SACA,OACF;EAEA,MAAM,iBAAiB,WAAW,CAAC,aAAa;GAAE;GAAO;EAAI,CAAC;EAE9D,OAAO;GACL,GAAG;GACH;GACA;GACA,UAAU;GACV,eAAe;IACb,IAAI,CAAC,gBACH,MAAM,SAAS;KAAE;KAAO;IAAI,CAAC;GAEjC;EACF;CACF,CAAC;AACH"}
+{"version":3,"file":"useCalendarDateRangePresets.mjs","names":["locales"],"sources":["../../../../../../../../../../src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.ts"],"sourcesContent":["import { DateTime } from \"luxon\";\nimport { CalendarDate, toCalendarDate } from \"@internationalized/date\";\nimport { useContext, useMemo } from \"react\";\nimport { RangeCalendarStateContext } from \"react-aria-components\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"../../../locales/*.locale.json\";\nimport invariant from \"invariant\";\n\nexport interface DateRangePresetItem {\n  start: CalendarDate;\n  end: CalendarDate;\n  label: string;\n}\n\nexport type DateRangePresets = DateRangePresetItem[];\n\ninterface CalendarDateRangePresetItem extends DateRangePresetItem {\n  onPress: () => void;\n  disabled: boolean;\n}\n\nconst clampCalendarDate = (\n  date: CalendarDate,\n  minDate?: CalendarDate,\n  maxDate?: CalendarDate,\n) => {\n  if (minDate && date.compare(minDate) < 0) {\n    return minDate;\n  }\n\n  if (maxDate && date.compare(maxDate) > 0) {\n    return maxDate;\n  }\n\n  return date;\n};\n\nconst clampCalendarDateRange = (\n  startDate: CalendarDate,\n  endDate: CalendarDate,\n  minDate?: CalendarDate,\n  maxDate?: CalendarDate,\n) => {\n  const clampedStart = clampCalendarDate(startDate, minDate, maxDate);\n  const clampedEnd = clampCalendarDate(endDate, minDate, maxDate);\n\n  return {\n    start: clampedStart,\n    end: clampedEnd,\n    invalid: clampedStart.compare(clampedEnd) > 0,\n  };\n};\n\n/** @internal * */\nexport const useCalendarDateRangePresets = (\n  customPresets?: DateRangePresets | boolean,\n): CalendarDateRangePresetItem[] => {\n  const now = DateTime.local();\n  const state = useContext(RangeCalendarStateContext);\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Calendar\");\n\n  invariant(!!state, \"Could not find RangeCalendarStateContext.\");\n\n  const minDate = state.minValue ? toCalendarDate(state.minValue) : undefined;\n  const maxDate = state.maxValue ? toCalendarDate(state.maxValue) : undefined;\n\n  const isValidRange = (range: { start: CalendarDate; end: CalendarDate }) =>\n    !state.isInvalid(range.start) && !state.isInvalid(range.end);\n\n  const possibleRanges = useMemo<DateRangePresets>(() => {\n    if (typeof customPresets !== \"boolean\") {\n      return customPresets ?? [];\n    }\n\n    const todayDate = new CalendarDate(now.year, now.month, now.day);\n    const yesterdayLuxon = now.minus({ days: 1 });\n    const yesterdayDate = new CalendarDate(\n      yesterdayLuxon.year,\n      yesterdayLuxon.month,\n      yesterdayLuxon.day,\n    );\n\n    const thisWeekStart = now.startOf(\"week\");\n    const thisWeekEnd = now.endOf(\"week\");\n    const lastWeekLuxon = now.minus({ week: 1 });\n    const lastWeekStart = lastWeekLuxon.startOf(\"week\");\n    const lastWeekEnd = lastWeekLuxon.endOf(\"week\");\n\n    const thisMonthStart = now.startOf(\"month\");\n    const thisMonthEnd = now.endOf(\"month\");\n    const lastMonthLuxon = now.minus({ month: 1 });\n    const lastMonthStart = lastMonthLuxon.startOf(\"month\");\n    const lastMonthEnd = lastMonthLuxon.endOf(\"month\");\n\n    const thisYearStart = now.startOf(\"year\");\n    const thisYearEnd = now.endOf(\"year\");\n    const lastYearLuxon = now.minus({ year: 1 });\n    const lastYearStart = lastYearLuxon.startOf(\"year\");\n    const lastYearEnd = lastYearLuxon.endOf(\"year\");\n\n    return [\n      {\n        label: stringFormatter.format(\"preset.today\"),\n        start: todayDate,\n        end: todayDate,\n      },\n      {\n        label: stringFormatter.format(\"preset.yesterday\"),\n        start: yesterdayDate,\n        end: yesterdayDate,\n      },\n      {\n        label: stringFormatter.format(\"preset.thisWeek\"),\n        start: new CalendarDate(\n          thisWeekStart.year,\n          thisWeekStart.month,\n          thisWeekStart.day,\n        ),\n        end: new CalendarDate(\n          thisWeekEnd.year,\n          thisWeekEnd.month,\n          thisWeekEnd.day,\n        ),\n      },\n      {\n        label: stringFormatter.format(\"preset.lastWeek\"),\n        start: new CalendarDate(\n          lastWeekStart.year,\n          lastWeekStart.month,\n          lastWeekStart.day,\n        ),\n        end: new CalendarDate(\n          lastWeekEnd.year,\n          lastWeekEnd.month,\n          lastWeekEnd.day,\n        ),\n      },\n      {\n        label: stringFormatter.format(\"preset.thisMonth\"),\n        start: new CalendarDate(\n          thisMonthStart.year,\n          thisMonthStart.month,\n          thisMonthStart.day,\n        ),\n        end: new CalendarDate(\n          thisMonthEnd.year,\n          thisMonthEnd.month,\n          thisMonthEnd.day,\n        ),\n      },\n      {\n        label: stringFormatter.format(\"preset.lastMonth\"),\n        start: new CalendarDate(\n          lastMonthStart.year,\n          lastMonthStart.month,\n          lastMonthStart.day,\n        ),\n        end: new CalendarDate(\n          lastMonthEnd.year,\n          lastMonthEnd.month,\n          lastMonthEnd.day,\n        ),\n      },\n      {\n        label: stringFormatter.format(\"preset.thisYear\"),\n        start: new CalendarDate(\n          thisYearStart.year,\n          thisYearStart.month,\n          thisYearStart.day,\n        ),\n        end: new CalendarDate(\n          thisYearEnd.year,\n          thisYearEnd.month,\n          thisYearEnd.day,\n        ),\n      },\n      {\n        label: stringFormatter.format(\"preset.lastYear\"),\n        start: new CalendarDate(\n          lastYearStart.year,\n          lastYearStart.month,\n          lastYearStart.day,\n        ),\n        end: new CalendarDate(\n          lastYearEnd.year,\n          lastYearEnd.month,\n          lastYearEnd.day,\n        ),\n      },\n    ];\n  }, [now, customPresets, stringFormatter]);\n\n  return possibleRanges.map((range) => {\n    if (\n      (minDate && range.end.compare(minDate) < 0) ||\n      (maxDate && range.start.compare(maxDate) > 0)\n    ) {\n      return {\n        ...range,\n        disabled: true,\n        onPress: () => {\n          // void\n        },\n      };\n    }\n\n    const { start, end, invalid } = clampCalendarDateRange(\n      range.start,\n      range.end,\n      minDate,\n      maxDate,\n    );\n\n    const presetDisabled = invalid || !isValidRange({ start, end });\n\n    return {\n      ...range,\n      start,\n      end,\n      disabled: presetDisabled,\n      onPress: () => {\n        if (!presetDisabled) {\n          state.setValue({ start, end });\n        }\n      },\n    };\n  });\n};\n"],"mappings":";;;;;;;;;;AAqBA,IAAM,qBACJ,MACA,SACA,YACG;CACH,IAAI,WAAW,KAAK,QAAQ,OAAO,IAAI,GACrC,OAAO;CAGT,IAAI,WAAW,KAAK,QAAQ,OAAO,IAAI,GACrC,OAAO;CAGT,OAAO;AACT;AAEA,IAAM,0BACJ,WACA,SACA,SACA,YACG;CACH,MAAM,eAAe,kBAAkB,WAAW,SAAS,OAAO;CAClE,MAAM,aAAa,kBAAkB,SAAS,SAAS,OAAO;CAE9D,OAAO;EACL,OAAO;EACP,KAAK;EACL,SAAS,aAAa,QAAQ,UAAU,IAAI;CAC9C;AACF;;AAGA,IAAa,+BACX,kBACkC;CAClC,MAAM,MAAM,SAAS,MAAM;CAC3B,MAAM,QAAQ,WAAW,yBAAyB;CAClD,MAAM,kBAAkB,4BAA4BA,kBAAS,UAAU;CAEvE,UAAU,CAAC,CAAC,OAAO,2CAA2C;CAE9D,MAAM,UAAU,MAAM,WAAW,eAAe,MAAM,QAAQ,IAAI,KAAA;CAClE,MAAM,UAAU,MAAM,WAAW,eAAe,MAAM,QAAQ,IAAI,KAAA;CAElE,MAAM,gBAAgB,UACpB,CAAC,MAAM,UAAU,MAAM,KAAK,KAAK,CAAC,MAAM,UAAU,MAAM,GAAG;CA6H7D,OA3HuB,cAAgC;EACrD,IAAI,OAAO,kBAAkB,WAC3B,OAAO,iBAAiB,CAAC;EAG3B,MAAM,YAAY,IAAI,aAAa,IAAI,MAAM,IAAI,OAAO,IAAI,GAAG;EAC/D,MAAM,iBAAiB,IAAI,MAAM,EAAE,MAAM,EAAE,CAAC;EAC5C,MAAM,gBAAgB,IAAI,aACxB,eAAe,MACf,eAAe,OACf,eAAe,GACjB;EAEA,MAAM,gBAAgB,IAAI,QAAQ,MAAM;EACxC,MAAM,cAAc,IAAI,MAAM,MAAM;EACpC,MAAM,gBAAgB,IAAI,MAAM,EAAE,MAAM,EAAE,CAAC;EAC3C,MAAM,gBAAgB,cAAc,QAAQ,MAAM;EAClD,MAAM,cAAc,cAAc,MAAM,MAAM;EAE9C,MAAM,iBAAiB,IAAI,QAAQ,OAAO;EAC1C,MAAM,eAAe,IAAI,MAAM,OAAO;EACtC,MAAM,iBAAiB,IAAI,MAAM,EAAE,OAAO,EAAE,CAAC;EAC7C,MAAM,iBAAiB,eAAe,QAAQ,OAAO;EACrD,MAAM,eAAe,eAAe,MAAM,OAAO;EAEjD,MAAM,gBAAgB,IAAI,QAAQ,MAAM;EACxC,MAAM,cAAc,IAAI,MAAM,MAAM;EACpC,MAAM,gBAAgB,IAAI,MAAM,EAAE,MAAM,EAAE,CAAC;EAC3C,MAAM,gBAAgB,cAAc,QAAQ,MAAM;EAClD,MAAM,cAAc,cAAc,MAAM,MAAM;EAE9C,OAAO;GACL;IACE,OAAO,gBAAgB,OAAO,cAAc;IAC5C,OAAO;IACP,KAAK;GACP;GACA;IACE,OAAO,gBAAgB,OAAO,kBAAkB;IAChD,OAAO;IACP,KAAK;GACP;GACA;IACE,OAAO,gBAAgB,OAAO,iBAAiB;IAC/C,OAAO,IAAI,aACT,cAAc,MACd,cAAc,OACd,cAAc,GAChB;IACA,KAAK,IAAI,aACP,YAAY,MACZ,YAAY,OACZ,YAAY,GACd;GACF;GACA;IACE,OAAO,gBAAgB,OAAO,iBAAiB;IAC/C,OAAO,IAAI,aACT,cAAc,MACd,cAAc,OACd,cAAc,GAChB;IACA,KAAK,IAAI,aACP,YAAY,MACZ,YAAY,OACZ,YAAY,GACd;GACF;GACA;IACE,OAAO,gBAAgB,OAAO,kBAAkB;IAChD,OAAO,IAAI,aACT,eAAe,MACf,eAAe,OACf,eAAe,GACjB;IACA,KAAK,IAAI,aACP,aAAa,MACb,aAAa,OACb,aAAa,GACf;GACF;GACA;IACE,OAAO,gBAAgB,OAAO,kBAAkB;IAChD,OAAO,IAAI,aACT,eAAe,MACf,eAAe,OACf,eAAe,GACjB;IACA,KAAK,IAAI,aACP,aAAa,MACb,aAAa,OACb,aAAa,GACf;GACF;GACA;IACE,OAAO,gBAAgB,OAAO,iBAAiB;IAC/C,OAAO,IAAI,aACT,cAAc,MACd,cAAc,OACd,cAAc,GAChB;IACA,KAAK,IAAI,aACP,YAAY,MACZ,YAAY,OACZ,YAAY,GACd;GACF;GACA;IACE,OAAO,gBAAgB,OAAO,iBAAiB;IAC/C,OAAO,IAAI,aACT,cAAc,MACd,cAAc,OACd,cAAc,GAChB;IACA,KAAK,IAAI,aACP,YAAY,MACZ,YAAY,OACZ,YAAY,GACd;GACF;EACF;CACF,GAAG;EAAC;EAAK;EAAe;CAAe,CAEhC,CAAA,CAAe,KAAK,UAAU;EACnC,IACG,WAAW,MAAM,IAAI,QAAQ,OAAO,IAAI,KACxC,WAAW,MAAM,MAAM,QAAQ,OAAO,IAAI,GAE3C,OAAO;GACL,GAAG;GACH,UAAU;GACV,eAAe,CAEf;EACF;EAGF,MAAM,EAAE,OAAO,KAAK,YAAY,uBAC9B,MAAM,OACN,MAAM,KACN,SACA,OACF;EAEA,MAAM,iBAAiB,WAAW,CAAC,aAAa;GAAE;GAAO;EAAI,CAAC;EAE9D,OAAO;GACL,GAAG;GACH;GACA;GACA,UAAU;GACV,eAAe;IACb,IAAI,CAAC,gBACH,MAAM,SAAS;KAAE;KAAO;IAAI,CAAC;GAEjC;EACF;CACF,CAAC;AACH"}

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

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  type FC,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\n  useId,\n  useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n  CartesianChartLayout,\n  ChartDataValue,\n  DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n  extends\n    Pick<\n      ComponentProps<typeof ComposedChart>,\n      \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  /** The data points rendered by the chart. */\n  data?: TData[];\n\n  /** The height of the chart. */\n  height?: string;\n\n  /**\n   * The orientation of the axes and graphical items. `\"horizontal\"` puts the\n   * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n   * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n   * on their own; only the `dataKey` moves to whichever axis is the categorical\n   * one.\n   *\n   * @default \"horizontal\"\n   */\n  layout?: CartesianChartLayout;\n\n  /** View that is provided when data is empty/undefined */\n  emptyView?: ReactNode;\n\n  /**\n   * Allow the height controlling container to set flex-grow: 1. Can only be\n   * used in combination with `height`\n   */\n  flexGrow?: boolean;\n}\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n  const {\n    children,\n    data,\n    className,\n    height,\n    flexGrow,\n    emptyView,\n    layout = \"horizontal\",\n    ...rest\n  } = props;\n  const warnDeprecation = useWarnDeprecation();\n\n  const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n  const showEmptyView = !!((!data || data.length === 0) && emptyView);\n  const rootClassName = clsx(\n    styles.cartesianChart,\n    showEmptyView && styles.emptyView,\n    className,\n  );\n  const usesDeprecatedEmptyView = !!emptyView && !isValidElement(emptyView);\n\n  if (usesDeprecatedEmptyView) {\n    warnDeprecation(\n      \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n    );\n  }\n\n  const emptyElement = useMemo(() => {\n    if (isValidElement(emptyView)) {\n      return emptyView;\n    }\n\n    if (!emptyView) {\n      return;\n    }\n\n    return null;\n  }, [emptyView]);\n\n  const chartId = useId().replaceAll(/[^\\w-]/g, \"\");\n  const contextValue = useMemo(\n    () => ({ layout, stackIdPrefix: `${chartId}-` }),\n    [layout, chartId],\n  );\n\n  return (\n    <CartesianChartContextProvider value={contextValue}>\n      <Wrap if={height}>\n        <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n          <ResponsiveContainer\n            initialDimension={{\n              // fix warning on initial render\n              width: 1,\n              height: 1,\n            }}\n            width={height ? undefined : \"100%\"}\n            aspect={height ? undefined : 3}\n            ref={containerRef}\n          >\n            <ComposedChart\n              data={data}\n              className={rootClassName}\n              layout={layout}\n              {...rest}\n            >\n              {children}\n              {showEmptyView && viewDimensions && (\n                <foreignObject {...viewDimensions}>\n                  <DivView className={styles.emptyViewContainer}>\n                    {emptyElement}\n                  </DivView>\n                </foreignObject>\n              )}\n            </ComposedChart>\n          </ResponsiveContainer>\n        </div>\n      </Wrap>\n    </CartesianChartContextProvider>\n  );\n};\n\nexport const typedCartesianChart = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends ChartDataValue<any> = ChartDataValue<any>,\n  XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n  Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n  Area: TypedArea<TData>(),\n  Bar: TypedBar<TData>(),\n  XAxis: TypedXAxis<TData, XAxisDataKey>(),\n  YAxis: TypedYAxis<TData>(),\n  Grid: TypedChartGrid(),\n  Legend: TypedChartLegend(),\n  Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n  Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwEA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpB,8BAAO,gBACP,iBAAiB,8BAAO,WACxB,SACF;CAGA,IAFgC,CAAC,CAAC,aAAa,CAAC,eAAe,SAAS,GAGtE,gBACE,2IACF;CAGF,MAAM,eAAe,cAAc;EACjC,IAAI,eAAe,SAAS,GAC1B,OAAO;EAGT,IAAI,CAAC,WACH;EAGF,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAChD,MAAM,eAAe,eACZ;EAAE;EAAQ,eAAe,GAAG,QAAQ;CAAG,IAC9C,CAAC,QAAQ,OAAO,CAClB;CAEA,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAW,8BAAO;QACxB,UAAA;OACM,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}
+{"version":3,"file":"CartesianChart.mjs","names":["styles"],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  type FC,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\n  useId,\n  useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n  CartesianChartLayout,\n  ChartDataValue,\n  DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n  extends\n    Pick<\n      ComponentProps<typeof ComposedChart>,\n      \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  /** The data points rendered by the chart. */\n  data?: TData[];\n\n  /** The height of the chart. */\n  height?: string;\n\n  /**\n   * The orientation of the axes and graphical items. `\"horizontal\"` puts the\n   * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n   * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n   * on their own; only the `dataKey` moves to whichever axis is the categorical\n   * one.\n   *\n   * @default \"horizontal\"\n   */\n  layout?: CartesianChartLayout;\n\n  /** View that is provided when data is empty/undefined */\n  emptyView?: ReactNode;\n\n  /**\n   * Allow the height controlling container to set flex-grow: 1. Can only be\n   * used in combination with `height`\n   */\n  flexGrow?: boolean;\n}\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n  const {\n    children,\n    data,\n    className,\n    height,\n    flexGrow,\n    emptyView,\n    layout = \"horizontal\",\n    ...rest\n  } = props;\n  const warnDeprecation = useWarnDeprecation();\n\n  const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n  const showEmptyView = !!((!data || data.length === 0) && emptyView);\n  const rootClassName = clsx(\n    styles.cartesianChart,\n    showEmptyView && styles.emptyView,\n    className,\n  );\n  const usesDeprecatedEmptyView = !!emptyView && !isValidElement(emptyView);\n\n  if (usesDeprecatedEmptyView) {\n    warnDeprecation(\n      \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n    );\n  }\n\n  const emptyElement = useMemo(() => {\n    if (isValidElement(emptyView)) {\n      return emptyView;\n    }\n\n    if (!emptyView) {\n      return;\n    }\n\n    return null;\n  }, [emptyView]);\n\n  const chartId = useId().replaceAll(/[^\\w-]/g, \"\");\n  const contextValue = useMemo(\n    () => ({ layout, stackIdPrefix: `${chartId}-` }),\n    [layout, chartId],\n  );\n\n  return (\n    <CartesianChartContextProvider value={contextValue}>\n      <Wrap if={height}>\n        <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n          <ResponsiveContainer\n            initialDimension={{\n              // fix warning on initial render\n              width: 1,\n              height: 1,\n            }}\n            width={height ? undefined : \"100%\"}\n            aspect={height ? undefined : 3}\n            ref={containerRef}\n          >\n            <ComposedChart\n              data={data}\n              className={rootClassName}\n              layout={layout}\n              {...rest}\n            >\n              {children}\n              {showEmptyView && viewDimensions && (\n                <foreignObject {...viewDimensions}>\n                  <DivView className={styles.emptyViewContainer}>\n                    {emptyElement}\n                  </DivView>\n                </foreignObject>\n              )}\n            </ComposedChart>\n          </ResponsiveContainer>\n        </div>\n      </Wrap>\n    </CartesianChartContextProvider>\n  );\n};\n\nexport const typedCartesianChart = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends ChartDataValue<any> = ChartDataValue<any>,\n  XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n  Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n  Area: TypedArea<TData>(),\n  Bar: TypedBar<TData>(),\n  XAxis: TypedXAxis<TData, XAxisDataKey>(),\n  YAxis: TypedYAxis<TData>(),\n  Grid: TypedChartGrid(),\n  Legend: TypedChartLegend(),\n  Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n  Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwEA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpBA,8BAAO,gBACP,iBAAiBA,8BAAO,WACxB,SACF;CAGA,IAFgC,CAAC,CAAC,aAAa,CAAC,eAAe,SAAS,GAGtE,gBACE,2IACF;CAGF,MAAM,eAAe,cAAc;EACjC,IAAI,eAAe,SAAS,GAC1B,OAAO;EAGT,IAAI,CAAC,WACH;EAGF,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAChD,MAAM,eAAe,eACZ;EAAE;EAAQ,eAAe,GAAG,QAAQ;CAAG,IAC9C,CAAC,QAAQ,OAAO,CAClB;CAEA,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAWA,8BAAO;QACxB,UAAA;OACM,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}

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

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import { type FC, Suspense } from \"react\";\nimport { Tooltip, type TooltipProps } from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { TooltipContent } from \"@/components/CartesianChart/components/ChartTooltip/TooltipContent\";\nimport clsx from \"clsx\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport LoadingSpinnerView from \"@/views/LoadingSpinnerView\";\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart/components/ChartTooltip/types\";\n\nexport { TypedChartTooltip } from \"./types\";\n\nexport interface ChartTooltipProps<\n  TData extends ChartDataValue = ChartDataValue,\n  XAxisDataKey extends keyof TData = keyof TData,\n>\n  extends\n    Pick<\n      TooltipProps<ValueType, NameType>,\n      \"wrapperClassName\" | \"allowEscapeViewBox\"\n    >,\n    WithTooltipFormatters<TData, XAxisDataKey> {\n  /** Show progress bar for stacked areas @default \"true\" */\n  showProgressBar?: boolean;\n}\n\n/** @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n  const {\n    headingFormatter,\n    formatter,\n    showProgressBar = true,\n    ...rest\n  } = props;\n\n  return (\n    <Tooltip\n      {...rest}\n      cursor={false}\n      content={(props) => {\n        if (!props.active || !props.payload || props.payload.length === 0) {\n          return null;\n        }\n\n        const className = clsx(props.wrapperClassName, styles.chartTooltip);\n        return (\n          <div className={className}>\n            <Suspense fallback={<LoadingSpinnerView />}>\n              <TooltipContent\n                {...props}\n                headingFormatter={headingFormatter}\n                formatter={formatter}\n                showProgressBar={showProgressBar}\n              />\n            </Suspense>\n          </div>\n        );\n      }}\n    />\n  );\n};\n\nexport default ChartTooltip;\n"],"mappings":";;;;;;;;;;;;AA8BA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,kBACA,WACA,kBAAkB,MAClB,GAAG,SACD;CAEJ,OACE,oBAAC,SAAD;EACE,GAAI;EACJ,QAAQ;EACR,UAAU,UAAU;GAClB,IAAI,CAAC,MAAM,UAAU,CAAC,MAAM,WAAW,MAAM,QAAQ,WAAW,GAC9D,OAAO;GAGT,MAAM,YAAY,KAAK,MAAM,kBAAkB,4BAAO,YAAY;GAClE,OACE,oBAAC,OAAD;IAAgB;IACd,UAAA,oBAAC,UAAD;KAAU,UAAU,oBAAC,oBAAD,CAAqB,CAAA;KACvC,UAAA,oBAAC,gBAAD;MACE,GAAI;MACc;MACP;MACM;KAClB,CAAA;IACO,CAAA;GACP,CAAA;EAET;CACD,CAAA;AAEL"}
+{"version":3,"file":"ChartTooltip.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import { type FC, Suspense } from \"react\";\nimport { Tooltip, type TooltipProps } from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { TooltipContent } from \"@/components/CartesianChart/components/ChartTooltip/TooltipContent\";\nimport clsx from \"clsx\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport LoadingSpinnerView from \"@/views/LoadingSpinnerView\";\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart/components/ChartTooltip/types\";\n\nexport { TypedChartTooltip } from \"./types\";\n\nexport interface ChartTooltipProps<\n  TData extends ChartDataValue = ChartDataValue,\n  XAxisDataKey extends keyof TData = keyof TData,\n>\n  extends\n    Pick<\n      TooltipProps<ValueType, NameType>,\n      \"wrapperClassName\" | \"allowEscapeViewBox\"\n    >,\n    WithTooltipFormatters<TData, XAxisDataKey> {\n  /** Show progress bar for stacked areas @default \"true\" */\n  showProgressBar?: boolean;\n}\n\n/** @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n  const {\n    headingFormatter,\n    formatter,\n    showProgressBar = true,\n    ...rest\n  } = props;\n\n  return (\n    <Tooltip\n      {...rest}\n      cursor={false}\n      content={(props) => {\n        if (!props.active || !props.payload || props.payload.length === 0) {\n          return null;\n        }\n\n        const className = clsx(props.wrapperClassName, styles.chartTooltip);\n        return (\n          <div className={className}>\n            <Suspense fallback={<LoadingSpinnerView />}>\n              <TooltipContent\n                {...props}\n                headingFormatter={headingFormatter}\n                formatter={formatter}\n                showProgressBar={showProgressBar}\n              />\n            </Suspense>\n          </div>\n        );\n      }}\n    />\n  );\n};\n\nexport default ChartTooltip;\n"],"mappings":";;;;;;;;;;;;AA8BA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,kBACA,WACA,kBAAkB,MAClB,GAAG,SACD;CAEJ,OACE,oBAAC,SAAD;EACE,GAAI;EACJ,QAAQ;EACR,UAAU,UAAU;GAClB,IAAI,CAAC,MAAM,UAAU,CAAC,MAAM,WAAW,MAAM,QAAQ,WAAW,GAC9D,OAAO;GAGT,MAAM,YAAY,KAAK,MAAM,kBAAkBA,4BAAO,YAAY;GAClE,OACE,oBAAC,OAAD;IAAgB;IACd,UAAA,oBAAC,UAAD;KAAU,UAAU,oBAAC,oBAAD,CAAqB,CAAA;KACvC,UAAA,oBAAC,gBAAD;MACE,GAAI;MACc;MACP;MACM;KAClB,CAAA;IACO,CAAA;GACP,CAAA;EAET;CACD,CAAA;AAEL"}

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipLegendItem.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.tsx"],"sourcesContent":["import { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type { FC } from \"react\";\nimport type { DefaultTooltipContentProps } from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\n\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart/components/ChartTooltip/types\";\n\n/** @internal */\nexport type TooltipPayloadItem = NonNullable<\n  DefaultTooltipContentProps<ValueType, NameType>[\"payload\"]\n>[number];\n\n/** @internal */\ninterface LegendItemLabelProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TTooltipLabelValue extends keyof TData = keyof TData,\n> extends Pick<WithTooltipFormatters<TData, TTooltipLabelValue>, \"formatter\"> {\n  item: TooltipPayloadItem;\n  index: number;\n}\n\n/** @internal */\nexport const TooltipLegendItem: FC<LegendItemLabelProps> = ({\n  formatter,\n  item,\n  index,\n}) => {\n  const { value, dataKey, unit, fill, name } = item;\n\n  const formattedLabel = usePromise(\n    (value, dataKey, index, unit, formatter, name) =>\n      formatter\n        ? formatter(value, String(name), index, unit)\n        : `${name ?? \"\"} (${value ?? \"\"}${unit ? unit : \"\"})`,\n    [value, dataKey, index, unit, formatter, name] as const,\n  );\n\n  return <LegendItem color={fill}>{formattedLabel}</LegendItem>;\n};\n"],"mappings":";;;;;;;AA2BA,IAAa,qBAA+C,EAC1D,WACA,MACA,YACI;CACJ,MAAM,EAAE,OAAO,SAAS,MAAM,MAAM,SAAS;CAE7C,MAAM,iBAAiB,YACpB,OAAO,SAAS,OAAO,MAAM,WAAW,SACvC,YACI,UAAU,OAAO,OAAO,IAAI,GAAG,OAAO,IAAI,IAC1C,GAAG,QAAQ,GAAG,IAAI,SAAS,KAAK,OAAO,OAAO,GAAG,IACvD;EAAC;EAAO;EAAS;EAAO;EAAM;EAAW;CAAI,CAC/C;CAEA,OAAO,oBAAC,YAAD;EAAY,OAAO;EAAO,UAAA;CAA2B,CAAA;AAC9D"}
+{"version":3,"file":"TooltipLegendItem.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.tsx"],"sourcesContent":["import { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type { FC } from \"react\";\nimport type { DefaultTooltipContentProps } from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\n\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart/components/ChartTooltip/types\";\n\nexport type TooltipPayloadItem = NonNullable<\n  DefaultTooltipContentProps<ValueType, NameType>[\"payload\"]\n>[number];\n\n/** @internal */\ninterface LegendItemLabelProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TTooltipLabelValue extends keyof TData = keyof TData,\n> extends Pick<WithTooltipFormatters<TData, TTooltipLabelValue>, \"formatter\"> {\n  item: TooltipPayloadItem;\n  index: number;\n}\n\n/** @internal */\nexport const TooltipLegendItem: FC<LegendItemLabelProps> = ({\n  formatter,\n  item,\n  index,\n}) => {\n  const { value, dataKey, unit, fill, name } = item;\n\n  const formattedLabel = usePromise(\n    (value, dataKey, index, unit, formatter, name) =>\n      formatter\n        ? formatter(value, String(name), index, unit)\n        : `${name ?? \"\"} (${value ?? \"\"}${unit ? unit : \"\"})`,\n    [value, dataKey, index, unit, formatter, name] as const,\n  );\n\n  return <LegendItem color={fill}>{formattedLabel}</LegendItem>;\n};\n"],"mappings":";;;;;;;AA0BA,IAAa,qBAA+C,EAC1D,WACA,MACA,YACI;CACJ,MAAM,EAAE,OAAO,SAAS,MAAM,MAAM,SAAS;CAE7C,MAAM,iBAAiB,YACpB,OAAO,SAAS,OAAO,MAAM,WAAW,SACvC,YACI,UAAU,OAAO,OAAO,IAAI,GAAG,OAAO,IAAI,IAC1C,GAAG,QAAQ,GAAG,IAAI,SAAS,KAAK,OAAO,OAAO,GAAG,IACvD;EAAC;EAAO;EAAS;EAAO;EAAM;EAAW;CAAI,CAC/C;CAEA,OAAO,oBAAC,YAAD;EAAY,OAAO;EAAO,UAAA;CAA2B,CAAA;AAC9D"}

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipProgressBar.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { ProgressBar } from \"@/components/ProgressBar\";\nimport { Label } from \"@/components/Label\";\nimport type { TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport locales from \"../../locales/*.locale.json\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\n\ninterface TooltipProgressBarProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TTooltipLabelValue extends keyof TData = keyof TData,\n> extends Pick<\n  WithTooltipFormatters<TData, TTooltipLabelValue>,\n  \"progressBarFormatter\"\n> {\n  items: TooltipPayloadItem[];\n}\n\nexport const TooltipProgressBar: FC<TooltipProgressBarProps> = (props) => {\n  const { items, progressBarFormatter } = props;\n\n  const areaItems = items.filter(\n    (item) => item.fill !== \"none\" && item.graphicalItemId.includes(\"area\"),\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(\n    locales,\n    \"CartesianChart\",\n  );\n\n  const unit = areaItems[0]?.unit;\n\n  const segments = areaItems.map((i) => ({\n    title: i.dataKey as string,\n    value: i.value as number,\n    color: i.fill,\n  }));\n\n  const total = areaItems.reduce((sum, segment) => {\n    if (typeof segment.value === \"number\") {\n      return sum + segment.value;\n    }\n\n    return sum;\n  }, 0);\n\n  const formattedLabel = usePromise(\n    (value, unit, formatter) =>\n      formatter ? formatter(value, unit) : `${value}${unit ? unit : \"\"}`,\n    [total, unit, progressBarFormatter] as const,\n  );\n\n  if (areaItems.length < 2) {\n    return null;\n  }\n\n  return (\n    <ProgressBar\n      className={styles.progressBar}\n      showLegend={false}\n      segments={segments}\n      valueLabel={formattedLabel}\n      maxValue={unit === \"%\" ? undefined : total}\n    >\n      <Label>{stringFormatter.format(\"tooltip.progressBar.total\")}</Label>\n    </ProgressBar>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqBA,IAAa,sBAAmD,UAAU;CACxE,MAAM,EAAE,OAAO,yBAAyB;CAExC,MAAM,YAAY,MAAM,QACrB,SAAS,KAAK,SAAS,UAAU,KAAK,gBAAgB,SAAS,MAAM,CACxE;CAEA,MAAM,kBAAkB,4BACtB,kBACA,gBACF;CAEA,MAAM,OAAO,UAAU,EAAE,EAAE;CAE3B,MAAM,WAAW,UAAU,KAAK,OAAO;EACrC,OAAO,EAAE;EACT,OAAO,EAAE;EACT,OAAO,EAAE;CACX,EAAE;CAEF,MAAM,QAAQ,UAAU,QAAQ,KAAK,YAAY;EAC/C,IAAI,OAAO,QAAQ,UAAU,UAC3B,OAAO,MAAM,QAAQ;EAGvB,OAAO;CACT,GAAG,CAAC;CAEJ,MAAM,iBAAiB,YACpB,OAAO,MAAM,cACZ,YAAY,UAAU,OAAO,IAAI,IAAI,GAAG,QAAQ,OAAO,OAAO,MAChE;EAAC;EAAO;EAAM;CAAoB,CACpC;CAEA,IAAI,UAAU,SAAS,GACrB,OAAO;CAGT,OACE,oBAAC,aAAD;EACE,WAAW,4BAAO;EAClB,YAAY;EACF;EACV,YAAY;EACZ,UAAU,SAAS,MAAM,KAAA,IAAY;EAErC,UAAA,oBAAC,OAAD,EAAA,UAAQ,gBAAgB,OAAO,2BAA2B,EAAS,CAAA;CACxD,CAAA;AAEjB"}
+{"version":3,"file":"TooltipProgressBar.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { ProgressBar } from \"@/components/ProgressBar\";\nimport { Label } from \"@/components/Label\";\nimport type { TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport locales from \"../../locales/*.locale.json\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\n\ninterface TooltipProgressBarProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TTooltipLabelValue extends keyof TData = keyof TData,\n> extends Pick<\n  WithTooltipFormatters<TData, TTooltipLabelValue>,\n  \"progressBarFormatter\"\n> {\n  items: TooltipPayloadItem[];\n}\n\nexport const TooltipProgressBar: FC<TooltipProgressBarProps> = (props) => {\n  const { items, progressBarFormatter } = props;\n\n  const areaItems = items.filter(\n    (item) => item.fill !== \"none\" && item.graphicalItemId.includes(\"area\"),\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(\n    locales,\n    \"CartesianChart\",\n  );\n\n  const unit = areaItems[0]?.unit;\n\n  const segments = areaItems.map((i) => ({\n    title: i.dataKey as string,\n    value: i.value as number,\n    color: i.fill,\n  }));\n\n  const total = areaItems.reduce((sum, segment) => {\n    if (typeof segment.value === \"number\") {\n      return sum + segment.value;\n    }\n\n    return sum;\n  }, 0);\n\n  const formattedLabel = usePromise(\n    (value, unit, formatter) =>\n      formatter ? formatter(value, unit) : `${value}${unit ? unit : \"\"}`,\n    [total, unit, progressBarFormatter] as const,\n  );\n\n  if (areaItems.length < 2) {\n    return null;\n  }\n\n  return (\n    <ProgressBar\n      className={styles.progressBar}\n      showLegend={false}\n      segments={segments}\n      valueLabel={formattedLabel}\n      maxValue={unit === \"%\" ? undefined : total}\n    >\n      <Label>{stringFormatter.format(\"tooltip.progressBar.total\")}</Label>\n    </ProgressBar>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqBA,IAAa,sBAAmD,UAAU;CACxE,MAAM,EAAE,OAAO,yBAAyB;CAExC,MAAM,YAAY,MAAM,QACrB,SAAS,KAAK,SAAS,UAAU,KAAK,gBAAgB,SAAS,MAAM,CACxE;CAEA,MAAM,kBAAkB,4BACtBA,kBACA,gBACF;CAEA,MAAM,OAAO,UAAU,EAAE,EAAE;CAE3B,MAAM,WAAW,UAAU,KAAK,OAAO;EACrC,OAAO,EAAE;EACT,OAAO,EAAE;EACT,OAAO,EAAE;CACX,EAAE;CAEF,MAAM,QAAQ,UAAU,QAAQ,KAAK,YAAY;EAC/C,IAAI,OAAO,QAAQ,UAAU,UAC3B,OAAO,MAAM,QAAQ;EAGvB,OAAO;CACT,GAAG,CAAC;CAEJ,MAAM,iBAAiB,YACpB,OAAO,MAAM,cACZ,YAAY,UAAU,OAAO,IAAI,IAAI,GAAG,QAAQ,OAAO,OAAO,MAChE;EAAC;EAAO;EAAM;CAAoB,CACpC;CAEA,IAAI,UAAU,SAAS,GACrB,OAAO;CAGT,OACE,oBAAC,aAAD;EACE,WAAWC,4BAAO;EAClB,YAAY;EACF;EACV,YAAY;EACZ,UAAU,SAAS,MAAM,KAAA,IAAY;EAErC,UAAA,oBAAC,OAAD,EAAA,UAAQ,gBAAgB,OAAO,2BAA2B,EAAS,CAAA;CACxD,CAAA;AAEjB"}

package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.mjs";
+import { useCartesianChartContext } from "../../context.mjs";
 import { TypedYAxis } from "./types.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
@@ -16,13 +17,16 @@ import * as Recharts from "recharts";
 * @flr-ignore-props tickFormatter
 */
 var YAxis = (props) => {
-	const { domain, type = "auto", ...rest } = props;
+	const { domain, type = "auto", width, ...rest } = props;
 	const tokens = useDesignTokens();
+	const { layout } = useCartesianChartContext();
+	const isCategoryAxis = type === "category" || type === "auto" && layout === "vertical";
 	return /* @__PURE__ */ jsx(Recharts.YAxis, {
 		...rest,
 		allowDataOverflow: true,
 		domain,
 		type,
+		width: width ?? (isCategoryAxis ? "auto" : void 0),
 		fontSize: tokens.axis["font-size"].value,
 		tick: { fill: tokens.axis["color"].value },
 		tickMargin: parseInt(tokens.axis.spacing.value),

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

@@ -1 +1 @@
-{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, type = \"auto\", ...rest } = props;\n\n  const tokens = useDesignTokens();\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      type={type}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"color\"].value,\n      }}\n      tickMargin={parseInt(tokens.axis.spacing.value)}\n      tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;;;;;;;;;;AAwCA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,GAAG,SAAS;CAE3C,MAAM,SAAS,gBAAgB;CAE/B,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,EACJ,MAAM,OAAO,KAAK,QAAQ,CAAC,MAC7B;EACA,YAAY,SAAS,OAAO,KAAK,QAAQ,KAAK;EAC9C,UAAU,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CAClD,CAAA;AAEL"}
+{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n  /**\n   * The width of the axis in pixels. `\"auto\"` sizes the axis to its widest tick\n   * label. Defaults to `\"auto\"` for a category axis (e.g. with `layout` set to\n   * `\"vertical\"`) and to `60` otherwise. Pin a number to align the plot areas\n   * of synchronized charts.\n   */\n  width?: number | \"auto\";\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, type = \"auto\", width, ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const { layout } = useCartesianChartContext();\n\n  const isCategoryAxis =\n    type === \"category\" || (type === \"auto\" && layout === \"vertical\");\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      type={type}\n      width={width ?? (isCategoryAxis ? \"auto\" : undefined)}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"color\"].value,\n      }}\n      tickMargin={parseInt(tokens.axis.spacing.value)}\n      tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgDA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,GAAG,SAAS;CAElD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAE5C,MAAM,iBACJ,SAAS,cAAe,SAAS,UAAU,WAAW;CAExD,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,OAAO,UAAU,iBAAiB,SAAS,KAAA;EAC3C,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,EACJ,MAAM,OAAO,KAAK,QAAQ,CAAC,MAC7B;EACA,YAAY,SAAS,OAAO,KAAK,QAAQ,KAAK;EAC9C,UAAU,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CAClD,CAAA;AAEL"}

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.mjs","names":[],"sources":["../../../../../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./Chat.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ChatProps extends PropsWithChildren, PropsWithClassName {\n  /** The height of the chat. */\n  height?: CSSProperties[\"height\"];\n}\n\n/** @flr-generate all */\nexport const Chat: FC<ChatProps> = flowComponent(\n  \"Chat\",\n  (props) => {\n    const { height, className, children } = props;\n\n    const rootClassName = clsx(styles.chat, className);\n\n    const propsContext: PropsContext = {\n      MessageThread: {\n        tunnel: {\n          id: \"messageThread\",\n          component: \"Chat\",\n        },\n      },\n      FileCardList: {\n        className: styles.fileCardList,\n        tunnel: {\n          id: \"fileCardList\",\n          component: \"Chat\",\n        },\n      },\n      Button: {\n        className: dynamic((props) => {\n          return props.color === \"success\" || props.color === \"accent\"\n            ? styles.successButton\n            : styles.button;\n        }),\n      },\n    };\n\n    return (\n      <PropsContextProvider props={propsContext}>\n        <div style={{ height }} className={rootClassName}>\n          <div className={styles.messageThreadContainer}>\n            <UiComponentTunnelExit id=\"messageThread\" component=\"Chat\" />\n          </div>\n          <div className={styles.controls}>{children}</div>\n          <UiComponentTunnelExit id=\"fileCardList\" component=\"Chat\" />\n        </div>\n      </PropsContextProvider>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Chat;\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,OAAsB,cACjC,SACC,UAAU;CACT,MAAM,EAAE,QAAQ,WAAW,aAAa;CAExC,MAAM,gBAAgB,KAAK,oBAAO,MAAM,SAAS;CAEjD,MAAM,eAA6B;EACjC,eAAe,EACb,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,cAAc;GACZ,WAAW,oBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,QAAQ,EACN,WAAW,SAAS,UAAU;GAC5B,OAAO,MAAM,UAAU,aAAa,MAAM,UAAU,WAChD,oBAAO,gBACP,oBAAO;EACb,CAAC,EACH;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,OAAD;GAAK,OAAO,EAAE,OAAO;GAAG,WAAW;GAAnC,UAAA;IACE,oBAAC,OAAD;KAAK,WAAW,oBAAO;KACrB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAgB,WAAU;KAAQ,CAAA;IACzD,CAAA;IACL,oBAAC,OAAD;KAAK,WAAW,oBAAO;KAAW;IAAc,CAAA;IAChD,oBAAC,uBAAD;KAAuB,IAAG;KAAe,WAAU;IAAQ,CAAA;GACxD;;CACe,CAAA;AAE1B,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"Chat.mjs","names":["styles"],"sources":["../../../../../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./Chat.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ChatProps extends PropsWithChildren, PropsWithClassName {\n  /** The height of the chat. */\n  height?: CSSProperties[\"height\"];\n}\n\n/** @flr-generate all */\nexport const Chat: FC<ChatProps> = flowComponent(\n  \"Chat\",\n  (props) => {\n    const { height, className, children } = props;\n\n    const rootClassName = clsx(styles.chat, className);\n\n    const propsContext: PropsContext = {\n      MessageThread: {\n        tunnel: {\n          id: \"messageThread\",\n          component: \"Chat\",\n        },\n      },\n      FileCardList: {\n        className: styles.fileCardList,\n        tunnel: {\n          id: \"fileCardList\",\n          component: \"Chat\",\n        },\n      },\n      Button: {\n        className: dynamic((props) => {\n          return props.color === \"success\" || props.color === \"accent\"\n            ? styles.successButton\n            : styles.button;\n        }),\n      },\n    };\n\n    return (\n      <PropsContextProvider props={propsContext}>\n        <div style={{ height }} className={rootClassName}>\n          <div className={styles.messageThreadContainer}>\n            <UiComponentTunnelExit id=\"messageThread\" component=\"Chat\" />\n          </div>\n          <div className={styles.controls}>{children}</div>\n          <UiComponentTunnelExit id=\"fileCardList\" component=\"Chat\" />\n        </div>\n      </PropsContextProvider>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Chat;\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,OAAsB,cACjC,SACC,UAAU;CACT,MAAM,EAAE,QAAQ,WAAW,aAAa;CAExC,MAAM,gBAAgB,KAAKA,oBAAO,MAAM,SAAS;CAEjD,MAAM,eAA6B;EACjC,eAAe,EACb,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,cAAc;GACZ,WAAWA,oBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,QAAQ,EACN,WAAW,SAAS,UAAU;GAC5B,OAAO,MAAM,UAAU,aAAa,MAAM,UAAU,WAChDA,oBAAO,gBACPA,oBAAO;EACb,CAAC,EACH;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,OAAD;GAAK,OAAO,EAAE,OAAO;GAAG,WAAW;GAAnC,UAAA;IACE,oBAAC,OAAD;KAAK,WAAWA,oBAAO;KACrB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAgB,WAAU;KAAQ,CAAA;IACzD,CAAA;IACL,oBAAC,OAAD;KAAK,WAAWA,oBAAO;KAAW;IAAc,CAAA;IAChD,oBAAC,uBAAD;KAAuB,IAAG;KAAe,WAAU;IAAQ,CAAA;GACxD;;CACe,CAAA;AAE1B,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -15,13 +15,13 @@ import { useObjectRef } from "react-aria";
 /** @flr-generate all */
 var Checkbox = flowComponent("Checkbox", (props) => {
 	const { children, className, ref, inputClassName, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "Checkbox");
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "Checkbox");
 	const inputRef = useObjectRef(ref);
 	return /* @__PURE__ */ jsxs("div", {
-		...fieldProps,
-		className: clsx(Checkbox_module_default.checkbox, className, fieldProps.className),
+		className: clsx(Checkbox_module_default.checkbox, className, wrapperProps.className),
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Checkbox, {
 			...rest,
+			"aria-describedby": controlProps["aria-describedby"],
 			inputRef,
 			className: clsx(inputClassName, Checkbox_module_default.input),
 			children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(PropsContextProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface CheckboxProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The class name of the underlying input element. */\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props, \"Checkbox\");\n\n  const inputRef = useObjectRef(ref);\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(styles.checkbox, className, fieldProps.className)}\n    >\n      <FieldErrorCaptureContext>\n        <Aria.Checkbox\n          {...rest}\n          inputRef={inputRef}\n          className={clsx(inputClassName, styles.input)}\n        >\n          {({ isSelected, isIndeterminate }) => (\n            <PropsContextProvider props={fieldPropsContext}>\n              {isSelected ? (\n                <IconCheckboxChecked className={styles.icon} />\n              ) : isIndeterminate ? (\n                <IconCheckboxIndeterminate className={styles.icon} />\n              ) : (\n                <IconCheckboxEmpty className={styles.icon} />\n              )}\n              {children}\n            </PropsContextProvider>\n          )}\n        </Aria.Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,GAAG,SAAS;CAE9D,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,WAAW,aAAa,GAAG;CAEjC,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,wBAAO,UAAU,WAAW,WAAW,SAAS;EAFlE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,UAAN;GACE,GAAI;GACM;GACV,WAAW,KAAK,gBAAgB,wBAAO,KAAK;GAE1C,WAAA,EAAE,YAAY,sBACd,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,aACC,oBAAC,qBAAD,EAAqB,WAAW,wBAAO,KAAO,CAAA,IAC5C,kBACF,oBAAC,2BAAD,EAA2B,WAAW,wBAAO,KAAO,CAAA,IAEpD,oBAAC,mBAAD,EAAmB,WAAW,wBAAO,KAAO,CAAA,GAE7C,QACmB;;EAEX,CAAA,EACS,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
+{"version":3,"file":"Checkbox.mjs","names":["styles"],"sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface CheckboxProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The class name of the underlying input element. */\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n  } = useFieldComponent(props, \"Checkbox\");\n\n  const inputRef = useObjectRef(ref);\n\n  return (\n    <div className={clsx(styles.checkbox, className, wrapperProps.className)}>\n      <FieldErrorCaptureContext>\n        <Aria.Checkbox\n          {...rest}\n          aria-describedby={controlProps[\"aria-describedby\"]}\n          inputRef={inputRef}\n          className={clsx(inputClassName, styles.input)}\n        >\n          {({ isSelected, isIndeterminate }) => (\n            <PropsContextProvider props={fieldPropsContext}>\n              {isSelected ? (\n                <IconCheckboxChecked className={styles.icon} />\n              ) : isIndeterminate ? (\n                <IconCheckboxIndeterminate className={styles.icon} />\n              ) : (\n                <IconCheckboxEmpty className={styles.icon} />\n              )}\n              {children}\n            </PropsContextProvider>\n          )}\n        </Aria.Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,GAAG,SAAS;CAE9D,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,iBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,WAAW,aAAa,GAAG;CAEjC,OACE,qBAAC,OAAD;EAAK,WAAW,KAAKA,wBAAO,UAAU,WAAW,aAAa,SAAS;EAAvE,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,UAAN;GACE,GAAI;GACJ,oBAAkB,aAAa;GACrB;GACV,WAAW,KAAK,gBAAgBA,wBAAO,KAAK;GAE1C,WAAA,EAAE,YAAY,sBACd,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,aACC,oBAAC,qBAAD,EAAqB,WAAWA,wBAAO,KAAO,CAAA,IAC5C,kBACF,oBAAC,2BAAD,EAA2B,WAAWA,wBAAO,KAAO,CAAA,IAEpD,oBAAC,mBAAD,EAAmB,WAAWA,wBAAO,KAAO,CAAA,GAE7C,QACmB;;EAEX,CAAA,EACS,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

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

@@ -11,17 +11,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** @flr-generate all */
 var CheckboxButton = flowComponent("CheckboxButton", (props) => {
 	const { children, className, inputClassName, ...rest } = props;
-	const { fieldPropsContext, fieldProps, FieldErrorView, FieldErrorCaptureContext } = useFieldComponent(props, "CheckboxButton");
+	const { fieldPropsContext, wrapperProps, controlProps, FieldErrorView, FieldErrorCaptureContext } = useFieldComponent(props, "CheckboxButton");
 	const mergedPropsContext = {
 		Text: { className: CheckboxButton_module_default.label },
 		Content: { className: CheckboxButton_module_default.content },
 		...fieldPropsContext
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		...fieldProps,
-		className: clsx(fieldProps.className, CheckboxButton_module_default.checkboxButton, className),
+		className: clsx(wrapperProps.className, CheckboxButton_module_default.checkboxButton, className),
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Checkbox, {
 			...rest,
+			"aria-describedby": controlProps["aria-describedby"],
 			className: CheckboxButton_module_default.checkbox,
 			inputClassName: clsx(inputClassName, CheckboxButton_module_default.input),
 			children: /* @__PURE__ */ jsx(PropsContextProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, inputClassName, ...rest } = props;\n\n  const {\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorView,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxButton\");\n\n  const mergedPropsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.checkboxButton, className)}\n    >\n      <FieldErrorCaptureContext>\n        <Checkbox\n          {...rest}\n          className={styles.checkbox}\n          inputClassName={clsx(inputClassName, styles.input)}\n        >\n          <PropsContextProvider props={mergedPropsContext}>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default CheckboxButton;\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EAAE,UAAU,WAAW,gBAAgB,GAAG,SAAS;CAEzD,MAAM,EACJ,mBACA,YACA,gBACA,6BACE,kBAAkB,OAAO,gBAAgB;CAE7C,MAAM,qBAAmC;EACvC,MAAM,EACJ,WAAW,8BAAO,MACpB;EACA,SAAS,EACP,WAAW,8BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,WAAW,WAAW,8BAAO,gBAAgB,SAAS;EAFxE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,UAAD;GACE,GAAI;GACJ,WAAW,8BAAO;GAClB,gBAAgB,KAAK,gBAAgB,8BAAO,KAAK;GAEjD,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACd,CAAA,EACc,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
+{"version":3,"file":"CheckboxButton.mjs","names":["styles"],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, inputClassName, ...rest } = props;\n\n  const {\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    FieldErrorView,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxButton\");\n\n  const mergedPropsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div\n      className={clsx(wrapperProps.className, styles.checkboxButton, className)}\n    >\n      <FieldErrorCaptureContext>\n        <Checkbox\n          {...rest}\n          aria-describedby={controlProps[\"aria-describedby\"]}\n          className={styles.checkbox}\n          inputClassName={clsx(inputClassName, styles.input)}\n        >\n          <PropsContextProvider props={mergedPropsContext}>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default CheckboxButton;\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EAAE,UAAU,WAAW,gBAAgB,GAAG,SAAS;CAEzD,MAAM,EACJ,mBACA,cACA,cACA,gBACA,6BACE,kBAAkB,OAAO,gBAAgB;CAE7C,MAAM,qBAAmC;EACvC,MAAM,EACJ,WAAWA,8BAAO,MACpB;EACA,SAAS,EACP,WAAWA,8BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,aAAa,WAAWA,8BAAO,gBAAgB,SAAS;EAD1E,UAAA,CAGE,oBAAC,0BAAD,EAAA,UACE,oBAAC,UAAD;GACE,GAAI;GACJ,oBAAkB,aAAa;GAC/B,WAAWA,8BAAO;GAClB,gBAAgB,KAAK,gBAAgBA,8BAAO,KAAK;GAEjD,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACd,CAAA,EACc,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

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

@@ -15,7 +15,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
 	const { children, className, isInvalid, s, m, l, ref, ...rest } = props;
-	const { FieldErrorView, fieldPropsContext, fieldProps, FieldErrorCaptureContext } = useFieldComponent(props, "CheckboxGroup");
+	const { FieldErrorView, fieldPropsContext, wrapperProps, controlProps, FieldErrorCaptureContext } = useFieldComponent(props, "CheckboxGroup");
 	const propsContext = {
 		Checkbox: {
 			isInvalid,
@@ -39,9 +39,9 @@ var CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
 	useMakeFocusable(objectRef);
 	return /* @__PURE__ */ jsxs(Aria.CheckboxGroup, {
 		...rest,
-		...fieldProps,
+		...controlProps,
 		isInvalid,
-		className: clsx(fieldProps.className, className),
+		className: clsx(wrapperProps.className, className),
 		ref: objectRef,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CheckboxGroupProps\n  extends\n    PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n  const { children, className, isInvalid, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxGroup\");\n\n  const propsContext: PropsContext = {\n    Checkbox: {\n      isInvalid,\n      className: styles.checkbox,\n      tunnel: {\n        id: \"checkboxes\",\n        component: \"CheckboxGroup\",\n      },\n    },\n    CheckboxButton: {\n      isInvalid,\n      className: styles.checkboxButton,\n      tunnel: {\n        id: \"checkboxButtons\",\n        component: \"CheckboxGroup\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.CheckboxGroup\n      {...rest}\n      {...fieldProps}\n      isInvalid={isInvalid}\n      className={clsx(fieldProps.className, className)}\n      ref={objectRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          {children}\n\n          <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>\n            <UiComponentTunnelExit\n              id=\"checkboxButtons\"\n              component=\"CheckboxGroup\"\n            />\n          </ColumnLayout>\n\n          <ColumnLayout\n            s={s ?? [1]}\n            m={m ?? [1]}\n            l={l ?? [1]}\n            rowGap=\"s\"\n            className={styles.checkboxGroup}\n          >\n            <UiComponentTunnelExit id=\"checkboxes\" component=\"CheckboxGroup\" />\n          </ColumnLayout>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.CheckboxGroup>\n  );\n});\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS;CAElE,MAAM,EACJ,gBACA,mBACA,YACA,6BACE,kBAAkB,OAAO,eAAe;CAE5C,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,WAAW,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,gBAAgB;GACd;GACA,WAAW,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,OACE,qBAAC,KAAK,eAAN;EACE,GAAI;EACJ,GAAI;EACO;EACX,WAAW,KAAK,WAAW,WAAW,SAAS;EAC/C,KAAK;EALP,UAAA,CAOE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,WAAW,6BAAO;KAChD,UAAA,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACW,CAAA;IAEd,oBAAC,cAAD;KACE,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,QAAO;KACP,WAAW,6BAAO;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAa,WAAU;KAAiB,CAAA;IACtD,CAAA;GACM;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACC;;AAExB,CAAC"}
+{"version":3,"file":"CheckboxGroup.mjs","names":["styles"],"sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CheckboxGroupProps\n  extends\n    PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n  const { children, className, isInvalid, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxGroup\");\n\n  const propsContext: PropsContext = {\n    Checkbox: {\n      isInvalid,\n      className: styles.checkbox,\n      tunnel: {\n        id: \"checkboxes\",\n        component: \"CheckboxGroup\",\n      },\n    },\n    CheckboxButton: {\n      isInvalid,\n      className: styles.checkboxButton,\n      tunnel: {\n        id: \"checkboxButtons\",\n        component: \"CheckboxGroup\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.CheckboxGroup\n      {...rest}\n      {...controlProps}\n      isInvalid={isInvalid}\n      className={clsx(wrapperProps.className, className)}\n      ref={objectRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          {children}\n\n          <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>\n            <UiComponentTunnelExit\n              id=\"checkboxButtons\"\n              component=\"CheckboxGroup\"\n            />\n          </ColumnLayout>\n\n          <ColumnLayout\n            s={s ?? [1]}\n            m={m ?? [1]}\n            l={l ?? [1]}\n            rowGap=\"s\"\n            className={styles.checkboxGroup}\n          >\n            <UiComponentTunnelExit id=\"checkboxes\" component=\"CheckboxGroup\" />\n          </ColumnLayout>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.CheckboxGroup>\n  );\n});\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS;CAElE,MAAM,EACJ,gBACA,mBACA,cACA,cACA,6BACE,kBAAkB,OAAO,eAAe;CAE5C,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,WAAWA,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,gBAAgB;GACd;GACA,WAAWA,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,OACE,qBAAC,KAAK,eAAN;EACE,GAAI;EACJ,GAAI;EACO;EACX,WAAW,KAAK,aAAa,WAAW,SAAS;EACjD,KAAK;EALP,UAAA,CAOE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,WAAWA,6BAAO;KAChD,UAAA,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACW,CAAA;IAEd,oBAAC,cAAD;KACE,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,QAAO;KACP,WAAWA,6BAAO;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAa,WAAU;KAAiB,CAAA;IACtD,CAAA;GACM;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACC;;AAExB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CoachMark.mjs","names":[],"sources":["../../../../../../../src/components/CoachMark/CoachMark.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { PopoverProps } from \"@/components/Popover/Popover\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport styles from \"./CoachMark.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\n\nexport interface CoachMarkProps extends Omit<\n  PopoverProps,\n  // The popover's own shape, which a coach mark decides for itself.\n  | \"withTip\"\n  | \"modality\"\n  // react-aria's own non-modal switch, which would compete with the shape this\n  // component already decided on.\n  | \"isNonModal\"\n  | \"isDialogContent\"\n  | \"triggerRef\"\n  // Positioning and dismissal it does not hand out: it is never dismissed by an\n  // interaction outside it, it owns its Escape handling, and it renders where it\n  // stands instead of in a portal.\n  | \"getTargetRect\"\n  | \"shouldCloseOnInteractOutside\"\n  // Overridden in CSS to escape react-aria's viewport clamp, so a value here\n  // would be silently ignored.\n  | \"maxHeight\"\n  | \"isKeyboardDismissDisabled\"\n  | \"UNSTABLE_portalContainer\"\n  // Popover keeps this one working for the consumers it already has; a coach\n  // mark has none yet, so it ships only the current name.\n  | \"defaultOpen\"\n> {\n  /**\n   * The element the coach mark points at. It is an anchor, not a trigger —\n   * nothing about it opens the coach mark. Give it either this or `anchor`.\n   */\n  anchorRef?: RefObject<Element | null>;\n  /**\n   * The `id` of the element the coach mark points at, looked up once the\n   * element exists. Use it where a ref cannot be shared — an mStudio extension\n   * renders in a different context than the host, so a ref never arrives, while\n   * an id does.\n   */\n  anchor?: string;\n}\n\n/**\n * Resolves whichever anchor was given into something `Popover` can position\n * against.\n *\n * An id is looked up after the commit, and kept looking for until it resolves.\n * A single lookup would only work for an anchor that is already mounted, which\n * is the case this prop does not exist for: remotely the host materializes the\n * page in pieces, so the anchor regularly arrives after the coach mark. Without\n * the observer the hint stays parked and invisible, and nothing says why.\n */\nconst useAnchorRef = (\n  anchorRef: RefObject<Element | null> | undefined,\n  anchor: string | undefined,\n): RefObject<Element | null> => {\n  const [anchorElement, setAnchorElement] = useState<Element | null>(null);\n\n  useEffect(() => {\n    if (!anchor) {\n      setAnchorElement(null);\n      return;\n    }\n\n    const element = document.getElementById(anchor);\n    setAnchorElement(element);\n\n    if (element) {\n      return;\n    }\n\n    const observer = new MutationObserver(() => {\n      const late = document.getElementById(anchor);\n\n      if (late) {\n        setAnchorElement(late);\n        observer.disconnect();\n      }\n    });\n\n    observer.observe(document.body, { childList: true, subtree: true });\n\n    return () => observer.disconnect();\n  }, [anchor]);\n\n  return useMemo(\n    () => anchorRef ?? { current: anchorElement },\n    [anchorRef, anchorElement],\n  );\n};\n\n/**\n * Points at a control the user did not ask about — a feature that is new, moved\n * or easy to miss. It opens on its own, so it stays out of the way: the page\n * below keeps scrolling, focus is left alone, and the coach mark rides along\n * with its anchor instead of closing at the first scroll.\n *\n * Nothing announces it. It renders where it is written, so put it directly\n * behind the element it points at — then it follows that element in the reading\n * order, and its anchor refers to it through `aria-details`.\n *\n * @flr-generate all\n * @flr-ignore-props anchorRef\n * @flowStatus beta, new\n */\nexport const CoachMark = flowComponent(\"CoachMark\", (props) => {\n  const {\n    children,\n    controller: controllerFromProps,\n    anchorRef,\n    anchor,\n    isDefaultOpen = false,\n    ref: ignoredRef,\n    ...rest\n  } = props;\n\n  const resolvedAnchorRef = useAnchorRef(anchorRef, anchor);\n\n  const controllerFromContext = useOverlayController(\"CoachMark\", {\n    reuseControllerFromContext: true,\n    isDefaultOpen,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const propsContext: PropsContext = {\n    // A coach mark holds one short thought. Its heading is a bold label, not a\n    // level in the page's outline — the same call ContextualHelp makes.\n    Heading: {\n      level: 5,\n      elementType: \"span\",\n    },\n    // The dismiss action is composed, not configured. Flow never closes an\n    // overlay on a consumer's behalf — `Modal` only augments a `closeOverlay`\n    // that is already there — so this sets the shape and leaves the behaviour\n    // to whatever `Action` the consumer wraps the button in.\n    Button: {\n      size: \"s\",\n      className: styles.dismiss,\n    },\n  };\n\n  return (\n    <Popover\n      withTip\n      {...rest}\n      modality=\"non-modal\"\n      controller={controller}\n      triggerRef={resolvedAnchorRef}\n    >\n      <OverlayContextProvider type=\"CoachMark\" controller={controller}>\n        <PropsContextProvider props={propsContext}>\n          <div className={styles.coachMark}>{children}</div>\n        </PropsContextProvider>\n      </OverlayContextProvider>\n    </Popover>\n  );\n});\n\nexport default CoachMark;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2DA,IAAM,gBACJ,WACA,WAC8B;CAC9B,MAAM,CAAC,eAAe,oBAAoB,SAAyB,IAAI;CAEvE,gBAAgB;EACd,IAAI,CAAC,QAAQ;GACX,iBAAiB,IAAI;GACrB;EACF;EAEA,MAAM,UAAU,SAAS,eAAe,MAAM;EAC9C,iBAAiB,OAAO;EAExB,IAAI,SACF;EAGF,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,OAAO,SAAS,eAAe,MAAM;GAE3C,IAAI,MAAM;IACR,iBAAiB,IAAI;IACrB,SAAS,WAAW;GACtB;EACF,CAAC;EAED,SAAS,QAAQ,SAAS,MAAM;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC;EAElE,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO,cACC,aAAa,EAAE,SAAS,cAAc,GAC5C,CAAC,WAAW,aAAa,CAC3B;AACF;;;;;;;;;;;;;;;AAgBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,UACA,YAAY,qBACZ,WACA,QACA,gBAAgB,OAChB,KAAK,YACL,GAAG,SACD;CAEJ,MAAM,oBAAoB,aAAa,WAAW,MAAM;CAExD,MAAM,wBAAwB,qBAAqB,aAAa;EAC9D,4BAA4B;EAC5B;CACF,CAAC;CAED,MAAM,aAAa,uBAAuB;CAE1C,MAAM,eAA6B;EAGjC,SAAS;GACP,OAAO;GACP,aAAa;EACf;EAKA,QAAQ;GACN,MAAM;GACN,WAAW,yBAAO;EACpB;CACF;CAEA,OACE,oBAAC,SAAD;EACE,SAAA;EACA,GAAI;EACJ,UAAS;EACG;EACZ,YAAY;EAEZ,UAAA,oBAAC,wBAAD;GAAwB,MAAK;GAAwB;GACnD,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC3B,UAAA,oBAAC,OAAD;KAAK,WAAW,yBAAO;KAAY;IAAc,CAAA;GAC7B,CAAA;EACA,CAAA;CACjB,CAAA;AAEb,CAAC"}
+{"version":3,"file":"CoachMark.mjs","names":["styles"],"sources":["../../../../../../../src/components/CoachMark/CoachMark.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { PopoverProps } from \"@/components/Popover/Popover\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport styles from \"./CoachMark.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\n\nexport interface CoachMarkProps extends Omit<\n  PopoverProps,\n  // The popover's own shape, which a coach mark decides for itself.\n  | \"withTip\"\n  | \"modality\"\n  // react-aria's own non-modal switch, which would compete with the shape this\n  // component already decided on.\n  | \"isNonModal\"\n  | \"isDialogContent\"\n  | \"triggerRef\"\n  // Positioning and dismissal it does not hand out: it is never dismissed by an\n  // interaction outside it, it owns its Escape handling, and it renders where it\n  // stands instead of in a portal.\n  | \"getTargetRect\"\n  | \"shouldCloseOnInteractOutside\"\n  // Overridden in CSS to escape react-aria's viewport clamp, so a value here\n  // would be silently ignored.\n  | \"maxHeight\"\n  | \"isKeyboardDismissDisabled\"\n  | \"UNSTABLE_portalContainer\"\n  // Popover keeps this one working for the consumers it already has; a coach\n  // mark has none yet, so it ships only the current name.\n  | \"defaultOpen\"\n> {\n  /**\n   * The element the coach mark points at. It is an anchor, not a trigger —\n   * nothing about it opens the coach mark. Give it either this or `anchor`.\n   */\n  anchorRef?: RefObject<Element | null>;\n  /**\n   * The `id` of the element the coach mark points at, looked up once the\n   * element exists. Use it where a ref cannot be shared — an mStudio extension\n   * renders in a different context than the host, so a ref never arrives, while\n   * an id does.\n   */\n  anchor?: string;\n}\n\n/**\n * Resolves whichever anchor was given into something `Popover` can position\n * against.\n *\n * An id is looked up after the commit, and kept looking for until it resolves.\n * A single lookup would only work for an anchor that is already mounted, which\n * is the case this prop does not exist for: remotely the host materializes the\n * page in pieces, so the anchor regularly arrives after the coach mark. Without\n * the observer the hint stays parked and invisible, and nothing says why.\n */\nconst useAnchorRef = (\n  anchorRef: RefObject<Element | null> | undefined,\n  anchor: string | undefined,\n): RefObject<Element | null> => {\n  const [anchorElement, setAnchorElement] = useState<Element | null>(null);\n\n  useEffect(() => {\n    if (!anchor) {\n      setAnchorElement(null);\n      return;\n    }\n\n    const element = document.getElementById(anchor);\n    setAnchorElement(element);\n\n    if (element) {\n      return;\n    }\n\n    const observer = new MutationObserver(() => {\n      const late = document.getElementById(anchor);\n\n      if (late) {\n        setAnchorElement(late);\n        observer.disconnect();\n      }\n    });\n\n    observer.observe(document.body, { childList: true, subtree: true });\n\n    return () => observer.disconnect();\n  }, [anchor]);\n\n  return useMemo(\n    () => anchorRef ?? { current: anchorElement },\n    [anchorRef, anchorElement],\n  );\n};\n\n/**\n * Points at a control the user did not ask about — a feature that is new, moved\n * or easy to miss. It opens on its own, so it stays out of the way: the page\n * below keeps scrolling, focus is left alone, and the coach mark rides along\n * with its anchor instead of closing at the first scroll.\n *\n * Nothing announces it. It renders where it is written, so put it directly\n * behind the element it points at — then it follows that element in the reading\n * order, and its anchor refers to it through `aria-details`.\n *\n * @flr-generate all\n * @flr-ignore-props anchorRef\n * @flowStatus beta, new\n */\nexport const CoachMark = flowComponent(\"CoachMark\", (props) => {\n  const {\n    children,\n    controller: controllerFromProps,\n    anchorRef,\n    anchor,\n    isDefaultOpen = false,\n    ref: ignoredRef,\n    ...rest\n  } = props;\n\n  const resolvedAnchorRef = useAnchorRef(anchorRef, anchor);\n\n  const controllerFromContext = useOverlayController(\"CoachMark\", {\n    reuseControllerFromContext: true,\n    isDefaultOpen,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const propsContext: PropsContext = {\n    // A coach mark holds one short thought. Its heading is a bold label, not a\n    // level in the page's outline — the same call ContextualHelp makes.\n    Heading: {\n      level: 5,\n      elementType: \"span\",\n    },\n    // The dismiss action is composed, not configured. Flow never closes an\n    // overlay on a consumer's behalf — `Modal` only augments a `closeOverlay`\n    // that is already there — so this sets the shape and leaves the behaviour\n    // to whatever `Action` the consumer wraps the button in.\n    Button: {\n      size: \"s\",\n      className: styles.dismiss,\n    },\n  };\n\n  return (\n    <Popover\n      withTip\n      {...rest}\n      modality=\"non-modal\"\n      controller={controller}\n      triggerRef={resolvedAnchorRef}\n    >\n      <OverlayContextProvider type=\"CoachMark\" controller={controller}>\n        <PropsContextProvider props={propsContext}>\n          <div className={styles.coachMark}>{children}</div>\n        </PropsContextProvider>\n      </OverlayContextProvider>\n    </Popover>\n  );\n});\n\nexport default CoachMark;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2DA,IAAM,gBACJ,WACA,WAC8B;CAC9B,MAAM,CAAC,eAAe,oBAAoB,SAAyB,IAAI;CAEvE,gBAAgB;EACd,IAAI,CAAC,QAAQ;GACX,iBAAiB,IAAI;GACrB;EACF;EAEA,MAAM,UAAU,SAAS,eAAe,MAAM;EAC9C,iBAAiB,OAAO;EAExB,IAAI,SACF;EAGF,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,OAAO,SAAS,eAAe,MAAM;GAE3C,IAAI,MAAM;IACR,iBAAiB,IAAI;IACrB,SAAS,WAAW;GACtB;EACF,CAAC;EAED,SAAS,QAAQ,SAAS,MAAM;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC;EAElE,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO,cACC,aAAa,EAAE,SAAS,cAAc,GAC5C,CAAC,WAAW,aAAa,CAC3B;AACF;;;;;;;;;;;;;;;AAgBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,UACA,YAAY,qBACZ,WACA,QACA,gBAAgB,OAChB,KAAK,YACL,GAAG,SACD;CAEJ,MAAM,oBAAoB,aAAa,WAAW,MAAM;CAExD,MAAM,wBAAwB,qBAAqB,aAAa;EAC9D,4BAA4B;EAC5B;CACF,CAAC;CAED,MAAM,aAAa,uBAAuB;CAE1C,MAAM,eAA6B;EAGjC,SAAS;GACP,OAAO;GACP,aAAa;EACf;EAKA,QAAQ;GACN,MAAM;GACN,WAAWA,yBAAO;EACpB;CACF;CAEA,OACE,oBAAC,SAAD;EACE,SAAA;EACA,GAAI;EACJ,UAAS;EACG;EACZ,YAAY;EAEZ,UAAA,oBAAC,wBAAD;GAAwB,MAAK;GAAwB;GACnD,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC3B,UAAA,oBAAC,OAAD;KAAK,WAAWA,yBAAO;KAAY;IAAc,CAAA;GAC7B,CAAA;EACA,CAAA;CACjB,CAAA;AAEb,CAAC"}

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 {\n  type FC,\n  type PropsWithChildren,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\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  /* The full height, only while the toggle animates to or from it. */\n  const [expandedHeight, setExpandedHeight] = useState<number>();\n  const editorRef = useRef<HTMLElement>(null);\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 heightVariables: React.CSSProperties = {\n    ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n    ...(expandedHeight\n      ? { \"--expanded-max-height\": `${expandedHeight}px` }\n      : {}),\n  };\n\n  /* A height transition needs a length on both ends – `none` does not\n     interpolate. So the full height is measured for the transition and\n     released once it ended, and code that changes later is not clipped. */\n  const toggleFolded = () => {\n    const editor = editorRef.current;\n\n    if (!editor) {\n      setFolded((folded) => !folded);\n      return;\n    }\n\n    const animates = getComputedStyle(editor)\n      .transitionDuration.split(\",\")\n      .some((duration) => parseFloat(duration) > 0);\n\n    if (folded) {\n      setExpandedHeight(animates ? editor.scrollHeight : undefined);\n      setFolded(false);\n    } else {\n      flushSync(() => setExpandedHeight(editor.scrollHeight));\n      // Applies the start height before the folded one replaces it.\n      editor.getBoundingClientRect();\n      setFolded(true);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        rootClassName,\n        maxHeight && styles.truncated,\n        folded && styles.folded,\n      )}\n      style={heightVariables}\n      onTransitionEnd={(event) => {\n        if (event.propertyName === \"max-height\") {\n          setExpandedHeight(undefined);\n        }\n      }}\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          editorRef.current = view.dom;\n\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={toggleFolded}\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":";;;;;;;;;;;;;AAmCA,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,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,YAAY,OAAoB,IAAI;CAE1C,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,kBAAuC;EAC3C,GAAI,YAAY,EAAE,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;EACxD,GAAI,iBACA,EAAE,yBAAyB,GAAG,eAAe,IAAI,IACjD,CAAC;CACP;CAKA,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ;GACX,WAAW,WAAW,CAAC,MAAM;GAC7B;EACF;EAEA,MAAM,WAAW,iBAAiB,MAAM,CAAC,CACtC,mBAAmB,MAAM,GAAG,CAAC,CAC7B,MAAM,aAAa,WAAW,QAAQ,IAAI,CAAC;EAE9C,IAAI,QAAQ;GACV,kBAAkB,WAAW,OAAO,eAAe,KAAA,CAAS;GAC5D,UAAU,KAAK;EACjB,OAAO;GACL,gBAAgB,kBAAkB,OAAO,YAAY,CAAC;GAEtD,OAAO,sBAAsB;GAC7B,UAAU,IAAI;EAChB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,KACT,eACA,aAAa,yBAAO,WACpB,UAAU,yBAAO,MACnB;EACA,OAAO;EACP,kBAAkB,UAAU;GAC1B,IAAI,MAAM,iBAAiB,cACzB,kBAAkB,KAAA,CAAS;EAE/B;EAEA,UAAA,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,UAAU,UAAU,KAAK;IAEzB,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,SAAS;KACT,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":["locales","styles"],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n  type FC,\n  type PropsWithChildren,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\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  /* The full height, only while the toggle animates to or from it. */\n  const [expandedHeight, setExpandedHeight] = useState<number>();\n  const editorRef = useRef<HTMLElement>(null);\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 heightVariables: React.CSSProperties = {\n    ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n    ...(expandedHeight\n      ? { \"--expanded-max-height\": `${expandedHeight}px` }\n      : {}),\n  };\n\n  /* A height transition needs a length on both ends – `none` does not\n     interpolate. So the full height is measured for the transition and\n     released once it ended, and code that changes later is not clipped. */\n  const toggleFolded = () => {\n    const editor = editorRef.current;\n\n    if (!editor) {\n      setFolded((folded) => !folded);\n      return;\n    }\n\n    const animates = getComputedStyle(editor)\n      .transitionDuration.split(\",\")\n      .some((duration) => parseFloat(duration) > 0);\n\n    if (folded) {\n      setExpandedHeight(animates ? editor.scrollHeight : undefined);\n      setFolded(false);\n    } else {\n      flushSync(() => setExpandedHeight(editor.scrollHeight));\n      // Applies the start height before the folded one replaces it.\n      editor.getBoundingClientRect();\n      setFolded(true);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        rootClassName,\n        maxHeight && styles.truncated,\n        folded && styles.folded,\n      )}\n      style={heightVariables}\n      onTransitionEnd={(event) => {\n        if (event.propertyName === \"max-height\") {\n          setExpandedHeight(undefined);\n        }\n      }}\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          editorRef.current = view.dom;\n\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={toggleFolded}\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":";;;;;;;;;;;;;AAmCA,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,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,kBAAkB,4BAA4BA,kBAAS,WAAW;CAExE,MAAM,gBAAgB,KAAKC,yBAAO,WAAW,SAAS;CAEtD,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,eAAeA,yBAAO,YAAY;EAIrD,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAO,SAAe,CAAA,EACnB,CAAA;CACF,CAAA;CAIT,MAAM,kBAAuC;EAC3C,GAAI,YAAY,EAAE,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;EACxD,GAAI,iBACA,EAAE,yBAAyB,GAAG,eAAe,IAAI,IACjD,CAAC;CACP;CAKA,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ;GACX,WAAW,WAAW,CAAC,MAAM;GAC7B;EACF;EAEA,MAAM,WAAW,iBAAiB,MAAM,CAAC,CACtC,mBAAmB,MAAM,GAAG,CAAC,CAC7B,MAAM,aAAa,WAAW,QAAQ,IAAI,CAAC;EAE9C,IAAI,QAAQ;GACV,kBAAkB,WAAW,OAAO,eAAe,KAAA,CAAS;GAC5D,UAAU,KAAK;EACjB,OAAO;GACL,gBAAgB,kBAAkB,OAAO,YAAY,CAAC;GAEtD,OAAO,sBAAsB;GAC7B,UAAU,IAAI;EAChB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,KACT,eACA,aAAaA,yBAAO,WACpB,UAAUA,yBAAO,MACnB;EACA,OAAO;EACP,kBAAkB,UAAU;GAC1B,IAAI,MAAM,iBAAiB,cACzB,kBAAkB,KAAA,CAAS;EAE/B;EAEA,UAAA,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,UAAU,UAAU,KAAK;IAEzB,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,KAAKA,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,SAAS;KACT,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA;CACT,CAAA;AAET"}