mogh_ui 0.1.0

package/dist/components/config/index.js

@@ -0,0 +1,217 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, useMemo } from "react";
+import {
+  Anchor,
+  Box,
+  Button,
+  Flex,
+  Group,
+  ScrollArea,
+  Select,
+  Stack,
+  Text
+} from "@mantine/core";
+import { ConfirmUpdate } from "./confirm";
+import { Bookmark, History } from "lucide-react";
+import { ConfigGroup } from "./group";
+import { UnsavedChanges } from "./unsaved-changes";
+import { ConfigLayout } from "./layout";
+export * from "./confirm";
+export * from "./group";
+export * from "./item";
+export * from "./layout";
+export * from "./unsaved-changes";
+function Config({
+  original,
+  update,
+  setUpdate,
+  disabled,
+  onSave,
+  titleOther,
+  disableSidebar,
+  fileContentsLanguage,
+  enableFancyToml,
+  groups: _groups
+}) {
+  const changesMade = Object.keys(update).length ? true : false;
+  const onConfirm = async () => {
+    await onSave();
+    setUpdate({});
+  };
+  const onReset = () => setUpdate({});
+  const groups = useMemo(
+    () => Object.entries(_groups).filter(([_, groupArgs]) => !!groupArgs),
+    [_groups]
+  );
+  const GroupsComponent = useMemo(
+    () => groups.map(([group, groupArgs]) => {
+      return /* @__PURE__ */ jsxs(Fragment2, { children: [
+        group && /* @__PURE__ */ jsx(Text, { visibleFrom: "lg", fz: "h2", tt: "uppercase", mt: "xl", children: group }),
+        /* @__PURE__ */ jsx(Stack, { children: groupArgs.filter(({ hidden }) => !hidden).map(
+          ({
+            label,
+            labelHidden,
+            icon,
+            labelExtra,
+            actions,
+            description,
+            contentHidden,
+            fields
+          }) => /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              id: group + label,
+              p: "xl",
+              gap: "md",
+              className: "bordered-light",
+              bdrs: "md",
+              style: { scrollMarginTop: 94 },
+              children: [
+                !labelHidden && /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+                  /* @__PURE__ */ jsxs(Stack, { gap: "0", children: [
+                    /* @__PURE__ */ jsxs(Group, { children: [
+                      icon,
+                      /* @__PURE__ */ jsx(Text, { fz: "h3", children: label }),
+                      labelExtra
+                    ] }),
+                    description && /* @__PURE__ */ jsx(Text, { c: "dimmed", children: description })
+                  ] }),
+                  actions
+                ] }),
+                !contentHidden && /* @__PURE__ */ jsx(
+                  ConfigGroup,
+                  {
+                    config: original,
+                    update,
+                    setUpdate: (u) => setUpdate((p) => ({ ...p, ...u })),
+                    fields,
+                    disabled
+                  }
+                )
+              ]
+            },
+            group + label
+          )
+        ) })
+      ] }, group);
+    }),
+    [groups]
+  );
+  const SaveOrReset = ({
+    unsavedIndicator,
+    fullWidth
+  }) => changesMade && /* @__PURE__ */ jsxs(Fragment, { children: [
+    unsavedIndicator && /* @__PURE__ */ jsx(UnsavedChanges, { fullWidth }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        onClick: onReset,
+        disabled: disabled || !changesMade,
+        leftSection: /* @__PURE__ */ jsx(History, { size: "1rem" }),
+        fullWidth,
+        w: fullWidth ? void 0 : 100,
+        children: "Reset"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmUpdate,
+      {
+        original,
+        update,
+        onConfirm,
+        disabled,
+        fileContentsLanguage,
+        fullWidth,
+        enableFancyToml
+      }
+    )
+  ] });
+  const SaveOrResetComponent = changesMade && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Group, { visibleFrom: "xs", justify: "flex-end", children: /* @__PURE__ */ jsx(SaveOrReset, { unsavedIndicator: true }) }),
+    /* @__PURE__ */ jsx(Stack, { hiddenFrom: "xs", children: /* @__PURE__ */ jsx(SaveOrReset, { unsavedIndicator: true, fullWidth: true }) })
+  ] });
+  return /* @__PURE__ */ jsxs(ConfigLayout, { titleOther, SaveOrReset: SaveOrResetComponent, children: [
+    disableSidebar && /* @__PURE__ */ jsxs(Fragment, { children: [
+      GroupsComponent,
+      SaveOrResetComponent
+    ] }),
+    !disableSidebar && /* @__PURE__ */ jsxs(Flex, { w: "100%", gap: "md", direction: { base: "column", lg: "row" }, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          visibleFrom: "lg",
+          pos: "relative",
+          className: "bordered-light",
+          style: {
+            borderLeftWidth: 0,
+            borderBottomWidth: 0,
+            borderTopRightRadius: "var(--mantine-radius-md)"
+          },
+          children: /* @__PURE__ */ jsxs(Stack, { pos: "sticky", w: 175, top: 88, pb: 24, m: "lg", children: [
+            /* @__PURE__ */ jsx(
+              ScrollArea,
+              {
+                mah: changesMade ? "calc(100vh - 220px)" : "calc(100vh - 130px)",
+                children: /* @__PURE__ */ jsx(Stack, { children: groups.filter(([_, groupArgs]) => groupArgs).map(([group, groupArgs]) => /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+                  /* @__PURE__ */ jsxs(Group, { justify: "flex-end", mr: "md", c: "dimmed", children: [
+                    /* @__PURE__ */ jsx(Bookmark, { size: "1rem" }),
+                    /* @__PURE__ */ jsx(Text, { tt: "uppercase", children: group || "GENERAL" })
+                  ] }),
+                  /* @__PURE__ */ jsx(Stack, { gap: "0.1rem", children: groupArgs && groupArgs.filter((groupArgs2) => !groupArgs2.hidden).map((groupArgs2) => /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "subtle",
+                      justify: "flex-end",
+                      size: "sm",
+                      fullWidth: true,
+                      renderRoot: (props) => /* @__PURE__ */ jsx(
+                        Anchor,
+                        {
+                          href: "#" + group + groupArgs2.label,
+                          ...props
+                        }
+                      ),
+                      children: groupArgs2.label
+                    },
+                    group + groupArgs2.label
+                  )) })
+                ] }, group)) })
+              }
+            ),
+            /* @__PURE__ */ jsx(Stack, { gap: "xs", children: /* @__PURE__ */ jsx(SaveOrReset, { fullWidth: true }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          hiddenFrom: "lg",
+          className: "select-nondimmed-placeholder",
+          placeholder: "Go To",
+          leftSection: /* @__PURE__ */ jsx(Bookmark, { size: "1rem" }),
+          value: null,
+          data: groups.filter(([_, groupArgs]) => groupArgs).map(([group, groupArgs]) => ({
+            group,
+            items: groupArgs.map((arg) => ({
+              label: arg.label,
+              value: group + arg.label
+            }))
+          })),
+          onChange: (group) => {
+            if (!group) return;
+            window.location.hash = group;
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(Stack, { style: { flexGrow: 1 }, gap: "md", children: [
+        GroupsComponent,
+        SaveOrResetComponent
+      ] })
+    ] })
+  ] });
+}
+export {
+  Config
+};
+//# sourceMappingURL=index.js.map

package/dist/components/config/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/config/index.tsx"],"sourcesContent":["import { Fragment, ReactNode, SetStateAction, useMemo } from \"react\";\nimport { MonacoLanguage } from \"../monaco\";\nimport {\n  Anchor,\n  Box,\n  Button,\n  Flex,\n  Group,\n  ScrollArea,\n  Select,\n  Stack,\n  Text,\n} from \"@mantine/core\";\nimport { ConfirmUpdate } from \"./confirm\";\nimport { Bookmark, History } from \"lucide-react\";\nimport { ConfigGroup } from \"./group\";\nimport { UnsavedChanges } from \"./unsaved-changes\";\nimport { ConfigLayout } from \"./layout\";\n\nexport * from \"./confirm\";\nexport * from \"./group\";\nexport * from \"./item\";\nexport * from \"./layout\";\nexport * from \"./unsaved-changes\";\n\nexport interface ConfigFieldArgs {\n  label?: string;\n  description?: ReactNode;\n  /** Use a selector instead of input */\n  options?: { value: string; label?: string; icon?: ReactNode }[];\n  placeholder?: string;\n  hidden?: boolean;\n  disabled?: boolean;\n}\n\nexport interface ConfigGroupArgs<T> {\n  label: string;\n  labelExtra?: ReactNode;\n  icon?: ReactNode;\n  description?: ReactNode;\n  actions?: ReactNode;\n  hidden?: boolean;\n  labelHidden?: boolean;\n  contentHidden?: boolean;\n  fields: {\n    [K in keyof Partial<T>]:\n      | boolean\n      | ConfigFieldArgs\n      | ((value: T[K], set: (value: Partial<T>) => void) => ReactNode);\n  };\n}\n\nexport interface ConfigProps<T> {\n  original: T;\n  update: Partial<T>;\n  setUpdate: React.Dispatch<SetStateAction<Partial<T>>>;\n  disabled: boolean;\n  onSave: () => Promise<unknown>;\n  titleOther?: ReactNode;\n  disableSidebar?: boolean;\n  fileContentsLanguage?: MonacoLanguage;\n  enableFancyToml?: boolean;\n  groups: Record<\n    string, // Section key\n    ConfigGroupArgs<T>[] | false | undefined\n  >;\n}\n\nexport function Config<T>({\n  original,\n  update,\n  setUpdate,\n  disabled,\n  onSave,\n  titleOther,\n  disableSidebar,\n  fileContentsLanguage,\n  enableFancyToml,\n  groups: _groups,\n}: ConfigProps<T>) {\n  const changesMade = Object.keys(update).length ? true : false;\n  const onConfirm = async () => {\n    await onSave();\n    setUpdate({});\n  };\n  const onReset = () => setUpdate({});\n\n  const groups = useMemo(\n    () => Object.entries(_groups).filter(([_, groupArgs]) => !!groupArgs),\n    [_groups],\n  );\n\n  const GroupsComponent = useMemo(\n    () =>\n      groups.map(([group, groupArgs]) => {\n        return (\n          <Fragment key={group}>\n            {group && (\n              <Text visibleFrom=\"lg\" fz=\"h2\" tt=\"uppercase\" mt=\"xl\">\n                {group}\n              </Text>\n            )}\n\n            <Stack>\n              {(groupArgs as ConfigGroupArgs<T>[])\n                .filter(({ hidden }) => !hidden)\n                .map(\n                  ({\n                    label,\n                    labelHidden,\n                    icon,\n                    labelExtra,\n                    actions,\n                    description,\n                    contentHidden,\n                    fields,\n                  }) => (\n                    <Stack\n                      key={group + label}\n                      id={group + label}\n                      p=\"xl\"\n                      gap=\"md\"\n                      className=\"bordered-light\"\n                      bdrs=\"md\"\n                      style={{ scrollMarginTop: 94 }}\n                    >\n                      {!labelHidden && (\n                        <Group justify=\"space-between\">\n                          <Stack gap=\"0\">\n                            <Group>\n                              {icon}\n                              <Text fz=\"h3\">{label}</Text>\n                              {labelExtra}\n                            </Group>\n                            {description && (\n                              <Text c=\"dimmed\">{description}</Text>\n                            )}\n                          </Stack>\n                          {actions}\n                        </Group>\n                      )}\n                      {!contentHidden && (\n                        <ConfigGroup\n                          config={original}\n                          update={update}\n                          setUpdate={(u) => setUpdate((p) => ({ ...p, ...u }))}\n                          fields={fields}\n                          disabled={disabled}\n                        />\n                      )}\n                    </Stack>\n                  ),\n                )}\n            </Stack>\n          </Fragment>\n        );\n      }),\n    [groups],\n  );\n\n  const SaveOrReset = ({\n    unsavedIndicator,\n    fullWidth,\n  }: {\n    unsavedIndicator?: boolean;\n    fullWidth?: boolean;\n  }) =>\n    changesMade && (\n      <>\n        {unsavedIndicator && <UnsavedChanges fullWidth={fullWidth} />}\n        <Button\n          variant=\"outline\"\n          onClick={onReset}\n          disabled={disabled || !changesMade}\n          leftSection={<History size=\"1rem\" />}\n          fullWidth={fullWidth}\n          w={fullWidth ? undefined : 100}\n        >\n          Reset\n        </Button>\n        <ConfirmUpdate\n          original={original}\n          update={update}\n          onConfirm={onConfirm}\n          disabled={disabled}\n          fileContentsLanguage={fileContentsLanguage}\n          fullWidth={fullWidth}\n          enableFancyToml={enableFancyToml}\n        />\n      </>\n    );\n\n  const SaveOrResetComponent = changesMade && (\n    <>\n      <Group visibleFrom=\"xs\" justify=\"flex-end\">\n        <SaveOrReset unsavedIndicator />\n      </Group>\n      <Stack hiddenFrom=\"xs\">\n        <SaveOrReset unsavedIndicator fullWidth />\n      </Stack>\n    </>\n  );\n\n  return (\n    <ConfigLayout titleOther={titleOther} SaveOrReset={SaveOrResetComponent}>\n      {disableSidebar && (\n        <>\n          {GroupsComponent}\n          {SaveOrResetComponent}\n        </>\n      )}\n      {!disableSidebar && (\n        <Flex w=\"100%\" gap=\"md\" direction={{ base: \"column\", lg: \"row\" }}>\n          {/** SIDEBAR (LG) */}\n          <Box\n            visibleFrom=\"lg\"\n            pos=\"relative\"\n            className=\"bordered-light\"\n            style={{\n              borderLeftWidth: 0,\n              borderBottomWidth: 0,\n              borderTopRightRadius: \"var(--mantine-radius-md)\",\n            }}\n          >\n            <Stack pos=\"sticky\" w={175} top={88} pb={24} m=\"lg\">\n              {/** ANCHORS */}\n              <ScrollArea\n                mah={\n                  changesMade ? \"calc(100vh - 220px)\" : \"calc(100vh - 130px)\"\n                }\n              >\n                <Stack>\n                  {groups\n                    .filter(([_, groupArgs]) => groupArgs)\n                    .map(([group, groupArgs]) => (\n                      <Stack key={group} gap=\"xs\">\n                        <Group justify=\"flex-end\" mr=\"md\" c=\"dimmed\">\n                          <Bookmark size=\"1rem\" />\n                          <Text tt=\"uppercase\">{group || \"GENERAL\"}</Text>\n                        </Group>\n                        <Stack gap=\"0.1rem\">\n                          {groupArgs &&\n                            groupArgs\n                              .filter((groupArgs) => !groupArgs.hidden)\n                              .map((groupArgs) => (\n                                <Button\n                                  key={group + groupArgs.label}\n                                  variant=\"subtle\"\n                                  justify=\"flex-end\"\n                                  size=\"sm\"\n                                  fullWidth\n                                  renderRoot={(props) => (\n                                    <Anchor\n                                      href={\"#\" + group + groupArgs.label}\n                                      {...props}\n                                    />\n                                  )}\n                                >\n                                  {groupArgs.label}\n                                </Button>\n                              ))}\n                        </Stack>\n                      </Stack>\n                    ))}\n                </Stack>\n              </ScrollArea>\n\n              {/** SAVE */}\n              <Stack gap=\"xs\">\n                <SaveOrReset fullWidth />\n              </Stack>\n            </Stack>\n          </Box>\n\n          {/** SELECTOR (MOBILE) */}\n          <Select\n            hiddenFrom=\"lg\"\n            className=\"select-nondimmed-placeholder\"\n            placeholder=\"Go To\"\n            leftSection={<Bookmark size=\"1rem\" />}\n            value={null}\n            data={groups\n              .filter(([_, groupArgs]) => groupArgs)\n              .map(([group, groupArgs]) => ({\n                group,\n                items: (groupArgs as ConfigGroupArgs<T>[]).map((arg) => ({\n                  label: arg.label,\n                  value: group + arg.label,\n                })),\n              }))}\n            onChange={(group) => {\n              if (!group) return;\n              window.location.hash = group;\n            }}\n          />\n\n          {/** CONTENT */}\n          <Stack style={{ flexGrow: 1 }} gap=\"md\">\n            {GroupsComponent}\n            {SaveOrResetComponent}\n          </Stack>\n        </Flex>\n      )}\n    </ConfigLayout>\n  );\n}\n"],"mappings":"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","names":["Fragment","groupArgs"]}

package/dist/components/config/item.cjs

@@ -0,0 +1,139 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var item_exports = {};
+__export(item_exports, {
+  ConfigInput: () => ConfigInput,
+  ConfigItem: () => ConfigItem,
+  ConfigList: () => ConfigList,
+  ConfigSwitch: () => ConfigSwitch
+});
+module.exports = __toCommonJS(item_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@mantine/core");
+var import_react = require("react");
+var import_formatting = require("../../formatting");
+var import_enable_switch = require("../enable-switch");
+var import_input_list = require("../input-list");
+var import_lucide_react = require("lucide-react");
+const ConfigItem = (0, import_core.createPolymorphicComponent)(
+  (0, import_react.forwardRef)(
+    ({ label, labelExtra, description, children, ...props }, ref) => {
+      const labelDescription = (label || description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "0", children: [
+        typeof label === "string" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { fz: "h3", children: (0, import_formatting.fmtSnakeCaseToUpperSpaceCase)(label) }),
+        label && typeof label !== "string" && label,
+        description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { c: "dimmed", children: description })
+      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { ...props, ref, children: [
+        labelExtra ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { children: [
+          labelDescription,
+          labelExtra
+        ] }) : labelDescription,
+        children
+      ] });
+    }
+  )
+);
+function ConfigInput({
+  value,
+  disabled,
+  placeholder,
+  onChange,
+  onValueChange,
+  onBlur,
+  inputLeft,
+  inputRight,
+  inputProps,
+  email,
+  ...itemProps
+}) {
+  const inputNode = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.TextInput,
+    {
+      w: { base: "85%", lg: 400 },
+      value,
+      placeholder,
+      disabled,
+      type: typeof value === "number" ? "number" : email ? "email" : void 0,
+      onChange: (e) => {
+        onChange?.(e);
+        onValueChange?.(e.target.value);
+      },
+      onBlur: (e) => onBlur?.(e.target.value),
+      ...inputProps
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfigItem, { ...itemProps, children: inputLeft || inputRight ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { children: [
+    inputLeft,
+    inputNode,
+    inputRight
+  ] }) : inputNode });
+}
+function ConfigSwitch({
+  value,
+  disabled,
+  onCheckedChange,
+  switchProps,
+  ...itemProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfigItem, { ...itemProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_enable_switch.EnableSwitch,
+    {
+      checked: value,
+      onCheckedChange,
+      disabled,
+      ...switchProps
+    }
+  ) });
+}
+function ConfigList({
+  addLabel,
+  label,
+  description,
+  ...inputListProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ConfigItem, { label, description, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_input_list.InputList,
+      {
+        inputProps: { w: { base: "85%", lg: 400 } },
+        ...inputListProps
+      }
+    ),
+    !inputListProps.disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.Button,
+      {
+        leftSection: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plus, { size: "1rem" }),
+        onClick: () => inputListProps.set({
+          [inputListProps.field]: [...inputListProps.values, ""]
+        }),
+        w: { base: "85%", lg: 400 },
+        disabled: inputListProps.disabled,
+        children: addLabel ?? ("Add " + label?.endsWith("s") ? label?.slice(0, -1) : label)
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConfigInput,
+  ConfigItem,
+  ConfigList,
+  ConfigSwitch
+});
+//# sourceMappingURL=item.cjs.map

package/dist/components/config/item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/config/item.tsx"],"sourcesContent":["import {\n  Button,\n  createPolymorphicComponent,\n  Group,\n  Stack,\n  StackProps,\n  SwitchProps,\n  Text,\n  TextInput,\n  TextInputProps,\n} from \"@mantine/core\";\nimport { forwardRef, ReactNode } from \"react\";\nimport { fmtSnakeCaseToUpperSpaceCase } from \"../../formatting\";\nimport { EnableSwitch } from \"../enable-switch\";\nimport { InputList, InputListProps } from \"../input-list\";\nimport { Plus } from \"lucide-react\";\n\n// https://mantine.dev/guides/polymorphic/#create-your-own-polymorphic-components\n\nexport interface ConfigItemProps extends StackProps {\n  label?: ReactNode;\n  labelExtra?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const ConfigItem = createPolymorphicComponent<\"div\", ConfigItemProps>(\n  forwardRef<HTMLDivElement, ConfigItemProps>(\n    ({ label, labelExtra, description, children, ...props }, ref) => {\n      const labelDescription = (label || description) && (\n        <Stack gap=\"0\">\n          {typeof label === \"string\" && (\n            <Text fz=\"h3\">{fmtSnakeCaseToUpperSpaceCase(label)}</Text>\n          )}\n          {label && typeof label !== \"string\" && label}\n          {description && <Text c=\"dimmed\">{description}</Text>}\n        </Stack>\n      );\n      return (\n        <Stack {...props} ref={ref}>\n          {labelExtra ? (\n            <Group>\n              {labelDescription}\n              {labelExtra}\n            </Group>\n          ) : (\n            labelDescription\n          )}\n          {children}\n        </Stack>\n      );\n    },\n  ),\n);\n\nexport function ConfigInput({\n  value,\n  disabled,\n  placeholder,\n  onChange,\n  onValueChange,\n  onBlur,\n  inputLeft,\n  inputRight,\n  inputProps,\n  email,\n  ...itemProps\n}: {\n  value: string | number | undefined;\n  disabled?: boolean;\n  placeholder?: string;\n  onValueChange?: (value: string) => void;\n  onBlur?: (value: string) => void;\n  inputLeft?: ReactNode;\n  inputRight?: ReactNode;\n  inputProps?: TextInputProps;\n  email?: boolean;\n} & Omit<ConfigItemProps, \"children\">) {\n  const inputNode = (\n    <TextInput\n      w={{ base: \"85%\", lg: 400 }}\n      value={value}\n      placeholder={placeholder}\n      disabled={disabled}\n      type={typeof value === \"number\" ? \"number\" : email ? \"email\" : undefined}\n      onChange={(e) => {\n        onChange?.(e);\n        onValueChange?.(e.target.value);\n      }}\n      onBlur={(e) => onBlur?.(e.target.value)}\n      {...inputProps}\n    />\n  );\n  return (\n    <ConfigItem {...itemProps}>\n      {inputLeft || inputRight ? (\n        <Group>\n          {inputLeft}\n          {inputNode}\n          {inputRight}\n        </Group>\n      ) : (\n        inputNode\n      )}\n    </ConfigItem>\n  );\n}\n\nexport function ConfigSwitch({\n  value,\n  disabled,\n  onCheckedChange,\n  switchProps,\n  ...itemProps\n}: {\n  value: boolean | undefined;\n  disabled: boolean;\n  onCheckedChange: (value: boolean) => void;\n  switchProps?: SwitchProps;\n} & Omit<ConfigItemProps, \"children\">) {\n  return (\n    <ConfigItem {...itemProps}>\n      <EnableSwitch\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        disabled={disabled}\n        {...switchProps}\n      />\n    </ConfigItem>\n  );\n}\n\nexport function ConfigList<T>({\n  addLabel,\n  label,\n  description,\n  ...inputListProps\n}: { label?: string; addLabel?: string } & InputListProps<T> &\n  Omit<ConfigItemProps, \"children\">) {\n  return (\n    <ConfigItem label={label} description={description}>\n      <InputList\n        inputProps={{ w: { base: \"85%\", lg: 400 } }}\n        {...inputListProps}\n      />\n      {!inputListProps.disabled && (\n        <Button\n          leftSection={<Plus size=\"1rem\" />}\n          onClick={() =>\n            inputListProps.set({\n              [inputListProps.field]: [...inputListProps.values, \"\"],\n            } as Partial<T>)\n          }\n          w={{ base: \"85%\", lg: 400 }}\n          disabled={inputListProps.disabled}\n        >\n          {addLabel ??\n            (\"Add \" + label?.endsWith(\"s\") ? label?.slice(0, -1) : label)}\n        </Button>\n      )}\n    </ConfigItem>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BQ;AA9BR,kBAUO;AACP,mBAAsC;AACtC,wBAA6C;AAC7C,2BAA6B;AAC7B,wBAA0C;AAC1C,0BAAqB;AAWd,MAAM,iBAAa;AAAA,MACxB;AAAA,IACE,CAAC,EAAE,OAAO,YAAY,aAAa,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC/D,YAAM,oBAAoB,SAAS,gBACjC,6CAAC,qBAAM,KAAI,KACR;AAAA,eAAO,UAAU,YAChB,4CAAC,oBAAK,IAAG,MAAM,8DAA6B,KAAK,GAAE;AAAA,QAEpD,SAAS,OAAO,UAAU,YAAY;AAAA,QACtC,eAAe,4CAAC,oBAAK,GAAE,UAAU,uBAAY;AAAA,SAChD;AAEF,aACE,6CAAC,qBAAO,GAAG,OAAO,KACf;AAAA,qBACC,6CAAC,qBACE;AAAA;AAAA,UACA;AAAA,WACH,IAEA;AAAA,QAED;AAAA,SACH;AAAA,IAEJ;AAAA,EACF;AACF;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAUuC;AACrC,QAAM,YACJ;AAAA,IAAC;AAAA;AAAA,MACC,GAAG,EAAE,MAAM,OAAO,IAAI,IAAI;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,OAAO,UAAU,WAAW,WAAW,QAAQ,UAAU;AAAA,MAC/D,UAAU,CAAC,MAAM;AACf,mBAAW,CAAC;AACZ,wBAAgB,EAAE,OAAO,KAAK;AAAA,MAChC;AAAA,MACA,QAAQ,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACrC,GAAG;AAAA;AAAA,EACN;AAEF,SACE,4CAAC,cAAY,GAAG,WACb,uBAAa,aACZ,6CAAC,qBACE;AAAA;AAAA,IACA;AAAA,IACA;AAAA,KACH,IAEA,WAEJ;AAEJ;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAKuC;AACrC,SACE,4CAAC,cAAY,GAAG,WACd;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAEO,SAAS,WAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACqC;AACnC,SACE,6CAAC,cAAW,OAAc,aACxB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,EAAE,GAAG,EAAE,MAAM,OAAO,IAAI,IAAI,EAAE;AAAA,QACzC,GAAG;AAAA;AAAA,IACN;AAAA,IACC,CAAC,eAAe,YACf;AAAA,MAAC;AAAA;AAAA,QACC,aAAa,4CAAC,4BAAK,MAAK,QAAO;AAAA,QAC/B,SAAS,MACP,eAAe,IAAI;AAAA,UACjB,CAAC,eAAe,KAAK,GAAG,CAAC,GAAG,eAAe,QAAQ,EAAE;AAAA,QACvD,CAAe;AAAA,QAEjB,GAAG,EAAE,MAAM,OAAO,IAAI,IAAI;AAAA,QAC1B,UAAU,eAAe;AAAA,QAExB,uBACE,SAAS,OAAO,SAAS,GAAG,IAAI,OAAO,MAAM,GAAG,EAAE,IAAI;AAAA;AAAA,IAC3D;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/config/item.d.cts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as _mantine_core from '@mantine/core';
+import { TextInputProps, StackProps, SwitchProps } from '@mantine/core';
+import { InputListProps } from '../input-list.cjs';
+
+interface ConfigItemProps extends StackProps {
+    label?: ReactNode;
+    labelExtra?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+}
+declare const ConfigItem: (<C = "div">(props: _mantine_core.PolymorphicComponentProps<C, ConfigItemProps>) => React.ReactElement) & Omit<react.FunctionComponent<(ConfigItemProps & {
+    component?: any;
+} & Omit<any, "component" | keyof ConfigItemProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (ConfigItemProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & Record<string, never>;
+declare function ConfigInput({ value, disabled, placeholder, onChange, onValueChange, onBlur, inputLeft, inputRight, inputProps, email, ...itemProps }: {
+    value: string | number | undefined;
+    disabled?: boolean;
+    placeholder?: string;
+    onValueChange?: (value: string) => void;
+    onBlur?: (value: string) => void;
+    inputLeft?: ReactNode;
+    inputRight?: ReactNode;
+    inputProps?: TextInputProps;
+    email?: boolean;
+} & Omit<ConfigItemProps, "children">): react_jsx_runtime.JSX.Element;
+declare function ConfigSwitch({ value, disabled, onCheckedChange, switchProps, ...itemProps }: {
+    value: boolean | undefined;
+    disabled: boolean;
+    onCheckedChange: (value: boolean) => void;
+    switchProps?: SwitchProps;
+} & Omit<ConfigItemProps, "children">): react_jsx_runtime.JSX.Element;
+declare function ConfigList<T>({ addLabel, label, description, ...inputListProps }: {
+    label?: string;
+    addLabel?: string;
+} & InputListProps<T> & Omit<ConfigItemProps, "children">): react_jsx_runtime.JSX.Element;
+
+export { ConfigInput, ConfigItem, type ConfigItemProps, ConfigList, ConfigSwitch };

package/dist/components/config/item.d.ts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as _mantine_core from '@mantine/core';
+import { TextInputProps, StackProps, SwitchProps } from '@mantine/core';
+import { InputListProps } from '../input-list.js';
+
+interface ConfigItemProps extends StackProps {
+    label?: ReactNode;
+    labelExtra?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+}
+declare const ConfigItem: (<C = "div">(props: _mantine_core.PolymorphicComponentProps<C, ConfigItemProps>) => React.ReactElement) & Omit<react.FunctionComponent<(ConfigItemProps & {
+    component?: any;
+} & Omit<any, "component" | keyof ConfigItemProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (ConfigItemProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & Record<string, never>;
+declare function ConfigInput({ value, disabled, placeholder, onChange, onValueChange, onBlur, inputLeft, inputRight, inputProps, email, ...itemProps }: {
+    value: string | number | undefined;
+    disabled?: boolean;
+    placeholder?: string;
+    onValueChange?: (value: string) => void;
+    onBlur?: (value: string) => void;
+    inputLeft?: ReactNode;
+    inputRight?: ReactNode;
+    inputProps?: TextInputProps;
+    email?: boolean;
+} & Omit<ConfigItemProps, "children">): react_jsx_runtime.JSX.Element;
+declare function ConfigSwitch({ value, disabled, onCheckedChange, switchProps, ...itemProps }: {
+    value: boolean | undefined;
+    disabled: boolean;
+    onCheckedChange: (value: boolean) => void;
+    switchProps?: SwitchProps;
+} & Omit<ConfigItemProps, "children">): react_jsx_runtime.JSX.Element;
+declare function ConfigList<T>({ addLabel, label, description, ...inputListProps }: {
+    label?: string;
+    addLabel?: string;
+} & InputListProps<T> & Omit<ConfigItemProps, "children">): react_jsx_runtime.JSX.Element;
+
+export { ConfigInput, ConfigItem, type ConfigItemProps, ConfigList, ConfigSwitch };

package/dist/components/config/item.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Button,
+  createPolymorphicComponent,
+  Group,
+  Stack,
+  Text,
+  TextInput
+} from "@mantine/core";
+import { forwardRef } from "react";
+import { fmtSnakeCaseToUpperSpaceCase } from "../../formatting";
+import { EnableSwitch } from "../enable-switch";
+import { InputList } from "../input-list";
+import { Plus } from "lucide-react";
+const ConfigItem = createPolymorphicComponent(
+  forwardRef(
+    ({ label, labelExtra, description, children, ...props }, ref) => {
+      const labelDescription = (label || description) && /* @__PURE__ */ jsxs(Stack, { gap: "0", children: [
+        typeof label === "string" && /* @__PURE__ */ jsx(Text, { fz: "h3", children: fmtSnakeCaseToUpperSpaceCase(label) }),
+        label && typeof label !== "string" && label,
+        description && /* @__PURE__ */ jsx(Text, { c: "dimmed", children: description })
+      ] });
+      return /* @__PURE__ */ jsxs(Stack, { ...props, ref, children: [
+        labelExtra ? /* @__PURE__ */ jsxs(Group, { children: [
+          labelDescription,
+          labelExtra
+        ] }) : labelDescription,
+        children
+      ] });
+    }
+  )
+);
+function ConfigInput({
+  value,
+  disabled,
+  placeholder,
+  onChange,
+  onValueChange,
+  onBlur,
+  inputLeft,
+  inputRight,
+  inputProps,
+  email,
+  ...itemProps
+}) {
+  const inputNode = /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      w: { base: "85%", lg: 400 },
+      value,
+      placeholder,
+      disabled,
+      type: typeof value === "number" ? "number" : email ? "email" : void 0,
+      onChange: (e) => {
+        onChange?.(e);
+        onValueChange?.(e.target.value);
+      },
+      onBlur: (e) => onBlur?.(e.target.value),
+      ...inputProps
+    }
+  );
+  return /* @__PURE__ */ jsx(ConfigItem, { ...itemProps, children: inputLeft || inputRight ? /* @__PURE__ */ jsxs(Group, { children: [
+    inputLeft,
+    inputNode,
+    inputRight
+  ] }) : inputNode });
+}
+function ConfigSwitch({
+  value,
+  disabled,
+  onCheckedChange,
+  switchProps,
+  ...itemProps
+}) {
+  return /* @__PURE__ */ jsx(ConfigItem, { ...itemProps, children: /* @__PURE__ */ jsx(
+    EnableSwitch,
+    {
+      checked: value,
+      onCheckedChange,
+      disabled,
+      ...switchProps
+    }
+  ) });
+}
+function ConfigList({
+  addLabel,
+  label,
+  description,
+  ...inputListProps
+}) {
+  return /* @__PURE__ */ jsxs(ConfigItem, { label, description, children: [
+    /* @__PURE__ */ jsx(
+      InputList,
+      {
+        inputProps: { w: { base: "85%", lg: 400 } },
+        ...inputListProps
+      }
+    ),
+    !inputListProps.disabled && /* @__PURE__ */ jsx(
+      Button,
+      {
+        leftSection: /* @__PURE__ */ jsx(Plus, { size: "1rem" }),
+        onClick: () => inputListProps.set({
+          [inputListProps.field]: [...inputListProps.values, ""]
+        }),
+        w: { base: "85%", lg: 400 },
+        disabled: inputListProps.disabled,
+        children: addLabel ?? ("Add " + label?.endsWith("s") ? label?.slice(0, -1) : label)
+      }
+    )
+  ] });
+}
+export {
+  ConfigInput,
+  ConfigItem,
+  ConfigList,
+  ConfigSwitch
+};
+//# sourceMappingURL=item.js.map

package/dist/components/config/item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/config/item.tsx"],"sourcesContent":["import {\n  Button,\n  createPolymorphicComponent,\n  Group,\n  Stack,\n  StackProps,\n  SwitchProps,\n  Text,\n  TextInput,\n  TextInputProps,\n} from \"@mantine/core\";\nimport { forwardRef, ReactNode } from \"react\";\nimport { fmtSnakeCaseToUpperSpaceCase } from \"../../formatting\";\nimport { EnableSwitch } from \"../enable-switch\";\nimport { InputList, InputListProps } from \"../input-list\";\nimport { Plus } from \"lucide-react\";\n\n// https://mantine.dev/guides/polymorphic/#create-your-own-polymorphic-components\n\nexport interface ConfigItemProps extends StackProps {\n  label?: ReactNode;\n  labelExtra?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const ConfigItem = createPolymorphicComponent<\"div\", ConfigItemProps>(\n  forwardRef<HTMLDivElement, ConfigItemProps>(\n    ({ label, labelExtra, description, children, ...props }, ref) => {\n      const labelDescription = (label || description) && (\n        <Stack gap=\"0\">\n          {typeof label === \"string\" && (\n            <Text fz=\"h3\">{fmtSnakeCaseToUpperSpaceCase(label)}</Text>\n          )}\n          {label && typeof label !== \"string\" && label}\n          {description && <Text c=\"dimmed\">{description}</Text>}\n        </Stack>\n      );\n      return (\n        <Stack {...props} ref={ref}>\n          {labelExtra ? (\n            <Group>\n              {labelDescription}\n              {labelExtra}\n            </Group>\n          ) : (\n            labelDescription\n          )}\n          {children}\n        </Stack>\n      );\n    },\n  ),\n);\n\nexport function ConfigInput({\n  value,\n  disabled,\n  placeholder,\n  onChange,\n  onValueChange,\n  onBlur,\n  inputLeft,\n  inputRight,\n  inputProps,\n  email,\n  ...itemProps\n}: {\n  value: string | number | undefined;\n  disabled?: boolean;\n  placeholder?: string;\n  onValueChange?: (value: string) => void;\n  onBlur?: (value: string) => void;\n  inputLeft?: ReactNode;\n  inputRight?: ReactNode;\n  inputProps?: TextInputProps;\n  email?: boolean;\n} & Omit<ConfigItemProps, \"children\">) {\n  const inputNode = (\n    <TextInput\n      w={{ base: \"85%\", lg: 400 }}\n      value={value}\n      placeholder={placeholder}\n      disabled={disabled}\n      type={typeof value === \"number\" ? \"number\" : email ? \"email\" : undefined}\n      onChange={(e) => {\n        onChange?.(e);\n        onValueChange?.(e.target.value);\n      }}\n      onBlur={(e) => onBlur?.(e.target.value)}\n      {...inputProps}\n    />\n  );\n  return (\n    <ConfigItem {...itemProps}>\n      {inputLeft || inputRight ? (\n        <Group>\n          {inputLeft}\n          {inputNode}\n          {inputRight}\n        </Group>\n      ) : (\n        inputNode\n      )}\n    </ConfigItem>\n  );\n}\n\nexport function ConfigSwitch({\n  value,\n  disabled,\n  onCheckedChange,\n  switchProps,\n  ...itemProps\n}: {\n  value: boolean | undefined;\n  disabled: boolean;\n  onCheckedChange: (value: boolean) => void;\n  switchProps?: SwitchProps;\n} & Omit<ConfigItemProps, \"children\">) {\n  return (\n    <ConfigItem {...itemProps}>\n      <EnableSwitch\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        disabled={disabled}\n        {...switchProps}\n      />\n    </ConfigItem>\n  );\n}\n\nexport function ConfigList<T>({\n  addLabel,\n  label,\n  description,\n  ...inputListProps\n}: { label?: string; addLabel?: string } & InputListProps<T> &\n  Omit<ConfigItemProps, \"children\">) {\n  return (\n    <ConfigItem label={label} description={description}>\n      <InputList\n        inputProps={{ w: { base: \"85%\", lg: 400 } }}\n        {...inputListProps}\n      />\n      {!inputListProps.disabled && (\n        <Button\n          leftSection={<Plus size=\"1rem\" />}\n          onClick={() =>\n            inputListProps.set({\n              [inputListProps.field]: [...inputListProps.values, \"\"],\n            } as Partial<T>)\n          }\n          w={{ base: \"85%\", lg: 400 }}\n          disabled={inputListProps.disabled}\n        >\n          {addLabel ??\n            (\"Add \" + label?.endsWith(\"s\") ? label?.slice(0, -1) : label)}\n        </Button>\n      )}\n    </ConfigItem>\n  );\n}\n"],"mappings":"AA8BQ,SAEI,KAFJ;AA9BR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,kBAA6B;AACtC,SAAS,oCAAoC;AAC7C,SAAS,oBAAoB;AAC7B,SAAS,iBAAiC;AAC1C,SAAS,YAAY;AAWd,MAAM,aAAa;AAAA,EACxB;AAAA,IACE,CAAC,EAAE,OAAO,YAAY,aAAa,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC/D,YAAM,oBAAoB,SAAS,gBACjC,qBAAC,SAAM,KAAI,KACR;AAAA,eAAO,UAAU,YAChB,oBAAC,QAAK,IAAG,MAAM,uCAA6B,KAAK,GAAE;AAAA,QAEpD,SAAS,OAAO,UAAU,YAAY;AAAA,QACtC,eAAe,oBAAC,QAAK,GAAE,UAAU,uBAAY;AAAA,SAChD;AAEF,aACE,qBAAC,SAAO,GAAG,OAAO,KACf;AAAA,qBACC,qBAAC,SACE;AAAA;AAAA,UACA;AAAA,WACH,IAEA;AAAA,QAED;AAAA,SACH;AAAA,IAEJ;AAAA,EACF;AACF;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAUuC;AACrC,QAAM,YACJ;AAAA,IAAC;AAAA;AAAA,MACC,GAAG,EAAE,MAAM,OAAO,IAAI,IAAI;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,OAAO,UAAU,WAAW,WAAW,QAAQ,UAAU;AAAA,MAC/D,UAAU,CAAC,MAAM;AACf,mBAAW,CAAC;AACZ,wBAAgB,EAAE,OAAO,KAAK;AAAA,MAChC;AAAA,MACA,QAAQ,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACrC,GAAG;AAAA;AAAA,EACN;AAEF,SACE,oBAAC,cAAY,GAAG,WACb,uBAAa,aACZ,qBAAC,SACE;AAAA;AAAA,IACA;AAAA,IACA;AAAA,KACH,IAEA,WAEJ;AAEJ;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAKuC;AACrC,SACE,oBAAC,cAAY,GAAG,WACd;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAEO,SAAS,WAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACqC;AACnC,SACE,qBAAC,cAAW,OAAc,aACxB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,EAAE,GAAG,EAAE,MAAM,OAAO,IAAI,IAAI,EAAE;AAAA,QACzC,GAAG;AAAA;AAAA,IACN;AAAA,IACC,CAAC,eAAe,YACf;AAAA,MAAC;AAAA;AAAA,QACC,aAAa,oBAAC,QAAK,MAAK,QAAO;AAAA,QAC/B,SAAS,MACP,eAAe,IAAI;AAAA,UACjB,CAAC,eAAe,KAAK,GAAG,CAAC,GAAG,eAAe,QAAQ,EAAE;AAAA,QACvD,CAAe;AAAA,QAEjB,GAAG,EAAE,MAAM,OAAO,IAAI,IAAI;AAAA,QAC1B,UAAU,eAAe;AAAA,QAExB,uBACE,SAAS,OAAO,SAAS,GAAG,IAAI,OAAO,MAAM,GAAG,EAAE,IAAI;AAAA;AAAA,IAC3D;AAAA,KAEJ;AAEJ;","names":[]}