design-system-silkhaus 3.3.0-beta.listing-card-rtl.7 → 3.3.0-beta.listing-card-rtl.8

package/dist/app/index.js

@@ -1 +1,446 @@
-"use strict";var X=Object.defineProperty,Y=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var V=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var P=(e,t,d)=>t in e?X(e,t,{enumerable:!0,configurable:!0,writable:!0,value:d}):e[t]=d,v=(e,t)=>{for(var d in t||(t={}))V.call(t,d)&&P(e,d,t[d]);if(S)for(var d of S(t))W.call(t,d)&&P(e,d,t[d]);return e},w=(e,t)=>Y(e,Z(t));var z=(e,t)=>{var d={};for(var r in e)V.call(e,r)&&t.indexOf(r)<0&&(d[r]=e[r]);if(e!=null&&S)for(var r of S(e))t.indexOf(r)<0&&W.call(e,r)&&(d[r]=e[r]);return d};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../Checkbox-CUV4lv2I.cjs"),m=require("react"),T=({children:e,size:t="small"})=>s.jsxRuntimeExports.jsx("div",{className:`ds-flex ds-items-center ds-justify-center ${t==="small"?"ds-h-5 ds-w-5":"ds-h-6 ds-w-6"}`,children:e}),ss={primary:"ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-rounded-sm hover:ds-text-Text-textPrimaryDark hover:ds-bg-Background-accentEggplant-highlight hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-Background-accentEggplant-darkened focus:ds-bg-Background-accentEggplant-100 focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:focus:ds-shadow-none disabled:ds-bg-Background-accentEggplant-20 ds-text-mediumFootnoteEmphasized",secondary:"ds-bg-white ds-text-black ds-rounded-sm ds-border ds-border-Fills-terciary hover:ds-bg-[#F6F8FC] hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-[#F6F8FC] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] focus:ds-bg-[#F6F8FC] focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:ds-border disabled:ds-border-Fills-terciary disabled:ds-text-Text-tertiary disabled:ds-bg-transparent ds-text-mediumFootnoteEmphasized"},es={primary:"ds-rounded-sm ds-border ds-text-black ds-border-Fills-terciary ds-bg-[#F6F8FC] ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized",secondary:"ds-rounded-sm ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized"},N=m.forwardRef((E,g)=>{var u=E,{color:e="primary",disabled:t=!1,className:d,children:r,startIcon:i,selected:c,endIcon:n,trackingId:o,helperText:x,helpterTextClassName:f,buttonClassName:h}=u,b=z(u,["color","disabled","className","children","startIcon","selected","endIcon","trackingId","helperText","helpterTextClassName","buttonClassName"]);return s.jsxRuntimeExports.jsxs("div",{className:s.cn("ds-flex ds-flex-col ds-gap-1",d),children:[s.jsxRuntimeExports.jsxs("button",w(v({"data-tracking-id":o,ref:g,disabled:t,className:s.twMerge(s.clsx({[es[e]]:c,[ss[e]]:!c},"ds-px-2 ds-py-1","ds-flex ds-w-full ds-flex-1 ds-items-center ds-justify-center",h))},b),{children:[i&&s.jsxRuntimeExports.jsx(T,{children:i}),r&&s.jsxRuntimeExports.jsx("div",{className:`${i?"ds-ml-1":""} ${n?"ds-mr-1":""}`,children:r}),n&&s.jsxRuntimeExports.jsx(T,{children:n})]})),x&&s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-w-full ds-text-right ds-text-mediumFootnoteRegular",f),children:x})]})});N.displayName="Button";const U=m.forwardRef((e,t)=>{const R=e,{value:d,options:r,onSelectionChange:i=()=>{},isMultiSelect:c,noDataError:n,buttonMinWidth:o,buttonWidth:x,minSelectionError:f,buttonsContainerClassName:h,buttonClassName:b}=R,g=z(R,["value","options","onSelectionChange","isMultiSelect","noDataError","buttonMinWidth","buttonWidth","minSelectionError","buttonsContainerClassName","buttonClassName"]),[E,u]=m.useState([]),[p,y]=m.useState("");m.useEffect(()=>{d&&d.length?u(d):u([])},[d]);const F=(a,j)=>{j.currentTarget.blur();const l=[...E],k=l.findIndex(B=>B.value===a.value);k!==-1?l.length>1?(l.splice(k,1),y("")):y(f):(l.push(a),y("")),u(l),i(l)},_=(a,j)=>{j.currentTarget.blur();const l=[a];u(l),i(l)};return s.jsxRuntimeExports.jsxs("div",w(v({ref:t},g),{children:[s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-flex ds-flex-wrap ds-items-center ds-gap-2",h),children:r.length>0?r.map((a,j)=>a.type==="separator"?s.jsxRuntimeExports.jsx(m.Fragment,{children:a.component?a.component:s.jsxRuntimeExports.jsx("div",{className:"ds-h-full ds-min-h-[30px] ds-w-[1px] ds-bg-Fills-terciary"})},`separator-${j}`):s.jsxRuntimeExports.jsx(m.Fragment,{children:c?s.jsxRuntimeExports.jsx(N,{selected:E.some(l=>l.value===a.value),onClick:l=>F(a,l),color:"secondary",style:{minWidth:o,width:x},className:b,startIcon:a.startIcon,endIcon:a.endIcon,children:a.label}):s.jsxRuntimeExports.jsx(N,{selected:E.some(l=>l.value===a.value),onClick:l=>_(a,l),color:"secondary",style:{minWidth:o,width:x},className:b,startIcon:a.startIcon,endIcon:a.endIcon,children:a.label})},a.value)):s.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:n})}),p&&s.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:p})]}))});U.displayName="ButtonsGroupSelector";const $=e=>window.innerWidth<s.tabletMinWidth?s.jsxRuntimeExports.jsx(M,v({},e)):s.jsxRuntimeExports.jsx(I,v({},e));$.displayName="Dropdown";const I=({placement:e="bottom-start",trigger:t,triggerContainerClassName:d,disabled:r,onOpenChange:i,adjustHeight:c=!0,adjustWidth:n=!0,options:o,getSelectedValueDisplayText:x=J,placeholder:f,value:h,isMultiSelect:b,onChange:g})=>{const[E,u]=m.useState(),p=typeof h=="undefined"?E:h,y=typeof h=="undefined"?u:()=>{},[F,_]=m.useState(!1),{refs:R,floatingStyles:a,context:j}=s.useFloating({open:F,onOpenChange:D=>{_(D),i&&i(D)},middleware:[s.offset(8),s.flip({crossAxis:e.includes("-"),fallbackAxisSideDirection:"end"}),s.shift({padding:4}),s.size({apply({availableWidth:D,availableHeight:Q,elements:A}){c&&(A.floating.style.maxHeight=`${Q-4}px`),n&&(A.floating.style.maxWidth=`${D-4}px`)}})],whileElementsMounted:s.autoUpdate,placement:e}),l=s.useClick(j),k=s.useFocus(j),B=s.useDismiss(j),K=s.useRole(j),{getReferenceProps:L,getFloatingProps:O}=s.useInteractions([l,k,B,K]);return t||(t=s.jsxRuntimeExports.jsx(q,{selectedOption:C(p,o),getSelectedValueDisplayText:x,placeholder:f})),r?s.jsxRuntimeExports.jsx("div",{className:d,children:t}):s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",w(v({className:s.cn("ds-cursor-pointer",d),ref:R.setReference},L()),{children:t})),F&&s.jsxRuntimeExports.jsx(s.FloatingPortal,{children:s.jsxRuntimeExports.jsx("div",w(v({ref:R.setFloating,style:a},O()),{className:s.cn("ds-z-[29999] ds-flex ds-min-w-[200px] ds-flex-col ds-gap-1 ds-rounded ds-bg-white ds-p-2 ds-shadow-md",c&&"ds-overflow-y-auto",n&&"ds-overflow-x-auto"),children:s.jsxRuntimeExports.jsx(H,{isMultiSelect:b,options:o,value:p,setValue:y,setIsOpen:_,onChange:g})}))})]})};I.displayName="DesktopDropdown";const M=({trigger:e,triggerContainerClassName:t,disabled:d,onOpenChange:r,getSelectedValueDisplayText:i=J,placeholder:c,value:n,options:o,isMultiSelect:x,onChange:f})=>{const[h,b]=m.useState(),g=typeof n=="undefined"?h:n,E=typeof n=="undefined"?b:()=>{},[u,p]=m.useState(!1);return e||(e=s.jsxRuntimeExports.jsx(q,{selectedOption:C(g,o),getSelectedValueDisplayText:i,placeholder:c})),d?s.jsxRuntimeExports.jsx("div",{className:t,children:e}):s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",{className:t,onClick:()=>{p(!0),r&&r(!0)},children:e}),s.jsxRuntimeExports.jsx(s.AnimatedModal,{animation:"slideUp",show:u,handleClose:()=>{p(!1),r&&r(!1)},contentClassName:s.cn("ds-absolute ds-mb-0 ds-w-full"),className:"ds-z-[29999]",children:s.jsxRuntimeExports.jsx(G,{onClose:()=>{p(!1),r&&r(!1)},children:s.jsxRuntimeExports.jsx(H,{isMultiSelect:x,options:o,value:g,setValue:E,setIsOpen:p,onChange:f})})})]})};M.displayName="MobileDropdown";const G=({onClose:e,children:t})=>s.jsxRuntimeExports.jsxs("div",{className:"ds-mb-0 ds-flex ds-max-h-dvh ds-w-full ds-flex-col ds-bg-white",children:[s.jsxRuntimeExports.jsxs("div",{className:"ds-flex ds-shrink-0 ds-items-center ds-justify-between ds-px-8 ds-py-4",children:[s.jsxRuntimeExports.jsx("div",{onClick:e,className:"ds-flex ds-size-5 ds-cursor-pointer ds-items-center ds-justify-center",children:s.jsxRuntimeExports.jsx(s.CloseIcon,{className:"ds-size-4"})}),s.jsxRuntimeExports.jsx("div",{className:"ds-size-5"})]}),s.jsxRuntimeExports.jsx("div",{className:"ds-grow ds-overflow-y-auto ds-p-4 ds-text-xSmallCalloutRegular",children:t}),s.jsxRuntimeExports.jsx("div",{className:"ds-px-8 ds-py-4",children:s.jsxRuntimeExports.jsx(s.Button,{buttonClassName:"ds-py-3",onClick:e,children:"Close"})})]});G.displayName="MobilePopoverContentWrapper";const q=({selectedOption:e,getSelectedValueDisplayText:t,placeholder:d})=>{const r=!e||Array.isArray(e)&&e.length===0?d||"":t(e);return s.jsxRuntimeExports.jsx(N,{color:"secondary",endIcon:s.jsxRuntimeExports.jsx(s.ChevronDownRegularIcon,{className:"ds-size-4"}),buttonClassName:"ds-justify-between",children:r})},H=({options:e,isMultiSelect:t,value:d,setValue:r,setIsOpen:i,onChange:c})=>e&&e.map(n=>s.jsxRuntimeExports.jsx(ts,{onClick:()=>{let o;if(t){const x=d||[];x.includes(n.value)?o=x.filter(f=>f!==n.value):o=[...x,n.value]}else o=n.value,i(!1);r(o),c&&c(C(o,e))},option:n,isSelected:Array.isArray(d)?d.some(o=>o===n.value):d===n.value,showCheckbox:t},n.value)),ts=({onClick:e,option:t,isSelected:d,showCheckbox:r})=>s.jsxRuntimeExports.jsxs("div",{onClick:t.disabled?void 0:e,className:s.cn("ds-group ds-flex ds-min-h-[72px] ds-cursor-pointer ds-items-center ds-gap-4 ds-rounded ds-px-4 ds-py-2 ds-text-smallFootnoteEmphasized hover:ds-bg-[#F6F8FC] ds-tablet:ds-min-h-[auto] ds-tablet:ds-gap-2 ds-tablet:ds-px-2 ds-desktop:ds-text-mediumFootnoteEmphasized",!r&&"ds-transition-[padding] ds-duration-300 hover:ds-px-4"),children:[t.thumbnailUrl&&s.jsxRuntimeExports.jsx("img",{src:t.thumbnailUrl,className:"ds-h-14 ds-w-14 ds-shrink-0 ds-rounded ds-object-cover group-hover:ds-pr-0 ds-tablet:ds-h-6 ds-tablet:ds-w-9 ds-tablet:ds-rounded-sm"}),t.icon,s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-flex-grow",!r&&"ds-transition-[padding] ds-duration-300 group-hover:ds-pr-0 ds-tablet:ds-pr-4"),children:t.label}),d&&!r&&s.jsxRuntimeExports.jsx(s.CheckmarkIcon,{className:"ds-size-4 ds-shrink-0"}),r&&s.jsxRuntimeExports.jsx(s.Checkbox,{isChecked:d,disabled:t.disabled})]}),C=(e,t)=>Array.isArray(e)?t.filter(d=>e.includes(d.value)):t.find(d=>d.value===e),J=e=>Array.isArray(e)?e.map(t=>t.label).join(", "):e.label;exports.Button=N;exports.ButtonsGroupSelector=U;exports.DesktopDropdown=I;exports.Dropdown=$;exports.MobileDropdown=M;exports.findOptionByValue=C;
+var Y = Object.defineProperty, Z = Object.defineProperties;
+var O = Object.getOwnPropertyDescriptors;
+var S = Object.getOwnPropertySymbols;
+var P = Object.prototype.hasOwnProperty, V = Object.prototype.propertyIsEnumerable;
+var W = (s, d, a) => d in s ? Y(s, d, { enumerable: !0, configurable: !0, writable: !0, value: a }) : s[d] = a, j = (s, d) => {
+  for (var a in d || (d = {}))
+    P.call(d, a) && W(s, a, d[a]);
+  if (S)
+    for (var a of S(d))
+      V.call(d, a) && W(s, a, d[a]);
+  return s;
+}, _ = (s, d) => Z(s, O(d));
+var I = (s, d) => {
+  var a = {};
+  for (var t in s)
+    P.call(s, t) && d.indexOf(t) < 0 && (a[t] = s[t]);
+  if (s != null && S)
+    for (var t of S(s))
+      d.indexOf(t) < 0 && V.call(s, t) && (a[t] = s[t]);
+  return a;
+};
+import { j as e, a as y, t as ss, c as es, p as ds, u as as, o as ts, h as ls, s as rs, r as ns, i as cs, v as is, d as os, e as us, f as xs, g as ms, F as ps, A as fs, C as hs, l as bs, w as gs, k as vs, n as ys } from "../Checkbox-DwGmxWYP.js";
+import A, { forwardRef as js, useState as w, useEffect as ws } from "react";
+const T = ({ children: s, size: d = "small" }) => /* @__PURE__ */ e.jsx(
+  "div",
+  {
+    className: `ds-flex ds-items-center ds-justify-center ${d === "small" ? "ds-h-5 ds-w-5" : "ds-h-6 ds-w-6"}`,
+    children: s
+  }
+), Ns = {
+  primary: "ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-rounded-sm hover:ds-text-Text-textPrimaryDark hover:ds-bg-Background-accentEggplant-highlight hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-Background-accentEggplant-darkened focus:ds-bg-Background-accentEggplant-100 focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:focus:ds-shadow-none disabled:ds-bg-Background-accentEggplant-20 ds-text-mediumFootnoteEmphasized",
+  secondary: "ds-bg-white ds-text-black ds-rounded-sm ds-border ds-border-Fills-terciary hover:ds-bg-[#F6F8FC] hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-[#F6F8FC] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] focus:ds-bg-[#F6F8FC] focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:ds-border disabled:ds-border-Fills-terciary disabled:ds-text-Text-tertiary disabled:ds-bg-transparent ds-text-mediumFootnoteEmphasized"
+}, Fs = {
+  primary: "ds-rounded-sm ds-border ds-text-black ds-border-Fills-terciary ds-bg-[#F6F8FC] ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized",
+  secondary: "ds-rounded-sm ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized"
+}, z = A.forwardRef(
+  (v, g) => {
+    var x = v, {
+      color: s = "primary",
+      disabled: d = !1,
+      className: a,
+      children: t,
+      startIcon: i,
+      selected: u,
+      endIcon: l,
+      trackingId: c,
+      helperText: o,
+      helpterTextClassName: f,
+      buttonClassName: h
+    } = x, b = I(x, [
+      "color",
+      "disabled",
+      "className",
+      "children",
+      "startIcon",
+      "selected",
+      "endIcon",
+      "trackingId",
+      "helperText",
+      "helpterTextClassName",
+      "buttonClassName"
+    ]);
+    return /* @__PURE__ */ e.jsxs("div", { className: y("ds-flex ds-flex-col ds-gap-1", a), children: [
+      /* @__PURE__ */ e.jsxs(
+        "button",
+        _(j({
+          "data-tracking-id": c,
+          ref: g,
+          disabled: d,
+          className: ss(
+            es(
+              { [Fs[s]]: u, [Ns[s]]: !u },
+              "ds-px-2 ds-py-1",
+              "ds-flex ds-w-full ds-flex-1 ds-items-center ds-justify-center",
+              h
+            )
+          )
+        }, b), {
+          children: [
+            i && /* @__PURE__ */ e.jsx(T, { children: i }),
+            t && /* @__PURE__ */ e.jsx("div", { className: `${i ? "ds-ml-1" : ""} ${l ? "ds-mr-1" : ""}`, children: t }),
+            l && /* @__PURE__ */ e.jsx(T, { children: l })
+          ]
+        })
+      ),
+      o && /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: y(
+            "ds-w-full ds-text-right ds-text-mediumFootnoteRegular",
+            f
+          ),
+          children: o
+        }
+      )
+    ] });
+  }
+);
+z.displayName = "Button";
+const _s = js(
+  (s, d) => {
+    const F = s, {
+      value: a,
+      options: t,
+      onSelectionChange: i = () => {
+      },
+      isMultiSelect: u,
+      noDataError: l,
+      buttonMinWidth: c,
+      buttonWidth: o,
+      minSelectionError: f,
+      buttonsContainerClassName: h,
+      buttonClassName: b
+    } = F, g = I(F, [
+      "value",
+      "options",
+      "onSelectionChange",
+      "isMultiSelect",
+      "noDataError",
+      "buttonMinWidth",
+      "buttonWidth",
+      "minSelectionError",
+      "buttonsContainerClassName",
+      "buttonClassName"
+    ]), [v, x] = w([]), [m, N] = w("");
+    ws(() => {
+      a && a.length ? x(a) : x([]);
+    }, [a]);
+    const k = (r, p) => {
+      p.currentTarget.blur();
+      const n = [...v], C = n.findIndex((B) => B.value === r.value);
+      C !== -1 ? n.length > 1 ? (n.splice(C, 1), N("")) : N(f) : (n.push(r), N("")), x(n), i(n);
+    }, D = (r, p) => {
+      p.currentTarget.blur();
+      const n = [r];
+      x(n), i(n);
+    };
+    return /* @__PURE__ */ e.jsxs(
+      "div",
+      _(j({
+        ref: d
+      }, g), {
+        children: [
+          /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              className: y("ds-flex ds-flex-wrap ds-items-center ds-gap-2", h),
+              children: t.length > 0 ? t.map((r, p) => r.type === "separator" ? /* @__PURE__ */ e.jsx(A.Fragment, { children: r.component ? r.component : /* @__PURE__ */ e.jsx("div", { className: "ds-h-full ds-min-h-[30px] ds-w-[1px] ds-bg-Fills-terciary" }) }, `separator-${p}`) : /* @__PURE__ */ e.jsx(A.Fragment, { children: u ? /* @__PURE__ */ e.jsx(
+                z,
+                {
+                  selected: v.some((n) => n.value === r.value),
+                  onClick: (n) => k(r, n),
+                  color: "secondary",
+                  style: { minWidth: c, width: o },
+                  className: b,
+                  startIcon: r.startIcon,
+                  endIcon: r.endIcon,
+                  children: r.label
+                }
+              ) : /* @__PURE__ */ e.jsx(
+                z,
+                {
+                  selected: v.some((n) => n.value === r.value),
+                  onClick: (n) => D(r, n),
+                  color: "secondary",
+                  style: { minWidth: c, width: o },
+                  className: b,
+                  startIcon: r.startIcon,
+                  endIcon: r.endIcon,
+                  children: r.label
+                }
+              ) }, r.value)) : /* @__PURE__ */ e.jsx("div", { className: "ds_xSmallSubheadRegular ds-p-2 ds-text-System-red", children: l })
+            }
+          ),
+          m && /* @__PURE__ */ e.jsx("div", { className: "ds_xSmallSubheadRegular ds-p-2 ds-text-System-red", children: m })
+        ]
+      })
+    );
+  }
+);
+_s.displayName = "ButtonsGroupSelector";
+const ks = (s) => window.innerWidth < ds ? /* @__PURE__ */ e.jsx(U, j({}, s)) : /* @__PURE__ */ e.jsx($, j({}, s));
+ks.displayName = "Dropdown";
+const $ = ({
+  placement: s = "bottom-start",
+  trigger: d,
+  triggerContainerClassName: a,
+  disabled: t,
+  onOpenChange: i,
+  adjustHeight: u = !0,
+  adjustWidth: l = !0,
+  options: c,
+  getSelectedValueDisplayText: o = J,
+  placeholder: f,
+  value: h,
+  isMultiSelect: b,
+  onChange: g
+}) => {
+  const [v, x] = w(), m = typeof h == "undefined" ? v : h, N = typeof h == "undefined" ? x : () => {
+  }, [k, D] = w(!1), { refs: F, floatingStyles: r, context: p } = as({
+    open: k,
+    onOpenChange: (E) => {
+      D(E), i && i(E);
+    },
+    middleware: [
+      ts(8),
+      ls({
+        crossAxis: s.includes("-"),
+        fallbackAxisSideDirection: "end"
+      }),
+      rs({ padding: 4 }),
+      ns({
+        apply({ availableWidth: E, availableHeight: X, elements: M }) {
+          u && (M.floating.style.maxHeight = `${X - 4}px`), l && (M.floating.style.maxWidth = `${E - 4}px`);
+        }
+      })
+    ],
+    whileElementsMounted: cs,
+    placement: s
+  }), n = is(p), C = os(p), B = us(p), K = xs(p), { getReferenceProps: L, getFloatingProps: Q } = ms([n, C, B, K]);
+  return d || (d = /* @__PURE__ */ e.jsx(
+    q,
+    {
+      selectedOption: R(m, c),
+      getSelectedValueDisplayText: o,
+      placeholder: f
+    }
+  )), t ? /* @__PURE__ */ e.jsx("div", { className: a, children: d }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      "div",
+      _(j({
+        className: y("ds-cursor-pointer", a),
+        ref: F.setReference
+      }, L()), {
+        children: d
+      })
+    ),
+    k && /* @__PURE__ */ e.jsx(ps, { children: /* @__PURE__ */ e.jsx(
+      "div",
+      _(j({
+        ref: F.setFloating,
+        style: r
+      }, Q()), {
+        className: y(
+          "ds-z-[29999] ds-flex ds-min-w-[200px] ds-flex-col ds-gap-1 ds-rounded ds-bg-white ds-p-2 ds-shadow-md",
+          u && "ds-overflow-y-auto",
+          l && "ds-overflow-x-auto"
+        ),
+        children: /* @__PURE__ */ e.jsx(
+          H,
+          {
+            isMultiSelect: b,
+            options: c,
+            value: m,
+            setValue: N,
+            setIsOpen: D,
+            onChange: g
+          }
+        )
+      })
+    ) })
+  ] });
+};
+$.displayName = "DesktopDropdown";
+const U = ({
+  trigger: s,
+  triggerContainerClassName: d,
+  disabled: a,
+  onOpenChange: t,
+  getSelectedValueDisplayText: i = J,
+  placeholder: u,
+  value: l,
+  options: c,
+  isMultiSelect: o,
+  onChange: f
+}) => {
+  const [h, b] = w(), g = typeof l == "undefined" ? h : l, v = typeof l == "undefined" ? b : () => {
+  }, [x, m] = w(!1);
+  return s || (s = /* @__PURE__ */ e.jsx(
+    q,
+    {
+      selectedOption: R(g, c),
+      getSelectedValueDisplayText: i,
+      placeholder: u
+    }
+  )), a ? /* @__PURE__ */ e.jsx("div", { className: d, children: s }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: d,
+        onClick: () => {
+          m(!0), t && t(!0);
+        },
+        children: s
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      fs,
+      {
+        animation: "slideUp",
+        show: x,
+        handleClose: () => {
+          m(!1), t && t(!1);
+        },
+        contentClassName: y("ds-absolute ds-mb-0 ds-w-full"),
+        className: "ds-z-[29999]",
+        children: /* @__PURE__ */ e.jsx(
+          G,
+          {
+            onClose: () => {
+              m(!1), t && t(!1);
+            },
+            children: /* @__PURE__ */ e.jsx(
+              H,
+              {
+                isMultiSelect: o,
+                options: c,
+                value: g,
+                setValue: v,
+                setIsOpen: m,
+                onChange: f
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+};
+U.displayName = "MobileDropdown";
+const G = ({
+  onClose: s,
+  children: d
+}) => /* @__PURE__ */ e.jsxs("div", { className: "ds-mb-0 ds-flex ds-max-h-dvh ds-w-full ds-flex-col ds-bg-white", children: [
+  /* @__PURE__ */ e.jsxs("div", { className: "ds-flex ds-shrink-0 ds-items-center ds-justify-between ds-px-8 ds-py-4", children: [
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        onClick: s,
+        className: "ds-flex ds-size-5 ds-cursor-pointer ds-items-center ds-justify-center",
+        children: /* @__PURE__ */ e.jsx(hs, { className: "ds-size-4" })
+      }
+    ),
+    /* @__PURE__ */ e.jsx("div", { className: "ds-size-5" })
+  ] }),
+  /* @__PURE__ */ e.jsx("div", { className: "ds-grow ds-overflow-y-auto ds-p-4 ds-text-xSmallCalloutRegular", children: d }),
+  /* @__PURE__ */ e.jsx("div", { className: "ds-px-8 ds-py-4", children: /* @__PURE__ */ e.jsx(
+    bs,
+    {
+      buttonClassName: "ds-py-3",
+      onClick: s,
+      children: "Close"
+    }
+  ) })
+] });
+G.displayName = "MobilePopoverContentWrapper";
+const q = ({
+  selectedOption: s,
+  getSelectedValueDisplayText: d,
+  placeholder: a
+}) => {
+  const t = !s || Array.isArray(s) && s.length === 0 ? a || "" : d(s);
+  return /* @__PURE__ */ e.jsx(
+    z,
+    {
+      color: "secondary",
+      endIcon: /* @__PURE__ */ e.jsx(gs, { className: "ds-size-4" }),
+      buttonClassName: "ds-justify-between",
+      children: t
+    }
+  );
+}, H = ({
+  options: s,
+  isMultiSelect: d,
+  value: a,
+  setValue: t,
+  setIsOpen: i,
+  onChange: u
+}) => s && s.map((l) => /* @__PURE__ */ e.jsx(
+  Ds,
+  {
+    onClick: () => {
+      let c;
+      if (d) {
+        const o = a || [];
+        o.includes(l.value) ? c = o.filter((f) => f !== l.value) : c = [...o, l.value];
+      } else
+        c = l.value, i(!1);
+      t(c), u && u(R(c, s));
+    },
+    option: l,
+    isSelected: Array.isArray(a) ? a.some((c) => c === l.value) : a === l.value,
+    showCheckbox: d
+  },
+  l.value
+)), Ds = ({
+  onClick: s,
+  option: d,
+  isSelected: a,
+  showCheckbox: t
+}) => /* @__PURE__ */ e.jsxs(
+  "div",
+  {
+    onClick: d.disabled ? void 0 : s,
+    className: y(
+      "ds-group ds-flex ds-min-h-[72px] ds-cursor-pointer ds-items-center ds-gap-4 ds-rounded ds-px-4 ds-py-2 ds-text-smallFootnoteEmphasized hover:ds-bg-[#F6F8FC] ds-tablet:ds-min-h-[auto] ds-tablet:ds-gap-2 ds-tablet:ds-px-2 ds-desktop:ds-text-mediumFootnoteEmphasized",
+      !t && "ds-transition-[padding] ds-duration-300 hover:ds-px-4"
+    ),
+    children: [
+      d.thumbnailUrl && /* @__PURE__ */ e.jsx(
+        "img",
+        {
+          src: d.thumbnailUrl,
+          className: "ds-h-14 ds-w-14 ds-shrink-0 ds-rounded ds-object-cover group-hover:ds-pr-0 ds-tablet:ds-h-6 ds-tablet:ds-w-9 ds-tablet:ds-rounded-sm"
+        }
+      ),
+      d.icon,
+      /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: y(
+            "ds-flex-grow",
+            !t && "ds-transition-[padding] ds-duration-300 group-hover:ds-pr-0 ds-tablet:ds-pr-4"
+          ),
+          children: d.label
+        }
+      ),
+      a && !t && /* @__PURE__ */ e.jsx(vs, { className: "ds-size-4 ds-shrink-0" }),
+      t && /* @__PURE__ */ e.jsx(
+        ys,
+        {
+          isChecked: a,
+          disabled: d.disabled
+        }
+      )
+    ]
+  }
+), R = (s, d) => Array.isArray(s) ? d.filter((a) => s.includes(a.value)) : d.find((a) => a.value === s), J = (s) => Array.isArray(s) ? s.map((d) => d.label).join(", ") : s.label;
+export {
+  z as Button,
+  _s as ButtonsGroupSelector,
+  $ as DesktopDropdown,
+  ks as Dropdown,
+  U as MobileDropdown,
+  R as findOptionByValue
+};