@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/field.js

@@ -0,0 +1,285 @@
+import { jsx as l, jsxs as f } from "react/jsx-runtime";
+import { ark as d } from "@ark-ui/react/factory";
+import { useFieldContext as m, Field as i } from "@ark-ui/react/field";
+import { Fieldset as n } from "@ark-ui/react/fieldset";
+import { tv as u } from "tailwind-variants";
+import { cn as r } from "../lib/cn.js";
+import { Separator as p } from "./separator.js";
+const k = m, g = u({
+  base: [
+    "group/field",
+    "w-full",
+    "flex gap-2",
+    "data-invalid:text-destructive-foreground",
+    "dark:data-invalid:text-destructive-foreground"
+  ],
+  variants: {
+    orientation: {
+      vertical: ["flex-col *:w-full [&>.sr-only]:w-auto"],
+      horizontal: [
+        "flex-row items-center",
+        "*:data-[slot=field-label]:flex-auto",
+        "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+      ],
+      responsive: [
+        "flex-col *:w-full [&>.sr-only]:w-auto",
+        "@md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto",
+        "@md/field-group:*:data-[slot=field-label]:flex-auto",
+        "@md/field-group:has-[>[data-slot=field-content]]:items-start",
+        "@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+      ]
+    },
+    reverse: {
+      true: [
+        "data-[orientation=horizontal]:flex-row-reverse",
+        "data-[orientation=vertical]:flex-col-reverse",
+        "data-[orientation=responsive]:flex-col-reverse",
+        "data-[orientation=responsive]:@md/field-group:flex-row-reverse"
+      ]
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    reverse: !1
+  }
+}), y = (a) => {
+  const { orientation: t = "vertical", reverse: e = !1, className: o, slot: s, ...c } = a;
+  return /* @__PURE__ */ l(
+    i.Root,
+    {
+      className: r(g({ orientation: t, reverse: e }), o),
+      "data-orientation": t,
+      ...c,
+      "data-slot": s ?? "field"
+    }
+  );
+}, S = (a) => {
+  const { className: t, slot: e, ...o } = a;
+  return /* @__PURE__ */ l(
+    n.Root,
+    {
+      className: r(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        "data-invalid:text-destructive-foreground",
+        "dark:data-invalid:text-destructive-foreground",
+        t
+      ),
+      ...o,
+      "data-slot": e ?? "field-set"
+    }
+  );
+}, T = (a) => {
+  const { variant: t = "legend", className: e, slot: o, ...s } = a;
+  return /* @__PURE__ */ l(
+    n.Legend,
+    {
+      className: r(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        e
+      ),
+      "data-variant": t,
+      ...s,
+      "data-slot": o ?? "field-legend"
+    }
+  );
+}, E = (a) => {
+  const { className: t, slot: e, ...o } = a;
+  return /* @__PURE__ */ l(
+    d.div,
+    {
+      className: r(
+        "group/field-group @container/field-group",
+        "flex w-full flex-col gap-4",
+        "data-[data-slot=checkbox-group]:gap-3",
+        "*:data-[slot=field-group]:gap-4",
+        t
+      ),
+      ...o,
+      "data-slot": e ?? "field-group"
+    }
+  );
+}, H = (a) => {
+  const { className: t, slot: e, ...o } = a;
+  return /* @__PURE__ */ l(
+    d.div,
+    {
+      className: r(
+        "group/field-content",
+        "flex flex-1 flex-col gap-1.5",
+        "leading-snug",
+        t
+      ),
+      ...o,
+      "data-slot": e ?? "field-content"
+    }
+  );
+}, L = (a) => {
+  const { className: t, slot: e, ...o } = a;
+  return /* @__PURE__ */ l(
+    i.Label,
+    {
+      className: r(
+        "group/field-label peer/field-label",
+        "select-none font-medium text-sm leading-snug",
+        "flex w-fit gap-1",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5",
+        "group-data-disabled/field:opacity-64",
+        "dark:has-data-[state=checked]:bg-primary/10",
+        t
+      ),
+      ...o,
+      "data-slot": e ?? "field-label"
+    }
+  );
+}, R = (a) => {
+  const { className: t, children: e, slot: o, ...s } = a;
+  return /* @__PURE__ */ l(
+    i.RequiredIndicator,
+    {
+      "aria-hidden": !0,
+      className: r(
+        "select-none text-destructive-foreground text-sm",
+        t
+      ),
+      ...s,
+      "data-slot": o ?? "field-required-indicator",
+      children: e ?? "*"
+    }
+  );
+}, q = (a) => {
+  const { className: t, slot: e, ...o } = a;
+  return /* @__PURE__ */ l(
+    d.div,
+    {
+      className: r(
+        "w-fit",
+        "flex items-center gap-2",
+        "font-medium text-sm leading-snug",
+        "group-data-[disabled=true]/field:opacity-64",
+        t
+      ),
+      ...o,
+      "data-slot": e ?? "field-title"
+    }
+  );
+}, z = (a) => {
+  const { className: t, slot: e, ...o } = a;
+  return /* @__PURE__ */ l(
+    d.p,
+    {
+      className: r(
+        "pointer-events-none",
+        "font-normal text-muted-foreground text-sm leading-normal",
+        "group-has-data-[orientation=horizontal]/field:text-balance",
+        "@md/field-group:group-data-[orientation=responsive]/field:text-balance",
+        "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
+        "in-[[data-slot=field]:has([data-slot=radio-group-item])]:ms-6 in-[[data-slot=field]:has([data-slot=radio-group-item])]:-mt-1.5!",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        t
+      ),
+      ...o,
+      "data-slot": e ?? "field-description"
+    }
+  );
+}, j = (a) => {
+  const { className: t, children: e, slot: o, ...s } = a;
+  return /* @__PURE__ */ f(
+    d.div,
+    {
+      className: r(
+        "relative",
+        "h-5",
+        "-my-2 group-data-[variant=outline]/field-group:-mb-2",
+        "text-sm",
+        t
+      ),
+      "data-content": !!e,
+      ...s,
+      "data-slot": o ?? "field-separator",
+      children: [
+        /* @__PURE__ */ l(p, { className: "absolute inset-0 top-1/2" }),
+        !!e && /* @__PURE__ */ l(
+          "span",
+          {
+            className: r(
+              "relative block",
+              "w-fit",
+              "mx-auto px-2",
+              "bg-background",
+              "text-muted-foreground text-sm"
+            ),
+            children: e
+          }
+        )
+      ]
+    }
+  );
+}, C = (a) => {
+  const { className: t, slot: e, ...o } = a;
+  return /* @__PURE__ */ l(
+    i.HelperText,
+    {
+      className: r("text-muted-foreground text-sm", t),
+      ...o,
+      "data-slot": e ?? "field-helper"
+    }
+  );
+}, I = (a) => {
+  const { className: t, slot: e, ...o } = a;
+  return /* @__PURE__ */ l(
+    i.ErrorText,
+    {
+      className: r(
+        "font-normal text-destructive-foreground text-sm",
+        t
+      ),
+      ...o,
+      "data-slot": e ?? "field-error"
+    }
+  );
+}, V = (a) => {
+  const { className: t, slot: e, ...o } = a;
+  return /* @__PURE__ */ l(
+    n.HelperText,
+    {
+      className: r("text-muted-foreground text-sm", t),
+      ...o,
+      "data-slot": e ?? "field-set-helper"
+    }
+  );
+}, D = (a) => {
+  const { className: t, slot: e, ...o } = a;
+  return /* @__PURE__ */ l(
+    n.ErrorText,
+    {
+      className: r(
+        "font-normal text-destructive-foreground text-sm",
+        t
+      ),
+      ...o,
+      "data-slot": e ?? "field-set-error"
+    }
+  );
+};
+export {
+  y as Field,
+  H as FieldContent,
+  z as FieldDescription,
+  I as FieldError,
+  E as FieldGroup,
+  C as FieldHelper,
+  L as FieldLabel,
+  T as FieldLegend,
+  R as FieldRequiredIndicator,
+  j as FieldSeparator,
+  S as FieldSet,
+  D as FieldSetError,
+  V as FieldSetHelper,
+  q as FieldTitle,
+  k as useField
+};
+//# sourceMappingURL=field.js.map

package/dist/simples/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sources":["../../src/simples/field.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport {\n  Field as ArkField,\n  useFieldContext as useArkFieldContext,\n} from \"@ark-ui/react/field\";\nimport { Fieldset as ArkFieldset } from \"@ark-ui/react/fieldset\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Separator } from \"./separator\";\n\nexport const useField = useArkFieldContext;\n\nconst fieldVariants = tv({\n  base: [\n    \"group/field\",\n    \"w-full\",\n    \"flex gap-2\",\n    \"data-invalid:text-destructive-foreground\",\n    \"dark:data-invalid:text-destructive-foreground\",\n  ],\n  variants: {\n    orientation: {\n      vertical: [\"flex-col *:w-full [&>.sr-only]:w-auto\"],\n      horizontal: [\n        \"flex-row items-center\",\n        \"*:data-[slot=field-label]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n      responsive: [\n        \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        \"@md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto\",\n        \"@md/field-group:*:data-[slot=field-label]:flex-auto\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n    },\n    reverse: {\n      true: [\n        \"data-[orientation=horizontal]:flex-row-reverse\",\n        \"data-[orientation=vertical]:flex-col-reverse\",\n        \"data-[orientation=responsive]:flex-col-reverse\",\n        \"data-[orientation=responsive]:@md/field-group:flex-row-reverse\",\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n    reverse: false,\n  },\n});\n\ninterface FieldProps\n  extends React.ComponentProps<typeof ArkField.Root>,\n    VariantProps<typeof fieldVariants> {}\n\nexport const Field = (props: FieldProps) => {\n  const { orientation = \"vertical\", reverse = false, className, slot, ...rest } = props;\n\n  return (\n    <ArkField.Root\n      className={cn(fieldVariants({ orientation, reverse }), className)}\n      data-orientation={orientation}\n      {...rest}\n      data-slot={slot ?? \"field\"}\n    />\n  );\n};\n\nexport const FieldSet = (\n  props: React.ComponentProps<typeof ArkFieldset.Root>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFieldset.Root\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        \"data-invalid:text-destructive-foreground\",\n        \"dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-set\"}\n    />\n  );\n};\n\ninterface FieldLegendProps\n  extends React.ComponentProps<typeof ArkFieldset.Legend> {\n  /**\n   * The variant of the legend.\n   */\n  variant?: \"legend\" | \"label\";\n}\n\nexport const FieldLegend = (props: FieldLegendProps) => {\n  const { variant = \"legend\", className, slot, ...rest } = props;\n\n  return (\n    <ArkFieldset.Legend\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className\n      )}\n      data-variant={variant}\n      {...rest}\n      data-slot={slot ?? \"field-legend\"}\n    />\n  );\n};\n\nexport const FieldGroup = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"group/field-group @container/field-group\",\n        \"flex w-full flex-col gap-4\",\n        \"data-[data-slot=checkbox-group]:gap-3\",\n        \"*:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-group\"}\n    />\n  );\n};\n\nexport const FieldContent = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"group/field-content\",\n        \"flex flex-1 flex-col gap-1.5\",\n        \"leading-snug\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-content\"}\n    />\n  );\n};\n\nexport const FieldLabel = (\n  props: React.ComponentProps<typeof ArkField.Label>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkField.Label\n      className={cn(\n        \"group/field-label peer/field-label\",\n        \"select-none font-medium text-sm leading-snug\",\n        \"flex w-fit gap-1\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5\",\n        \"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5\",\n        \"group-data-disabled/field:opacity-64\",\n        \"dark:has-data-[state=checked]:bg-primary/10\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-label\"}\n    />\n  );\n};\n\nexport const FieldRequiredIndicator = (\n  props: React.ComponentProps<typeof ark.span>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkField.RequiredIndicator\n      aria-hidden\n      className={cn(\n        \"select-none text-destructive-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-required-indicator\"}\n    >\n      {children ?? \"*\"}\n    </ArkField.RequiredIndicator>\n  );\n};\n\nexport const FieldTitle = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"w-fit\",\n        \"flex items-center gap-2\",\n        \"font-medium text-sm leading-snug\",\n        \"group-data-[disabled=true]/field:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-title\"}\n    />\n  );\n};\n\nexport const FieldDescription = (props: React.ComponentProps<typeof ark.p>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.p\n      className={cn(\n        \"pointer-events-none\",\n        \"font-normal text-muted-foreground text-sm leading-normal\",\n        \"group-has-data-[orientation=horizontal]/field:text-balance\",\n        \"@md/field-group:group-data-[orientation=responsive]/field:text-balance\",\n        \"nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5\",\n        \"in-[[data-slot=field]:has([data-slot=radio-group-item])]:ms-6 in-[[data-slot=field]:has([data-slot=radio-group-item])]:-mt-1.5!\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-description\"}\n    />\n  );\n};\n\nexport const FieldSeparator = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"relative\",\n        \"h-5\",\n        \"-my-2 group-data-[variant=outline]/field-group:-mb-2\",\n        \"text-sm\",\n        className\n      )}\n      data-content={!!children}\n      {...rest}\n      data-slot={slot ?? \"field-separator\"}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n\n      {!!children && (\n        <span\n          className={cn(\n            \"relative block\",\n            \"w-fit\",\n            \"mx-auto px-2\",\n            \"bg-background\",\n            \"text-muted-foreground text-sm\"\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </ark.div>\n  );\n};\n\nexport const FieldHelper = (\n  props: React.ComponentProps<typeof ArkField.HelperText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkField.HelperText\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"field-helper\"}\n    />\n  );\n};\n\nexport const FieldError = (\n  props: React.ComponentProps<typeof ArkField.ErrorText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkField.ErrorText\n      className={cn(\n        \"font-normal text-destructive-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-error\"}\n    />\n  );\n};\n\n// The two below look like copies of the two above and are not: these are the fieldset machine's\n// message parts, describing the whole `FieldSet`, while `FieldHelper` / `FieldError` come from the\n// field machine and describe one control. Same typography, different scope — and a `FieldSet` needs\n// its own, because a group-level message wired to a single field is announced on the wrong control.\n\nexport const FieldSetHelper = (\n  props: React.ComponentProps<typeof ArkFieldset.HelperText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFieldset.HelperText\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"field-set-helper\"}\n    />\n  );\n};\n\nexport const FieldSetError = (\n  props: React.ComponentProps<typeof ArkFieldset.ErrorText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFieldset.ErrorText\n      className={cn(\n        \"font-normal text-destructive-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-set-error\"}\n    />\n  );\n};\n"],"names":["useField","useArkFieldContext","fieldVariants","tv","Field","props","orientation","reverse","className","slot","rest","jsx","ArkField","cn","FieldSet","ArkFieldset","FieldLegend","variant","FieldGroup","ark","FieldContent","FieldLabel","FieldRequiredIndicator","children","FieldTitle","FieldDescription","FieldSeparator","jsxs","Separator","FieldHelper","FieldError","FieldSetHelper","FieldSetError"],"mappings":"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"}

package/dist/simples/file-upload.d.ts

@@ -0,0 +1,19 @@
+import { FileUpload as ArkFileUpload } from '@ark-ui/react/file-upload';
+import { default as React } from 'react';
+import { ButtonProps } from './button';
+export declare const useFileUpload: () => import('@ark-ui/react').UseFileUploadContext;
+export declare const FileUpload: (props: React.ComponentProps<typeof ArkFileUpload.Root>) => React.JSX.Element;
+export declare const FileUploadRootProvider: (props: React.ComponentProps<typeof ArkFileUpload.RootProvider>) => React.JSX.Element;
+export declare const FileUploadLabel: ({ slot, ...rest }: React.ComponentProps<typeof ArkFileUpload.Label>) => React.JSX.Element;
+export declare const FileUploadDropzone: (props: React.ComponentProps<typeof ArkFileUpload.Dropzone>) => React.JSX.Element;
+export declare const FileUploadTrigger: (props: React.ComponentProps<typeof ArkFileUpload.Trigger> & Pick<ButtonProps, "variant" | "size">) => React.JSX.Element;
+export declare const FileUploadItemGroup: (props: React.ComponentProps<typeof ArkFileUpload.ItemGroup>) => React.JSX.Element;
+export declare const FileUploadItem: (props: React.ComponentProps<typeof ArkFileUpload.Item>) => React.JSX.Element;
+export declare const FileUploadItemPreview: (props: React.ComponentProps<typeof ArkFileUpload.ItemPreview>) => React.JSX.Element;
+export declare const FileUploadItemPreviewImage: (props: React.ComponentProps<typeof ArkFileUpload.ItemPreviewImage>) => React.JSX.Element;
+export declare const FileUploadItemName: (props: React.ComponentProps<typeof ArkFileUpload.ItemName>) => React.JSX.Element;
+export declare const FileUploadItemSizeText: (props: React.ComponentProps<typeof ArkFileUpload.ItemSizeText>) => React.JSX.Element;
+export declare const FileUploadItemDeleteTrigger: (props: React.ComponentProps<typeof ArkFileUpload.ItemDeleteTrigger>) => React.JSX.Element;
+export declare const FileUploadClearTrigger: (props: React.ComponentProps<typeof ArkFileUpload.ClearTrigger> & Pick<ButtonProps, "variant" | "size">) => React.JSX.Element;
+export declare const FileUploadHiddenInput: ({ slot, ...rest }: React.ComponentProps<typeof ArkFileUpload.HiddenInput>) => React.JSX.Element;
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/simples/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/simples/file-upload.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,aAAa,EAE5B,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpD,eAAO,MAAM,aAAa,oDAAuB,CAAC;AAElD,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,sBAevD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,YAAY,CAAC,sBAe/D,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,sBAKpE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,QAAQ,CAAC,sBA2B3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GACvD,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,sBAgBxC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,sBAW5D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,sBAkBvD,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,sBAkB9D,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,gBAAgB,CAAC,sBAWnE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,QAAQ,CAAC,sBAc3D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,YAAY,CAAC,sBAW/D,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,iBAAiB,CAAC,sBAiBpE,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,YAAY,CAAC,GAC5D,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,sBAkBxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,sBACgB,CAAC"}

package/dist/simples/file-upload.js

@@ -0,0 +1,192 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useFileUploadContext as c, FileUpload as l } from "@ark-ui/react/file-upload";
+import { cn as i } from "../lib/cn.js";
+import { Button as n } from "./button.js";
+import { FieldLabel as u } from "./field.js";
+const v = c, b = (e) => {
+  const { className: t, slot: o, ...r } = e;
+  return /* @__PURE__ */ a(
+    l.Root,
+    {
+      className: i(
+        "flex flex-col gap-2",
+        "data-invalid:text-destructive dark:data-invalid:text-destructive-foreground",
+        t
+      ),
+      ...r,
+      "data-slot": o ?? "file-upload"
+    }
+  );
+}, h = (e) => {
+  const { className: t, slot: o, ...r } = e;
+  return /* @__PURE__ */ a(
+    l.RootProvider,
+    {
+      className: i(
+        "flex flex-col gap-2",
+        "data-invalid:text-destructive dark:data-invalid:text-destructive-foreground",
+        t
+      ),
+      ...r,
+      "data-slot": o ?? "file-upload-root-provider"
+    }
+  );
+}, N = ({ slot: e, ...t }) => /* @__PURE__ */ a(u, { asChild: !0, children: /* @__PURE__ */ a(l.Label, { ...t, "data-slot": e ?? "file-upload-label" }) }), F = (e) => {
+  const { className: t, slot: o, ...r } = e;
+  return /* @__PURE__ */ a(
+    l.Dropzone,
+    {
+      className: i(
+        "flex flex-col items-center justify-center gap-2",
+        "px-6 py-8 text-center",
+        "cursor-pointer",
+        "rounded-lg border border-input border-dashed shadow-xs/5",
+        "bg-field",
+        "text-muted-foreground text-sm",
+        "transition-[color,box-shadow,border-color,background-color]",
+        "hover:border-ring hover:bg-accent hover:text-accent-foreground",
+        "outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring",
+        "data-dragging:border-primary data-dragging:bg-accent data-dragging:text-accent-foreground",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        "data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24",
+        "dark:data-invalid:text-destructive-foreground",
+        "motion-reduce:transition-none!",
+        t
+      ),
+      ...r,
+      "data-slot": o ?? "file-upload-dropzone"
+    }
+  );
+}, I = (e) => {
+  const { children: t, variant: o = "outline", size: r, slot: s, ...d } = e;
+  return /* @__PURE__ */ a(l.Trigger, { asChild: !0, children: /* @__PURE__ */ a(
+    n,
+    {
+      size: r,
+      variant: o,
+      ...d,
+      slot: s ?? "file-upload-trigger",
+      children: t
+    }
+  ) });
+}, U = (e) => {
+  const { className: t, slot: o, ...r } = e;
+  return /* @__PURE__ */ a(
+    l.ItemGroup,
+    {
+      className: i("flex w-full flex-col gap-2", t),
+      ...r,
+      "data-slot": o ?? "file-upload-item-group"
+    }
+  );
+}, z = (e) => {
+  const { className: t, slot: o, ...r } = e;
+  return /* @__PURE__ */ a(
+    l.Item,
+    {
+      className: i(
+        "flex items-center gap-3",
+        "px-3 py-2 text-sm",
+        "rounded-lg border border-input shadow-xs/5",
+        "bg-field",
+        "data-disabled:opacity-64",
+        t
+      ),
+      ...r,
+      "data-slot": o ?? "file-upload-item"
+    }
+  );
+}, w = (e) => {
+  const { className: t, slot: o, ...r } = e;
+  return /* @__PURE__ */ a(
+    l.ItemPreview,
+    {
+      className: i(
+        "flex size-9 shrink-0 items-center justify-center overflow-hidden",
+        "rounded-md border border-input",
+        "bg-muted text-muted-foreground",
+        "[&_svg:not([class*='size-'])]:size-4",
+        "[&_img]:size-full [&_img]:object-cover",
+        t
+      ),
+      ...r,
+      "data-slot": o ?? "file-upload-item-preview"
+    }
+  );
+}, y = (e) => {
+  const { className: t, slot: o, ...r } = e;
+  return /* @__PURE__ */ a(
+    l.ItemPreviewImage,
+    {
+      className: i("size-full object-cover", t),
+      ...r,
+      "data-slot": o ?? "file-upload-item-preview-image"
+    }
+  );
+}, T = (e) => {
+  const { className: t, slot: o, ...r } = e;
+  return /* @__PURE__ */ a(
+    l.ItemName,
+    {
+      className: i(
+        "min-w-0 truncate font-medium text-foreground text-sm",
+        t
+      ),
+      ...r,
+      "data-slot": o ?? "file-upload-item-name"
+    }
+  );
+}, C = (e) => {
+  const { className: t, slot: o, ...r } = e;
+  return /* @__PURE__ */ a(
+    l.ItemSizeText,
+    {
+      className: i("text-muted-foreground text-xs", t),
+      ...r,
+      "data-slot": o ?? "file-upload-item-size-text"
+    }
+  );
+}, P = (e) => {
+  const { children: t, slot: o, ...r } = e;
+  return /* @__PURE__ */ a(l.ItemDeleteTrigger, { asChild: !0, children: /* @__PURE__ */ a(
+    n,
+    {
+      className: "ms-auto",
+      size: "icon-sm",
+      variant: "ghost",
+      ...r,
+      slot: o ?? "file-upload-item-delete-trigger",
+      children: t
+    }
+  ) });
+}, j = (e) => {
+  const { children: t, variant: o = "ghost", size: r = "sm", slot: s, ...d } = e;
+  return /* @__PURE__ */ a(l.ClearTrigger, { asChild: !0, children: /* @__PURE__ */ a(
+    n,
+    {
+      ...d,
+      size: r,
+      slot: s ?? "file-upload-clear-trigger",
+      variant: o,
+      children: t
+    }
+  ) });
+}, k = ({ slot: e, ...t }) => /* @__PURE__ */ a(l.HiddenInput, { ...t, "data-slot": e ?? "file-upload-hidden-input" });
+export {
+  b as FileUpload,
+  j as FileUploadClearTrigger,
+  F as FileUploadDropzone,
+  k as FileUploadHiddenInput,
+  z as FileUploadItem,
+  P as FileUploadItemDeleteTrigger,
+  U as FileUploadItemGroup,
+  T as FileUploadItemName,
+  w as FileUploadItemPreview,
+  y as FileUploadItemPreviewImage,
+  C as FileUploadItemSizeText,
+  N as FileUploadLabel,
+  h as FileUploadRootProvider,
+  I as FileUploadTrigger,
+  v as useFileUpload
+};
+//# sourceMappingURL=file-upload.js.map

package/dist/simples/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","sources":["../../src/simples/file-upload.tsx"],"sourcesContent":["import {\n  FileUpload as ArkFileUpload,\n  useFileUploadContext,\n} from \"@ark-ui/react/file-upload\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { FieldLabel } from \"./field\";\n\nexport const useFileUpload = useFileUploadContext;\n\nexport const FileUpload = (\n  props: React.ComponentProps<typeof ArkFileUpload.Root>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFileUpload.Root\n      className={cn(\n        \"flex flex-col gap-2\",\n        \"data-invalid:text-destructive dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"file-upload\"}\n    />\n  );\n};\n\nexport const FileUploadRootProvider = (\n  props: React.ComponentProps<typeof ArkFileUpload.RootProvider>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFileUpload.RootProvider\n      className={cn(\n        \"flex flex-col gap-2\",\n        \"data-invalid:text-destructive dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"file-upload-root-provider\"}\n    />\n  );\n};\n\nexport const FileUploadLabel = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkFileUpload.Label>\n) => (\n  <FieldLabel asChild>\n    <ArkFileUpload.Label {...rest} data-slot={slot ?? \"file-upload-label\"} />\n  </FieldLabel>\n);\n\nexport const FileUploadDropzone = (\n  props: React.ComponentProps<typeof ArkFileUpload.Dropzone>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFileUpload.Dropzone\n      className={cn(\n        \"flex flex-col items-center justify-center gap-2\",\n        \"px-6 py-8 text-center\",\n        \"cursor-pointer\",\n        \"rounded-lg border border-input border-dashed shadow-xs/5\",\n        \"bg-field\",\n        \"text-muted-foreground text-sm\",\n        \"transition-[color,box-shadow,border-color,background-color]\",\n        \"hover:border-ring hover:bg-accent hover:text-accent-foreground\",\n        \"outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring\",\n        \"data-dragging:border-primary data-dragging:bg-accent data-dragging:text-accent-foreground\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        \"data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n        \"dark:data-invalid:text-destructive-foreground\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"file-upload-dropzone\"}\n    />\n  );\n};\n\nexport const FileUploadTrigger = (\n  props: React.ComponentProps<typeof ArkFileUpload.Trigger> &\n    Pick<ButtonProps, \"variant\" | \"size\">\n) => {\n  const { children, variant = \"outline\", size, slot, ...rest } = props;\n\n  return (\n    <ArkFileUpload.Trigger asChild>\n      <Button\n        size={size}\n        variant={variant}\n        {...rest}\n        slot={slot ?? \"file-upload-trigger\"}\n      >\n        {children}\n      </Button>\n    </ArkFileUpload.Trigger>\n  );\n};\n\nexport const FileUploadItemGroup = (\n  props: React.ComponentProps<typeof ArkFileUpload.ItemGroup>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFileUpload.ItemGroup\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n      {...rest}\n      data-slot={slot ?? \"file-upload-item-group\"}\n    />\n  );\n};\n\nexport const FileUploadItem = (\n  props: React.ComponentProps<typeof ArkFileUpload.Item>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFileUpload.Item\n      className={cn(\n        \"flex items-center gap-3\",\n        \"px-3 py-2 text-sm\",\n        \"rounded-lg border border-input shadow-xs/5\",\n        \"bg-field\",\n        \"data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"file-upload-item\"}\n    />\n  );\n};\n\nexport const FileUploadItemPreview = (\n  props: React.ComponentProps<typeof ArkFileUpload.ItemPreview>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFileUpload.ItemPreview\n      className={cn(\n        \"flex size-9 shrink-0 items-center justify-center overflow-hidden\",\n        \"rounded-md border border-input\",\n        \"bg-muted text-muted-foreground\",\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        \"[&_img]:size-full [&_img]:object-cover\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"file-upload-item-preview\"}\n    />\n  );\n};\n\nexport const FileUploadItemPreviewImage = (\n  props: React.ComponentProps<typeof ArkFileUpload.ItemPreviewImage>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFileUpload.ItemPreviewImage\n      className={cn(\"size-full object-cover\", className)}\n      {...rest}\n      data-slot={slot ?? \"file-upload-item-preview-image\"}\n    />\n  );\n};\n\nexport const FileUploadItemName = (\n  props: React.ComponentProps<typeof ArkFileUpload.ItemName>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFileUpload.ItemName\n      className={cn(\n        \"min-w-0 truncate font-medium text-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"file-upload-item-name\"}\n    />\n  );\n};\n\nexport const FileUploadItemSizeText = (\n  props: React.ComponentProps<typeof ArkFileUpload.ItemSizeText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFileUpload.ItemSizeText\n      className={cn(\"text-muted-foreground text-xs\", className)}\n      {...rest}\n      data-slot={slot ?? \"file-upload-item-size-text\"}\n    />\n  );\n};\n\nexport const FileUploadItemDeleteTrigger = (\n  props: React.ComponentProps<typeof ArkFileUpload.ItemDeleteTrigger>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <ArkFileUpload.ItemDeleteTrigger asChild>\n      <Button\n        className=\"ms-auto\"\n        size=\"icon-sm\"\n        variant=\"ghost\"\n        {...rest}\n        slot={slot ?? \"file-upload-item-delete-trigger\"}\n      >\n        {children}\n      </Button>\n    </ArkFileUpload.ItemDeleteTrigger>\n  );\n};\n\nexport const FileUploadClearTrigger = (\n  props: React.ComponentProps<typeof ArkFileUpload.ClearTrigger> &\n    Pick<ButtonProps, \"variant\" | \"size\">\n) => {\n  const { children, variant = \"ghost\", size = \"sm\", slot, ...rest } = props;\n\n  // The slot goes on the `Button`, not on the trigger: under `asChild` the child writes its own\n  // last and a `data-slot` here would never reach the document.\n  return (\n    <ArkFileUpload.ClearTrigger asChild>\n      <Button\n        {...rest}\n        size={size}\n        slot={slot ?? \"file-upload-clear-trigger\"}\n        variant={variant}\n      >\n        {children}\n      </Button>\n    </ArkFileUpload.ClearTrigger>\n  );\n};\n\nexport const FileUploadHiddenInput = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkFileUpload.HiddenInput>\n) => <ArkFileUpload.HiddenInput {...rest} data-slot={slot ?? \"file-upload-hidden-input\"} />;\n"],"names":["useFileUpload","useFileUploadContext","FileUpload","props","className","slot","rest","jsx","ArkFileUpload","cn","FileUploadRootProvider","FileUploadLabel","FieldLabel","FileUploadDropzone","FileUploadTrigger","children","variant","size","Button","FileUploadItemGroup","FileUploadItem","FileUploadItemPreview","FileUploadItemPreviewImage","FileUploadItemName","FileUploadItemSizeText","FileUploadItemDeleteTrigger","FileUploadClearTrigger","FileUploadHiddenInput"],"mappings":"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"}

package/dist/simples/float.d.ts

@@ -0,0 +1,45 @@
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const floatVariants: import('tailwind-variants').TVReturnType<{
+    placement: {
+        "top-start": string;
+        "top-center": string;
+        "top-end": string;
+        "middle-start": string;
+        "middle-center": string;
+        "middle-end": string;
+        "bottom-start": string;
+        "bottom-center": string;
+        "bottom-end": string;
+    };
+}, undefined, string[], {
+    placement: {
+        "top-start": string;
+        "top-center": string;
+        "top-end": string;
+        "middle-start": string;
+        "middle-center": string;
+        "middle-end": string;
+        "bottom-start": string;
+        "bottom-center": string;
+        "bottom-end": string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    placement: {
+        "top-start": string;
+        "top-center": string;
+        "top-end": string;
+        "middle-start": string;
+        "middle-center": string;
+        "middle-end": string;
+        "bottom-start": string;
+        "bottom-center": string;
+        "bottom-end": string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface FloatProps extends React.ComponentProps<typeof ark.div>, VariantProps<typeof floatVariants> {
+}
+export declare const Float: (props: FloatProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=float.d.ts.map

package/dist/simples/float.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"float.d.ts","sourceRoot":"","sources":["../../src/simples/float.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAoBjB,CAAC;AAEH,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,sBAWtC,CAAC"}

package/dist/simples/float.js

@@ -0,0 +1,40 @@
+import { jsx as s } from "react/jsx-runtime";
+import { ark as n } from "@ark-ui/react/factory";
+import { tv as m } from "tailwind-variants";
+import { cn as l } from "../lib/cn.js";
+const p = m({
+  base: ["absolute z-10", "flex items-center justify-center"],
+  variants: {
+    // Vertical uses `middle-*` (not `center-*`); horizontal uses `*-center`. The nine cells of
+    // a 3×3 grid, addressed with logical inset props so they mirror under RTL.
+    placement: {
+      "top-start": "top-0 start-0",
+      "top-center": "top-0 start-1/2 -translate-x-1/2",
+      "top-end": "top-0 end-0",
+      "middle-start": "top-1/2 start-0 -translate-y-1/2",
+      "middle-center": "top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2",
+      "middle-end": "top-1/2 end-0 -translate-y-1/2",
+      "bottom-start": "bottom-0 start-0",
+      "bottom-center": "bottom-0 start-1/2 -translate-x-1/2",
+      "bottom-end": "bottom-0 end-0"
+    }
+  },
+  defaultVariants: {
+    placement: "top-end"
+  }
+}), b = (a) => {
+  const { placement: t = "top-end", className: e, slot: o, ...r } = a;
+  return /* @__PURE__ */ s(
+    n.div,
+    {
+      className: l(p({ placement: t }), e),
+      "data-placement": t,
+      ...r,
+      "data-slot": o ?? "float"
+    }
+  );
+};
+export {
+  b as Float
+};
+//# sourceMappingURL=float.js.map

package/dist/simples/float.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"float.js","sources":["../../src/simples/float.tsx"],"sourcesContent":["// Float positions its child over a corner or edge of the nearest positioned ancestor. It is\n// pure box model, so it needs no client boundary — but it DOES need a `position: relative`\n// (or any non-static) parent to anchor against; without one it escapes to the viewport.\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\nconst floatVariants = tv({\n  base: [\"absolute z-10\", \"flex items-center justify-center\"],\n  variants: {\n    // Vertical uses `middle-*` (not `center-*`); horizontal uses `*-center`. The nine cells of\n    // a 3×3 grid, addressed with logical inset props so they mirror under RTL.\n    placement: {\n      \"top-start\": \"top-0 start-0\",\n      \"top-center\": \"top-0 start-1/2 -translate-x-1/2\",\n      \"top-end\": \"top-0 end-0\",\n      \"middle-start\": \"top-1/2 start-0 -translate-y-1/2\",\n      \"middle-center\": \"top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2\",\n      \"middle-end\": \"top-1/2 end-0 -translate-y-1/2\",\n      \"bottom-start\": \"bottom-0 start-0\",\n      \"bottom-center\": \"bottom-0 start-1/2 -translate-x-1/2\",\n      \"bottom-end\": \"bottom-0 end-0\",\n    },\n  },\n  defaultVariants: {\n    placement: \"top-end\",\n  },\n});\n\nexport interface FloatProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof floatVariants> {}\n\nexport const Float = (props: FloatProps) => {\n  const { placement = \"top-end\", className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(floatVariants({ placement }), className)}\n      data-placement={placement}\n      {...rest}\n      data-slot={slot ?? \"float\"}\n    />\n  );\n};\n"],"names":["floatVariants","tv","Float","props","placement","className","slot","rest","jsx","ark","cn"],"mappings":";;;;AASA,MAAMA,IAAgBC,EAAG;AAAA,EACvB,MAAM,CAAC,iBAAiB,kCAAkC;AAAA,EAC1D,UAAU;AAAA;AAAA;AAAA,IAGR,WAAW;AAAA,MACT,aAAa;AAAA,MACb,cAAc;AAAA,MACd,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MACjB,cAAc;AAAA,IAAA;AAAA,EAChB;AAAA,EAEF,iBAAiB;AAAA,IACf,WAAW;AAAA,EAAA;AAEf,CAAC,GAMYC,IAAQ,CAACC,MAAsB;AAC1C,QAAM,EAAE,WAAAC,IAAY,WAAW,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAE5D,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAGV,EAAc,EAAE,WAAAI,EAAA,CAAW,GAAGC,CAAS;AAAA,MACrD,kBAAgBD;AAAA,MACf,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}