@dragunio/fe-libs 0.1.4 → 0.1.6

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.
package/dist/index.js CHANGED
@@ -9,9 +9,9 @@ var __export = (target, all) => {
9
9
  };
10
10
  var __copyProps = (to, from, except, desc) => {
11
11
  if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
12
+ for (let key2 of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key2) && key2 !== except)
14
+ __defProp(to, key2, { get: () => from[key2], enumerable: !(desc = __getOwnPropDesc(from, key2)) || desc.enumerable });
15
15
  }
16
16
  return to;
17
17
  };
@@ -21,7 +21,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
21
21
  var index_exports = {};
22
22
  __export(index_exports, {
23
23
  Button: () => Button,
24
+ Checkbox: () => Checkbox,
24
25
  ChevronDownIcon: () => ChevronDownIcon,
26
+ ChevronUpIcon: () => ChevronUpIcon,
25
27
  Chip: () => Chip,
26
28
  CloseIcon: () => CloseIcon,
27
29
  CurrencyInput: () => CurrencyInput,
@@ -35,6 +37,8 @@ __export(index_exports, {
35
37
  Pagination: () => Pagination,
36
38
  PlusIcon: () => PlusIcon,
37
39
  ProgressBar: () => ProgressBar,
40
+ RadioButton: () => RadioButton,
41
+ RadioGroup: () => RadioGroup,
38
42
  SearchIcon: () => SearchIcon,
39
43
  Selection: () => Selection,
40
44
  Skeleton: () => Skeleton,
@@ -54,9 +58,26 @@ __export(index_exports, {
54
58
  TextInput: () => TextInput,
55
59
  Toggle: () => Toggle,
56
60
  Tooltip: () => Tooltip,
61
+ arrow_left: () => arrow_left,
62
+ check_square_fill: () => check_square_fill,
63
+ chevron_down: () => chevron_down,
64
+ chevron_left: () => chevron_left,
65
+ chevron_right: () => chevron_right,
66
+ chevron_up: () => chevron_up,
67
+ copy: () => copy,
57
68
  formatNumber: () => formatNumber,
58
69
  getIconSize: () => getIconSize,
59
- message: () => message
70
+ key: () => key,
71
+ lock: () => lock,
72
+ lock_unlocked: () => lock_unlocked,
73
+ log_out: () => log_out,
74
+ message: () => message,
75
+ minus_square: () => minus_square,
76
+ plus: () => plus,
77
+ plus_square: () => plus_square,
78
+ search: () => search,
79
+ trash: () => trash,
80
+ x_close: () => x_close
60
81
  });
61
82
  module.exports = __toCommonJS(index_exports);
62
83
 
@@ -126,9 +147,96 @@ var Button = (0, import_react.forwardRef)(
126
147
  );
127
148
  Button.displayName = "Button";
128
149
 
129
- // packages/icons/src/index.tsx
150
+ // packages/icons/src/svgItems/general.tsx
130
151
  var import_jsx_runtime2 = require("react/jsx-runtime");
152
+ var primaryColor = "#101828";
131
153
  var iconProps = ({ size, ...props }) => ({
154
+ width: size ?? 20,
155
+ height: size ?? 20,
156
+ fill: primaryColor,
157
+ viewBox: "0 0 24 24",
158
+ "aria-hidden": true,
159
+ ...props
160
+ });
161
+ var plus = (props) => {
162
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 4.1499C12.4694 4.1499 12.85 4.53046 12.85 4.9999V11.1499H19C19.4694 11.1499 19.85 11.5305 19.85 11.9999C19.85 12.4693 19.4694 12.8499 19 12.8499H12.85V18.9999C12.85 19.4693 12.4694 19.8499 12 19.8499C11.5306 19.8499 11.15 19.4693 11.15 18.9999V12.8499H4.99999C4.53055 12.8499 4.14999 12.4693 4.14999 11.9999C4.14999 11.5305 4.53055 11.1499 4.99999 11.1499H11.15V4.9999C11.15 4.53046 11.5306 4.1499 12 4.1499Z", fill: props.fill }) });
163
+ };
164
+ var plus_square = (props) => {
165
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.76413 2.1499H16.2359C17.0455 2.14989 17.7046 2.14989 18.2396 2.1936C18.7924 2.23877 19.2872 2.33481 19.7479 2.56953C20.4723 2.93864 21.0613 3.52762 21.4304 4.25204C21.6651 4.7127 21.7611 5.20747 21.8063 5.76029C21.85 6.29532 21.85 6.95444 21.85 7.7641V16.2357C21.85 17.0454 21.85 17.7045 21.8063 18.2395C21.7611 18.7923 21.6651 19.2871 21.4304 19.7478C21.0613 20.4722 20.4723 21.0612 19.7479 21.4303C19.2872 21.665 18.7924 21.761 18.2396 21.8062C17.7046 21.8499 17.0455 21.8499 16.2358 21.8499H7.76419C6.95454 21.8499 6.29542 21.8499 5.76038 21.8062C5.20756 21.761 4.7128 21.665 4.25213 21.4303C3.52771 21.0612 2.93873 20.4722 2.56962 19.7478C2.3349 19.2871 2.23886 18.7923 2.19369 18.2395C2.14998 17.7045 2.14998 17.0454 2.14999 16.2358V7.76404C2.14998 6.95441 2.14998 6.29531 2.19369 5.76029C2.23886 5.20747 2.3349 4.7127 2.56962 4.25204C2.93873 3.52762 3.52771 2.93864 4.25213 2.56953C4.7128 2.33481 5.20756 2.23877 5.76038 2.1936C6.2954 2.14989 6.9545 2.14989 7.76413 2.1499ZM5.89882 3.88795C5.45113 3.92453 5.20498 3.99198 5.02392 4.08424C4.61937 4.29037 4.29046 4.61928 4.08433 5.02382C3.99207 5.20489 3.92462 5.45103 3.88804 5.89873C3.85066 6.35634 3.84999 6.9458 3.84999 7.7999V16.1999C3.84999 17.054 3.85066 17.6435 3.88804 18.1011C3.92462 18.5488 3.99207 18.7949 4.08433 18.976C4.29046 19.3805 4.61937 19.7094 5.02392 19.9156C5.20498 20.0078 5.45113 20.0753 5.89882 20.1119C6.35643 20.1492 6.94589 20.1499 7.79999 20.1499H16.2C17.0541 20.1499 17.6436 20.1492 18.1012 20.1119C18.5489 20.0753 18.795 20.0078 18.9761 19.9156C19.3806 19.7094 19.7095 19.3805 19.9157 18.976C20.0079 18.7949 20.0754 18.5488 20.1119 18.1011C20.1493 17.6435 20.15 17.054 20.15 16.1999V7.7999C20.15 6.9458 20.1493 6.35634 20.1119 5.89873C20.0754 5.45103 20.0079 5.20489 19.9157 5.02382C19.7095 4.61928 19.3806 4.29037 18.9761 4.08424C18.795 3.99198 18.5489 3.92453 18.1012 3.88795C17.6436 3.85056 17.0541 3.8499 16.2 3.8499H7.79999C6.94589 3.8499 6.35643 3.85056 5.89882 3.88795ZM12 7.1499C12.4694 7.1499 12.85 7.53046 12.85 7.9999V11.1499H16C16.4694 11.1499 16.85 11.5305 16.85 11.9999C16.85 12.4693 16.4694 12.8499 16 12.8499H12.85V15.9999C12.85 16.4693 12.4694 16.8499 12 16.8499C11.5306 16.8499 11.15 16.4693 11.15 15.9999V12.8499H7.99999C7.53055 12.8499 7.14999 12.4693 7.14999 11.9999C7.14999 11.5305 7.53055 11.1499 7.99999 11.1499H11.15V7.9999C11.15 7.53046 11.5306 7.1499 12 7.1499Z", fill: props.fill }) });
166
+ };
167
+ var arrow_left = (props) => {
168
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.6011 4.39898C12.933 4.73093 12.933 5.26912 12.6011 5.60107L7.05211 11.15H19C19.4695 11.15 19.85 11.5306 19.85 12C19.85 12.4695 19.4695 12.85 19 12.85H7.05211L12.6011 18.399C12.933 18.7309 12.933 19.2691 12.6011 19.6011C12.2691 19.933 11.7309 19.933 11.399 19.6011L4.39898 12.6011C4.06704 12.2691 4.06704 11.7309 4.39898 11.399L11.399 4.39898C11.7309 4.06704 12.2691 4.06704 12.6011 4.39898Z", fill: props.fill }) });
169
+ };
170
+ var log_out = (props) => {
171
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.05948 2.70693L9.11224 2.8239C9.12546 2.82537 9.13849 2.82682 9.15133 2.82824C9.40732 2.85665 9.58836 2.87674 9.75082 2.90904C11.4318 3.24326 12.6894 4.64836 12.8359 6.35593C12.8501 6.52096 12.8501 6.70312 12.85 6.96069C12.85 6.9736 12.85 6.9867 12.85 7C12.85 7.46944 12.4695 7.85 12 7.85C11.5306 7.85 11.15 7.46944 11.15 7C11.15 6.68742 11.1493 6.58403 11.1422 6.50129C11.0603 5.54771 10.358 4.76305 9.4193 4.57641C9.33785 4.56021 9.23517 4.54802 8.92451 4.51351L7.9031 4.40002C7.12368 4.31341 6.58335 4.25388 6.16078 4.23712C5.74477 4.22061 5.51369 4.25002 5.34475 4.30408C4.76229 4.49047 4.28677 4.91608 4.0372 5.4744C3.96482 5.63633 3.91007 5.86275 3.88053 6.27804C3.85053 6.69988 3.85002 7.24347 3.85002 8.02769V15.9723C3.85002 16.7565 3.85053 17.3001 3.88053 17.722C3.91007 18.1373 3.96482 18.3637 4.0372 18.5256C4.28677 19.0839 4.76229 19.5095 5.34475 19.6959C5.51368 19.75 5.74476 19.7794 6.16079 19.7629C6.58337 19.7461 7.12369 19.6866 7.9031 19.6L8.92451 19.4865C9.23507 19.452 9.33787 19.4398 9.41929 19.4236C10.358 19.237 11.0603 18.4523 11.1422 17.4987C11.1493 17.416 11.15 17.3126 11.15 17C11.15 16.5306 11.5306 16.15 12 16.15C12.4695 16.15 12.85 16.5306 12.85 17L12.85 17.0393C12.8501 17.2969 12.8501 17.479 12.8359 17.6441C12.6894 19.3516 11.4318 20.7567 9.75082 21.091C9.58838 21.1233 9.40722 21.1434 9.1513 21.1718C9.13847 21.1732 9.12545 21.1746 9.11224 21.1761L8.05936 21.2931C7.31879 21.3754 6.71831 21.4421 6.22818 21.4615C5.72456 21.4815 5.26724 21.456 4.82663 21.315C3.78362 20.9813 2.93211 20.2191 2.4852 19.2194C2.29641 18.797 2.22057 18.3453 2.18481 17.8426C2.15001 17.3533 2.15002 16.749 2.15002 16.0038V7.99615C2.15002 7.25096 2.15001 6.64674 2.18481 6.15743C2.22057 5.65469 2.29641 5.20298 2.4852 4.78064C2.93211 3.78087 3.78362 3.01873 4.82663 2.68497C5.26724 2.54397 5.72456 2.51847 6.22817 2.53845C6.71833 2.5579 7.31885 2.62463 8.05948 2.70693ZM15.399 6.39896C15.7309 6.06701 16.2691 6.06701 16.6011 6.39896L21.6011 11.399C21.933 11.7309 21.933 12.2691 21.6011 12.601L16.6011 17.601C16.2691 17.933 15.7309 17.933 15.399 17.601C15.067 17.2691 15.067 16.7309 15.399 16.399L18.9479 12.85H9.00003C8.53058 12.85 8.15003 12.4694 8.15003 12C8.15003 11.5306 8.53058 11.15 9.00003 11.15H18.9479L15.399 7.60104C15.067 7.26909 15.067 6.7309 15.399 6.39896Z", fill: props.fill }) });
172
+ };
173
+ var search = (props) => {
174
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11 3.8499C7.05116 3.8499 3.84999 7.05107 3.84999 10.9999C3.84999 14.9487 7.05116 18.1499 11 18.1499C12.9306 18.1499 14.6825 17.3847 15.9689 16.1411C15.993 16.109 16.0197 16.0781 16.049 16.0489C16.0782 16.0196 16.109 15.9929 16.1412 15.9689C17.3848 14.6824 18.15 12.9305 18.15 10.9999C18.15 7.05107 14.9488 3.8499 11 3.8499ZM17.8302 16.628C19.092 15.0984 19.85 13.1377 19.85 10.9999C19.85 6.11218 15.8877 2.1499 11 2.1499C6.11227 2.1499 2.14999 6.11218 2.14999 10.9999C2.14999 15.8876 6.11227 19.8499 11 19.8499C13.1378 19.8499 15.0985 19.0919 16.6281 17.8301L20.399 21.6009C20.7309 21.9329 21.2691 21.9329 21.601 21.6009C21.933 21.269 21.933 20.7308 21.601 20.3989L17.8302 16.628Z", fill: props.fill }) });
175
+ };
176
+ var x_close = (props) => {
177
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.25478 5.25441C5.59399 4.9152 6.14397 4.9152 6.48318 5.25441L12.0004 10.7716L17.5176 5.25441C17.8568 4.9152 18.4067 4.9152 18.746 5.25441C19.0852 5.59363 19.0852 6.1436 18.746 6.48282L13.2288 12L18.746 17.5172C19.0852 17.8564 19.0852 18.4064 18.746 18.7456C18.4067 19.0848 17.8568 19.0848 17.5176 18.7456L12.0004 13.2284L6.48318 18.7456C6.14397 19.0848 5.59399 19.0848 5.25478 18.7456C4.91556 18.4064 4.91556 17.8564 5.25478 17.5172L10.772 12L5.25478 6.48282C4.91556 6.1436 4.91556 5.59363 5.25478 5.25441Z", fill: props.fill }) });
178
+ };
179
+ var minus_square = (props) => {
180
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.76416 2.15002H16.2359C17.0455 2.15002 17.7046 2.15001 18.2396 2.19372C18.7925 2.23889 19.2872 2.33493 19.7479 2.56965C20.4723 2.93876 21.0613 3.52774 21.4304 4.25216C21.6651 4.71283 21.7612 5.20759 21.8063 5.76041C21.85 6.29545 21.85 6.95457 21.85 7.76422V16.2358C21.85 17.0455 21.85 17.7046 21.8063 18.2396C21.7612 18.7925 21.6651 19.2872 21.4304 19.7479C21.0613 20.4723 20.4723 21.0613 19.7479 21.4304C19.2872 21.6651 18.7925 21.7612 18.2396 21.8063C17.7046 21.85 17.0455 21.85 16.2358 21.85H7.76422C6.95457 21.85 6.29545 21.85 5.76041 21.8063C5.20759 21.7612 4.71283 21.6651 4.25216 21.4304C3.52774 21.0613 2.93876 20.4723 2.56965 19.7479C2.33493 19.2872 2.23889 18.7925 2.19372 18.2396C2.15001 17.7046 2.15002 17.0455 2.15002 16.2359V7.76416C2.15002 6.95453 2.15001 6.29543 2.19372 5.76041C2.23889 5.20759 2.33493 4.71283 2.56965 4.25216C2.93876 3.52774 3.52774 2.93876 4.25216 2.56965C4.71283 2.33493 5.20759 2.23889 5.76041 2.19372C6.29543 2.15001 6.95453 2.15002 7.76416 2.15002ZM5.89885 3.88807C5.45116 3.92465 5.20502 3.9921 5.02395 4.08436C4.6194 4.29049 4.29049 4.6194 4.08436 5.02395C3.9921 5.20502 3.92465 5.45116 3.88807 5.89885C3.85069 6.35646 3.85002 6.94592 3.85002 7.80002V16.2C3.85002 17.0541 3.85069 17.6436 3.88807 18.1012C3.92465 18.5489 3.9921 18.795 4.08436 18.9761C4.29049 19.3807 4.6194 19.7096 5.02395 19.9157C5.20502 20.0079 5.45116 20.0754 5.89885 20.112C6.35646 20.1494 6.94592 20.15 7.80002 20.15H16.2C17.0541 20.15 17.6436 20.1494 18.1012 20.112C18.5489 20.0754 18.795 20.0079 18.9761 19.9157C19.3807 19.7096 19.7096 19.3807 19.9157 18.9761C20.0079 18.795 20.0754 18.5489 20.112 18.1012C20.1494 17.6436 20.15 17.0541 20.15 16.2V7.80002C20.15 6.94592 20.1494 6.35646 20.112 5.89885C20.0754 5.45116 20.0079 5.20502 19.9157 5.02395C19.7096 4.6194 19.3807 4.29049 18.9761 4.08436C18.795 3.9921 18.5489 3.92465 18.1012 3.88807C17.6436 3.85069 17.0541 3.85002 16.2 3.85002H7.80002C6.94592 3.85002 6.35646 3.85069 5.89885 3.88807ZM7.15002 12C7.15002 11.5306 7.53058 11.15 8.00002 11.15H16C16.4695 11.15 16.85 11.5306 16.85 12C16.85 12.4695 16.4695 12.85 16 12.85H8.00002C7.53058 12.85 7.15002 12.4695 7.15002 12Z", fill: props.fill }) });
181
+ };
182
+ var trash = (props) => {
183
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.15002 3.00002C8.15002 2.53058 8.53058 2.15002 9.00002 2.15002H15C15.4695 2.15002 15.85 2.53058 15.85 3.00002C15.85 3.46947 15.4695 3.85002 15 3.85002H9.00002C8.53058 3.85002 8.15002 3.46947 8.15002 3.00002ZM4.99342 5.15002H3.00002C2.53058 5.15002 2.15002 5.53058 2.15002 6.00002C2.15002 6.46947 2.53058 6.85002 3.00002 6.85002H4.2048L4.85549 16.6103C4.90614 17.3702 4.94747 17.9902 5.0213 18.4931C5.09776 19.0138 5.2174 19.4774 5.46145 19.9058C5.84658 20.5818 6.42751 21.1253 7.12767 21.4646C7.57135 21.6796 8.04182 21.7682 8.56649 21.8098C9.07318 21.85 9.69462 21.85 10.4562 21.85H13.5438C14.3054 21.85 14.9269 21.85 15.4336 21.8098C15.9582 21.7682 16.4287 21.6796 16.8724 21.4646C17.5725 21.1253 18.1535 20.5818 18.5386 19.9058C18.7827 19.4774 18.9023 19.0138 18.9787 18.4931C19.0526 17.9902 19.0939 17.3702 19.1446 16.6103L19.7952 6.85002H21C21.4695 6.85002 21.85 6.46947 21.85 6.00002C21.85 5.53058 21.4695 5.15002 21 5.15002H19.0066C19.0017 5.14998 18.9967 5.14998 18.9917 5.15002H5.00832C5.00336 5.14998 4.99839 5.14998 4.99342 5.15002ZM18.0915 6.85002H5.90858L6.54943 16.4628C6.60294 17.2654 6.64039 17.8179 6.70327 18.2462C6.76464 18.6641 6.84175 18.8943 6.93857 19.0643C7.15364 19.4418 7.47805 19.7453 7.86905 19.9348C8.04507 20.0201 8.27988 20.0817 8.70101 20.1152C9.13249 20.1494 9.68627 20.15 10.4907 20.15H13.5094C14.3138 20.15 14.8676 20.1494 15.299 20.1152C15.7202 20.0817 15.955 20.0201 16.131 19.9348C16.522 19.7453 16.8464 19.4418 17.0615 19.0643C17.1583 18.8943 17.2354 18.6641 17.2968 18.2462C17.3597 17.8179 17.3971 17.2654 17.4506 16.4628L18.0915 6.85002ZM10 9.65002C10.4695 9.65002 10.85 10.0306 10.85 10.5V15.5C10.85 15.9695 10.4695 16.35 10 16.35C9.53058 16.35 9.15002 15.9695 9.15002 15.5V10.5C9.15002 10.0306 9.53058 9.65002 10 9.65002ZM14 9.65002C14.4695 9.65002 14.85 10.0306 14.85 10.5V15.5C14.85 15.9695 14.4695 16.35 14 16.35C13.5306 16.35 13.15 15.9695 13.15 15.5V10.5C13.15 10.0306 13.5306 9.65002 14 9.65002Z", fill: props.fill }) });
184
+ };
185
+ var copy = (props) => {
186
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17.158 3.90158C16.5336 3.85056 15.7341 3.8499 14.6 3.8499H7.5C7.03056 3.8499 6.65 3.46934 6.65 2.9999C6.65 2.53046 7.03056 2.1499 7.5 2.1499L14.637 2.1499C15.7257 2.1499 16.5947 2.14989 17.2964 2.20722C18.016 2.26601 18.6342 2.3893 19.2019 2.67852C20.1144 3.14351 20.8564 3.88546 21.3214 4.79805C21.6106 5.36567 21.7339 5.98392 21.7927 6.70349C21.85 7.40523 21.85 8.2742 21.85 9.36297V16.4999C21.85 16.9693 21.4694 17.3499 21 17.3499C20.5306 17.3499 20.15 16.9693 20.15 16.4999V9.3999C20.15 8.26577 20.1493 7.46629 20.0983 6.84193C20.0481 6.22748 19.9534 5.85786 19.8067 5.56983C19.5047 4.97712 19.0228 4.49523 18.4301 4.19323C18.142 4.04648 17.7724 3.95178 17.158 3.90158ZM6.16622 5.6499H14.3338C14.8651 5.64989 15.3145 5.64988 15.6828 5.67997C16.0689 5.71152 16.4402 5.78031 16.7939 5.96053C17.3301 6.23377 17.7661 6.66977 18.0394 7.20603C18.2196 7.55974 18.2884 7.93102 18.3199 8.31709C18.35 8.68545 18.35 9.13485 18.35 9.66613V17.8337C18.35 18.365 18.35 18.8144 18.3199 19.1827C18.2884 19.5688 18.2196 19.9401 18.0394 20.2938C17.7661 20.83 17.3301 21.266 16.7939 21.5393C16.4402 21.7195 16.0689 21.7883 15.6828 21.8198C15.3144 21.8499 14.865 21.8499 14.3337 21.8499H6.16627C5.63498 21.8499 5.18557 21.8499 4.81719 21.8198C4.43112 21.7883 4.05984 21.7195 3.70613 21.5393C3.16987 21.266 2.73387 20.83 2.46063 20.2938C2.28041 19.9401 2.21162 19.5688 2.18007 19.1827C2.14998 18.8144 2.14999 18.365 2.15 17.8337V9.66612C2.14999 9.13485 2.14998 8.68545 2.18007 8.31709C2.21162 7.93102 2.28041 7.55974 2.46063 7.20603C2.73387 6.66977 3.16987 6.23377 3.70613 5.96053C4.05984 5.78031 4.43112 5.71152 4.81719 5.67997C5.18555 5.64988 5.63495 5.64989 6.16622 5.6499ZM4.95562 7.37433C4.67468 7.39728 4.55203 7.43748 4.47791 7.47525C4.26153 7.5855 4.0856 7.76143 3.97535 7.97781C3.93758 8.05193 3.89738 8.17458 3.87443 8.45552C3.85066 8.74639 3.85 9.12582 3.85 9.6999V17.7999C3.85 18.374 3.85066 18.7534 3.87443 19.0443C3.89738 19.3252 3.93758 19.4479 3.97535 19.522C4.0856 19.7384 4.26153 19.9143 4.47791 20.0246C4.55203 20.0623 4.67468 20.1025 4.95562 20.1255C5.24649 20.1492 5.62592 20.1499 6.2 20.1499H14.3C14.8741 20.1499 15.2535 20.1492 15.5444 20.1255C15.8253 20.1025 15.948 20.0623 16.0221 20.0246C16.2385 19.9143 16.4144 19.7384 16.5247 19.522C16.5624 19.4479 16.6026 19.3252 16.6256 19.0443C16.6493 18.7534 16.65 18.374 16.65 17.7999V9.6999C16.65 9.12582 16.6493 8.74639 16.6256 8.45552C16.6026 8.17458 16.5624 8.05193 16.5247 7.97781C16.4144 7.76143 16.2385 7.5855 16.0221 7.47525C15.948 7.43748 15.8253 7.39728 15.5444 7.37433C15.2535 7.35056 14.8741 7.3499 14.3 7.3499H6.2C5.62592 7.3499 5.24649 7.35056 4.95562 7.37433Z", fill: props.fill }) });
187
+ };
188
+ var check_square_fill = (props) => {
189
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.2359 2.15039H7.76414C6.95452 2.15038 6.2954 2.15037 5.76039 2.19409C5.20757 2.23925 4.7128 2.3353 4.25214 2.57002C3.52771 2.93913 2.93874 3.5281 2.56963 4.25253C2.3349 4.71319 2.23886 5.20796 2.1937 5.76078C2.14998 6.29579 2.14999 6.95489 2.15 7.7645V16.2363C2.14999 17.0459 2.14998 17.705 2.1937 18.24C2.23886 18.7928 2.3349 19.2876 2.56963 19.7483C2.93874 20.4727 3.52771 21.0617 4.25214 21.4308C4.7128 21.6655 5.20757 21.7615 5.76039 21.8067C6.29542 21.8504 6.95454 21.8504 7.76419 21.8504H16.2358C17.0455 21.8504 17.7046 21.8504 18.2396 21.8067C18.7924 21.7615 19.2872 21.6655 19.7479 21.4308C20.4723 21.0617 21.0613 20.4727 21.4304 19.7483C21.6651 19.2876 21.7611 18.7928 21.8063 18.24C21.85 17.705 21.85 17.0459 21.85 16.2362V7.76459C21.85 6.95493 21.85 6.29581 21.8063 5.76078C21.7611 5.20796 21.6651 4.71319 21.4304 4.25253C21.0613 3.5281 20.4723 2.93913 19.7479 2.57002C19.2872 2.3353 18.7924 2.23925 18.2396 2.19409C17.7046 2.15037 17.0455 2.15038 16.2359 2.15039ZM17.101 9.60143C17.433 9.26949 17.433 8.7313 17.101 8.39935C16.7691 8.06741 16.2309 8.06741 15.899 8.39935L10.5 13.7983L8.10104 11.3994C7.7691 11.0674 7.23091 11.0674 6.89896 11.3994C6.56701 11.7313 6.56701 12.2695 6.89896 12.6014L9.89896 15.6014C10.2309 15.9334 10.7691 15.9334 11.101 15.6014L17.101 9.60143Z", fill: props.fill }) });
190
+ };
191
+
192
+ // packages/icons/src/svgItems/arrows.tsx
193
+ var import_jsx_runtime3 = require("react/jsx-runtime");
194
+ var primaryColor2 = "#101828";
195
+ var iconProps2 = ({ size, ...props }) => ({
196
+ width: size ?? 20,
197
+ height: size ?? 20,
198
+ fill: primaryColor2,
199
+ viewBox: "0 0 24 24",
200
+ "aria-hidden": true,
201
+ ...props
202
+ });
203
+ var chevron_right = (props) => {
204
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.39898 5.39898C8.73093 5.06704 9.26912 5.06704 9.60107 5.39898L15.6011 11.399C15.933 11.7309 15.933 12.2691 15.6011 12.6011L9.60107 18.6011C9.26912 18.933 8.73093 18.933 8.39898 18.6011C8.06704 18.2691 8.06704 17.7309 8.39898 17.399L13.7979 12L8.39898 6.60107C8.06704 6.26912 8.06704 5.73093 8.39898 5.39898Z", fill: props.fill }) });
205
+ };
206
+ var chevron_up = (props) => {
207
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.399 8.39898C11.7309 8.06704 12.2691 8.06704 12.6011 8.39898L18.6011 14.399C18.933 14.7309 18.933 15.2691 18.6011 15.6011C18.2691 15.933 17.7309 15.933 17.399 15.6011L12 10.2021L6.60107 15.6011C6.26912 15.933 5.73093 15.933 5.39898 15.6011C5.06704 15.2691 5.06704 14.7309 5.39898 14.399L11.399 8.39898Z", fill: "#101828" }) });
208
+ };
209
+ var chevron_left = (props) => {
210
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.6011 5.39898C15.933 5.73093 15.933 6.26912 15.6011 6.60107L10.2021 12L15.6011 17.399C15.933 17.7309 15.933 18.2691 15.6011 18.6011C15.2691 18.933 14.7309 18.933 14.399 18.6011L8.39898 12.6011C8.06704 12.2691 8.06704 11.7309 8.39898 11.399L14.399 5.39898C14.7309 5.06704 15.2691 5.06704 15.6011 5.39898Z", fill: "#101828" }) });
211
+ };
212
+ var chevron_down = (props) => {
213
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.39898 8.39898C5.73093 8.06704 6.26912 8.06704 6.60107 8.39898L12 13.7979L17.399 8.39898C17.7309 8.06704 18.2691 8.06704 18.6011 8.39898C18.933 8.73093 18.933 9.26912 18.6011 9.60107L12.6011 15.6011C12.2691 15.933 11.7309 15.933 11.399 15.6011L5.39898 9.60107C5.06704 9.26912 5.06704 8.73093 5.39898 8.39898Z", fill: "#101828" }) });
214
+ };
215
+
216
+ // packages/icons/src/svgItems/security.tsx
217
+ var import_jsx_runtime4 = require("react/jsx-runtime");
218
+ var primaryColor3 = "#101828";
219
+ var iconProps3 = ({ size, ...props }) => ({
220
+ width: size ?? 20,
221
+ height: size ?? 20,
222
+ fill: primaryColor3,
223
+ viewBox: "0 0 24 24",
224
+ "aria-hidden": true,
225
+ ...props
226
+ });
227
+ var key = (props) => {
228
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...iconProps3(props), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.15005 8.9999C8.15005 5.21675 11.2169 2.1499 15 2.1499C18.7832 2.1499 21.85 5.21675 21.85 8.9999C21.85 12.7831 18.7832 15.8499 15 15.8499C14.6884 15.8499 14.3812 15.829 14.0798 15.7885C13.8559 15.7584 13.7118 15.7392 13.6057 15.729C13.5482 15.7234 13.5186 15.7224 13.5082 15.7221C13.5037 15.7229 13.5002 15.7235 13.4973 15.724C13.4936 15.7259 13.4884 15.7286 13.4814 15.7324C13.4755 15.737 13.4609 15.7488 13.435 15.7723C13.3784 15.824 13.3051 15.8969 13.1802 16.0218L8.06971 21.1323C8.05819 21.1438 8.04652 21.1556 8.03471 21.1674C7.89856 21.3041 7.7426 21.4608 7.55245 21.5773C7.38693 21.6787 7.20647 21.7535 7.01771 21.7988C6.80087 21.8508 6.57985 21.8504 6.3869 21.85C6.37015 21.8499 6.35361 21.8499 6.3373 21.8499H4.57146C4.31611 21.8499 4.07591 21.8499 3.87403 21.8335C3.65471 21.8155 3.40692 21.774 3.16016 21.6483C2.81206 21.4709 2.52905 21.1879 2.35168 20.8398C2.22596 20.593 2.18441 20.3452 2.16649 20.1259C2.15 19.924 2.15002 19.6839 2.15004 19.4285L2.15005 17.6626C2.15005 17.6463 2.15001 17.6298 2.14998 17.613C2.14957 17.4201 2.1491 17.1991 2.20116 16.9822C2.24648 16.7935 2.32123 16.613 2.42266 16.4475C2.53918 16.2574 2.69579 16.1014 2.83251 15.9653C2.84438 15.9534 2.8561 15.9418 2.86763 15.9302L7.97814 10.8197C8.10306 10.6948 8.17598 10.6216 8.2276 10.5649C8.25115 10.539 8.26293 10.5244 8.26751 10.5185C8.27131 10.5116 8.27405 10.5064 8.27597 10.5026C8.27648 10.4998 8.27709 10.4962 8.27781 10.4918C8.27753 10.4814 8.27656 10.4518 8.271 10.3942C8.26075 10.2881 8.24152 10.144 8.21143 9.92019C8.17091 9.6188 8.15005 9.31156 8.15005 8.9999ZM15 3.8499C12.1558 3.8499 9.85005 6.15564 9.85005 8.9999C9.85005 9.2356 9.86582 9.46716 9.89628 9.69368L9.89837 9.70928C9.92577 9.913 9.94945 10.0891 9.96313 10.2308C9.97635 10.3678 9.98818 10.5412 9.9632 10.7158C9.92794 10.9623 9.86817 11.1392 9.7467 11.3565C9.61878 11.5854 9.41529 11.7878 9.23157 11.9706C9.21425 11.9879 9.19711 12.0049 9.18022 12.0218L4.06972 17.1323C3.97801 17.224 3.92912 17.2732 3.89424 17.3114C3.88033 17.3267 3.87311 17.3354 3.87007 17.3392C3.86357 17.3505 3.85857 17.3626 3.85519 17.3752C3.85463 17.38 3.85355 17.3913 3.85261 17.4119C3.85025 17.4636 3.85005 17.533 3.85005 17.6626V19.3999C3.85005 19.694 3.85071 19.8634 3.86085 19.9875C3.86499 20.0382 3.86985 20.0663 3.87251 20.0789C3.88472 20.0986 3.90135 20.1152 3.92109 20.1274C3.93369 20.1301 3.96172 20.135 4.01246 20.1391C4.13657 20.1492 4.30599 20.1499 4.60005 20.1499H6.3373C6.467 20.1499 6.53633 20.1497 6.58803 20.1473C6.60864 20.1464 6.61993 20.1453 6.6248 20.1448C6.63837 20.1411 6.65137 20.1356 6.66341 20.1283C6.65324 20.1346 6.65687 20.1346 6.68853 20.1057C6.72676 20.0708 6.77593 20.0219 6.86763 19.9302L11.9781 14.8197C11.995 14.8028 12.0121 14.7857 12.0293 14.7684C12.2121 14.5847 12.4146 14.3812 12.6434 14.2533C12.8608 14.1318 13.0376 14.072 13.2841 14.0367C13.4588 14.0118 13.6322 14.0236 13.7691 14.0368C13.9108 14.0505 14.087 14.0742 14.2907 14.1016L14.3063 14.1037C14.5328 14.1341 14.7643 14.1499 15 14.1499C17.8443 14.1499 20.15 11.8442 20.15 8.9999C20.15 6.15564 17.8443 3.8499 15 3.8499ZM14.15 8.9999C14.15 8.53046 14.5306 8.1499 15 8.1499H15.01C15.4795 8.1499 15.86 8.53046 15.86 8.9999C15.86 9.46934 15.4795 9.8499 15.01 9.8499H15C14.5306 9.8499 14.15 9.46934 14.15 8.9999Z", fill: "#101828" }) });
229
+ };
230
+ var lock = (props) => {
231
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...iconProps3(props), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.1499 7.9999C6.1499 4.76904 8.76904 2.1499 11.9999 2.1499C15.2308 2.1499 17.8499 4.76904 17.8499 7.9999V9.2727C18.1659 9.33256 18.4634 9.42461 18.7478 9.56953C19.4722 9.93864 20.0612 10.5276 20.4303 11.252C20.665 11.7127 20.761 12.2075 20.8062 12.7603C20.8499 13.2953 20.8499 13.9544 20.8499 14.7641V16.2357C20.8499 17.0454 20.8499 17.7045 20.8062 18.2395C20.761 18.7923 20.665 19.2871 20.4303 19.7478C20.0612 20.4722 19.4722 21.0612 18.7478 21.4303C18.2871 21.665 17.7923 21.761 17.2395 21.8062C16.7045 21.8499 16.0454 21.8499 15.2357 21.8499H8.7641C7.95444 21.8499 7.29532 21.8499 6.76029 21.8062C6.20747 21.761 5.7127 21.665 5.25204 21.4303C4.52762 21.0612 3.93864 20.4722 3.56953 19.7478C3.33481 19.2871 3.23877 18.7923 3.1936 18.2395C3.14989 17.7045 3.14989 17.0454 3.1499 16.2358V14.764C3.14989 13.9544 3.14989 13.2953 3.1936 12.7603C3.23877 12.2075 3.33481 11.7127 3.56953 11.252C3.93864 10.5276 4.52762 9.93864 5.25204 9.56953C5.53645 9.42461 5.83386 9.33256 6.1499 9.2727V7.9999ZM7.8499 9.15282C8.13095 9.14989 8.43507 9.1499 8.76405 9.1499H15.2358C15.5647 9.1499 15.8689 9.14989 16.1499 9.15282V7.9999C16.1499 5.70792 14.2919 3.8499 11.9999 3.8499C9.70792 3.8499 7.8499 5.70792 7.8499 7.9999V9.15282ZM6.89873 10.888C6.45103 10.9245 6.20489 10.992 6.02382 11.0842C5.61927 11.2904 5.29037 11.6193 5.08424 12.0238C4.99198 12.2049 4.92453 12.451 4.88795 12.8987C4.85056 13.3563 4.8499 13.9458 4.8499 14.7999V16.1999C4.8499 17.054 4.85056 17.6435 4.88795 18.1011C4.92453 18.5488 4.99198 18.7949 5.08424 18.976C5.29037 19.3805 5.61928 19.7094 6.02382 19.9156C6.20489 20.0078 6.45103 20.0753 6.89873 20.1119C7.35634 20.1492 7.9458 20.1499 8.7999 20.1499H15.1999C16.054 20.1499 16.6435 20.1492 17.1011 20.1119C17.5488 20.0753 17.7949 20.0078 17.976 19.9156C18.3805 19.7094 18.7094 19.3805 18.9156 18.976C19.0078 18.7949 19.0753 18.5488 19.1119 18.1011C19.1492 17.6435 19.1499 17.054 19.1499 16.1999V14.7999C19.1499 13.9458 19.1492 13.3563 19.1119 12.8987C19.0753 12.451 19.0078 12.2049 18.9156 12.0238C18.7094 11.6193 18.3805 11.2904 17.976 11.0842C17.7949 10.992 17.5488 10.9245 17.1011 10.888C16.6435 10.8506 16.054 10.8499 15.1999 10.8499H8.7999C7.9458 10.8499 7.35634 10.8506 6.89873 10.888ZM11.9999 13.6499C12.4693 13.6499 12.8499 14.0305 12.8499 14.4999V16.4999C12.8499 16.9693 12.4693 17.3499 11.9999 17.3499C11.5305 17.3499 11.1499 16.9693 11.1499 16.4999V14.4999C11.1499 14.0305 11.5305 13.6499 11.9999 13.6499Z", fill: "#101828" }) });
232
+ };
233
+ var lock_unlocked = (props) => {
234
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...iconProps3(props), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.1499 7.9999C6.1499 4.76904 8.76904 2.1499 11.9999 2.1499C15.2308 2.1499 17.8499 4.76904 17.8499 7.9999V9.2727C18.1659 9.33256 18.4634 9.42461 18.7478 9.56953C19.4722 9.93864 20.0612 10.5276 20.4303 11.252C20.665 11.7127 20.761 12.2075 20.8062 12.7603C20.8499 13.2953 20.8499 13.9544 20.8499 14.7641V16.2357C20.8499 17.0454 20.8499 17.7045 20.8062 18.2395C20.761 18.7923 20.665 19.2871 20.4303 19.7478C20.0612 20.4722 19.4722 21.0612 18.7478 21.4303C18.2871 21.665 17.7923 21.761 17.2395 21.8062C16.7045 21.8499 16.0454 21.8499 15.2357 21.8499H8.7641C7.95444 21.8499 7.29532 21.8499 6.76029 21.8062C6.20747 21.761 5.7127 21.665 5.25204 21.4303C4.52762 21.0612 3.93864 20.4722 3.56953 19.7478C3.33481 19.2871 3.23877 18.7923 3.1936 18.2395C3.14989 17.7045 3.14989 17.0454 3.1499 16.2358V14.764C3.14989 13.9544 3.14989 13.2953 3.1936 12.7603C3.23877 12.2075 3.33481 11.7127 3.56953 11.252C3.93864 10.5276 4.52762 9.93864 5.25204 9.56953C5.53645 9.42461 5.83386 9.33256 6.1499 9.2727V7.9999ZM7.8499 9.15282C8.13095 9.14989 8.43507 9.1499 8.76405 9.1499H15.2358C15.5647 9.1499 15.8689 9.14989 16.1499 9.15282V7.9999C16.1499 5.70792 14.2919 3.8499 11.9999 3.8499C9.70792 3.8499 7.8499 5.70792 7.8499 7.9999V9.15282ZM6.89873 10.888C6.45103 10.9245 6.20489 10.992 6.02382 11.0842C5.61927 11.2904 5.29037 11.6193 5.08424 12.0238C4.99198 12.2049 4.92453 12.451 4.88795 12.8987C4.85056 13.3563 4.8499 13.9458 4.8499 14.7999V16.1999C4.8499 17.054 4.85056 17.6435 4.88795 18.1011C4.92453 18.5488 4.99198 18.7949 5.08424 18.976C5.29037 19.3805 5.61928 19.7094 6.02382 19.9156C6.20489 20.0078 6.45103 20.0753 6.89873 20.1119C7.35634 20.1492 7.9458 20.1499 8.7999 20.1499H15.1999C16.054 20.1499 16.6435 20.1492 17.1011 20.1119C17.5488 20.0753 17.7949 20.0078 17.976 19.9156C18.3805 19.7094 18.7094 19.3805 18.9156 18.976C19.0078 18.7949 19.0753 18.5488 19.1119 18.1011C19.1492 17.6435 19.1499 17.054 19.1499 16.1999V14.7999C19.1499 13.9458 19.1492 13.3563 19.1119 12.8987C19.0753 12.451 19.0078 12.2049 18.9156 12.0238C18.7094 11.6193 18.3805 11.2904 17.976 11.0842C17.7949 10.992 17.5488 10.9245 17.1011 10.888C16.6435 10.8506 16.054 10.8499 15.1999 10.8499H8.7999C7.9458 10.8499 7.35634 10.8506 6.89873 10.888ZM11.9999 13.6499C12.4693 13.6499 12.8499 14.0305 12.8499 14.4999V16.4999C12.8499 16.9693 12.4693 17.3499 11.9999 17.3499C11.5305 17.3499 11.1499 16.9693 11.1499 16.4999V14.4999C11.1499 14.0305 11.5305 13.6499 11.9999 13.6499Z", fill: "#101828" }) });
235
+ };
236
+
237
+ // packages/icons/src/index.tsx
238
+ var import_jsx_runtime5 = require("react/jsx-runtime");
239
+ var iconProps4 = ({ size, ...props }) => ({
132
240
  width: size ?? 20,
133
241
  height: size ?? 20,
134
242
  fill: "none",
@@ -137,18 +245,63 @@ var iconProps = ({ size, ...props }) => ({
137
245
  ...props
138
246
  });
139
247
  function PlusIcon(props) {
140
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
248
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
249
+ "path",
250
+ {
251
+ d: "M12 5v14M5 12h14",
252
+ stroke: "currentColor",
253
+ strokeWidth: "2",
254
+ strokeLinecap: "round"
255
+ }
256
+ ) });
141
257
  }
142
258
  function ChevronDownIcon(props) {
143
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
259
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
260
+ "path",
261
+ {
262
+ d: "m6 9 6 6 6-6",
263
+ stroke: "currentColor",
264
+ strokeWidth: "2",
265
+ strokeLinecap: "round",
266
+ strokeLinejoin: "round"
267
+ }
268
+ ) });
269
+ }
270
+ function ChevronUpIcon(props) {
271
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
272
+ "path",
273
+ {
274
+ d: "m6 15 6-6 6 6",
275
+ stroke: "currentColor",
276
+ strokeWidth: "2",
277
+ strokeLinecap: "round",
278
+ strokeLinejoin: "round"
279
+ }
280
+ ) });
144
281
  }
145
282
  function CloseIcon(props) {
146
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 6 12 12M18 6 6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
283
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
284
+ "path",
285
+ {
286
+ d: "m6 6 12 12M18 6 6 18",
287
+ stroke: "currentColor",
288
+ strokeWidth: "2",
289
+ strokeLinecap: "round"
290
+ }
291
+ ) });
147
292
  }
148
293
  function SearchIcon(props) {
149
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...iconProps(props), children: [
150
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "11", cy: "11", r: "6.5", stroke: "currentColor", strokeWidth: "2" }),
151
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m16 16 4 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
294
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { ...iconProps4(props), children: [
295
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "11", cy: "11", r: "6.5", stroke: "currentColor", strokeWidth: "2" }),
296
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
297
+ "path",
298
+ {
299
+ d: "m16 16 4 4",
300
+ stroke: "currentColor",
301
+ strokeWidth: "2",
302
+ strokeLinecap: "round"
303
+ }
304
+ )
152
305
  ] });
153
306
  }
154
307
 
@@ -157,7 +310,7 @@ var import_react3 = require("react");
157
310
 
158
311
  // packages/pagination/src/index.tsx
159
312
  var import_react2 = require("react");
160
- var import_jsx_runtime3 = require("react/jsx-runtime");
313
+ var import_jsx_runtime6 = require("react/jsx-runtime");
161
314
  var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
162
315
  var range = (start, end) => Array.from({ length: Math.max(0, end - start + 1) }, (_, index) => start + index);
163
316
  function getItems(totalPages, page, siblingCount, boundaryCount) {
@@ -200,9 +353,9 @@ function Pagination({
200
353
  if (page === void 0) setUncontrolledPage(resolvedPage);
201
354
  if (resolvedPage !== currentPage) onPageChange?.(resolvedPage);
202
355
  };
203
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("nav", { className: ["fe-pagination", className].filter(Boolean).join(" "), "aria-label": "Pagination", ...props, children: [
204
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u2039", "aria-label": previousLabel, disabled: disabled || currentPage === 1, onClick: () => selectPage(currentPage - 1) }),
205
- items.map((item, index) => item === "start-ellipsis" || item === "end-ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fe-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, `${item}-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
356
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("nav", { className: ["fe-pagination", className].filter(Boolean).join(" "), "aria-label": "Pagination", ...props, children: [
357
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u2039", "aria-label": previousLabel, disabled: disabled || currentPage === 1, onClick: () => selectPage(currentPage - 1) }),
358
+ items.map((item, index) => item === "start-ellipsis" || item === "end-ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, `${item}-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
206
359
  Button,
207
360
  {
208
361
  className: "fe-pagination__button",
@@ -216,12 +369,12 @@ function Pagination({
216
369
  },
217
370
  item
218
371
  )),
219
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u203A", "aria-label": nextLabel, disabled: disabled || currentPage === safeTotalPages, onClick: () => selectPage(currentPage + 1) })
372
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u203A", "aria-label": nextLabel, disabled: disabled || currentPage === safeTotalPages, onClick: () => selectPage(currentPage + 1) })
220
373
  ] });
221
374
  }
222
375
 
223
376
  // packages/table/src/index.tsx
224
- var import_jsx_runtime4 = require("react/jsx-runtime");
377
+ var import_jsx_runtime7 = require("react/jsx-runtime");
225
378
  var TableContext = (0, import_react3.createContext)({ striped: false });
226
379
  var MIN_COLUMN_WIDTH = 96;
227
380
  var MAX_COLUMN_WIDTH = 1200;
@@ -321,14 +474,14 @@ function DataTable({
321
474
  if (nextPage !== currentPage) onPageChange?.(nextPage);
322
475
  };
323
476
  const resolvedPaginationPosition = paginationPosition === "middle-bottom" ? "bottom-center" : paginationPosition;
324
- const paginationControl = shouldPaginate && totalPages > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `fe-table__pagination fe-table__pagination--${resolvedPaginationPosition}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Pagination, { page: currentPage, totalPages, onPageChange: changePage }) }) : null;
325
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: [
477
+ const paginationControl = shouldPaginate && totalPages > 1 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `fe-table__pagination fe-table__pagination--${resolvedPaginationPosition}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Pagination, { page: currentPage, totalPages, onPageChange: changePage }) }) : null;
478
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: [
326
479
  resolvedPaginationPosition === "top-right" && paginationControl,
327
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
328
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("colgroup", { children: sizes2.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("col", { style: { width: `${size}px` } }, index)) }),
329
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("th", { scope: "col", children: [
330
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
331
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
480
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
481
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("colgroup", { children: sizes2.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("col", { style: { width: `${size}px` } }, index)) }),
482
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("th", { scope: "col", children: [
483
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
484
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
332
485
  "span",
333
486
  {
334
487
  className: "fe-table__resize-handle",
@@ -352,7 +505,7 @@ function DataTable({
352
505
  }
353
506
  )
354
507
  ] }, columnIndex)) }) }),
355
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { children: pagedData.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: row[columnIndex] }, columnIndex)) }, shouldPaginate ? (currentPage - 1) * safePageSize + rowIndex : rowIndex)) })
508
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: pagedData.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { children: row[columnIndex] }, columnIndex)) }, shouldPaginate ? (currentPage - 1) * safePageSize + rowIndex : rowIndex)) })
356
509
  ] }),
357
510
  resolvedPaginationPosition !== "top-right" && paginationControl
358
511
  ] });
@@ -370,42 +523,61 @@ function Table({
370
523
  paginationPosition,
371
524
  ...props
372
525
  }) {
373
- if (headers || data) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, pagination, pageSize, page, defaultPage, onPageChange, paginationPosition, ...props });
374
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
526
+ if (headers || data) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, pagination, pageSize, page, defaultPage, onPageChange, paginationPosition, ...props });
527
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
375
528
  }
376
529
  function TableHead(props) {
377
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { ...props });
530
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { ...props });
378
531
  }
379
532
  function TableBody(props) {
380
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { ...props });
533
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { ...props });
381
534
  }
382
535
  function TableRow({ children, ...props }) {
383
536
  const { striped } = (0, import_react3.useContext)(TableContext);
384
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { "data-striped": striped || void 0, ...props, children });
537
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { "data-striped": striped || void 0, ...props, children });
385
538
  }
386
539
  function TableCell({ children, ...props }) {
387
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { ...props, children });
540
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { ...props, children });
388
541
  }
389
542
  function TableHeader({ children, ...props }) {
390
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { scope: "col", ...props, children });
543
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { scope: "col", ...props, children });
391
544
  }
392
545
  function TableCaption(props) {
393
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("caption", { ...props });
546
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("caption", { ...props });
394
547
  }
395
548
 
396
549
  // packages/toggle/src/index.tsx
397
550
  var import_react4 = require("react");
398
- var import_jsx_runtime5 = require("react/jsx-runtime");
399
- var Toggle = (0, import_react4.forwardRef)(function Toggle2({ color = "#16a34a", label, className, style, id, ...props }, ref) {
400
- const classes = ["fe-toggle", className].filter(Boolean).join(" ");
551
+ var import_jsx_runtime8 = require("react/jsx-runtime");
552
+ var Toggle = (0, import_react4.forwardRef)(function Toggle2({
553
+ color = "#16a34a",
554
+ label,
555
+ labelPosition = "right",
556
+ className,
557
+ style,
558
+ id,
559
+ ...props
560
+ }, ref) {
561
+ const classes = ["fe-toggle", `fe-toggle--label-${labelPosition}`, className].filter(Boolean).join(" ");
401
562
  const toggleStyle = {
402
563
  "--fe-toggle-color": color,
403
564
  ...style
404
565
  };
405
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: classes, style: toggleStyle, children: [
406
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { ref, id, className: "fe-toggle__input", type: "checkbox", role: "switch", ...props }),
407
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
408
- label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fe-toggle__label", children: label })
566
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: classes, style: toggleStyle, children: [
567
+ label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-toggle__label", children: label }),
568
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
569
+ "input",
570
+ {
571
+ ref,
572
+ id,
573
+ className: "fe-toggle__input",
574
+ type: "checkbox",
575
+ role: "switch",
576
+ ...props
577
+ }
578
+ ),
579
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
580
+ label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-toggle__label", children: label })
409
581
  ] });
410
582
  });
411
583
  Toggle.displayName = "Toggle";
@@ -413,7 +585,7 @@ Toggle.displayName = "Toggle";
413
585
  // packages/drawer/src/index.tsx
414
586
  var import_react5 = require("react");
415
587
  var import_react_dom = require("react-dom");
416
- var import_jsx_runtime6 = require("react/jsx-runtime");
588
+ var import_jsx_runtime9 = require("react/jsx-runtime");
417
589
  function Drawer({ open, onClose, title, footer, side = "right", width = 400, fullScreen = false, children, closeOnBackdropClick = true, className, style, ...props }) {
418
590
  (0, import_react5.useEffect)(() => {
419
591
  if (!open) return;
@@ -425,22 +597,48 @@ function Drawer({ open, onClose, title, footer, side = "right", width = 400, ful
425
597
  }, [onClose, open]);
426
598
  if (!open || typeof document === "undefined") return null;
427
599
  const panelStyle = !fullScreen && (side === "left" || side === "right") ? { ...style, width: typeof width === "number" ? `${width}px` : width } : style;
428
- return (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
600
+ return (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
429
601
  if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
430
- }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("aside", { className: ["fe-drawer", `fe-drawer--${side}`, fullScreen && "fe-drawer--full-screen", className].filter(Boolean).join(" "), style: panelStyle, role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : "Drawer", ...props, children: [
431
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("header", { className: "fe-drawer__header", children: [
432
- title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { children: title }),
433
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
602
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("aside", { className: ["fe-drawer", `fe-drawer--${side}`, fullScreen && "fe-drawer--full-screen", className].filter(Boolean).join(" "), style: panelStyle, role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : "Drawer", ...props, children: [
603
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("header", { className: "fe-drawer__header", children: [
604
+ title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { children: title }),
605
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
434
606
  ] }),
435
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fe-drawer__body", children }),
436
- footer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("footer", { className: "fe-drawer__footer", children: footer })
607
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fe-drawer__body", children }),
608
+ footer && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("footer", { className: "fe-drawer__footer", children: footer })
437
609
  ] }) }), document.body);
438
610
  }
439
611
 
440
- // packages/form-controls/src/index.tsx
612
+ // packages/form-controls/src/controls/TextInput/text-input.tsx
613
+ var import_react7 = require("react");
614
+
615
+ // packages/tooltip/src/index.tsx
441
616
  var import_react6 = require("react");
442
- var import_react_dom2 = require("react-dom");
443
- var import_jsx_runtime7 = require("react/jsx-runtime");
617
+ var import_jsx_runtime10 = require("react/jsx-runtime");
618
+ function Tooltip({ content, children, placement = "top", disabled, className, ...props }) {
619
+ const [visible, setVisible] = (0, import_react6.useState)(false);
620
+ const id = (0, import_react6.useId)();
621
+ const trigger = (0, import_react6.cloneElement)(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
622
+ children.props.onMouseEnter?.(event);
623
+ setVisible(true);
624
+ }, onMouseLeave: (event) => {
625
+ children.props.onMouseLeave?.(event);
626
+ setVisible(false);
627
+ }, onFocus: (event) => {
628
+ children.props.onFocus?.(event);
629
+ setVisible(true);
630
+ }, onBlur: (event) => {
631
+ children.props.onBlur?.(event);
632
+ setVisible(false);
633
+ } });
634
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
635
+ trigger,
636
+ visible && !disabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
637
+ ] });
638
+ }
639
+
640
+ // packages/form-controls/src/controls/Field/field.tsx
641
+ var import_jsx_runtime11 = require("react/jsx-runtime");
444
642
  function getFieldError(error, errorMessage) {
445
643
  if (errorMessage !== void 0 && errorMessage !== null) return errorMessage;
446
644
  if (typeof error !== "boolean") return error;
@@ -449,178 +647,662 @@ function getFieldError(error, errorMessage) {
449
647
  function getDescribedBy(existing, messageId2) {
450
648
  return [existing, messageId2].filter(Boolean).join(" ") || void 0;
451
649
  }
452
- var TextInput = (0, import_react6.forwardRef)(function TextInput2({ value, defaultValue = "", onChange, onValueChange, label, helperText, error, errorMessage, clearable = false, onClear, clearLabel = "Clear input", className, disabled, readOnly, id, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
453
- const generatedId = (0, import_react6.useId)();
454
- const inputId = id ?? `${generatedId}-input`;
455
- const labelId = `${generatedId}-label`;
456
- const messageId2 = `${generatedId}-message`;
457
- const controlled = value !== void 0;
458
- const [internalValue, setInternalValue] = (0, import_react6.useState)(defaultValue);
459
- const currentValue = controlled ? value : internalValue;
460
- const fieldError = getFieldError(error, errorMessage);
461
- const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
462
- const displayedMessage = hasError ? fieldError : helperText;
463
- const describedBy = getDescribedBy(ariaDescribedBy, displayedMessage ? messageId2 : void 0);
464
- const clear = () => {
465
- if (!controlled) setInternalValue("");
466
- onValueChange?.("");
467
- onClear?.();
468
- };
469
- const labelledBy = getDescribedBy(ariaLabelledBy, label ? labelId : void 0);
470
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: ["fe-text-input", hasError && "fe-text-input--error", className].filter(Boolean).join(" "), children: [
471
- label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: labelId, className: "fe-text-input__label", children: label }),
472
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "fe-text-input__control", children: [
473
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ref, id: inputId, value: currentValue, disabled, readOnly, "aria-invalid": hasError || void 0, "aria-labelledby": labelledBy, "aria-describedby": describedBy, onChange: (event) => {
474
- if (!controlled) setInternalValue(event.target.value);
475
- onValueChange?.(event.target.value);
476
- onChange?.(event);
477
- }, ...props }),
478
- clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, { size: 14 }), "aria-label": clearLabel, onClick: clear, className: "fe-text-input__clear" })
479
- ] }),
480
- displayedMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: messageId2, className: hasError ? "fe-text-input__error" : "fe-text-input__helper", children: displayedMessage })
650
+ function FieldLabel({
651
+ id,
652
+ label,
653
+ description,
654
+ descriptionDisplay,
655
+ isRequired = false
656
+ }) {
657
+ if (!label) return null;
658
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "fe-field__label", children: [
659
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { id, children: label }),
660
+ isRequired && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" }),
661
+ description && descriptionDisplay === "tooltip" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Tooltip, { content: description, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
662
+ "span",
663
+ {
664
+ className: "fe-field__info",
665
+ tabIndex: 0,
666
+ role: "img",
667
+ "aria-label": "More information",
668
+ children: "i"
669
+ }
670
+ ) })
481
671
  ] });
482
- });
672
+ }
673
+ function FieldMessage({
674
+ id,
675
+ error,
676
+ description,
677
+ descriptionDisplay
678
+ }) {
679
+ if (error !== void 0 && error !== false && error !== null)
680
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
681
+ "span",
682
+ {
683
+ id,
684
+ className: "fe-field__message fe-field__message--error",
685
+ role: "alert",
686
+ children: error
687
+ }
688
+ );
689
+ if (description && descriptionDisplay === "inline")
690
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { id, className: "fe-field__message", children: description });
691
+ return null;
692
+ }
693
+
694
+ // packages/form-controls/src/controls/TextInput/text-input.tsx
695
+ var import_jsx_runtime12 = require("react/jsx-runtime");
696
+ var TextInput = (0, import_react7.forwardRef)(
697
+ function TextInput2({
698
+ value,
699
+ defaultValue = "",
700
+ onChange,
701
+ onValueChange,
702
+ label,
703
+ description,
704
+ descriptionDisplay = "inline",
705
+ helperText,
706
+ error,
707
+ errorMessage,
708
+ clearable = false,
709
+ onClear,
710
+ clearLabel = "Clear input",
711
+ className,
712
+ disabled,
713
+ readOnly,
714
+ id,
715
+ prefix,
716
+ suffix,
717
+ Prefix,
718
+ Suffix,
719
+ isRequired = false,
720
+ placeholder,
721
+ required,
722
+ "aria-describedby": ariaDescribedBy,
723
+ "aria-labelledby": ariaLabelledBy,
724
+ ...props
725
+ }, ref) {
726
+ const generatedId = (0, import_react7.useId)();
727
+ const inputId = id ?? generatedId + "-input";
728
+ const labelId = generatedId + "-label";
729
+ const messageId2 = generatedId + "-message";
730
+ const controlled = value !== void 0;
731
+ const [internalValue, setInternalValue] = (0, import_react7.useState)(defaultValue);
732
+ const currentValue = controlled ? value : internalValue;
733
+ const fieldError = getFieldError(error, errorMessage);
734
+ const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
735
+ const resolvedDescription = description ?? helperText;
736
+ const hasMessage = hasError || resolvedDescription && descriptionDisplay === "inline";
737
+ const describedBy = getDescribedBy(
738
+ ariaDescribedBy,
739
+ hasMessage ? messageId2 : void 0
740
+ );
741
+ const resolvedPrefix = prefix ?? Prefix;
742
+ const resolvedSuffix = suffix ?? Suffix;
743
+ const labelledBy = getDescribedBy(
744
+ ariaLabelledBy,
745
+ label ? labelId : void 0
746
+ );
747
+ const clear = () => {
748
+ if (!controlled) setInternalValue("");
749
+ onValueChange?.("");
750
+ onClear?.();
751
+ };
752
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
753
+ "div",
754
+ {
755
+ className: [
756
+ "fe-text-input",
757
+ hasError && "fe-text-input--error",
758
+ className
759
+ ].filter(Boolean).join(" "),
760
+ children: [
761
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
762
+ FieldLabel,
763
+ {
764
+ id: labelId,
765
+ label,
766
+ description: resolvedDescription,
767
+ descriptionDisplay,
768
+ isRequired
769
+ }
770
+ ),
771
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "fe-text-input__control", children: [
772
+ resolvedPrefix && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "fe-text-input__prefix", children: resolvedPrefix }),
773
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "fe-text-input__input-wrap", children: [
774
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
775
+ "input",
776
+ {
777
+ ref,
778
+ id: inputId,
779
+ value: currentValue,
780
+ placeholder,
781
+ required: isRequired || required,
782
+ disabled,
783
+ readOnly,
784
+ "aria-invalid": hasError || void 0,
785
+ "aria-required": isRequired || void 0,
786
+ "aria-labelledby": labelledBy,
787
+ "aria-describedby": describedBy,
788
+ onChange: (event) => {
789
+ if (!controlled) setInternalValue(event.target.value);
790
+ onValueChange?.(event.target.value);
791
+ onChange?.(event);
792
+ },
793
+ ...props
794
+ }
795
+ ),
796
+ isRequired && placeholder && !currentValue && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "fe-text-input__placeholder", "aria-hidden": "true", children: [
797
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: placeholder }),
798
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "fe-field__required", children: "*" })
799
+ ] })
800
+ ] }),
801
+ resolvedSuffix && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "fe-text-input__suffix", children: resolvedSuffix }),
802
+ clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
803
+ Button,
804
+ {
805
+ hierarchy: "tertiary-gray",
806
+ size: "24",
807
+ iconOnly: true,
808
+ icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon, { size: 14 }),
809
+ "aria-label": clearLabel,
810
+ onClick: clear,
811
+ className: "fe-text-input__clear"
812
+ }
813
+ )
814
+ ] }),
815
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
816
+ FieldMessage,
817
+ {
818
+ id: messageId2,
819
+ error: fieldError,
820
+ description: resolvedDescription,
821
+ descriptionDisplay
822
+ }
823
+ )
824
+ ]
825
+ }
826
+ );
827
+ }
828
+ );
483
829
  TextInput.displayName = "TextInput";
484
- var TextArea = (0, import_react6.forwardRef)(function TextArea2({ value, defaultValue = "", onChange, onValueChange, label, helperText, error, errorMessage, clearable = false, onClear, clearLabel = "Clear text area", className, disabled, readOnly, id, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
485
- const generatedId = (0, import_react6.useId)();
486
- const inputId = id ?? `${generatedId}-input`;
487
- const labelId = `${generatedId}-label`;
488
- const messageId2 = `${generatedId}-message`;
489
- const controlled = value !== void 0;
490
- const [internalValue, setInternalValue] = (0, import_react6.useState)(defaultValue);
491
- const currentValue = controlled ? value : internalValue;
492
- const fieldError = getFieldError(error, errorMessage);
493
- const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
494
- const displayedMessage = hasError ? fieldError : helperText;
495
- const describedBy = getDescribedBy(ariaDescribedBy, displayedMessage ? messageId2 : void 0);
496
- const clear = () => {
497
- if (!controlled) setInternalValue("");
498
- onValueChange?.("");
499
- onClear?.();
500
- };
501
- const labelledBy = getDescribedBy(ariaLabelledBy, label ? labelId : void 0);
502
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: ["fe-text-area", hasError && "fe-text-area--error", className].filter(Boolean).join(" "), children: [
503
- label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: labelId, className: "fe-text-area__label", children: label }),
504
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "fe-text-area__control", children: [
505
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("textarea", { ref, id: inputId, value: currentValue, disabled, readOnly, "aria-invalid": hasError || void 0, "aria-labelledby": labelledBy, "aria-describedby": describedBy, onChange: (event) => {
506
- if (!controlled) setInternalValue(event.target.value);
507
- onValueChange?.(event.target.value);
508
- onChange?.(event);
509
- }, ...props }),
510
- clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, { size: 14 }), "aria-label": clearLabel, onClick: clear, className: "fe-text-area__clear" })
511
- ] }),
512
- displayedMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: messageId2, className: hasError ? "fe-text-area__error" : "fe-text-area__helper", children: displayedMessage })
513
- ] });
514
- });
515
- TextArea.displayName = "TextArea";
516
- var Selection = (0, import_react6.forwardRef)(function Selection2({ className, label, helperText, error, options, placeholder = "Select an option", size = "medium", id, value, defaultValue, onChange, multiple = false, searchable = false, tag = false, clearable = false, disabled = false, name, onKeyDown, ...props }, ref) {
517
- const generatedId = (0, import_react6.useId)();
518
- const listboxId = id ?? generatedId;
519
- const isControlled = value !== void 0;
520
- const [internalValue, setInternalValue] = (0, import_react6.useState)(defaultValue ?? (multiple ? [] : ""));
521
- const selectedValue = isControlled ? value : internalValue;
522
- const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue === "" || selectedValue === null || selectedValue === void 0 ? [] : [selectedValue];
523
- const selectedOptions = options.filter((option) => selectedValues.some((item) => String(item) === String(option.value)));
524
- const [open, setOpen] = (0, import_react6.useState)(false);
525
- const [query, setQuery] = (0, import_react6.useState)("");
526
- const [activeIndex, setActiveIndex] = (0, import_react6.useState)(0);
527
- const rootRef = (0, import_react6.useRef)(null);
528
- const menuRef = (0, import_react6.useRef)(null);
529
- const [menuPosition, setMenuPosition] = (0, import_react6.useState)(null);
530
- (0, import_react6.useEffect)(() => {
531
- const close = (event) => {
532
- const target = event.target;
533
- if (!rootRef.current?.contains(target) && !menuRef.current?.contains(target)) setOpen(false);
830
+
831
+ // packages/form-controls/src/controls/TextArea/text-area.tsx
832
+ var import_react8 = require("react");
833
+ var import_jsx_runtime13 = require("react/jsx-runtime");
834
+ var TextArea = (0, import_react8.forwardRef)(
835
+ function TextArea2({
836
+ value,
837
+ defaultValue = "",
838
+ onChange,
839
+ onValueChange,
840
+ label,
841
+ description,
842
+ descriptionDisplay = "inline",
843
+ helperText,
844
+ error,
845
+ errorMessage,
846
+ autosize = false,
847
+ clearable = false,
848
+ onClear,
849
+ clearLabel = "Clear text area",
850
+ className,
851
+ disabled,
852
+ readOnly,
853
+ id,
854
+ isRequired = false,
855
+ placeholder,
856
+ required,
857
+ "aria-describedby": ariaDescribedBy,
858
+ "aria-labelledby": ariaLabelledBy,
859
+ ...props
860
+ }, ref) {
861
+ const generatedId = (0, import_react8.useId)();
862
+ const inputId = id ?? generatedId + "-input";
863
+ const labelId = generatedId + "-label";
864
+ const messageId2 = generatedId + "-message";
865
+ const controlled = value !== void 0;
866
+ const [internalValue, setInternalValue] = (0, import_react8.useState)(defaultValue);
867
+ const textareaRef = (0, import_react8.useRef)(null);
868
+ const currentValue = controlled ? value : internalValue;
869
+ const fieldError = getFieldError(error, errorMessage);
870
+ const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
871
+ const resolvedDescription = description ?? helperText;
872
+ const hasMessage = hasError || resolvedDescription && descriptionDisplay === "inline";
873
+ const describedBy = getDescribedBy(
874
+ ariaDescribedBy,
875
+ hasMessage ? messageId2 : void 0
876
+ );
877
+ const labelledBy = getDescribedBy(
878
+ ariaLabelledBy,
879
+ label ? labelId : void 0
880
+ );
881
+ const resizeToContent = (textarea) => {
882
+ textarea.style.height = "auto";
883
+ textarea.style.height = `${textarea.scrollHeight}px`;
534
884
  };
535
- document.addEventListener("mousedown", close);
536
- return () => document.removeEventListener("mousedown", close);
537
- }, []);
538
- (0, import_react6.useLayoutEffect)(() => {
539
- if (!open) return;
540
- const updateMenuPosition = () => {
541
- const rect = rootRef.current?.getBoundingClientRect();
542
- if (rect) setMenuPosition({ top: rect.bottom + 7, left: rect.left, width: rect.width });
885
+ (0, import_react8.useImperativeHandle)(ref, () => textareaRef.current, []);
886
+ (0, import_react8.useLayoutEffect)(() => {
887
+ if (autosize && textareaRef.current) {
888
+ resizeToContent(textareaRef.current);
889
+ }
890
+ }, [autosize, currentValue]);
891
+ const clear = () => {
892
+ if (!controlled) setInternalValue("");
893
+ onValueChange?.("");
894
+ onClear?.();
543
895
  };
544
- updateMenuPosition();
545
- window.addEventListener("resize", updateMenuPosition);
546
- document.addEventListener("scroll", updateMenuPosition, true);
547
- return () => {
548
- window.removeEventListener("resize", updateMenuPosition);
549
- document.removeEventListener("scroll", updateMenuPosition, true);
896
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
897
+ "div",
898
+ {
899
+ className: [
900
+ "fe-text-area",
901
+ hasError && "fe-text-area--error",
902
+ autosize && "fe-text-area--autosize",
903
+ className
904
+ ].filter(Boolean).join(" "),
905
+ children: [
906
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
907
+ FieldLabel,
908
+ {
909
+ id: labelId,
910
+ label,
911
+ description: resolvedDescription,
912
+ descriptionDisplay,
913
+ isRequired
914
+ }
915
+ ),
916
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "fe-text-area__control", children: [
917
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
918
+ "textarea",
919
+ {
920
+ ref: textareaRef,
921
+ id: inputId,
922
+ value: currentValue,
923
+ placeholder,
924
+ required: isRequired || required,
925
+ disabled,
926
+ readOnly,
927
+ "aria-invalid": hasError || void 0,
928
+ "aria-required": isRequired || void 0,
929
+ "aria-labelledby": labelledBy,
930
+ "aria-describedby": describedBy,
931
+ onChange: (event) => {
932
+ if (!controlled) setInternalValue(event.target.value);
933
+ if (autosize) resizeToContent(event.currentTarget);
934
+ onValueChange?.(event.target.value);
935
+ onChange?.(event);
936
+ },
937
+ ...props
938
+ }
939
+ ),
940
+ isRequired && placeholder && !currentValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "fe-text-area__placeholder", "aria-hidden": "true", children: [
941
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: placeholder }),
942
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fe-field__required", children: "*" })
943
+ ] }),
944
+ clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
945
+ Button,
946
+ {
947
+ hierarchy: "tertiary-gray",
948
+ size: "24",
949
+ iconOnly: true,
950
+ icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon, { size: 14 }),
951
+ "aria-label": clearLabel,
952
+ onClick: clear,
953
+ className: "fe-text-area__clear"
954
+ }
955
+ )
956
+ ] }),
957
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
958
+ FieldMessage,
959
+ {
960
+ id: messageId2,
961
+ error: fieldError,
962
+ description: resolvedDescription,
963
+ descriptionDisplay
964
+ }
965
+ )
966
+ ]
967
+ }
968
+ );
969
+ }
970
+ );
971
+ TextArea.displayName = "TextArea";
972
+
973
+ // packages/form-controls/src/controls/Selection/selection.tsx
974
+ var import_react9 = require("react");
975
+ var import_react_dom2 = require("react-dom");
976
+ var import_jsx_runtime14 = require("react/jsx-runtime");
977
+ var Selection = (0, import_react9.forwardRef)(
978
+ function Selection2({
979
+ className,
980
+ label,
981
+ isRequired = false,
982
+ description,
983
+ descriptionDisplay = "inline",
984
+ helperText,
985
+ error,
986
+ errorMessage,
987
+ options,
988
+ placeholder = "Select an option",
989
+ size = "medium",
990
+ id,
991
+ value,
992
+ defaultValue,
993
+ onChange,
994
+ multiple = false,
995
+ searchable = false,
996
+ tag = false,
997
+ clearable = false,
998
+ disabled = false,
999
+ name,
1000
+ onKeyDown,
1001
+ "aria-label": ariaLabel,
1002
+ "aria-describedby": ariaDescribedBy,
1003
+ "aria-labelledby": ariaLabelledBy,
1004
+ ...props
1005
+ }, ref) {
1006
+ const generatedId = (0, import_react9.useId)();
1007
+ const triggerId = id ?? generatedId + "-trigger";
1008
+ const listboxId = triggerId + "-listbox";
1009
+ const labelId = generatedId + "-label";
1010
+ const messageId2 = generatedId + "-message";
1011
+ const fieldError = getFieldError(error, errorMessage);
1012
+ const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
1013
+ const resolvedDescription = description ?? helperText;
1014
+ const hasMessage = hasError || resolvedDescription && descriptionDisplay === "inline";
1015
+ const describedBy = getDescribedBy(
1016
+ ariaDescribedBy,
1017
+ hasMessage ? messageId2 : void 0
1018
+ );
1019
+ const labelledBy = getDescribedBy(
1020
+ ariaLabelledBy,
1021
+ label ? labelId : void 0
1022
+ );
1023
+ const isControlled = value !== void 0;
1024
+ const [internalValue, setInternalValue] = (0, import_react9.useState)(
1025
+ defaultValue ?? (multiple ? [] : "")
1026
+ );
1027
+ const selectedValue = isControlled ? value : internalValue;
1028
+ const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue === "" || selectedValue === null || selectedValue === void 0 ? [] : [selectedValue];
1029
+ const selectedOptions = options.filter(
1030
+ (option) => selectedValues.some((item) => String(item) === String(option.value))
1031
+ );
1032
+ const [open, setOpen] = (0, import_react9.useState)(false);
1033
+ const [query, setQuery] = (0, import_react9.useState)("");
1034
+ const [activeIndex, setActiveIndex] = (0, import_react9.useState)(0);
1035
+ const rootRef = (0, import_react9.useRef)(null);
1036
+ const menuRef = (0, import_react9.useRef)(null);
1037
+ const [menuPosition, setMenuPosition] = (0, import_react9.useState)(null);
1038
+ (0, import_react9.useEffect)(() => {
1039
+ const close = (event) => {
1040
+ const target = event.target;
1041
+ if (!rootRef.current?.contains(target) && !menuRef.current?.contains(target))
1042
+ setOpen(false);
1043
+ };
1044
+ document.addEventListener("mousedown", close);
1045
+ return () => document.removeEventListener("mousedown", close);
1046
+ }, []);
1047
+ (0, import_react9.useLayoutEffect)(() => {
1048
+ if (!open) return;
1049
+ const updateMenuPosition = () => {
1050
+ const rect = rootRef.current?.getBoundingClientRect();
1051
+ if (rect)
1052
+ setMenuPosition({
1053
+ top: rect.bottom + 7,
1054
+ left: rect.left,
1055
+ width: rect.width
1056
+ });
1057
+ };
1058
+ updateMenuPosition();
1059
+ window.addEventListener("resize", updateMenuPosition);
1060
+ document.addEventListener("scroll", updateMenuPosition, true);
1061
+ return () => {
1062
+ window.removeEventListener("resize", updateMenuPosition);
1063
+ document.removeEventListener("scroll", updateMenuPosition, true);
1064
+ };
1065
+ }, [open]);
1066
+ const filteredOptions = options.filter(
1067
+ (option) => !query || (option.searchText ?? (typeof option.label === "string" ? option.label : String(option.value))).toLowerCase().includes(query.toLowerCase())
1068
+ );
1069
+ const commit = (next) => {
1070
+ if (!isControlled) setInternalValue(next);
1071
+ const selected = options.filter(
1072
+ (option) => (Array.isArray(next) ? next : [next]).some(
1073
+ (item) => String(item) === String(option.value)
1074
+ )
1075
+ );
1076
+ onChange?.(next, multiple ? selected : selected[0]);
550
1077
  };
551
- }, [open]);
552
- const filteredOptions = options.filter((option) => !query || (option.searchText ?? (typeof option.label === "string" ? option.label : String(option.value))).toLowerCase().includes(query.toLowerCase()));
553
- const commit = (next) => {
554
- if (!isControlled) setInternalValue(next);
555
- const selected = options.filter((option) => (Array.isArray(next) ? next : [next]).some((item) => String(item) === String(option.value)));
556
- onChange?.(next, multiple ? selected : selected[0]);
557
- };
558
- const choose = (option) => {
559
- if (option.disabled) return;
560
- const isSelected = selectedValues.some((item) => String(item) === String(option.value));
561
- if (multiple) commit(isSelected ? selectedValues.filter((item) => String(item) !== String(option.value)) : [...selectedValues, option.value]);
562
- else {
563
- commit(option.value);
564
- setOpen(false);
1078
+ const choose = (option) => {
1079
+ if (option.disabled) return;
1080
+ const isSelected = selectedValues.some(
1081
+ (item) => String(item) === String(option.value)
1082
+ );
1083
+ if (multiple)
1084
+ commit(
1085
+ isSelected ? selectedValues.filter(
1086
+ (item) => String(item) !== String(option.value)
1087
+ ) : [...selectedValues, option.value]
1088
+ );
1089
+ else {
1090
+ commit(option.value);
1091
+ setOpen(false);
1092
+ setQuery("");
1093
+ }
1094
+ };
1095
+ const clear = () => {
1096
+ commit(multiple ? [] : "");
565
1097
  setQuery("");
566
- }
567
- };
568
- const clear = () => {
569
- commit(multiple ? [] : "");
570
- setQuery("");
571
- };
572
- const displayLabel = selectedOptions.length ? selectedOptions.map((option) => option.label) : null;
573
- const onTriggerKeyDown = (event) => {
574
- onKeyDown?.(event);
575
- if (disabled) return;
576
- if (event.key === "ArrowDown" || event.key === "ArrowUp") {
577
- event.preventDefault();
578
- setOpen(true);
579
- setActiveIndex((current) => Math.max(0, Math.min(filteredOptions.length - 1, current + (event.key === "ArrowDown" ? 1 : -1))));
580
- }
581
- if (event.key === "Enter" || event.key === " ") {
582
- event.preventDefault();
583
- if (!open) setOpen(true);
584
- else if (filteredOptions[activeIndex]) choose(filteredOptions[activeIndex]);
585
- }
586
- if (event.key === "Escape") setOpen(false);
587
- };
588
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref, className: ["fe-selection", `fe-selection--${size}`, open && "fe-selection--open", clearable && selectedOptions.length > 0 && "fe-selection--clearable", error && "fe-selection--error", disabled && "fe-selection--disabled", className].filter(Boolean).join(" "), ...props, children: [
589
- label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__label", children: label }),
590
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: rootRef, className: "fe-selection__control", children: [
591
- name && selectedValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "hidden", name: multiple ? `${name}[]` : name, value: item }, String(item))),
592
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", className: "fe-selection__trigger", disabled, "aria-invalid": error || void 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listboxId, onClick: () => setOpen((current) => !current), onKeyDown: onTriggerKeyDown, children: [
593
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: ["fe-selection__value", !selectedOptions.length && "is-placeholder", tag && selectedOptions.length > 1 && "is-tags"].filter(Boolean).join(" "), children: displayLabel ? tag && multiple ? selectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "fe-selection__tag", children: [
594
- option.label,
595
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: "\xD7" })
596
- ] }, String(option.value))) : displayLabel.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
597
- item,
598
- index < displayLabel.length - 1 ? ", " : ""
599
- ] }, index)) : placeholder }),
600
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__actions", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
601
- ] }),
602
- clearable && selectedOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "fe-selection__clear", "aria-label": "Clear selection", onClick: clear }),
603
- open && menuPosition && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: menuRef, id: listboxId, className: "fe-selection__menu", style: { position: "fixed", top: menuPosition.top, left: menuPosition.left, width: menuPosition.width }, role: "listbox", "aria-multiselectable": multiple || void 0, children: [
604
- searchable && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fe-selection__search", children: [
605
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: "\u2315" }),
606
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { autoFocus: true, value: query, onChange: (event) => {
607
- setQuery(event.target.value);
608
- setActiveIndex(0);
609
- }, placeholder: "Search\u2026", "aria-label": "Search options" })
610
- ] }),
611
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
612
- const isSelected = selectedValues.some((item) => String(item) === String(option.value));
613
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", className: [isSelected && "is-selected", index === activeIndex && "is-active"].filter(Boolean).join(" "), role: "option", "aria-selected": isSelected, disabled: option.disabled, onMouseMove: () => setActiveIndex(index), onClick: () => choose(option), children: [
614
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: option.label }),
615
- isSelected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__check", "aria-hidden": "true", children: "\u2713" })
616
- ] }, String(option.value));
617
- }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "fe-selection__empty", children: "No matching options" }) })
618
- ] }), document.body)
619
- ] }),
620
- helperText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__helper", children: helperText })
621
- ] });
622
- });
1098
+ };
1099
+ const displayLabel = selectedOptions.length ? selectedOptions.map((option) => option.label) : null;
1100
+ const onTriggerKeyDown = (event) => {
1101
+ onKeyDown?.(event);
1102
+ if (disabled) return;
1103
+ if (event.key === "ArrowDown" || event.key === "ArrowUp") {
1104
+ event.preventDefault();
1105
+ setOpen(true);
1106
+ setActiveIndex(
1107
+ (current) => Math.max(
1108
+ 0,
1109
+ Math.min(
1110
+ filteredOptions.length - 1,
1111
+ current + (event.key === "ArrowDown" ? 1 : -1)
1112
+ )
1113
+ )
1114
+ );
1115
+ }
1116
+ if (event.key === "Enter" || event.key === " ") {
1117
+ event.preventDefault();
1118
+ if (!open) setOpen(true);
1119
+ else if (filteredOptions[activeIndex])
1120
+ choose(filteredOptions[activeIndex]);
1121
+ }
1122
+ if (event.key === "Escape") setOpen(false);
1123
+ };
1124
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
1125
+ "div",
1126
+ {
1127
+ ref,
1128
+ className: [
1129
+ "fe-selection",
1130
+ "fe-selection--" + size,
1131
+ open && "fe-selection--open",
1132
+ clearable && selectedOptions.length > 0 && "fe-selection--clearable",
1133
+ hasError && "fe-selection--error",
1134
+ disabled && "fe-selection--disabled",
1135
+ className
1136
+ ].filter(Boolean).join(" "),
1137
+ ...props,
1138
+ children: [
1139
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1140
+ FieldLabel,
1141
+ {
1142
+ id: labelId,
1143
+ label,
1144
+ description: resolvedDescription,
1145
+ descriptionDisplay,
1146
+ isRequired
1147
+ }
1148
+ ),
1149
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref: rootRef, className: "fe-selection__control", children: [
1150
+ name && selectedValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1151
+ "input",
1152
+ {
1153
+ type: "hidden",
1154
+ name: multiple ? name + "[]" : name,
1155
+ value: item
1156
+ },
1157
+ String(item)
1158
+ )),
1159
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
1160
+ "button",
1161
+ {
1162
+ id: triggerId,
1163
+ type: "button",
1164
+ className: "fe-selection__trigger",
1165
+ disabled,
1166
+ "aria-label": ariaLabel,
1167
+ "aria-invalid": hasError || void 0,
1168
+ "aria-required": isRequired || void 0,
1169
+ "aria-labelledby": labelledBy,
1170
+ "aria-describedby": describedBy,
1171
+ "aria-haspopup": "listbox",
1172
+ "aria-expanded": open,
1173
+ "aria-controls": listboxId,
1174
+ onClick: () => setOpen((current) => !current),
1175
+ onKeyDown: onTriggerKeyDown,
1176
+ children: [
1177
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1178
+ "span",
1179
+ {
1180
+ className: [
1181
+ "fe-selection__value",
1182
+ !selectedOptions.length && "is-placeholder",
1183
+ tag && selectedOptions.length > 1 && "is-tags"
1184
+ ].filter(Boolean).join(" "),
1185
+ children: displayLabel ? tag && multiple ? selectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
1186
+ "span",
1187
+ {
1188
+ className: "fe-selection__tag",
1189
+ children: [
1190
+ option.label,
1191
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "aria-hidden": "true", children: "\xD7" })
1192
+ ]
1193
+ },
1194
+ String(option.value)
1195
+ )) : displayLabel.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { children: [
1196
+ item,
1197
+ index < displayLabel.length - 1 ? ", " : ""
1198
+ ] }, index)) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
1199
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: placeholder }),
1200
+ isRequired && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
1201
+ ] })
1202
+ }
1203
+ ),
1204
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-selection__actions", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
1205
+ ]
1206
+ }
1207
+ ),
1208
+ clearable && selectedOptions.length > 0 && !disabled && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1209
+ "button",
1210
+ {
1211
+ type: "button",
1212
+ className: "fe-selection__clear",
1213
+ "aria-label": "Clear selection",
1214
+ onClick: clear
1215
+ }
1216
+ ),
1217
+ open && menuPosition && (0, import_react_dom2.createPortal)(
1218
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
1219
+ "div",
1220
+ {
1221
+ ref: menuRef,
1222
+ id: listboxId,
1223
+ className: "fe-selection__menu",
1224
+ style: {
1225
+ position: "fixed",
1226
+ top: menuPosition.top,
1227
+ left: menuPosition.left,
1228
+ width: menuPosition.width
1229
+ },
1230
+ role: "listbox",
1231
+ "aria-multiselectable": multiple || void 0,
1232
+ children: [
1233
+ searchable && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "fe-selection__search", children: [
1234
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "aria-hidden": "true", children: "\u2315" }),
1235
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1236
+ "input",
1237
+ {
1238
+ autoFocus: true,
1239
+ value: query,
1240
+ onChange: (event) => {
1241
+ setQuery(event.target.value);
1242
+ setActiveIndex(0);
1243
+ },
1244
+ placeholder: "Search\u2026",
1245
+ "aria-label": "Search options"
1246
+ }
1247
+ )
1248
+ ] }),
1249
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
1250
+ const isSelected = selectedValues.some(
1251
+ (item) => String(item) === String(option.value)
1252
+ );
1253
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
1254
+ "button",
1255
+ {
1256
+ type: "button",
1257
+ className: [
1258
+ isSelected && "is-selected",
1259
+ index === activeIndex && "is-active"
1260
+ ].filter(Boolean).join(" "),
1261
+ role: "option",
1262
+ "aria-selected": isSelected,
1263
+ disabled: option.disabled,
1264
+ onMouseMove: () => setActiveIndex(index),
1265
+ onClick: () => choose(option),
1266
+ children: [
1267
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: option.label }),
1268
+ isSelected && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1269
+ "span",
1270
+ {
1271
+ className: "fe-selection__check",
1272
+ "aria-hidden": "true",
1273
+ children: "\u2713"
1274
+ }
1275
+ )
1276
+ ]
1277
+ },
1278
+ String(option.value)
1279
+ );
1280
+ }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "fe-selection__empty", children: "No matching options" }) })
1281
+ ]
1282
+ }
1283
+ ),
1284
+ document.body
1285
+ )
1286
+ ] }),
1287
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1288
+ FieldMessage,
1289
+ {
1290
+ id: messageId2,
1291
+ error: fieldError,
1292
+ description: resolvedDescription,
1293
+ descriptionDisplay
1294
+ }
1295
+ )
1296
+ ]
1297
+ }
1298
+ );
1299
+ }
1300
+ );
623
1301
  Selection.displayName = "Selection";
1302
+
1303
+ // packages/form-controls/src/controls/NumberInput/number-input.tsx
1304
+ var import_react10 = require("react");
1305
+ var import_jsx_runtime15 = require("react/jsx-runtime");
624
1306
  function formatNumber(value, decimals = 2, thousandSeparator = ",", decimalSeparator = ".") {
625
1307
  return new Intl.NumberFormat("en-US", {
626
1308
  minimumFractionDigits: 0,
@@ -629,16 +1311,24 @@ function formatNumber(value, decimals = 2, thousandSeparator = ",", decimalSepar
629
1311
  }).format(value).replace(/,/g, thousandSeparator).replace(/\./g, decimalSeparator);
630
1312
  }
631
1313
  function escapeRegExp(value) {
632
- return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
1314
+ return value.replace(/[.*+?^$\x7B\x7D()|[\]\\]/g, "\\$&");
633
1315
  }
634
1316
  function groupInteger(value, separator) {
635
1317
  return value.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
636
1318
  }
1319
+ function roundToDecimals(value, decimals) {
1320
+ const precision = Math.min(Math.max(0, decimals), 15);
1321
+ const multiplier = 10 ** precision;
1322
+ return Math.round((value + Number.EPSILON) * multiplier) / multiplier;
1323
+ }
637
1324
  function normalizeNumberInput(raw, options) {
638
1325
  const { allowDecimal, decimalSeparator, thousandSeparator, min, max } = options;
639
1326
  const decimals = Math.max(0, options.decimals);
640
1327
  const negative = raw.trimStart().startsWith("-") && (min === void 0 || min < 0);
641
- const decimalExpression = new RegExp(`[^0-9${allowDecimal ? escapeRegExp(decimalSeparator) : ""}]`, "g");
1328
+ const decimalExpression = new RegExp(
1329
+ "[^0-9" + (allowDecimal ? escapeRegExp(decimalSeparator) : "") + "]",
1330
+ "g"
1331
+ );
642
1332
  const cleaned = raw.replace(decimalExpression, "");
643
1333
  const decimalIndex = allowDecimal ? cleaned.indexOf(decimalSeparator) : -1;
644
1334
  const hasDecimal = decimalIndex >= 0;
@@ -646,64 +1336,320 @@ function normalizeNumberInput(raw, options) {
646
1336
  const rawFraction = hasDecimal ? cleaned.slice(decimalIndex + decimalSeparator.length).replace(new RegExp(escapeRegExp(decimalSeparator), "g"), "") : "";
647
1337
  const integer = rawInteger.replace(/^0+(?=\d)/, "") || (rawInteger ? "0" : "");
648
1338
  const fraction = rawFraction.slice(0, decimals);
649
- if (!integer && !fraction) return { display: negative ? "-" : "", value: null };
650
- const numericValue = Number(`${negative ? "-" : ""}${integer || "0"}${hasDecimal ? `.${fraction || "0"}` : ""}`);
1339
+ if (!integer && !fraction)
1340
+ return { display: negative ? "-" : "", value: null };
1341
+ const numericValue = Number(
1342
+ (negative ? "-" : "") + (integer || "0") + (hasDecimal ? "." + (fraction || "0") : "")
1343
+ );
651
1344
  if (!Number.isFinite(numericValue)) return { display: "", value: null };
652
1345
  const lowerBound = min === void 0 ? numericValue : Math.max(numericValue, min);
653
1346
  const value = max === void 0 ? lowerBound : Math.min(lowerBound, max);
654
- if (value !== numericValue) return { display: formatNumber(value, decimals, thousandSeparator, decimalSeparator), value };
655
- return { display: `${negative ? "-" : ""}${groupInteger(integer || "0", thousandSeparator)}${hasDecimal ? `${decimalSeparator}${fraction}` : ""}`, value };
656
- }
657
- var NumberInput = (0, import_react6.forwardRef)(function NumberInput2({ value, defaultValue = null, onValueChange, allowDecimal = true, decimals = 2, min, max, decimalSeparator = ".", thousandSeparator = ",", label, helperText, error, errorMessage, className, onBlur, onFocus, "aria-describedby": ariaDescribedBy, ...props }, ref) {
658
- const generatedId = (0, import_react6.useId)();
659
- const messageId2 = `${generatedId}-message`;
660
- const isControlled = value !== void 0;
661
- const [internalValue, setInternalValue] = (0, import_react6.useState)(defaultValue);
662
- const [focused, setFocused] = (0, import_react6.useState)(false);
663
- const actualValue = isControlled ? value ?? null : internalValue;
664
- const [text, setText] = (0, import_react6.useState)(actualValue === null ? "" : formatNumber(actualValue, decimals, thousandSeparator, decimalSeparator));
665
- const fieldError = getFieldError(error, errorMessage);
666
- const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
667
- const displayedMessage = hasError ? fieldError : helperText;
668
- const describedBy = getDescribedBy(ariaDescribedBy, displayedMessage ? messageId2 : void 0);
669
- (0, import_react6.useEffect)(() => {
670
- if (!focused) setText(actualValue === null ? "" : formatNumber(actualValue, decimals, thousandSeparator, decimalSeparator));
671
- }, [actualValue, decimalSeparator, decimals, focused, thousandSeparator]);
672
- const updateValue = (nextText) => {
673
- const next = normalizeNumberInput(nextText, { allowDecimal, decimals, decimalSeparator, thousandSeparator, min, max });
674
- setText(next.display);
675
- const nextValue = next.value;
676
- if (!isControlled) setInternalValue(nextValue);
677
- onValueChange?.(nextValue);
1347
+ if (value !== numericValue)
1348
+ return {
1349
+ display: formatNumber(
1350
+ value,
1351
+ decimals,
1352
+ thousandSeparator,
1353
+ decimalSeparator
1354
+ ),
1355
+ value
1356
+ };
1357
+ return {
1358
+ display: (negative ? "-" : "") + groupInteger(integer || "0", thousandSeparator) + (hasDecimal ? decimalSeparator + fraction : ""),
1359
+ value
678
1360
  };
679
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: ["fe-number-input", hasError && "fe-number-input--error", className].filter(Boolean).join(" "), children: [
680
- label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-number-input__label", children: label }),
681
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ref, inputMode: allowDecimal ? "decimal" : "numeric", value: text, onFocus: (event) => {
682
- setFocused(true);
683
- onFocus?.(event);
684
- }, onChange: (event) => updateValue(event.target.value), onBlur: (event) => {
685
- setFocused(false);
686
- onBlur?.(event);
687
- }, ...props, "aria-invalid": hasError || void 0, "aria-describedby": describedBy }),
688
- displayedMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: messageId2, className: hasError ? "fe-number-input__error" : "fe-number-input__helper", children: displayedMessage })
689
- ] });
690
- });
1361
+ }
1362
+ var NumberInput = (0, import_react10.forwardRef)(
1363
+ function NumberInput2({
1364
+ value,
1365
+ defaultValue = null,
1366
+ onValueChange,
1367
+ allowDecimal = true,
1368
+ decimals = 2,
1369
+ min,
1370
+ max,
1371
+ decimalSeparator = ".",
1372
+ thousandSeparator = ",",
1373
+ label,
1374
+ description,
1375
+ descriptionDisplay = "inline",
1376
+ helperText,
1377
+ error,
1378
+ errorMessage,
1379
+ isRequired = false,
1380
+ className,
1381
+ onBlur,
1382
+ onFocus,
1383
+ placeholder,
1384
+ required,
1385
+ endAdornment,
1386
+ prefix,
1387
+ suffix,
1388
+ Prefix,
1389
+ Suffix,
1390
+ step = 1,
1391
+ showStepper = true,
1392
+ incrementLabel = "Increase value",
1393
+ decrementLabel = "Decrease value",
1394
+ "aria-describedby": ariaDescribedBy,
1395
+ "aria-labelledby": ariaLabelledBy,
1396
+ onKeyDown,
1397
+ ...props
1398
+ }, ref) {
1399
+ const inputRef = (0, import_react10.useRef)(null);
1400
+ const generatedId = (0, import_react10.useId)();
1401
+ const messageId2 = generatedId + "-message";
1402
+ const isControlled = value !== void 0;
1403
+ const [internalValue, setInternalValue] = (0, import_react10.useState)(defaultValue);
1404
+ const [focused, setFocused] = (0, import_react10.useState)(false);
1405
+ const actualValue = isControlled ? value ?? null : internalValue;
1406
+ const [text, setText] = (0, import_react10.useState)(
1407
+ actualValue === null ? "" : formatNumber(
1408
+ actualValue,
1409
+ decimals,
1410
+ thousandSeparator,
1411
+ decimalSeparator
1412
+ )
1413
+ );
1414
+ const fieldError = getFieldError(error, errorMessage);
1415
+ const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
1416
+ const labelId = generatedId + "-label";
1417
+ const resolvedDescription = description ?? helperText;
1418
+ const hasMessage = hasError || resolvedDescription && descriptionDisplay === "inline";
1419
+ const describedBy = getDescribedBy(
1420
+ ariaDescribedBy,
1421
+ hasMessage ? messageId2 : void 0
1422
+ );
1423
+ const labelledBy = getDescribedBy(
1424
+ ariaLabelledBy,
1425
+ label ? labelId : void 0
1426
+ );
1427
+ const resolvedPrefix = prefix ?? Prefix;
1428
+ const resolvedSuffix = suffix ?? Suffix;
1429
+ (0, import_react10.useEffect)(() => {
1430
+ if (!focused)
1431
+ setText(
1432
+ actualValue === null ? "" : formatNumber(
1433
+ actualValue,
1434
+ decimals,
1435
+ thousandSeparator,
1436
+ decimalSeparator
1437
+ )
1438
+ );
1439
+ }, [actualValue, decimalSeparator, decimals, focused, thousandSeparator]);
1440
+ const updateValue = (nextText) => {
1441
+ const next = normalizeNumberInput(nextText, {
1442
+ allowDecimal,
1443
+ decimals,
1444
+ decimalSeparator,
1445
+ thousandSeparator,
1446
+ min,
1447
+ max
1448
+ });
1449
+ setText(next.display);
1450
+ if (!isControlled) setInternalValue(next.value);
1451
+ onValueChange?.(next.value);
1452
+ };
1453
+ const setValue = (nextValue) => {
1454
+ const clamped = Math.min(
1455
+ max ?? Number.POSITIVE_INFINITY,
1456
+ Math.max(min ?? Number.NEGATIVE_INFINITY, nextValue)
1457
+ );
1458
+ const normalized = roundToDecimals(
1459
+ clamped,
1460
+ allowDecimal ? decimals : 0
1461
+ );
1462
+ setText(
1463
+ formatNumber(
1464
+ normalized,
1465
+ decimals,
1466
+ thousandSeparator,
1467
+ decimalSeparator
1468
+ )
1469
+ );
1470
+ if (!isControlled) setInternalValue(normalized);
1471
+ onValueChange?.(normalized);
1472
+ };
1473
+ const adjustValue = (direction) => {
1474
+ if (props.disabled || props.readOnly || !Number.isFinite(step) || step <= 0)
1475
+ return;
1476
+ const baseValue = actualValue ?? min ?? 0;
1477
+ setValue(baseValue + direction * step);
1478
+ inputRef.current?.focus();
1479
+ };
1480
+ const stepIsUsable = Number.isFinite(step) && step > 0;
1481
+ const disableIncrement = Boolean(props.disabled || props.readOnly) || !stepIsUsable || max !== void 0 && actualValue !== null && actualValue >= max;
1482
+ const disableDecrement = Boolean(props.disabled || props.readOnly) || !stepIsUsable || min !== void 0 && actualValue !== null && actualValue <= min;
1483
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
1484
+ "div",
1485
+ {
1486
+ className: [
1487
+ "fe-number-input",
1488
+ hasError && "fe-number-input--error",
1489
+ className
1490
+ ].filter(Boolean).join(" "),
1491
+ children: [
1492
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1493
+ FieldLabel,
1494
+ {
1495
+ id: labelId,
1496
+ label,
1497
+ description: resolvedDescription,
1498
+ descriptionDisplay,
1499
+ isRequired
1500
+ }
1501
+ ),
1502
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "fe-number-input__control", children: [
1503
+ resolvedPrefix && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-number-input__prefix", children: resolvedPrefix }),
1504
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "fe-number-input__input-wrap", children: [
1505
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1506
+ "input",
1507
+ {
1508
+ ref: (node) => {
1509
+ inputRef.current = node;
1510
+ if (typeof ref === "function") ref(node);
1511
+ else if (ref) ref.current = node;
1512
+ },
1513
+ inputMode: allowDecimal ? "decimal" : "numeric",
1514
+ value: text,
1515
+ placeholder,
1516
+ required: isRequired || required,
1517
+ onFocus: (event) => {
1518
+ setFocused(true);
1519
+ onFocus?.(event);
1520
+ },
1521
+ onChange: (event) => updateValue(event.target.value),
1522
+ onBlur: (event) => {
1523
+ setFocused(false);
1524
+ onBlur?.(event);
1525
+ },
1526
+ onKeyDown: (event) => {
1527
+ onKeyDown?.(event);
1528
+ if (event.defaultPrevented) return;
1529
+ if (event.key === "ArrowUp" || event.key === "ArrowDown") {
1530
+ event.preventDefault();
1531
+ adjustValue(event.key === "ArrowUp" ? 1 : -1);
1532
+ }
1533
+ },
1534
+ ...props,
1535
+ "aria-invalid": hasError || void 0,
1536
+ "aria-required": isRequired || void 0,
1537
+ "aria-labelledby": labelledBy,
1538
+ "aria-describedby": describedBy
1539
+ }
1540
+ ),
1541
+ isRequired && placeholder && !text && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
1542
+ "span",
1543
+ {
1544
+ className: "fe-number-input__placeholder",
1545
+ "aria-hidden": "true",
1546
+ children: [
1547
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: placeholder }),
1548
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-field__required", children: "*" })
1549
+ ]
1550
+ }
1551
+ )
1552
+ ] }),
1553
+ resolvedSuffix && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-number-input__suffix", children: resolvedSuffix }),
1554
+ endAdornment,
1555
+ showStepper && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "fe-number-input__stepper", children: [
1556
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1557
+ Button,
1558
+ {
1559
+ hierarchy: "tertiary-gray",
1560
+ size: "24",
1561
+ iconOnly: true,
1562
+ icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronUpIcon, { size: 12 }),
1563
+ "aria-label": incrementLabel,
1564
+ disabled: disableIncrement,
1565
+ onMouseDown: (event) => event.preventDefault(),
1566
+ onClick: () => adjustValue(1)
1567
+ }
1568
+ ),
1569
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1570
+ Button,
1571
+ {
1572
+ hierarchy: "tertiary-gray",
1573
+ size: "24",
1574
+ iconOnly: true,
1575
+ icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDownIcon, { size: 12 }),
1576
+ "aria-label": decrementLabel,
1577
+ disabled: disableDecrement,
1578
+ onMouseDown: (event) => event.preventDefault(),
1579
+ onClick: () => adjustValue(-1)
1580
+ }
1581
+ )
1582
+ ] })
1583
+ ] }),
1584
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1585
+ FieldMessage,
1586
+ {
1587
+ id: messageId2,
1588
+ error: fieldError,
1589
+ description: resolvedDescription,
1590
+ descriptionDisplay
1591
+ }
1592
+ )
1593
+ ]
1594
+ }
1595
+ );
1596
+ }
1597
+ );
691
1598
  NumberInput.displayName = "NumberInput";
692
- function CurrencyInput({ suffix = "VND", currencies, currency, defaultCurrency, onCurrencyChange, className, ...props }) {
693
- const [internalCurrency, setInternalCurrency] = (0, import_react6.useState)(defaultCurrency ?? currencies?.[0]?.code ?? "");
1599
+
1600
+ // packages/form-controls/src/controls/CurrencyInput/currency-input.tsx
1601
+ var import_react11 = require("react");
1602
+ var import_jsx_runtime16 = require("react/jsx-runtime");
1603
+ function CurrencyInput({
1604
+ suffix = "VND",
1605
+ currencies,
1606
+ currency,
1607
+ defaultCurrency,
1608
+ onCurrencyChange,
1609
+ className,
1610
+ disabled,
1611
+ ...props
1612
+ }) {
1613
+ const [internalCurrency, setInternalCurrency] = (0, import_react11.useState)(
1614
+ defaultCurrency ?? currencies?.[0]?.code ?? ""
1615
+ );
694
1616
  const selectedCurrency = currency ?? internalCurrency;
695
1617
  const current = currencies?.find((item) => item.code === selectedCurrency);
696
1618
  const currencySuffix = current?.suffix ?? current?.code ?? suffix;
697
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: ["fe-currency-input", className].filter(Boolean).join(" "), children: [
698
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NumberInput, { ...props, className: "fe-currency-input__number" }),
699
- currencies?.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("select", { className: "fe-currency-input__currency", "aria-label": "Currency", value: selectedCurrency, onChange: (event) => {
700
- const next = currencies.find((item) => item.code === event.target.value);
701
- if (!next) return;
702
- if (currency === void 0) setInternalCurrency(next.code);
703
- onCurrencyChange?.(next);
704
- }, children: currencies.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: item.code, children: item.label ?? item.code }, item.code)) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-currency-input__suffix", children: currencySuffix })
705
- ] });
1619
+ const endAdornment = currencies?.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1620
+ Selection,
1621
+ {
1622
+ className: "fe-currency-input__currency",
1623
+ "aria-label": "Currency",
1624
+ options: currencies.map((item) => ({
1625
+ label: item.label ?? item.code,
1626
+ value: item.code
1627
+ })),
1628
+ disabled,
1629
+ value: selectedCurrency,
1630
+ size: "small",
1631
+ onChange: (value) => {
1632
+ const next = currencies.find((item) => item.code === String(value));
1633
+ if (!next) return;
1634
+ if (currency === void 0) setInternalCurrency(next.code);
1635
+ onCurrencyChange?.(next);
1636
+ }
1637
+ }
1638
+ ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fe-currency-input__suffix", children: currencySuffix });
1639
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1640
+ NumberInput,
1641
+ {
1642
+ ...props,
1643
+ disabled,
1644
+ className: ["fe-currency-input", className].filter(Boolean).join(" "),
1645
+ endAdornment
1646
+ }
1647
+ );
706
1648
  }
1649
+
1650
+ // packages/form-controls/src/controls/DateTimePicker/date-time-picker.tsx
1651
+ var import_react12 = require("react");
1652
+ var import_jsx_runtime17 = require("react/jsx-runtime");
707
1653
  var pad = (value) => String(value).padStart(2, "0");
708
1654
  function formatDate(date, format) {
709
1655
  return format.replace(/yyyy/g, String(date.getFullYear())).replace(/MM/g, pad(date.getMonth() + 1)).replace(/dd/g, pad(date.getDate())).replace(/HH/g, pad(date.getHours())).replace(/mm/g, pad(date.getMinutes()));
@@ -721,24 +1667,66 @@ function mergeDateTime(day, time) {
721
1667
  return next;
722
1668
  }
723
1669
  function DateTimePicker(props) {
724
- const { label, format = "dd/MM/yyyy HH:mm", disabled, placeholder, locale = "en-US", className, mode = "single" } = props;
1670
+ const {
1671
+ label,
1672
+ description,
1673
+ descriptionDisplay = "inline",
1674
+ helperText,
1675
+ error,
1676
+ errorMessage,
1677
+ isRequired = false,
1678
+ format = "dd/MM/yyyy HH:mm",
1679
+ disabled,
1680
+ placeholder,
1681
+ locale = "en-US",
1682
+ className,
1683
+ mode = "single",
1684
+ id,
1685
+ "aria-describedby": ariaDescribedBy,
1686
+ "aria-labelledby": ariaLabelledBy
1687
+ } = props;
1688
+ const generatedId = (0, import_react12.useId)();
1689
+ const triggerId = id ?? generatedId + "-trigger";
1690
+ const labelId = generatedId + "-label";
1691
+ const messageId2 = generatedId + "-message";
1692
+ const fieldError = getFieldError(error, errorMessage);
1693
+ const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
1694
+ const resolvedDescription = description ?? helperText;
1695
+ const hasMessage = hasError || resolvedDescription && descriptionDisplay === "inline";
1696
+ const describedBy = getDescribedBy(
1697
+ ariaDescribedBy,
1698
+ hasMessage ? messageId2 : void 0
1699
+ );
1700
+ const labelledBy = getDescribedBy(
1701
+ ariaLabelledBy,
1702
+ label ? labelId : void 0
1703
+ );
725
1704
  const isRange = mode === "range";
726
1705
  const controlled = props.value !== void 0;
727
- const [singleInternal, setSingleInternal] = (0, import_react6.useState)((!isRange ? props.defaultValue : null) ?? null);
728
- const [rangeInternal, setRangeInternal] = (0, import_react6.useState)((isRange ? props.defaultValue : void 0) ?? [null, null]);
1706
+ const [singleInternal, setSingleInternal] = (0, import_react12.useState)(
1707
+ (!isRange ? props.defaultValue : null) ?? null
1708
+ );
1709
+ const [rangeInternal, setRangeInternal] = (0, import_react12.useState)(
1710
+ (isRange ? props.defaultValue : void 0) ?? [null, null]
1711
+ );
729
1712
  const singleValue = !isRange ? props.value ?? singleInternal : null;
730
1713
  const rangeValue = isRange ? props.value ?? rangeInternal : [null, null];
731
- const [open, setOpen] = (0, import_react6.useState)(false);
732
- const [month, setMonth] = (0, import_react6.useState)(() => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date()));
733
- const [editingEnd, setEditingEnd] = (0, import_react6.useState)(false);
734
- const rootRef = (0, import_react6.useRef)(null);
735
- (0, import_react6.useEffect)(() => {
1714
+ const [open, setOpen] = (0, import_react12.useState)(false);
1715
+ const [month, setMonth] = (0, import_react12.useState)(
1716
+ () => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date())
1717
+ );
1718
+ const [editingEnd, setEditingEnd] = (0, import_react12.useState)(false);
1719
+ const rootRef = (0, import_react12.useRef)(null);
1720
+ (0, import_react12.useEffect)(() => {
736
1721
  const onPointerDown = (event) => {
737
1722
  if (!rootRef.current?.contains(event.target)) setOpen(false);
738
1723
  };
739
1724
  document.addEventListener("mousedown", onPointerDown);
740
1725
  return () => document.removeEventListener("mousedown", onPointerDown);
741
1726
  }, []);
1727
+ (0, import_react12.useEffect)(() => {
1728
+ if (disabled) setOpen(false);
1729
+ }, [disabled]);
742
1730
  const setSingle = (next) => {
743
1731
  if (!controlled) setSingleInternal(next);
744
1732
  props.onChange?.(next);
@@ -749,13 +1737,24 @@ function DateTimePicker(props) {
749
1737
  };
750
1738
  const selectDay = (day) => {
751
1739
  if (!isRange) {
752
- setSingle(mergeDateTime(day, singleValue ? `${pad(singleValue.getHours())}:${pad(singleValue.getMinutes())}` : "00:00"));
1740
+ setSingle(
1741
+ mergeDateTime(
1742
+ day,
1743
+ singleValue ? pad(singleValue.getHours()) + ":" + pad(singleValue.getMinutes()) : "00:00"
1744
+ )
1745
+ );
753
1746
  setOpen(false);
754
1747
  return;
755
1748
  }
756
1749
  const [start, end] = rangeValue;
757
1750
  if (!start || end || editingEnd) {
758
- setRange([mergeDateTime(day, start ? `${pad(start.getHours())}:${pad(start.getMinutes())}` : "00:00"), null]);
1751
+ setRange([
1752
+ mergeDateTime(
1753
+ day,
1754
+ start ? pad(start.getHours()) + ":" + pad(start.getMinutes()) : "00:00"
1755
+ ),
1756
+ null
1757
+ ]);
759
1758
  setEditingEnd(false);
760
1759
  return;
761
1760
  }
@@ -763,97 +1762,360 @@ function DateTimePicker(props) {
763
1762
  setRange(nextEnd < start ? [nextEnd, start] : [start, nextEnd]);
764
1763
  setEditingEnd(false);
765
1764
  };
766
- const shownValue = isRange ? [rangeValue[0] && formatDate(rangeValue[0], format), rangeValue[1] && formatDate(rangeValue[1], format)].filter(Boolean).join(" \u2014 ") : singleValue && formatDate(singleValue, format);
1765
+ const shownValue = isRange ? [
1766
+ rangeValue[0] && formatDate(rangeValue[0], format),
1767
+ rangeValue[1] && formatDate(rangeValue[1], format)
1768
+ ].filter(Boolean).join(" \u2014 ") : singleValue && formatDate(singleValue, format);
767
1769
  const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);
768
1770
  const offset = (firstDay.getDay() + 6) % 7;
769
- const days = Array.from({ length: 42 }, (_, index) => new Date(month.getFullYear(), month.getMonth(), index - offset + 1));
1771
+ const days = Array.from(
1772
+ { length: 42 },
1773
+ (_, index) => new Date(month.getFullYear(), month.getMonth(), index - offset + 1)
1774
+ );
770
1775
  const selectedForTime = isRange ? editingEnd ? rangeValue[1] : rangeValue[0] : singleValue;
771
1776
  const setTime = (time) => {
772
1777
  if (!selectedForTime) return;
773
1778
  const next = mergeDateTime(selectedForTime, time);
774
- if (isRange) setRange(editingEnd ? [rangeValue[0], next] : [next, rangeValue[1]]);
1779
+ if (isRange)
1780
+ setRange(editingEnd ? [rangeValue[0], next] : [next, rangeValue[1]]);
775
1781
  else setSingle(next);
776
1782
  };
777
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: rootRef, className: ["fe-datetime-picker", className].filter(Boolean).join(" "), children: [
778
- label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-datetime-picker__label", children: label }),
779
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", className: "fe-datetime-picker__trigger", disabled, "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [
780
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: "\u25F7" }),
781
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: shownValue || placeholder || (isRange ? "Select date range" : "Select date and time") })
782
- ] }),
783
- open && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fe-datetime-picker__popper", role: "dialog", "aria-label": "Date and time picker", children: [
784
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fe-datetime-picker__month", children: [
785
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "aria-label": "Previous month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() - 1, 1)), children: "\u2039" }),
786
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: month.toLocaleDateString(locale, { month: "long", year: "numeric" }) }),
787
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "aria-label": "Next month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() + 1, 1)), children: "\u203A" })
788
- ] }),
789
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: day }, day)) }),
790
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
791
- const inMonth = day.getMonth() === month.getMonth();
792
- const selected = isRange ? sameDay(day, rangeValue[0]) || sameDay(day, rangeValue[1]) : sameDay(day, singleValue);
793
- const inRange = isRange && rangeValue[0] && rangeValue[1] && day > startOfDay(rangeValue[0]) && day < startOfDay(rangeValue[1]);
794
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: [!inMonth && "is-other-month", selected && "is-selected", inRange && "is-in-range"].filter(Boolean).join(" "), onClick: () => selectDay(day), children: day.getDate() }, day.toISOString());
795
- }) }),
796
- isRange && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fe-datetime-picker__range-tabs", children: [
797
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: !editingEnd ? "is-active" : "", onClick: () => setEditingEnd(false), children: "Start" }),
798
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: editingEnd ? "is-active" : "", onClick: () => setEditingEnd(true), children: "End" })
799
- ] }),
800
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "fe-datetime-picker__time", children: [
801
- "Time",
802
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "time", value: selectedForTime ? `${pad(selectedForTime.getHours())}:${pad(selectedForTime.getMinutes())}` : "00:00", onChange: (event) => setTime(event.target.value), disabled: !selectedForTime })
803
- ] })
804
- ] })
805
- ] });
1783
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1784
+ "div",
1785
+ {
1786
+ ref: rootRef,
1787
+ className: [
1788
+ "fe-datetime-picker",
1789
+ hasError && "fe-datetime-picker--error",
1790
+ className
1791
+ ].filter(Boolean).join(" "),
1792
+ children: [
1793
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1794
+ FieldLabel,
1795
+ {
1796
+ id: labelId,
1797
+ label,
1798
+ description: resolvedDescription,
1799
+ descriptionDisplay,
1800
+ isRequired
1801
+ }
1802
+ ),
1803
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1804
+ "button",
1805
+ {
1806
+ id: triggerId,
1807
+ type: "button",
1808
+ className: "fe-datetime-picker__trigger",
1809
+ disabled,
1810
+ "aria-invalid": hasError || void 0,
1811
+ "aria-required": isRequired || void 0,
1812
+ "aria-labelledby": labelledBy,
1813
+ "aria-describedby": describedBy,
1814
+ "aria-expanded": open,
1815
+ onClick: () => setOpen((current) => !current),
1816
+ children: [
1817
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": "true", children: "\u25F7" }),
1818
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1819
+ "span",
1820
+ {
1821
+ className: !shownValue && placeholder ? "fe-datetime-picker__value is-placeholder" : "fe-datetime-picker__value",
1822
+ children: [
1823
+ shownValue || placeholder || (isRange ? "Select date range" : "Select date and time"),
1824
+ isRequired && placeholder && !shownValue && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
1825
+ ]
1826
+ }
1827
+ )
1828
+ ]
1829
+ }
1830
+ ),
1831
+ open && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1832
+ "div",
1833
+ {
1834
+ className: "fe-datetime-picker__popper",
1835
+ role: "dialog",
1836
+ "aria-label": "Date and time picker",
1837
+ children: [
1838
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fe-datetime-picker__month", children: [
1839
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1840
+ "button",
1841
+ {
1842
+ type: "button",
1843
+ "aria-label": "Previous month",
1844
+ onClick: () => setMonth(
1845
+ (current) => new Date(current.getFullYear(), current.getMonth() - 1, 1)
1846
+ ),
1847
+ children: "\u2039"
1848
+ }
1849
+ ),
1850
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: month.toLocaleDateString(locale, {
1851
+ month: "long",
1852
+ year: "numeric"
1853
+ }) }),
1854
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1855
+ "button",
1856
+ {
1857
+ type: "button",
1858
+ "aria-label": "Next month",
1859
+ onClick: () => setMonth(
1860
+ (current) => new Date(current.getFullYear(), current.getMonth() + 1, 1)
1861
+ ),
1862
+ children: "\u203A"
1863
+ }
1864
+ )
1865
+ ] }),
1866
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: day }, day)) }),
1867
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
1868
+ const inMonth = day.getMonth() === month.getMonth();
1869
+ const selected = isRange ? sameDay(day, rangeValue[0]) || sameDay(day, rangeValue[1]) : sameDay(day, singleValue);
1870
+ const inRange = isRange && rangeValue[0] && rangeValue[1] && day > startOfDay(rangeValue[0]) && day < startOfDay(rangeValue[1]);
1871
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1872
+ "button",
1873
+ {
1874
+ type: "button",
1875
+ className: [
1876
+ !inMonth && "is-other-month",
1877
+ selected && "is-selected",
1878
+ inRange && "is-in-range"
1879
+ ].filter(Boolean).join(" "),
1880
+ onClick: () => selectDay(day),
1881
+ children: day.getDate()
1882
+ },
1883
+ day.toISOString()
1884
+ );
1885
+ }) }),
1886
+ isRange && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fe-datetime-picker__range-tabs", children: [
1887
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1888
+ "button",
1889
+ {
1890
+ type: "button",
1891
+ className: !editingEnd ? "is-active" : "",
1892
+ onClick: () => setEditingEnd(false),
1893
+ children: "Start"
1894
+ }
1895
+ ),
1896
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1897
+ "button",
1898
+ {
1899
+ type: "button",
1900
+ className: editingEnd ? "is-active" : "",
1901
+ onClick: () => setEditingEnd(true),
1902
+ children: "End"
1903
+ }
1904
+ )
1905
+ ] }),
1906
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "fe-datetime-picker__time", children: [
1907
+ "Time",
1908
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1909
+ "input",
1910
+ {
1911
+ type: "time",
1912
+ value: selectedForTime ? pad(selectedForTime.getHours()) + ":" + pad(selectedForTime.getMinutes()) : "00:00",
1913
+ onChange: (event) => setTime(event.target.value),
1914
+ disabled: !selectedForTime
1915
+ }
1916
+ )
1917
+ ] })
1918
+ ]
1919
+ }
1920
+ ),
1921
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1922
+ FieldMessage,
1923
+ {
1924
+ id: messageId2,
1925
+ error: fieldError,
1926
+ description: resolvedDescription,
1927
+ descriptionDisplay
1928
+ }
1929
+ )
1930
+ ]
1931
+ }
1932
+ );
806
1933
  }
807
1934
 
808
- // packages/tooltip/src/index.tsx
809
- var import_react7 = require("react");
810
- var import_jsx_runtime8 = require("react/jsx-runtime");
811
- function Tooltip({ content, children, placement = "top", disabled, className, ...props }) {
812
- const [visible, setVisible] = (0, import_react7.useState)(false);
813
- const id = (0, import_react7.useId)();
814
- const trigger = (0, import_react7.cloneElement)(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
815
- children.props.onMouseEnter?.(event);
816
- setVisible(true);
817
- }, onMouseLeave: (event) => {
818
- children.props.onMouseLeave?.(event);
819
- setVisible(false);
820
- }, onFocus: (event) => {
821
- children.props.onFocus?.(event);
822
- setVisible(true);
823
- }, onBlur: (event) => {
824
- children.props.onBlur?.(event);
825
- setVisible(false);
826
- } });
827
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
828
- trigger,
829
- visible && !disabled && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
830
- ] });
831
- }
1935
+ // packages/form-controls/src/controls/Checkbox/checkbox.tsx
1936
+ var import_react13 = require("react");
1937
+ var import_jsx_runtime18 = require("react/jsx-runtime");
1938
+ var Checkbox = (0, import_react13.forwardRef)(
1939
+ function Checkbox2({
1940
+ label,
1941
+ labelPosition = "right",
1942
+ className,
1943
+ style,
1944
+ id,
1945
+ disabled,
1946
+ ...props
1947
+ }, ref) {
1948
+ const classes = [
1949
+ "fe-checkbox",
1950
+ `fe-checkbox--label-${labelPosition}`,
1951
+ disabled && "fe-checkbox--disabled",
1952
+ className
1953
+ ].filter(Boolean).join(" ");
1954
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: classes, style, children: [
1955
+ label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fe-checkbox__label", children: label }),
1956
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "fe-checkbox__content", children: [
1957
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1958
+ "input",
1959
+ {
1960
+ ref,
1961
+ id,
1962
+ className: "fe-checkbox__input",
1963
+ type: "checkbox",
1964
+ disabled,
1965
+ ...props
1966
+ }
1967
+ ),
1968
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fe-checkbox__control", "aria-hidden": "true" }),
1969
+ label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fe-checkbox__label", children: label })
1970
+ ] })
1971
+ ] });
1972
+ }
1973
+ );
1974
+ Checkbox.displayName = "Checkbox";
1975
+
1976
+ // packages/form-controls/src/controls/RadioButton/radio-button.tsx
1977
+ var import_react14 = require("react");
1978
+ var import_jsx_runtime19 = require("react/jsx-runtime");
1979
+ var RadioButton = (0, import_react14.forwardRef)(
1980
+ function RadioButton2({
1981
+ label,
1982
+ labelPosition = "right",
1983
+ className,
1984
+ style,
1985
+ id,
1986
+ disabled,
1987
+ ...props
1988
+ }, ref) {
1989
+ const classes = [
1990
+ "fe-radio-button",
1991
+ `fe-radio-button--label-${labelPosition}`,
1992
+ disabled && "fe-radio-button--disabled",
1993
+ className
1994
+ ].filter(Boolean).join(" ");
1995
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: classes, style, children: [
1996
+ label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-radio-button__label", children: label }),
1997
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "fe-radio-button__content", children: [
1998
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1999
+ "input",
2000
+ {
2001
+ ref,
2002
+ id,
2003
+ className: "fe-radio-button__input",
2004
+ type: "radio",
2005
+ disabled,
2006
+ ...props
2007
+ }
2008
+ ),
2009
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-radio-button__control", "aria-hidden": "true" }),
2010
+ label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-radio-button__label", children: label })
2011
+ ] })
2012
+ ] });
2013
+ }
2014
+ );
2015
+ RadioButton.displayName = "RadioButton";
2016
+
2017
+ // packages/form-controls/src/controls/RadioGroup/radio-group.tsx
2018
+ var import_react15 = require("react");
2019
+ var import_jsx_runtime20 = require("react/jsx-runtime");
2020
+ var RadioGroup = (0, import_react15.forwardRef)(
2021
+ function RadioGroup2({
2022
+ label,
2023
+ labelPosition = "top",
2024
+ options,
2025
+ name,
2026
+ value,
2027
+ defaultValue,
2028
+ onChange,
2029
+ disabled = false,
2030
+ direction = "vertical",
2031
+ isRequired = false,
2032
+ className,
2033
+ id,
2034
+ "aria-label": ariaLabel,
2035
+ "aria-labelledby": ariaLabelledBy,
2036
+ ...props
2037
+ }, ref) {
2038
+ const generatedId = (0, import_react15.useId)();
2039
+ const groupName = name ?? `fe-radio-group-${generatedId}`;
2040
+ const labelId = `${id ?? generatedId}-label`;
2041
+ const isControlled = value !== void 0;
2042
+ const classes = [
2043
+ "fe-radio-group",
2044
+ `fe-radio-group--label-${labelPosition}`,
2045
+ `fe-radio-group--${direction}`,
2046
+ disabled && "fe-radio-group--disabled",
2047
+ className
2048
+ ].filter(Boolean).join(" ");
2049
+ const handleChange = (option, event) => {
2050
+ if (event.target.checked) onChange?.(option.value, option, event);
2051
+ };
2052
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref, className: classes, ...props, children: [
2053
+ label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { id: labelId, className: "fe-radio-group__label", children: [
2054
+ label,
2055
+ isRequired && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
2056
+ ] }),
2057
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
2058
+ "div",
2059
+ {
2060
+ id,
2061
+ className: "fe-radio-group__options",
2062
+ role: "radiogroup",
2063
+ "aria-label": label ? void 0 : ariaLabel,
2064
+ "aria-labelledby": label ? labelId : ariaLabelledBy,
2065
+ "aria-required": isRequired || void 0,
2066
+ children: options.map((option) => {
2067
+ const optionDisabled = disabled || option.disabled;
2068
+ const optionValue = String(option.value);
2069
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
2070
+ RadioButton,
2071
+ {
2072
+ name: groupName,
2073
+ value: optionValue,
2074
+ label: option.label,
2075
+ disabled: optionDisabled,
2076
+ required: isRequired,
2077
+ checked: isControlled ? option.value === value : void 0,
2078
+ defaultChecked: !isControlled ? option.value === defaultValue : void 0,
2079
+ onChange: (event) => handleChange(option, event)
2080
+ },
2081
+ optionValue
2082
+ );
2083
+ })
2084
+ }
2085
+ ),
2086
+ label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { id: labelId, className: "fe-radio-group__label", children: [
2087
+ label,
2088
+ isRequired && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
2089
+ ] })
2090
+ ] });
2091
+ }
2092
+ );
2093
+ RadioGroup.displayName = "RadioGroup";
832
2094
 
833
2095
  // packages/expandable-section/src/index.tsx
834
- var import_react8 = require("react");
835
- var import_jsx_runtime9 = require("react/jsx-runtime");
2096
+ var import_react16 = require("react");
2097
+ var import_jsx_runtime21 = require("react/jsx-runtime");
836
2098
  function ExpandableSection({ title, children, expanded, defaultExpanded = false, onExpandedChange, disabled, className, ...props }) {
837
- const [internalExpanded, setInternalExpanded] = (0, import_react8.useState)(defaultExpanded);
2099
+ const [internalExpanded, setInternalExpanded] = (0, import_react16.useState)(defaultExpanded);
838
2100
  const isExpanded = expanded ?? internalExpanded;
839
- const id = (0, import_react8.useId)();
2101
+ const id = (0, import_react16.useId)();
840
2102
  const toggle = () => {
841
2103
  if (disabled) return;
842
2104
  const next = !isExpanded;
843
2105
  if (expanded === void 0) setInternalExpanded(next);
844
2106
  onExpandedChange?.(next);
845
2107
  };
846
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
847
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
848
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: title }),
849
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
2108
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
2109
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
2110
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: title }),
2111
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
850
2112
  ] }),
851
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fe-expandable-section__content-inner", children }) })
2113
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fe-expandable-section__content-inner", children }) })
852
2114
  ] });
853
2115
  }
854
2116
 
855
2117
  // packages/loading/src/index.tsx
856
- var import_jsx_runtime10 = require("react/jsx-runtime");
2118
+ var import_jsx_runtime22 = require("react/jsx-runtime");
857
2119
  var sizes = {
858
2120
  small: "16px",
859
2121
  medium: "24px",
@@ -866,15 +2128,15 @@ function Loading({ size = "medium", color = "#2878f0", label, className, style,
866
2128
  "--fe-loading-color": color,
867
2129
  ...style
868
2130
  };
869
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
870
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
871
- label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fe-loading__label", children: label }),
872
- !label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fe-loading__sr-only", children: "Loading" })
2131
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
2132
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
2133
+ label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-loading__label", children: label }),
2134
+ !label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-loading__sr-only", children: "Loading" })
873
2135
  ] });
874
2136
  }
875
2137
 
876
2138
  // packages/skeleton/src/index.tsx
877
- var import_jsx_runtime11 = require("react/jsx-runtime");
2139
+ var import_jsx_runtime23 = require("react/jsx-runtime");
878
2140
  var pixels = (value) => typeof value === "number" ? `${value}px` : value;
879
2141
  function SkeletonBase({ variant = "box", shape, width, height, count = 1, animated = true, className, style, ...props }) {
880
2142
  const resolvedVariant = shape ?? variant;
@@ -885,7 +2147,7 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
885
2147
  "--fe-skeleton-height": resolvedHeight,
886
2148
  ...style
887
2149
  };
888
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2150
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
889
2151
  "div",
890
2152
  {
891
2153
  className: ["fe-skeleton", `fe-skeleton--${resolvedVariant}`, animated && "fe-skeleton--animated", className].filter(Boolean).join(" "),
@@ -897,16 +2159,16 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
897
2159
  )) });
898
2160
  }
899
2161
  function SkeletonCircle({ size = 40, ...props }) {
900
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
2162
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
901
2163
  }
902
2164
  function SkeletonSquare({ size = 80, ...props }) {
903
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBase, { variant: "box", width: size, height: size, ...props });
2165
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SkeletonBase, { variant: "box", width: size, height: size, ...props });
904
2166
  }
905
2167
  function SkeletonBox({ width = "100%", height = 80, ...props }) {
906
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBase, { variant: "box", width, height, ...props });
2168
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SkeletonBase, { variant: "box", width, height, ...props });
907
2169
  }
908
2170
  function SkeletonLine({ width = "100%", height = 12, ...props }) {
909
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBase, { variant: "line", width, height, ...props });
2171
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SkeletonBase, { variant: "line", width, height, ...props });
910
2172
  }
911
2173
  var Skeleton = Object.assign(SkeletonBase, {
912
2174
  Circle: SkeletonCircle,
@@ -916,9 +2178,9 @@ var Skeleton = Object.assign(SkeletonBase, {
916
2178
  });
917
2179
 
918
2180
  // packages/modal/src/index.tsx
919
- var import_react9 = require("react");
2181
+ var import_react17 = require("react");
920
2182
  var import_react_dom3 = require("react-dom");
921
- var import_jsx_runtime12 = require("react/jsx-runtime");
2183
+ var import_jsx_runtime24 = require("react/jsx-runtime");
922
2184
  function Modal({
923
2185
  open,
924
2186
  onClose,
@@ -934,9 +2196,9 @@ function Modal({
934
2196
  className,
935
2197
  ...props
936
2198
  }) {
937
- const titleId = (0, import_react9.useId)();
938
- const panelRef = (0, import_react9.useRef)(null);
939
- (0, import_react9.useEffect)(() => {
2199
+ const titleId = (0, import_react17.useId)();
2200
+ const panelRef = (0, import_react17.useRef)(null);
2201
+ (0, import_react17.useEffect)(() => {
940
2202
  if (!open) return;
941
2203
  const onKeyDown = (event) => {
942
2204
  if (event.key === "Escape") onClose();
@@ -948,9 +2210,9 @@ function Modal({
948
2210
  if (!open || typeof document === "undefined") return null;
949
2211
  const hasFooter = footer || actions.length > 0;
950
2212
  return (0, import_react_dom3.createPortal)(
951
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
2213
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
952
2214
  if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
953
- }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
2215
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
954
2216
  "div",
955
2217
  {
956
2218
  ref: panelRef,
@@ -962,17 +2224,17 @@ function Modal({
962
2224
  tabIndex: -1,
963
2225
  ...props,
964
2226
  children: [
965
- (title || description || closeButton) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: "fe-modal__header", children: [
966
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "fe-modal__heading", children: [
967
- title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { id: titleId, children: title }),
968
- description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: description })
2227
+ (title || description || closeButton) && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("header", { className: "fe-modal__header", children: [
2228
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "fe-modal__heading", children: [
2229
+ title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { id: titleId, children: title }),
2230
+ description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: description })
969
2231
  ] }),
970
- closeButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
2232
+ closeButton && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
971
2233
  ] }),
972
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fe-modal__body", children }),
973
- hasFooter && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("footer", { className: "fe-modal__footer", children: [
974
- footer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fe-modal__footer-content", children: footer }),
975
- actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { ...action, children: label }, index)) })
2234
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fe-modal__body", children }),
2235
+ hasFooter && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("footer", { className: "fe-modal__footer", children: [
2236
+ footer && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fe-modal__footer-content", children: footer }),
2237
+ actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { ...action, children: label }, index)) })
976
2238
  ] })
977
2239
  ]
978
2240
  }
@@ -982,7 +2244,7 @@ function Modal({
982
2244
  }
983
2245
 
984
2246
  // packages/progress/src/index.tsx
985
- var import_jsx_runtime13 = require("react/jsx-runtime");
2247
+ var import_jsx_runtime25 = require("react/jsx-runtime");
986
2248
  function ProgressBar({ value, max = 100, label, showValue = true, size = "medium", color = "#2878f0", className, style, "aria-label": ariaLabel, ...props }) {
987
2249
  const indeterminate = value === null || value === void 0;
988
2250
  const percentage = indeterminate ? 0 : Math.min(100, Math.max(0, Number(value) / Math.max(1, max) * 100));
@@ -992,17 +2254,17 @@ function ProgressBar({ value, max = 100, label, showValue = true, size = "medium
992
2254
  ...style
993
2255
  };
994
2256
  const visibleValue = `${Math.round(percentage)}%`;
995
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
996
- (label || !indeterminate && showValue) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "fe-progress__meta", children: [
997
- label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fe-progress__label", children: label }),
998
- !indeterminate && showValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("output", { className: "fe-progress__value", children: visibleValue })
2257
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
2258
+ (label || !indeterminate && showValue) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fe-progress__meta", children: [
2259
+ label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fe-progress__label", children: label }),
2260
+ !indeterminate && showValue && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("output", { className: "fe-progress__value", children: visibleValue })
999
2261
  ] }),
1000
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fe-progress__track", role: "progressbar", "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Progress"), "aria-valuemin": indeterminate ? void 0 : 0, "aria-valuemax": indeterminate ? void 0 : max, "aria-valuenow": indeterminate ? void 0 : Number(value), "aria-valuetext": indeterminate ? "Loading" : visibleValue, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fe-progress__indicator" }) })
2262
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fe-progress__track", role: "progressbar", "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Progress"), "aria-valuemin": indeterminate ? void 0 : 0, "aria-valuemax": indeterminate ? void 0 : max, "aria-valuenow": indeterminate ? void 0 : Number(value), "aria-valuetext": indeterminate ? "Loading" : visibleValue, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fe-progress__indicator" }) })
1001
2263
  ] });
1002
2264
  }
1003
2265
 
1004
2266
  // packages/chip/src/index.tsx
1005
- var import_jsx_runtime14 = require("react/jsx-runtime");
2267
+ var import_jsx_runtime26 = require("react/jsx-runtime");
1006
2268
  var statuses = ["default", "info", "success", "warning", "error", "neutral", "pending", "processing"];
1007
2269
  function Chip({ children, status = "default", color, variant = "subtle", dot = false, onRemove, removeLabel = "Remove", className, style, ...props }) {
1008
2270
  const usesCustomColor = Boolean(color);
@@ -1011,16 +2273,16 @@ function Chip({ children, status = "default", color, variant = "subtle", dot = f
1011
2273
  ...style
1012
2274
  };
1013
2275
  const resolvedStatus = statuses.includes(status) ? status : "default";
1014
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
1015
- dot && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
1016
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-chip__content", children }),
1017
- onRemove && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
2276
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
2277
+ dot && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
2278
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fe-chip__content", children }),
2279
+ onRemove && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
1018
2280
  ] });
1019
2281
  }
1020
2282
 
1021
2283
  // packages/message/src/index.tsx
1022
- var import_react10 = require("react");
1023
- var import_jsx_runtime15 = require("react/jsx-runtime");
2284
+ var import_react18 = require("react");
2285
+ var import_jsx_runtime27 = require("react/jsx-runtime");
1024
2286
  var messageId = 0;
1025
2287
  var entries = [];
1026
2288
  var listeners = /* @__PURE__ */ new Set();
@@ -1053,22 +2315,22 @@ var message = {
1053
2315
  };
1054
2316
  var icons = { success: "\u2713", info: "i", warning: "!", error: "\xD7" };
1055
2317
  function Message({ maxCount = 4, closeLabel = "Close notification", className, ...props }) {
1056
- const [visibleEntries, setVisibleEntries] = (0, import_react10.useState)(entries);
1057
- (0, import_react10.useEffect)(() => {
2318
+ const [visibleEntries, setVisibleEntries] = (0, import_react18.useState)(entries);
2319
+ (0, import_react18.useEffect)(() => {
1058
2320
  const listener = (nextEntries) => setVisibleEntries(nextEntries);
1059
2321
  listeners.add(listener);
1060
2322
  return () => {
1061
2323
  listeners.delete(listener);
1062
2324
  };
1063
2325
  }, []);
1064
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
1065
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
1066
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "fe-message__body", children: [
1067
- entry.title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { className: "fe-message__title", children: entry.title }),
1068
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "fe-message__content", children: entry.content })
2326
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
2327
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
2328
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "fe-message__body", children: [
2329
+ entry.title && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("strong", { className: "fe-message__title", children: entry.title }),
2330
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fe-message__content", children: entry.content })
1069
2331
  ] }),
1070
- entry.action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-message__action", children: entry.action }),
1071
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
2332
+ entry.action && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fe-message__action", children: entry.action }),
2333
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
1072
2334
  ] }, entry.id)) });
1073
2335
  }
1074
2336
  ((Message2) => {
@@ -1082,8 +2344,8 @@ function Message({ maxCount = 4, closeLabel = "Close notification", className, .
1082
2344
  })(Message || (Message = {}));
1083
2345
 
1084
2346
  // packages/snackbar/src/index.tsx
1085
- var import_react11 = require("react");
1086
- var import_jsx_runtime16 = require("react/jsx-runtime");
2347
+ var import_react19 = require("react");
2348
+ var import_jsx_runtime28 = require("react/jsx-runtime");
1087
2349
  function Snackbar({
1088
2350
  open,
1089
2351
  message: message2,
@@ -1097,12 +2359,12 @@ function Snackbar({
1097
2359
  }) {
1098
2360
  const vertical = anchorOrigin.vertical ?? "bottom";
1099
2361
  const horizontal = anchorOrigin.horizontal ?? "center";
1100
- (0, import_react11.useEffect)(() => {
2362
+ (0, import_react19.useEffect)(() => {
1101
2363
  if (!open || autoHideDuration === null) return void 0;
1102
2364
  const timer = window.setTimeout(() => onClose?.("timeout"), autoHideDuration);
1103
2365
  return () => window.clearTimeout(timer);
1104
2366
  }, [open, autoHideDuration, onClose]);
1105
- (0, import_react11.useEffect)(() => {
2367
+ (0, import_react19.useEffect)(() => {
1106
2368
  if (!open) return void 0;
1107
2369
  const onKeyDown = (event) => {
1108
2370
  if (event.key === "Escape") onClose?.("escapeKeyDown");
@@ -1111,16 +2373,18 @@ function Snackbar({
1111
2373
  return () => window.removeEventListener("keydown", onKeyDown);
1112
2374
  }, [open, onClose]);
1113
2375
  if (!open) return null;
1114
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
1115
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fe-snackbar__message", children: message2 }),
1116
- action && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fe-snackbar__action", children: action }),
1117
- onClose && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
2376
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
2377
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fe-snackbar__message", children: message2 }),
2378
+ action && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fe-snackbar__action", children: action }),
2379
+ onClose && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
1118
2380
  ] }) });
1119
2381
  }
1120
2382
  // Annotate the CommonJS export names for ESM import in node:
1121
2383
  0 && (module.exports = {
1122
2384
  Button,
2385
+ Checkbox,
1123
2386
  ChevronDownIcon,
2387
+ ChevronUpIcon,
1124
2388
  Chip,
1125
2389
  CloseIcon,
1126
2390
  CurrencyInput,
@@ -1134,6 +2398,8 @@ function Snackbar({
1134
2398
  Pagination,
1135
2399
  PlusIcon,
1136
2400
  ProgressBar,
2401
+ RadioButton,
2402
+ RadioGroup,
1137
2403
  SearchIcon,
1138
2404
  Selection,
1139
2405
  Skeleton,
@@ -1153,7 +2419,24 @@ function Snackbar({
1153
2419
  TextInput,
1154
2420
  Toggle,
1155
2421
  Tooltip,
2422
+ arrow_left,
2423
+ check_square_fill,
2424
+ chevron_down,
2425
+ chevron_left,
2426
+ chevron_right,
2427
+ chevron_up,
2428
+ copy,
1156
2429
  formatNumber,
1157
2430
  getIconSize,
1158
- message
2431
+ key,
2432
+ lock,
2433
+ lock_unlocked,
2434
+ log_out,
2435
+ message,
2436
+ minus_square,
2437
+ plus,
2438
+ plus_square,
2439
+ search,
2440
+ trash,
2441
+ x_close
1159
2442
  });