@zidsa/zidmui 2.0.3 → 2.1.0

package/dist/react/cjs/stories/css/Select.stories.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                   */
+const meta = {
+  title: "CSS Styles/Components/Select",
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+const Sizes = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "300px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Select Sizes" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label", children: "Small" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-select zid-select--sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Small select" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "1", children: "Option 1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "2", children: "Option 2" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-select__icon", children: "▼" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label", children: "Medium" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-select zid-select--md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Medium select" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "1", children: "Option 1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "2", children: "Option 2" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-select__icon", children: "▼" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label", children: "Large" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-select zid-select--lg", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Large select" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "1", children: "Option 1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "2", children: "Option 2" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-select__icon", children: "▼" })
+        ] })
+      ] })
+    ] })
+  ] })
+};
+const States = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "300px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Select States" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label", children: "Default" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-select zid-select--md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select an option" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "1", children: "Option 1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "2", children: "Option 2" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-select__icon", children: "▼" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input-helper", children: "Choose from the list" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label", children: "With Selection" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-select zid-select--md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("select", { className: "zid-select__native", defaultValue: "1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select an option" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "1", children: "Option 1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "2", children: "Option 2" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-select__icon", children: "▼" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label zid-input-label--required", children: "Error" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-select zid-select--md zid-select--error", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select an option" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "1", children: "Option 1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "2", children: "Option 2" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-select__icon", children: "▼" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input-helper zid-input-helper--error", children: "Please select an option" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label", children: "Disabled" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-select zid-select--md zid-select--disabled", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("select", { className: "zid-select__native", disabled: true, defaultValue: "", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Disabled" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "1", children: "Option 1" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-select__icon", children: "▼" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input-helper", children: "This select is disabled" })
+      ] })
+    ] })
+  ] })
+};
+const WithLabelAndHelper = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "300px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "With Label & Helper" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label", children: "Country" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-select zid-select--md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select country" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "us", children: "United States" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "uk", children: "United Kingdom" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "ca", children: "Canada" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "au", children: "Australia" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-select__icon", children: "▼" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input-helper", children: "Select your country of residence" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label zid-input-label--required", children: "Category" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-select zid-select--md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select category" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "electronics", children: "Electronics" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "clothing", children: "Clothing" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "food", children: "Food & Beverages" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "home", children: "Home & Garden" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-select__icon", children: "▼" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input-helper", children: "Required for product listing" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label zid-input-label--required", children: "Priority" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-select zid-select--md zid-select--error", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select priority" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "low", children: "Low" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "medium", children: "Medium" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "high", children: "High" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-select__icon", children: "▼" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input-helper zid-input-helper--error", children: "Priority is required" })
+      ] })
+    ] })
+  ] })
+};
+const WithOptgroups = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px", width: "300px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "With Option Groups" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label", children: "Product Category" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-select zid-select--md", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select category" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("optgroup", { label: "Electronics", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "phones", children: "Phones" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "laptops", children: "Laptops" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "tablets", children: "Tablets" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("optgroup", { label: "Clothing", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "shirts", children: "Shirts" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "pants", children: "Pants" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "shoes", children: "Shoes" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("optgroup", { label: "Home", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "furniture", children: "Furniture" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "decor", children: "Decor" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "kitchen", children: "Kitchen" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-select__icon", children: "▼" })
+      ] })
+    ] })
+  ] })
+};
+exports.Sizes = Sizes;
+exports.States = States;
+exports.WithLabelAndHelper = WithLabelAndHelper;
+exports.WithOptgroups = WithOptgroups;
+exports.default = meta;
+//# sourceMappingURL=Select.stories.js.map

package/dist/react/cjs/stories/css/Select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.js","sources":["../../../../../src/stories/css/Select.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'CSS Styles/Components/Select',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Sizes: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '300px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Select Sizes</h3>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n        <div>\n          <label className=\"zid-input-label\">Small</label>\n          <div className=\"zid-select zid-select--sm\">\n            <select className=\"zid-select__native\" defaultValue=\"\">\n              <option value=\"\" disabled>Small select</option>\n              <option value=\"1\">Option 1</option>\n              <option value=\"2\">Option 2</option>\n            </select>\n            <span className=\"zid-select__icon\">▼</span>\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Medium</label>\n          <div className=\"zid-select zid-select--md\">\n            <select className=\"zid-select__native\" defaultValue=\"\">\n              <option value=\"\" disabled>Medium select</option>\n              <option value=\"1\">Option 1</option>\n              <option value=\"2\">Option 2</option>\n            </select>\n            <span className=\"zid-select__icon\">▼</span>\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Large</label>\n          <div className=\"zid-select zid-select--lg\">\n            <select className=\"zid-select__native\" defaultValue=\"\">\n              <option value=\"\" disabled>Large select</option>\n              <option value=\"1\">Option 1</option>\n              <option value=\"2\">Option 2</option>\n            </select>\n            <span className=\"zid-select__icon\">▼</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const States: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '300px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Select States</h3>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n        <div>\n          <label className=\"zid-input-label\">Default</label>\n          <div className=\"zid-select zid-select--md\">\n            <select className=\"zid-select__native\" defaultValue=\"\">\n              <option value=\"\" disabled>Select an option</option>\n              <option value=\"1\">Option 1</option>\n              <option value=\"2\">Option 2</option>\n            </select>\n            <span className=\"zid-select__icon\">▼</span>\n          </div>\n          <div className=\"zid-input-helper\">Choose from the list</div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">With Selection</label>\n          <div className=\"zid-select zid-select--md\">\n            <select className=\"zid-select__native\" defaultValue=\"1\">\n              <option value=\"\" disabled>Select an option</option>\n              <option value=\"1\">Option 1</option>\n              <option value=\"2\">Option 2</option>\n            </select>\n            <span className=\"zid-select__icon\">▼</span>\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label zid-input-label--required\">Error</label>\n          <div className=\"zid-select zid-select--md zid-select--error\">\n            <select className=\"zid-select__native\" defaultValue=\"\">\n              <option value=\"\" disabled>Select an option</option>\n              <option value=\"1\">Option 1</option>\n              <option value=\"2\">Option 2</option>\n            </select>\n            <span className=\"zid-select__icon\">▼</span>\n          </div>\n          <div className=\"zid-input-helper zid-input-helper--error\">Please select an option</div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Disabled</label>\n          <div className=\"zid-select zid-select--md zid-select--disabled\">\n            <select className=\"zid-select__native\" disabled defaultValue=\"\">\n              <option value=\"\" disabled>Disabled</option>\n              <option value=\"1\">Option 1</option>\n            </select>\n            <span className=\"zid-select__icon\">▼</span>\n          </div>\n          <div className=\"zid-input-helper\">This select is disabled</div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\n\nexport const WithLabelAndHelper: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '300px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>With Label & Helper</h3>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>\n        <div>\n          <label className=\"zid-input-label\">Country</label>\n          <div className=\"zid-select zid-select--md\">\n            <select className=\"zid-select__native\" defaultValue=\"\">\n              <option value=\"\" disabled>Select country</option>\n              <option value=\"us\">United States</option>\n              <option value=\"uk\">United Kingdom</option>\n              <option value=\"ca\">Canada</option>\n              <option value=\"au\">Australia</option>\n            </select>\n            <span className=\"zid-select__icon\">▼</span>\n          </div>\n          <div className=\"zid-input-helper\">Select your country of residence</div>\n        </div>\n        <div>\n          <label className=\"zid-input-label zid-input-label--required\">Category</label>\n          <div className=\"zid-select zid-select--md\">\n            <select className=\"zid-select__native\" defaultValue=\"\">\n              <option value=\"\" disabled>Select category</option>\n              <option value=\"electronics\">Electronics</option>\n              <option value=\"clothing\">Clothing</option>\n              <option value=\"food\">Food & Beverages</option>\n              <option value=\"home\">Home & Garden</option>\n            </select>\n            <span className=\"zid-select__icon\">▼</span>\n          </div>\n          <div className=\"zid-input-helper\">Required for product listing</div>\n        </div>\n        <div>\n          <label className=\"zid-input-label zid-input-label--required\">Priority</label>\n          <div className=\"zid-select zid-select--md zid-select--error\">\n            <select className=\"zid-select__native\" defaultValue=\"\">\n              <option value=\"\" disabled>Select priority</option>\n              <option value=\"low\">Low</option>\n              <option value=\"medium\">Medium</option>\n              <option value=\"high\">High</option>\n            </select>\n            <span className=\"zid-select__icon\">▼</span>\n          </div>\n          <div className=\"zid-input-helper zid-input-helper--error\">Priority is required</div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const WithOptgroups: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>With Option Groups</h3>\n      <div>\n        <label className=\"zid-input-label\">Product Category</label>\n        <div className=\"zid-select zid-select--md\">\n          <select className=\"zid-select__native\" defaultValue=\"\">\n            <option value=\"\" disabled>Select category</option>\n            <optgroup label=\"Electronics\">\n              <option value=\"phones\">Phones</option>\n              <option value=\"laptops\">Laptops</option>\n              <option value=\"tablets\">Tablets</option>\n            </optgroup>\n            <optgroup label=\"Clothing\">\n              <option value=\"shirts\">Shirts</option>\n              <option value=\"pants\">Pants</option>\n              <option value=\"shoes\">Shoes</option>\n            </optgroup>\n            <optgroup label=\"Home\">\n              <option value=\"furniture\">Furniture</option>\n              <option value=\"decor\">Decor</option>\n              <option value=\"kitchen\">Kitchen</option>\n            </optgroup>\n          </select>\n          <span className=\"zid-select__icon\">▼</span>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["jsxs","jsx"],"mappings":"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"}

package/dist/react/cjs/stories/css/Status.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                   */
+const meta = {
+  title: "CSS Styles/Components/Status",
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+const Variants = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Color Variants" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "12px", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--success zid-status--md", children: "Success" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--error zid-status--md", children: "Error" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--warning zid-status--md", children: "Warning" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--info zid-status--md", children: "Info" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--neutral zid-status--md", children: "Neutral" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--disabled zid-status--md", children: "Disabled" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--orange zid-status--md", children: "Orange" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--blue zid-status--md", children: "Blue" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Sizes" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--success zid-status--sm", children: "Small" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--success zid-status--md", children: "Medium" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "With Dot" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "12px", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "zid-status zid-status--success zid-status--md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status__dot" }),
+          "Active"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "zid-status zid-status--error zid-status--md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status__dot" }),
+          "Inactive"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "zid-status zid-status--warning zid-status--md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status__dot" }),
+          "Pending"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "zid-status zid-status--neutral zid-status--md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status__dot" }),
+          "Draft"
+        ] })
+      ] })
+    ] })
+  ] })
+};
+exports.Variants = Variants;
+exports.default = meta;
+//# sourceMappingURL=Status.stories.js.map

package/dist/react/cjs/stories/css/Status.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Status.stories.js","sources":["../../../../../src/stories/css/Status.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'CSS Styles/Components/Status',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Variants: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Color Variants</h3>\n        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>\n          <span className=\"zid-status zid-status--success zid-status--md\">Success</span>\n          <span className=\"zid-status zid-status--error zid-status--md\">Error</span>\n          <span className=\"zid-status zid-status--warning zid-status--md\">Warning</span>\n          <span className=\"zid-status zid-status--info zid-status--md\">Info</span>\n          <span className=\"zid-status zid-status--neutral zid-status--md\">Neutral</span>\n          <span className=\"zid-status zid-status--disabled zid-status--md\">Disabled</span>\n          <span className=\"zid-status zid-status--orange zid-status--md\">Orange</span>\n          <span className=\"zid-status zid-status--blue zid-status--md\">Blue</span>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Sizes</h3>\n        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>\n          <span className=\"zid-status zid-status--success zid-status--sm\">Small</span>\n          <span className=\"zid-status zid-status--success zid-status--md\">Medium</span>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>With Dot</h3>\n        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>\n          <span className=\"zid-status zid-status--success zid-status--md\">\n            <span className=\"zid-status__dot\"></span>Active\n          </span>\n          <span className=\"zid-status zid-status--error zid-status--md\">\n            <span className=\"zid-status__dot\"></span>Inactive\n          </span>\n          <span className=\"zid-status zid-status--warning zid-status--md\">\n            <span className=\"zid-status__dot\"></span>Pending\n          </span>\n          <span className=\"zid-status zid-status--neutral zid-status--md\">\n            <span className=\"zid-status__dot\"></span>Draft\n          </span>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["jsxs","jsx"],"mappings":"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"}

package/dist/react/cjs/stories/css/Switch.stories.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                   */
+const meta = {
+  title: "CSS Styles/Components/Switch",
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+const Colors = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Color Variants (Checked)" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "24px", flexWrap: "wrap", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--primary", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__label", children: "Primary (Success)" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--secondary", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__label", children: "Secondary (Purple)" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--error", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__label", children: "Error" })
+      ] })
+    ] })
+  ] })
+};
+const States = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Switch States" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "24px", flexWrap: "wrap", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--primary", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__label", children: "Off" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--primary", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__label", children: "On" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--primary zid-switch--disabled", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input", disabled: true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__label", children: "Disabled Off" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--primary zid-switch--disabled", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true, disabled: true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__label", children: "Disabled On" })
+      ] })
+    ] })
+  ] })
+};
+const WithoutLabel = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Without Label" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "24px", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--primary", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--primary", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--secondary", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--error", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) })
+      ] })
+    ] })
+  ] })
+};
+const SettingsExample = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "400px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Settings Example" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 0", borderBottom: "1px solid var(--zid-divider)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontWeight: 500 }, children: "Email Notifications" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontSize: "14px", color: "var(--zid-text-secondary)" }, children: "Receive email updates about your account" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--primary", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 0", borderBottom: "1px solid var(--zid-divider)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontWeight: 500 }, children: "Push Notifications" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontSize: "14px", color: "var(--zid-text-secondary)" }, children: "Receive push notifications on your device" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--primary", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 0", borderBottom: "1px solid var(--zid-divider)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontWeight: 500 }, children: "Dark Mode" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontSize: "14px", color: "var(--zid-text-secondary)" }, children: "Use dark theme for the interface" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--secondary", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 0", borderBottom: "1px solid var(--zid-divider)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontWeight: 500, color: "var(--zid-text-disabled)" }, children: "Beta Features" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontSize: "14px", color: "var(--zid-text-disabled)" }, children: "Not available for your account" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-switch zid-switch--primary zid-switch--disabled", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "zid-switch__input", disabled: true }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-switch__thumb" }) })
+        ] })
+      ] })
+    ] })
+  ] })
+};
+exports.Colors = Colors;
+exports.SettingsExample = SettingsExample;
+exports.States = States;
+exports.WithoutLabel = WithoutLabel;
+exports.default = meta;
+//# sourceMappingURL=Switch.stories.js.map

package/dist/react/cjs/stories/css/Switch.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.stories.js","sources":["../../../../../src/stories/css/Switch.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'CSS Styles/Components/Switch',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Colors: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Color Variants (Checked)</h3>\n      <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap', alignItems: 'center' }}>\n        <label className=\"zid-switch zid-switch--primary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">Primary (Success)</span>\n        </label>\n        <label className=\"zid-switch zid-switch--secondary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">Secondary (Purple)</span>\n        </label>\n        <label className=\"zid-switch zid-switch--error\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">Error</span>\n        </label>\n      </div>\n    </div>\n  ),\n};\n\nexport const States: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Switch States</h3>\n      <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap', alignItems: 'center' }}>\n        <label className=\"zid-switch zid-switch--primary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">Off</span>\n        </label>\n        <label className=\"zid-switch zid-switch--primary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">On</span>\n        </label>\n        <label className=\"zid-switch zid-switch--primary zid-switch--disabled\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" disabled />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">Disabled Off</span>\n        </label>\n        <label className=\"zid-switch zid-switch--primary zid-switch--disabled\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked disabled />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">Disabled On</span>\n        </label>\n      </div>\n    </div>\n  ),\n};\n\n\nexport const WithoutLabel: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Without Label</h3>\n      <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>\n        <label className=\"zid-switch zid-switch--primary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n        </label>\n        <label className=\"zid-switch zid-switch--primary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n        </label>\n        <label className=\"zid-switch zid-switch--secondary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n        </label>\n        <label className=\"zid-switch zid-switch--error\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n        </label>\n      </div>\n    </div>\n  ),\n};\n\nexport const SettingsExample: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '400px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Settings Example</h3>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--zid-divider)' }}>\n          <div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontWeight: 500 }}>Email Notifications</div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontSize: '14px', color: 'var(--zid-text-secondary)' }}>Receive email updates about your account</div>\n          </div>\n          <label className=\"zid-switch zid-switch--primary\">\n            <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n            <span className=\"zid-switch__track\">\n              <span className=\"zid-switch__thumb\"></span>\n            </span>\n          </label>\n        </div>\n        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--zid-divider)' }}>\n          <div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontWeight: 500 }}>Push Notifications</div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontSize: '14px', color: 'var(--zid-text-secondary)' }}>Receive push notifications on your device</div>\n          </div>\n          <label className=\"zid-switch zid-switch--primary\">\n            <input type=\"checkbox\" className=\"zid-switch__input\" />\n            <span className=\"zid-switch__track\">\n              <span className=\"zid-switch__thumb\"></span>\n            </span>\n          </label>\n        </div>\n        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--zid-divider)' }}>\n          <div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontWeight: 500 }}>Dark Mode</div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontSize: '14px', color: 'var(--zid-text-secondary)' }}>Use dark theme for the interface</div>\n          </div>\n          <label className=\"zid-switch zid-switch--secondary\">\n            <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n            <span className=\"zid-switch__track\">\n              <span className=\"zid-switch__thumb\"></span>\n            </span>\n          </label>\n        </div>\n        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--zid-divider)' }}>\n          <div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontWeight: 500, color: 'var(--zid-text-disabled)' }}>Beta Features</div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontSize: '14px', color: 'var(--zid-text-disabled)' }}>Not available for your account</div>\n          </div>\n          <label className=\"zid-switch zid-switch--primary zid-switch--disabled\">\n            <input type=\"checkbox\" className=\"zid-switch__input\" disabled />\n            <span className=\"zid-switch__track\">\n              <span className=\"zid-switch__thumb\"></span>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["jsxs","jsx"],"mappings":"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"}