ui-lab-registry 0.3.411 → 0.3.412

package/dist/components/Button/examples/05-split-action-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"05-split-action-button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/examples/05-split-action-button.tsx"],"names":[],"mappings":"AA2BA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA2E9B"}
+{"version":3,"file":"05-split-action-button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/examples/05-split-action-button.tsx"],"names":[],"mappings":"AA+CA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA2C9B"}

package/dist/components/Button/examples/05-split-action-button.js

@@ -1,33 +1,48 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Button, Divider, Select, Searchable, Flex, Menu } from 'ui-lab-components';
-import { FaSpinner, FaCheck, FaEllipsisVertical, FaHashtag, FaLock } from "react-icons/fa6";
-const channels = [
-    { value: "general", label: "general", description: "General team discussion" },
-    { value: "announcements", label: "announcements", description: "Important team updates", private: true },
-    { value: "design", label: "design", description: "Design work and feedback" },
-    { value: "engineering", label: "engineering", description: "Engineering discussions" },
-    { value: "marketing", label: "marketing", description: "Marketing campaigns" },
-    { value: "product", label: "product", description: "Product roadmap and planning" },
-    { value: "random", label: "random", description: "Off-topic conversations" },
-    { value: "releases", label: "releases", description: "Release announcements", private: true },
-];
-const publishActions = {
-    publish: { label: "Publish Now", variant: "ghost" },
-    draft: { label: "Save as Draft", variant: "ghost" },
-    schedule: { label: "Schedule for Later", variant: "outline" },
+import { Button, Divider, Select, Badge, Flex } from 'ui-lab-components';
+import { FaBox, FaSpinner, FaCheck, FaEllipsisVertical, FaCopy, FaTags, FaTrash } from "react-icons/fa6";
+const selectedCount = 12;
+const bulkActions = {
+    archive: {
+        label: "Archive",
+        loadingLabel: "Archiving...",
+        successLabel: "Archived",
+        variant: "primary",
+        icon: _jsx(FaBox, {}),
+    },
+    duplicate: {
+        label: "Duplicate",
+        loadingLabel: "Duplicating...",
+        successLabel: "Duplicated",
+        variant: "outline",
+        icon: _jsx(FaCopy, {}),
+    },
+    tag: {
+        label: "Add Tags",
+        loadingLabel: "Applying tags...",
+        successLabel: "Tagged",
+        variant: "outline",
+        icon: _jsx(FaTags, {}),
+    },
+    delete: {
+        label: "Delete",
+        loadingLabel: "Deleting...",
+        successLabel: "Deleted",
+        variant: "danger",
+        icon: _jsx(FaTrash, {}),
+    },
 };
 export const metadata = {
     title: 'Split Action Button',
-    description: 'A primary action button joined with a Select dropdown that changes what the button does — useful for publish workflows with multiple delivery options.'
+    description: 'A split button for bulk actions with dynamic icons, variants, and async feedback while keeping the primary action easy to repeat.'
 };
 export default function Example() {
-    const [action, setAction] = useState("publish");
+    const [action, setAction] = useState("archive");
     const [status, setStatus] = useState("idle");
-    const [channel, setChannel] = useState("general");
-    const selectedChannel = channels.find((c) => c.value === channel);
-    const cfg = publishActions[action];
+    const cfg = bulkActions[action];
+    const itemsLabel = `${selectedCount} ${selectedCount === 1 ? "item" : "items"}`;
     const handleExecute = () => {
         setStatus("loading");
         setTimeout(() => {
@@ -35,8 +50,8 @@ export default function Example() {
             setTimeout(() => setStatus("idle"), 2000);
         }, 1500);
     };
-    const leftIcon = status === "loading" ? _jsx(FaSpinner, { className: "animate-spin" }) : status === "done" ? _jsx(FaCheck, {}) : undefined;
-    const label = status === "loading" ? "Saving..." : status === "done" ? "Done!" : cfg.label;
-    return (_jsxs(Flex, { gap: "xs", className: "w-110", align: "center", children: [_jsxs(Select, { selectedKey: channel, valueLabel: selectedChannel ? `#${selectedChannel.label}` : undefined, onSelectionChange: setChannel, className: "flex h-10", isDisabled: status !== "idle", children: [_jsx(Searchable.Input, { className: "w-50", icon: _jsx(FaHashtag, {}), placeholder: "Select channel..." }), _jsx(Select.Content, { children: _jsx(Select.List, { children: channels.map((c) => (_jsx(Select.Item, { value: c.value, textValue: c.label, icon: c.private ? _jsx(FaLock, { className: "h-3 w-3" }) : _jsx(FaHashtag, { className: "h-3 w-3" }), description: c.description, children: c.label }, c.value))) }) })] }), _jsxs(Select, { className: "flex h-10", selectedKey: action, onSelectionChange: (key) => setAction(key), isDisabled: status !== "idle", children: [_jsx(Button, { onPress: handleExecute, variant: "ghost", size: "sm", className: "w-full", isDisabled: status !== "idle", icon: leftIcon, children: label }), _jsx(Divider, { orientation: "vertical", spacing: "none" }), _jsx(Select.Trigger, {}), _jsxs(Select.Content, { children: [_jsx(Select.Item, { value: "publish", textValue: "Publish Now", children: "Publish Now" }), _jsx(Select.Item, { value: "draft", textValue: "Save as Draft", children: "Save as Draft" }), _jsx(Select.Item, { value: "schedule", textValue: "Schedule for Later", children: "Schedule for Later" })] })] }), _jsxs(Menu, { type: "pop-over", children: [_jsx(Menu.Trigger, { children: _jsx(Button, { size: "icon", variant: "outline", icon: _jsx(FaEllipsisVertical, {}) }) }), _jsxs(Menu.Content, { offset: 8, side: "bottom", align: "end", children: [_jsx(Menu.Item, { children: "Preview" }), _jsx(Menu.Item, { children: "View History" }), _jsx(Menu.Item, { children: "Discard Changes" })] })] })] }));
+    const leftIcon = status === "loading" ? _jsx(FaSpinner, { className: "animate-spin" }) : status === "done" ? _jsx(FaCheck, {}) : cfg.icon;
+    const label = status === "loading" ? cfg.loadingLabel : status === "done" ? cfg.successLabel : `${cfg.label} ${itemsLabel}`;
+    return (_jsxs(Flex, { gap: "xs", className: "w-110", align: "center", children: [_jsxs(Badge, { variant: "secondary", children: [selectedCount, " selected"] }), _jsxs(Select, { className: "flex h-10", selectedKey: action, onSelectionChange: (key) => setAction(key), isDisabled: status !== "idle", children: [_jsx(Button, { onPress: handleExecute, variant: cfg.variant, size: "sm", className: "w-full rounded-none justify-start", isDisabled: status !== "idle" || selectedCount === 0, icon: leftIcon, children: label }), _jsx(Divider, { orientation: "vertical", spacing: "none" }), _jsx(Select.Trigger, { "aria-label": "Choose a bulk action" }), _jsxs(Select.Content, { children: [_jsx(Select.Item, { value: "archive", textValue: "Archive", icon: _jsx(FaBox, { className: "h-3 w-3" }), children: "Archive" }), _jsx(Select.Item, { value: "duplicate", textValue: "Duplicate", icon: _jsx(FaCopy, { className: "h-3 w-3" }), children: "Duplicate" }), _jsx(Select.Item, { value: "tag", textValue: "Add Tags", icon: _jsx(FaTags, { className: "h-3 w-3" }), children: "Add Tags" }), _jsx(Select.Item, { value: "delete", textValue: "Delete", icon: _jsx(FaTrash, { className: "h-3 w-3" }), children: "Delete" })] })] }), _jsx(Button, { size: "icon", variant: "outline", icon: _jsx(FaEllipsisVertical, {}), "aria-label": "More bulk actions" })] }));
 }
 //# sourceMappingURL=05-split-action-button.js.map

package/dist/components/Button/examples/05-split-action-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"05-split-action-button.js","sourceRoot":"","sources":["../../../../src/components/Button/examples/05-split-action-button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"05-split-action-button.js","sourceRoot":"","sources":["../../../../src/components/Button/examples/05-split-action-button.tsx"],"names":[],"mappings":"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"}

package/dist/components/Button/examples.json

@@ -21,7 +21,7 @@
     },
     "05-split-action-button": {
         "title": "Split Action Button",
-        "description": "A primary action button joined with a Select dropdown that changes what the button does — useful for publish workflows with multiple delivery options.",
-        "code": "\"use client\";\n\nimport React, { useState } from 'react'\nimport { Button, Divider, Select, Searchable, Flex, Menu } from 'ui-lab-components'\nimport { FaSpinner, FaCheck, FaEllipsisVertical, FaHashtag, FaLock } from \"react-icons/fa6\";\n\ntype Channel = { value: string; label: string; description: string; private?: boolean };\n\nconst channels: Channel[] = [\n  { value: \"general\", label: \"general\", description: \"General team discussion\" },\n  { value: \"announcements\", label: \"announcements\", description: \"Important team updates\", private: true },\n  { value: \"design\", label: \"design\", description: \"Design work and feedback\" },\n  { value: \"engineering\", label: \"engineering\", description: \"Engineering discussions\" },\n  { value: \"marketing\", label: \"marketing\", description: \"Marketing campaigns\" },\n  { value: \"product\", label: \"product\", description: \"Product roadmap and planning\" },\n  { value: \"random\", label: \"random\", description: \"Off-topic conversations\" },\n  { value: \"releases\", label: \"releases\", description: \"Release announcements\", private: true },\n];\n\ntype PublishAction = \"publish\" | \"draft\" | \"schedule\";\n\nconst publishActions: Record<PublishAction, { label: string; variant: \"ghost\" | \"default\" | \"outline\" }> = {\n  publish: { label: \"Publish Now\", variant: \"ghost\" },\n  draft: { label: \"Save as Draft\", variant: \"ghost\" },\n  schedule: { label: \"Schedule for Later\", variant: \"outline\" },\n};\n\nexport default function Example() {\n  const [action, setAction] = useState<PublishAction>(\"publish\");\n  const [status, setStatus] = useState<\"idle\" | \"loading\" | \"done\">(\"idle\");\n  const [channel, setChannel] = useState<string | number | null>(\"general\");\n  const selectedChannel = channels.find((c) => c.value === channel);\n  const cfg = publishActions[action];\n\n  const handleExecute = () => {\n    setStatus(\"loading\");\n    setTimeout(() => {\n      setStatus(\"done\");\n      setTimeout(() => setStatus(\"idle\"), 2000);\n    }, 1500);\n  };\n\n  const leftIcon = status === \"loading\" ? <FaSpinner className=\"animate-spin\" /> : status === \"done\" ? <FaCheck /> : undefined;\n  const label = status === \"loading\" ? \"Saving...\" : status === \"done\" ? \"Done!\" : cfg.label;\n\n  return (\n    <Flex gap=\"xs\" className=\"w-110\" align=\"center\">\n      <Select\n        selectedKey={channel}\n        valueLabel={selectedChannel ? `#${selectedChannel.label}` : undefined}\n        onSelectionChange={setChannel}\n        className=\"flex h-10\"\n        isDisabled={status !== \"idle\"}\n      >\n        <Searchable.Input className=\"w-50\" icon={<FaHashtag />} placeholder=\"Select channel...\" />\n        <Select.Content>\n          <Select.List>\n            {channels.map((c) => (\n              <Select.Item\n                key={c.value}\n                value={c.value}\n                textValue={c.label}\n                icon={c.private ? <FaLock className=\"h-3 w-3\" /> : <FaHashtag className=\"h-3 w-3\" />}\n                description={c.description}\n              >\n                {c.label}\n              </Select.Item>\n            ))}\n          </Select.List>\n        </Select.Content>\n      </Select>\n      <Select className=\"flex h-10\" selectedKey={action} onSelectionChange={(key) => setAction(key as PublishAction)} isDisabled={status !== \"idle\"}>\n        <Button\n          onPress={handleExecute}\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"w-full\"\n          isDisabled={status !== \"idle\"}\n          icon={leftIcon}\n        >\n          {label}\n        </Button>\n        <Divider orientation=\"vertical\" spacing=\"none\" />\n        <Select.Trigger />\n        <Select.Content>\n          <Select.Item value=\"publish\" textValue=\"Publish Now\">Publish Now</Select.Item>\n          <Select.Item value=\"draft\" textValue=\"Save as Draft\">Save as Draft</Select.Item>\n          <Select.Item value=\"schedule\" textValue=\"Schedule for Later\">Schedule for Later</Select.Item>\n        </Select.Content>\n      </Select>\n      <Menu type=\"pop-over\">\n        <Menu.Trigger>\n          <Button size=\"icon\" variant=\"outline\" icon={<FaEllipsisVertical />} />\n        </Menu.Trigger>\n        <Menu.Content offset={8} side=\"bottom\" align=\"end\">\n          <Menu.Item>Preview</Menu.Item>\n          <Menu.Item>View History</Menu.Item>\n          <Menu.Item>Discard Changes</Menu.Item>\n        </Menu.Content>\n      </Menu>\n    </Flex>\n  );\n}"
+        "description": "A split button for bulk actions with dynamic icons, variants, and async feedback while keeping the primary action easy to repeat.",
+        "code": "\"use client\";\n\nimport React, { useState } from 'react'\nimport { Button, Divider, Select, Badge, Flex } from 'ui-lab-components'\nimport { FaBox, FaSpinner, FaCheck, FaEllipsisVertical, FaCopy, FaTags, FaTrash } from \"react-icons/fa6\";\n\ntype BulkAction = \"archive\" | \"duplicate\" | \"tag\" | \"delete\";\n\nconst selectedCount: number = 12;\n\nconst bulkActions: Record<BulkAction, {\n  label: string;\n  loadingLabel: string;\n  successLabel: string;\n  variant: \"primary\" | \"outline\" | \"danger\";\n  icon: React.ReactNode;\n}> = {\n  archive: {\n    label: \"Archive\",\n    loadingLabel: \"Archiving...\",\n    successLabel: \"Archived\",\n    variant: \"primary\",\n    icon: <FaBox />,\n  },\n  duplicate: {\n    label: \"Duplicate\",\n    loadingLabel: \"Duplicating...\",\n    successLabel: \"Duplicated\",\n    variant: \"outline\",\n    icon: <FaCopy />,\n  },\n  tag: {\n    label: \"Add Tags\",\n    loadingLabel: \"Applying tags...\",\n    successLabel: \"Tagged\",\n    variant: \"outline\",\n    icon: <FaTags />,\n  },\n  delete: {\n    label: \"Delete\",\n    loadingLabel: \"Deleting...\",\n    successLabel: \"Deleted\",\n    variant: \"danger\",\n    icon: <FaTrash />,\n  },\n};\n\nexport default function Example() {\n  const [action, setAction] = useState<BulkAction>(\"archive\");\n  const [status, setStatus] = useState<\"idle\" | \"loading\" | \"done\">(\"idle\");\n  const cfg = bulkActions[action];\n  const itemsLabel = `${selectedCount} ${selectedCount === 1 ? \"item\" : \"items\"}`;\n\n  const handleExecute = () => {\n    setStatus(\"loading\");\n    setTimeout(() => {\n      setStatus(\"done\");\n      setTimeout(() => setStatus(\"idle\"), 2000);\n    }, 1500);\n  };\n\n  const leftIcon = status === \"loading\" ? <FaSpinner className=\"animate-spin\" /> : status === \"done\" ? <FaCheck /> : cfg.icon;\n  const label = status === \"loading\" ? cfg.loadingLabel : status === \"done\" ? cfg.successLabel : `${cfg.label} ${itemsLabel}`;\n\n  return (\n    <Flex gap=\"xs\" className=\"w-110\" align=\"center\">\n      <Badge variant=\"secondary\">{selectedCount} selected</Badge>\n      <Select className=\"flex h-10\" selectedKey={action} onSelectionChange={(key) => setAction(key as BulkAction)} isDisabled={status !== \"idle\"}>\n        <Button\n          onPress={handleExecute}\n          variant={cfg.variant}\n          size=\"sm\"\n          className=\"w-full rounded-none justify-start\"\n          isDisabled={status !== \"idle\" || selectedCount === 0}\n          icon={leftIcon}\n        >\n          {label}\n        </Button>\n        <Divider orientation=\"vertical\" spacing=\"none\" />\n        <Select.Trigger aria-label=\"Choose a bulk action\" />\n        <Select.Content>\n          <Select.Item value=\"archive\" textValue=\"Archive\" icon={<FaBox className=\"h-3 w-3\" />}>Archive</Select.Item>\n          <Select.Item value=\"duplicate\" textValue=\"Duplicate\" icon={<FaCopy className=\"h-3 w-3\" />}>Duplicate</Select.Item>\n          <Select.Item value=\"tag\" textValue=\"Add Tags\" icon={<FaTags className=\"h-3 w-3\" />}>Add Tags</Select.Item>\n          <Select.Item value=\"delete\" textValue=\"Delete\" icon={<FaTrash className=\"h-3 w-3\" />}>Delete</Select.Item>\n        </Select.Content>\n      </Select>\n      <Button size=\"icon\" variant=\"outline\" icon={<FaEllipsisVertical />} aria-label=\"More bulk actions\" />\n    </Flex>\n  );\n}"
     }
 }

package/dist/components/Frame/examples/02-tooltip-example.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"02-tooltip-example.d.ts","sourceRoot":"","sources":["../../../../src/components/Frame/examples/02-tooltip-example.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAOF,QAAA,MAAM,QAAQ,+CAuBb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"02-tooltip-example.d.ts","sourceRoot":"","sources":["../../../../src/components/Frame/examples/02-tooltip-example.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAQF,QAAA,MAAM,QAAQ,+CAqBb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/Frame/examples/02-tooltip-example.js

@@ -7,9 +7,7 @@ import { Frame } from 'ui-lab-components';
 const TAIL_WIDTH = 48;
 const TAIL_PATH = "M 0 0 C 8 0 20 -16 24 -16 C 28 -16 36 0 48 0";
 const Example2 = () => {
-    return (_jsx("div", { className: "flex flex-col gap-12 p-12 items-center justify-center min-h-[400px] bg-background-950", children: _jsx(Frame, { side: "bottom", shapeMode: "extend", path: TAIL_PATH, pathWidth: TAIL_WIDTH, fill: "var(--color-background-900)", 
-            // style={{ color: "var(--background-700)" }}
-            className: "max-w-sm border-background-700", padding: "large", children: _jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "font-semibold text-lg mb-2 text-foreground-50", children: "Did you know?" }), _jsxs("p", { className: "text-foreground-400 text-sm leading-relaxed", children: ["You can customize the frame orientation using the ", _jsx("code", { className: "bg-background-800 px-1 rounded", children: "side" }), " prop. This frame uses ", _jsx("code", { className: "text-accent-500", children: "side=\"bottom\"" }), " to create a tooltip tail."] })] }) }) }));
+    return (_jsx("div", { className: "flex flex-col gap-12 p-12 items-center justify-center min-h-[400px] bg-background-950", children: _jsx(Frame, { side: "bottom", shapeMode: "extend", path: TAIL_PATH, pathWidth: TAIL_WIDTH, className: "max-w-sm border-background-700 p-6", style: { "--frame-fill": "var(--color-background-900)" }, children: _jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "font-semibold text-lg mb-2 text-foreground-50", children: "Did you know?" }), _jsxs("p", { className: "text-foreground-400 text-sm leading-relaxed", children: ["You can customize the frame orientation using the ", _jsx("code", { className: "bg-background-800 px-1 rounded", children: "side" }), " prop. This frame uses ", _jsx("code", { className: "text-accent-500", children: "side=\"bottom\"" }), " to create a tooltip tail."] })] }) }) }));
 };
 export default Example2;
 //# sourceMappingURL=02-tooltip-example.js.map

package/dist/components/Frame/examples/02-tooltip-example.js.map

@@ -1 +1 @@
-{"version":3,"file":"02-tooltip-example.js","sourceRoot":"","sources":["../../../../src/components/Frame/examples/02-tooltip-example.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,eAAe;IACtB,WAAW,EAAE,8EAA8E;CAC5F,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,UAAU,GAAG,EAAE,CAAC;AACtB,MAAM,SAAS,GAAG,8CAA8C,CAAC;AAEjE,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,OAAO,CACL,cAAK,SAAS,EAAC,uFAAuF,YACpG,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,UAAU,EACrB,IAAI,EAAC,6BAA6B;YAClC,6CAA6C;YAC7C,SAAS,EAAC,gCAAgC,EAC1C,OAAO,EAAC,OAAO,YAEf,eAAK,SAAS,EAAC,aAAa,aAC1B,aAAI,SAAS,EAAC,+CAA+C,8BAAmB,EAChF,aAAG,SAAS,EAAC,6CAA6C,mEACN,eAAM,SAAS,EAAC,gCAAgC,qBAAY,6BAC9F,eAAM,SAAS,EAAC,iBAAiB,gCAAqB,kCACpE,IACA,GACA,GACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"02-tooltip-example.js","sourceRoot":"","sources":["../../../../src/components/Frame/examples/02-tooltip-example.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,eAAe;IACtB,WAAW,EAAE,8EAA8E;CAC5F,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,UAAU,GAAG,EAAE,CAAC;AACtB,MAAM,SAAS,GAAG,8CAA8C,CAAC;AAEjE,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,OAAO,CACL,cAAK,SAAS,EAAC,uFAAuF,YACpG,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,UAAU,EACrB,SAAS,EAAC,oCAAoC,EAC9C,KAAK,EAAE,EAAE,cAAc,EAAE,6BAA6B,EAAyB,YAE/E,eAAK,SAAS,EAAC,aAAa,aAC1B,aAAI,SAAS,EAAC,+CAA+C,8BAAmB,EAChF,aAAG,SAAS,EAAC,6CAA6C,mEACN,eAAM,SAAS,EAAC,gCAAgC,qBAAY,6BAC9F,eAAM,SAAS,EAAC,iBAAiB,gCAAqB,kCACpE,IACA,GACA,GACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/Frame/examples/03-sidebar-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"03-sidebar-tab.d.ts","sourceRoot":"","sources":["../../../../src/components/Frame/examples/03-sidebar-tab.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAOF,QAAA,MAAM,QAAQ,+CAmCb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"03-sidebar-tab.d.ts","sourceRoot":"","sources":["../../../../src/components/Frame/examples/03-sidebar-tab.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAQF,QAAA,MAAM,QAAQ,+CAoCb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/Frame/examples/03-sidebar-tab.js

@@ -7,7 +7,11 @@ import { Frame } from 'ui-lab-components';
 const TAB_WIDTH = 120;
 const TAB_PATH = "M 0 0 C 20 0 20 -24 40 -24 L 80 -24 C 100 -24 100 0 120 0";
 const Example3 = () => {
-    return (_jsxs("div", { className: "flex flex-row gap-0 p-12 items-center justify-center bg-background-950 min-h-[400px]", children: [_jsxs("div", { className: "flex flex-col items-end justify-center space-y-8 pr-6 border-background-800/50 h-64", children: [_jsx("div", { className: "text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors", children: "Dashboard" }), _jsx("div", { className: "text-accent-500 font-bold cursor-default", children: "Settings" }), _jsx("div", { className: "text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors", children: "Profile" })] }), _jsxs("div", { className: "-ml-[1.5px]", children: [" ", _jsx(Frame, { side: "left", shapeMode: "extend", path: TAB_PATH, pathWidth: TAB_WIDTH, fill: "var(--color-background-900)", style: { color: "var(--background-700)" }, className: "w-80 h-64", padding: "large", cornerRadius: 16, children: _jsxs("div", { className: "h-full flex flex-col justify-center", children: [_jsx("h2", { className: "text-2xl font-bold text-foreground-50 mb-4", children: "Settings" }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "h-2 w-2/3 bg-background-800 rounded" }), _jsx("div", { className: "h-2 w-1/2 bg-background-800 rounded" }), _jsx("div", { className: "h-2 w-3/4 bg-background-800 rounded" })] })] }) })] })] }));
+    return (_jsxs("div", { className: "flex flex-row gap-0 p-12 items-center justify-center bg-background-950 min-h-[400px]", children: [_jsxs("div", { className: "flex flex-col items-end justify-center space-y-8 pr-6 border-background-800/50 h-64", children: [_jsx("div", { className: "text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors", children: "Dashboard" }), _jsx("div", { className: "text-accent-500 font-bold cursor-default", children: "Settings" }), _jsx("div", { className: "text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors", children: "Profile" })] }), _jsxs("div", { className: "-ml-[1.5px]", children: [" ", _jsx(Frame, { side: "left", shapeMode: "extend", path: TAB_PATH, pathWidth: TAB_WIDTH, className: "w-80 h-64 p-6", style: {
+                            "--frame-fill": "var(--color-background-900)",
+                            "--frame-radius": "16px",
+                            color: "var(--background-700)",
+                        }, children: _jsxs("div", { className: "h-full flex flex-col justify-center", children: [_jsx("h2", { className: "text-2xl font-bold text-foreground-50 mb-4", children: "Settings" }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "h-2 w-2/3 bg-background-800 rounded" }), _jsx("div", { className: "h-2 w-1/2 bg-background-800 rounded" }), _jsx("div", { className: "h-2 w-3/4 bg-background-800 rounded" })] })] }) })] })] }));
 };
 export default Example3;
 //# sourceMappingURL=03-sidebar-tab.js.map

package/dist/components/Frame/examples/03-sidebar-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"03-sidebar-tab.js","sourceRoot":"","sources":["../../../../src/components/Frame/examples/03-sidebar-tab.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,mFAAmF;CACjG,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,SAAS,GAAG,GAAG,CAAC;AACtB,MAAM,QAAQ,GAAG,2DAA2D,CAAC;AAE7E,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,OAAO,CACL,eAAK,SAAS,EAAC,sFAAsF,aAEnG,eAAK,SAAS,EAAC,qFAAqF,aAClG,cAAK,SAAS,EAAC,4FAA4F,0BAAgB,EAC3H,cAAK,SAAS,EAAC,0CAA0C,yBAAe,EACxE,cAAK,SAAS,EAAC,4FAA4F,wBAAc,IACrH,EAGN,eAAK,SAAS,EAAC,aAAa,kBAC1B,KAAC,KAAK,IACJ,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,6BAA6B,EAClC,KAAK,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE,EACzC,SAAS,EAAC,WAAW,EACrB,OAAO,EAAC,OAAO,EACf,YAAY,EAAE,EAAE,YAEhB,eAAK,SAAS,EAAC,qCAAqC,aAClD,aAAI,SAAS,EAAC,4CAA4C,yBAAc,EACxE,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,qCAAqC,GAAO,EAC3D,cAAK,SAAS,EAAC,qCAAqC,GAAO,EAC3D,cAAK,SAAS,EAAC,qCAAqC,GAAO,IACvD,IACF,GACA,IACJ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"03-sidebar-tab.js","sourceRoot":"","sources":["../../../../src/components/Frame/examples/03-sidebar-tab.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,mFAAmF;CACjG,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,SAAS,GAAG,GAAG,CAAC;AACtB,MAAM,QAAQ,GAAG,2DAA2D,CAAC;AAE7E,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,OAAO,CACL,eAAK,SAAS,EAAC,sFAAsF,aAEnG,eAAK,SAAS,EAAC,qFAAqF,aAClG,cAAK,SAAS,EAAC,4FAA4F,0BAAgB,EAC3H,cAAK,SAAS,EAAC,0CAA0C,yBAAe,EACxE,cAAK,SAAS,EAAC,4FAA4F,wBAAc,IACrH,EAGN,eAAK,SAAS,EAAC,aAAa,kBAC1B,KAAC,KAAK,IACJ,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE;4BACL,cAAc,EAAE,6BAA6B;4BAC7C,gBAAgB,EAAE,MAAM;4BACxB,KAAK,EAAE,uBAAuB;yBACR,YAExB,eAAK,SAAS,EAAC,qCAAqC,aAClD,aAAI,SAAS,EAAC,4CAA4C,yBAAc,EACxE,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,qCAAqC,GAAO,EAC3D,cAAK,SAAS,EAAC,qCAAqC,GAAO,EAC3D,cAAK,SAAS,EAAC,qCAAqC,GAAO,IACvD,IACF,GACA,IACJ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/Frame/examples.json

@@ -7,11 +7,11 @@
     "02-tooltip-example": {
         "title": "Tooltip Frame",
         "description": "A frame with a pointer tail on the bottom, typical for tooltips or popovers.",
-        "code": "import { Frame } from 'ui-lab-components';\n\nconst TAIL_WIDTH = 48;\nconst TAIL_PATH = \"M 0 0 C 8 0 20 -16 24 -16 C 28 -16 36 0 48 0\";\n\nconst Example2 = () => {\n  return (\n    <div className=\"flex flex-col gap-12 p-12 items-center justify-center min-h-[400px] bg-background-950\">\n      <Frame\n        side=\"bottom\"\n        shapeMode=\"extend\"\n        path={TAIL_PATH}\n        pathWidth={TAIL_WIDTH}\n        fill=\"var(--color-background-900)\"\n        // style={{ color: \"var(--background-700)\" }}\n        className=\"max-w-sm border-background-700\"\n        padding=\"large\"\n      >\n        <div className=\"text-center\">\n          <h3 className=\"font-semibold text-lg mb-2 text-foreground-50\">Did you know?</h3>\n          <p className=\"text-foreground-400 text-sm leading-relaxed\">\n            You can customize the frame orientation using the <code className=\"bg-background-800 px-1 rounded\">side</code> prop.\n            This frame uses <code className=\"text-accent-500\">side=\"bottom\"</code> to create a tooltip tail.\n          </p>\n        </div>\n      </Frame>\n    </div>\n  );\n};\n\nexport default Example2;"
+        "code": "import React from 'react';\nimport { Frame } from 'ui-lab-components';\n\nconst TAIL_WIDTH = 48;\nconst TAIL_PATH = \"M 0 0 C 8 0 20 -16 24 -16 C 28 -16 36 0 48 0\";\n\nconst Example2 = () => {\n  return (\n    <div className=\"flex flex-col gap-12 p-12 items-center justify-center min-h-[400px] bg-background-950\">\n      <Frame\n        side=\"bottom\"\n        shapeMode=\"extend\"\n        path={TAIL_PATH}\n        pathWidth={TAIL_WIDTH}\n        className=\"max-w-sm border-background-700 p-6\"\n        style={{ \"--frame-fill\": \"var(--color-background-900)\" } as React.CSSProperties}\n      >\n        <div className=\"text-center\">\n          <h3 className=\"font-semibold text-lg mb-2 text-foreground-50\">Did you know?</h3>\n          <p className=\"text-foreground-400 text-sm leading-relaxed\">\n            You can customize the frame orientation using the <code className=\"bg-background-800 px-1 rounded\">side</code> prop.\n            This frame uses <code className=\"text-accent-500\">side=\"bottom\"</code> to create a tooltip tail.\n          </p>\n        </div>\n      </Frame>\n    </div>\n  );\n};\n\nexport default Example2;"
     },
     "03-sidebar-tab": {
         "title": "Sidebar Tab Frame",
         "description": "A frame with a tab extending from the side, perfect for active navigation states.",
-        "code": "import { Frame } from 'ui-lab-components';\n\nconst TAB_WIDTH = 120;\nconst TAB_PATH = \"M 0 0 C 20 0 20 -24 40 -24 L 80 -24 C 100 -24 100 0 120 0\";\n\nconst Example3 = () => {\n  return (\n    <div className=\"flex flex-row gap-0 p-12 items-center justify-center bg-background-950 min-h-[400px]\">\n      {/* Mock Sidebar */}\n      <div className=\"flex flex-col items-end justify-center space-y-8 pr-6 border-background-800/50 h-64\">\n        <div className=\"text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors\">Dashboard</div>\n        <div className=\"text-accent-500 font-bold cursor-default\">Settings</div>\n        <div className=\"text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors\">Profile</div>\n      </div>\n\n      {/* Frame content - visually connecting to \"Settings\" */}\n      <div className=\"-ml-[1.5px]\"> {/* Overlap border slightly to merge visual connection */}\n        <Frame\n          side=\"left\"\n          shapeMode=\"extend\"\n          path={TAB_PATH}\n          pathWidth={TAB_WIDTH}\n          fill=\"var(--color-background-900)\"\n          style={{ color: \"var(--background-700)\" }}\n          className=\"w-80 h-64\"\n          padding=\"large\"\n          cornerRadius={16}\n        >\n          <div className=\"h-full flex flex-col justify-center\">\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Settings</h2>\n            <div className=\"space-y-3\">\n              <div className=\"h-2 w-2/3 bg-background-800 rounded\"></div>\n              <div className=\"h-2 w-1/2 bg-background-800 rounded\"></div>\n              <div className=\"h-2 w-3/4 bg-background-800 rounded\"></div>\n            </div>\n          </div>\n        </Frame>\n      </div>\n    </div>\n  );\n};\n\nexport default Example3;"
+        "code": "import React from 'react';\nimport { Frame } from 'ui-lab-components';\n\nconst TAB_WIDTH = 120;\nconst TAB_PATH = \"M 0 0 C 20 0 20 -24 40 -24 L 80 -24 C 100 -24 100 0 120 0\";\n\nconst Example3 = () => {\n  return (\n    <div className=\"flex flex-row gap-0 p-12 items-center justify-center bg-background-950 min-h-[400px]\">\n      {/* Mock Sidebar */}\n      <div className=\"flex flex-col items-end justify-center space-y-8 pr-6 border-background-800/50 h-64\">\n        <div className=\"text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors\">Dashboard</div>\n        <div className=\"text-accent-500 font-bold cursor-default\">Settings</div>\n        <div className=\"text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors\">Profile</div>\n      </div>\n\n      {/* Frame content - visually connecting to \"Settings\" */}\n      <div className=\"-ml-[1.5px]\"> {/* Overlap border slightly to merge visual connection */}\n        <Frame\n          side=\"left\"\n          shapeMode=\"extend\"\n          path={TAB_PATH}\n          pathWidth={TAB_WIDTH}\n          className=\"w-80 h-64 p-6\"\n          style={{\n            \"--frame-fill\": \"var(--color-background-900)\",\n            \"--frame-radius\": \"16px\",\n            color: \"var(--background-700)\",\n          } as React.CSSProperties}\n        >\n          <div className=\"h-full flex flex-col justify-center\">\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Settings</h2>\n            <div className=\"space-y-3\">\n              <div className=\"h-2 w-2/3 bg-background-800 rounded\"></div>\n              <div className=\"h-2 w-1/2 bg-background-800 rounded\"></div>\n              <div className=\"h-2 w-3/4 bg-background-800 rounded\"></div>\n            </div>\n          </div>\n        </Frame>\n      </div>\n    </div>\n  );\n};\n\nexport default Example3;"
     }
 }

package/dist/components/Frame/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Frame/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAatD,QAAA,MAAM,aAAa,EAAE,UAAU,EAuB9B,CAAC;AAYF,eAAO,MAAM,WAAW,EAAE,eAqCzB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Frame/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAatD,QAAA,MAAM,aAAa,EAAE,UAAU,EAAO,CAAC;AAYvC,eAAO,MAAM,WAAW,EAAE,eAqCzB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}

package/dist/components/Frame/index.js

@@ -10,35 +10,12 @@ const examplesData = [
     { id: '02-tooltip-example', Component: Example2, metadata: metadata2 },
     { id: '03-sidebar-tab', Component: Example3, metadata: metadata3 },
 ];
-const frameControls = [
-    {
-        name: 'variant',
-        label: 'Variant',
-        type: 'select',
-        options: [
-            { label: 'Default', value: 'default' },
-            { label: 'Accent', value: 'accent' },
-        ],
-        defaultValue: 'default',
-    },
-    {
-        name: 'padding',
-        label: 'Padding',
-        type: 'select',
-        options: [
-            { label: 'None', value: 'none' },
-            { label: 'Small', value: 'small' },
-            { label: 'Medium', value: 'medium' },
-            { label: 'Large', value: 'large' },
-        ],
-        defaultValue: 'medium',
-    },
-];
+const frameControls = [];
 const frameBasicCode = `import { Frame } from "ui-lab-components";
 
 export function Example() {
   return (
-    <Frame variant="default" padding="medium">
+    <Frame>
       <p className="text-foreground-300">Framed content</p>
     </Frame>
   );
@@ -54,9 +31,9 @@ export const frameDetail = {
             title: 'Preview',
             description: 'Adjust props to customize the component',
             code: frameBasicCode,
-            preview: (_jsx(Frame, { variant: "default", padding: "medium", children: _jsx("p", { className: "text-sm text-foreground-300", children: "Framed content" }) })),
+            preview: (_jsx(Frame, { children: _jsx("p", { className: "text-sm text-foreground-300", children: "Framed content" }) })),
             controls: frameControls,
-            renderPreview: (props) => (_jsx(Frame, { variant: props.variant, padding: props.padding, children: _jsx("p", { className: "text-sm text-foreground-300", children: "Framed content" }) })),
+            renderPreview: () => (_jsx(Frame, { children: _jsx("p", { className: "text-sm text-foreground-300", children: "Framed content" }) })),
         },
         ...loadComponentExamples(examplesData, examplesJson),
     ],

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Frame/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,YAAY,MAAM,iBAAiB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IACpE,EAAE,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IACtE,EAAE,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;CACnE,CAAC;AAEF,MAAM,aAAa,GAAiB;IAClC;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;SACrC;QACD,YAAY,EAAE,SAAS;KACxB;IACD;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;YAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;YACpC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;SACnC;QACD,YAAY,EAAE,QAAQ;KACvB;CACF,CAAC;AAEF,MAAM,cAAc,GAAG;;;;;;;;EAQrB,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAoB;IAC1C,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,uFAAuF;IACpG,QAAQ,EAAE,CACR,eAAK,SAAS,EAAC,+BAA+B,aAC5C,uRAII,EACJ,iOAGI,IACA,CACP;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,yCAAyC;YACtD,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,CACP,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,QAAQ,YACvC,YAAG,SAAS,EAAC,6BAA6B,+BAAmB,GACvD,CACT;YACD,QAAQ,EAAE,aAAa;YACvB,aAAa,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,CAC7B,KAAC,KAAK,IAAC,OAAO,EAAE,KAAK,CAAC,OAAc,EAAE,OAAO,EAAE,KAAK,CAAC,OAAc,YACjE,YAAG,SAAS,EAAC,6BAA6B,+BAAmB,GACvD,CACT;SACF;QACD,GAAG,qBAAqB,CAAC,YAAY,EAAE,YAAY,CAAC;KACrD;CACF,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Frame/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,YAAY,MAAM,iBAAiB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IACpE,EAAE,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IACtE,EAAE,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;CACnE,CAAC;AAEF,MAAM,aAAa,GAAiB,EAAE,CAAC;AAEvC,MAAM,cAAc,GAAG;;;;;;;;EAQrB,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAoB;IAC1C,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,uFAAuF;IACpG,QAAQ,EAAE,CACR,eAAK,SAAS,EAAC,+BAA+B,aAC5C,uRAII,EACJ,iOAGI,IACA,CACP;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,yCAAyC;YACtD,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,CACP,KAAC,KAAK,cACJ,YAAG,SAAS,EAAC,6BAA6B,+BAAmB,GACvD,CACT;YACD,QAAQ,EAAE,aAAa;YACvB,aAAa,EAAE,GAAG,EAAE,CAAC,CACnB,KAAC,KAAK,cACJ,YAAG,SAAS,EAAC,6BAA6B,+BAAmB,GACvD,CACT;SACF;QACD,GAAG,qBAAqB,CAAC,YAAY,EAAE,YAAY,CAAC;KACrD;CACF,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}

package/dist/generated-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generated-data.d.ts","sourceRoot":"","sources":["../src/generated-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CA69HrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAsC3D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAoMnE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwChD,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAoLxE,CAAC;AAEF,eAAO,MAAM,4BAA4B,UAIxC,CAAC;AAEF,eAAO,MAAM,6BAA6B,UAGzC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,eAE7B,CAAC"}
+{"version":3,"file":"generated-data.d.ts","sourceRoot":"","sources":["../src/generated-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CA4oIrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAwC3D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAoMnE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwChD,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAoLxE,CAAC;AAEF,eAAO,MAAM,4BAA4B,UAIxC,CAAC;AAEF,eAAO,MAAM,6BAA6B,UAGzC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,eAE7B,CAAC"}