@moto-nrw/design-system 0.5.0 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +133 -106
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +8 -1
  4. package/dist/index.d.ts +8 -1
  5. package/dist/index.js +110 -84
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -33,6 +33,7 @@ __export(index_exports, {
33
33
  DropdownMenu: () => DropdownMenu,
34
34
  FilterChips: () => FilterChips,
35
35
  Input: () => Input,
36
+ ListItem: () => ListItem,
36
37
  Logo: () => Logo,
37
38
  Modal: () => Modal,
38
39
  Pill: () => Pill,
@@ -657,10 +658,35 @@ function Input({ label, error, id, name, type = "text", className, ...props }) {
657
658
  ] });
658
659
  }
659
660
 
660
- // src/components/Logo/Logo.tsx
661
+ // src/components/ListItem/ListItem.tsx
661
662
  var import_jsx_runtime12 = require("react/jsx-runtime");
662
- function Logo({ size = 48, ...props }) {
663
+ function ListItem({
664
+ active = false,
665
+ onClick,
666
+ children,
667
+ className,
668
+ ...props
669
+ }) {
663
670
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
671
+ "button",
672
+ {
673
+ type: "button",
674
+ onClick,
675
+ className: cn(
676
+ "flex w-full cursor-pointer items-center gap-3 rounded-xl px-3 py-3 text-left transition-all",
677
+ active ? "border border-[var(--semantic-color-border-default)] bg-[var(--semantic-color-bg-subtle)]" : "border border-transparent hover:bg-[var(--semantic-color-bg-subtle)]",
678
+ className
679
+ ),
680
+ ...props,
681
+ children
682
+ }
683
+ );
684
+ }
685
+
686
+ // src/components/Logo/Logo.tsx
687
+ var import_jsx_runtime13 = require("react/jsx-runtime");
688
+ function Logo({ size = 48, ...props }) {
689
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
664
690
  "svg",
665
691
  {
666
692
  width: size,
@@ -669,29 +695,29 @@ function Logo({ size = 48, ...props }) {
669
695
  fill: "none",
670
696
  "aria-label": "Ganztagshelden Logo",
671
697
  ...props,
672
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { transform: "matrix(1.62384,0,0,1.62384,-670.097018,-377.993255)", children: [
673
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
698
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { transform: "matrix(1.62384,0,0,1.62384,-670.097018,-377.993255)", children: [
699
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
674
700
  "path",
675
701
  {
676
702
  d: "M659.306,666.563C647.321,692.452 643.608,697.805 636.105,707.186C597.15,755.887 537.182,756.845 535.652,756.159C520.635,749.432 541.639,734.294 543.087,720.432C546.681,686.029 515.354,694.397 490.973,657.204C474.084,631.441 470.729,569.063 491.533,580.44C566.83,621.619 610.108,565.941 697.497,581.514C795.809,599.034 828.378,545.138 873.613,499.611C886.943,486.194 921.218,489.412 905.57,533.525C884.114,594.015 824.679,638.112 824.916,640.467C825.254,643.83 825.708,647.181 826.036,650.545C841.184,805.69 775.341,869.784 748.516,842.485C733.986,827.697 766.215,763.869 753.18,746.69C742.331,732.393 727.791,767.884 690.115,801.076C617.879,864.714 605.932,819.074 607.847,805.541C609.887,791.128 663.09,752.991 674.077,688.423C677.562,667.944 669.794,667.148 667.332,663.505C665.729,661.133 659.929,665.972 659.306,666.563Z",
677
703
  fill: "var(--color-steel-800, #1E293B)"
678
704
  }
679
705
  ),
680
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
706
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
681
707
  "path",
682
708
  {
683
709
  d: "M675.584,684.76C676.835,613.868 598.89,738.438 567.488,699.03C544.801,670.559 676.869,576.383 715.532,582.995C744.492,587.948 775.313,577.886 789.684,572.171C791.809,570.862 793.873,569.676 795.866,568.627C814.646,558.742 857.526,515.802 873.613,499.611C886.943,486.194 921.218,489.412 905.57,533.525C884.114,594.015 824.679,638.112 824.916,640.467C825.254,643.83 825.708,647.181 826.036,650.545C841.184,805.69 775.341,869.784 748.516,842.485C733.986,827.697 766.215,763.869 753.18,746.69C742.331,732.393 727.791,767.884 690.115,801.076C617.879,864.714 605.932,819.074 607.847,805.541C609.887,791.128 663.09,752.991 674.077,688.423C674.245,687.434 674.757,686.206 675.584,684.76Z",
684
710
  fill: "var(--color-steel-500, #64748B)"
685
711
  }
686
712
  ),
687
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
713
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
688
714
  "path",
689
715
  {
690
716
  d: "M460.76,425.665C465.048,418.094 676.602,255.297 689.716,245.799C722.985,221.705 734.948,230.838 791.173,274.938C956.769,404.821 957.228,404.054 971.138,415.929C994.202,435.618 980.079,457.145 973.404,463.396C950.46,484.884 936.954,468.134 867.775,414.13C729.691,306.338 729.459,303.94 718.557,304.907C707.569,305.88 567.819,420.024 512.203,461.094C468.741,493.188 448.741,446.89 460.76,425.665Z",
691
717
  fill: "var(--color-steel-600, #475569)"
692
718
  }
693
719
  ),
694
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
720
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
695
721
  "path",
696
722
  {
697
723
  d: "M706.539,565.374C599.871,517.702 661.839,386.507 747.483,403.592C856.658,425.371 827.324,597.116 706.539,565.374Z",
@@ -706,7 +732,7 @@ function Logo({ size = 48, ...props }) {
706
732
  // src/components/Modal/Modal.tsx
707
733
  var import_react4 = require("react");
708
734
  var import_react_dom2 = require("react-dom");
709
- var import_jsx_runtime13 = require("react/jsx-runtime");
735
+ var import_jsx_runtime14 = require("react/jsx-runtime");
710
736
  function Modal({ isOpen, onClose, title, children, footer }) {
711
737
  const [isAnimating, setIsAnimating] = (0, import_react4.useState)(false);
712
738
  const [isExiting, setIsExiting] = (0, import_react4.useState)(false);
@@ -740,8 +766,8 @@ function Modal({ isOpen, onClose, title, children, footer }) {
740
766
  if (!isOpen) return null;
741
767
  const entering = isAnimating && !isExiting;
742
768
  const idle = !isAnimating && !isExiting;
743
- const modalContent = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "fixed inset-0 z-[var(--modal-z-index)] flex items-center justify-center", children: [
744
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
769
+ const modalContent = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "fixed inset-0 z-[var(--modal-z-index)] flex items-center justify-center", children: [
770
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
745
771
  "button",
746
772
  {
747
773
  type: "button",
@@ -753,7 +779,7 @@ function Modal({ isOpen, onClose, title, children, footer }) {
753
779
  "aria-label": "Hintergrund - Klicken zum Schlie\xDFen"
754
780
  }
755
781
  ),
756
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
782
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
757
783
  "div",
758
784
  {
759
785
  className: cn(
@@ -766,11 +792,11 @@ function Modal({ isOpen, onClose, title, children, footer }) {
766
792
  "aria-modal": "true",
767
793
  "aria-label": title || void 0,
768
794
  children: [
769
- title ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between px-[var(--modal-padding-x)] py-[var(--modal-padding-y)] border-b border-[var(--semantic-color-border-subtle)]", children: [
770
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: "font-sans text-lg font-semibold text-[var(--semantic-color-text-default)] m-0 pr-4", children: title }),
771
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseButton, { onClick: handleClose })
772
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseButton, { onClick: handleClose }) }),
773
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
795
+ title ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between px-[var(--modal-padding-x)] py-[var(--modal-padding-y)] border-b border-[var(--semantic-color-border-subtle)]", children: [
796
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "font-sans text-lg font-semibold text-[var(--semantic-color-text-default)] m-0 pr-4", children: title }),
797
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseButton, { onClick: handleClose })
798
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseButton, { onClick: handleClose }) }),
799
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
774
800
  "div",
775
801
  {
776
802
  className: cn(
@@ -780,7 +806,7 @@ function Modal({ isOpen, onClose, title, children, footer }) {
780
806
  children
781
807
  }
782
808
  ),
783
- footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex justify-end gap-3 px-[var(--modal-padding-x)] py-[var(--modal-padding-y)] border-t border-[var(--semantic-color-border-subtle)] bg-[var(--modal-footer-bg)]", children: footer })
809
+ footer && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex justify-end gap-3 px-[var(--modal-padding-x)] py-[var(--modal-padding-y)] border-t border-[var(--semantic-color-border-subtle)] bg-[var(--modal-footer-bg)]", children: footer })
784
810
  ]
785
811
  }
786
812
  )
@@ -802,8 +828,8 @@ function ConfirmationModal({
802
828
  isConfirmDisabled = false,
803
829
  variant = "primary"
804
830
  }) {
805
- const footer = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
806
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
831
+ const footer = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
832
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
807
833
  "button",
808
834
  {
809
835
  type: "button",
@@ -812,7 +838,7 @@ function ConfirmationModal({
812
838
  children: cancelText
813
839
  }
814
840
  ),
815
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
841
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
816
842
  "button",
817
843
  {
818
844
  type: "button",
@@ -822,16 +848,16 @@ function ConfirmationModal({
822
848
  "flex-1 px-4 py-2 border-none rounded-md font-sans text-sm font-medium text-[var(--semantic-color-text-inverse)] whitespace-nowrap cursor-pointer transition-all duration-[var(--duration-fast)] hover:enabled:scale-105 hover:enabled:shadow-lg active:enabled:scale-100 disabled:opacity-[var(--disabled-opacity)] disabled:cursor-not-allowed",
823
849
  variant === "danger" ? "bg-[var(--semantic-color-feedback-error-text)]" : "bg-[var(--semantic-color-bg-inverse)]"
824
850
  ),
825
- children: isConfirmLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
826
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
851
+ children: isConfirmLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
852
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
827
853
  "svg",
828
854
  {
829
855
  className: "size-4 animate-[ds-spin_0.7s_linear_infinite]",
830
856
  fill: "none",
831
857
  viewBox: "0 0 24 24",
832
858
  children: [
833
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("circle", { opacity: 0.25, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
834
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
859
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { opacity: 0.25, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
860
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
835
861
  "path",
836
862
  {
837
863
  opacity: 0.75,
@@ -847,17 +873,17 @@ function ConfirmationModal({
847
873
  }
848
874
  )
849
875
  ] });
850
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Modal, { isOpen, onClose, title, footer, children });
876
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Modal, { isOpen, onClose, title, footer, children });
851
877
  }
852
878
  function CloseButton({ onClick }) {
853
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
879
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
854
880
  "button",
855
881
  {
856
882
  type: "button",
857
883
  onClick,
858
884
  className: "group flex items-center justify-center shrink-0 size-[var(--modal-close-size)] p-0 border-none rounded-lg bg-transparent text-[var(--semantic-color-text-muted)] cursor-pointer transition-all duration-[var(--duration-fast)] hover:bg-[var(--semantic-color-bg-muted)] hover:text-[var(--semantic-color-text-default)] hover:scale-105 active:scale-95",
859
885
  "aria-label": "Modal schlie\xDFen",
860
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
886
+ children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
861
887
  "svg",
862
888
  {
863
889
  className: "transition-transform duration-[var(--duration-fast)] group-hover:rotate-90",
@@ -867,7 +893,7 @@ function CloseButton({ onClick }) {
867
893
  viewBox: "0 0 24 24",
868
894
  stroke: "currentColor",
869
895
  strokeWidth: 2,
870
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
896
+ children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
871
897
  }
872
898
  )
873
899
  }
@@ -875,7 +901,7 @@ function CloseButton({ onClick }) {
875
901
  }
876
902
 
877
903
  // src/components/Pill/Pill.tsx
878
- var import_jsx_runtime14 = require("react/jsx-runtime");
904
+ var import_jsx_runtime15 = require("react/jsx-runtime");
879
905
  var solidStyles = {
880
906
  red: "bg-[var(--semantic-color-feedback-error-strong)] text-[var(--semantic-color-text-inverse)]",
881
907
  green: "bg-[var(--semantic-color-brand-primary)] text-[var(--semantic-color-text-inverse)]",
@@ -911,7 +937,7 @@ function Pill({
911
937
  className,
912
938
  ...props
913
939
  }) {
914
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
940
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
915
941
  "span",
916
942
  {
917
943
  className: cn(
@@ -922,7 +948,7 @@ function Pill({
922
948
  ),
923
949
  ...props,
924
950
  children: [
925
- dot && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn("rounded-full bg-current opacity-80", dotSizes[size]) }),
951
+ dot && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("rounded-full bg-current opacity-80", dotSizes[size]) }),
926
952
  label
927
953
  ]
928
954
  }
@@ -930,10 +956,10 @@ function Pill({
930
956
  }
931
957
 
932
958
  // src/components/Radio/Radio.tsx
933
- var import_jsx_runtime15 = require("react/jsx-runtime");
959
+ var import_jsx_runtime16 = require("react/jsx-runtime");
934
960
  function Radio({ label, id, name, className, ...props }) {
935
961
  const inputId = id || `${name}-${label.toLowerCase().replace(/\s+/g, "-")}`;
936
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
962
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
937
963
  "label",
938
964
  {
939
965
  htmlFor: inputId,
@@ -942,7 +968,7 @@ function Radio({ label, id, name, className, ...props }) {
942
968
  className
943
969
  ),
944
970
  children: [
945
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
971
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
946
972
  "input",
947
973
  {
948
974
  type: "radio",
@@ -952,14 +978,14 @@ function Radio({ label, id, name, className, ...props }) {
952
978
  ...props
953
979
  }
954
980
  ),
955
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
981
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
956
982
  ]
957
983
  }
958
984
  );
959
985
  }
960
986
 
961
987
  // src/components/SearchBar/SearchBar.tsx
962
- var import_jsx_runtime16 = require("react/jsx-runtime");
988
+ var import_jsx_runtime17 = require("react/jsx-runtime");
963
989
  var sizeStyles5 = {
964
990
  sm: "py-2 pl-9 pr-3 text-sm",
965
991
  md: "py-2.5 pl-9 pr-10 text-sm",
@@ -979,8 +1005,8 @@ function SearchBar({
979
1005
  className,
980
1006
  ...props
981
1007
  }) {
982
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn("relative", className), children: [
983
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1008
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("relative", className), children: [
1009
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
984
1010
  "svg",
985
1011
  {
986
1012
  className: cn(
@@ -990,7 +1016,7 @@ function SearchBar({
990
1016
  fill: "none",
991
1017
  viewBox: "0 0 24 24",
992
1018
  stroke: "currentColor",
993
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1019
+ children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
994
1020
  "path",
995
1021
  {
996
1022
  strokeLinecap: "round",
@@ -1001,7 +1027,7 @@ function SearchBar({
1001
1027
  )
1002
1028
  }
1003
1029
  ),
1004
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1030
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1005
1031
  "input",
1006
1032
  {
1007
1033
  type: "text",
@@ -1017,7 +1043,7 @@ function SearchBar({
1017
1043
  ...props
1018
1044
  }
1019
1045
  ),
1020
- value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1046
+ value && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1021
1047
  "button",
1022
1048
  {
1023
1049
  type: "button",
@@ -1026,14 +1052,14 @@ function SearchBar({
1026
1052
  onClear?.();
1027
1053
  },
1028
1054
  className: "absolute top-1/2 right-2 -translate-y-1/2 flex items-center justify-center p-1 border-none rounded-full bg-transparent cursor-pointer transition-colors duration-[var(--duration-fast)] hover:bg-[var(--semantic-color-bg-muted)]",
1029
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1055
+ children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1030
1056
  "svg",
1031
1057
  {
1032
1058
  className: cn("text-[var(--semantic-color-text-muted)]", iconSizes[size]),
1033
1059
  fill: "none",
1034
1060
  viewBox: "0 0 24 24",
1035
1061
  stroke: "currentColor",
1036
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1062
+ children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1037
1063
  "path",
1038
1064
  {
1039
1065
  strokeLinecap: "round",
@@ -1050,11 +1076,11 @@ function SearchBar({
1050
1076
  }
1051
1077
 
1052
1078
  // src/components/Select/Select.tsx
1053
- var import_jsx_runtime17 = require("react/jsx-runtime");
1079
+ var import_jsx_runtime18 = require("react/jsx-runtime");
1054
1080
  function Select({ label, placeholder, options, id, className, ...props }) {
1055
1081
  const selectId = id || (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
1056
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-1", children: [
1057
- label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1082
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-1", children: [
1083
+ label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1058
1084
  "label",
1059
1085
  {
1060
1086
  htmlFor: selectId,
@@ -1062,8 +1088,8 @@ function Select({ label, placeholder, options, id, className, ...props }) {
1062
1088
  children: label
1063
1089
  }
1064
1090
  ),
1065
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative", children: [
1066
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1091
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
1092
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
1067
1093
  "select",
1068
1094
  {
1069
1095
  id: selectId,
@@ -1075,17 +1101,17 @@ function Select({ label, placeholder, options, id, className, ...props }) {
1075
1101
  ),
1076
1102
  ...props,
1077
1103
  children: [
1078
- placeholder && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "", disabled: props.required, children: placeholder }),
1079
- options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
1104
+ placeholder && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "", disabled: props.required, children: placeholder }),
1105
+ options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
1080
1106
  ]
1081
1107
  }
1082
1108
  ),
1083
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1109
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1084
1110
  "div",
1085
1111
  {
1086
1112
  className: "absolute top-0 right-0 bottom-0 flex items-center pr-3 text-[var(--semantic-color-text-muted)] pointer-events-none",
1087
1113
  "aria-hidden": "true",
1088
- children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
1114
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
1089
1115
  }
1090
1116
  )
1091
1117
  ] })
@@ -1093,7 +1119,7 @@ function Select({ label, placeholder, options, id, className, ...props }) {
1093
1119
  }
1094
1120
 
1095
1121
  // src/components/Skeleton/Skeleton.tsx
1096
- var import_jsx_runtime18 = require("react/jsx-runtime");
1122
+ var import_jsx_runtime19 = require("react/jsx-runtime");
1097
1123
  var skeletonClass = "animate-[wave_1.5s_ease-in-out_infinite] bg-[length:200%_100%] bg-[linear-gradient(90deg,var(--semantic-color-bg-muted)_25%,var(--semantic-color-bg-subtle)_50%,var(--semantic-color-bg-muted)_75%)]";
1098
1124
  function Skeleton({
1099
1125
  width,
@@ -1114,7 +1140,7 @@ function Skeleton({
1114
1140
  ...style
1115
1141
  };
1116
1142
  if (count === 1) {
1117
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1143
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1118
1144
  "div",
1119
1145
  {
1120
1146
  className: cn(skeletonClass, className),
@@ -1124,11 +1150,11 @@ function Skeleton({
1124
1150
  }
1125
1151
  );
1126
1152
  }
1127
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-col", style: { gap }, "aria-hidden": "true", ...props, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn(skeletonClass, className), style: itemStyle }, `skeleton-${i}`)) });
1153
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-col", style: { gap }, "aria-hidden": "true", ...props, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn(skeletonClass, className), style: itemStyle }, `skeleton-${i}`)) });
1128
1154
  }
1129
1155
 
1130
1156
  // src/components/Spinner/Spinner.tsx
1131
- var import_jsx_runtime19 = require("react/jsx-runtime");
1157
+ var import_jsx_runtime20 = require("react/jsx-runtime");
1132
1158
  var sizes = { sm: 20, md: 32, lg: 48 };
1133
1159
  var strokes = { sm: 2.5, md: 3, lg: 3.5 };
1134
1160
  function Spinner({ size = "md", label, className, ...props }) {
@@ -1136,8 +1162,8 @@ function Spinner({ size = "md", label, className, ...props }) {
1136
1162
  const stroke = strokes[size];
1137
1163
  const r = (s - stroke) / 2;
1138
1164
  const circumference = 2 * Math.PI * r;
1139
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn("flex flex-col items-center gap-3", className), role: "status", ...props, children: [
1140
- /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
1165
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex flex-col items-center gap-3", className), role: "status", ...props, children: [
1166
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
1141
1167
  "svg",
1142
1168
  {
1143
1169
  width: s,
@@ -1145,7 +1171,7 @@ function Spinner({ size = "md", label, className, ...props }) {
1145
1171
  viewBox: `0 0 ${s} ${s}`,
1146
1172
  className: "animate-[ds-spin_0.8s_cubic-bezier(0.4,0,0.2,1)_infinite]",
1147
1173
  children: [
1148
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1174
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1149
1175
  "circle",
1150
1176
  {
1151
1177
  cx: s / 2,
@@ -1156,7 +1182,7 @@ function Spinner({ size = "md", label, className, ...props }) {
1156
1182
  strokeWidth: stroke
1157
1183
  }
1158
1184
  ),
1159
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1185
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1160
1186
  "circle",
1161
1187
  {
1162
1188
  cx: s / 2,
@@ -1172,13 +1198,13 @@ function Spinner({ size = "md", label, className, ...props }) {
1172
1198
  ]
1173
1199
  }
1174
1200
  ),
1175
- label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "m-0 font-sans text-sm text-[var(--semantic-color-text-muted)]", children: label }),
1176
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sr-only", children: "Laden..." })
1201
+ label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "m-0 font-sans text-sm text-[var(--semantic-color-text-muted)]", children: label }),
1202
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sr-only", children: "Laden..." })
1177
1203
  ] });
1178
1204
  }
1179
1205
 
1180
1206
  // src/components/StatusDot/StatusDot.tsx
1181
- var import_jsx_runtime20 = require("react/jsx-runtime");
1207
+ var import_jsx_runtime21 = require("react/jsx-runtime");
1182
1208
  var colorStyles = {
1183
1209
  green: "bg-[var(--semantic-color-feedback-success)]",
1184
1210
  yellow: "bg-[var(--semantic-color-feedback-warning)]",
@@ -1198,7 +1224,7 @@ function StatusDot({
1198
1224
  ...props
1199
1225
  }) {
1200
1226
  const shouldPulse = pulse ?? color === "green";
1201
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1227
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1202
1228
  "div",
1203
1229
  {
1204
1230
  className: cn(
@@ -1216,7 +1242,7 @@ function StatusDot({
1216
1242
 
1217
1243
  // src/components/Tabs/Tabs.tsx
1218
1244
  var import_react5 = require("react");
1219
- var import_jsx_runtime21 = require("react/jsx-runtime");
1245
+ var import_jsx_runtime22 = require("react/jsx-runtime");
1220
1246
  function Tabs({ items, activeTab, onTabChange, className }) {
1221
1247
  const tabRefs = (0, import_react5.useRef)([]);
1222
1248
  const scrollRef = (0, import_react5.useRef)(null);
@@ -1279,8 +1305,8 @@ function Tabs({ items, activeTab, onTabChange, className }) {
1279
1305
  observer.disconnect();
1280
1306
  };
1281
1307
  }, [updateScrollState, updateIndicator]);
1282
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("relative", className), children: [
1283
- showMobileDropdown && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1308
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("relative", className), children: [
1309
+ showMobileDropdown && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1284
1310
  MobileTabDropdown,
1285
1311
  {
1286
1312
  items,
@@ -1289,15 +1315,15 @@ function Tabs({ items, activeTab, onTabChange, className }) {
1289
1315
  onTabChange
1290
1316
  }
1291
1317
  ),
1292
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("relative", showMobileDropdown && "hidden md:block"), children: [
1293
- canScrollLeft && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute top-0 bottom-0 left-0 z-10 w-6 bg-gradient-to-r from-[var(--semantic-color-bg-default)] to-transparent pointer-events-none" }),
1294
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1318
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("relative", showMobileDropdown && "hidden md:block"), children: [
1319
+ canScrollLeft && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute top-0 bottom-0 left-0 z-10 w-6 bg-gradient-to-r from-[var(--semantic-color-bg-default)] to-transparent pointer-events-none" }),
1320
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
1295
1321
  "div",
1296
1322
  {
1297
1323
  ref: scrollRef,
1298
1324
  className: "relative flex gap-[var(--tabs-gap)] overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
1299
1325
  children: [
1300
- items.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1326
+ items.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1301
1327
  "button",
1302
1328
  {
1303
1329
  ref: (el) => {
@@ -1309,11 +1335,11 @@ function Tabs({ items, activeTab, onTabChange, className }) {
1309
1335
  "relative pb-3 border-none bg-transparent font-sans text-sm font-medium cursor-pointer transition-colors duration-[var(--duration-fast)] whitespace-nowrap",
1310
1336
  activeTab === tab.id ? "text-[var(--semantic-color-text-default)] font-semibold" : "text-[var(--semantic-color-text-muted)] hover:text-[var(--semantic-color-text-tertiary)]"
1311
1337
  ),
1312
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "whitespace-nowrap", children: tab.label })
1338
+ children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "whitespace-nowrap", children: tab.label })
1313
1339
  },
1314
1340
  tab.id
1315
1341
  )),
1316
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1342
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1317
1343
  "div",
1318
1344
  {
1319
1345
  className: "absolute bottom-0 h-[var(--tabs-indicator-height)] rounded-full bg-[var(--semantic-color-text-default)] transition-[left,width] duration-[var(--duration-slow)] ease-out",
@@ -1326,7 +1352,7 @@ function Tabs({ items, activeTab, onTabChange, className }) {
1326
1352
  ]
1327
1353
  }
1328
1354
  ),
1329
- canScrollRight && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute top-0 right-0 bottom-0 z-10 w-6 bg-gradient-to-l from-[var(--semantic-color-bg-default)] to-transparent pointer-events-none" })
1355
+ canScrollRight && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute top-0 right-0 bottom-0 z-10 w-6 bg-gradient-to-l from-[var(--semantic-color-bg-default)] to-transparent pointer-events-none" })
1330
1356
  ] })
1331
1357
  ] });
1332
1358
  }
@@ -1347,8 +1373,8 @@ function MobileTabDropdown({
1347
1373
  document.addEventListener("mousedown", handleClickOutside);
1348
1374
  return () => document.removeEventListener("mousedown", handleClickOutside);
1349
1375
  }, []);
1350
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative md:hidden", ref: dropdownRef, children: [
1351
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1376
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative md:hidden", ref: dropdownRef, children: [
1377
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
1352
1378
  "button",
1353
1379
  {
1354
1380
  type: "button",
@@ -1358,8 +1384,8 @@ function MobileTabDropdown({
1358
1384
  isOpen && "bg-[var(--semantic-color-bg-subtle)]"
1359
1385
  ),
1360
1386
  children: [
1361
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: activeLabel }),
1362
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1387
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: activeLabel }),
1388
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1363
1389
  "svg",
1364
1390
  {
1365
1391
  className: cn(
@@ -1371,13 +1397,13 @@ function MobileTabDropdown({
1371
1397
  fill: "none",
1372
1398
  viewBox: "0 0 24 24",
1373
1399
  stroke: "currentColor",
1374
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
1400
+ children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
1375
1401
  }
1376
1402
  )
1377
1403
  ]
1378
1404
  }
1379
1405
  ),
1380
- isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute top-full left-0 z-[var(--tabs-mobile-z-index)] mt-1 min-w-48 border border-[var(--semantic-color-border-default)] rounded-lg bg-[var(--semantic-color-bg-default)] py-1 shadow-lg", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1406
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute top-full left-0 z-[var(--tabs-mobile-z-index)] mt-1 min-w-48 border border-[var(--semantic-color-border-default)] rounded-lg bg-[var(--semantic-color-bg-default)] py-1 shadow-lg", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1381
1407
  "button",
1382
1408
  {
1383
1409
  type: "button",
@@ -1397,11 +1423,11 @@ function MobileTabDropdown({
1397
1423
  }
1398
1424
 
1399
1425
  // src/components/Textarea/Textarea.tsx
1400
- var import_jsx_runtime22 = require("react/jsx-runtime");
1426
+ var import_jsx_runtime23 = require("react/jsx-runtime");
1401
1427
  function Textarea({ label, error, id, name, rows = 4, className, ...props }) {
1402
1428
  const textareaId = id || name;
1403
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-2", children: [
1404
- label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1429
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-2", children: [
1430
+ label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1405
1431
  "label",
1406
1432
  {
1407
1433
  htmlFor: textareaId,
@@ -1409,7 +1435,7 @@ function Textarea({ label, error, id, name, rows = 4, className, ...props }) {
1409
1435
  children: label
1410
1436
  }
1411
1437
  ),
1412
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1438
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1413
1439
  "textarea",
1414
1440
  {
1415
1441
  id: textareaId,
@@ -1428,7 +1454,7 @@ function Textarea({ label, error, id, name, rows = 4, className, ...props }) {
1428
1454
  ...props
1429
1455
  }
1430
1456
  ),
1431
- error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1457
+ error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1432
1458
  "p",
1433
1459
  {
1434
1460
  id: `${textareaId}-error`,
@@ -1442,7 +1468,7 @@ function Textarea({ label, error, id, name, rows = 4, className, ...props }) {
1442
1468
  // src/components/Toast/Toast.tsx
1443
1469
  var import_react6 = require("react");
1444
1470
  var import_react_dom3 = require("react-dom");
1445
- var import_jsx_runtime23 = require("react/jsx-runtime");
1471
+ var import_jsx_runtime24 = require("react/jsx-runtime");
1446
1472
  var typeStyles2 = {
1447
1473
  success: "border-l-[length:var(--toast-border-width)] border-l-[var(--semantic-color-feedback-success)]",
1448
1474
  error: "border-l-[length:var(--toast-border-width)] border-l-[var(--semantic-color-feedback-error)]",
@@ -1456,7 +1482,7 @@ var iconColors = {
1456
1482
  info: "text-[var(--semantic-color-feedback-info)]"
1457
1483
  };
1458
1484
  var icons2 = {
1459
- success: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1485
+ success: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1460
1486
  "svg",
1461
1487
  {
1462
1488
  width: "18",
@@ -1465,10 +1491,10 @@ var icons2 = {
1465
1491
  viewBox: "0 0 24 24",
1466
1492
  stroke: "currentColor",
1467
1493
  strokeWidth: 2,
1468
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
1494
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
1469
1495
  }
1470
1496
  ),
1471
- error: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1497
+ error: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1472
1498
  "svg",
1473
1499
  {
1474
1500
  width: "18",
@@ -1477,10 +1503,10 @@ var icons2 = {
1477
1503
  viewBox: "0 0 24 24",
1478
1504
  stroke: "currentColor",
1479
1505
  strokeWidth: 2,
1480
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
1506
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
1481
1507
  }
1482
1508
  ),
1483
- warning: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1509
+ warning: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1484
1510
  "svg",
1485
1511
  {
1486
1512
  width: "18",
@@ -1489,7 +1515,7 @@ var icons2 = {
1489
1515
  viewBox: "0 0 24 24",
1490
1516
  stroke: "currentColor",
1491
1517
  strokeWidth: 2,
1492
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1518
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1493
1519
  "path",
1494
1520
  {
1495
1521
  strokeLinecap: "round",
@@ -1499,7 +1525,7 @@ var icons2 = {
1499
1525
  )
1500
1526
  }
1501
1527
  ),
1502
- info: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1528
+ info: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1503
1529
  "svg",
1504
1530
  {
1505
1531
  width: "18",
@@ -1508,7 +1534,7 @@ var icons2 = {
1508
1534
  viewBox: "0 0 24 24",
1509
1535
  stroke: "currentColor",
1510
1536
  strokeWidth: 2,
1511
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1537
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1512
1538
  "path",
1513
1539
  {
1514
1540
  strokeLinecap: "round",
@@ -1534,7 +1560,7 @@ function Toast({ type = "info", message, duration = 4e3, onClose }) {
1534
1560
  if (exitTimer) clearTimeout(exitTimer);
1535
1561
  };
1536
1562
  }, [duration, dismiss]);
1537
- const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fixed top-[var(--toast-position-top)] right-[var(--toast-position-right)] z-[var(--toast-z-index)] pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
1563
+ const content = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fixed top-[var(--toast-position-top)] right-[var(--toast-position-right)] z-[var(--toast-z-index)] pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
1538
1564
  "div",
1539
1565
  {
1540
1566
  className: cn(
@@ -1543,16 +1569,16 @@ function Toast({ type = "info", message, duration = 4e3, onClose }) {
1543
1569
  isVisible && !isExiting ? "animate-[toastSlideIn_200ms_ease-out_both]" : "animate-[toastSlideOut_200ms_ease-in_both]"
1544
1570
  ),
1545
1571
  children: [
1546
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: cn("flex shrink-0", iconColors[type]), children: icons2[type] }),
1547
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex-1 leading-[1.4]", children: message }),
1548
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1572
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: cn("flex shrink-0", iconColors[type]), children: icons2[type] }),
1573
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "flex-1 leading-[1.4]", children: message }),
1574
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1549
1575
  "button",
1550
1576
  {
1551
1577
  type: "button",
1552
1578
  onClick: dismiss,
1553
1579
  className: "flex shrink-0 p-0.5 border-none rounded-sm bg-transparent text-[var(--semantic-color-text-muted)] cursor-pointer transition-colors duration-[var(--duration-fast)] hover:text-[var(--semantic-color-text-default)]",
1554
1580
  "aria-label": "Schlie\xDFen",
1555
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1581
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1556
1582
  "svg",
1557
1583
  {
1558
1584
  width: "14",
@@ -1561,7 +1587,7 @@ function Toast({ type = "info", message, duration = 4e3, onClose }) {
1561
1587
  viewBox: "0 0 24 24",
1562
1588
  stroke: "currentColor",
1563
1589
  strokeWidth: 2,
1564
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
1590
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
1565
1591
  }
1566
1592
  )
1567
1593
  }
@@ -1576,7 +1602,7 @@ function Toast({ type = "info", message, duration = 4e3, onClose }) {
1576
1602
  }
1577
1603
 
1578
1604
  // src/components/Toggle/Toggle.tsx
1579
- var import_jsx_runtime24 = require("react/jsx-runtime");
1605
+ var import_jsx_runtime25 = require("react/jsx-runtime");
1580
1606
  var trackSizes = {
1581
1607
  sm: "w-[var(--toggle-sm-track-width)] h-[var(--toggle-sm-track-height)]",
1582
1608
  md: "w-[var(--toggle-md-track-width)] h-[var(--toggle-md-track-height)]"
@@ -1591,13 +1617,13 @@ var thumbTranslate = {
1591
1617
  };
1592
1618
  function Toggle({ label, size = "md", id, name, className, ...props }) {
1593
1619
  const inputId = id || name || (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
1594
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
1620
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
1595
1621
  "label",
1596
1622
  {
1597
1623
  htmlFor: inputId,
1598
1624
  className: cn("inline-flex items-center gap-2.5 cursor-pointer", className),
1599
1625
  children: [
1600
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1626
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1601
1627
  "input",
1602
1628
  {
1603
1629
  type: "checkbox",
@@ -1607,7 +1633,7 @@ function Toggle({ label, size = "md", id, name, className, ...props }) {
1607
1633
  ...props
1608
1634
  }
1609
1635
  ),
1610
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1636
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1611
1637
  "div",
1612
1638
  {
1613
1639
  className: cn(
@@ -1615,7 +1641,7 @@ function Toggle({ label, size = "md", id, name, className, ...props }) {
1615
1641
  trackSizes[size],
1616
1642
  thumbTranslate[size]
1617
1643
  ),
1618
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1644
+ children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1619
1645
  "div",
1620
1646
  {
1621
1647
  className: cn(
@@ -1626,7 +1652,7 @@ function Toggle({ label, size = "md", id, name, className, ...props }) {
1626
1652
  )
1627
1653
  }
1628
1654
  ),
1629
- label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
1655
+ label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
1630
1656
  ]
1631
1657
  }
1632
1658
  );
@@ -1646,6 +1672,7 @@ function Toggle({ label, size = "md", id, name, className, ...props }) {
1646
1672
  DropdownMenu,
1647
1673
  FilterChips,
1648
1674
  Input,
1675
+ ListItem,
1649
1676
  Logo,
1650
1677
  Modal,
1651
1678
  Pill,