@sovereignfs/ui 0.33.1 → 0.37.0

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 (43) hide show
  1. package/README.md +1 -1
  2. package/dist/CheckableListRow.module.css +95 -0
  3. package/dist/IconPicker.module.css +63 -0
  4. package/dist/QuantityStepper.module.css +67 -0
  5. package/dist/SuggestionInput.module.css +103 -0
  6. package/dist/index.d.ts +128 -2
  7. package/dist/index.js +1007 -169
  8. package/package.json +1 -1
  9. package/src/components/CheckableListRow/CheckableListRow.module.css +95 -0
  10. package/src/components/CheckableListRow/CheckableListRow.stories.tsx +99 -0
  11. package/src/components/CheckableListRow/CheckableListRow.tsx +89 -0
  12. package/src/components/Icon/icons/apple.tsx +21 -0
  13. package/src/components/Icon/icons/banana.tsx +21 -0
  14. package/src/components/Icon/icons/beef.tsx +22 -0
  15. package/src/components/Icon/icons/beer.tsx +24 -0
  16. package/src/components/Icon/icons/candy.tsx +24 -0
  17. package/src/components/Icon/icons/carrot.tsx +22 -0
  18. package/src/components/Icon/icons/coffee.tsx +23 -0
  19. package/src/components/Icon/icons/cookie.tsx +25 -0
  20. package/src/components/Icon/icons/croissant.tsx +24 -0
  21. package/src/components/Icon/icons/cup-soda.tsx +23 -0
  22. package/src/components/Icon/icons/drumstick.tsx +21 -0
  23. package/src/components/Icon/icons/egg.tsx +20 -0
  24. package/src/components/Icon/icons/fish.tsx +25 -0
  25. package/src/components/Icon/icons/index.ts +81 -1
  26. package/src/components/Icon/icons/milk.tsx +22 -0
  27. package/src/components/Icon/icons/pizza.tsx +24 -0
  28. package/src/components/Icon/icons/salad.tsx +24 -0
  29. package/src/components/Icon/icons/shopping-basket.tsx +26 -0
  30. package/src/components/Icon/icons/snowflake.tsx +31 -0
  31. package/src/components/Icon/icons/spray-can.tsx +29 -0
  32. package/src/components/Icon/icons/wine.tsx +23 -0
  33. package/src/components/IconPicker/IconPicker.module.css +63 -0
  34. package/src/components/IconPicker/IconPicker.stories.tsx +84 -0
  35. package/src/components/IconPicker/IconPicker.tsx +90 -0
  36. package/src/components/QuantityStepper/QuantityStepper.module.css +67 -0
  37. package/src/components/QuantityStepper/QuantityStepper.stories.tsx +79 -0
  38. package/src/components/QuantityStepper/QuantityStepper.tsx +107 -0
  39. package/src/components/SuggestionInput/SuggestionInput.module.css +103 -0
  40. package/src/components/SuggestionInput/SuggestionInput.stories.tsx +144 -0
  41. package/src/components/SuggestionInput/SuggestionInput.tsx +207 -0
  42. package/src/index.ts +11 -0
  43. package/src/stories/DesignSystemOverview.stories.tsx +107 -0
package/dist/index.js CHANGED
@@ -667,6 +667,498 @@ function EllipsisVerticalIcon(props) {
667
667
  );
668
668
  }
669
669
 
670
+ // src/components/Icon/icons/banana.tsx
671
+ import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
672
+ function BananaIcon(props) {
673
+ return /* @__PURE__ */ jsxs24(
674
+ "svg",
675
+ {
676
+ xmlns: "http://www.w3.org/2000/svg",
677
+ viewBox: "0 0 24 24",
678
+ fill: "none",
679
+ stroke: "currentColor",
680
+ strokeWidth: "2",
681
+ strokeLinecap: "round",
682
+ strokeLinejoin: "round",
683
+ ...props,
684
+ children: [
685
+ /* @__PURE__ */ jsx31("path", { d: "M4 13c3.5-2 8-2 10 2a5.5 5.5 0 0 1 8 5" }),
686
+ /* @__PURE__ */ jsx31("path", { d: "M5.15 17.89c5.52-1.52 8.65-6.89 7-12C11.55 4 11.5 2 13 2c3.22 0 5 5.5 5 8 0 6.5-4.2 12-10.49 12C5.11 22 2 22 2 20c0-1.5 1.14-1.55 3.15-2.11Z" })
687
+ ]
688
+ }
689
+ );
690
+ }
691
+
692
+ // src/components/Icon/icons/apple.tsx
693
+ import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
694
+ function AppleIcon(props) {
695
+ return /* @__PURE__ */ jsxs25(
696
+ "svg",
697
+ {
698
+ xmlns: "http://www.w3.org/2000/svg",
699
+ viewBox: "0 0 24 24",
700
+ fill: "none",
701
+ stroke: "currentColor",
702
+ strokeWidth: "2",
703
+ strokeLinecap: "round",
704
+ strokeLinejoin: "round",
705
+ ...props,
706
+ children: [
707
+ /* @__PURE__ */ jsx32("path", { d: "M12 6.528V3a1 1 0 0 1 1-1h0" }),
708
+ /* @__PURE__ */ jsx32("path", { d: "M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21" })
709
+ ]
710
+ }
711
+ );
712
+ }
713
+
714
+ // src/components/Icon/icons/carrot.tsx
715
+ import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
716
+ function CarrotIcon(props) {
717
+ return /* @__PURE__ */ jsxs26(
718
+ "svg",
719
+ {
720
+ xmlns: "http://www.w3.org/2000/svg",
721
+ viewBox: "0 0 24 24",
722
+ fill: "none",
723
+ stroke: "currentColor",
724
+ strokeWidth: "2",
725
+ strokeLinecap: "round",
726
+ strokeLinejoin: "round",
727
+ ...props,
728
+ children: [
729
+ /* @__PURE__ */ jsx33("path", { d: "M2.27 21.7s9.87-3.5 12.73-6.36a4.5 4.5 0 0 0-6.36-6.37C5.77 11.84 2.27 21.7 2.27 21.7zM8.64 14l-2.05-2.04M15.34 15l-2.46-2.46" }),
730
+ /* @__PURE__ */ jsx33("path", { d: "M22 9s-1.33-2-3.5-2C16.86 7 15 9 15 9s1.33 2 3.5 2S22 9 22 9z" }),
731
+ /* @__PURE__ */ jsx33("path", { d: "M15 2s-2 1.33-2 3.5S15 9 15 9s2-1.84 2-3.5C17 3.33 15 2 15 2z" })
732
+ ]
733
+ }
734
+ );
735
+ }
736
+
737
+ // src/components/Icon/icons/egg.tsx
738
+ import { jsx as jsx34 } from "react/jsx-runtime";
739
+ function EggIcon(props) {
740
+ return /* @__PURE__ */ jsx34(
741
+ "svg",
742
+ {
743
+ xmlns: "http://www.w3.org/2000/svg",
744
+ viewBox: "0 0 24 24",
745
+ fill: "none",
746
+ stroke: "currentColor",
747
+ strokeWidth: "2",
748
+ strokeLinecap: "round",
749
+ strokeLinejoin: "round",
750
+ ...props,
751
+ children: /* @__PURE__ */ jsx34("path", { d: "M12 2C8 2 4 8 4 14a8 8 0 0 0 16 0c0-6-4-12-8-12" })
752
+ }
753
+ );
754
+ }
755
+
756
+ // src/components/Icon/icons/beef.tsx
757
+ import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
758
+ function BeefIcon(props) {
759
+ return /* @__PURE__ */ jsxs27(
760
+ "svg",
761
+ {
762
+ xmlns: "http://www.w3.org/2000/svg",
763
+ viewBox: "0 0 24 24",
764
+ fill: "none",
765
+ stroke: "currentColor",
766
+ strokeWidth: "2",
767
+ strokeLinecap: "round",
768
+ strokeLinejoin: "round",
769
+ ...props,
770
+ children: [
771
+ /* @__PURE__ */ jsx35("path", { d: "M16.4 13.7A6.5 6.5 0 1 0 6.28 6.6c-1.1 3.13-.78 3.9-3.18 6.08A3 3 0 0 0 5 18c4 0 8.4-1.8 11.4-4.3" }),
772
+ /* @__PURE__ */ jsx35("path", { d: "m18.5 6 2.19 4.5a6.48 6.48 0 0 1-2.29 7.2C15.4 20.2 11 22 7 22a3 3 0 0 1-2.68-1.66L2.4 16.5" }),
773
+ /* @__PURE__ */ jsx35("circle", { cx: "12.5", cy: "8.5", r: "2.5" })
774
+ ]
775
+ }
776
+ );
777
+ }
778
+
779
+ // src/components/Icon/icons/fish.tsx
780
+ import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
781
+ function FishIcon(props) {
782
+ return /* @__PURE__ */ jsxs28(
783
+ "svg",
784
+ {
785
+ xmlns: "http://www.w3.org/2000/svg",
786
+ viewBox: "0 0 24 24",
787
+ fill: "none",
788
+ stroke: "currentColor",
789
+ strokeWidth: "2",
790
+ strokeLinecap: "round",
791
+ strokeLinejoin: "round",
792
+ ...props,
793
+ children: [
794
+ /* @__PURE__ */ jsx36("path", { d: "M6.5 12c.94-3.46 4.94-6 8.5-6 3.56 0 6.06 2.54 7 6-.94 3.47-3.44 6-7 6s-7.56-2.53-8.5-6Z" }),
795
+ /* @__PURE__ */ jsx36("path", { d: "M18 12v.5" }),
796
+ /* @__PURE__ */ jsx36("path", { d: "M16 17.93a9.77 9.77 0 0 1 0-11.86" }),
797
+ /* @__PURE__ */ jsx36("path", { d: "M7 10.67C7 8 5.58 5.97 2.73 5.5c-1 1.5-1 5 .23 6.5-1.24 1.5-1.24 5-.23 6.5C5.58 18.03 7 16 7 13.33" }),
798
+ /* @__PURE__ */ jsx36("path", { d: "M10.46 7.26C10.2 5.88 9.17 4.24 8 3h5.8a2 2 0 0 1 1.98 1.67l.23 1.4" }),
799
+ /* @__PURE__ */ jsx36("path", { d: "m16.01 17.93-.23 1.4A2 2 0 0 1 13.8 21H9.5a5.96 5.96 0 0 0 1.49-3.98" })
800
+ ]
801
+ }
802
+ );
803
+ }
804
+
805
+ // src/components/Icon/icons/coffee.tsx
806
+ import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
807
+ function CoffeeIcon(props) {
808
+ return /* @__PURE__ */ jsxs29(
809
+ "svg",
810
+ {
811
+ xmlns: "http://www.w3.org/2000/svg",
812
+ viewBox: "0 0 24 24",
813
+ fill: "none",
814
+ stroke: "currentColor",
815
+ strokeWidth: "2",
816
+ strokeLinecap: "round",
817
+ strokeLinejoin: "round",
818
+ ...props,
819
+ children: [
820
+ /* @__PURE__ */ jsx37("path", { d: "M10 2v2" }),
821
+ /* @__PURE__ */ jsx37("path", { d: "M14 2v2" }),
822
+ /* @__PURE__ */ jsx37("path", { d: "M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1" }),
823
+ /* @__PURE__ */ jsx37("path", { d: "M6 2v2" })
824
+ ]
825
+ }
826
+ );
827
+ }
828
+
829
+ // src/components/Icon/icons/wine.tsx
830
+ import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
831
+ function WineIcon(props) {
832
+ return /* @__PURE__ */ jsxs30(
833
+ "svg",
834
+ {
835
+ xmlns: "http://www.w3.org/2000/svg",
836
+ viewBox: "0 0 24 24",
837
+ fill: "none",
838
+ stroke: "currentColor",
839
+ strokeWidth: "2",
840
+ strokeLinecap: "round",
841
+ strokeLinejoin: "round",
842
+ ...props,
843
+ children: [
844
+ /* @__PURE__ */ jsx38("path", { d: "M8 22h8" }),
845
+ /* @__PURE__ */ jsx38("path", { d: "M7 10h10" }),
846
+ /* @__PURE__ */ jsx38("path", { d: "M12 15v7" }),
847
+ /* @__PURE__ */ jsx38("path", { d: "M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z" })
848
+ ]
849
+ }
850
+ );
851
+ }
852
+
853
+ // src/components/Icon/icons/beer.tsx
854
+ import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
855
+ function BeerIcon(props) {
856
+ return /* @__PURE__ */ jsxs31(
857
+ "svg",
858
+ {
859
+ xmlns: "http://www.w3.org/2000/svg",
860
+ viewBox: "0 0 24 24",
861
+ fill: "none",
862
+ stroke: "currentColor",
863
+ strokeWidth: "2",
864
+ strokeLinecap: "round",
865
+ strokeLinejoin: "round",
866
+ ...props,
867
+ children: [
868
+ /* @__PURE__ */ jsx39("path", { d: "M17 11h1a3 3 0 0 1 0 6h-1" }),
869
+ /* @__PURE__ */ jsx39("path", { d: "M9 12v6" }),
870
+ /* @__PURE__ */ jsx39("path", { d: "M13 12v6" }),
871
+ /* @__PURE__ */ jsx39("path", { d: "M14 7.5c-1 0-1.44.5-3 .5s-2-.5-3-.5-1.72.5-2.5.5a2.5 2.5 0 0 1 0-5c.78 0 1.57.5 2.5.5S9.44 2 11 2s2 1.5 3 1.5 1.72-.5 2.5-.5a2.5 2.5 0 0 1 0 5c-.78 0-1.5-.5-2.5-.5Z" }),
872
+ /* @__PURE__ */ jsx39("path", { d: "M5 8v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8" })
873
+ ]
874
+ }
875
+ );
876
+ }
877
+
878
+ // src/components/Icon/icons/cookie.tsx
879
+ import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
880
+ function CookieIcon(props) {
881
+ return /* @__PURE__ */ jsxs32(
882
+ "svg",
883
+ {
884
+ xmlns: "http://www.w3.org/2000/svg",
885
+ viewBox: "0 0 24 24",
886
+ fill: "none",
887
+ stroke: "currentColor",
888
+ strokeWidth: "2",
889
+ strokeLinecap: "round",
890
+ strokeLinejoin: "round",
891
+ ...props,
892
+ children: [
893
+ /* @__PURE__ */ jsx40("path", { d: "M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5" }),
894
+ /* @__PURE__ */ jsx40("path", { d: "M8.5 8.5v.01" }),
895
+ /* @__PURE__ */ jsx40("path", { d: "M16 15.5v.01" }),
896
+ /* @__PURE__ */ jsx40("path", { d: "M12 12v.01" }),
897
+ /* @__PURE__ */ jsx40("path", { d: "M11 17v.01" }),
898
+ /* @__PURE__ */ jsx40("path", { d: "M7 14v.01" })
899
+ ]
900
+ }
901
+ );
902
+ }
903
+
904
+ // src/components/Icon/icons/pizza.tsx
905
+ import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
906
+ function PizzaIcon(props) {
907
+ return /* @__PURE__ */ jsxs33(
908
+ "svg",
909
+ {
910
+ xmlns: "http://www.w3.org/2000/svg",
911
+ viewBox: "0 0 24 24",
912
+ fill: "none",
913
+ stroke: "currentColor",
914
+ strokeWidth: "2",
915
+ strokeLinecap: "round",
916
+ strokeLinejoin: "round",
917
+ ...props,
918
+ children: [
919
+ /* @__PURE__ */ jsx41("path", { d: "m12 14-1 1" }),
920
+ /* @__PURE__ */ jsx41("path", { d: "m13.75 18.25-1.25 1.42" }),
921
+ /* @__PURE__ */ jsx41("path", { d: "M17.775 5.654a15.68 15.68 0 0 0-12.121 12.12" }),
922
+ /* @__PURE__ */ jsx41("path", { d: "M18.8 9.3a1 1 0 0 0 2.1 7.7" }),
923
+ /* @__PURE__ */ jsx41("path", { d: "M21.964 20.732a1 1 0 0 1-1.232 1.232l-18-5a1 1 0 0 1-.695-1.232A19.68 19.68 0 0 1 15.732 2.037a1 1 0 0 1 1.232.695z" })
924
+ ]
925
+ }
926
+ );
927
+ }
928
+
929
+ // src/components/Icon/icons/candy.tsx
930
+ import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
931
+ function CandyIcon(props) {
932
+ return /* @__PURE__ */ jsxs34(
933
+ "svg",
934
+ {
935
+ xmlns: "http://www.w3.org/2000/svg",
936
+ viewBox: "0 0 24 24",
937
+ fill: "none",
938
+ stroke: "currentColor",
939
+ strokeWidth: "2",
940
+ strokeLinecap: "round",
941
+ strokeLinejoin: "round",
942
+ ...props,
943
+ children: [
944
+ /* @__PURE__ */ jsx42("path", { d: "M10 7v10.9" }),
945
+ /* @__PURE__ */ jsx42("path", { d: "M14 6.1V17" }),
946
+ /* @__PURE__ */ jsx42("path", { d: "M16 7V3a1 1 0 0 1 1.707-.707 2.5 2.5 0 0 0 2.152.717 1 1 0 0 1 1.131 1.131 2.5 2.5 0 0 0 .717 2.152A1 1 0 0 1 21 8h-4" }),
947
+ /* @__PURE__ */ jsx42("path", { d: "M16.536 7.465a5 5 0 0 0-7.072 0l-2 2a5 5 0 0 0 0 7.07 5 5 0 0 0 7.072 0l2-2a5 5 0 0 0 0-7.07" }),
948
+ /* @__PURE__ */ jsx42("path", { d: "M8 17v4a1 1 0 0 1-1.707.707 2.5 2.5 0 0 0-2.152-.717 1 1 0 0 1-1.131-1.131 2.5 2.5 0 0 0-.717-2.152A1 1 0 0 1 3 16h4" })
949
+ ]
950
+ }
951
+ );
952
+ }
953
+
954
+ // src/components/Icon/icons/salad.tsx
955
+ import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
956
+ function SaladIcon(props) {
957
+ return /* @__PURE__ */ jsxs35(
958
+ "svg",
959
+ {
960
+ xmlns: "http://www.w3.org/2000/svg",
961
+ viewBox: "0 0 24 24",
962
+ fill: "none",
963
+ stroke: "currentColor",
964
+ strokeWidth: "2",
965
+ strokeLinecap: "round",
966
+ strokeLinejoin: "round",
967
+ ...props,
968
+ children: [
969
+ /* @__PURE__ */ jsx43("path", { d: "M7 21h10" }),
970
+ /* @__PURE__ */ jsx43("path", { d: "M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z" }),
971
+ /* @__PURE__ */ jsx43("path", { d: "M11.38 12a2.4 2.4 0 0 1-.4-4.77 2.4 2.4 0 0 1 3.2-2.77 2.4 2.4 0 0 1 3.47-.63 2.4 2.4 0 0 1 3.37 3.37 2.4 2.4 0 0 1-1.1 3.7 2.51 2.51 0 0 1 .03 1.1" }),
972
+ /* @__PURE__ */ jsx43("path", { d: "m13 12 4-4" }),
973
+ /* @__PURE__ */ jsx43("path", { d: "M10.9 7.25A3.99 3.99 0 0 0 4 10c0 .73.2 1.41.54 2" })
974
+ ]
975
+ }
976
+ );
977
+ }
978
+
979
+ // src/components/Icon/icons/milk.tsx
980
+ import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
981
+ function MilkIcon(props) {
982
+ return /* @__PURE__ */ jsxs36(
983
+ "svg",
984
+ {
985
+ xmlns: "http://www.w3.org/2000/svg",
986
+ viewBox: "0 0 24 24",
987
+ fill: "none",
988
+ stroke: "currentColor",
989
+ strokeWidth: "2",
990
+ strokeLinecap: "round",
991
+ strokeLinejoin: "round",
992
+ ...props,
993
+ children: [
994
+ /* @__PURE__ */ jsx44("path", { d: "M8 2h8" }),
995
+ /* @__PURE__ */ jsx44("path", { d: "M9 2v2.789a4 4 0 0 1-.672 2.219l-.656.984A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-9.789a4 4 0 0 0-.672-2.219l-.656-.984A4 4 0 0 1 15 4.788V2" }),
996
+ /* @__PURE__ */ jsx44("path", { d: "M7 15a6.472 6.472 0 0 1 5 0 6.47 6.47 0 0 0 5 0" })
997
+ ]
998
+ }
999
+ );
1000
+ }
1001
+
1002
+ // src/components/Icon/icons/drumstick.tsx
1003
+ import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
1004
+ function DrumstickIcon(props) {
1005
+ return /* @__PURE__ */ jsxs37(
1006
+ "svg",
1007
+ {
1008
+ xmlns: "http://www.w3.org/2000/svg",
1009
+ viewBox: "0 0 24 24",
1010
+ fill: "none",
1011
+ stroke: "currentColor",
1012
+ strokeWidth: "2",
1013
+ strokeLinecap: "round",
1014
+ strokeLinejoin: "round",
1015
+ ...props,
1016
+ children: [
1017
+ /* @__PURE__ */ jsx45("path", { d: "M15.4 15.63a7.875 6 135 1 1 6.23-6.23 4.5 3.43 135 0 0-6.23 6.23" }),
1018
+ /* @__PURE__ */ jsx45("path", { d: "m8.29 12.71-2.6 2.6a2.5 2.5 0 1 0-1.65 4.65A2.5 2.5 0 1 0 8.7 18.3l2.59-2.59" })
1019
+ ]
1020
+ }
1021
+ );
1022
+ }
1023
+
1024
+ // src/components/Icon/icons/croissant.tsx
1025
+ import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
1026
+ function CroissantIcon(props) {
1027
+ return /* @__PURE__ */ jsxs38(
1028
+ "svg",
1029
+ {
1030
+ xmlns: "http://www.w3.org/2000/svg",
1031
+ viewBox: "0 0 24 24",
1032
+ fill: "none",
1033
+ stroke: "currentColor",
1034
+ strokeWidth: "2",
1035
+ strokeLinecap: "round",
1036
+ strokeLinejoin: "round",
1037
+ ...props,
1038
+ children: [
1039
+ /* @__PURE__ */ jsx46("path", { d: "M10.2 18H4.774a1.5 1.5 0 0 1-1.352-.97 11 11 0 0 1 .132-6.487" }),
1040
+ /* @__PURE__ */ jsx46("path", { d: "M18 10.2V4.774a1.5 1.5 0 0 0-.97-1.352 11 11 0 0 0-6.486.132" }),
1041
+ /* @__PURE__ */ jsx46("path", { d: "M18 5a4 3 0 0 1 4 3 2 2 0 0 1-2 2 10 10 0 0 0-5.139 1.42" }),
1042
+ /* @__PURE__ */ jsx46("path", { d: "M5 18a3 4 0 0 0 3 4 2 2 0 0 0 2-2 10 10 0 0 1 1.42-5.14" }),
1043
+ /* @__PURE__ */ jsx46("path", { d: "M8.709 2.554a10 10 0 0 0-6.155 6.155 1.5 1.5 0 0 0 .676 1.626l9.807 5.42a2 2 0 0 0 2.718-2.718l-5.42-9.807a1.5 1.5 0 0 0-1.626-.676" })
1044
+ ]
1045
+ }
1046
+ );
1047
+ }
1048
+
1049
+ // src/components/Icon/icons/cup-soda.tsx
1050
+ import { jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
1051
+ function CupSodaIcon(props) {
1052
+ return /* @__PURE__ */ jsxs39(
1053
+ "svg",
1054
+ {
1055
+ xmlns: "http://www.w3.org/2000/svg",
1056
+ viewBox: "0 0 24 24",
1057
+ fill: "none",
1058
+ stroke: "currentColor",
1059
+ strokeWidth: "2",
1060
+ strokeLinecap: "round",
1061
+ strokeLinejoin: "round",
1062
+ ...props,
1063
+ children: [
1064
+ /* @__PURE__ */ jsx47("path", { d: "m6 8 1.75 12.28a2 2 0 0 0 2 1.72h4.54a2 2 0 0 0 2-1.72L18 8" }),
1065
+ /* @__PURE__ */ jsx47("path", { d: "M5 8h14" }),
1066
+ /* @__PURE__ */ jsx47("path", { d: "M7 15a6.47 6.47 0 0 1 5 0 6.47 6.47 0 0 0 5 0" }),
1067
+ /* @__PURE__ */ jsx47("path", { d: "m12 8 1-6h2" })
1068
+ ]
1069
+ }
1070
+ );
1071
+ }
1072
+
1073
+ // src/components/Icon/icons/spray-can.tsx
1074
+ import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
1075
+ function SprayCanIcon(props) {
1076
+ return /* @__PURE__ */ jsxs40(
1077
+ "svg",
1078
+ {
1079
+ xmlns: "http://www.w3.org/2000/svg",
1080
+ viewBox: "0 0 24 24",
1081
+ fill: "none",
1082
+ stroke: "currentColor",
1083
+ strokeWidth: "2",
1084
+ strokeLinecap: "round",
1085
+ strokeLinejoin: "round",
1086
+ ...props,
1087
+ children: [
1088
+ /* @__PURE__ */ jsx48("path", { d: "M3 3h.01" }),
1089
+ /* @__PURE__ */ jsx48("path", { d: "M7 5h.01" }),
1090
+ /* @__PURE__ */ jsx48("path", { d: "M11 7h.01" }),
1091
+ /* @__PURE__ */ jsx48("path", { d: "M3 7h.01" }),
1092
+ /* @__PURE__ */ jsx48("path", { d: "M7 9h.01" }),
1093
+ /* @__PURE__ */ jsx48("path", { d: "M3 11h.01" }),
1094
+ /* @__PURE__ */ jsx48("rect", { width: "4", height: "4", x: "15", y: "5" }),
1095
+ /* @__PURE__ */ jsx48("path", { d: "m19 9 2 2v10c0 .6-.4 1-1 1h-6c-.6 0-1-.4-1-1V11l2-2" }),
1096
+ /* @__PURE__ */ jsx48("path", { d: "m13 14 8-2" }),
1097
+ /* @__PURE__ */ jsx48("path", { d: "m13 19 8-2" })
1098
+ ]
1099
+ }
1100
+ );
1101
+ }
1102
+
1103
+ // src/components/Icon/icons/snowflake.tsx
1104
+ import { jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
1105
+ function SnowflakeIcon(props) {
1106
+ return /* @__PURE__ */ jsxs41(
1107
+ "svg",
1108
+ {
1109
+ xmlns: "http://www.w3.org/2000/svg",
1110
+ viewBox: "0 0 24 24",
1111
+ fill: "none",
1112
+ stroke: "currentColor",
1113
+ strokeWidth: "2",
1114
+ strokeLinecap: "round",
1115
+ strokeLinejoin: "round",
1116
+ ...props,
1117
+ children: [
1118
+ /* @__PURE__ */ jsx49("path", { d: "m10 20-1.25-2.5L6 18" }),
1119
+ /* @__PURE__ */ jsx49("path", { d: "M10 4 8.75 6.5 6 6" }),
1120
+ /* @__PURE__ */ jsx49("path", { d: "m14 20 1.25-2.5L18 18" }),
1121
+ /* @__PURE__ */ jsx49("path", { d: "m14 4 1.25 2.5L18 6" }),
1122
+ /* @__PURE__ */ jsx49("path", { d: "m17 21-3-6h-4" }),
1123
+ /* @__PURE__ */ jsx49("path", { d: "m17 3-3 6 1.5 3" }),
1124
+ /* @__PURE__ */ jsx49("path", { d: "M2 12h6.5L10 9" }),
1125
+ /* @__PURE__ */ jsx49("path", { d: "m20 10-1.5 2 1.5 2" }),
1126
+ /* @__PURE__ */ jsx49("path", { d: "M22 12h-6.5L14 15" }),
1127
+ /* @__PURE__ */ jsx49("path", { d: "m4 10 1.5 2L4 14" }),
1128
+ /* @__PURE__ */ jsx49("path", { d: "m7 21 3-6-1.5-3" }),
1129
+ /* @__PURE__ */ jsx49("path", { d: "m7 3 3 6h4" })
1130
+ ]
1131
+ }
1132
+ );
1133
+ }
1134
+
1135
+ // src/components/Icon/icons/shopping-basket.tsx
1136
+ import { jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
1137
+ function ShoppingBasketIcon(props) {
1138
+ return /* @__PURE__ */ jsxs42(
1139
+ "svg",
1140
+ {
1141
+ xmlns: "http://www.w3.org/2000/svg",
1142
+ viewBox: "0 0 24 24",
1143
+ fill: "none",
1144
+ stroke: "currentColor",
1145
+ strokeWidth: "2",
1146
+ strokeLinecap: "round",
1147
+ strokeLinejoin: "round",
1148
+ ...props,
1149
+ children: [
1150
+ /* @__PURE__ */ jsx50("path", { d: "m15 11-1 9" }),
1151
+ /* @__PURE__ */ jsx50("path", { d: "m19 11-4-7" }),
1152
+ /* @__PURE__ */ jsx50("path", { d: "M2 11h20" }),
1153
+ /* @__PURE__ */ jsx50("path", { d: "m3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8a2 2 0 0 0 2-1.6l1.7-7.4" }),
1154
+ /* @__PURE__ */ jsx50("path", { d: "M4.5 15.5h15" }),
1155
+ /* @__PURE__ */ jsx50("path", { d: "m5 11 4-7" }),
1156
+ /* @__PURE__ */ jsx50("path", { d: "m9 11 1 9" })
1157
+ ]
1158
+ }
1159
+ );
1160
+ }
1161
+
670
1162
  // src/components/Icon/icons/index.ts
671
1163
  var ICONS = {
672
1164
  house: HouseIcon,
@@ -697,12 +1189,32 @@ var ICONS = {
697
1189
  "alert-triangle": AlertTriangleIcon,
698
1190
  calendar: CalendarIcon,
699
1191
  "sliders-horizontal": SlidersHorizontalIcon,
700
- "ellipsis-vertical": EllipsisVerticalIcon
1192
+ "ellipsis-vertical": EllipsisVerticalIcon,
1193
+ banana: BananaIcon,
1194
+ apple: AppleIcon,
1195
+ carrot: CarrotIcon,
1196
+ egg: EggIcon,
1197
+ beef: BeefIcon,
1198
+ fish: FishIcon,
1199
+ coffee: CoffeeIcon,
1200
+ wine: WineIcon,
1201
+ beer: BeerIcon,
1202
+ cookie: CookieIcon,
1203
+ pizza: PizzaIcon,
1204
+ candy: CandyIcon,
1205
+ salad: SaladIcon,
1206
+ milk: MilkIcon,
1207
+ drumstick: DrumstickIcon,
1208
+ croissant: CroissantIcon,
1209
+ "cup-soda": CupSodaIcon,
1210
+ "spray-can": SprayCanIcon,
1211
+ snowflake: SnowflakeIcon,
1212
+ "shopping-basket": ShoppingBasketIcon
701
1213
  };
702
1214
 
703
1215
  // src/components/Icon/Icon.tsx
704
1216
  import styles2 from "./Icon.module.css";
705
- import { jsx as jsx31 } from "react/jsx-runtime";
1217
+ import { jsx as jsx51 } from "react/jsx-runtime";
706
1218
  function Icon({
707
1219
  name,
708
1220
  size = "md",
@@ -711,14 +1223,14 @@ function Icon({
711
1223
  }) {
712
1224
  const Svg = ICONS[name];
713
1225
  const classes = [styles2.root, styles2[size], className].filter(Boolean).join(" ");
714
- return /* @__PURE__ */ jsx31(Svg, { className: classes, role: aria["aria-label"] ? "img" : void 0, ...aria });
1226
+ return /* @__PURE__ */ jsx51(Svg, { className: classes, role: aria["aria-label"] ? "img" : void 0, ...aria });
715
1227
  }
716
1228
 
717
1229
  // src/components/Toggle/Toggle.tsx
718
1230
  import styles3 from "./Toggle.module.css";
719
- import { jsx as jsx32 } from "react/jsx-runtime";
1231
+ import { jsx as jsx52 } from "react/jsx-runtime";
720
1232
  function Toggle({ checked, onChange, disabled, className, ...rest }) {
721
- return /* @__PURE__ */ jsx32(
1233
+ return /* @__PURE__ */ jsx52(
722
1234
  "button",
723
1235
  {
724
1236
  type: "button",
@@ -728,14 +1240,14 @@ function Toggle({ checked, onChange, disabled, className, ...rest }) {
728
1240
  className: [styles3.track, checked ? styles3.on : styles3.off, className].filter(Boolean).join(" "),
729
1241
  onClick: () => onChange(!checked),
730
1242
  ...rest,
731
- children: /* @__PURE__ */ jsx32("span", { className: styles3.thumb })
1243
+ children: /* @__PURE__ */ jsx52("span", { className: styles3.thumb })
732
1244
  }
733
1245
  );
734
1246
  }
735
1247
 
736
1248
  // src/components/SegmentedControl/SegmentedControl.tsx
737
1249
  import styles4 from "./SegmentedControl.module.css";
738
- import { jsx as jsx33 } from "react/jsx-runtime";
1250
+ import { jsx as jsx53 } from "react/jsx-runtime";
739
1251
  function SegmentedControl({
740
1252
  value,
741
1253
  onChange,
@@ -743,7 +1255,7 @@ function SegmentedControl({
743
1255
  size = "md",
744
1256
  "aria-label": ariaLabel
745
1257
  }) {
746
- return /* @__PURE__ */ jsx33(
1258
+ return /* @__PURE__ */ jsx53(
747
1259
  "div",
748
1260
  {
749
1261
  role: "radiogroup",
@@ -751,7 +1263,7 @@ function SegmentedControl({
751
1263
  className: [styles4.track, styles4[size]].join(" "),
752
1264
  children: options.map((opt) => {
753
1265
  const active = opt.value === value;
754
- return /* @__PURE__ */ jsx33(
1266
+ return /* @__PURE__ */ jsx53(
755
1267
  "button",
756
1268
  {
757
1269
  type: "button",
@@ -770,11 +1282,11 @@ function SegmentedControl({
770
1282
 
771
1283
  // src/components/Tabs/Tabs.tsx
772
1284
  import styles5 from "./Tabs.module.css";
773
- import { jsx as jsx34 } from "react/jsx-runtime";
1285
+ import { jsx as jsx54 } from "react/jsx-runtime";
774
1286
  function Tabs({ items, value, onChange, "aria-label": ariaLabel }) {
775
- return /* @__PURE__ */ jsx34("div", { role: "tablist", "aria-label": ariaLabel, className: styles5.tablist, children: items.map((item) => {
1287
+ return /* @__PURE__ */ jsx54("div", { role: "tablist", "aria-label": ariaLabel, className: styles5.tablist, children: items.map((item) => {
776
1288
  const active = item.value === value;
777
- return /* @__PURE__ */ jsx34(
1289
+ return /* @__PURE__ */ jsx54(
778
1290
  "button",
779
1291
  {
780
1292
  type: "button",
@@ -791,15 +1303,15 @@ function Tabs({ items, value, onChange, "aria-label": ariaLabel }) {
791
1303
 
792
1304
  // src/components/Select/Select.tsx
793
1305
  import styles6 from "./Select.module.css";
794
- import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
1306
+ import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
795
1307
  function Select({ className, size = "md", children, ...rest }) {
796
- return /* @__PURE__ */ jsxs24(
1308
+ return /* @__PURE__ */ jsxs43(
797
1309
  "div",
798
1310
  {
799
1311
  className: [styles6.wrapper, size === "sm" ? styles6.sm : void 0, className].filter(Boolean).join(" "),
800
1312
  children: [
801
- /* @__PURE__ */ jsx35("select", { className: styles6.select, ...rest, children }),
802
- /* @__PURE__ */ jsx35(
1313
+ /* @__PURE__ */ jsx55("select", { className: styles6.select, ...rest, children }),
1314
+ /* @__PURE__ */ jsx55(
803
1315
  "svg",
804
1316
  {
805
1317
  className: styles6.chevron,
@@ -812,7 +1324,7 @@ function Select({ className, size = "md", children, ...rest }) {
812
1324
  strokeWidth: "2",
813
1325
  strokeLinecap: "round",
814
1326
  strokeLinejoin: "round",
815
- children: /* @__PURE__ */ jsx35("polyline", { points: "6 9 12 15 18 9" })
1327
+ children: /* @__PURE__ */ jsx55("polyline", { points: "6 9 12 15 18 9" })
816
1328
  }
817
1329
  )
818
1330
  ]
@@ -822,18 +1334,18 @@ function Select({ className, size = "md", children, ...rest }) {
822
1334
 
823
1335
  // src/components/SystemBanner/SystemBanner.tsx
824
1336
  import styles7 from "./SystemBanner.module.css";
825
- import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
1337
+ import { jsx as jsx56, jsxs as jsxs44 } from "react/jsx-runtime";
826
1338
  function SystemBanner({ variant = "info", onDismiss, children }) {
827
- return /* @__PURE__ */ jsxs25("div", { role: "status", "aria-live": "polite", className: [styles7.banner, styles7[variant]].join(" "), children: [
828
- /* @__PURE__ */ jsx36("span", { className: styles7.content, children }),
829
- onDismiss && /* @__PURE__ */ jsx36(
1339
+ return /* @__PURE__ */ jsxs44("div", { role: "status", "aria-live": "polite", className: [styles7.banner, styles7[variant]].join(" "), children: [
1340
+ /* @__PURE__ */ jsx56("span", { className: styles7.content, children }),
1341
+ onDismiss && /* @__PURE__ */ jsx56(
830
1342
  "button",
831
1343
  {
832
1344
  type: "button",
833
1345
  className: styles7.dismiss,
834
1346
  onClick: onDismiss,
835
1347
  "aria-label": "Dismiss banner",
836
- children: /* @__PURE__ */ jsx36(
1348
+ children: /* @__PURE__ */ jsx56(
837
1349
  "svg",
838
1350
  {
839
1351
  width: "14",
@@ -842,7 +1354,7 @@ function SystemBanner({ variant = "info", onDismiss, children }) {
842
1354
  fill: "none",
843
1355
  xmlns: "http://www.w3.org/2000/svg",
844
1356
  "aria-hidden": true,
845
- children: /* @__PURE__ */ jsx36(
1357
+ children: /* @__PURE__ */ jsx56(
846
1358
  "path",
847
1359
  {
848
1360
  d: "M1 1L13 13M13 1L1 13",
@@ -866,7 +1378,7 @@ import {
866
1378
  useState
867
1379
  } from "react";
868
1380
  import styles8 from "./Popover.module.css";
869
- import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
1381
+ import { jsx as jsx57, jsxs as jsxs45 } from "react/jsx-runtime";
870
1382
  var TRIGGER_GAP = 8;
871
1383
  var VIEWPORT_MARGIN = 4;
872
1384
  function Popover({
@@ -942,9 +1454,9 @@ function Popover({
942
1454
  document.addEventListener("keydown", handleKeyDown);
943
1455
  return () => document.removeEventListener("keydown", handleKeyDown);
944
1456
  }, [open, onClose]);
945
- return /* @__PURE__ */ jsxs26("div", { ref: containerRef, className: styles8.container, children: [
1457
+ return /* @__PURE__ */ jsxs45("div", { ref: containerRef, className: styles8.container, children: [
946
1458
  trigger,
947
- open && /* @__PURE__ */ jsx37(
1459
+ open && /* @__PURE__ */ jsx57(
948
1460
  "div",
949
1461
  {
950
1462
  ref: panelRef,
@@ -965,7 +1477,7 @@ function Popover({
965
1477
 
966
1478
  // src/components/Button/Button.tsx
967
1479
  import styles9 from "./Button.module.css";
968
- import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
1480
+ import { jsx as jsx58, jsxs as jsxs46 } from "react/jsx-runtime";
969
1481
  function Button({
970
1482
  variant = "primary",
971
1483
  size = "md",
@@ -977,7 +1489,7 @@ function Button({
977
1489
  ...rest
978
1490
  }) {
979
1491
  const classes = [styles9.button, styles9[variant], styles9[size], className].filter(Boolean).join(" ");
980
- return /* @__PURE__ */ jsxs27(
1492
+ return /* @__PURE__ */ jsxs46(
981
1493
  "button",
982
1494
  {
983
1495
  type,
@@ -989,7 +1501,7 @@ function Button({
989
1501
  loading && // aria-hidden: the button's own accessible name (its visible children,
990
1502
  // unchanged below) plus aria-busy already communicate the pending
991
1503
  // state — an unhidden Spinner-style status region would double-narrate it.
992
- /* @__PURE__ */ jsx38("span", { className: styles9.spinner, "aria-hidden": "true" }),
1504
+ /* @__PURE__ */ jsx58("span", { className: styles9.spinner, "aria-hidden": "true" }),
993
1505
  children
994
1506
  ]
995
1507
  }
@@ -998,23 +1510,23 @@ function Button({
998
1510
 
999
1511
  // src/components/Input/Input.tsx
1000
1512
  import styles10 from "./Input.module.css";
1001
- import { jsx as jsx39 } from "react/jsx-runtime";
1513
+ import { jsx as jsx59 } from "react/jsx-runtime";
1002
1514
  function Input({ type = "text", className, ...rest }) {
1003
1515
  const classes = [styles10.input, className].filter(Boolean).join(" ");
1004
- return /* @__PURE__ */ jsx39("input", { type, className: classes, ...rest });
1516
+ return /* @__PURE__ */ jsx59("input", { type, className: classes, ...rest });
1005
1517
  }
1006
1518
 
1007
1519
  // src/components/Textarea/Textarea.tsx
1008
1520
  import styles11 from "./Textarea.module.css";
1009
- import { jsx as jsx40 } from "react/jsx-runtime";
1521
+ import { jsx as jsx60 } from "react/jsx-runtime";
1010
1522
  function Textarea({ className, rows = 4, ...rest }) {
1011
1523
  const classes = [styles11.textarea, className].filter(Boolean).join(" ");
1012
- return /* @__PURE__ */ jsx40("textarea", { rows, className: classes, ...rest });
1524
+ return /* @__PURE__ */ jsx60("textarea", { rows, className: classes, ...rest });
1013
1525
  }
1014
1526
 
1015
1527
  // src/components/CodeTextarea/CodeTextarea.tsx
1016
1528
  import styles12 from "./CodeTextarea.module.css";
1017
- import { jsx as jsx41 } from "react/jsx-runtime";
1529
+ import { jsx as jsx61 } from "react/jsx-runtime";
1018
1530
  function CodeTextarea({
1019
1531
  className,
1020
1532
  rows = 12,
@@ -1025,7 +1537,7 @@ function CodeTextarea({
1025
1537
  ...rest
1026
1538
  }) {
1027
1539
  const classes = [styles12.textarea, invalid ? styles12.invalid : void 0, className].filter(Boolean).join(" ");
1028
- return /* @__PURE__ */ jsx41(
1540
+ return /* @__PURE__ */ jsx61(
1029
1541
  "textarea",
1030
1542
  {
1031
1543
  rows,
@@ -1040,7 +1552,7 @@ function CodeTextarea({
1040
1552
 
1041
1553
  // src/components/StatusBadge/StatusBadge.tsx
1042
1554
  import styles13 from "./StatusBadge.module.css";
1043
- import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
1555
+ import { jsx as jsx62, jsxs as jsxs47 } from "react/jsx-runtime";
1044
1556
  var STATUS_CLASS = {
1045
1557
  unmodified: styles13.neutral,
1046
1558
  draft: styles13.info,
@@ -1068,14 +1580,14 @@ function StatusBadge({
1068
1580
  "aria-label": ariaLabel
1069
1581
  }) {
1070
1582
  const label = children ?? STATUS_LABEL[status];
1071
- return /* @__PURE__ */ jsxs28(
1583
+ return /* @__PURE__ */ jsxs47(
1072
1584
  "span",
1073
1585
  {
1074
1586
  className: [styles13.badge, STATUS_CLASS[status], className].filter(Boolean).join(" "),
1075
1587
  "aria-label": ariaLabel,
1076
1588
  children: [
1077
- /* @__PURE__ */ jsx42("span", { className: styles13.dot, "aria-hidden": "true" }),
1078
- /* @__PURE__ */ jsx42("span", { className: styles13.label, children: label })
1589
+ /* @__PURE__ */ jsx62("span", { className: styles13.dot, "aria-hidden": "true" }),
1590
+ /* @__PURE__ */ jsx62("span", { className: styles13.label, children: label })
1079
1591
  ]
1080
1592
  }
1081
1593
  );
@@ -1084,7 +1596,7 @@ function StatusBadge({
1084
1596
  // src/components/SplitPane/SplitPane.tsx
1085
1597
  import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
1086
1598
  import styles14 from "./SplitPane.module.css";
1087
- import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
1599
+ import { jsx as jsx63, jsxs as jsxs48 } from "react/jsx-runtime";
1088
1600
  var clampSize = (value, min, max) => Math.min(Math.max(value, min), max);
1089
1601
  function SplitPane({
1090
1602
  primary,
@@ -1170,15 +1682,15 @@ function SplitPane({
1170
1682
  const style = {
1171
1683
  "--split-pane-primary-size": `${primarySize}%`
1172
1684
  };
1173
- return /* @__PURE__ */ jsxs29(
1685
+ return /* @__PURE__ */ jsxs48(
1174
1686
  "div",
1175
1687
  {
1176
1688
  ref: containerRef,
1177
1689
  className: [styles14.splitPane, className].filter(Boolean).join(" "),
1178
1690
  style,
1179
1691
  children: [
1180
- /* @__PURE__ */ jsx43("section", { className: styles14.pane, "aria-label": primaryLabel, children: primary }),
1181
- resizable && /* @__PURE__ */ jsx43(
1692
+ /* @__PURE__ */ jsx63("section", { className: styles14.pane, "aria-label": primaryLabel, children: primary }),
1693
+ resizable && /* @__PURE__ */ jsx63(
1182
1694
  "button",
1183
1695
  {
1184
1696
  type: "button",
@@ -1188,7 +1700,7 @@ function SplitPane({
1188
1700
  onKeyDown: resizeWithKeyboard
1189
1701
  }
1190
1702
  ),
1191
- /* @__PURE__ */ jsx43("section", { className: styles14.pane, "aria-label": secondaryLabel, children: secondary })
1703
+ /* @__PURE__ */ jsx63("section", { className: styles14.pane, "aria-label": secondaryLabel, children: secondary })
1192
1704
  ]
1193
1705
  }
1194
1706
  );
@@ -1197,7 +1709,7 @@ function SplitPane({
1197
1709
  // src/components/TagInput/TagInput.tsx
1198
1710
  import { useMemo, useState as useState3 } from "react";
1199
1711
  import styles15 from "./TagInput.module.css";
1200
- import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
1712
+ import { jsx as jsx64, jsxs as jsxs49 } from "react/jsx-runtime";
1201
1713
  var DEFAULT_SEPARATORS = /[\n,]+/;
1202
1714
  var splitTags = (value, separators) => value.split(separators).map((tag) => tag.trim()).filter(Boolean);
1203
1715
  function TagInput({
@@ -1271,8 +1783,8 @@ function TagInput({
1271
1783
  event.preventDefault();
1272
1784
  addTags(tags);
1273
1785
  };
1274
- return /* @__PURE__ */ jsxs30("div", { className: [styles15.wrapper, className].filter(Boolean).join(" "), children: [
1275
- /* @__PURE__ */ jsxs30(
1786
+ return /* @__PURE__ */ jsxs49("div", { className: [styles15.wrapper, className].filter(Boolean).join(" "), children: [
1787
+ /* @__PURE__ */ jsxs49(
1276
1788
  "div",
1277
1789
  {
1278
1790
  className: [
@@ -1281,9 +1793,9 @@ function TagInput({
1281
1793
  error || localError || ariaInvalid ? styles15.invalid : void 0
1282
1794
  ].filter(Boolean).join(" "),
1283
1795
  children: [
1284
- value.map((tag, index) => /* @__PURE__ */ jsxs30("span", { className: styles15.tag, children: [
1285
- /* @__PURE__ */ jsx44("span", { className: styles15.tagLabel, children: tag }),
1286
- /* @__PURE__ */ jsx44(
1796
+ value.map((tag, index) => /* @__PURE__ */ jsxs49("span", { className: styles15.tag, children: [
1797
+ /* @__PURE__ */ jsx64("span", { className: styles15.tagLabel, children: tag }),
1798
+ /* @__PURE__ */ jsx64(
1287
1799
  "button",
1288
1800
  {
1289
1801
  type: "button",
@@ -1295,7 +1807,7 @@ function TagInput({
1295
1807
  }
1296
1808
  )
1297
1809
  ] }, `${tag}-${index}`)),
1298
- /* @__PURE__ */ jsx44(
1810
+ /* @__PURE__ */ jsx64(
1299
1811
  "input",
1300
1812
  {
1301
1813
  id,
@@ -1317,7 +1829,7 @@ function TagInput({
1317
1829
  ]
1318
1830
  }
1319
1831
  ),
1320
- message && /* @__PURE__ */ jsx44(
1832
+ message && /* @__PURE__ */ jsx64(
1321
1833
  "p",
1322
1834
  {
1323
1835
  id: messageId,
@@ -1376,7 +1888,7 @@ function usePrefersReducedMotion() {
1376
1888
 
1377
1889
  // src/components/OverlayHeader/OverlayHeader.tsx
1378
1890
  import styles16 from "./OverlayHeader.module.css";
1379
- import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
1891
+ import { jsx as jsx65, jsxs as jsxs50 } from "react/jsx-runtime";
1380
1892
  function OverlayHeader({
1381
1893
  title,
1382
1894
  onClose,
@@ -1385,20 +1897,20 @@ function OverlayHeader({
1385
1897
  secondRow,
1386
1898
  className
1387
1899
  }) {
1388
- return /* @__PURE__ */ jsxs31("div", { className: [styles16.header, className].filter(Boolean).join(" "), children: [
1389
- /* @__PURE__ */ jsxs31("div", { className: styles16.row, children: [
1390
- onBack && /* @__PURE__ */ jsx45("button", { type: "button", className: styles16.backButton, "aria-label": "Back", onClick: onBack, children: /* @__PURE__ */ jsx45(Icon, { name: "chevron-left", size: "md", "aria-hidden": true }) }),
1391
- /* @__PURE__ */ jsx45("span", { className: styles16.title, children: title }),
1392
- action && /* @__PURE__ */ jsx45("div", { className: styles16.action, children: action }),
1393
- /* @__PURE__ */ jsx45("button", { type: "button", className: styles16.closeButton, "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx45(Icon, { name: "x", size: "sm", "aria-hidden": true }) })
1900
+ return /* @__PURE__ */ jsxs50("div", { className: [styles16.header, className].filter(Boolean).join(" "), children: [
1901
+ /* @__PURE__ */ jsxs50("div", { className: styles16.row, children: [
1902
+ onBack && /* @__PURE__ */ jsx65("button", { type: "button", className: styles16.backButton, "aria-label": "Back", onClick: onBack, children: /* @__PURE__ */ jsx65(Icon, { name: "chevron-left", size: "md", "aria-hidden": true }) }),
1903
+ /* @__PURE__ */ jsx65("span", { className: styles16.title, children: title }),
1904
+ action && /* @__PURE__ */ jsx65("div", { className: styles16.action, children: action }),
1905
+ /* @__PURE__ */ jsx65("button", { type: "button", className: styles16.closeButton, "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx65(Icon, { name: "x", size: "sm", "aria-hidden": true }) })
1394
1906
  ] }),
1395
- secondRow && /* @__PURE__ */ jsx45("div", { className: styles16.secondRow, children: secondRow })
1907
+ secondRow && /* @__PURE__ */ jsx65("div", { className: styles16.secondRow, children: secondRow })
1396
1908
  ] });
1397
1909
  }
1398
1910
 
1399
1911
  // src/components/Dialog/Dialog.tsx
1400
1912
  import styles17 from "./Dialog.module.css";
1401
- import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
1913
+ import { jsx as jsx66, jsxs as jsxs51 } from "react/jsx-runtime";
1402
1914
  var MOTION_DURATION_MS = 250;
1403
1915
  var OverlaySecondRowContext = createContext(
1404
1916
  void 0
@@ -1474,7 +1986,7 @@ function Dialog({
1474
1986
  return (
1475
1987
  // role="presentation" removes the scrim from the AT (it is purely visual).
1476
1988
  // e.target check lets clicks inside the panel bubble without triggering dismiss.
1477
- /* @__PURE__ */ jsx46(
1989
+ /* @__PURE__ */ jsx66(
1478
1990
  "div",
1479
1991
  {
1480
1992
  className: [styles17.scrim, isOpenPhase ? styles17.scrimOpen : ""].filter(Boolean).join(" "),
@@ -1485,7 +1997,7 @@ function Dialog({
1485
1997
  onKeyDown: (e) => {
1486
1998
  if (e.key === "Escape") onClose();
1487
1999
  },
1488
- children: /* @__PURE__ */ jsxs32(
2000
+ children: /* @__PURE__ */ jsxs51(
1489
2001
  "div",
1490
2002
  {
1491
2003
  ref: panelRef,
@@ -1495,7 +2007,7 @@ function Dialog({
1495
2007
  tabIndex: -1,
1496
2008
  className: [styles17.panel, styles17[size], isOpenPhase ? styles17.panelOpen : ""].filter(Boolean).join(" "),
1497
2009
  children: [
1498
- /* @__PURE__ */ jsx46(
2010
+ /* @__PURE__ */ jsx66(
1499
2011
  OverlayHeader,
1500
2012
  {
1501
2013
  title,
@@ -1504,8 +2016,8 @@ function Dialog({
1504
2016
  className: styles17.mobileHeader
1505
2017
  }
1506
2018
  ),
1507
- /* @__PURE__ */ jsx46("button", { type: "button", className: styles17.close, "aria-label": "Close", onClick: onClose, children: "\xD7" }),
1508
- /* @__PURE__ */ jsx46("div", { className: styles17.content, children: /* @__PURE__ */ jsx46(OverlaySecondRowContext.Provider, { value: setSecondRow, children }) })
2019
+ /* @__PURE__ */ jsx66("button", { type: "button", className: styles17.close, "aria-label": "Close", onClick: onClose, children: "\xD7" }),
2020
+ /* @__PURE__ */ jsx66("div", { className: styles17.content, children: /* @__PURE__ */ jsx66(OverlaySecondRowContext.Provider, { value: setSecondRow, children }) })
1509
2021
  ]
1510
2022
  }
1511
2023
  )
@@ -1517,7 +2029,7 @@ function Dialog({
1517
2029
  // src/components/Drawer/Drawer.tsx
1518
2030
  import { useEffect as useEffect5, useRef as useRef4 } from "react";
1519
2031
  import styles18 from "./Drawer.module.css";
1520
- import { jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
2032
+ import { jsx as jsx67, jsxs as jsxs52 } from "react/jsx-runtime";
1521
2033
  var MOTION_DURATION_MS2 = 250;
1522
2034
  var FOCUSABLE2 = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
1523
2035
  var SWIPE_DISMISS_THRESHOLD_PX = 100;
@@ -1606,7 +2118,7 @@ function Drawer({
1606
2118
  return (
1607
2119
  // role="presentation" removes the scrim from the AT (it is purely visual).
1608
2120
  // e.target check lets clicks inside the panel bubble without triggering dismiss.
1609
- /* @__PURE__ */ jsx47(
2121
+ /* @__PURE__ */ jsx67(
1610
2122
  "div",
1611
2123
  {
1612
2124
  className: [styles18.scrim, isOpenPhase ? styles18.scrimOpen : ""].filter(Boolean).join(" "),
@@ -1617,7 +2129,7 @@ function Drawer({
1617
2129
  onKeyDown: (e) => {
1618
2130
  if (e.key === "Escape") onClose();
1619
2131
  },
1620
- children: /* @__PURE__ */ jsxs33(
2132
+ children: /* @__PURE__ */ jsxs52(
1621
2133
  "div",
1622
2134
  {
1623
2135
  ref: panelRef,
@@ -1631,7 +2143,7 @@ function Drawer({
1631
2143
  isOpenPhase ? styles18.panelOpen : ""
1632
2144
  ].filter(Boolean).join(" "),
1633
2145
  children: [
1634
- /* @__PURE__ */ jsx47(
2146
+ /* @__PURE__ */ jsx67(
1635
2147
  "div",
1636
2148
  {
1637
2149
  className: styles18.handle,
@@ -1654,7 +2166,7 @@ function Drawer({
1654
2166
  // src/components/Sheet/Sheet.tsx
1655
2167
  import { useEffect as useEffect6, useRef as useRef5 } from "react";
1656
2168
  import styles19 from "./Sheet.module.css";
1657
- import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
2169
+ import { jsx as jsx68, jsxs as jsxs53 } from "react/jsx-runtime";
1658
2170
  var FOCUSABLE3 = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
1659
2171
  var MOTION_DURATION_MS3 = 250;
1660
2172
  function Sheet({
@@ -1715,7 +2227,7 @@ function Sheet({
1715
2227
  return () => document.removeEventListener("keydown", handleKeyDown);
1716
2228
  }, [open, onClose]);
1717
2229
  if (!mounted) return null;
1718
- return /* @__PURE__ */ jsxs34(
2230
+ return /* @__PURE__ */ jsxs53(
1719
2231
  "div",
1720
2232
  {
1721
2233
  ref: panelRef,
@@ -1729,8 +2241,8 @@ function Sheet({
1729
2241
  phase === "open" ? styles19.panelOpen : ""
1730
2242
  ].filter(Boolean).join(" "),
1731
2243
  children: [
1732
- title && /* @__PURE__ */ jsx48(OverlayHeader, { title, onClose, onBack, action: headerAction }),
1733
- /* @__PURE__ */ jsx48("div", { className: styles19.content, children })
2244
+ title && /* @__PURE__ */ jsx68(OverlayHeader, { title, onClose, onBack, action: headerAction }),
2245
+ /* @__PURE__ */ jsx68("div", { className: styles19.content, children })
1734
2246
  ]
1735
2247
  }
1736
2248
  );
@@ -1739,7 +2251,7 @@ function Sheet({
1739
2251
  // src/components/ConfirmDialog/ConfirmDialog.tsx
1740
2252
  import { useEffect as useEffect7, useRef as useRef6 } from "react";
1741
2253
  import styles20 from "./ConfirmDialog.module.css";
1742
- import { jsx as jsx49, jsxs as jsxs35 } from "react/jsx-runtime";
2254
+ import { jsx as jsx69, jsxs as jsxs54 } from "react/jsx-runtime";
1743
2255
  function ConfirmDialog({
1744
2256
  open,
1745
2257
  onClose,
@@ -1768,7 +2280,7 @@ function ConfirmDialog({
1768
2280
  }, [onClose]);
1769
2281
  return (
1770
2282
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
1771
- /* @__PURE__ */ jsx49(
2283
+ /* @__PURE__ */ jsx69(
1772
2284
  "dialog",
1773
2285
  {
1774
2286
  ref: dialogRef,
@@ -1777,12 +2289,12 @@ function ConfirmDialog({
1777
2289
  onClick: (e) => {
1778
2290
  if (e.target === e.currentTarget) onClose();
1779
2291
  },
1780
- children: /* @__PURE__ */ jsxs35("div", { className: styles20.body, children: [
1781
- /* @__PURE__ */ jsx49("h2", { className: styles20.title, children: title }),
1782
- /* @__PURE__ */ jsx49("div", { className: styles20.message, children: message }),
1783
- error && /* @__PURE__ */ jsx49("p", { className: styles20.error, children: error }),
1784
- /* @__PURE__ */ jsxs35("div", { className: styles20.actions, children: [
1785
- /* @__PURE__ */ jsx49(Button, { type: "button", variant: "secondary", onClick: onClose, disabled: pending, children: cancelLabel }),
2292
+ children: /* @__PURE__ */ jsxs54("div", { className: styles20.body, children: [
2293
+ /* @__PURE__ */ jsx69("h2", { className: styles20.title, children: title }),
2294
+ /* @__PURE__ */ jsx69("div", { className: styles20.message, children: message }),
2295
+ error && /* @__PURE__ */ jsx69("p", { className: styles20.error, children: error }),
2296
+ /* @__PURE__ */ jsxs54("div", { className: styles20.actions, children: [
2297
+ /* @__PURE__ */ jsx69(Button, { type: "button", variant: "secondary", onClick: onClose, disabled: pending, children: cancelLabel }),
1786
2298
  destructive ? (
1787
2299
  // A solid red fill, not Button's own `destructive` variant (an
1788
2300
  // outlined/ghost style meant for lower-emphasis placements) — a
@@ -1791,7 +2303,7 @@ function ConfirmDialog({
1791
2303
  // -text-on-error tokens the codebase already introduced for this
1792
2304
  // exact "reads as a filled action button, not a tinted status
1793
2305
  // surface" case (see semantic.css).
1794
- /* @__PURE__ */ jsx49(
2306
+ /* @__PURE__ */ jsx69(
1795
2307
  "button",
1796
2308
  {
1797
2309
  type: "button",
@@ -1801,7 +2313,7 @@ function ConfirmDialog({
1801
2313
  children: confirmLabel
1802
2314
  }
1803
2315
  )
1804
- ) : /* @__PURE__ */ jsx49(Button, { type: "button", variant: "primary", onClick: onConfirm, disabled: pending, children: confirmLabel })
2316
+ ) : /* @__PURE__ */ jsx69(Button, { type: "button", variant: "primary", onClick: onConfirm, disabled: pending, children: confirmLabel })
1805
2317
  ] })
1806
2318
  ] })
1807
2319
  }
@@ -1965,18 +2477,18 @@ function useIsMobile(breakpointPx = MOBILE_BREAKPOINT_PX) {
1965
2477
 
1966
2478
  // src/components/Menu/Menu.tsx
1967
2479
  import styles21 from "./Menu.module.css";
1968
- import { Fragment, jsx as jsx50, jsxs as jsxs36 } from "react/jsx-runtime";
2480
+ import { Fragment, jsx as jsx70, jsxs as jsxs55 } from "react/jsx-runtime";
1969
2481
  function Menu({ trigger, open, onClose, items, "aria-label": ariaLabel, align }) {
1970
2482
  const isMobile = useIsMobile();
1971
- const list = /* @__PURE__ */ jsx50("ul", { className: styles21.list, role: "menu", children: items.map((entry, index) => {
2483
+ const list = /* @__PURE__ */ jsx70("ul", { className: styles21.list, role: "menu", children: items.map((entry, index) => {
1972
2484
  if (entry.type === "separator") {
1973
- return /* @__PURE__ */ jsx50("li", { role: "separator", className: styles21.separator }, index);
2485
+ return /* @__PURE__ */ jsx70("li", { role: "separator", className: styles21.separator }, index);
1974
2486
  }
1975
2487
  if (entry.type === "label") {
1976
- return /* @__PURE__ */ jsx50("li", { role: "presentation", className: styles21.label, children: entry.label }, index);
2488
+ return /* @__PURE__ */ jsx70("li", { role: "presentation", className: styles21.label, children: entry.label }, index);
1977
2489
  }
1978
2490
  const isCheckable = entry.checked !== void 0;
1979
- return /* @__PURE__ */ jsx50("li", { role: "none", children: /* @__PURE__ */ jsxs36(
2491
+ return /* @__PURE__ */ jsx70("li", { role: "none", children: /* @__PURE__ */ jsxs55(
1980
2492
  "button",
1981
2493
  {
1982
2494
  role: isCheckable ? "menuitemradio" : "menuitem",
@@ -1989,20 +2501,20 @@ function Menu({ trigger, open, onClose, items, "aria-label": ariaLabel, align })
1989
2501
  entry.onSelect();
1990
2502
  },
1991
2503
  children: [
1992
- isCheckable && /* @__PURE__ */ jsx50("span", { className: styles21.check, "aria-hidden": true, children: entry.checked && /* @__PURE__ */ jsx50(Icon, { name: "check", size: "sm", "aria-hidden": true }) }),
1993
- entry.icon && /* @__PURE__ */ jsx50(Icon, { name: entry.icon, size: "sm", "aria-hidden": true }),
2504
+ isCheckable && /* @__PURE__ */ jsx70("span", { className: styles21.check, "aria-hidden": true, children: entry.checked && /* @__PURE__ */ jsx70(Icon, { name: "check", size: "sm", "aria-hidden": true }) }),
2505
+ entry.icon && /* @__PURE__ */ jsx70(Icon, { name: entry.icon, size: "sm", "aria-hidden": true }),
1994
2506
  entry.label
1995
2507
  ]
1996
2508
  }
1997
2509
  ) }, index);
1998
2510
  }) });
1999
2511
  if (isMobile) {
2000
- return /* @__PURE__ */ jsxs36(Fragment, { children: [
2512
+ return /* @__PURE__ */ jsxs55(Fragment, { children: [
2001
2513
  trigger,
2002
- /* @__PURE__ */ jsx50(Drawer, { open, onClose, "aria-label": ariaLabel, children: list })
2514
+ /* @__PURE__ */ jsx70(Drawer, { open, onClose, "aria-label": ariaLabel, children: list })
2003
2515
  ] });
2004
2516
  }
2005
- return /* @__PURE__ */ jsx50(Popover, { trigger, open, onClose, "aria-label": ariaLabel, align, children: list });
2517
+ return /* @__PURE__ */ jsx70(Popover, { trigger, open, onClose, "aria-label": ariaLabel, align, children: list });
2006
2518
  }
2007
2519
 
2008
2520
  // src/components/Toast/Toast.tsx
@@ -2017,7 +2529,7 @@ import {
2017
2529
  useState as useState8
2018
2530
  } from "react";
2019
2531
  import styles22 from "./Toast.module.css";
2020
- import { jsx as jsx51, jsxs as jsxs37 } from "react/jsx-runtime";
2532
+ import { jsx as jsx71, jsxs as jsxs56 } from "react/jsx-runtime";
2021
2533
  var ToastContext = createContext2(null);
2022
2534
  function useToast() {
2023
2535
  const ctx = useContext2(ToastContext);
@@ -2055,16 +2567,16 @@ function ToastProvider({ children }) {
2055
2567
  };
2056
2568
  }, []);
2057
2569
  const value = useMemo2(() => ({ show, dismiss }), [show, dismiss]);
2058
- return /* @__PURE__ */ jsxs37(ToastContext.Provider, { value, children: [
2570
+ return /* @__PURE__ */ jsxs56(ToastContext.Provider, { value, children: [
2059
2571
  children,
2060
- /* @__PURE__ */ jsx51(
2572
+ /* @__PURE__ */ jsx71(
2061
2573
  "ol",
2062
2574
  {
2063
2575
  className: styles22.region,
2064
2576
  "aria-label": "Notifications",
2065
2577
  "aria-live": "polite",
2066
2578
  "aria-atomic": "false",
2067
- children: toasts.map((toast) => /* @__PURE__ */ jsx51(Toast, { ...toast, onDismiss: dismiss }, toast.id))
2579
+ children: toasts.map((toast) => /* @__PURE__ */ jsx71(Toast, { ...toast, onDismiss: dismiss }, toast.id))
2068
2580
  }
2069
2581
  )
2070
2582
  ] });
@@ -2087,18 +2599,18 @@ function Toast({
2087
2599
  }) {
2088
2600
  const categoryClass = styles22[category] ?? styles22.info;
2089
2601
  const iconName = CATEGORY_ICON[category] ?? "info";
2090
- return /* @__PURE__ */ jsxs37(
2602
+ return /* @__PURE__ */ jsxs56(
2091
2603
  "li",
2092
2604
  {
2093
2605
  role: "status",
2094
2606
  className: `${styles22.toast} ${String(categoryClass)} ${exiting ? styles22.exiting : ""}`,
2095
2607
  children: [
2096
- /* @__PURE__ */ jsx51("span", { className: styles22.icon, "aria-hidden": "true", children: /* @__PURE__ */ jsx51(Icon, { name: iconName, size: "sm", "aria-hidden": true }) }),
2097
- /* @__PURE__ */ jsxs37("div", { className: styles22.body, children: [
2098
- /* @__PURE__ */ jsx51("div", { className: styles22.title, children: title }),
2099
- message && /* @__PURE__ */ jsx51("div", { className: styles22.message, children: message })
2608
+ /* @__PURE__ */ jsx71("span", { className: styles22.icon, "aria-hidden": "true", children: /* @__PURE__ */ jsx71(Icon, { name: iconName, size: "sm", "aria-hidden": true }) }),
2609
+ /* @__PURE__ */ jsxs56("div", { className: styles22.body, children: [
2610
+ /* @__PURE__ */ jsx71("div", { className: styles22.title, children: title }),
2611
+ message && /* @__PURE__ */ jsx71("div", { className: styles22.message, children: message })
2100
2612
  ] }),
2101
- /* @__PURE__ */ jsx51(
2613
+ /* @__PURE__ */ jsx71(
2102
2614
  "button",
2103
2615
  {
2104
2616
  type: "button",
@@ -2115,7 +2627,7 @@ function Toast({
2115
2627
 
2116
2628
  // src/components/Card/Card.tsx
2117
2629
  import styles23 from "./Card.module.css";
2118
- import { jsx as jsx52 } from "react/jsx-runtime";
2630
+ import { jsx as jsx72 } from "react/jsx-runtime";
2119
2631
  var paddingClass = {
2120
2632
  sm: styles23.paddingSm,
2121
2633
  md: styles23.paddingMd,
@@ -2130,13 +2642,13 @@ function Card({
2130
2642
  ...rest
2131
2643
  }) {
2132
2644
  const cls = [styles23.card, paddingClass[padding], interactive && styles23.interactive, className].filter(Boolean).join(" ");
2133
- return /* @__PURE__ */ jsx52(Tag, { className: cls, ...rest, children });
2645
+ return /* @__PURE__ */ jsx72(Tag, { className: cls, ...rest, children });
2134
2646
  }
2135
2647
 
2136
2648
  // src/components/FormField/FormField.tsx
2137
2649
  import { useId as useId2 } from "react";
2138
2650
  import styles24 from "./FormField.module.css";
2139
- import { jsx as jsx53, jsxs as jsxs38 } from "react/jsx-runtime";
2651
+ import { jsx as jsx73, jsxs as jsxs57 } from "react/jsx-runtime";
2140
2652
  function FormField({
2141
2653
  label,
2142
2654
  hint,
@@ -2157,52 +2669,52 @@ function FormField({
2157
2669
  "aria-invalid": error ? true : void 0,
2158
2670
  required: required || void 0
2159
2671
  };
2160
- return /* @__PURE__ */ jsxs38("div", { className: [styles24.field, className].filter(Boolean).join(" "), children: [
2161
- /* @__PURE__ */ jsxs38("label", { className: styles24.label, htmlFor: fieldId, children: [
2672
+ return /* @__PURE__ */ jsxs57("div", { className: [styles24.field, className].filter(Boolean).join(" "), children: [
2673
+ /* @__PURE__ */ jsxs57("label", { className: styles24.label, htmlFor: fieldId, children: [
2162
2674
  label,
2163
- required && /* @__PURE__ */ jsx53("span", { className: styles24.required, "aria-hidden": "true", children: "*" })
2675
+ required && /* @__PURE__ */ jsx73("span", { className: styles24.required, "aria-hidden": "true", children: "*" })
2164
2676
  ] }),
2165
2677
  children(field),
2166
- hint && !error && /* @__PURE__ */ jsx53("p", { id: hintId, className: styles24.hint, children: hint }),
2167
- error && /* @__PURE__ */ jsx53("p", { id: errorId, className: styles24.error, role: "alert", children: error })
2678
+ hint && !error && /* @__PURE__ */ jsx73("p", { id: hintId, className: styles24.hint, children: hint }),
2679
+ error && /* @__PURE__ */ jsx73("p", { id: errorId, className: styles24.error, role: "alert", children: error })
2168
2680
  ] });
2169
2681
  }
2170
2682
 
2171
2683
  // src/components/PageHeader/PageHeader.tsx
2172
2684
  import styles25 from "./PageHeader.module.css";
2173
- import { jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
2685
+ import { jsx as jsx74, jsxs as jsxs58 } from "react/jsx-runtime";
2174
2686
  function PageHeader({ title, description, action, className }) {
2175
- return /* @__PURE__ */ jsxs39("header", { className: [styles25.header, className].filter(Boolean).join(" "), children: [
2176
- /* @__PURE__ */ jsxs39("div", { className: styles25.text, children: [
2177
- /* @__PURE__ */ jsx54("h1", { className: styles25.title, children: title }),
2178
- description && /* @__PURE__ */ jsx54("p", { className: styles25.description, children: description })
2687
+ return /* @__PURE__ */ jsxs58("header", { className: [styles25.header, className].filter(Boolean).join(" "), children: [
2688
+ /* @__PURE__ */ jsxs58("div", { className: styles25.text, children: [
2689
+ /* @__PURE__ */ jsx74("h1", { className: styles25.title, children: title }),
2690
+ description && /* @__PURE__ */ jsx74("p", { className: styles25.description, children: description })
2179
2691
  ] }),
2180
- action && /* @__PURE__ */ jsx54("div", { className: styles25.action, children: action })
2692
+ action && /* @__PURE__ */ jsx74("div", { className: styles25.action, children: action })
2181
2693
  ] });
2182
2694
  }
2183
2695
 
2184
2696
  // src/components/EmptyState/EmptyState.tsx
2185
2697
  import styles26 from "./EmptyState.module.css";
2186
- import { jsx as jsx55, jsxs as jsxs40 } from "react/jsx-runtime";
2698
+ import { jsx as jsx75, jsxs as jsxs59 } from "react/jsx-runtime";
2187
2699
  function EmptyState({ icon, heading, description, action, className }) {
2188
- return /* @__PURE__ */ jsxs40("div", { className: [styles26.root, className].filter(Boolean).join(" "), children: [
2189
- icon && /* @__PURE__ */ jsx55("span", { className: styles26.icon, children: /* @__PURE__ */ jsx55(Icon, { name: icon, size: "lg", "aria-hidden": true }) }),
2190
- /* @__PURE__ */ jsx55("h2", { className: styles26.heading, children: heading }),
2191
- description && /* @__PURE__ */ jsx55("p", { className: styles26.description, children: description }),
2700
+ return /* @__PURE__ */ jsxs59("div", { className: [styles26.root, className].filter(Boolean).join(" "), children: [
2701
+ icon && /* @__PURE__ */ jsx75("span", { className: styles26.icon, children: /* @__PURE__ */ jsx75(Icon, { name: icon, size: "lg", "aria-hidden": true }) }),
2702
+ /* @__PURE__ */ jsx75("h2", { className: styles26.heading, children: heading }),
2703
+ description && /* @__PURE__ */ jsx75("p", { className: styles26.description, children: description }),
2192
2704
  action
2193
2705
  ] });
2194
2706
  }
2195
2707
 
2196
2708
  // src/components/Spinner/Spinner.tsx
2197
2709
  import styles27 from "./Spinner.module.css";
2198
- import { jsx as jsx56 } from "react/jsx-runtime";
2710
+ import { jsx as jsx76 } from "react/jsx-runtime";
2199
2711
  var sizeClass = {
2200
2712
  sm: styles27.sm,
2201
2713
  md: styles27.md,
2202
2714
  lg: styles27.lg
2203
2715
  };
2204
2716
  function Spinner({ size = "md", label = "Loading\u2026", className }) {
2205
- return /* @__PURE__ */ jsx56(
2717
+ return /* @__PURE__ */ jsx76(
2206
2718
  "span",
2207
2719
  {
2208
2720
  role: "status",
@@ -2215,7 +2727,7 @@ function Spinner({ size = "md", label = "Loading\u2026", className }) {
2215
2727
  // src/components/Avatar/Avatar.tsx
2216
2728
  import { useState as useState9 } from "react";
2217
2729
  import styles28 from "./Avatar.module.css";
2218
- import { jsx as jsx57 } from "react/jsx-runtime";
2730
+ import { jsx as jsx77 } from "react/jsx-runtime";
2219
2731
  function initials(name) {
2220
2732
  const parts = name.trim().split(/\s+/);
2221
2733
  if (parts.length === 1) return (parts[0] ?? "").slice(0, 2).toUpperCase();
@@ -2230,21 +2742,21 @@ function Avatar({ name, src, size = "md", className }) {
2230
2742
  const [imgFailed, setImgFailed] = useState9(false);
2231
2743
  const cls = [styles28.avatar, sizeClass2[size], className].filter(Boolean).join(" ");
2232
2744
  if (src && !imgFailed) {
2233
- return /* @__PURE__ */ jsx57("span", { className: cls, "aria-label": name, children: /* @__PURE__ */ jsx57("img", { src, alt: name, className: styles28.img, onError: () => setImgFailed(true) }) });
2745
+ return /* @__PURE__ */ jsx77("span", { className: cls, "aria-label": name, children: /* @__PURE__ */ jsx77("img", { src, alt: name, className: styles28.img, onError: () => setImgFailed(true) }) });
2234
2746
  }
2235
- return /* @__PURE__ */ jsx57("span", { className: cls, "aria-label": name, children: initials(name) });
2747
+ return /* @__PURE__ */ jsx77("span", { className: cls, "aria-label": name, children: initials(name) });
2236
2748
  }
2237
2749
 
2238
2750
  // src/components/NavTabs/NavTabs.tsx
2239
2751
  import styles29 from "./NavTabs.module.css";
2240
- import { jsx as jsx58 } from "react/jsx-runtime";
2752
+ import { jsx as jsx78 } from "react/jsx-runtime";
2241
2753
  function NavTabs({ items, className, "aria-label": ariaLabel }) {
2242
- return /* @__PURE__ */ jsx58(
2754
+ return /* @__PURE__ */ jsx78(
2243
2755
  "nav",
2244
2756
  {
2245
2757
  className: [styles29.nav, className].filter(Boolean).join(" "),
2246
2758
  "aria-label": ariaLabel ?? "Page navigation",
2247
- children: items.map((item) => /* @__PURE__ */ jsx58(
2759
+ children: items.map((item) => /* @__PURE__ */ jsx78(
2248
2760
  "a",
2249
2761
  {
2250
2762
  href: item.href,
@@ -2261,7 +2773,7 @@ function NavTabs({ items, className, "aria-label": ariaLabel }) {
2261
2773
  // src/components/Tooltip/Tooltip.tsx
2262
2774
  import { useId as useId3 } from "react";
2263
2775
  import styles30 from "./Tooltip.module.css";
2264
- import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
2776
+ import { jsx as jsx79, jsxs as jsxs60 } from "react/jsx-runtime";
2265
2777
  var sideClass = {
2266
2778
  top: styles30.top,
2267
2779
  bottom: styles30.bottom,
@@ -2270,15 +2782,15 @@ var sideClass = {
2270
2782
  };
2271
2783
  function Tooltip({ content, children, side = "top" }) {
2272
2784
  const tipId = useId3();
2273
- return /* @__PURE__ */ jsxs41("span", { className: styles30.wrapper, children: [
2274
- /* @__PURE__ */ jsx59("span", { "aria-describedby": tipId, children }),
2275
- /* @__PURE__ */ jsx59("span", { id: tipId, role: "tooltip", className: [styles30.tip, sideClass[side]].join(" "), children: content })
2785
+ return /* @__PURE__ */ jsxs60("span", { className: styles30.wrapper, children: [
2786
+ /* @__PURE__ */ jsx79("span", { "aria-describedby": tipId, children }),
2787
+ /* @__PURE__ */ jsx79("span", { id: tipId, role: "tooltip", className: [styles30.tip, sideClass[side]].join(" "), children: content })
2276
2788
  ] });
2277
2789
  }
2278
2790
 
2279
2791
  // src/components/Checkbox/Checkbox.tsx
2280
2792
  import styles31 from "./Checkbox.module.css";
2281
- import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
2793
+ import { jsx as jsx80, jsxs as jsxs61 } from "react/jsx-runtime";
2282
2794
  function Checkbox({
2283
2795
  checked,
2284
2796
  onChange,
@@ -2290,9 +2802,9 @@ function Checkbox({
2290
2802
  ...rest
2291
2803
  }) {
2292
2804
  const inputId = id ?? `checkbox-${label.toLowerCase().replace(/\s+/g, "-")}`;
2293
- return /* @__PURE__ */ jsxs42("span", { className: [styles31.root, className].filter(Boolean).join(" "), children: [
2294
- /* @__PURE__ */ jsxs42("span", { className: [styles31.box, checked ? styles31.checked : ""].filter(Boolean).join(" "), children: [
2295
- /* @__PURE__ */ jsx60(
2805
+ return /* @__PURE__ */ jsxs61("span", { className: [styles31.root, className].filter(Boolean).join(" "), children: [
2806
+ /* @__PURE__ */ jsxs61("span", { className: [styles31.box, checked ? styles31.checked : ""].filter(Boolean).join(" "), children: [
2807
+ /* @__PURE__ */ jsx80(
2296
2808
  "input",
2297
2809
  {
2298
2810
  ...rest,
@@ -2304,7 +2816,7 @@ function Checkbox({
2304
2816
  onChange: (e) => onChange(e.target.checked)
2305
2817
  }
2306
2818
  ),
2307
- checked && /* @__PURE__ */ jsx60("svg", { className: styles31.tick, viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx60(
2819
+ checked && /* @__PURE__ */ jsx80("svg", { className: styles31.tick, viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx80(
2308
2820
  "path",
2309
2821
  {
2310
2822
  d: "M1 4l3 3 5-6",
@@ -2315,7 +2827,7 @@ function Checkbox({
2315
2827
  }
2316
2828
  ) })
2317
2829
  ] }),
2318
- label && /* @__PURE__ */ jsx60(
2830
+ label && /* @__PURE__ */ jsx80(
2319
2831
  "label",
2320
2832
  {
2321
2833
  htmlFor: inputId,
@@ -2332,7 +2844,7 @@ function Checkbox({
2332
2844
 
2333
2845
  // src/components/DragHandleRow/DragHandleRow.tsx
2334
2846
  import styles32 from "./DragHandleRow.module.css";
2335
- import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
2847
+ import { jsx as jsx81, jsxs as jsxs62 } from "react/jsx-runtime";
2336
2848
  function DragHandleRow({
2337
2849
  children,
2338
2850
  handleProps,
@@ -2340,13 +2852,13 @@ function DragHandleRow({
2340
2852
  className,
2341
2853
  ...rest
2342
2854
  }) {
2343
- return /* @__PURE__ */ jsxs43(
2855
+ return /* @__PURE__ */ jsxs62(
2344
2856
  "div",
2345
2857
  {
2346
2858
  ...rest,
2347
2859
  className: [styles32.row, isDragging ? styles32.dragging : "", className].filter(Boolean).join(" "),
2348
2860
  children: [
2349
- /* @__PURE__ */ jsx61(
2861
+ /* @__PURE__ */ jsx81(
2350
2862
  "button",
2351
2863
  {
2352
2864
  type: "button",
@@ -2354,16 +2866,16 @@ function DragHandleRow({
2354
2866
  className: styles32.handle,
2355
2867
  tabIndex: -1,
2356
2868
  ...handleProps,
2357
- children: /* @__PURE__ */ jsx61(DragIcon, {})
2869
+ children: /* @__PURE__ */ jsx81(DragIcon, {})
2358
2870
  }
2359
2871
  ),
2360
- /* @__PURE__ */ jsx61("div", { className: styles32.content, children })
2872
+ /* @__PURE__ */ jsx81("div", { className: styles32.content, children })
2361
2873
  ]
2362
2874
  }
2363
2875
  );
2364
2876
  }
2365
2877
  function DragIcon() {
2366
- return /* @__PURE__ */ jsx61(
2878
+ return /* @__PURE__ */ jsx81(
2367
2879
  "svg",
2368
2880
  {
2369
2881
  width: "14",
@@ -2373,7 +2885,7 @@ function DragIcon() {
2373
2885
  "aria-hidden": "true",
2374
2886
  className: styles32.icon,
2375
2887
  children: [3, 7, 11].map(
2376
- (cy) => [4, 10].map((cx) => /* @__PURE__ */ jsx61("circle", { cx, cy, r: 1.2, fill: "currentColor" }, `${cx}-${cy}`))
2888
+ (cy) => [4, 10].map((cx) => /* @__PURE__ */ jsx81("circle", { cx, cy, r: 1.2, fill: "currentColor" }, `${cx}-${cy}`))
2377
2889
  )
2378
2890
  }
2379
2891
  );
@@ -2447,7 +2959,7 @@ function formatDateLabel(date) {
2447
2959
 
2448
2960
  // src/components/Calendar/Calendar.tsx
2449
2961
  import styles33 from "./Calendar.module.css";
2450
- import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
2962
+ import { jsx as jsx82, jsxs as jsxs63 } from "react/jsx-runtime";
2451
2963
  var WEEKDAY_LABEL_WEEK = getMonthGrid(new Date(2026, 0, 1))[0] ?? [];
2452
2964
  function Calendar({
2453
2965
  value,
@@ -2517,31 +3029,31 @@ function Calendar({
2517
3029
  default:
2518
3030
  }
2519
3031
  }
2520
- return /* @__PURE__ */ jsxs44("div", { className: styles33.calendar, "aria-label": ariaLabel, children: [
2521
- /* @__PURE__ */ jsxs44("div", { className: styles33.header, children: [
2522
- /* @__PURE__ */ jsx62(
3032
+ return /* @__PURE__ */ jsxs63("div", { className: styles33.calendar, "aria-label": ariaLabel, children: [
3033
+ /* @__PURE__ */ jsxs63("div", { className: styles33.header, children: [
3034
+ /* @__PURE__ */ jsx82(
2523
3035
  "button",
2524
3036
  {
2525
3037
  type: "button",
2526
3038
  className: styles33.navButton,
2527
3039
  "aria-label": "Previous month",
2528
3040
  onClick: () => goToMonth(addMonths(displayedMonth, -1)),
2529
- children: /* @__PURE__ */ jsx62(Icon, { name: "chevron-left", size: "sm", "aria-hidden": true })
3041
+ children: /* @__PURE__ */ jsx82(Icon, { name: "chevron-left", size: "sm", "aria-hidden": true })
2530
3042
  }
2531
3043
  ),
2532
- /* @__PURE__ */ jsx62("span", { className: styles33.monthLabel, children: formatMonthYear(displayedMonth) }),
2533
- /* @__PURE__ */ jsx62(
3044
+ /* @__PURE__ */ jsx82("span", { className: styles33.monthLabel, children: formatMonthYear(displayedMonth) }),
3045
+ /* @__PURE__ */ jsx82(
2534
3046
  "button",
2535
3047
  {
2536
3048
  type: "button",
2537
3049
  className: styles33.navButton,
2538
3050
  "aria-label": "Next month",
2539
3051
  onClick: () => goToMonth(addMonths(displayedMonth, 1)),
2540
- children: /* @__PURE__ */ jsx62(Icon, { name: "chevron-right", size: "sm", "aria-hidden": true })
3052
+ children: /* @__PURE__ */ jsx82(Icon, { name: "chevron-right", size: "sm", "aria-hidden": true })
2541
3053
  }
2542
3054
  )
2543
3055
  ] }),
2544
- /* @__PURE__ */ jsxs44(
3056
+ /* @__PURE__ */ jsxs63(
2545
3057
  "div",
2546
3058
  {
2547
3059
  ref: gridRef,
@@ -2551,17 +3063,17 @@ function Calendar({
2551
3063
  onKeyDown: handleKeyDown,
2552
3064
  tabIndex: -1,
2553
3065
  children: [
2554
- /* @__PURE__ */ jsx62("div", { role: "row", className: styles33.weekdayRow, children: WEEKDAY_LABEL_WEEK.map((d) => /* @__PURE__ */ jsx62("span", { role: "columnheader", className: styles33.weekday, "aria-hidden": true, children: formatWeekdayShort(d) }, d.getDay())) }),
3066
+ /* @__PURE__ */ jsx82("div", { role: "row", className: styles33.weekdayRow, children: WEEKDAY_LABEL_WEEK.map((d) => /* @__PURE__ */ jsx82("span", { role: "columnheader", className: styles33.weekday, "aria-hidden": true, children: formatWeekdayShort(d) }, d.getDay())) }),
2555
3067
  weeks.map((week) => {
2556
3068
  const firstDayOfWeek = week[0];
2557
3069
  if (!firstDayOfWeek) return null;
2558
- return /* @__PURE__ */ jsx62("div", { role: "row", className: styles33.week, children: week.map((date) => {
3070
+ return /* @__PURE__ */ jsx82("div", { role: "row", className: styles33.week, children: week.map((date) => {
2559
3071
  const isCurrentMonth = isSameMonth(date, displayedMonth);
2560
3072
  const isSelected = value !== null && isSameDay(date, value);
2561
3073
  const isToday = isSameDay(date, /* @__PURE__ */ new Date());
2562
3074
  const isFocusTarget = isSameDay(date, focusedDate);
2563
3075
  const disabled = !isWithinRange(date, minDate, maxDate);
2564
- return /* @__PURE__ */ jsx62("div", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ jsx62(
3076
+ return /* @__PURE__ */ jsx82("div", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ jsx82(
2565
3077
  "button",
2566
3078
  {
2567
3079
  type: "button",
@@ -2591,7 +3103,7 @@ function Calendar({
2591
3103
  // src/components/DatePicker/DatePicker.tsx
2592
3104
  import { useState as useState11 } from "react";
2593
3105
  import styles34 from "./DatePicker.module.css";
2594
- import { Fragment as Fragment2, jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
3106
+ import { Fragment as Fragment2, jsx as jsx83, jsxs as jsxs64 } from "react/jsx-runtime";
2595
3107
  var POPOVER_WIDTH = 320;
2596
3108
  function DatePicker({
2597
3109
  value,
@@ -2608,7 +3120,7 @@ function DatePicker({
2608
3120
  onChange(date);
2609
3121
  setOpen(false);
2610
3122
  }
2611
- const trigger = /* @__PURE__ */ jsxs45(
3123
+ const trigger = /* @__PURE__ */ jsxs64(
2612
3124
  "button",
2613
3125
  {
2614
3126
  type: "button",
@@ -2619,12 +3131,12 @@ function DatePicker({
2619
3131
  "aria-expanded": open,
2620
3132
  onClick: () => setOpen((o) => !o),
2621
3133
  children: [
2622
- /* @__PURE__ */ jsx63("span", { className: value ? styles34.triggerValue : styles34.triggerPlaceholder, children: value ? formatDateShort(value) : placeholder }),
2623
- /* @__PURE__ */ jsx63(Icon, { name: "calendar", size: "sm", "aria-hidden": true })
3134
+ /* @__PURE__ */ jsx83("span", { className: value ? styles34.triggerValue : styles34.triggerPlaceholder, children: value ? formatDateShort(value) : placeholder }),
3135
+ /* @__PURE__ */ jsx83(Icon, { name: "calendar", size: "sm", "aria-hidden": true })
2624
3136
  ]
2625
3137
  }
2626
3138
  );
2627
- const calendar = /* @__PURE__ */ jsx63(
3139
+ const calendar = /* @__PURE__ */ jsx83(
2628
3140
  Calendar,
2629
3141
  {
2630
3142
  value,
@@ -2635,12 +3147,12 @@ function DatePicker({
2635
3147
  }
2636
3148
  );
2637
3149
  if (isMobile) {
2638
- return /* @__PURE__ */ jsxs45(Fragment2, { children: [
3150
+ return /* @__PURE__ */ jsxs64(Fragment2, { children: [
2639
3151
  trigger,
2640
- /* @__PURE__ */ jsx63(Drawer, { open, onClose: () => setOpen(false), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx63("div", { className: styles34.drawerBody, children: calendar }) })
3152
+ /* @__PURE__ */ jsx83(Drawer, { open, onClose: () => setOpen(false), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx83("div", { className: styles34.drawerBody, children: calendar }) })
2641
3153
  ] });
2642
3154
  }
2643
- return /* @__PURE__ */ jsx63(
3155
+ return /* @__PURE__ */ jsx83(
2644
3156
  Popover,
2645
3157
  {
2646
3158
  trigger,
@@ -2648,16 +3160,339 @@ function DatePicker({
2648
3160
  onClose: () => setOpen(false),
2649
3161
  "aria-label": ariaLabel,
2650
3162
  width: POPOVER_WIDTH,
2651
- children: /* @__PURE__ */ jsx63("div", { className: styles34.popoverBody, children: calendar })
3163
+ children: /* @__PURE__ */ jsx83("div", { className: styles34.popoverBody, children: calendar })
3164
+ }
3165
+ );
3166
+ }
3167
+
3168
+ // src/components/SuggestionInput/SuggestionInput.tsx
3169
+ import { useId as useId4, useRef as useRef11, useState as useState12 } from "react";
3170
+ import styles35 from "./SuggestionInput.module.css";
3171
+ import { Fragment as Fragment3, jsx as jsx84, jsxs as jsxs65 } from "react/jsx-runtime";
3172
+ function SuggestionInput({
3173
+ value,
3174
+ onChange,
3175
+ options,
3176
+ onSelect,
3177
+ placeholder,
3178
+ "aria-label": ariaLabel,
3179
+ id,
3180
+ disabled = false,
3181
+ loading = false,
3182
+ createLabel,
3183
+ onCreate,
3184
+ className
3185
+ }) {
3186
+ const generatedId = useId4();
3187
+ const inputId = id ?? generatedId;
3188
+ const listId = `${inputId}-suggestions`;
3189
+ const inputRef = useRef11(null);
3190
+ const [focused, setFocused] = useState12(false);
3191
+ const [activeIndex, setActiveIndex] = useState12(-1);
3192
+ const showCreateRow = Boolean(onCreate && createLabel && value.trim());
3193
+ const rowCount = options.length + (showCreateRow ? 1 : 0);
3194
+ const open = focused && (rowCount > 0 || loading);
3195
+ function close() {
3196
+ setFocused(false);
3197
+ setActiveIndex(-1);
3198
+ }
3199
+ function commitIndex(index) {
3200
+ if (index < 0 || index >= rowCount) return;
3201
+ const option = options[index];
3202
+ if (option) {
3203
+ onSelect(option);
3204
+ } else if (onCreate) {
3205
+ onCreate(value);
3206
+ }
3207
+ close();
3208
+ }
3209
+ function handleKeyDown(e) {
3210
+ if (!open) return;
3211
+ const isArrowDown = e.key === "ArrowDown" || e.keyCode === 40;
3212
+ const isArrowUp = e.key === "ArrowUp" || e.keyCode === 38;
3213
+ const isEnter = e.key === "Enter" || e.keyCode === 13;
3214
+ const isEscape = e.key === "Escape" || e.keyCode === 27;
3215
+ if (isArrowDown) {
3216
+ e.preventDefault();
3217
+ setActiveIndex((i) => (i + 1) % rowCount);
3218
+ } else if (isArrowUp) {
3219
+ e.preventDefault();
3220
+ setActiveIndex((i) => i <= 0 ? rowCount - 1 : i - 1);
3221
+ } else if (isEnter) {
3222
+ e.preventDefault();
3223
+ commitIndex(activeIndex === -1 ? 0 : activeIndex);
3224
+ } else if (isEscape) {
3225
+ close();
3226
+ }
3227
+ }
3228
+ const trigger = /* @__PURE__ */ jsx84(
3229
+ "input",
3230
+ {
3231
+ ref: inputRef,
3232
+ id: inputId,
3233
+ type: "text",
3234
+ role: "combobox",
3235
+ "aria-expanded": open,
3236
+ "aria-controls": listId,
3237
+ "aria-autocomplete": "list",
3238
+ "aria-activedescendant": activeIndex >= 0 ? `${listId}-option-${activeIndex}` : void 0,
3239
+ "aria-label": ariaLabel,
3240
+ className: [styles35.input, className].filter(Boolean).join(" "),
3241
+ value,
3242
+ placeholder,
3243
+ disabled,
3244
+ autoComplete: "off",
3245
+ onChange: (e) => {
3246
+ onChange(e.target.value);
3247
+ setActiveIndex(-1);
3248
+ },
3249
+ onFocus: () => setFocused(true),
3250
+ onKeyDown: handleKeyDown
3251
+ }
3252
+ );
3253
+ return /* @__PURE__ */ jsx84(
3254
+ Popover,
3255
+ {
3256
+ trigger,
3257
+ open,
3258
+ onClose: close,
3259
+ width: "trigger",
3260
+ "aria-label": `${ariaLabel} suggestions`,
3261
+ children: /* @__PURE__ */ jsx84("ul", { id: listId, role: "listbox", className: styles35.list, children: loading ? /* @__PURE__ */ jsx84("li", { className: styles35.status, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs65(Fragment3, { children: [
3262
+ options.map((option, index) => /* @__PURE__ */ jsx84("li", { role: "none", children: /* @__PURE__ */ jsxs65(
3263
+ "button",
3264
+ {
3265
+ id: `${listId}-option-${index}`,
3266
+ role: "option",
3267
+ "aria-selected": index === activeIndex,
3268
+ type: "button",
3269
+ className: [styles35.option, index === activeIndex ? styles35.optionActive : ""].filter(Boolean).join(" "),
3270
+ onMouseDown: (e) => {
3271
+ e.preventDefault();
3272
+ commitIndex(index);
3273
+ },
3274
+ children: [
3275
+ option.icon && /* @__PURE__ */ jsx84("span", { className: styles35.optionIcon, children: option.icon }),
3276
+ /* @__PURE__ */ jsx84("span", { className: styles35.optionLabel, children: option.label }),
3277
+ option.meta && /* @__PURE__ */ jsx84("span", { className: styles35.optionMeta, children: option.meta })
3278
+ ]
3279
+ }
3280
+ ) }, option.id)),
3281
+ showCreateRow && createLabel && /* @__PURE__ */ jsxs65("li", { role: "none", children: [
3282
+ options.length > 0 && /* @__PURE__ */ jsx84("div", { className: styles35.divider }),
3283
+ /* @__PURE__ */ jsx84(
3284
+ "button",
3285
+ {
3286
+ id: `${listId}-option-${options.length}`,
3287
+ role: "option",
3288
+ "aria-selected": options.length === activeIndex,
3289
+ type: "button",
3290
+ className: [
3291
+ styles35.option,
3292
+ styles35.optionCreate,
3293
+ options.length === activeIndex ? styles35.optionActive : ""
3294
+ ].filter(Boolean).join(" "),
3295
+ onMouseDown: (e) => {
3296
+ e.preventDefault();
3297
+ commitIndex(options.length);
3298
+ },
3299
+ children: createLabel(value)
3300
+ }
3301
+ )
3302
+ ] })
3303
+ ] }) })
2652
3304
  }
2653
3305
  );
2654
3306
  }
3307
+
3308
+ // src/components/IconPicker/IconPicker.tsx
3309
+ import { useState as useState13 } from "react";
3310
+ import styles36 from "./IconPicker.module.css";
3311
+ import { jsx as jsx85, jsxs as jsxs66 } from "react/jsx-runtime";
3312
+ function IconPicker({
3313
+ value,
3314
+ onChange,
3315
+ options,
3316
+ "aria-label": ariaLabel,
3317
+ triggerLabel,
3318
+ disabled = false,
3319
+ className
3320
+ }) {
3321
+ const [open, setOpen] = useState13(false);
3322
+ const trigger = /* @__PURE__ */ jsxs66(
3323
+ "button",
3324
+ {
3325
+ type: "button",
3326
+ className: [styles36.trigger, className].filter(Boolean).join(" "),
3327
+ onClick: () => setOpen((o) => !o),
3328
+ disabled,
3329
+ "aria-label": ariaLabel,
3330
+ "aria-haspopup": "true",
3331
+ "aria-expanded": open,
3332
+ children: [
3333
+ value ? /* @__PURE__ */ jsx85(Icon, { name: value, size: "md", "aria-hidden": true }) : /* @__PURE__ */ jsx85("span", { className: styles36.placeholder, "aria-hidden": true, children: "?" }),
3334
+ triggerLabel && /* @__PURE__ */ jsx85("span", { className: styles36.triggerLabel, children: triggerLabel })
3335
+ ]
3336
+ }
3337
+ );
3338
+ return /* @__PURE__ */ jsx85(
3339
+ Popover,
3340
+ {
3341
+ trigger,
3342
+ open,
3343
+ onClose: () => setOpen(false),
3344
+ width: 240,
3345
+ "aria-label": `${ariaLabel} options`,
3346
+ children: /* @__PURE__ */ jsx85("div", { className: styles36.grid, role: "listbox", "aria-label": ariaLabel, children: options.map((name) => /* @__PURE__ */ jsx85(
3347
+ "button",
3348
+ {
3349
+ type: "button",
3350
+ role: "option",
3351
+ "aria-selected": name === value,
3352
+ className: [styles36.option, name === value ? styles36.optionSelected : ""].filter(Boolean).join(" "),
3353
+ onClick: () => {
3354
+ onChange(name);
3355
+ setOpen(false);
3356
+ },
3357
+ children: /* @__PURE__ */ jsx85(Icon, { name, size: "md", "aria-hidden": true })
3358
+ },
3359
+ name
3360
+ )) })
3361
+ }
3362
+ );
3363
+ }
3364
+
3365
+ // src/components/QuantityStepper/QuantityStepper.tsx
3366
+ import { useId as useId5 } from "react";
3367
+ import styles37 from "./QuantityStepper.module.css";
3368
+ import { jsx as jsx86, jsxs as jsxs67 } from "react/jsx-runtime";
3369
+ function QuantityStepper({
3370
+ value,
3371
+ onChange,
3372
+ min = 0,
3373
+ max,
3374
+ step = 1,
3375
+ unit,
3376
+ "aria-label": ariaLabel,
3377
+ disabled = false,
3378
+ id,
3379
+ className
3380
+ }) {
3381
+ const generatedId = useId5();
3382
+ const inputId = id ?? generatedId;
3383
+ function clamp(next) {
3384
+ let result = next;
3385
+ if (min !== void 0) result = Math.max(min, result);
3386
+ if (max !== void 0) result = Math.min(max, result);
3387
+ return Math.round(result * 1e3) / 1e3;
3388
+ }
3389
+ function handleInputChange(e) {
3390
+ const parsed = Number.parseFloat(e.target.value);
3391
+ if (!Number.isNaN(parsed)) onChange(clamp(parsed));
3392
+ }
3393
+ const decrementDisabled = disabled || min !== void 0 && value <= min;
3394
+ const incrementDisabled = disabled || max !== void 0 && value >= max;
3395
+ return /* @__PURE__ */ jsxs67("div", { className: [styles37.root, className].filter(Boolean).join(" "), children: [
3396
+ /* @__PURE__ */ jsx86(
3397
+ "button",
3398
+ {
3399
+ type: "button",
3400
+ className: styles37.button,
3401
+ onClick: () => onChange(clamp(value - step)),
3402
+ disabled: decrementDisabled,
3403
+ "aria-label": `Decrease ${ariaLabel}`,
3404
+ children: "\u2212"
3405
+ }
3406
+ ),
3407
+ /* @__PURE__ */ jsx86(
3408
+ "input",
3409
+ {
3410
+ id: inputId,
3411
+ type: "number",
3412
+ className: styles37.input,
3413
+ value,
3414
+ onChange: handleInputChange,
3415
+ min,
3416
+ max,
3417
+ step,
3418
+ disabled,
3419
+ "aria-label": ariaLabel
3420
+ }
3421
+ ),
3422
+ unit && /* @__PURE__ */ jsx86("span", { className: styles37.unit, "aria-hidden": true, children: unit }),
3423
+ /* @__PURE__ */ jsx86(
3424
+ "button",
3425
+ {
3426
+ type: "button",
3427
+ className: styles37.button,
3428
+ onClick: () => onChange(clamp(value + step)),
3429
+ disabled: incrementDisabled,
3430
+ "aria-label": `Increase ${ariaLabel}`,
3431
+ children: "+"
3432
+ }
3433
+ )
3434
+ ] });
3435
+ }
3436
+
3437
+ // src/components/CheckableListRow/CheckableListRow.tsx
3438
+ import styles38 from "./CheckableListRow.module.css";
3439
+ import { jsx as jsx87, jsxs as jsxs68 } from "react/jsx-runtime";
3440
+ function CheckableListRow({
3441
+ checked,
3442
+ onCheckedChange,
3443
+ label,
3444
+ icon,
3445
+ trailing,
3446
+ disabled = false,
3447
+ className
3448
+ }) {
3449
+ function toggle() {
3450
+ if (!disabled) onCheckedChange(!checked);
3451
+ }
3452
+ function handleKeyDown(e) {
3453
+ if (e.key === " " || e.key === "Enter") {
3454
+ e.preventDefault();
3455
+ toggle();
3456
+ }
3457
+ }
3458
+ return /* @__PURE__ */ jsxs68("div", { className: [styles38.row, className].filter(Boolean).join(" "), children: [
3459
+ /* @__PURE__ */ jsxs68(
3460
+ "div",
3461
+ {
3462
+ role: "checkbox",
3463
+ "aria-checked": checked,
3464
+ "aria-label": label,
3465
+ "aria-disabled": disabled || void 0,
3466
+ tabIndex: disabled ? -1 : 0,
3467
+ className: styles38.tapTarget,
3468
+ onClick: toggle,
3469
+ onKeyDown: handleKeyDown,
3470
+ children: [
3471
+ /* @__PURE__ */ jsx87("span", { className: [styles38.box, checked ? styles38.checked : ""].filter(Boolean).join(" "), children: checked && /* @__PURE__ */ jsx87("svg", { className: styles38.tick, viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx87(
3472
+ "path",
3473
+ {
3474
+ d: "M1 4l3 3 5-6",
3475
+ stroke: "currentColor",
3476
+ strokeWidth: "1.5",
3477
+ strokeLinecap: "round",
3478
+ strokeLinejoin: "round"
3479
+ }
3480
+ ) }) }),
3481
+ icon && /* @__PURE__ */ jsx87("span", { className: styles38.icon, children: icon }),
3482
+ /* @__PURE__ */ jsx87("span", { className: [styles38.label, checked ? styles38.struck : ""].filter(Boolean).join(" "), children: label })
3483
+ ]
3484
+ }
3485
+ ),
3486
+ trailing && /* @__PURE__ */ jsx87("span", { className: styles38.trailing, children: trailing })
3487
+ ] });
3488
+ }
2655
3489
  export {
2656
3490
  Avatar,
2657
3491
  Badge,
2658
3492
  Button,
2659
3493
  Calendar,
2660
3494
  Card,
3495
+ CheckableListRow,
2661
3496
  Checkbox,
2662
3497
  CodeTextarea,
2663
3498
  ConfirmDialog,
@@ -2668,6 +3503,7 @@ export {
2668
3503
  EmptyState,
2669
3504
  FormField,
2670
3505
  Icon,
3506
+ IconPicker,
2671
3507
  Input,
2672
3508
  MOBILE_BREAKPOINT_PX,
2673
3509
  Menu,
@@ -2675,12 +3511,14 @@ export {
2675
3511
  OverlayHeader,
2676
3512
  PageHeader,
2677
3513
  Popover,
3514
+ QuantityStepper,
2678
3515
  SegmentedControl,
2679
3516
  Select,
2680
3517
  Sheet,
2681
3518
  Spinner,
2682
3519
  SplitPane,
2683
3520
  StatusBadge,
3521
+ SuggestionInput,
2684
3522
  SystemBanner,
2685
3523
  Tabs,
2686
3524
  TagInput,