npm - @powerhousedao/design-system - Versions diffs - 1.14.0 → 1.16.0 - Mend

@powerhousedao/design-system 1.14.0 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (79) hide show

package/dist/scalars/components/form/form.js CHANGED Viewed

@@ -1,43 +1,55 @@
-import { jsx as n } from "react/jsx-runtime";
-import { deepEqual as a } from "../../lib/deep-equal.js";
-import { isEmpty as d } from "../../lib/is-empty.js";
-import { forwardRef as j, useImperativeHandle as S, useEffect as E, useCallback as O } from "react";
-import { useForm as y, FormProvider as h } from "react-hook-form";
-const w = j(
+import { jsx as p } from "react/jsx-runtime";
+import { deepEqual as d } from "../../lib/deep-equal.js";
+import { isEmpty as E } from "../../lib/is-empty.js";
+import { forwardRef as S, useImperativeHandle as u, useEffect as O, useCallback as a } from "react";
+import { useForm as k, FormProvider as y } from "react-hook-form";
+const w = S(
   ({
     children: m,
-    onSubmit: c,
-    resetOnSuccessfulSubmit: f = !1,
-    submitChangesOnly: p = !1,
-    defaultValues: o,
+    onSubmit: f,
+    resetOnSuccessfulSubmit: c = !1,
+    submitChangesOnly: s = !1,
+    defaultValues: t,
     className: b
-  }, u) => {
-    const t = y({ defaultValues: o });
-    S(u, () => t, [t]), E(() => {
-      f && t.formState.isSubmitSuccessful && t.reset({ ...o ?? {} });
-    }, [f, t.formState.isSubmitSuccessful]);
-    const l = O((s) => {
-      let r = s;
-      return Object.keys(t.control._fields).forEach((e) => {
-        Object.keys(r).includes(e) || (r[e] = null);
-      }), p && o && (r = Object.fromEntries(
-        Object.entries(s).filter(
-          ([e, i]) => !a(i, o[e])
-        )
-      )), r = Object.fromEntries(
-        Object.entries(r).map(([e, i]) => [
-          e,
-          d(i) ? null : i
-        ])
-      ), c(r);
-    }, []);
-    return /* @__PURE__ */ n(h, { ...t, children: /* @__PURE__ */ n(
+  }, j) => {
+    const r = k({
+      defaultValues: t,
+      criteriaMode: "all"
+      // display all errors at once
+    });
+    u(j, () => r, [r]), O(() => {
+      c && r.formState.isSubmitSuccessful && r.reset({ ...t ?? {} });
+    }, [
+      c,
+      r,
+      r.formState.isSubmitSuccessful,
+      t
+    ]);
+    const l = a(
+      (n) => {
+        let e = n;
+        return Object.keys(r.control._fields).forEach((o) => {
+          Object.keys(e).includes(o) || (e[o] = null);
+        }), s && t && (e = Object.fromEntries(
+          Object.entries(n).filter(
+            ([o, i]) => !d(i, t[o])
+          )
+        )), e = Object.fromEntries(
+          Object.entries(e).map(([o, i]) => [
+            o,
+            E(i) ? null : i
+          ])
+        ), f(e);
+      },
+      [r, t, s, f]
+    );
+    return /* @__PURE__ */ p(y, { ...r, children: /* @__PURE__ */ p(
       "form",
       {
-        onSubmit: t.handleSubmit(l),
+        onSubmit: r.handleSubmit(l),
         className: b,
         noValidate: !0,
-        children: typeof m == "function" ? m(t) : m
+        children: typeof m == "function" ? m(r) : m
       }
     ) });
   }

package/dist/scalars/components/form/form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form.js","sources":["../../../../src/scalars/components/form/form.tsx"],"sourcesContent":["import { deepEqual } from \"@/scalars/lib/deep-equal\";\nimport { isEmpty } from \"@/scalars/lib/is-empty\";\nimport { forwardRef, useCallback, useEffect, useImperativeHandle } from \"react\";\nimport { FormProvider, useForm, UseFormReturn } from \"react-hook-form\";\n\ninterface FormProps {\n /*\n Content of the form. Can be either React nodes or a render function that receives form methods\n * and returns React nodes. The render function approach is useful when you need access to form state\n * or methods (e.g., to disable submit button while submitting).\n /\n children: React.ReactNode \| ((methods: UseFormReturn) => React.ReactNode);\n\n /\n Handler called when the form is submitted. Receives the form data as an argument.\n * The data structure will match the names of your form fields.\n \n @param data - An object containing the form values, keyed by field names\n /\n onSubmit: (data: any) => void;\n\n /\n Whether to reset the form after a successful submit.\n \n @default false\n /\n resetOnSuccessfulSubmit?: boolean;\n\n /\n Whether to submit only changed values.\n \n When enabled, the `onSubmit` callback will only receive fields whose values differ from their\n * corresponding `defaultValues`.\n \n @default false\n /\n submitChangesOnly?: boolean;\n\n /\n Initial values for the form fields. Keys should match the 'name' props of your form fields.\n * Useful for editing existing data or setting initial state.\n /\n defaultValues?: Record<string, any>;\n\n /\n Additional CSS class name to apply to the form element.\n * Use this to customize the form's styling.\n /\n className?: string;\n}\n\n/\n A form component that integrates with react-hook-form for form state management and validation.\n \n @example\n * ```tsx\n * // Basic usage\n * <Form onSubmit={handleSubmit}>\n * <StringField name=\"email\" label=\"Email\" />\n * <Button type=\"submit\">Submit</Button>\n * </Form>\n \n // With form methods access\n * <Form onSubmit={handleSubmit}>\n * {({ formState: { isSubmitting } }) => (\n * <>\n * <StringField name=\"email\" label=\"Email\" />\n * <Button type=\"submit\" disabled={isSubmitting}>\n * {isSubmitting ? 'Submitting...' : 'Submit'}\n * </Button>\n * </>\n * )}\n * </Form>\n \n // With default values\n * <Form\n * onSubmit={handleSubmit}\n * defaultValues={{\n * email: 'user@example.com'\n * }}\n * >\n * <StringField name=\"email\" label=\"Email\" />\n * </Form>\n * ```\n */\nexport const Form = forwardRef<UseFormReturn, FormProps>(\n (\n {\n children,\n onSubmit,\n resetOnSuccessfulSubmit = false,\n submitChangesOnly = false,\n defaultValues,\n className,\n },\n ref,\n ) => {\n const methods = useForm({ defaultValues });\n useImperativeHandle(ref, () => methods, [methods]);\n\n useEffect(() => {\n if (resetOnSuccessfulSubmit && methods.formState.isSubmitSuccessful) {\n methods.reset({ ...(defaultValues ?? {}) });\n }\n }, [resetOnSuccessfulSubmit, methods.formState.isSubmitSuccessful]);\n\n const wrappedOnSubmit = useCallback((rawData: Record<string, any>) => {\n let data = rawData;\n // we should make sure that empty fields are submitted as `null`\n // react-hook-form doesn't submit fields with `undefined` values\n // so we need to add them to the data as `null`\n Object.keys(methods.control._fields).forEach((fieldName) => {\n if (!Object.keys(data).includes(fieldName)) {\n data[fieldName] = null;\n }\n });\n\n if (submitChangesOnly && !!defaultValues) {\n // remove fields that didn't change it's value\n data = Object.fromEntries(\n Object.entries(rawData).filter(\n ([fieldName, value]) => !deepEqual(value, defaultValues[fieldName]),\n ),\n );\n }\n\n // at this point all the fields that need to be submitted are in the data\n // we just need to make sure that \"empty\" values are submitted as `null`\n data = Object.fromEntries(\n Object.entries(data).map(([fieldName, value]) => [\n fieldName,\n isEmpty(value) ? null : value,\n ]),\n );\n\n // we need to return the promise from the onSubmit callback if there is one\n // so react-hook-form can wait for it to resolve and update the form state correctly\n return onSubmit(data);\n }, []);\n\n return (\n <FormProvider {...methods}>\n <form\n onSubmit={methods.handleSubmit(wrappedOnSubmit)}\n className={className}\n noValidate\n >\n {typeof children === \"function\" ? children(methods) : children}\n </form>\n </FormProvider>\n );\n },\n);\n"],"names":["Form","forwardRef","children","onSubmit","resetOnSuccessfulSubmit","submitChangesOnly","defaultValues","className","ref","methods","useForm","useImperativeHandle","useEffect","wrappedOnSubmit","useCallback","rawData","data","fieldName","value","deepEqual","isEmpty","jsx","FormProvider"],"mappings":";;;;;AAqFO,MAAMA,IAAOC;AAAA,EAClB,CACE;AAAA,IACE,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,yBAAAC,IAA0B;AAAA,IAC1B,mBAAAC,IAAoB;AAAA,IACpB,eAAAC;AAAA,IACA,WAAAC;AAAA,KAEFC,MACG;AACH,UAAMC,IAAUC,EAAQ,~~EAAE~~,eAAAJ,~~GAAe~~;~~AACzC~~,IAAAK,EAAoBH,GAAK,MAAMC,GAAS,CAACA,CAAO,CAAC,GAEjDG,EAAU,MAAM;AACV,MAAAR,KAA2BK,EAAQ,UAAU,sBAC/CA,EAAQ,MAAM,EAAE,GAAIH,KAAiB,IAAK;AAAA,~~OAE3C~~,~~CAACF~~,~~GAAyBK~~,EAAQ,UAAU,~~kBAAkB~~,~~CAAC~~;~~AAE5D~~,~~UAAAI~~,IAAkBC,~~EAAY~~,CAACC,MAAiC;~~AACpE~~,~~UAAIC~~,IAAOD;AAIX,~~oBAAO~~,KAAKN,EAAQ,QAAQ,OAAO,EAAE,QAAQ,CAACQ,MAAc;AAC1D,~~QAAK~~,OAAO,KAAKD,CAAI,EAAE,SAASC,CAAS,MACvCD,EAAKC,CAAS,IAAI;AAAA,~~MACpB~~,CACD,GAEGZ,KAAuBC,MAEzBU,IAAO,OAAO;AAAA,~~QACZ~~,OAAO,QAAQD,CAAO,EAAE;AAAA,~~UACtB~~,CAAC,CAACE,GAAWC,CAAK,~~MAAM~~,CAACC,EAAUD,GAAOZ,EAAcW,CAAS,CAAC;AAAA,~~QAAA~~;AAAA,~~MAEtE~~,IAKFD,IAAO,OAAO;AAAA,~~QACZ~~,OAAO,QAAQA,CAAI,EAAE,IAAI,CAAC,CAACC,GAAWC,CAAK,MAAM;AAAA,~~UAC~~/CD;AAAA,~~UACAG~~,EAAQF,CAAK,IAAI,OAAOA;AAAA,~~QACzB~~,CAAA;AAAA,~~MACH~~,GAIOf,EAASa,CAAI;AAAA,~~IACtB~~,~~GAAG~~,~~EAAE~~;~~AAGH~~,WAAA,~~gBAAAK~~,EAACC,GAAc,EAAA,GAAGb,GAChB,UAAA,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAUZ,EAAQ,aAAaI,CAAe;AAAA,QAC9C,WAAAN;AAAA,QACA,YAAU;AAAA,QAET,UAAO,OAAAL,KAAa,aAAaA,EAASO,CAAO,IAAIP;AAAA,MAAA;AAAA,IAAA,GAE1D;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"form.js","sources":["../../../../src/scalars/components/form/form.tsx"],"sourcesContent":["import { deepEqual } from \"@/scalars/lib/deep-equal\";\nimport { isEmpty } from \"@/scalars/lib/is-empty\";\nimport { forwardRef, useCallback, useEffect, useImperativeHandle } from \"react\";\nimport { FormProvider, useForm, UseFormReturn } from \"react-hook-form\";\n\ninterface FormProps {\n /*\n Content of the form. Can be either React nodes or a render function that receives form methods\n * and returns React nodes. The render function approach is useful when you need access to form state\n * or methods (e.g., to disable submit button while submitting).\n /\n children: React.ReactNode \| ((methods: UseFormReturn) => React.ReactNode);\n\n /\n Handler called when the form is submitted. Receives the form data as an argument.\n * The data structure will match the names of your form fields.\n \n @param data - An object containing the form values, keyed by field names\n /\n onSubmit: (data: any) => void;\n\n /\n Whether to reset the form after a successful submit.\n \n @default false\n /\n resetOnSuccessfulSubmit?: boolean;\n\n /\n Whether to submit only changed values.\n \n When enabled, the `onSubmit` callback will only receive fields whose values differ from their\n * corresponding `defaultValues`.\n \n @default false\n /\n submitChangesOnly?: boolean;\n\n /\n Initial values for the form fields. Keys should match the 'name' props of your form fields.\n * Useful for editing existing data or setting initial state.\n /\n defaultValues?: Record<string, any>;\n\n /\n Additional CSS class name to apply to the form element.\n * Use this to customize the form's styling.\n /\n className?: string;\n}\n\n/\n A form component that integrates with react-hook-form for form state management and validation.\n \n @example\n * ```tsx\n * // Basic usage\n * <Form onSubmit={handleSubmit}>\n * <StringField name=\"email\" label=\"Email\" />\n * <Button type=\"submit\">Submit</Button>\n * </Form>\n \n // With form methods access\n * <Form onSubmit={handleSubmit}>\n * {({ formState: { isSubmitting } }) => (\n * <>\n * <StringField name=\"email\" label=\"Email\" />\n * <Button type=\"submit\" disabled={isSubmitting}>\n * {isSubmitting ? 'Submitting...' : 'Submit'}\n * </Button>\n * </>\n * )}\n * </Form>\n \n // With default values\n * <Form\n * onSubmit={handleSubmit}\n * defaultValues={{\n * email: 'user@example.com'\n * }}\n * >\n * <StringField name=\"email\" label=\"Email\" />\n * </Form>\n * ```\n */\nexport const Form = forwardRef<UseFormReturn, FormProps>(\n (\n {\n children,\n onSubmit,\n resetOnSuccessfulSubmit = false,\n submitChangesOnly = false,\n defaultValues,\n className,\n },\n ref,\n ) => {\n const methods = useForm({\n defaultValues,\n criteriaMode: \"all\", // display all errors at once\n });\n useImperativeHandle(ref, () => methods, [methods]);\n\n useEffect(() => {\n if (resetOnSuccessfulSubmit && methods.formState.isSubmitSuccessful) {\n methods.reset({ ...(defaultValues ?? {}) });\n }\n }, [\n resetOnSuccessfulSubmit,\n methods,\n methods.formState.isSubmitSuccessful,\n defaultValues,\n ]);\n\n const wrappedOnSubmit = useCallback(\n (rawData: Record<string, any>) => {\n let data = rawData;\n // we should make sure that empty fields are submitted as `null`\n // react-hook-form doesn't submit fields with `undefined` values\n // so we need to add them to the data as `null`\n Object.keys(methods.control._fields).forEach((fieldName) => {\n if (!Object.keys(data).includes(fieldName)) {\n data[fieldName] = null;\n }\n });\n\n if (submitChangesOnly && !!defaultValues) {\n // remove fields that didn't change it's value\n data = Object.fromEntries(\n Object.entries(rawData).filter(\n ([fieldName, value]) =>\n !deepEqual(value, defaultValues[fieldName]),\n ),\n );\n }\n\n // at this point all the fields that need to be submitted are in the data\n // we just need to make sure that \"empty\" values are submitted as `null`\n data = Object.fromEntries(\n Object.entries(data).map(([fieldName, value]) => [\n fieldName,\n isEmpty(value) ? null : value,\n ]),\n );\n\n // we need to return the promise from the onSubmit callback if there is one\n // so react-hook-form can wait for it to resolve and update the form state correctly\n return onSubmit(data);\n },\n [methods, defaultValues, submitChangesOnly, onSubmit],\n );\n\n return (\n <FormProvider {...methods}>\n <form\n onSubmit={methods.handleSubmit(wrappedOnSubmit)}\n className={className}\n noValidate\n >\n {typeof children === \"function\" ? children(methods) : children}\n </form>\n </FormProvider>\n );\n },\n);\n"],"names":["Form","forwardRef","children","onSubmit","resetOnSuccessfulSubmit","submitChangesOnly","defaultValues","className","ref","methods","useForm","useImperativeHandle","useEffect","wrappedOnSubmit","useCallback","rawData","data","fieldName","value","deepEqual","isEmpty","jsx","FormProvider"],"mappings":";;;;;AAqFO,MAAMA,IAAOC;AAAA,EAClB,CACE;AAAA,IACE,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,yBAAAC,IAA0B;AAAA,IAC1B,mBAAAC,IAAoB;AAAA,IACpB,eAAAC;AAAA,IACA,WAAAC;AAAA,KAEFC,MACG;AACH,UAAMC,IAAUC,EAAQ;AAAA,MACtB,eAAAJ;AAAA,MACA,cAAc;AAAA;AAAA,IAAA,CACf;AACD,IAAAK,EAAoBH,GAAK,MAAMC,GAAS,CAACA,CAAO,CAAC,GAEjDG,EAAU,MAAM;AACV,MAAAR,KAA2BK,EAAQ,UAAU,sBAC/CA,EAAQ,MAAM,EAAE,GAAIH,KAAiB,IAAK;AAAA,IAC5C,GACC;AAAA,MACDF;AAAA,MACAK;AAAA,MACAA,EAAQ,UAAU;AAAA,MAClBH;AAAA,IAAA,CACD;AAED,UAAMO,IAAkBC;AAAA,MACtB,CAACC,MAAiC;AAChC,YAAIC,IAAOD;AAIX,sBAAO,KAAKN,EAAQ,QAAQ,OAAO,EAAE,QAAQ,CAACQ,MAAc;AAC1D,UAAK,OAAO,KAAKD,CAAI,EAAE,SAASC,CAAS,MACvCD,EAAKC,CAAS,IAAI;AAAA,QACpB,CACD,GAEGZ,KAAuBC,MAEzBU,IAAO,OAAO;AAAA,UACZ,OAAO,QAAQD,CAAO,EAAE;AAAA,YACtB,CAAC,CAACE,GAAWC,CAAK,MAChB,CAACC,EAAUD,GAAOZ,EAAcW,CAAS,CAAC;AAAA,UAAA;AAAA,QAEhD,IAKFD,IAAO,OAAO;AAAA,UACZ,OAAO,QAAQA,CAAI,EAAE,IAAI,CAAC,CAACC,GAAWC,CAAK,MAAM;AAAA,YAC/CD;AAAA,YACAG,EAAQF,CAAK,IAAI,OAAOA;AAAA,UACzB,CAAA;AAAA,QACH,GAIOf,EAASa,CAAI;AAAA,MACtB;AAAA,MACA,CAACP,GAASH,GAAeD,GAAmBF,CAAQ;AAAA,IACtD;AAGE,WAAA,gBAAAkB,EAACC,GAAc,EAAA,GAAGb,GAChB,UAAA,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAUZ,EAAQ,aAAaI,CAAe;AAAA,QAC9C,WAAAN;AAAA,QACA,YAAU;AAAA,QAET,UAAO,OAAAL,KAAa,aAAaA,EAASO,CAAO,IAAIP;AAAA,MAAA;AAAA,IAAA,GAE1D;AAAA,EAAA;AAGN;"}

package/dist/scalars/components/fragments/badge/badge.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { jsx as a } from "react/jsx-runtime";
-import { cva as e } from "class-variance-authority";
+import { jsx as n } from "react/jsx-runtime";
+import { cva as o } from "class-variance-authority";
 import { cn as t } from "../../../lib/utils.js";
-const i = e(
+const i = o(
   t(
     "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold",
-    "transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
+    "transition-colors focus:outline-none"
   ),
   {
     variants: {
@@ -16,9 +16,9 @@ const i = e(
       variant: "default"
     }
   }
-), l = ({ variant: r, className: o, ...n }) => /* @__PURE__ */ a("div", { className: t(i({ variant: r }), o), ...n });
+), f = ({ variant: r, className: a, ...e }) => /* @__PURE__ */ n("div", { className: t(i({ variant: r }), a), ...e });
 export {
-  l as Badge,
+  f as Badge,
   i as badgeVariants
 };
 //# sourceMappingURL=badge.js.map

package/dist/scalars/components/fragments/badge/badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.js","sources":["../../../../../src/scalars/components/fragments/badge/badge.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/scalars/lib/utils\";\n\nconst badgeVariants = cva(\n cn(\n \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold\",\n \"transition-colors focus:outline-none ~~focus:ring-2 focus:ring-offset-2~~\",\n ),\n {\n variants: {\n variant: {\n default: \"border-transparent\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof badgeVariants> {}\n\nconst Badge: React.FC<BadgeProps> = ({ variant, className, ...props }) => (\n <div className={cn(badgeVariants({ variant }), className)} {...props} />\n);\n\nexport { Badge, badgeVariants };\n"],"names":["badgeVariants","cva","cn","Badge","variant","className","props","jsx"],"mappings":";;;AAIA,MAAMA,IAAgBC;AAAA,EACpBC;AAAA,IACE;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAMMC,IAA8B,CAAC,EAAE,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,MAC3D,gBAAAC,EAAA,OAAA,EAAI,WAAWL,EAAGF,EAAc,EAAE,SAAAI,EAAS,CAAA,GAAGC,CAAS,GAAI,GAAGC,EAAO,CAAA;"}
1	+ {"version":3,"file":"badge.js","sources":["../../../../../src/scalars/components/fragments/badge/badge.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/scalars/lib/utils\";\n\nconst badgeVariants = cva(\n cn(\n \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold\",\n \"transition-colors focus:outline-none\",\n ),\n {\n variants: {\n variant: {\n default: \"border-transparent\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof badgeVariants> {}\n\nconst Badge: React.FC<BadgeProps> = ({ variant, className, ...props }) => (\n <div className={cn(badgeVariants({ variant }), className)} {...props} />\n);\n\nexport { Badge, badgeVariants };\n"],"names":["badgeVariants","cva","cn","Badge","variant","className","props","jsx"],"mappings":";;;AAIA,MAAMA,IAAgBC;AAAA,EACpBC;AAAA,IACE;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAMMC,IAA8B,CAAC,EAAE,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,MAC3D,gBAAAC,EAAA,OAAA,EAAI,WAAWL,EAAGF,EAAc,EAAE,SAAAI,EAAS,CAAA,GAAGC,CAAS,GAAI,GAAGC,EAAO,CAAA;"}

package/dist/scalars/components/fragments/form-label/form-label.js CHANGED Viewed

@@ -1,32 +1,32 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
 import { cn as e } from "../../../lib/utils.js";
 import { Tooltip as c } from "../tooltip/tooltip.js";
-import { Provider as i } from "@radix-ui/react-tooltip";
-import { Icon as u } from "../../../../powerhouse/components/icon/icon.js";
+import { Provider as y } from "@radix-ui/react-tooltip";
+import { Icon as i } from "../../../../powerhouse/components/icon/icon.js";
 const N = ({
   children: o,
   required: m,
   disabled: t,
   description: a,
   hasError: x,
-  inline: n,
-  className: g,
-  ...l
+  inline: g,
+  className: l,
+  ...n
 }) => {
   const s = e(
     "inline-flex items-center text-sm font-medium leading-[22px]",
-    "text-gray-900  dark:text-gray-400 ",
+    `text-gray-900  ${g ? "dark:text-gray-400" : "dark:text-gray-50"} `,
     x && "text-red-800 group-hover:!text-red-900 dark:text-red-800 dark:group-hover:!text-red-900",
     t && "cursor-not-allowed text-gray-700 dark:text-gray-600",
-    n ? !t && "group-hover:text-gray-900 dark:group-hover:text-slate-50" : "mb-[3px]",
-    g
+    g ? !t && "group-hover:text-gray-900 dark:group-hover:text-slate-50" : "mb-[3px]",
+    l
   );
   if (!o)
     return null;
-  const p = {
-    ...l
+  const d = {
+    ...n
   };
-  return /* @__PURE__ */ d("label", { className: s, ...p, children: [
+  return /* @__PURE__ */ p("label", { className: s, ...d, children: [
     o,
     m && /* @__PURE__ */ r(
       "span",
@@ -38,8 +38,8 @@ const N = ({
         children: "*"
       }
     ),
-    a && /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(c, { content: a, children: /* @__PURE__ */ r(
-      u,
+    a && /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(c, { content: a, children: /* @__PURE__ */ r(
+      i,
       {
         name: "CircleInfo",
         size: 16,

package/dist/scalars/components/fragments/form-label/form-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form-label.js","sources":["../../../../../src/scalars/components/fragments/form-label/form-label.tsx"],"sourcesContent":["import { Icon } from \"@/powerhouse/components/icon\";\nimport React from \"react\";\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\nimport { cn } from \"@/scalars/lib\";\n\nexport interface FormLabelProps\n extends React.PropsWithChildren,\n React.LabelHTMLAttributes<HTMLLabelElement> {\n required?: boolean;\n disabled?: boolean;\n description?: string;\n hasError?: boolean;\n inline?: boolean;\n className?: string;\n}\n\nexport const FormLabel: React.FC<FormLabelProps> = ({\n children,\n required,\n disabled,\n description,\n hasError,\n inline,\n className,\n ...htmlLabelProps\n}) => {\n const classes = cn(\n \"inline-flex items-center text-sm font-medium leading-[22px]\",\n \"text-gray-900 dark:text-gray-400 \",\n hasError &&\n \"text-red-800 group-hover:!text-red-900 dark:text-red-800 dark:group-hover:!text-red-900\",\n disabled && \"cursor-not-allowed text-gray-700 dark:text-gray-600\",\n inline\n ? !disabled && \"group-hover:text-gray-900 dark:group-hover:text-slate-50\"\n : \"mb-[3px]\",\n className,\n );\n\n if (!children) {\n // no label provided\n return null;\n }\n\n const extraProps = {\n ...htmlLabelProps,\n };\n\n return (\n <label className={classes} {...extraProps}>\n {children}\n {required && (\n <span\n className={cn(\n \"ml-1 text-gray-800 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-slate-50\",\n hasError && \"!text-red-800 group-hover:!text-red-900\",\n )}\n >\n *\n </span>\n )}\n\n {description && (\n <TooltipProvider>\n <Tooltip content={description}>\n <Icon\n name=\"CircleInfo\"\n size={16}\n className={cn(\n \"ml-1 cursor-pointer text-gray-600 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-500\",\n disabled && \"text-gray-500\",\n )}\n />\n </Tooltip>\n </TooltipProvider>\n )}\n </label>\n );\n};\n"],"names":["FormLabel","children","required","disabled","description","hasError","inline","className","htmlLabelProps","classes","cn","extraProps","jsxs","jsx","TooltipProvider","Tooltip","Icon"],"mappings":";;;;;AAgBO,MAAMA,IAAsC,CAAC;AAAA,EAClD,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAUC;AAAA,IACd;AAAA,IACA;AAAA,~~IACAL~~,KACE;AAAA,IACFF,KAAY;AAAA,IACZG,IACI,CAACH,KAAY,6DACb;AAAA,IACJI;AAAA,EACF;AAEA,MAAI,CAACN;AAEI,WAAA;AAGT,QAAMU,IAAa;AAAA,IACjB,GAAGH;AAAA,EACL;AAEA,SACG,gBAAAI,EAAA,SAAA,EAAM,WAAWH,GAAU,GAAGE,GAC5B,UAAA;AAAA,IAAAV;AAAA,IACAC,KACC,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACT;AAAA,UACAL,KAAY;AAAA,QACd;AAAA,QACD,UAAA;AAAA,MAAA;AAAA,IAED;AAAA,IAGDD,KACE,gBAAAS,EAAAC,GAAA,EACC,UAAC,gBAAAD,EAAAE,GAAA,EAAQ,SAASX,GAChB,UAAA,gBAAAS;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAWN;AAAA,UACT;AAAA,UACAP,KAAY;AAAA,QAAA;AAAA,MACd;AAAA,OAEJ,EACF,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}
1	+ {"version":3,"file":"form-label.js","sources":["../../../../../src/scalars/components/fragments/form-label/form-label.tsx"],"sourcesContent":["import { Icon } from \"@/powerhouse/components/icon\";\nimport React from \"react\";\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\nimport { cn } from \"@/scalars/lib\";\n\nexport interface FormLabelProps\n extends React.PropsWithChildren,\n React.LabelHTMLAttributes<HTMLLabelElement> {\n required?: boolean;\n disabled?: boolean;\n description?: string;\n hasError?: boolean;\n inline?: boolean;\n className?: string;\n}\n\nexport const FormLabel: React.FC<FormLabelProps> = ({\n children,\n required,\n disabled,\n description,\n hasError,\n inline,\n className,\n ...htmlLabelProps\n}) => {\n const classes = cn(\n \"inline-flex items-center text-sm font-medium leading-[22px]\",\n `text-gray-900 ${inline ? \"dark:text-gray-400\" : \"dark:text-gray-50\"} `,\n hasError &&\n \"text-red-800 group-hover:!text-red-900 dark:text-red-800 dark:group-hover:!text-red-900\",\n disabled && \"cursor-not-allowed text-gray-700 dark:text-gray-600\",\n inline\n ? !disabled && \"group-hover:text-gray-900 dark:group-hover:text-slate-50\"\n : \"mb-[3px]\",\n className,\n );\n\n if (!children) {\n // no label provided\n return null;\n }\n\n const extraProps = {\n ...htmlLabelProps,\n };\n\n return (\n <label className={classes} {...extraProps}>\n {children}\n {required && (\n <span\n className={cn(\n \"ml-1 text-gray-800 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-slate-50\",\n hasError && \"!text-red-800 group-hover:!text-red-900\",\n )}\n >\n *\n </span>\n )}\n\n {description && (\n <TooltipProvider>\n <Tooltip content={description}>\n <Icon\n name=\"CircleInfo\"\n size={16}\n className={cn(\n \"ml-1 cursor-pointer text-gray-600 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-500\",\n disabled && \"text-gray-500\",\n )}\n />\n </Tooltip>\n </TooltipProvider>\n )}\n </label>\n );\n};\n"],"names":["FormLabel","children","required","disabled","description","hasError","inline","className","htmlLabelProps","classes","cn","extraProps","jsxs","jsx","TooltipProvider","Tooltip","Icon"],"mappings":";;;;;AAgBO,MAAMA,IAAsC,CAAC;AAAA,EAClD,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAUC;AAAA,IACd;AAAA,IACA,kBAAkBJ,IAAS,uBAAuB,mBAAmB;AAAA,IACrED,KACE;AAAA,IACFF,KAAY;AAAA,IACZG,IACI,CAACH,KAAY,6DACb;AAAA,IACJI;AAAA,EACF;AAEA,MAAI,CAACN;AAEI,WAAA;AAGT,QAAMU,IAAa;AAAA,IACjB,GAAGH;AAAA,EACL;AAEA,SACG,gBAAAI,EAAA,SAAA,EAAM,WAAWH,GAAU,GAAGE,GAC5B,UAAA;AAAA,IAAAV;AAAA,IACAC,KACC,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACT;AAAA,UACAL,KAAY;AAAA,QACd;AAAA,QACD,UAAA;AAAA,MAAA;AAAA,IAED;AAAA,IAGDD,KACE,gBAAAS,EAAAC,GAAA,EACC,UAAC,gBAAAD,EAAAE,GAAA,EAAQ,SAASX,GAChB,UAAA,gBAAAS;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAWN;AAAA,UACT;AAAA,UACAP,KAAY;AAAA,QAAA;AAAA,MACd;AAAA,OAEJ,EACF,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/scalars/components/fragments/select-field/content.js CHANGED Viewed

@@ -1,14 +1,14 @@
-import { jsxs as d, jsx as r, Fragment as h } from "react/jsx-runtime";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import { useMemo as k } from "react";
-import { Command as v, CommandInput as p, CommandList as N, CommandEmpty as z, CommandGroup as C, CommandItem as m } from "../command/command.js";
+import { Command as h, CommandInput as v, CommandList as p, CommandEmpty as N, CommandGroup as z, CommandItem as y } from "../command/command.js";
 import { cn as t } from "../../../lib/utils.js";
 import { Icon as c } from "../../../../powerhouse/components/icon/icon.js";
-const D = ({
+const L = ({
   selectedValues: l,
   options: s = [],
   optionsCheckmark: n,
   multiple: o,
-  searchable: y,
+  searchable: m,
   searchPosition: b,
   searchValue: g = "",
   toggleOption: x,
@@ -36,19 +36,19 @@ const D = ({
       )
     }
   );
-  return /* @__PURE__ */ d(v, { children: [
-    y && b === "Dropdown" && /* @__PURE__ */ r(
-      p,
+  return /* @__PURE__ */ d(h, { children: [
+    m && b === "Dropdown" && /* @__PURE__ */ r(
+      v,
       {
         placeholder: "Search...",
         className: "text-gray-900 dark:text-gray-50"
       }
     ),
-    /* @__PURE__ */ d(N, { children: [
-      /* @__PURE__ */ r(z, { className: "p-4 text-center text-[14px] font-normal leading-5 text-gray-700 dark:text-gray-400", children: "No results found." }),
-      /* @__PURE__ */ d(C, { children: [
+    /* @__PURE__ */ d(p, { children: [
+      /* @__PURE__ */ r(N, { className: "p-4 text-center text-[14px] font-normal leading-5 text-gray-700 dark:text-gray-400", children: "No results found." }),
+      /* @__PURE__ */ d(z, { children: [
         o && n === "Auto" && /* @__PURE__ */ r(
-          m,
+          y,
           {
             onSelect: u,
             className: "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900",
@@ -71,7 +71,7 @@ const D = ({
         i.map((e) => {
           const a = l.includes(e.value);
           return /* @__PURE__ */ d(
-            m,
+            y,
             {
               onSelect: () => !e.disabled && x(e.value),
               className: t(
@@ -80,7 +80,7 @@ const D = ({
                 n === "None" && a && "bg-gray-300 dark:bg-gray-700"
               ),
               children: [
-                n === "Auto" && /* @__PURE__ */ r(h, { children: o ? /* @__PURE__ */ r(
+                n === "Auto" && (o ? /* @__PURE__ */ r(
                   "div",
                   {
                     className: t(
@@ -102,7 +102,7 @@ const D = ({
                     ),
                     children: a && /* @__PURE__ */ r("div", { className: "absolute left-1/2 top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-900 dark:bg-gray-400" })
                   }
-                ) }),
+                )),
                 f(e.icon, e.disabled),
                 /* @__PURE__ */ r(
                   "span",
@@ -125,6 +125,6 @@ const D = ({
   ] });
 };
 export {
-  D as Content
+  L as Content
 };
 //# sourceMappingURL=content.js.map

package/dist/scalars/components/fragments/select-field/content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"content.js","sources":["../../../../../src/scalars/components/fragments/select-field/content.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/scalars/components/fragments/command\";\nimport { cn } from \"@/scalars/lib/utils\";\nimport { SelectProps } from \"@/scalars/components/enum-field/types\";\nimport { Icon, type IconName } from \"@/powerhouse/components/icon\";\n\ninterface ContentProps {\n selectedValues: string[];\n options?: SelectProps[\"options\"];\n optionsCheckmark: \"Auto\" \| \"None\";\n multiple?: boolean;\n searchable?: boolean;\n searchPosition?: \"Dropdown\" \| \"Input\";\n searchValue?: string;\n toggleOption: (value: string) => void;\n toggleAll: () => void;\n}\n\nexport const Content: React.FC<ContentProps> = ({\n selectedValues,\n options = [],\n optionsCheckmark,\n multiple,\n searchable,\n searchPosition,\n searchValue = \"\",\n toggleOption,\n toggleAll,\n}) => {\n const filteredOptions = useMemo(() => {\n if (!searchValue) return options;\n return options.filter((option) =>\n option.label.toLowerCase().includes(searchValue.toLowerCase()),\n );\n }, [options, searchValue]);\n\n const renderIcon = (\n IconComponent:\n \| IconName\n \| React.ComponentType<{ className?: string }>\n \| undefined,\n disabled?: boolean,\n ) => {\n if (typeof IconComponent === \"string\") {\n return (\n <Icon\n name={IconComponent}\n size={16}\n className={cn(\n \"text-gray-700 dark:text-gray-400\",\n disabled && \"opacity-50\",\n )}\n />\n );\n }\n return (\n IconComponent && (\n <IconComponent\n className={cn(\n \"size-4\",\n \"text-gray-700 dark:text-gray-400\",\n disabled && \"opacity-50\",\n )}\n />\n )\n );\n };\n\n return (\n <Command>\n {searchable && searchPosition === \"Dropdown\" && (\n <CommandInput\n placeholder=\"Search...\"\n className=\"text-gray-900 dark:text-gray-50\"\n />\n )}\n <CommandList>\n <CommandEmpty className=\"p-4 text-center text-[14px] font-normal leading-5 text-gray-700 dark:text-gray-400\">\n No results found.\n </CommandEmpty>\n <CommandGroup>\n {multiple && optionsCheckmark === \"Auto\" && (\n <CommandItem\n onSelect={toggleAll}\n className=\"cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900\"\n >\n <div className=\"flex items-center gap-2\">\n <div\n className={cn(\n \"flex size-4 items-center justify-center rounded border\",\n \"border-gray-700 dark:border-gray-400\",\n selectedValues.length ===\n filteredOptions.filter((opt) => !opt.disabled).length\n ? \"bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black\"\n : \"opacity-50 [&_svg]:invisible\",\n )}\n >\n <Icon name=\"Checkmark\" size={16} />\n </div>\n <span className=\"text-[14px] font-semibold leading-4 text-gray-900 dark:text-gray-50\">\n {selectedValues.length ===\n filteredOptions.filter((opt) => !opt.disabled).length\n ? \"Deselect All\"\n : \"Select All\"}\n </span>\n </div>\n </CommandItem>\n )}\n {filteredOptions.map((option) => {\n const isSelected = selectedValues.includes(option.value);\n\n return (\n <CommandItem\n key={option.value}\n onSelect={() => !option.disabled && toggleOption(option.value)}\n className={cn(\n \"cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900\",\n option.disabled &&\n \"cursor-not-allowed opacity-75 hover:bg-transparent dark:hover:bg-transparent\",\n optionsCheckmark === \"None\" &&\n isSelected &&\n \"bg-gray-300 dark:bg-gray-700\",\n )}\n >\n {optionsCheckmark === \"Auto\" ~~&& (\~~n ~~<>\n {~~multiple ? (\n <div\n className={cn(\n \"flex size-4 items-center justify-center rounded border\",\n \"border-gray-700 dark:border-gray-400\",\n isSelected\n ? \"bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black\"\n : \"opacity-50 [&_svg]:invisible\",\n option.disabled && \"opacity-75\",\n )}\n >\n <Icon name=\"Checkmark\" size={16} />\n </div>\n ) : (\n <div\n className={cn(\n \"relative size-4 rounded-full border\",\n isSelected\n ? \"border-gray-900 dark:border-gray-400\"\n : \"border-gray-800 dark:border-gray-400\",\n \"bg-transparent dark:bg-transparent\",\n option.disabled && \"opacity-75\",\n )}\n >\n {isSelected && (\n <div className=\"absolute left-1/2 top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-900 dark:bg-gray-400\" />\n )}\n </div>\n ~~)}\n~~ ~~</>\n~~ )}\n {renderIcon(option.icon, option.disabled)}\n <span\n className={cn(\n \"flex-1 truncate text-[14px] font-medium leading-4\",\n \"text-gray-700 dark:text-gray-400\",\n option.disabled && \"text-gray-600 dark:text-gray-600\",\n )}\n >\n {option.label}\n </span>\n </CommandItem>\n );\n })}\n </CommandGroup>\n </CommandList>\n </Command>\n );\n};\n"],"names":["Content","selectedValues","options","optionsCheckmark","multiple","searchable","searchPosition","searchValue","toggleOption","toggleAll","filteredOptions","useMemo","option","renderIcon","IconComponent","disabled","jsx","Icon","cn","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","jsxs","opt","isSelected"],"mappings":";;;;;AAyBO,MAAMA,IAAkC,CAAC;AAAA,EAC9C,gBAAAC;AAAA,EACA,SAAAC,IAAU,CAAC;AAAA,EACX,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACE,QAAAC,IAAkBC,EAAQ,MACzBJ,IACEL,EAAQ;AAAA,IAAO,CAACU,MACrBA,EAAO,MAAM,cAAc,SAASL,EAAY,YAAa,CAAA;AAAA,EAC/D,IAHyBL,GAIxB,CAACA,GAASK,CAAW,CAAC,GAEnBM,IAAa,CACjBC,GAIAC,MAEI,OAAOD,KAAkB,WAEzB,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMH;AAAA,MACN,MAAM;AAAA,MACN,WAAWI;AAAA,QACT;AAAA,QACAH,KAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,IAIFD,KACE,gBAAAE;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,WAAWI;AAAA,QACT;AAAA,QACA;AAAA,QACAH,KAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF;AAKN,2BACGI,GACE,EAAA,UAAA;AAAA,IAAAd,KAAcC,MAAmB,cAChC,gBAAAU;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,aAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IACZ;AAAA,sBAEDC,GACC,EAAA,UAAA;AAAA,MAAC,gBAAAL,EAAAM,GAAA,EAAa,WAAU,sFAAqF,UAE7G,qBAAA;AAAA,wBACCC,GACE,EAAA,UAAA;AAAA,QAAAnB,KAAYD,MAAqB,UAChC,gBAAAa;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,UAAUf;AAAA,YACV,WAAU;AAAA,YAEV,UAAA,gBAAAgB,EAAC,OAAI,EAAA,WAAU,2BACb,UAAA;AAAA,cAAA,gBAAAT;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWE;AAAA,oBACT;AAAA,oBACA;AAAA,oBACAjB,EAAe,WACbS,EAAgB,OAAO,CAACgB,MAAQ,CAACA,EAAI,QAAQ,EAAE,SAC7C,+DACA;AAAA,kBACN;AAAA,kBAEA,UAAC,gBAAAV,EAAAC,GAAA,EAAK,MAAK,aAAY,MAAM,GAAI,CAAA;AAAA,gBAAA;AAAA,cACnC;AAAA,gCACC,QAAK,EAAA,WAAU,uEACb,UAAAhB,EAAe,WAChBS,EAAgB,OAAO,CAACgB,MAAQ,CAACA,EAAI,QAAQ,EAAE,SAC3C,iBACA,aACN,CAAA;AAAA,YAAA,EACF,CAAA;AAAA,UAAA;AAAA,QACF;AAAA,QAEDhB,EAAgB,IAAI,CAACE,MAAW;AAC/B,gBAAMe,IAAa1B,EAAe,SAASW,EAAO,KAAK;AAGrD,iBAAA,gBAAAa;AAAA,YAACD;AAAA,YAAA;AAAA,cAEC,UAAU,MAAM,CAACZ,EAAO,YAAYJ,EAAaI,EAAO,KAAK;AAAA,cAC7D,WAAWM;AAAA,gBACT;AAAA,gBACAN,EAAO,YACL;AAAA,gBACFT,MAAqB,UACnBwB,KACA;AAAA,cACJ;AAAA,cAEC,UAAA;AAAA,~~gBAAqBxB~~,~~MAAA~~,~~iCAEjB~~,~~UACCC~~,~~IAAA,~~gBAAAY;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWE;AAAA,sBACT;AAAA,sBACA;AAAA,sBACAS,IACI,+DACA;AAAA,sBACJf,EAAO,YAAY;AAAA,oBACrB;AAAA,oBAEA,UAAC,gBAAAI,EAAAC,GAAA,EAAK,MAAK,aAAY,MAAM,GAAI,CAAA;AAAA,kBAAA;AAAA,gBAAA,IAGnC,gBAAAD;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWE;AAAA,sBACT;AAAA,sBACAS,IACI,yCACA;AAAA,sBACJ;AAAA,sBACAf,EAAO,YAAY;AAAA,oBACrB;AAAA,oBAEC,UACCe,KAAA,gBAAAX,EAAC,OAAI,EAAA,WAAU,iHAAiH,CAAA;AAAA,kBAAA;AAAA,gBAAA~~,GAIxI~~;AAAA,~~gBAEDH~~,EAAWD,EAAO,MAAMA,EAAO,QAAQ;AAAA,gBACxC,gBAAAI;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWE;AAAA,sBACT;AAAA,sBACA;AAAA,sBACAN,EAAO,YAAY;AAAA,oBACrB;AAAA,oBAEC,UAAOA,EAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACV;AAAA,YAAA;AAAA,~~YArDKA~~,EAAO;AAAA,~~UAsDd~~;AAAA,QAEH,CAAA;AAAA,MAAA,EACH,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
1	+ {"version":3,"file":"content.js","sources":["../../../../../src/scalars/components/fragments/select-field/content.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/scalars/components/fragments/command\";\nimport { cn } from \"@/scalars/lib/utils\";\nimport { SelectProps } from \"@/scalars/components/enum-field/types\";\nimport { Icon, type IconName } from \"@/powerhouse/components/icon\";\n\ninterface ContentProps {\n selectedValues: string[];\n options?: SelectProps[\"options\"];\n optionsCheckmark: \"Auto\" \| \"None\";\n multiple?: boolean;\n searchable?: boolean;\n searchPosition?: \"Dropdown\" \| \"Input\";\n searchValue?: string;\n toggleOption: (value: string) => void;\n toggleAll: () => void;\n}\n\nexport const Content: React.FC<ContentProps> = ({\n selectedValues,\n options = [],\n optionsCheckmark,\n multiple,\n searchable,\n searchPosition,\n searchValue = \"\",\n toggleOption,\n toggleAll,\n}) => {\n const filteredOptions = useMemo(() => {\n if (!searchValue) return options;\n return options.filter((option) =>\n option.label.toLowerCase().includes(searchValue.toLowerCase()),\n );\n }, [options, searchValue]);\n\n const renderIcon = (\n IconComponent:\n \| IconName\n \| React.ComponentType<{ className?: string }>\n \| undefined,\n disabled?: boolean,\n ) => {\n if (typeof IconComponent === \"string\") {\n return (\n <Icon\n name={IconComponent}\n size={16}\n className={cn(\n \"text-gray-700 dark:text-gray-400\",\n disabled && \"opacity-50\",\n )}\n />\n );\n }\n return (\n IconComponent && (\n <IconComponent\n className={cn(\n \"size-4\",\n \"text-gray-700 dark:text-gray-400\",\n disabled && \"opacity-50\",\n )}\n />\n )\n );\n };\n\n return (\n <Command>\n {searchable && searchPosition === \"Dropdown\" && (\n <CommandInput\n placeholder=\"Search...\"\n className=\"text-gray-900 dark:text-gray-50\"\n />\n )}\n <CommandList>\n <CommandEmpty className=\"p-4 text-center text-[14px] font-normal leading-5 text-gray-700 dark:text-gray-400\">\n No results found.\n </CommandEmpty>\n <CommandGroup>\n {multiple && optionsCheckmark === \"Auto\" && (\n <CommandItem\n onSelect={toggleAll}\n className=\"cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900\"\n >\n <div className=\"flex items-center gap-2\">\n <div\n className={cn(\n \"flex size-4 items-center justify-center rounded border\",\n \"border-gray-700 dark:border-gray-400\",\n selectedValues.length ===\n filteredOptions.filter((opt) => !opt.disabled).length\n ? \"bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black\"\n : \"opacity-50 [&_svg]:invisible\",\n )}\n >\n <Icon name=\"Checkmark\" size={16} />\n </div>\n <span className=\"text-[14px] font-semibold leading-4 text-gray-900 dark:text-gray-50\">\n {selectedValues.length ===\n filteredOptions.filter((opt) => !opt.disabled).length\n ? \"Deselect All\"\n : \"Select All\"}\n </span>\n </div>\n </CommandItem>\n )}\n {filteredOptions.map((option) => {\n const isSelected = selectedValues.includes(option.value);\n\n return (\n <CommandItem\n key={option.value}\n onSelect={() => !option.disabled && toggleOption(option.value)}\n className={cn(\n \"cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900\",\n option.disabled &&\n \"cursor-not-allowed opacity-75 hover:bg-transparent dark:hover:bg-transparent\",\n optionsCheckmark === \"None\" &&\n isSelected &&\n \"bg-gray-300 dark:bg-gray-700\",\n )}\n >\n {optionsCheckmark === \"Auto\" &&\n (multiple ? (\n <div\n className={cn(\n \"flex size-4 items-center justify-center rounded border\",\n \"border-gray-700 dark:border-gray-400\",\n isSelected\n ? \"bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black\"\n : \"opacity-50 [&_svg]:invisible\",\n option.disabled && \"opacity-75\",\n )}\n >\n <Icon name=\"Checkmark\" size={16} />\n </div>\n ) : (\n <div\n className={cn(\n \"relative size-4 rounded-full border\",\n isSelected\n ? \"border-gray-900 dark:border-gray-400\"\n : \"border-gray-800 dark:border-gray-400\",\n \"bg-transparent dark:bg-transparent\",\n option.disabled && \"opacity-75\",\n )}\n >\n {isSelected && (\n <div className=\"absolute left-1/2 top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-900 dark:bg-gray-400\" />\n )}\n </div>\n ))}\n {renderIcon(option.icon, option.disabled)}\n <span\n className={cn(\n \"flex-1 truncate text-[14px] font-medium leading-4\",\n \"text-gray-700 dark:text-gray-400\",\n option.disabled && \"text-gray-600 dark:text-gray-600\",\n )}\n >\n {option.label}\n </span>\n </CommandItem>\n );\n })}\n </CommandGroup>\n </CommandList>\n </Command>\n );\n};\n"],"names":["Content","selectedValues","options","optionsCheckmark","multiple","searchable","searchPosition","searchValue","toggleOption","toggleAll","filteredOptions","useMemo","option","renderIcon","IconComponent","disabled","jsx","Icon","cn","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","jsxs","opt","isSelected"],"mappings":"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"}

package/dist/scalars/components/fragments/select-field/search-input.js CHANGED Viewed

@@ -1,51 +1,59 @@
-import { jsxs as k, jsx as f } from "react/jsx-runtime";
-import { useState as j, useEffect as y } from "react";
-import { Command as v, CommandInput as I } from "../command/command.js";
-import { cn as w } from "../../../lib/utils.js";
-import { Icon as E } from "../../../../powerhouse/components/icon/icon.js";
-const B = ({
-  selectedValues: u,
+import { jsxs as v, jsx as f } from "react/jsx-runtime";
+import { useEffect as d } from "react";
+import { Command as g, CommandInput as D } from "../command/command.js";
+import { cn as o } from "../../../lib/utils.js";
+import { Icon as N } from "../../../../powerhouse/components/icon/icon.js";
+const p = ({
+  selectedValues: y,
   options: b = [],
-  placeholder: a,
-  disabled: o,
-  onSearch: s,
+  placeholder: w,
+  disabled: x,
+  searchValue: i,
+  onSearch: m,
   onOpenChange: t,
-  onSelectFirstOption: i,
+  onSelectFirstOption: s,
   handleClear: c,
   isPopoverOpen: l
 }) => {
-  const m = b.find((r) => r.value === u[0]), [D, x] = j((m == null ? void 0 : m.label) || ""), N = (r) => {
-    r !== (m == null ? void 0 : m.label) && (c == null || c()), x(r), s == null || s(r), t == null || t(!0);
-  }, d = (r) => {
-    r.key === "Enter" && (r.preventDefault(), l ? i == null || i() : t == null || t(!0));
+  const u = b.find((r) => r.value === y[0]), a = (r) => {
+    u && u.label !== r && (c == null || c()), m == null || m(r), t == null || t(!0);
+  }, k = (r) => {
+    r.key === "Enter" && (r.preventDefault(), l ? s == null || s() : t == null || t(!0));
   };
-  return y(() => {
-    u.length > 0 && x((m == null ? void 0 : m.label) || "");
-  }, [u, m]), y(() => {
+  return d(() => {
+    m == null || m((u == null ? void 0 : u.label) ?? i ?? "");
+  }, [m, u, i]), d(() => {
     if (l) {
       const r = document.querySelector("input[cmdk-input]");
       r && setTimeout(() => {
         r.focus();
-      }, 100);
+      }, 0);
     }
-  }, [l]), /* @__PURE__ */ k("div", { className: "flex w-full items-center justify-between gap-3", children: [
-    /* @__PURE__ */ f("div", { className: "flex w-full items-center", children: /* @__PURE__ */ f(v, { children: /* @__PURE__ */ f(
-      I,
+  }, [l]), /* @__PURE__ */ v("div", { className: "flex w-full items-center justify-between gap-3", children: [
+    /* @__PURE__ */ f("div", { className: "flex w-full items-center", children: /* @__PURE__ */ f(g, { children: /* @__PURE__ */ f(
+      D,
       {
-        value: D,
-        onValueChange: N,
-        placeholder: a,
+        value: i,
+        onValueChange: a,
+        placeholder: w,
         onClick: (r) => {
           r.preventDefault(), r.stopPropagation(), t == null || t(!0);
         },
-        onKeyDown: d,
-        wrapperClassName: w("group mt-0 border-0 border-none px-0"),
-        className: w("py-0"),
-        disabled: o
+        onKeyDown: k,
+        wrapperClassName: o(
+          "group mt-0 border-0 border-none px-0",
+          "hover:bg-gray-100! dark:hover:bg-charcoal-800!",
+          "focus-within:bg-white! dark:focus-within:bg-charcoal-900!"
+        ),
+        className: o(
+          "py-0 text-gray-900 dark:text-gray-50",
+          "group-hover:bg-gray-100! dark:group-hover:bg-charcoal-800!"
+        ),
+        disabled: x
       }
     ) }) }),
     /* @__PURE__ */ f(
-      E,
+      N,
       {
         name: "ChevronDown",
         size: 16,
@@ -55,6 +63,6 @@ const B = ({
   ] });
 };
 export {
-  B as SearchInput
+  p as SearchInput
 };
 //# sourceMappingURL=search-input.js.map

package/dist/scalars/components/fragments/select-field/search-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search-input.js","sources":["../../../../../src/scalars/components/fragments/select-field/search-input.tsx"],"sourcesContent":["import React, { ~~useState,~~ useEffect } from \"react\";\nimport { Command, CommandInput } from \"@/scalars/components/fragments/command\";\nimport { cn } from \"@/scalars/lib/utils\";\nimport { SelectProps } from \"@/scalars/components/enum-field/types\";\nimport { Icon } from \"@/powerhouse/components/icon\";\n\ninterface SearchInputProps {\n selectedValues: string[];\n options?: SelectProps[\"options\"];\n placeholder?: string;\n disabled?: boolean;\n onSearch?: (value: string) => void;\n onOpenChange?: (open: boolean) => void;\n onSelectFirstOption?: () => void;\n handleClear?: () => void;\n isPopoverOpen?: boolean;\n}\n\nexport const SearchInput: React.FC<SearchInputProps> = ({\n selectedValues,\n options = [],\n placeholder,\n disabled,\n onSearch,\n onOpenChange,\n onSelectFirstOption,\n handleClear,\n isPopoverOpen,\n}) => {\n const selectedOption = options.find((o) => o.value === selectedValues[0]);\n ~~const [value, setValue] = useState(selectedOption?.label \|\|~~ \~~"\");\~~n\n const handleChange = (value: string) => {\n if (~~value~~ ~~!==~~ selectedOption?.label) {\n handleClear?.();\n }\n ~~setValue(value);\n~~ onSearch?.(value);\n onOpenChange?.(true);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Enter\") {\n e.preventDefault();\n if (isPopoverOpen) {\n onSelectFirstOption?.();\n } else {\n onOpenChange?.(true);\n }\n }\n };\n\n useEffect(() => {\n if (~~selectedValues.length > 0) {\n setValue(~~selectedOption?.label \|\| \"\");\n ~~}\n~~ }, [~~selectedValues~~, selectedOption]);\n\n useEffect(() => {\n if (isPopoverOpen) {\n const input = document.querySelector(\"input[cmdk-input]\");\n if (input) {\n setTimeout(() => {\n (input as HTMLInputElement).focus();\n }, ~~100~~);\n }\n }\n }, [isPopoverOpen]);\n\n return (\n <div className=\"flex w-full items-center justify-between gap-3\">\n <div className=\"flex w-full items-center\">\n <Command>\n <CommandInput\n value={~~value~~}\n onValueChange={handleChange}\n placeholder={placeholder}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n onOpenChange?.(true);\n }}\n onKeyDown={handleKeyDown}\n wrapperClassName={cn(\"group mt-0 border-0 border-none px-0\")}\n className={cn(\"py-0\")}\n disabled={disabled}\n />\n </Command>\n </div>\n <Icon\n name=\"ChevronDown\"\n size={16}\n className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n />\n </div>\n );\n};\n"],"names":["SearchInput","selectedValues","options","placeholder","disabled","onSearch","onOpenChange","onSelectFirstOption","handleClear","isPopoverOpen","selectedOption","o","~~value~~","~~setValue~~","~~useState","handleChange","~~handleKeyDown","e","useEffect","input","jsxs","jsx","Command","CommandInput","cn","Icon"],"mappings":";;;;;~~AAkBO~~,MAAMA,IAA0C,CAAC;AAAA,EACtD,gBAAAC;AAAA,EACA,SAAAC,IAAU,CAAC;AAAA,EACX,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AACF,MAAM;AACE,QAAAC,~~IAAiBR~~,EAAQ,KAAK,~~CAACS~~,MAAMA,EAAE,~~UAAUV~~,EAAe,CAAC,CAAC,~~GAClE~~,~~CAACW,GAAOC,CAAQ,IAAIC,GAASJ,KAAA,gBAAAA,EAAgB,UAAS,EAAE,GAExDK,~~IAAe,~~CAACH~~,MAAkB;~~AAClCA~~,~~IAAAA~~,~~OAAUF~~,~~KAAA~~,~~gBAAAA~~,~~EAAgB~~,~~WACdF,~~KAAA,QAAAA,~~MAEhBK~~,~~EAASD,CAAK,GACdP,~~KAAA,QAAAA,~~EAAWO~~,~~IACXN~~,KAAA,QAAAA,EAAe;AAAA,EACjB,~~GAEMU~~,IAAgB,CAACC,MAA6C;AAC9D,IAAAA,EAAE,QAAQ,YACZA,EAAE,eAAe,~~GACbR~~,IACoBF,KAAA,QAAAA,MAEtBD,KAAA,QAAAA,EAAe;AAAA,EAGrB;AAEA,~~SAAAY~~,EAAU,MAAM;~~AACV~~,~~IAAAjB~~,~~EAAe~~,~~SAAS~~,~~KACjBY~~,~~GAAAH,~~KAAA,gBAAAA,EAAgB,~~UAAS~~,~~EAAE~~;AAAA,~~EACtC~~,~~GACC~~,~~CAACT~~,~~GAAgBS~~,~~CAAc~~,CAAC,~~GAEnCQ~~,EAAU,MAAM;AACd,~~QAAIT~~,GAAe;AACX,~~YAAAU~~,IAAQ,SAAS,cAAc,mBAAmB;AACxD,MAAIA,KACF,WAAW,MAAM;AACd,QAAAA,EAA2B,MAAM;AAAA,SACjC,~~GAAG~~;AAAA,~~IACR~~;AAAA,EACF,GACC,~~CAACV~~,CAAa,CAAC,GAGhB,~~gBAAAW~~,EAAC,OAAI,EAAA,WAAU,kDACb,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,4BACb,UAAA,gBAAAA,EAACC,GACC,EAAA,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,~~OAAAX~~;AAAA,~~QACA~~,~~eAAeG~~;AAAA,QACf,~~aAAAZ~~;AAAA,QACA,SAAS,~~CAACc~~,MAAM;AACd,UAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,~~GAClBX~~,KAAA,QAAAA,EAAe;AAAA,QACjB;AAAA,QACA,~~WAAWU~~;AAAA,QACX,kBAAkBQ,~~EAAG~~,~~sCAAsC~~;AAAA,~~QAC3D~~,WAAWA,~~EAAG~~,~~MAAM~~;AAAA,~~QACpB~~,~~UAAApB~~;AAAA,MAAA;AAAA,OAEJ,EACF,CAAA;AAAA,IACA,~~gBAAAiB~~;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}
1	+ {"version":3,"file":"search-input.js","sources":["../../../../../src/scalars/components/fragments/select-field/search-input.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { Command, CommandInput } from \"@/scalars/components/fragments/command\";\nimport { cn } from \"@/scalars/lib/utils\";\nimport { SelectProps } from \"@/scalars/components/enum-field/types\";\nimport { Icon } from \"@/powerhouse/components/icon\";\n\ninterface SearchInputProps {\n selectedValues: string[];\n options?: SelectProps[\"options\"];\n placeholder?: string;\n disabled?: boolean;\n searchValue?: string;\n onSearch?: (value: string) => void;\n onOpenChange?: (open: boolean) => void;\n onSelectFirstOption?: () => void;\n handleClear?: () => void;\n isPopoverOpen?: boolean;\n}\n\nexport const SearchInput: React.FC<SearchInputProps> = ({\n selectedValues,\n options = [],\n placeholder,\n disabled,\n searchValue,\n onSearch,\n onOpenChange,\n onSelectFirstOption,\n handleClear,\n isPopoverOpen,\n}) => {\n const selectedOption = options.find((o) => o.value === selectedValues[0]);\n\n const handleChange = (value: string) => {\n if (selectedOption && selectedOption.label !== value) {\n handleClear?.();\n }\n onSearch?.(value);\n onOpenChange?.(true);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Enter\") {\n e.preventDefault();\n if (isPopoverOpen) {\n onSelectFirstOption?.();\n } else {\n onOpenChange?.(true);\n }\n }\n };\n\n useEffect(() => {\n onSearch?.(selectedOption?.label ?? searchValue ?? \"\");\n }, [onSearch, selectedOption, searchValue]);\n\n useEffect(() => {\n if (isPopoverOpen) {\n const input = document.querySelector(\"input[cmdk-input]\");\n if (input) {\n setTimeout(() => {\n (input as HTMLInputElement).focus();\n }, 0);\n }\n }\n }, [isPopoverOpen]);\n\n return (\n <div className=\"flex w-full items-center justify-between gap-3\">\n <div className=\"flex w-full items-center\">\n <Command>\n <CommandInput\n value={searchValue}\n onValueChange={handleChange}\n placeholder={placeholder}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n onOpenChange?.(true);\n }}\n onKeyDown={handleKeyDown}\n wrapperClassName={cn(\n \"group mt-0 border-0 border-none px-0\",\n \"hover:bg-gray-100! dark:hover:bg-charcoal-800!\",\n \"focus-within:bg-white! dark:focus-within:bg-charcoal-900!\",\n )}\n className={cn(\n \"py-0 text-gray-900 dark:text-gray-50\",\n \"group-hover:bg-gray-100! dark:group-hover:bg-charcoal-800!\",\n )}\n disabled={disabled}\n />\n </Command>\n </div>\n <Icon\n name=\"ChevronDown\"\n size={16}\n className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n />\n </div>\n );\n};\n"],"names":["SearchInput","selectedValues","options","placeholder","disabled","searchValue","onSearch","onOpenChange","onSelectFirstOption","handleClear","isPopoverOpen","selectedOption","o","handleChange","value","handleKeyDown","e","useEffect","input","jsxs","jsx","Command","CommandInput","cn","Icon"],"mappings":";;;;;AAmBO,MAAMA,IAA0C,CAAC;AAAA,EACtD,gBAAAC;AAAA,EACA,SAAAC,IAAU,CAAC;AAAA,EACX,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AACF,MAAM;AACE,QAAAC,IAAiBT,EAAQ,KAAK,CAACU,MAAMA,EAAE,UAAUX,EAAe,CAAC,CAAC,GAElEY,IAAe,CAACC,MAAkB;AAClC,IAAAH,KAAkBA,EAAe,UAAUG,MAC/BL,KAAA,QAAAA,MAEhBH,KAAA,QAAAA,EAAWQ,IACXP,KAAA,QAAAA,EAAe;AAAA,EACjB,GAEMQ,IAAgB,CAACC,MAA6C;AAC9D,IAAAA,EAAE,QAAQ,YACZA,EAAE,eAAe,GACbN,IACoBF,KAAA,QAAAA,MAEtBD,KAAA,QAAAA,EAAe;AAAA,EAGrB;AAEA,SAAAU,EAAU,MAAM;AACH,IAAAX,KAAA,QAAAA,GAAAK,KAAA,gBAAAA,EAAgB,UAASN,KAAe;AAAA,EAClD,GAAA,CAACC,GAAUK,GAAgBN,CAAW,CAAC,GAE1CY,EAAU,MAAM;AACd,QAAIP,GAAe;AACX,YAAAQ,IAAQ,SAAS,cAAc,mBAAmB;AACxD,MAAIA,KACF,WAAW,MAAM;AACd,QAAAA,EAA2B,MAAM;AAAA,SACjC,CAAC;AAAA,IACN;AAAA,EACF,GACC,CAACR,CAAa,CAAC,GAGhB,gBAAAS,EAAC,OAAI,EAAA,WAAU,kDACb,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,4BACb,UAAA,gBAAAA,EAACC,GACC,EAAA,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAOjB;AAAA,QACP,eAAeQ;AAAA,QACf,aAAAV;AAAA,QACA,SAAS,CAACa,MAAM;AACd,UAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GAClBT,KAAA,QAAAA,EAAe;AAAA,QACjB;AAAA,QACA,WAAWQ;AAAA,QACX,kBAAkBQ;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,UAAAnB;AAAA,MAAA;AAAA,OAEJ,EACF,CAAA;AAAA,IACA,gBAAAgB;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}