@medusajs/ui 1.0.0 → 2.1.0

package/dist/cjs/components/command-bar/command-bar.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+type CommandBarProps = React.PropsWithChildren<{
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    disableAutoFocus?: boolean;
+}>;
+interface CommandProps extends Omit<React.ComponentPropsWithoutRef<"button">, "children" | "onClick"> {
+    action: () => void | Promise<void>;
+    label: string;
+    shortcut: string;
+}
+declare const CommandBar: {
+    ({ open, onOpenChange, defaultOpen, disableAutoFocus, children, }: CommandBarProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLButtonElement>>;
+    Value: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Bar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Seperator: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { CommandBar };

package/dist/cjs/components/command-bar/command-bar.js

@@ -0,0 +1,63 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandBar = void 0;
+const tslib_1 = require("tslib");
+const Popover = tslib_1.__importStar(require("@radix-ui/react-popover"));
+const Portal = tslib_1.__importStar(require("@radix-ui/react-portal"));
+const React = tslib_1.__importStar(require("react"));
+const kbd_1 = require("../kbd");
+const clx_1 = require("../../utils/clx");
+const Root = ({ open = false, onOpenChange, defaultOpen = false, disableAutoFocus = true, children, }) => {
+    return (React.createElement(Popover.Root, { open: open, onOpenChange: onOpenChange, defaultOpen: defaultOpen },
+        React.createElement(Portal.Root, null,
+            React.createElement(Popover.Anchor, { className: (0, clx_1.clx)("fixed bottom-8 left-1/2 h-px w-px -translate-x-1/2") })),
+        React.createElement(Popover.Portal, null,
+            React.createElement(Popover.Content, { side: "top", sideOffset: 0, onOpenAutoFocus: (e) => {
+                    if (disableAutoFocus) {
+                        e.preventDefault();
+                    }
+                }, className: (0, clx_1.clx)("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2") }, children))));
+};
+Root.displayName = "CommandBar";
+const Value = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, className: (0, clx_1.clx)("txt-compact-small-plus text-ui-contrast-fg-secondary px-3 py-2.5", className), ...props }));
+});
+Value.displayName = "CommandBar.Value";
+const Bar = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, className: (0, clx_1.clx)("bg-ui-contrast-bg-base relative flex items-center overflow-hidden rounded-full px-1", "after:shadow-elevation-flyout after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:content-['']", className), ...props }));
+});
+Bar.displayName = "CommandBar.Bar";
+const Seperator = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, className: (0, clx_1.clx)("bg-ui-contrast-border-base h-10 w-px", className), ...props }));
+});
+Seperator.displayName = "CommandBar.Seperator";
+const Command = React.forwardRef(({ className, type = "button", label, action, shortcut, disabled, ...props }, ref) => {
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === shortcut) {
+                event.preventDefault();
+                event.stopPropagation();
+                action();
+            }
+        };
+        if (!disabled) {
+            document.addEventListener("keydown", handleKeyDown);
+        }
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [action, shortcut, disabled]);
+    return (React.createElement("button", { ref: ref, className: (0, clx_1.clx)("bg-ui-contrast-bg-base txt-compact-small-plus transition-fg text-ui-contrast-fg-primary flex items-center gap-x-2 px-3 py-2.5 outline-none", "focus:bg-ui-contrast-bg-highlight focus:hover:bg-ui-contrast-bg-base-hover hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus:active:bg-ui-contrast-bg-base-pressed disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled", "last-of-type:-mr-1 last-of-type:pr-4", className), type: type, onClick: action, ...props },
+        React.createElement("span", null, label),
+        React.createElement(kbd_1.Kbd, { className: "bg-ui-contrast-bg-subtle border-ui-contrast-border-base text-ui-contrast-fg-secondary" }, shortcut.toUpperCase())));
+});
+Command.displayName = "CommandBar.Command";
+const CommandBar = Object.assign(Root, {
+    Command,
+    Value,
+    Bar,
+    Seperator,
+});
+exports.CommandBar = CommandBar;
+//# sourceMappingURL=command-bar.js.map

package/dist/cjs/components/command-bar/command-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-bar.js","sourceRoot":"","sources":["../../../../src/components/command-bar/command-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport * as Popover from \"@radix-ui/react-popover\"\nimport * as Portal from \"@radix-ui/react-portal\"\nimport * as React from \"react\"\n\nimport { Kbd } from \"@/components/kbd\"\nimport { clx } from \"@/utils/clx\"\n\ntype CommandBarProps = React.PropsWithChildren<{\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  defaultOpen?: boolean\n  disableAutoFocus?: boolean\n}>\n\nconst Root = ({\n  open = false,\n  onOpenChange,\n  defaultOpen = false,\n  disableAutoFocus = true,\n  children,\n}: CommandBarProps) => {\n  return (\n    <Popover.Root\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={defaultOpen}\n    >\n      <Portal.Root>\n        <Popover.Anchor\n          className={clx(\"fixed bottom-8 left-1/2 h-px w-px -translate-x-1/2\")}\n        />\n      </Portal.Root>\n      <Popover.Portal>\n        <Popover.Content\n          side=\"top\"\n          sideOffset={0}\n          onOpenAutoFocus={(e) => {\n            if (disableAutoFocus) {\n              e.preventDefault()\n            }\n          }}\n          className={clx(\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          )}\n        >\n          {children}\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\nRoot.displayName = \"CommandBar\"\n\nconst Value = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={clx(\n        \"txt-compact-small-plus text-ui-contrast-fg-secondary px-3 py-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nValue.displayName = \"CommandBar.Value\"\n\nconst Bar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={clx(\n        \"bg-ui-contrast-bg-base relative flex items-center overflow-hidden rounded-full px-1\",\n        \"after:shadow-elevation-flyout after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:content-['']\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nBar.displayName = \"CommandBar.Bar\"\n\nconst Seperator = React.forwardRef<\n  HTMLDivElement,\n  Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={clx(\"bg-ui-contrast-border-base h-10 w-px\", className)}\n      {...props}\n    />\n  )\n})\nSeperator.displayName = \"CommandBar.Seperator\"\n\ninterface CommandProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<\"button\">,\n    \"children\" | \"onClick\"\n  > {\n  action: () => void | Promise<void>\n  label: string\n  shortcut: string\n}\n\nconst Command = React.forwardRef<HTMLButtonElement, CommandProps>(\n  (\n    { className, type = \"button\", label, action, shortcut, disabled, ...props },\n    ref\n  ) => {\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === shortcut) {\n          event.preventDefault()\n          event.stopPropagation()\n          action()\n        }\n      }\n\n      if (!disabled) {\n        document.addEventListener(\"keydown\", handleKeyDown)\n      }\n\n      return () => {\n        document.removeEventListener(\"keydown\", handleKeyDown)\n      }\n    }, [action, shortcut, disabled])\n\n    return (\n      <button\n        ref={ref}\n        className={clx(\n          \"bg-ui-contrast-bg-base txt-compact-small-plus transition-fg text-ui-contrast-fg-primary flex items-center gap-x-2 px-3 py-2.5 outline-none\",\n          \"focus:bg-ui-contrast-bg-highlight focus:hover:bg-ui-contrast-bg-base-hover hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus:active:bg-ui-contrast-bg-base-pressed disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled\",\n          \"last-of-type:-mr-1 last-of-type:pr-4\",\n          className\n        )}\n        type={type}\n        onClick={action}\n        {...props}\n      >\n        <span>{label}</span>\n        <Kbd className=\"bg-ui-contrast-bg-subtle border-ui-contrast-border-base text-ui-contrast-fg-secondary\">\n          {shortcut.toUpperCase()}\n        </Kbd>\n      </button>\n    )\n  }\n)\nCommand.displayName = \"CommandBar.Command\"\n\nconst CommandBar = Object.assign(Root, {\n  Command,\n  Value,\n  Bar,\n  Seperator,\n})\n\nexport { CommandBar }\n"]}

package/dist/cjs/components/command-bar/index.d.ts

@@ -0,0 +1 @@
+export * from "./command-bar";

package/dist/cjs/components/command-bar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./command-bar"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/command-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/command-bar/index.ts"],"names":[],"mappings":";;;AAAA,wDAA6B","sourcesContent":["export * from \"./command-bar\"\n"]}

package/dist/cjs/components/container/container.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const Container: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Container: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Container };

package/dist/cjs/components/container/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/components/container/container.tsx"],"names":[],"mappings":";;;;AAAA,qDAA8B;AAE9B,qCAAiC;AAEjC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EACZ,2EAA2E,EAC3E,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAGO,8BAAS;AAFlB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA","sourcesContent":["import * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst Container = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={clx(\n        \"shadow-elevation-card-rest bg-ui-bg-base w-full rounded-lg px-8 pb-8 pt-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nContainer.displayName = \"Container\"\n\nexport { Container }\n"]}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/components/container/container.tsx"],"names":[],"mappings":";;;;AAAA,qDAA8B;AAE9B,qCAAiC;AAEjC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EACZ,2EAA2E,EAC3E,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAGO,8BAAS;AAFlB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA","sourcesContent":["import * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst Container = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={clx(\n        \"shadow-elevation-card-rest bg-ui-bg-base w-full rounded-lg px-8 pb-8 pt-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nContainer.displayName = \"Container\"\n\nexport { Container }\n"]}

package/dist/cjs/components/currency-input/currency-input.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import Primitive from "react-currency-input-field";
+import { VariantProps } from "class-variance-authority";
+declare const currencyInputVariants: (props?: ({
+    size?: "base" | "small" | null | undefined;
+} & ({
+    class: import("clsx").ClassValue;
+    className?: undefined;
+} | {
+    class?: undefined;
+    className: import("clsx").ClassValue;
+} | {
+    class?: undefined;
+    className?: undefined;
+})) | undefined) => string;
+interface CurrencyInputProps extends Omit<React.ComponentPropsWithoutRef<typeof Primitive>, "prefix" | "suffix" | "size">, VariantProps<typeof currencyInputVariants> {
+    symbol: string;
+    code: string;
+}
+declare const CurrencyInput: React.ForwardRefExoticComponent<CurrencyInputProps & React.RefAttributes<HTMLInputElement>>;
+export { CurrencyInput };

package/dist/cjs/components/currency-input/currency-input.js

@@ -0,0 +1,58 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrencyInput = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_currency_input_field_1 = tslib_1.__importDefault(require("react-currency-input-field"));
+const text_1 = require("../text");
+const clx_1 = require("../../utils/clx");
+const class_variance_authority_1 = require("class-variance-authority");
+const currencyInputVariants = (0, class_variance_authority_1.cva)((0, clx_1.clx)("flex items-center gap-x-1", "bg-ui-bg-field hover:bg-ui-bg-field-hover shadow-buttons-neutral placeholder-ui-fg-muted text-ui-fg-base transition-fg relative w-full rounded-md", "focus-within:shadow-borders-interactive-with-active"), {
+    variants: {
+        size: {
+            base: "txt-compact-medium h-10 px-3",
+            small: "txt-compact-small h-8 px-2",
+        },
+    },
+    defaultVariants: {
+        size: "base",
+    },
+});
+const CurrencyInput = React.forwardRef(({ size = "base", symbol, code, disabled, onInvalid, className, ...props }, ref) => {
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    const [valid, setValid] = React.useState(true);
+    const onInnerInvalid = React.useCallback((event) => {
+        setValid(event.currentTarget.validity.valid);
+        if (onInvalid) {
+            onInvalid(event);
+        }
+    }, [onInvalid]);
+    return (React.createElement("div", { onClick: () => {
+            if (innerRef.current) {
+                innerRef.current.focus();
+            }
+        }, className: (0, clx_1.clx)("w-full cursor-text justify-between overflow-hidden", currencyInputVariants({ size }), {
+            "text-ui-fg-disabled !bg-ui-bg-disabled !shadow-buttons-neutral !placeholder-ui-fg-disabled cursor-not-allowed": disabled,
+            "!shadow-borders-error invalid:!shadow-borders-error": props["aria-invalid"] || !valid,
+        }, className) },
+        React.createElement("span", { className: (0, clx_1.clx)("w-fit", {
+                "py-[9px]": size === "base",
+                "py-[5px]": size === "small",
+            }), role: "presentation" },
+            React.createElement(text_1.Text, { className: (0, clx_1.clx)("text-ui-fg-muted pointer-events-none select-none uppercase", {
+                    "text-ui-fg-disabled": disabled,
+                }) }, code)),
+        React.createElement(react_currency_input_field_1.default, { className: "h-full min-w-0 flex-1 appearance-none bg-transparent text-right outline-none disabled:cursor-not-allowed", disabled: disabled, onInvalid: onInnerInvalid, ref: innerRef, ...props }),
+        React.createElement("span", { className: (0, clx_1.clx)("w-fit min-w-[16px] text-right", {
+                "py-[9px]": size === "base",
+                "py-[5px]": size === "small",
+            }), role: "presentation" },
+            React.createElement(text_1.Text, { className: (0, clx_1.clx)("text-ui-fg-muted pointer-events-none select-none", {
+                    "text-ui-fg-disabled": disabled,
+                }) }, symbol))));
+});
+exports.CurrencyInput = CurrencyInput;
+CurrencyInput.displayName = "CurrencyInput";
+//# sourceMappingURL=currency-input.js.map

package/dist/cjs/components/currency-input/currency-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-input.js","sourceRoot":"","sources":["../../../../src/components/currency-input/currency-input.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,qDAA8B;AAC9B,oGAAkD;AAElD,4CAAwC;AACxC,qCAAiC;AACjC,uEAA4D;AAE5D,MAAM,qBAAqB,GAAG,IAAA,8BAAG,EAC/B,IAAA,SAAG,EACD,2BAA2B,EAC3B,mJAAmJ,EACnJ,qDAAqD,CACtD,EACD;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,8BAA8B;YACpC,KAAK,EAAE,4BAA4B;SACpC;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;KACb;CACF,CACF,CAAA;AAYD,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACpC,CACE,EAAE,IAAI,GAAG,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACzE,GAAG,EACH,EAAE;IACF,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAErD,KAAK,CAAC,mBAAmB,CACvB,GAAG,EACH,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CACvB,CAAA;IAED,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAE9C,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,KAAwC,EAAE,EAAE;QAC3C,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QAE5C,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,KAAK,CAAC,CAAA;SACjB;IACH,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAA;IAED,OAAO,CACL,6BACE,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;aACzB;QACH,CAAC,EACD,SAAS,EAAE,IAAA,SAAG,EACZ,oDAAoD,EACpD,qBAAqB,CAAC,EAAE,IAAI,EAAE,CAAC,EAC/B;YACE,+GAA+G,EAC7G,QAAQ;YACV,qDAAqD,EACnD,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK;SAClC,EACD,SAAS,CACV;QAED,8BACE,SAAS,EAAE,IAAA,SAAG,EAAC,OAAO,EAAE;gBACtB,UAAU,EAAE,IAAI,KAAK,MAAM;gBAC3B,UAAU,EAAE,IAAI,KAAK,OAAO;aAC7B,CAAC,EACF,IAAI,EAAC,cAAc;YAEnB,oBAAC,WAAI,IACH,SAAS,EAAE,IAAA,SAAG,EACZ,4DAA4D,EAC5D;oBACE,qBAAqB,EAAE,QAAQ;iBAChC,CACF,IAEA,IAAI,CACA,CACF;QACP,oBAAC,oCAAS,IACR,SAAS,EAAC,0GAA0G,EACpH,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,cAAc,EACzB,GAAG,EAAE,QAAQ,KACT,KAAK,GACT;QACF,8BACE,SAAS,EAAE,IAAA,SAAG,EAAC,+BAA+B,EAAE;gBAC9C,UAAU,EAAE,IAAI,KAAK,MAAM;gBAC3B,UAAU,EAAE,IAAI,KAAK,OAAO;aAC7B,CAAC,EACF,IAAI,EAAC,cAAc;YAEnB,oBAAC,WAAI,IACH,SAAS,EAAE,IAAA,SAAG,EAAC,kDAAkD,EAAE;oBACjE,qBAAqB,EAAE,QAAQ;iBAChC,CAAC,IAED,MAAM,CACF,CACF,CACH,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAGQ,sCAAa;AAFtB,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport Primitive from \"react-currency-input-field\"\n\nimport { Text } from \"@/components/text\"\nimport { clx } from \"@/utils/clx\"\nimport { VariantProps, cva } from \"class-variance-authority\"\n\nconst currencyInputVariants = cva(\n  clx(\n    \"flex items-center gap-x-1\",\n    \"bg-ui-bg-field hover:bg-ui-bg-field-hover shadow-buttons-neutral placeholder-ui-fg-muted text-ui-fg-base transition-fg relative w-full rounded-md\",\n    \"focus-within:shadow-borders-interactive-with-active\"\n  ),\n  {\n    variants: {\n      size: {\n        base: \"txt-compact-medium h-10 px-3\",\n        small: \"txt-compact-small h-8 px-2\",\n      },\n    },\n    defaultVariants: {\n      size: \"base\",\n    },\n  }\n)\n\ninterface CurrencyInputProps\n  extends Omit<\n      React.ComponentPropsWithoutRef<typeof Primitive>,\n      \"prefix\" | \"suffix\" | \"size\"\n    >,\n    VariantProps<typeof currencyInputVariants> {\n  symbol: string\n  code: string\n}\n\nconst CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(\n  (\n    { size = \"base\", symbol, code, disabled, onInvalid, className, ...props },\n    ref\n  ) => {\n    const innerRef = React.useRef<HTMLInputElement>(null)\n\n    React.useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current\n    )\n\n    const [valid, setValid] = React.useState(true)\n\n    const onInnerInvalid = React.useCallback(\n      (event: React.FormEvent<HTMLInputElement>) => {\n        setValid(event.currentTarget.validity.valid)\n\n        if (onInvalid) {\n          onInvalid(event)\n        }\n      },\n      [onInvalid]\n    )\n\n    return (\n      <div\n        onClick={() => {\n          if (innerRef.current) {\n            innerRef.current.focus()\n          }\n        }}\n        className={clx(\n          \"w-full cursor-text justify-between overflow-hidden\",\n          currencyInputVariants({ size }),\n          {\n            \"text-ui-fg-disabled !bg-ui-bg-disabled !shadow-buttons-neutral !placeholder-ui-fg-disabled cursor-not-allowed\":\n              disabled,\n            \"!shadow-borders-error invalid:!shadow-borders-error\":\n              props[\"aria-invalid\"] || !valid,\n          },\n          className\n        )}\n      >\n        <span\n          className={clx(\"w-fit\", {\n            \"py-[9px]\": size === \"base\",\n            \"py-[5px]\": size === \"small\",\n          })}\n          role=\"presentation\"\n        >\n          <Text\n            className={clx(\n              \"text-ui-fg-muted pointer-events-none select-none uppercase\",\n              {\n                \"text-ui-fg-disabled\": disabled,\n              }\n            )}\n          >\n            {code}\n          </Text>\n        </span>\n        <Primitive\n          className=\"h-full min-w-0 flex-1 appearance-none bg-transparent text-right outline-none disabled:cursor-not-allowed\"\n          disabled={disabled}\n          onInvalid={onInnerInvalid}\n          ref={innerRef}\n          {...props}\n        />\n        <span\n          className={clx(\"w-fit min-w-[16px] text-right\", {\n            \"py-[9px]\": size === \"base\",\n            \"py-[5px]\": size === \"small\",\n          })}\n          role=\"presentation\"\n        >\n          <Text\n            className={clx(\"text-ui-fg-muted pointer-events-none select-none\", {\n              \"text-ui-fg-disabled\": disabled,\n            })}\n          >\n            {symbol}\n          </Text>\n        </span>\n      </div>\n    )\n  }\n)\nCurrencyInput.displayName = \"CurrencyInput\"\n\nexport { CurrencyInput }\n"]}

package/dist/cjs/components/currency-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./currency-input";

package/dist/cjs/components/currency-input/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./currency-input"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/currency-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/currency-input/index.ts"],"names":[],"mappings":";;;AAAA,2DAAgC","sourcesContent":["export * from \"./currency-input\"\n"]}

package/dist/cjs/components/date-picker/date-picker.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { DateRange } from "react-day-picker";
+import type { DateRange } from "../../types";
 interface Preset {
     label: string;
 }

package/dist/cjs/components/date-picker/date-picker.js

@@ -14,11 +14,11 @@ const time_input_1 = require("../time-input");
 const clx_1 = require("../../utils/clx");
 const is_browser_locale_hour_cycle_24h_1 = require("../../utils/is-browser-locale-hour-cycle-24h");
 const class_variance_authority_1 = require("class-variance-authority");
-const displayVariants = (0, class_variance_authority_1.cva)((0, clx_1.clx)("text-ui-fg-base bg-ui-bg-field border-ui-border-base transition-fg shadow-buttons-neutral flex w-full items-center gap-x-2 rounded-md border outline-none", "hover:bg-ui-bg-field-hover", "focus:border-ui-border-interactive focus:shadow-borders-active data-[state=open]:shadow-borders-active data-[state=open]:border-ui-border-interactive", "disabled:bg-ui-bg-disabled disabled:text-ui-fg-disabled disabled:shadow-none", "aria-[invalid=true]:!border-ui-border-error aria-[invalid=true]:!shadow-borders-error"), {
+const displayVariants = (0, class_variance_authority_1.cva)((0, clx_1.clx)("text-ui-fg-base bg-ui-bg-field transition-fg shadow-buttons-neutral flex w-full items-center gap-x-2 rounded-md outline-none", "hover:bg-ui-bg-field-hover", "focus:shadow-borders-interactive-with-active data-[state=open]:shadow-borders-interactive-with-active", "disabled:bg-ui-bg-disabled disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral", "aria-[invalid=true]:!shadow-borders-error"), {
     variants: {
         size: {
-            base: "text-compact-small txt-compact-medium h-10 px-3 py-[9px]",
-            small: "text-compact-medium txt-compact-small h-8 px-2 py-[5px]",
+            base: "txt-compact-medium h-10 px-3 py-2.5",
+            small: "txt-compact-small h-8 px-2 py-1.5",
         },
     },
     defaultVariants: {
@@ -28,12 +28,13 @@ const displayVariants = (0, class_variance_authority_1.cva)((0, clx_1.clx)("text
 const Display = React.forwardRef(({ className, children, placeholder, size = "base", ...props }, ref) => {
     return (React.createElement(Primitives.Trigger, { asChild: true },
         React.createElement("button", { ref: ref, className: (0, clx_1.clx)(displayVariants({ size }), className), ...props },
-            React.createElement(icons_1.Calendar, { className: "text-ui-fg-muted h-5 w-5" }),
-            React.createElement("span", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-left" }, children ? (children) : placeholder ? (React.createElement("span", { className: "text-ui-fg-muted" }, placeholder)) : null))));
+            React.createElement(icons_1.Calendar, { className: "text-ui-fg-muted" }),
+            React.createElement("span", { className: "flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left" }, children ? (children) : placeholder ? (React.createElement("span", { className: "text-ui-fg-muted" }, placeholder)) : null))));
 });
 Display.displayName = "DatePicker.Display";
 const Flyout = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (React.createElement(Primitives.Content, { ref: ref, sideOffset: 8, align: "center", className: (0, clx_1.clx)("txt-compact-small shadow-elevation-flyout bg-ui-bg-base z-30 rounded-lg", "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }, children));
+    return (React.createElement(Primitives.Portal, null,
+        React.createElement(Primitives.Content, { ref: ref, sideOffset: 8, align: "center", className: (0, clx_1.clx)("txt-compact-small shadow-elevation-flyout bg-ui-bg-base w-fit rounded-lg", "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }, children)));
 });
 Flyout.displayName = "DatePicker.Flyout";
 const PresetContainer = ({ presets, onSelect, currentValue, }) => {
@@ -110,16 +111,22 @@ const SingleDatePicker = ({ defaultValue, value, size = "base", onChange, preset
     const [open, setOpen] = React.useState(false);
     const [date, setDate] = React.useState((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : undefined);
     const [month, setMonth] = React.useState(date);
-    const time = React.useMemo(() => {
-        var _a, _b;
-        const hour = (_a = date === null || date === void 0 ? void 0 : date.getHours()) !== null && _a !== void 0 ? _a : 0;
-        const minute = (_b = date === null || date === void 0 ? void 0 : date.getMinutes()) !== null && _b !== void 0 ? _b : 0;
-        return new date_1.Time(hour, minute, 0);
-    }, [date]);
+    const [time, setTime] = React.useState(value
+        ? new date_1.Time(value.getHours(), value.getMinutes())
+        : defaultValue
+            ? new date_1.Time(defaultValue.getHours(), defaultValue.getMinutes())
+            : new date_1.Time(0, 0));
     const initialDate = React.useMemo(() => {
         return date;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
+    /**
+     * Update the date when the value changes.
+     */
+    React.useEffect(() => {
+        var _a;
+        setDate((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : undefined);
+    }, [value, defaultValue]);
     React.useEffect(() => {
         if (date) {
             setMonth(date);
@@ -131,23 +138,57 @@ const SingleDatePicker = ({ defaultValue, value, size = "base", onChange, preset
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
-    const handleCancel = () => {
+    const onCancel = () => {
         setDate(initialDate);
+        setTime(new date_1.Time(0, 0));
         setOpen(false);
     };
-    const handleDateChange = (date) => {
-        setDate(date);
-        onChange === null || onChange === void 0 ? void 0 : onChange(date);
+    const onDateChange = (date) => {
+        const newDate = date;
+        if (showTimePicker) {
+            /**
+             * If the time is cleared, and the date is
+             * changed then we want to reset the time.
+             */
+            if (newDate && !time) {
+                setTime(new date_1.Time(0, 0));
+            }
+            /**
+             * If the time is set, and the date is changed
+             * then we want to update the date with the
+             * time.
+             */
+            if (newDate && time) {
+                newDate.setHours(time.hour);
+                newDate.setMinutes(time.minute);
+            }
+            setDate(newDate);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
+        }
     };
-    const handleTimeChange = (time) => {
-        if (date) {
-            const newDate = new Date(date.getTime());
+    const onTimeChange = (time) => {
+        setTime(time);
+        if (!date) {
+            return;
+        }
+        const newDate = new Date(date.getTime());
+        if (!time) {
+            /**
+             * When a segment of the time input is cleared,
+             * it will return `null` as the value is no longer
+             * a valid time. In this case, we want to set the
+             * time to for the date, effectivly resetting the
+             * input field.
+             */
+            newDate.setHours(0);
+            newDate.setMinutes(0);
+        }
+        else {
             newDate.setHours(time.hour);
             newDate.setMinutes(time.minute);
-            newDate.setSeconds(time.second);
-            setDate(newDate);
-            onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
         }
+        setDate(newDate);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
     };
     const formattedDate = React.useMemo(() => {
         if (!date) {
@@ -162,13 +203,13 @@ const SingleDatePicker = ({ defaultValue, value, size = "base", onChange, preset
                 React.createElement("div", { className: "flex items-start" },
                     presets && presets.length > 0 && (React.createElement("div", { className: "relative h-full w-[160px] border-r" },
                         React.createElement("div", { className: "absolute inset-0 overflow-y-scroll p-3" },
-                            React.createElement(PresetContainer, { currentValue: date, presets: presets, onSelect: handleDateChange })))),
+                            React.createElement(PresetContainer, { currentValue: date, presets: presets, onSelect: onDateChange })))),
                     React.createElement("div", null,
-                        React.createElement(calendar_1.Calendar, { mode: "single", month: month, onMonthChange: setMonth, selected: date, onSelect: handleDateChange, disabled: disabled, ...props }),
+                        React.createElement(calendar_1.Calendar, { mode: "single", month: month, onMonthChange: setMonth, selected: date, onSelect: onDateChange, disabled: disabled, ...props }),
                         showTimePicker && (React.createElement("div", { className: "border-ui-border-base border-t p-3" },
-                            React.createElement(time_input_1.TimeInput, { "aria-label": "Time", onChange: handleTimeChange, isDisabled: !date, value: time, isRequired: props.required }))),
+                            React.createElement(time_input_1.TimeInput, { "aria-label": "Time", onChange: onTimeChange, isDisabled: !date, value: time, isRequired: props.required }))),
                         React.createElement("div", { className: "border-ui-border-base flex items-center gap-x-2 border-t p-3" },
-                            React.createElement(button_1.Button, { variant: "secondary", className: "w-full", type: "button", onClick: handleCancel }, "Cancel"),
+                            React.createElement(button_1.Button, { variant: "secondary", className: "w-full", type: "button", onClick: onCancel }, "Cancel"),
                             React.createElement(button_1.Button, { variant: "primary", className: "w-full", type: "button", onClick: () => setOpen(false) }, "Apply"))))))));
 };
 const RangeDatePicker = ({ defaultValue, value, onChange, size = "base", showTimePicker, presets, disabled, className, ...props }) => {
@@ -176,21 +217,27 @@ const RangeDatePicker = ({ defaultValue, value, onChange, size = "base", showTim
     const [open, setOpen] = React.useState(false);
     const [range, setRange] = React.useState((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : undefined);
     const [month, setMonth] = React.useState(range === null || range === void 0 ? void 0 : range.from);
-    const time = React.useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const startHour = (_b = (_a = range === null || range === void 0 ? void 0 : range.from) === null || _a === void 0 ? void 0 : _a.getHours()) !== null && _b !== void 0 ? _b : 0;
-        const startMinute = (_d = (_c = range === null || range === void 0 ? void 0 : range.from) === null || _c === void 0 ? void 0 : _c.getMinutes()) !== null && _d !== void 0 ? _d : 0;
-        const endHour = (_f = (_e = range === null || range === void 0 ? void 0 : range.to) === null || _e === void 0 ? void 0 : _e.getHours()) !== null && _f !== void 0 ? _f : 0;
-        const endMinute = (_h = (_g = range === null || range === void 0 ? void 0 : range.to) === null || _g === void 0 ? void 0 : _g.getMinutes()) !== null && _h !== void 0 ? _h : 0;
-        return {
-            start: new date_1.Time(startHour, startMinute, 0),
-            end: new date_1.Time(endHour, endMinute, 0),
-        };
-    }, [range]);
+    const [startTime, setStartTime] = React.useState((value === null || value === void 0 ? void 0 : value.from)
+        ? new date_1.Time(value.from.getHours(), value.from.getMinutes())
+        : (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.from)
+            ? new date_1.Time(defaultValue.from.getHours(), defaultValue.from.getMinutes())
+            : new date_1.Time(0, 0));
+    const [endTime, setEndTime] = React.useState((value === null || value === void 0 ? void 0 : value.to)
+        ? new date_1.Time(value.to.getHours(), value.to.getMinutes())
+        : (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.to)
+            ? new date_1.Time(defaultValue.to.getHours(), defaultValue.to.getMinutes())
+            : new date_1.Time(0, 0));
     const initialRange = React.useMemo(() => {
         return range;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
+    /**
+     * Update the range when the value changes.
+     */
+    React.useEffect(() => {
+        var _a;
+        setRange((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : undefined);
+    }, [value, defaultValue]);
     React.useEffect(() => {
         if (range) {
             setMonth(range.from);
@@ -202,15 +249,42 @@ const RangeDatePicker = ({ defaultValue, value, onChange, size = "base", showTim
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
-    const handleRangeChange = (range) => {
-        setRange(range);
-        onChange === null || onChange === void 0 ? void 0 : onChange(range);
+    const onRangeChange = (range) => {
+        const newRange = range;
+        if (showTimePicker) {
+            if ((newRange === null || newRange === void 0 ? void 0 : newRange.from) && !startTime) {
+                setStartTime(new date_1.Time(0, 0));
+            }
+            if ((newRange === null || newRange === void 0 ? void 0 : newRange.to) && !endTime) {
+                setEndTime(new date_1.Time(0, 0));
+            }
+            if ((newRange === null || newRange === void 0 ? void 0 : newRange.from) && startTime) {
+                newRange.from.setHours(startTime.hour);
+                newRange.from.setMinutes(startTime.minute);
+            }
+            if ((newRange === null || newRange === void 0 ? void 0 : newRange.to) && endTime) {
+                newRange.to.setHours(endTime.hour);
+                newRange.to.setMinutes(endTime.minute);
+            }
+        }
+        setRange(newRange);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newRange);
     };
-    const handleCancel = () => {
+    const onCancel = () => {
         setRange(initialRange);
+        setStartTime(new date_1.Time(0, 0));
+        setEndTime(new date_1.Time(0, 0));
         setOpen(false);
     };
-    const handleTimeChange = (time, pos) => {
+    const onTimeChange = (time, pos) => {
+        switch (pos) {
+            case "start":
+                setStartTime(time);
+                break;
+            case "end":
+                setEndTime(time);
+                break;
+        }
         if (!range) {
             return;
         }
@@ -219,8 +293,14 @@ const RangeDatePicker = ({ defaultValue, value, onChange, size = "base", showTim
                 return;
             }
             const newDate = new Date(range.from.getTime());
-            newDate.setHours(time.hour);
-            newDate.setMinutes(time.minute);
+            if (!time) {
+                newDate.setHours(0);
+                newDate.setMinutes(0);
+            }
+            else {
+                newDate.setHours(time.hour);
+                newDate.setMinutes(time.minute);
+            }
             setRange({
                 ...range,
                 from: newDate,
@@ -231,8 +311,14 @@ const RangeDatePicker = ({ defaultValue, value, onChange, size = "base", showTim
                 return;
             }
             const newDate = new Date(range.to.getTime());
-            newDate.setHours(time.hour);
-            newDate.setMinutes(time.minute);
+            if (!time) {
+                newDate.setHours(0);
+                newDate.setMinutes(0);
+            }
+            else {
+                newDate.setHours(time.hour);
+                newDate.setMinutes(time.minute);
+            }
             setRange({
                 ...range,
                 to: newDate,
@@ -252,26 +338,26 @@ const RangeDatePicker = ({ defaultValue, value, onChange, size = "base", showTim
                 React.createElement("div", { className: "flex items-start" },
                     presets && presets.length > 0 && (React.createElement("div", { className: "relative h-full w-[160px] border-r" },
                         React.createElement("div", { className: "absolute inset-0 overflow-y-scroll p-3" },
-                            React.createElement(PresetContainer, { currentValue: range, presets: presets, onSelect: handleRangeChange })))),
+                            React.createElement(PresetContainer, { currentValue: range, presets: presets, onSelect: onRangeChange })))),
                     React.createElement("div", null,
-                        React.createElement(calendar_1.Calendar, { mode: "range", selected: range, onSelect: handleRangeChange, month: month, onMonthChange: setMonth, numberOfMonths: 2, disabled: disabled, classNames: {
-                                months: "flex flex-col sm:flex-row divide-y sm:divide-y-0 sm:divide-x divide-ui-border-base",
+                        React.createElement(calendar_1.Calendar, { mode: "range", selected: range, onSelect: onRangeChange, month: month, onMonthChange: setMonth, numberOfMonths: 2, disabled: disabled, classNames: {
+                                months: "flex flex-row divide-x divide-ui-border-base",
                             }, ...props }),
                         showTimePicker && (React.createElement("div", { className: "border-ui-border-base flex items-center justify-evenly gap-x-3 border-t p-3" },
                             React.createElement("div", { className: "flex flex-1 items-center gap-x-2" },
                                 React.createElement("span", { className: "text-ui-fg-subtle" }, "Start:"),
-                                React.createElement(time_input_1.TimeInput, { value: time.start, onChange: (v) => handleTimeChange(v, "start"), "aria-label": "Start date time", isDisabled: !(range === null || range === void 0 ? void 0 : range.from), isRequired: props.required })),
+                                React.createElement(time_input_1.TimeInput, { value: startTime, onChange: (v) => onTimeChange(v, "start"), "aria-label": "Start date time", isDisabled: !(range === null || range === void 0 ? void 0 : range.from), isRequired: props.required })),
                             React.createElement(icons_1.Minus, { className: "text-ui-fg-muted" }),
                             React.createElement("div", { className: "flex flex-1 items-center gap-x-2" },
                                 React.createElement("span", { className: "text-ui-fg-subtle" }, "End:"),
-                                React.createElement(time_input_1.TimeInput, { value: time.end, onChange: (v) => handleTimeChange(v, "end"), "aria-label": "End date time", isDisabled: !(range === null || range === void 0 ? void 0 : range.to), isRequired: props.required })))),
+                                React.createElement(time_input_1.TimeInput, { value: endTime, onChange: (v) => onTimeChange(v, "end"), "aria-label": "End date time", isDisabled: !(range === null || range === void 0 ? void 0 : range.to), isRequired: props.required })))),
                         React.createElement("div", { className: "flex items-center justify-between border-t p-3" },
                             React.createElement("p", { className: (0, clx_1.clx)("text-ui-fg-subtle txt-compact-small-plus") },
                                 React.createElement("span", { className: "text-ui-fg-muted" }, "Range:"),
                                 " ",
                                 displayRange),
                             React.createElement("div", { className: "flex items-center gap-x-2" },
-                                React.createElement(button_1.Button, { variant: "secondary", type: "button", onClick: handleCancel }, "Cancel"),
+                                React.createElement(button_1.Button, { variant: "secondary", type: "button", onClick: onCancel }, "Cancel"),
                                 React.createElement(button_1.Button, { variant: "primary", type: "button", onClick: () => setOpen(false) }, "Apply")))))))));
 };
 const validatePresets = (presets, rules) => {