@mittwald/flow-react-components 0.1.0-alpha.404 → 0.1.0-alpha.405

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.1.0-alpha.405](https://github.com/mittwald/flow/compare/0.1.0-alpha.404...0.1.0-alpha.405) (2025-01-27)
+
+### Features
+
+- **Combobox:** add combo box component
+  ([bad2280](https://github.com/mittwald/flow/commit/bad228014a5be44e605f9d39af6139acd3371c51))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # [0.1.0-alpha.404](https://github.com/mittwald/flow/compare/0.1.0-alpha.403...0.1.0-alpha.404) (2025-01-27)
 
 ### Features

package/dist/css/ComboBox.css

@@ -0,0 +1 @@
+.flow--combo-box .flow--combo-box--input{order:2;display:grid;grid-template-areas:"input"}.flow--combo-box .flow--combo-box--input input{border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--corner-radius);padding-block:calc(var(--form-control--padding-y) - var(--form-control--border-width));padding-inline:var(--form-control--padding-x);color:var(--form-control--content-color--default);border-color:var(--form-control--border-color--default);background-color:var(--form-control--background-color--default);transition-property:color,background-color,border-color;transition-duration:var(--transition--duration--default);order:2;grid-area:input}.flow--combo-box .flow--combo-box--input input::placeholder{color:var(--form-control--placeholder-color--default)}.flow--combo-box .flow--combo-box--input input:hover{background-color:var(--form-control--background-color--hover)}.flow--combo-box .flow--combo-box--input input[data-invalid]{border-color:var(--form-control--border-color--invalid);background-color:var(--form-control--background-color--invalid)}.flow--combo-box .flow--combo-box--input input:focus-within{border-color:var(--form-control--border-color--focused);background-color:var(--form-control--background-color--focused)}.flow--combo-box .flow--combo-box--input input:focus-visible,.flow--combo-box .flow--combo-box--input input:focus{outline:none}.flow--combo-box .flow--combo-box--input input[data-selected]{color:var(--form-control--content-color--selected);border-color:var(--form-control--border-color--selected);background-color:var(--form-control--background-color--selected)}.flow--combo-box .flow--combo-box--input input:disabled,.flow--combo-box .flow--combo-box--input input[data-disabled],[aria-disabled] .flow--combo-box .flow--combo-box--input input{color:var(--form-control--content-color--disabled);border-color:var(--form-control--border-color--disabled);background-color:var(--form-control--background-color--disabled)}.flow--combo-box .flow--combo-box--input input:disabled::placeholder,.flow--combo-box .flow--combo-box--input input[data-disabled]::placeholder,[aria-disabled] .flow--combo-box .flow--combo-box--input input::placeholder{color:var(--form-control--placeholder-color--disabled)}.flow--combo-box .flow--combo-box--input .flow--combo-box--toggle{grid-area:input;justify-self:end;margin:var(--form-control--border-width)}.flow--combo-box .flow--combo-box--input .flow--combo-box--toggle:hover,.flow--combo-box .flow--combo-box--input .flow--combo-box--toggle[data-pressed]{background-color:transparent}.flow--combo-box:not([data-disabled=true]):hover input,.flow--combo-box:not([data-disabled=true]):hover .flow--combo-box--toggle{background-color:var(--form-control--background-color--hover)}

package/dist/css/Option.css

@@ -0,0 +1 @@
+.flow--options--popover{width:var(--trigger-width)}.flow--options{display:flex;flex-direction:column;row-gap:var(--menu--item-to-item-spacing);outline:none}.flow--option{display:flex;flex-direction:row;border:none;border-radius:var(--menu-item--corner-radius);background-color:var(--menu-item--background-color--default);padding:var(--menu-item--padding-y) var(--menu-item--padding-x);align-items:center}.flow--option:not(a){cursor:default}.flow--option:has(.flow--option--switch){justify-content:space-between}.flow--option{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--option[data-focused],.flow--option:focus{outline-style:none}.flow--option[data-focus-visible],.flow--option:focus-visible{outline-style:auto}.flow--option[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--option{outline-offset:calc(var(--size-px--xxs) * -1)}.flow--option .flow--option--icon{color:var(--menu-item--icon-color--default);margin-inline-end:var(--menu-item--spacing)}.flow--option:hover{background-color:var(--menu-item--background-color--hover)}.flow--option[data-focused]{outline-style:none}.flow--option[data-focus-visible]{outline-style:solid}.flow--option:not(:has(.flow--option--control-icon))[aria-current],.flow--option:not(:has(.flow--option--control-icon))[data-selected]{background-color:var(--menu-item--background-color--current);font-weight:var(--menu-item--font-weight--current);color:var(--menu-item--color--current)}.flow--option[aria-current] .flow--option--icon,.flow--option[data-selected] .flow--option--icon{color:var(--menu-item--icon-color--current)}.flow--option[aria-disabled]{background-color:var(--menu-item--disabled-background-color);color:var(--menu-item--disabled-color)}.flow--option[aria-disabled] .flow--option--icon{color:var(--menu-item--icon-color--disabled)}.flow--option:has(.flow--option--avatar){padding:0;background:none;width:fit-content;position:relative;border-radius:var(--corner-radius--round)}.flow--option:has(.flow--option--avatar) .flow--option--icon{display:none;position:absolute;width:70%;height:70%;top:15%;left:15%;color:var(--image-button--hover-icon-color)}.flow--option:has(.flow--option--avatar):hover .flow--option--avatar{filter:brightness(var(--image-button--brightness--hover))}.flow--option:has(.flow--option--avatar):hover .flow--option--icon{display:block}.flow--option:has(.flow--option--avatar)[data-pressed] .flow--option--avatar{filter:brightness(var(--image-button--brightness--pressed))}.flow--option:has(.flow--option--avatar)[data-pressed] .flow--option--icon{display:block}

package/dist/css/Popover.css

@@ -1 +1 @@
-.flow--popover{background-color:var(--popover--background-color);box-shadow:var(--popover--box-shadow);border-radius:var(--popover--corner-radius);display:flex;flex-direction:column;--size-px--s--negative: calc(var(--size-px--s) * -1);min-width:var(--popover--min-width);border-width:var(--popover--border-width);border-style:var(--popover--border-style);border-color:var(--popover--border-color);max-width:90vw}.flow--popover :where(.flow--popover--content){overflow-y:auto;padding:var(--popover--padding--m)}.flow--popover :where(.flow--popover--content).flow--popover--padding-s{padding:var(--popover--padding--s)}.flow--popover :where(.flow--popover--content):focus-visible{outline:none}.flow--popover .flow--popover--tip{width:var(--popover--tip-width)}.flow--popover .flow--popover--tip svg{display:block;fill:var(--popover--background-color);stroke:var(--popover--border-color);stroke-width:var(--popover--border-width)}.flow--popover hr{margin-block:var(--popover--spacing)}.flow--popover[data-placement=top]{--origin: translateY(var(--size-px--s))}.flow--popover[data-placement=top]:has(.flow--popover--tip){margin-bottom:var(--popover--tip-height)}.flow--popover[data-placement=bottom]{--origin: translateY(var(--size-px--s--negative))}.flow--popover[data-placement=bottom]:has(.flow--popover--tip){margin-top:var(--popover--tip-height)}.flow--popover[data-placement=bottom] .flow--popover--tip svg{transform:rotate(180deg)}.flow--popover[data-placement=right]{--origin: translateX(var(--size-px--s--negative))}.flow--popover[data-placement=right]:has(.flow--popover--tip){margin-left:var(--popover--tip-height)}.flow--popover[data-placement=right] .flow--popover--tip svg{transform:rotate(90deg)}.flow--popover[data-placement=left]{--origin: translateX(var(--size-px--s))}.flow--popover[data-placement=left]:has(.flow--popover--tip){margin-right:var(--popover--tip-height)}.flow--popover[data-placement=left] .flow--popover--tip svg{transform:rotate(-90deg)}.flow--popover[data-entering]{animation:flow--popover--popover-slide var(--transition--duration--default)}.flow--popover[data-exiting]{animation:flow--popover--popover-slide var(--transition--duration--default) reverse ease-in}@keyframes flow--popover--popover-slide{0%{transform:var(--origin);opacity:0}to{transform:translateY(0);opacity:1}}
+.flow--popover{background-color:var(--popover--background-color);box-shadow:var(--popover--box-shadow);border-radius:var(--popover--corner-radius);display:flex;flex-direction:column;--size-px--s--negative: calc(var(--size-px--s) * -1);min-width:var(--popover--min-width);border-width:var(--popover--border-width);border-style:var(--popover--border-style);border-color:var(--popover--border-color);max-width:100dvw}.flow--popover :where(.flow--popover--content){overflow-y:auto;padding:var(--popover--padding--m)}.flow--popover :where(.flow--popover--content).flow--popover--padding-s{padding:var(--popover--padding--s)}.flow--popover :where(.flow--popover--content):focus-visible{outline:none}.flow--popover .flow--popover--tip{width:var(--popover--tip-width)}.flow--popover .flow--popover--tip svg{display:block;fill:var(--popover--background-color);stroke:var(--popover--border-color);stroke-width:var(--popover--border-width)}.flow--popover hr{margin-block:var(--popover--spacing)}.flow--popover[data-placement=top]{--origin: translateY(var(--size-px--s))}.flow--popover[data-placement=top]:has(.flow--popover--tip){margin-bottom:var(--popover--tip-height)}.flow--popover[data-placement=bottom]{--origin: translateY(var(--size-px--s--negative))}.flow--popover[data-placement=bottom]:has(.flow--popover--tip){margin-top:var(--popover--tip-height)}.flow--popover[data-placement=bottom] .flow--popover--tip svg{transform:rotate(180deg)}.flow--popover[data-placement=right]{--origin: translateX(var(--size-px--s--negative))}.flow--popover[data-placement=right]:has(.flow--popover--tip){margin-left:var(--popover--tip-height)}.flow--popover[data-placement=right] .flow--popover--tip svg{transform:rotate(90deg)}.flow--popover[data-placement=left]{--origin: translateX(var(--size-px--s))}.flow--popover[data-placement=left]:has(.flow--popover--tip){margin-right:var(--popover--tip-height)}.flow--popover[data-placement=left] .flow--popover--tip svg{transform:rotate(-90deg)}.flow--popover[data-entering]{animation:flow--popover--popover-slide var(--transition--duration--default)}.flow--popover[data-exiting]{animation:flow--popover--popover-slide var(--transition--duration--default) reverse ease-in}@keyframes flow--popover--popover-slide{0%{transform:var(--origin);opacity:0}to{transform:translateY(0);opacity:1}}

package/dist/css/Select.css

@@ -1 +1 @@
-.flow--select .flow--select--toggle{display:flex;justify-content:space-between;align-items:center;font-weight:400;font-size:var(--font-size-text--default);text-align:left;border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--corner-radius);padding-block:calc(var(--form-control--padding-y) - var(--form-control--border-width));padding-inline:var(--form-control--padding-x);color:var(--form-control--content-color--default);border-color:var(--form-control--border-color--default);background-color:var(--form-control--background-color--default);transition-property:color,background-color,border-color;transition-duration:var(--transition--duration--default);order:2}.flow--select .flow--select--toggle::placeholder{color:var(--form-control--placeholder-color--default)}.flow--select .flow--select--toggle:hover{background-color:var(--form-control--background-color--hover)}.flow--select .flow--select--toggle[data-invalid]{border-color:var(--form-control--border-color--invalid);background-color:var(--form-control--background-color--invalid)}.flow--select .flow--select--toggle:focus-within{border-color:var(--form-control--border-color--focused);background-color:var(--form-control--background-color--focused)}.flow--select .flow--select--toggle:focus-visible,.flow--select .flow--select--toggle:focus{outline:none}.flow--select .flow--select--toggle[data-selected]{color:var(--form-control--content-color--selected);border-color:var(--form-control--border-color--selected);background-color:var(--form-control--background-color--selected)}.flow--select .flow--select--toggle:disabled,.flow--select .flow--select--toggle[data-disabled],[aria-disabled] .flow--select .flow--select--toggle{color:var(--form-control--content-color--disabled);border-color:var(--form-control--border-color--disabled);background-color:var(--form-control--background-color--disabled)}.flow--select .flow--select--toggle:disabled::placeholder,.flow--select .flow--select--toggle[data-disabled]::placeholder,[aria-disabled] .flow--select .flow--select--toggle::placeholder{color:var(--form-control--placeholder-color--disabled)}.flow--select[data-invalid] .flow--select--toggle{border-color:var(--form-control--border-color--invalid);background-color:var(--form-control--background-color--invalid)}.flow--select .react-aria-SelectValue{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flow--select--options--popover{width:var(--trigger-width)}.flow--select--options{display:flex;flex-direction:column;row-gap:var(--menu--item-to-item-spacing);outline:none}.flow--select--option{display:flex;flex-direction:row;border:none;border-radius:var(--menu-item--corner-radius);background-color:var(--menu-item--background-color--default);padding:var(--menu-item--padding-y) var(--menu-item--padding-x);align-items:center}.flow--select--option:not(a){cursor:default}.flow--select--option:has(.flow--select--option--switch){justify-content:space-between}.flow--select--option{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--select--option[data-focused],.flow--select--option:focus{outline-style:none}.flow--select--option[data-focus-visible],.flow--select--option:focus-visible{outline-style:auto}.flow--select--option[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--select--option{outline-offset:calc(var(--size-px--xxs) * -1)}.flow--select--option .flow--select--option--icon{color:var(--menu-item--icon-color--default);margin-inline-end:var(--menu-item--spacing)}.flow--select--option:hover{background-color:var(--menu-item--background-color--hover)}.flow--select--option[data-focused]{outline-style:none}.flow--select--option[data-focus-visible]{outline-style:solid}.flow--select--option:not(:has(.flow--select--option--control-icon))[aria-current],.flow--select--option:not(:has(.flow--select--option--control-icon))[data-selected]{background-color:var(--menu-item--background-color--current);font-weight:var(--menu-item--font-weight--current);color:var(--menu-item--color--current)}.flow--select--option[aria-current] .flow--select--option--icon,.flow--select--option[data-selected] .flow--select--option--icon{color:var(--menu-item--icon-color--current)}.flow--select--option[aria-disabled]{background-color:var(--menu-item--disabled-background-color);color:var(--menu-item--disabled-color)}.flow--select--option[aria-disabled] .flow--select--option--icon{color:var(--menu-item--icon-color--disabled)}.flow--select--option:has(.flow--select--option--avatar){padding:0;background:none;width:fit-content;position:relative;border-radius:var(--corner-radius--round)}.flow--select--option:has(.flow--select--option--avatar) .flow--select--option--icon{display:none;position:absolute;width:70%;height:70%;top:15%;left:15%;color:var(--image-button--hover-icon-color)}.flow--select--option:has(.flow--select--option--avatar):hover .flow--select--option--avatar{filter:brightness(var(--image-button--brightness--hover))}.flow--select--option:has(.flow--select--option--avatar):hover .flow--select--option--icon{display:block}.flow--select--option:has(.flow--select--option--avatar)[data-pressed] .flow--select--option--avatar{filter:brightness(var(--image-button--brightness--pressed))}.flow--select--option:has(.flow--select--option--avatar)[data-pressed] .flow--select--option--icon{display:block}
+.flow--select .flow--select--toggle{display:flex;justify-content:space-between;align-items:center;font-weight:400;font-size:var(--font-size-text--default);text-align:left;border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--corner-radius);padding-block:calc(var(--form-control--padding-y) - var(--form-control--border-width));padding-inline:var(--form-control--padding-x);color:var(--form-control--content-color--default);border-color:var(--form-control--border-color--default);background-color:var(--form-control--background-color--default);transition-property:color,background-color,border-color;transition-duration:var(--transition--duration--default);order:2}.flow--select .flow--select--toggle::placeholder{color:var(--form-control--placeholder-color--default)}.flow--select .flow--select--toggle:hover{background-color:var(--form-control--background-color--hover)}.flow--select .flow--select--toggle[data-invalid]{border-color:var(--form-control--border-color--invalid);background-color:var(--form-control--background-color--invalid)}.flow--select .flow--select--toggle:focus-within{border-color:var(--form-control--border-color--focused);background-color:var(--form-control--background-color--focused)}.flow--select .flow--select--toggle:focus-visible,.flow--select .flow--select--toggle:focus{outline:none}.flow--select .flow--select--toggle[data-selected]{color:var(--form-control--content-color--selected);border-color:var(--form-control--border-color--selected);background-color:var(--form-control--background-color--selected)}.flow--select .flow--select--toggle:disabled,.flow--select .flow--select--toggle[data-disabled],[aria-disabled] .flow--select .flow--select--toggle{color:var(--form-control--content-color--disabled);border-color:var(--form-control--border-color--disabled);background-color:var(--form-control--background-color--disabled)}.flow--select .flow--select--toggle:disabled::placeholder,.flow--select .flow--select--toggle[data-disabled]::placeholder,[aria-disabled] .flow--select .flow--select--toggle::placeholder{color:var(--form-control--placeholder-color--disabled)}.flow--select[data-invalid] .flow--select--toggle{border-color:var(--form-control--border-color--invalid);background-color:var(--form-control--background-color--invalid)}.flow--select .react-aria-SelectValue{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

package/dist/js/{Accordion-Btnh1ek-.js → Accordion-fxpaMqVR.js}

@@ -7,10 +7,10 @@ import { PropsContextProvider as N } from "./PropsContextProvider.js";
 import "@react-aria/utils";
 import "remeda";
 import { d } from "./dynamic-ClpUSmEt.js";
-import { B as y } from "./Button-BTc_iJae.js";
+import { B as y } from "./Button-BHFXhYtp.js";
 import "@tabler/icons-react";
-import "./Icon--OEo4TjW.js";
-import { I as B } from "./IconChevronDown-wKRgAuyR.js";
+import "./Icon-mUEZToWz.js";
+import { I as B } from "./IconChevronDown-DeqeNFTL.js";
 import { TunnelProvider as C, TunnelExit as A } from "@mittwald/react-tunnel";
 import { A as P } from "./Activity-BtRjnhmA.js";
 const b = "flow--accordion", g = "flow--accordion--header", D = "flow--accordion--header-button", T = "flow--accordion--content", H = "flow--accordion--content-inner", L = "flow--accordion--chevron", R = "flow--accordion--outline", S = "flow--accordion--expanded", e = {

package/dist/js/Accordion.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { A as r } from "./Accordion-Btnh1ek-.js";
+import { A as r } from "./Accordion-fxpaMqVR.js";
 export {
   r as Accordion,
   r as default

package/dist/js/{Action-Bm7dBV7s.js → Action-C6RX6wSX.js}

@@ -14,7 +14,7 @@ import { PropsContextProvider as j } from "./PropsContextProvider.js";
 import "@react-aria/utils";
 import "remeda";
 import { d as l } from "./dynamic-ClpUSmEt.js";
-import { u as q, f as z } from "./flowComponent-BQs9wMX_.js";
+import { u as q, f as z } from "./flowComponent-B1r5sCmz.js";
 const A = O(void 0), H = A.Provider, v = (n) => new Promise((t) => setTimeout(t, n)), C = {
   pending: 1e3,
   succeeded: 1500,

package/dist/js/Action.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { A as t } from "./Action-Bm7dBV7s.js";
+import { A as t } from "./Action-C6RX6wSX.js";
 export {
   t as Action,
   t as default

package/dist/js/{ActionGroup-cpOWMaBi.js → ActionGroup-_RcPy5Vo.js}

@@ -7,7 +7,7 @@ import "@react-aria/utils";
 import "remeda";
 import { d as n } from "./dynamic-ClpUSmEt.js";
 import e from "clsx";
-import { f as C } from "./flowComponent-BQs9wMX_.js";
+import { f as C } from "./flowComponent-B1r5sCmz.js";
 import { TunnelProvider as G } from "@mittwald/react-tunnel";
 import { A as y, g as a } from "./getActionGroupSlot-BHzMGEA7.js";
 const N = "flow--action-group", P = "flow--action-group--primary", x = "flow--action-group--secondary", A = "flow--action-group--abort", b = "flow--action-group--action-group-container", k = "flow--action-group--ignore-breakpoint", v = "flow--action-group--s", B = "flow--action-group--m", t = {

package/dist/js/ActionGroup.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { A as r } from "./ActionGroup-cpOWMaBi.js";
+import { A as r } from "./ActionGroup-_RcPy5Vo.js";
 export {
   r as ActionGroup,
   r as default

package/dist/js/Alert.js

@@ -8,8 +8,8 @@ import "./propsContext-DzAKlmhS.js";
 import "remeda";
 import { d } from "./dynamic-ClpUSmEt.js";
 import g from "clsx";
-import { A as w } from "./AlertIcon-CWlD--Fm.js";
-import { f as u } from "./flowComponent-BQs9wMX_.js";
+import { A as w } from "./AlertIcon-B2ca4caj.js";
+import { f as u } from "./flowComponent-B1r5sCmz.js";
 const C = "flow--alert", h = "flow--alert--content", x = "flow--alert--info", E = "flow--alert--heading", N = "flow--alert--warning", A = "flow--alert--danger", P = "flow--alert--success", t = {
   alert: C,
   content: h,

package/dist/js/AlertBadge.js

@@ -2,14 +2,14 @@
 /* */
 import e from "react";
 import m from "clsx";
-import { A as f } from "./AlertIcon-CWlD--Fm.js";
-import { T as i } from "./Text-Dh4iy9qD.js";
+import { A as f } from "./AlertIcon-B2ca4caj.js";
+import { T as i } from "./Text-C7Akf24Y.js";
 import { C as d } from "./ClearPropsContext-CUvsbMn8.js";
 import "./propsContext-DzAKlmhS.js";
 import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
-import { f as g } from "./flowComponent-BQs9wMX_.js";
+import { f as g } from "./flowComponent-B1r5sCmz.js";
 const p = "flow--alert-badge", w = "flow--alert-badge--text", x = "flow--alert-badge--info", u = "flow--alert-badge--success", b = "flow--alert-badge--warning", B = "flow--alert-badge--danger", t = {
   alertBadge: p,
   text: w,

package/dist/js/{AlertIcon-CWlD--Fm.js → AlertIcon-B2ca4caj.js}

@@ -2,10 +2,10 @@
 /* */
 import n from "react";
 import "@tabler/icons-react";
-import "./Icon--OEo4TjW.js";
-import { I as m } from "./IconDanger-BwFfgysk.js";
-import { I as f } from "./IconInfo-BQ-pXsUh.js";
-import { I, a as u } from "./IconWarning-BQcw4Db0.js";
+import "./Icon-mUEZToWz.js";
+import { I as m } from "./IconDanger-D7DexUvJ.js";
+import { I as f } from "./IconInfo-BAMWjGnC.js";
+import { I, a as u } from "./IconWarning-DFmEfqR4.js";
 import { useLocalizedStringFormatter as g } from "react-aria";
 import { C as p } from "./ClearPropsContext-CUvsbMn8.js";
 import "./propsContext-DzAKlmhS.js";

package/dist/js/AlertIcon.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { A as r } from "./AlertIcon-CWlD--Fm.js";
+import { A as r } from "./AlertIcon-B2ca4caj.js";
 export {
   r as AlertIcon,
   r as default

package/dist/js/Align.js

@@ -3,7 +3,7 @@
 import o from "react";
 import c from "clsx";
 import { PropsContextProvider as r } from "./PropsContextProvider.js";
-import { f as i } from "./flowComponent-BQs9wMX_.js";
+import { f as i } from "./flowComponent-B1r5sCmz.js";
 const m = "flow--align", p = "flow--align--avatar", f = "flow--align--text", u = "flow--align--button", g = "flow--align--copy-button", t = {
   align: m,
   avatar: p,

package/dist/js/{Avatar-Do4F3eUs.js → Avatar-BFx8pvZV.js}

@@ -9,7 +9,7 @@ import "./propsContext-DzAKlmhS.js";
 import "remeda";
 import { hash as w } from "object-code";
 import { deepForEach as y } from "react-children-utilities";
-import { f as u } from "./flowComponent-BQs9wMX_.js";
+import { f as u } from "./flowComponent-B1r5sCmz.js";
 const C = "flow--avatar", b = "flow--avatar--icon", z = "flow--avatar--initials", g = "flow--avatar--blue", h = "flow--avatar--teal", x = "flow--avatar--green", E = "flow--avatar--violet", N = "flow--avatar--lilac", o = {
   avatar: C,
   icon: b,

package/dist/js/Avatar.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { A as r } from "./Avatar-Do4F3eUs.js";
+import { A as r } from "./Avatar-BFx8pvZV.js";
 export {
   r as Avatar,
   r as default

package/dist/js/{Badge-CIT6Z_E_.js → Badge-BdqWEW4w.js}

@@ -6,11 +6,11 @@ import "./propsContext-DzAKlmhS.js";
 import { PropsContextProvider as f } from "./PropsContextProvider.js";
 import "@react-aria/utils";
 import "remeda";
-import { f as u } from "./flowComponent-BQs9wMX_.js";
-import { B as n } from "./Button-BTc_iJae.js";
+import { f as u } from "./flowComponent-B1r5sCmz.js";
+import { B as n } from "./Button-BHFXhYtp.js";
 import "@tabler/icons-react";
-import "./Icon--OEo4TjW.js";
-import { I as w } from "./IconClose-Bf4k99aq.js";
+import "./Icon-mUEZToWz.js";
+import { I as w } from "./IconClose-njz0vW4D.js";
 const v = "flow--badge", y = "flow--badge--content", N = "flow--badge--button", x = "flow--badge--close", B = "flow--badge--scope", C = "flow--badge--value", E = "flow--badge--neutral", T = "flow--badge--disabled", P = "flow--badge--blue", h = "flow--badge--navy", k = "flow--badge--violet", I = "flow--badge--teal", L = "flow--badge--lilac", z = "flow--badge--green", D = "flow--badge--orange", R = "flow--badge--red", j = "flow--badge--dark", q = "flow--badge--light", e = {
   badge: v,
   content: y,

package/dist/js/Badge.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { B as e } from "./Badge-CIT6Z_E_.js";
+import { B as e } from "./Badge-BdqWEW4w.js";
 export {
   e as Badge,
   e as default

package/dist/js/Breadcrumb.js

@@ -4,8 +4,8 @@ import r from "react";
 import * as c from "react-aria-components";
 import a from "clsx";
 import "@tabler/icons-react";
-import "./Icon--OEo4TjW.js";
-import { I as b } from "./IconChevronRight-DkfNRCtw.js";
+import "./Icon-mUEZToWz.js";
+import { I as b } from "./IconChevronRight-B4hALJUX.js";
 import "./propsContext-DzAKlmhS.js";
 import { PropsContextProvider as d } from "./PropsContextProvider.js";
 import "@react-aria/utils";

package/dist/js/{Button-BTc_iJae.js → Button-BHFXhYtp.js}

@@ -9,12 +9,12 @@ import "@react-aria/utils";
 import "./propsContext-DzAKlmhS.js";
 import "remeda";
 import "@tabler/icons-react";
-import "./Icon--OEo4TjW.js";
-import { I as h, a as I } from "./IconSucceeded-SyLL7w9B.js";
+import "./Icon-mUEZToWz.js";
+import { I as h, a as I } from "./IconSucceeded-DwXqB39n.js";
 import { W as f } from "./Wrap-DGT1h1o3.js";
-import { T as B } from "./Text-Dh4iy9qD.js";
-import { f as k } from "./flowComponent-BQs9wMX_.js";
-import { L as A } from "./LoadingSpinner-CcTq8PRj.js";
+import { T as B } from "./Text-C7Akf24Y.js";
+import { f as k } from "./flowComponent-B1r5sCmz.js";
+import { L as A } from "./LoadingSpinner-CEHNFfi8.js";
 import { useLocalizedStringFormatter as D } from "react-aria";
 import { useLiveRegion as T } from "@chakra-ui/live-region";
 const z = "flow--button", L = "flow--button--outline", R = "flow--button--content", K = "flow--button--state-icon", U = "flow--button--icon", W = "flow--button--text", $ = "flow--button--counter-badge", j = "flow--button--is-succeeded", q = "flow--button--is-failed", G = "flow--button--is-pending", H = "flow--button--plain", J = "flow--button--primary", M = "flow--button--solid", O = "flow--button--aria-disabled", Q = "flow--button--accent", V = "flow--button--danger", X = "flow--button--secondary", Y = "flow--button--dark", Z = "flow--button--light", _ = "flow--button--soft", ee = "flow--button--avatar", t = {

package/dist/js/Button.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { B as o } from "./Button-BTc_iJae.js";
+import { B as o } from "./Button-BHFXhYtp.js";
 export {
   o as Button,
   o as default

package/dist/js/{CalendarHeader-Dwo-04iM.js → CalendarHeader-iMfMiCgW.js}

@@ -1,12 +1,12 @@
 "use client"
 /* */
 import e from "react";
-import { B as r } from "./Button-BTc_iJae.js";
+import { B as r } from "./Button-BHFXhYtp.js";
 import * as a from "react-aria-components";
 import "@tabler/icons-react";
-import "./Icon--OEo4TjW.js";
-import { I as n } from "./IconCalendar-C5CRRRyg.js";
-import { I as t } from "./IconChevronRight-DkfNRCtw.js";
+import "./Icon-mUEZToWz.js";
+import { I as n } from "./IconCalendar-y-PKAAeL.js";
+import { I as t } from "./IconChevronRight-B4hALJUX.js";
 const o = "flow--calendar", l = "flow--calendar--range", f = {
   calendar: o,
   range: l

package/dist/js/{Checkbox-BU4YHXyk.js → Checkbox-7RLfRub0.js}

@@ -4,15 +4,15 @@ import e from "react";
 import * as i from "react-aria-components";
 import p from "clsx";
 import "@tabler/icons-react";
-import "./Icon--OEo4TjW.js";
-import { I as x, a as f } from "./IconCheckboxEmpty-CZrD3f3O.js";
-import { I as h } from "./IconCheckboxIndeterminate-CmpwByDj.js";
+import "./Icon-mUEZToWz.js";
+import { I as x, a as f } from "./IconCheckboxEmpty-BAQ3gCrW.js";
+import { I as h } from "./IconCheckboxIndeterminate-Dh3ttpUH.js";
 import { C } from "./ClearPropsContext-CUvsbMn8.js";
 import "./propsContext-DzAKlmhS.js";
 import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
-import { f as k } from "./flowComponent-BQs9wMX_.js";
+import { f as k } from "./flowComponent-B1r5sCmz.js";
 const b = "flow--checkbox", E = "flow--checkbox--icon", o = {
   checkbox: b,
   icon: E

package/dist/js/Checkbox.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { C as a } from "./Checkbox-BU4YHXyk.js";
+import { C as a } from "./Checkbox-7RLfRub0.js";
 export {
   a as Checkbox,
   a as default

package/dist/js/CheckboxButton.js

@@ -7,8 +7,8 @@ import { PropsContextProvider as b } from "./PropsContextProvider.js";
 import "@react-aria/utils";
 import "./propsContext-DzAKlmhS.js";
 import "remeda";
-import { C as x } from "./Checkbox-BU4YHXyk.js";
-import { f } from "./flowComponent-BQs9wMX_.js";
+import { C as x } from "./Checkbox-7RLfRub0.js";
+import { f } from "./flowComponent-B1r5sCmz.js";
 const C = "flow--checkbox-button", i = "flow--checkbox-button--label", u = "flow--checkbox-button--content", o = {
   checkboxButton: C,
   label: i,

package/dist/js/CheckboxGroup.js

@@ -7,11 +7,11 @@ import "./propsContext-DzAKlmhS.js";
 import { PropsContextProvider as E } from "./PropsContextProvider.js";
 import "@react-aria/utils";
 import "remeda";
-import { F as b } from "./FieldError-B_3nLHFz.js";
+import { F as b } from "./FieldError-C-_2QNam.js";
 import { TunnelProvider as h, TunnelExit as r } from "@mittwald/react-tunnel";
 import { f as o } from "./FormField.module-CqWpTQKP.js";
 import { C as k } from "./ColumnLayout-BhsG7J-Z.js";
-import { f as C } from "./flowComponent-BQs9wMX_.js";
+import { f as C } from "./flowComponent-B1r5sCmz.js";
 const N = "flow--checkbox-group", t = {
   checkboxGroup: N
 }, g = C("CheckboxGroup", (c) => {

package/dist/js/{CodeBlock-BU4F_VQW.js → CodeBlock-CuioozIA.js}

@@ -3,7 +3,7 @@
 import t from "react";
 import d from "react-syntax-highlighter";
 import m from "clsx";
-import { C as f } from "./CopyButton-gGJJItFK.js";
+import { C as f } from "./CopyButton-CVs_yxoq.js";
 const i = "flow--code-block", k = "flow--code-block--copy-button", u = "flow--code-block--light", p = "flow--code-block--dark", e = {
   codeBlock: i,
   copyButton: k,

package/dist/js/CodeBlock.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { C as a } from "./CodeBlock-BU4F_VQW.js";
+import { C as a } from "./CodeBlock-CuioozIA.js";
 export {
   a as CodeBlock,
   a as default

package/dist/js/ComboBox.js

@@ -0,0 +1,91 @@
+"use client"
+/* */
+import o from "react";
+import * as m from "react-aria-components";
+import { TunnelProvider as E, TunnelExit as B } from "@mittwald/react-tunnel";
+import { B as O } from "./Button-BHFXhYtp.js";
+import "@tabler/icons-react";
+import "./Icon-mUEZToWz.js";
+import { I as w } from "./IconChevronDown-DeqeNFTL.js";
+import { O as F } from "./Option-gR-s-VhK.js";
+import { a as oo } from "./Option-gR-s-VhK.js";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as N } from "./PropsContextProvider.js";
+import "@react-aria/utils";
+import "remeda";
+import S from "clsx";
+import { f as t } from "./FormField.module-CqWpTQKP.js";
+import { useLocalizedStringFormatter as v } from "react-aria";
+import { f as P } from "./flowComponent-B1r5sCmz.js";
+import "mobx";
+import { u as D } from "./useOverlayController-BwSJj4Ly.js";
+const I = "flow--combo-box", y = "flow--combo-box--input", T = "flow--combo-box--toggle", r = {
+  comboBox: I,
+  input: y,
+  toggle: T
+}, z = { "de-DE": {
+  "comboBox.showOptions": "Auswahlmöglichkeiten anzeigen"
+}, "en-EN": {
+  "comboBox.showOptions": "Show options"
+} }, Z = P("ComboBox", (n) => {
+  const {
+    children: s,
+    className: i,
+    menuTrigger: a = "focus",
+    onChange: c = () => {
+    },
+    onSelectionChange: p = () => {
+    },
+    controller: f,
+    refProp: u,
+    ...x
+  } = n, g = v(z), b = S(
+    r.comboBox,
+    t.formField,
+    i
+  ), d = {
+    Label: {
+      className: t.label,
+      optional: !n.isRequired
+    },
+    FieldDescription: {
+      className: t.fieldDescription
+    },
+    FieldError: {
+      className: t.customFieldError
+    },
+    Option: {
+      tunnelId: "options"
+    }
+  }, C = (e) => {
+    c(String(e)), p(e);
+  }, h = D("ComboBox", {
+    reuseControllerFromContext: !0
+  }), l = f ?? h;
+  return /* @__PURE__ */ o.createElement(
+    m.ComboBox,
+    {
+      menuTrigger: a,
+      className: b,
+      ...x,
+      ref: u,
+      onSelectionChange: C,
+      onOpenChange: (e) => l.setOpen(e)
+    },
+    /* @__PURE__ */ o.createElement(N, { props: d }, /* @__PURE__ */ o.createElement(E, null, /* @__PURE__ */ o.createElement("div", { className: r.input }, /* @__PURE__ */ o.createElement(m.Input, null), /* @__PURE__ */ o.createElement(
+      O,
+      {
+        className: r.toggle,
+        "aria-label": g.format("comboBox.showOptions"),
+        variant: "plain",
+        color: "secondary"
+      },
+      /* @__PURE__ */ o.createElement(w, null)
+    )), s, /* @__PURE__ */ o.createElement(F, { controller: l }, /* @__PURE__ */ o.createElement(B, { id: "options" }))))
+  );
+});
+export {
+  Z as ComboBox,
+  oo as Option,
+  Z as default
+};

package/dist/js/{Content-BHs6Idqq.js → Content-BmxNXYuI.js}

@@ -6,7 +6,7 @@ import "./propsContext-DzAKlmhS.js";
 import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
-import { f as l } from "./flowComponent-BQs9wMX_.js";
+import { f as l } from "./flowComponent-B1r5sCmz.js";
 import { W as s } from "./Wrap-DGT1h1o3.js";
 const W = l("Content", (t) => {
   const {

package/dist/js/Content.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { C as o } from "./Content-BHs6Idqq.js";
+import { C as o } from "./Content-BmxNXYuI.js";
 export {
   o as Content,
   o as default

package/dist/js/ContextMenu.js

@@ -1,9 +1,9 @@
 "use client"
 /* */
-import { C as t } from "./ContextMenuTrigger-C6ZCPTHC.js";
-import { a as n } from "./ContextMenuTrigger-C6ZCPTHC.js";
-import { M as x } from "./MenuItem-B6P8yo9s.js";
-import { C as f } from "./ContextMenuSection-kLzjPKqH.js";
+import { C as t } from "./ContextMenuTrigger-D-IVwEDc.js";
+import { a as n } from "./ContextMenuTrigger-D-IVwEDc.js";
+import { M as x } from "./MenuItem-C6RgW6U3.js";
+import { C as f } from "./ContextMenuSection-CMK-apnP.js";
 export {
   t as ContextMenu,
   f as ContextMenuSection,

package/dist/js/{ContextMenuSection-kLzjPKqH.js → ContextMenuSection-CMK-apnP.js}

@@ -6,8 +6,8 @@ import "./propsContext-DzAKlmhS.js";
 import { PropsContextProvider as l } from "./PropsContextProvider.js";
 import "@react-aria/utils";
 import "remeda";
-import { f as m } from "./flowComponent-BQs9wMX_.js";
-import { A as r } from "./Action-Bm7dBV7s.js";
+import { f as m } from "./flowComponent-B1r5sCmz.js";
+import { A as r } from "./Action-C6RX6wSX.js";
 const p = "flow--context-menu", u = "flow--context-menu--section", x = {
   contextMenu: p,
   section: u

package/dist/js/{ContextMenuTrigger-C6ZCPTHC.js → ContextMenuTrigger-D-IVwEDc.js}

@@ -2,9 +2,9 @@
 /* */
 import e from "react";
 import * as a from "react-aria-components";
-import { s as f, g as y, a as d, b as v } from "./ContextMenuSection-kLzjPKqH.js";
-import { f as s } from "./flowComponent-BQs9wMX_.js";
-import { P } from "./Popover-3qM_-J3x.js";
+import { s as f, g as y, a as d, b as v } from "./ContextMenuSection-CMK-apnP.js";
+import { f as s } from "./flowComponent-B1r5sCmz.js";
+import { P } from "./Popover-BXgT1HK0.js";
 import { C as A } from "./ClearPropsContext-CUvsbMn8.js";
 import { PropsContextProvider as E } from "./PropsContextProvider.js";
 import "@react-aria/utils";
@@ -13,7 +13,7 @@ import "remeda";
 import "mobx";
 import { u as S } from "./useOverlayController-BwSJj4Ly.js";
 import { O, a as T } from "./OverlayTrigger-j2zD8W4S.js";
-import { A as I } from "./Action-Bm7dBV7s.js";
+import { A as I } from "./Action-C6RX6wSX.js";
 const G = s("ContextMenu", (t) => {
   const {
     children: o,

package/dist/js/ContextualHelp.js

@@ -1,20 +1,20 @@
 "use client"
 /* */
 import t from "react";
-import { P as c } from "./Popover-3qM_-J3x.js";
+import { P as c } from "./Popover-BXgT1HK0.js";
 import "./propsContext-DzAKlmhS.js";
 import { PropsContextProvider as l } from "./PropsContextProvider.js";
 import "@react-aria/utils";
 import "remeda";
-import { f as a } from "./flowComponent-BQs9wMX_.js";
+import { f as a } from "./flowComponent-B1r5sCmz.js";
 import "mobx";
 import { u } from "./useOverlayController-BwSJj4Ly.js";
 import * as f from "react-aria-components";
 import { a as x } from "./OverlayTrigger-j2zD8W4S.js";
 import { useLocalizedStringFormatter as g } from "react-aria";
 import "@tabler/icons-react";
-import "./Icon--OEo4TjW.js";
-import { I as C } from "./IconInfo-BQ-pXsUh.js";
+import "./Icon-mUEZToWz.js";
+import { I as C } from "./IconInfo-BAMWjGnC.js";
 const H = "flow--contextual-help", d = {
   contextualHelp: H
 }, b = a("ContextualHelp", (e) => {

package/dist/js/{CopyButton-gGJJItFK.js → CopyButton-CVs_yxoq.js}

@@ -2,10 +2,10 @@
 /* */
 import o from "react";
 import c from "copy-to-clipboard";
-import { B as l } from "./Button-BTc_iJae.js";
+import { B as l } from "./Button-BHFXhYtp.js";
 import "@tabler/icons-react";
-import "./Icon--OEo4TjW.js";
-import { I as s } from "./IconCopy-Ig2YhkQv.js";
+import "./Icon-mUEZToWz.js";
+import { I as s } from "./IconCopy-DyvGR-TO.js";
 import { useLocalizedStringFormatter as f } from "react-aria";
 import { a as u, T as y } from "./Tooltip-D5QM-BbC.js";
 import { onlyText as C } from "react-children-utilities";
@@ -14,8 +14,8 @@ import "./propsContext-DzAKlmhS.js";
 import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
-import { f as B } from "./flowComponent-BQs9wMX_.js";
-import { A as g } from "./Action-Bm7dBV7s.js";
+import { f as B } from "./flowComponent-B1r5sCmz.js";
+import { A as g } from "./Action-C6RX6wSX.js";
 const T = { "de-DE": {
   "copyButton.copy": "Kopieren"
 }, "en-EN": {

package/dist/js/CopyButton.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { C as t } from "./CopyButton-gGJJItFK.js";
+import { C as t } from "./CopyButton-CVs_yxoq.js";
 export {
   t as CopyButton,
   t as default

package/dist/js/CounterBadge.js

@@ -2,7 +2,7 @@
 /* */
 import s from "react";
 import c from "clsx";
-import { f as m } from "./flowComponent-BQs9wMX_.js";
+import { f as m } from "./flowComponent-B1r5sCmz.js";
 const u = "flow--counter-badge", d = {
   counterBadge: u
 }, g = m("CounterBadge", (o) => {