@vielzeug/buildit 2.0.0

package/dist/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","names":[],"sources":["../src/inputs/form/form.ts"],"sourcesContent":["import { computed, defineComponent, html, typed, provide } from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { FORM_CTX } from '../shared/form-context';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './form.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\nexport type BitFormEvents = {\n  reset: { originalEvent: Event };\n  submit: { formData: FormData; originalEvent: SubmitEvent };\n};\n\nexport type BitFormProps = {\n  /** Disable all child form fields */\n  disabled?: boolean;\n  /** Native form novalidate */\n  novalidate?: boolean;\n  /** Form layout orientation */\n  orientation?: 'vertical' | 'horizontal';\n  /** Default size for all child fields */\n  size?: ComponentSize;\n  /**\n   * When to validate child form controls.\n   * - `'submit'` (default): validate only when the form is submitted\n   * - `'blur'`: validate each field as it loses focus\n   * - `'change'`: validate on every value change (most immediate feedback)\n   */\n  validateOn?: 'submit' | 'blur' | 'change';\n  /** Default variant for all child fields */\n  variant?: Exclude<VisualVariant, 'glass' | 'frost' | 'text'>;\n};\n\n/**\n * `bit-form` — Native `<form>` wrapper that propagates `disabled`, `size`, and `variant`\n * context to all child `bit-*` form fields. Intercepts submit/reset events.\n *\n * @element bit-form\n *\n * @attr {boolean} disabled - Disable all child form fields\n * @attr {string} size - Default size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Default visual variant for child fields\n * @attr {string} orientation - Layout direction: 'vertical' | 'horizontal'\n * @attr {boolean} novalidate - Skip native browser validation\n *\n * @fires submit - Fired on form submit; detail contains `formData` and `originalEvent`\n * @fires reset  - Fired on form reset; detail contains `originalEvent`\n *\n * @slot - Form content (bit-input, bit-select, etc.)\n *\n * @cssprop --form-gap - Spacing between child form controls\n *\n * @example\n * ```html\n * <bit-form id=\"my-form\" size=\"sm\" variant=\"flat\">\n *   <bit-input name=\"email\" label=\"Email\" type=\"email\"></bit-input>\n *   <bit-select name=\"role\" label=\"Role\">\n *     <option value=\"admin\">Admin</option>\n *   </bit-select>\n *   <bit-button type=\"submit\">Submit</bit-button>\n * </bit-form>\n * ```\n */\nexport const FORM_TAG = defineComponent<BitFormProps, BitFormEvents>({\n  props: {\n    disabled: typed<boolean>(false),\n    novalidate: typed<boolean>(false),\n    orientation: typed<BitFormProps['orientation']>('vertical'),\n    size: typed<BitFormProps['size']>(undefined),\n    validateOn: typed<BitFormProps['validateOn']>(undefined),\n    variant: typed<BitFormProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    // Provide context to all child bit-* form fields\n    provide(FORM_CTX, {\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      validateOn: computed(() => props.validateOn.value ?? 'submit'),\n      variant: props.variant,\n    });\n    // ── Event handlers ────────────────────────────────────────────────────────\n    function handleSubmit(e: Event) {\n      const submitEvent = e as SubmitEvent;\n      const formEl = host.shadowRoot?.querySelector('form');\n\n      if (!formEl) return;\n\n      e.preventDefault();\n\n      const formData = new FormData(formEl);\n\n      emit('submit', { formData, originalEvent: submitEvent });\n    }\n    function handleReset(e: Event) {\n      emit('reset', { originalEvent: e });\n    }\n\n    return html`\n      <form\n        part=\"form\"\n        :novalidate=\"${() => props.novalidate.value || null}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        @submit=\"${handleSubmit}\"\n        @reset=\"${handleReset}\">\n        <slot></slot>\n      </form>\n    `;\n  },\n  shadow: { delegatesFocus: false },\n  styles: [componentStyles],\n  tag: 'bit-form',\n});\n"],"mappings":";;;;AAqEA,IAAa,IAAW,EAA6C;CACnE,OAAO;EACL,UAAU,EAAe,GAAM;EAC/B,YAAY,EAAe,GAAM;EACjC,aAAa,EAAmC,WAAW;EAC3D,MAAM,EAA4B,KAAA,EAAU;EAC5C,YAAY,EAAkC,KAAA,EAAU;EACxD,SAAS,EAA+B,KAAA,EAAU;EACnD;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;AAE3B,IAAQ,GAAU;GAChB,UAAU,QAAe,EAAQ,EAAM,SAAS,MAAO;GACvD,MAAM,EAAM;GACZ,YAAY,QAAe,EAAM,WAAW,SAAS,SAAS;GAC9D,SAAS,EAAM;GAChB,CAAC;EAEF,SAAS,EAAa,GAAU;GAC9B,IAAM,IAAc,GACd,IAAS,EAAK,YAAY,cAAc,OAAO;AAEhD,SAEL,EAAE,gBAAgB,EAIlB,EAAK,UAAU;IAAE,UAFA,IAAI,SAAS,EAAO;IAEV,eAAe;IAAa,CAAC;;EAE1D,SAAS,EAAY,GAAU;AAC7B,KAAK,SAAS,EAAE,eAAe,GAAG,CAAC;;AAGrC,SAAO,CAAI;;;6BAGc,EAAM,WAAW,SAAS,KAAK;gCAC3B,EAAM,SAAS,QAAQ,SAAS,KAAM;mBACpD,EAAa;kBACd,EAAY;;;;;CAK5B,QAAQ,EAAE,gBAAgB,IAAO;CACjC,QAAQ,CAAC,EAAgB;CACzB,KAAK;CACN,CAAC"}

package/dist/grid-item.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./layout/grid-item/grid-item.css?inline.cjs`);let t=require(`@vielzeug/craftit`);var n=(0,t.defineComponent)({props:{align:{default:void 0},col:{default:``},colSpan:{default:void 0},justify:{default:void 0},row:{default:``},rowSpan:{default:void 0}},setup({host:e,props:n}){return(0,t.effect)(()=>{let t=n.col.value,r=n.colSpan.value;t?e.style.setProperty(`grid-column`,t):r===`full`?e.style.setProperty(`grid-column`,`1 / -1`):r?e.style.setProperty(`grid-column`,`span ${r}`):e.style.removeProperty(`grid-column`)}),(0,t.effect)(()=>{let t=n.row.value,r=n.rowSpan.value;t?e.style.setProperty(`grid-row`,t):r===`full`?e.style.setProperty(`grid-row`,`1 / -1`):r?e.style.setProperty(`grid-row`,`span ${r}`):e.style.removeProperty(`grid-row`)}),t.html`<slot></slot>`},styles:[e.default],tag:`bit-grid-item`});exports.GRID_ITEM_TAG=n;
+//# sourceMappingURL=grid-item.cjs.map

package/dist/grid-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.cjs","names":[],"sources":["../src/layout/grid-item/grid-item.ts"],"sourcesContent":["import { defineComponent, effect, html } from '@vielzeug/craftit';\n\nimport styles from './grid-item.css?inline';\n\n/** Grid item component properties */\nexport type BitGridItemProps = {\n  /** Align self vertically within the grid cell */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-column value — overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */\n  col?: string;\n  /** Span N columns. Use 'full' to span all columns (1 / -1). */\n  colSpan?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full';\n  /** Justify self horizontally within the grid cell */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-row value — overrides row-span (e.g. '1 / 3', 'span 2'). */\n  row?: string;\n  /** Span N rows. Use 'full' to span all rows (1 / -1). */\n  rowSpan?: '1' | '2' | '3' | '4' | '5' | '6' | 'full';\n};\n\n/**\n * bit-grid-item — A grid cell with declarative placement and span control.\n *\n * Use `col-span` / `row-span` for the common case of spanning columns/rows.\n * Use `col` / `row` for full CSS grid-column / grid-row shorthand power\n * (e.g. explicit placement, mixed span + start, negative lines).\n *\n * @element bit-grid-item\n *\n * @attr {string} col-span - Columns to span: '1'–'12' | 'full'\n * @attr {string} row-span - Rows to span: '1'–'6' | 'full'\n * @attr {string} col - CSS grid-column value (overrides col-span)\n * @attr {string} row - CSS grid-row value (overrides row-span)\n * @attr {string} align - align-self: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} justify - justify-self: 'start' | 'center' | 'end' | 'stretch'\n *\n * @slot - Grid item content\n *\n * @example\n * <!-- Span 2 columns -->\n * <bit-grid-item col-span=\"2\">Wide</bit-grid-item>\n *\n * @example\n * <!-- Full-width row -->\n * <bit-grid-item col-span=\"full\">Banner</bit-grid-item>\n *\n * @example\n * <!-- Explicit placement -->\n * <bit-grid-item col=\"2 / 5\" row=\"1 / 3\">Placed</bit-grid-item>\n */\nexport const GRID_ITEM_TAG = defineComponent<BitGridItemProps>({\n  props: {\n    align: { default: undefined },\n    col: { default: '' },\n    colSpan: { default: undefined },\n    justify: { default: undefined },\n    row: { default: '' },\n    rowSpan: { default: undefined },\n  },\n  setup({ host, props }) {\n    effect(() => {\n      const col = props.col.value;\n      const span = props.colSpan.value;\n\n      if (col) {\n        host.style.setProperty('grid-column', col);\n      } else if (span === 'full') {\n        host.style.setProperty('grid-column', '1 / -1');\n      } else if (span) {\n        host.style.setProperty('grid-column', `span ${span}`);\n      } else {\n        host.style.removeProperty('grid-column');\n      }\n    });\n    effect(() => {\n      const row = props.row.value;\n      const span = props.rowSpan.value;\n\n      if (row) {\n        host.style.setProperty('grid-row', row);\n      } else if (span === 'full') {\n        host.style.setProperty('grid-row', '1 / -1');\n      } else if (span) {\n        host.style.setProperty('grid-row', `span ${span}`);\n      } else {\n        host.style.removeProperty('grid-row');\n      }\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n  tag: 'bit-grid-item',\n});\n"],"mappings":"qKAkDA,IAAa,GAAA,EAAA,EAAA,iBAAkD,CAC7D,MAAO,CACL,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,IAAK,CAAE,QAAS,GAAI,CACpB,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,IAAK,CAAE,QAAS,GAAI,CACpB,QAAS,CAAE,QAAS,IAAA,GAAW,CAChC,CACD,MAAM,CAAE,OAAM,SAAS,CA8BrB,OA7BA,EAAA,EAAA,YAAa,CACX,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAEvB,EACF,EAAK,MAAM,YAAY,cAAe,EAAI,CACjC,IAAS,OAClB,EAAK,MAAM,YAAY,cAAe,SAAS,CACtC,EACT,EAAK,MAAM,YAAY,cAAe,QAAQ,IAAO,CAErD,EAAK,MAAM,eAAe,cAAc,EAE1C,EACF,EAAA,EAAA,YAAa,CACX,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAEvB,EACF,EAAK,MAAM,YAAY,WAAY,EAAI,CAC9B,IAAS,OAClB,EAAK,MAAM,YAAY,WAAY,SAAS,CACnC,EACT,EAAK,MAAM,YAAY,WAAY,QAAQ,IAAO,CAElD,EAAK,MAAM,eAAe,WAAW,EAEvC,CAEK,EAAA,IAAI,iBAEb,OAAQ,CAAC,EAAA,QAAO,CAChB,IAAK,gBACN,CAAC"}

package/dist/grid-item.js

@@ -0,0 +1,28 @@
+import e from "./layout/grid-item/grid-item.css?inline.js";
+import { defineComponent as t, effect as n, html as r } from "@vielzeug/craftit";
+//#region src/layout/grid-item/grid-item.ts
+var i = t({
+	props: {
+		align: { default: void 0 },
+		col: { default: "" },
+		colSpan: { default: void 0 },
+		justify: { default: void 0 },
+		row: { default: "" },
+		rowSpan: { default: void 0 }
+	},
+	setup({ host: e, props: t }) {
+		return n(() => {
+			let n = t.col.value, r = t.colSpan.value;
+			n ? e.style.setProperty("grid-column", n) : r === "full" ? e.style.setProperty("grid-column", "1 / -1") : r ? e.style.setProperty("grid-column", `span ${r}`) : e.style.removeProperty("grid-column");
+		}), n(() => {
+			let n = t.row.value, r = t.rowSpan.value;
+			n ? e.style.setProperty("grid-row", n) : r === "full" ? e.style.setProperty("grid-row", "1 / -1") : r ? e.style.setProperty("grid-row", `span ${r}`) : e.style.removeProperty("grid-row");
+		}), r`<slot></slot>`;
+	},
+	styles: [e],
+	tag: "bit-grid-item"
+});
+//#endregion
+export { i as GRID_ITEM_TAG };
+
+//# sourceMappingURL=grid-item.js.map

package/dist/grid-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.js","names":[],"sources":["../src/layout/grid-item/grid-item.ts"],"sourcesContent":["import { defineComponent, effect, html } from '@vielzeug/craftit';\n\nimport styles from './grid-item.css?inline';\n\n/** Grid item component properties */\nexport type BitGridItemProps = {\n  /** Align self vertically within the grid cell */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-column value — overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */\n  col?: string;\n  /** Span N columns. Use 'full' to span all columns (1 / -1). */\n  colSpan?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full';\n  /** Justify self horizontally within the grid cell */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-row value — overrides row-span (e.g. '1 / 3', 'span 2'). */\n  row?: string;\n  /** Span N rows. Use 'full' to span all rows (1 / -1). */\n  rowSpan?: '1' | '2' | '3' | '4' | '5' | '6' | 'full';\n};\n\n/**\n * bit-grid-item — A grid cell with declarative placement and span control.\n *\n * Use `col-span` / `row-span` for the common case of spanning columns/rows.\n * Use `col` / `row` for full CSS grid-column / grid-row shorthand power\n * (e.g. explicit placement, mixed span + start, negative lines).\n *\n * @element bit-grid-item\n *\n * @attr {string} col-span - Columns to span: '1'–'12' | 'full'\n * @attr {string} row-span - Rows to span: '1'–'6' | 'full'\n * @attr {string} col - CSS grid-column value (overrides col-span)\n * @attr {string} row - CSS grid-row value (overrides row-span)\n * @attr {string} align - align-self: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} justify - justify-self: 'start' | 'center' | 'end' | 'stretch'\n *\n * @slot - Grid item content\n *\n * @example\n * <!-- Span 2 columns -->\n * <bit-grid-item col-span=\"2\">Wide</bit-grid-item>\n *\n * @example\n * <!-- Full-width row -->\n * <bit-grid-item col-span=\"full\">Banner</bit-grid-item>\n *\n * @example\n * <!-- Explicit placement -->\n * <bit-grid-item col=\"2 / 5\" row=\"1 / 3\">Placed</bit-grid-item>\n */\nexport const GRID_ITEM_TAG = defineComponent<BitGridItemProps>({\n  props: {\n    align: { default: undefined },\n    col: { default: '' },\n    colSpan: { default: undefined },\n    justify: { default: undefined },\n    row: { default: '' },\n    rowSpan: { default: undefined },\n  },\n  setup({ host, props }) {\n    effect(() => {\n      const col = props.col.value;\n      const span = props.colSpan.value;\n\n      if (col) {\n        host.style.setProperty('grid-column', col);\n      } else if (span === 'full') {\n        host.style.setProperty('grid-column', '1 / -1');\n      } else if (span) {\n        host.style.setProperty('grid-column', `span ${span}`);\n      } else {\n        host.style.removeProperty('grid-column');\n      }\n    });\n    effect(() => {\n      const row = props.row.value;\n      const span = props.rowSpan.value;\n\n      if (row) {\n        host.style.setProperty('grid-row', row);\n      } else if (span === 'full') {\n        host.style.setProperty('grid-row', '1 / -1');\n      } else if (span) {\n        host.style.setProperty('grid-row', `span ${span}`);\n      } else {\n        host.style.removeProperty('grid-row');\n      }\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n  tag: 'bit-grid-item',\n});\n"],"mappings":";;;AAkDA,IAAa,IAAgB,EAAkC;CAC7D,OAAO;EACL,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,KAAK,EAAE,SAAS,IAAI;EACpB,SAAS,EAAE,SAAS,KAAA,GAAW;EAC/B,SAAS,EAAE,SAAS,KAAA,GAAW;EAC/B,KAAK,EAAE,SAAS,IAAI;EACpB,SAAS,EAAE,SAAS,KAAA,GAAW;EAChC;CACD,MAAM,EAAE,SAAM,YAAS;AA8BrB,SA7BA,QAAa;GACX,IAAM,IAAM,EAAM,IAAI,OAChB,IAAO,EAAM,QAAQ;AAE3B,GAAI,IACF,EAAK,MAAM,YAAY,eAAe,EAAI,GACjC,MAAS,SAClB,EAAK,MAAM,YAAY,eAAe,SAAS,GACtC,IACT,EAAK,MAAM,YAAY,eAAe,QAAQ,IAAO,GAErD,EAAK,MAAM,eAAe,cAAc;IAE1C,EACF,QAAa;GACX,IAAM,IAAM,EAAM,IAAI,OAChB,IAAO,EAAM,QAAQ;AAE3B,GAAI,IACF,EAAK,MAAM,YAAY,YAAY,EAAI,GAC9B,MAAS,SAClB,EAAK,MAAM,YAAY,YAAY,SAAS,GACnC,IACT,EAAK,MAAM,YAAY,YAAY,QAAQ,IAAO,GAElD,EAAK,MAAM,eAAe,WAAW;IAEvC,EAEK,CAAI;;CAEb,QAAQ,CAAC,EAAO;CAChB,KAAK;CACN,CAAC"}

package/dist/grid.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./craftit/dist/labs/observers.cjs`);require(`./craftit/dist/labs.cjs`);const t=require(`./layout/grid/grid.css?inline.cjs`);let n=require(`@vielzeug/craftit`);var r=[[`cols2xl`,`--size-screen-2xl`],[`colsXl`,`--size-screen-xl`],[`colsLg`,`--size-screen-lg`],[`colsMd`,`--size-screen-md`],[`colsSm`,`--size-screen-sm`]],i=[[`areas2xl`,`--size-screen-2xl`],[`areasXl`,`--size-screen-xl`],[`areasLg`,`--size-screen-lg`],[`areasMd`,`--size-screen-md`],[`areasSm`,`--size-screen-sm`]],a=(e,t,n)=>{let r=getComputedStyle(e).getPropertyValue(t).trim(),i=Number.parseFloat(r);return Number.isFinite(i)?i:n},o={"--size-screen-2xl":1536,"--size-screen-lg":1024,"--size-screen-md":768,"--size-screen-sm":640,"--size-screen-xl":1280},s=(0,n.defineComponent)({props:{align:{default:void 0},areas:{default:``},areas2xl:{default:``},areasLg:{default:``},areasMd:{default:``},areasSm:{default:``},areasXl:{default:``},cols:{default:void 0},cols2xl:{default:void 0},colsLg:{default:void 0},colsMd:{default:void 0},colsSm:{default:void 0},colsXl:{default:void 0},flow:{default:void 0},fullwidth:{default:!1},gap:{default:void 0},justify:{default:void 0},minColWidth:{default:``},responsive:{default:!1},rows:{default:void 0}},setup({host:t,props:s}){let c=(e,t,n)=>e===`auto`||!e&&t?`repeat(auto-fit, minmax(${n||`250px`}, 1fr))`:e?`repeat(${e}, 1fr)`:null,l=()=>{let e=t.offsetWidth,n=!!s.responsive.value,i=s.minColWidth.value??``,l;for(let[n,i]of r)if(e>=a(t,i,o[i])&&s[n].value){l=s[n].value;break}l||=s.cols.value||void 0;let u=c(l,n,i);u?t.style.setProperty(`--_cols`,u):t.style.removeProperty(`--_cols`)};(0,n.effect)(()=>{s.cols.value,s.colsSm.value,s.colsMd.value,s.colsLg.value,s.colsXl.value,s.cols2xl.value,s.responsive.value,s.minColWidth.value,l()});let u=()=>{let e=t.offsetWidth,n=``;for(let[r,c]of i)if(e>=a(t,c,o[c])&&s[r].value){n=s[r].value;break}n||=s.areas.value||``,n?t.style.setProperty(`grid-template-areas`,n):t.style.removeProperty(`grid-template-areas`)};return(0,n.onMount)(()=>{let r=e.n(t);(0,n.effect)(()=>{r.value,l(),u()})}),(0,n.effect)(()=>{let e=s.rows.value;e&&e!==`auto`?t.style.setProperty(`--_rows`,`repeat(${e}, 1fr)`):t.style.removeProperty(`--_rows`)}),(0,n.effect)(()=>{s.areas.value,s.areasSm.value,s.areasMd.value,s.areasLg.value,s.areasXl.value,s.areas2xl.value,u()}),n.html`<slot></slot>`},styles:[t.default],tag:`bit-grid`});exports.GRID_TAG=s;
+//# sourceMappingURL=grid.cjs.map

package/dist/grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.cjs","names":[],"sources":["../src/layout/grid/grid.ts"],"sourcesContent":["import { defineComponent, effect, html, onMount } from '@vielzeug/craftit';\nimport { observeResize } from '@vielzeug/craftit/labs';\n\nconst BREAKPOINTS: ['cols2xl' | 'colsXl' | 'colsLg' | 'colsMd' | 'colsSm', string][] = [\n  ['cols2xl', '--size-screen-2xl'],\n  ['colsXl', '--size-screen-xl'],\n  ['colsLg', '--size-screen-lg'],\n  ['colsMd', '--size-screen-md'],\n  ['colsSm', '--size-screen-sm'],\n];\n\nconst AREAS_BREAKPOINTS: ['areas2xl' | 'areasXl' | 'areasLg' | 'areasMd' | 'areasSm', string][] = [\n  ['areas2xl', '--size-screen-2xl'],\n  ['areasXl', '--size-screen-xl'],\n  ['areasLg', '--size-screen-lg'],\n  ['areasMd', '--size-screen-md'],\n  ['areasSm', '--size-screen-sm'],\n];\n\nconst resolveBp = (host: HTMLElement, varName: string, fallback: number): number => {\n  const raw = getComputedStyle(host).getPropertyValue(varName).trim();\n  const parsed = Number.parseFloat(raw);\n\n  return Number.isFinite(parsed) ? parsed : fallback;\n};\n\nconst BP_FALLBACKS: Record<string, number> = {\n  '--size-screen-2xl': 1536,\n  '--size-screen-lg': 1024,\n  '--size-screen-md': 768,\n  '--size-screen-sm': 640,\n  '--size-screen-xl': 1280,\n};\n\nimport styles from './grid.css?inline';\n\ntype ColCount = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n\n/** Grid component properties */\nexport type BitGridProps = {\n  /** Align items vertically */\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  /** CSS grid-template-areas value */\n  areas?: string;\n  /** grid-template-areas at 2xl breakpoint (≥1536px) */\n  areas2xl?: string;\n  /** grid-template-areas at lg breakpoint (≥1024px) */\n  areasLg?: string;\n  /** grid-template-areas at md breakpoint (≥768px) */\n  areasMd?: string;\n  /** grid-template-areas at sm breakpoint (≥640px) */\n  areasSm?: string;\n  /** grid-template-areas at xl breakpoint (≥1280px) */\n  areasXl?: string;\n  /** Number of columns: '1'-'12' | 'auto' */\n  cols?: ColCount;\n  /** Columns at 2xl breakpoint (≥1536px) */\n  cols2xl?: ColCount;\n  /** Columns at lg breakpoint (≥1024px) */\n  colsLg?: ColCount;\n  /** Columns at md breakpoint (≥768px) */\n  colsMd?: ColCount;\n  /** Columns at sm breakpoint (≥640px) */\n  colsSm?: ColCount;\n  /** Columns at xl breakpoint (≥1280px) */\n  colsXl?: ColCount;\n  /** Grid auto flow direction */\n  flow?: 'row' | 'column' | 'row-dense' | 'column-dense';\n  /** Stretch the grid to fill its container's full width */\n  fullwidth?: boolean;\n  /** Gap between items */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Justify items horizontally */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Minimum column width for responsive mode (default: 250px) */\n  minColWidth?: string;\n  /** Use auto-fit responsive columns */\n  responsive?: boolean;\n  /** Number of rows: '1'-'12' | 'auto' */\n  rows?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n};\n\n/**\n * bit-grid — Flexible grid layout with responsive column control.\n *\n * Columns are computed in JS and applied as `--_cols` inline, so they respond\n * to the element's own width via ResizeObserver. CSS custom properties\n * `--grid-cols`, `--grid-rows`, `--grid-gap`, `--grid-row-gap`, `--grid-col-gap`\n * are honoured as fallbacks when no attribute is set.\n *\n * @element bit-grid\n *\n * @attr {string} cols - Column count: '1'–'12' | 'auto'\n * @attr {string} cols-sm - Columns when width ≥ 640px\n * @attr {string} cols-md - Columns when width ≥ 768px\n * @attr {string} cols-lg - Columns when width ≥ 1024px\n * @attr {string} cols-xl - Columns when width ≥ 1280px\n * @attr {string} cols-2xl - Columns when width ≥ 1536px\n * @attr {string} rows - Row count: '1'–'12' | 'auto'\n * @attr {string} gap - Gap token: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} align - align-items: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n * @attr {string} justify - justify-items: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} flow - grid-auto-flow: 'row' | 'column' | 'row-dense' | 'column-dense'\n * @attr {boolean} responsive - Enables auto-fit columns without a fixed count\n * @attr {string} min-col-width - Min column width for responsive mode (default: 250px)\n * @attr {boolean} fullwidth - Stretch the grid to fill its container's full width\n * @attr {string} areas - CSS grid-template-areas value (e.g. \"'header header' 'nav main'\")\n * @attr {string} areas-sm - grid-template-areas when width ≥ 640px\n * @attr {string} areas-md - grid-template-areas when width ≥ 768px\n * @attr {string} areas-lg - grid-template-areas when width ≥ 1024px\n * @attr {string} areas-xl - grid-template-areas when width ≥ 1280px\n * @attr {string} areas-2xl - grid-template-areas when width ≥ 1536px\n *\n * @slot - Grid items\n *\n * @cssprop --grid-cols - Fallback column template (used when no cols attr is set)\n * @cssprop --grid-rows - Fallback row template\n * @cssprop --grid-gap - Fallback gap\n * @cssprop --grid-row-gap - Fallback row gap\n * @cssprop --grid-col-gap - Fallback column gap\n *\n * @example\n * <bit-grid cols=\"1\" cols-sm=\"2\" cols-lg=\"4\" gap=\"md\">\n *   <div>Item</div>\n * </bit-grid>\n *\n * @example\n * <!-- Responsive auto-fit -->\n * <bit-grid responsive min-col-width=\"200px\" gap=\"sm\">\n *   <div>Card</div>\n * </bit-grid>\n *\n * @example\n * <!-- Named grid areas -->\n * <bit-grid cols=\"2\" rows=\"2\" areas=\"'header header' 'nav main'\">\n *   <header style=\"grid-area: header\">Header</header>\n *   <nav style=\"grid-area: nav\">Nav</nav>\n *   <main style=\"grid-area: main\">Main</main>\n * </bit-grid>\n */\nexport const GRID_TAG = defineComponent<BitGridProps>({\n  props: {\n    align: { default: undefined },\n    areas: { default: '' },\n    areas2xl: { default: '' },\n    areasLg: { default: '' },\n    areasMd: { default: '' },\n    areasSm: { default: '' },\n    areasXl: { default: '' },\n    cols: { default: undefined },\n    cols2xl: { default: undefined },\n    colsLg: { default: undefined },\n    colsMd: { default: undefined },\n    colsSm: { default: undefined },\n    colsXl: { default: undefined },\n    flow: { default: undefined },\n    fullwidth: { default: false },\n    gap: { default: undefined },\n    justify: { default: undefined },\n    minColWidth: { default: '' },\n    responsive: { default: false },\n    rows: { default: undefined },\n  },\n  setup({ host, props }) {\n    const computeCols = (activeCols: string | undefined, responsive: boolean, minW: string): string | null => {\n      if (activeCols === 'auto' || (!activeCols && responsive)) {\n        return `repeat(auto-fit, minmax(${minW || '250px'}, 1fr))`;\n      }\n\n      return activeCols ? `repeat(${activeCols}, 1fr)` : null;\n    };\n    const updateCols = () => {\n      const w = host.offsetWidth;\n      const responsive = Boolean(props.responsive.value);\n      const minW = props.minColWidth.value ?? '';\n      let activeCols: string | undefined;\n\n      for (const [key, cssVar] of BREAKPOINTS) {\n        if (w >= resolveBp(host, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          activeCols = props[key].value!;\n          break;\n        }\n      }\n      activeCols ||= props.cols.value || undefined;\n\n      const colsValue = computeCols(activeCols, responsive, minW);\n\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      colsValue ? host.style.setProperty('--_cols', colsValue) : host.style.removeProperty('--_cols');\n    };\n\n    // Re-run cols whenever any responsive prop changes\n    effect(() => {\n      void [\n        props.cols.value,\n        props.colsSm.value,\n        props.colsMd.value,\n        props.colsLg.value,\n        props.colsXl.value,\n        props.cols2xl.value,\n        props.responsive.value,\n        props.minColWidth.value,\n      ];\n      updateCols();\n    });\n\n    const updateAreas = () => {\n      const w = host.offsetWidth;\n      let active = '';\n\n      for (const [key, cssVar] of AREAS_BREAKPOINTS) {\n        if (w >= resolveBp(host, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          active = props[key].value!;\n          break;\n        }\n      }\n      active ||= props.areas.value || '';\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      active ? host.style.setProperty('grid-template-areas', active) : host.style.removeProperty('grid-template-areas');\n    };\n\n    // Also, update on element resize (drives breakpoint switching)\n    onMount(() => {\n      const size = observeResize(host);\n\n      effect(() => {\n        void size.value;\n        updateCols();\n        updateAreas();\n      });\n    });\n    // Rows\n    effect(() => {\n      const rows = props.rows.value;\n\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      rows && rows !== 'auto'\n        ? host.style.setProperty('--_rows', `repeat(${rows}, 1fr)`)\n        : host.style.removeProperty('--_rows');\n    });\n    // Grid template areas (responsive)\n    effect(() => {\n      void [\n        props.areas.value,\n        props.areasSm.value,\n        props.areasMd.value,\n        props.areasLg.value,\n        props.areasXl.value,\n        props.areas2xl.value,\n      ];\n      updateAreas();\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n  tag: 'bit-grid',\n});\n"],"mappings":"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"}

package/dist/grid.js

@@ -0,0 +1,90 @@
+import { n as e } from "./craftit/dist/labs/observers.js";
+import "./craftit/dist/labs.js";
+import t from "./layout/grid/grid.css?inline.js";
+import { defineComponent as n, effect as r, html as i, onMount as a } from "@vielzeug/craftit";
+//#region src/layout/grid/grid.ts
+var o = [
+	["cols2xl", "--size-screen-2xl"],
+	["colsXl", "--size-screen-xl"],
+	["colsLg", "--size-screen-lg"],
+	["colsMd", "--size-screen-md"],
+	["colsSm", "--size-screen-sm"]
+], s = [
+	["areas2xl", "--size-screen-2xl"],
+	["areasXl", "--size-screen-xl"],
+	["areasLg", "--size-screen-lg"],
+	["areasMd", "--size-screen-md"],
+	["areasSm", "--size-screen-sm"]
+], c = (e, t, n) => {
+	let r = getComputedStyle(e).getPropertyValue(t).trim(), i = Number.parseFloat(r);
+	return Number.isFinite(i) ? i : n;
+}, l = {
+	"--size-screen-2xl": 1536,
+	"--size-screen-lg": 1024,
+	"--size-screen-md": 768,
+	"--size-screen-sm": 640,
+	"--size-screen-xl": 1280
+}, u = n({
+	props: {
+		align: { default: void 0 },
+		areas: { default: "" },
+		areas2xl: { default: "" },
+		areasLg: { default: "" },
+		areasMd: { default: "" },
+		areasSm: { default: "" },
+		areasXl: { default: "" },
+		cols: { default: void 0 },
+		cols2xl: { default: void 0 },
+		colsLg: { default: void 0 },
+		colsMd: { default: void 0 },
+		colsSm: { default: void 0 },
+		colsXl: { default: void 0 },
+		flow: { default: void 0 },
+		fullwidth: { default: !1 },
+		gap: { default: void 0 },
+		justify: { default: void 0 },
+		minColWidth: { default: "" },
+		responsive: { default: !1 },
+		rows: { default: void 0 }
+	},
+	setup({ host: t, props: n }) {
+		let u = (e, t, n) => e === "auto" || !e && t ? `repeat(auto-fit, minmax(${n || "250px"}, 1fr))` : e ? `repeat(${e}, 1fr)` : null, d = () => {
+			let e = t.offsetWidth, r = !!n.responsive.value, i = n.minColWidth.value ?? "", a;
+			for (let [r, i] of o) if (e >= c(t, i, l[i]) && n[r].value) {
+				a = n[r].value;
+				break;
+			}
+			a ||= n.cols.value || void 0;
+			let s = u(a, r, i);
+			s ? t.style.setProperty("--_cols", s) : t.style.removeProperty("--_cols");
+		};
+		r(() => {
+			n.cols.value, n.colsSm.value, n.colsMd.value, n.colsLg.value, n.colsXl.value, n.cols2xl.value, n.responsive.value, n.minColWidth.value, d();
+		});
+		let f = () => {
+			let e = t.offsetWidth, r = "";
+			for (let [i, a] of s) if (e >= c(t, a, l[a]) && n[i].value) {
+				r = n[i].value;
+				break;
+			}
+			r ||= n.areas.value || "", r ? t.style.setProperty("grid-template-areas", r) : t.style.removeProperty("grid-template-areas");
+		};
+		return a(() => {
+			let n = e(t);
+			r(() => {
+				n.value, d(), f();
+			});
+		}), r(() => {
+			let e = n.rows.value;
+			e && e !== "auto" ? t.style.setProperty("--_rows", `repeat(${e}, 1fr)`) : t.style.removeProperty("--_rows");
+		}), r(() => {
+			n.areas.value, n.areasSm.value, n.areasMd.value, n.areasLg.value, n.areasXl.value, n.areas2xl.value, f();
+		}), i`<slot></slot>`;
+	},
+	styles: [t],
+	tag: "bit-grid"
+});
+//#endregion
+export { u as GRID_TAG };
+
+//# sourceMappingURL=grid.js.map

package/dist/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","names":[],"sources":["../src/layout/grid/grid.ts"],"sourcesContent":["import { defineComponent, effect, html, onMount } from '@vielzeug/craftit';\nimport { observeResize } from '@vielzeug/craftit/labs';\n\nconst BREAKPOINTS: ['cols2xl' | 'colsXl' | 'colsLg' | 'colsMd' | 'colsSm', string][] = [\n  ['cols2xl', '--size-screen-2xl'],\n  ['colsXl', '--size-screen-xl'],\n  ['colsLg', '--size-screen-lg'],\n  ['colsMd', '--size-screen-md'],\n  ['colsSm', '--size-screen-sm'],\n];\n\nconst AREAS_BREAKPOINTS: ['areas2xl' | 'areasXl' | 'areasLg' | 'areasMd' | 'areasSm', string][] = [\n  ['areas2xl', '--size-screen-2xl'],\n  ['areasXl', '--size-screen-xl'],\n  ['areasLg', '--size-screen-lg'],\n  ['areasMd', '--size-screen-md'],\n  ['areasSm', '--size-screen-sm'],\n];\n\nconst resolveBp = (host: HTMLElement, varName: string, fallback: number): number => {\n  const raw = getComputedStyle(host).getPropertyValue(varName).trim();\n  const parsed = Number.parseFloat(raw);\n\n  return Number.isFinite(parsed) ? parsed : fallback;\n};\n\nconst BP_FALLBACKS: Record<string, number> = {\n  '--size-screen-2xl': 1536,\n  '--size-screen-lg': 1024,\n  '--size-screen-md': 768,\n  '--size-screen-sm': 640,\n  '--size-screen-xl': 1280,\n};\n\nimport styles from './grid.css?inline';\n\ntype ColCount = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n\n/** Grid component properties */\nexport type BitGridProps = {\n  /** Align items vertically */\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  /** CSS grid-template-areas value */\n  areas?: string;\n  /** grid-template-areas at 2xl breakpoint (≥1536px) */\n  areas2xl?: string;\n  /** grid-template-areas at lg breakpoint (≥1024px) */\n  areasLg?: string;\n  /** grid-template-areas at md breakpoint (≥768px) */\n  areasMd?: string;\n  /** grid-template-areas at sm breakpoint (≥640px) */\n  areasSm?: string;\n  /** grid-template-areas at xl breakpoint (≥1280px) */\n  areasXl?: string;\n  /** Number of columns: '1'-'12' | 'auto' */\n  cols?: ColCount;\n  /** Columns at 2xl breakpoint (≥1536px) */\n  cols2xl?: ColCount;\n  /** Columns at lg breakpoint (≥1024px) */\n  colsLg?: ColCount;\n  /** Columns at md breakpoint (≥768px) */\n  colsMd?: ColCount;\n  /** Columns at sm breakpoint (≥640px) */\n  colsSm?: ColCount;\n  /** Columns at xl breakpoint (≥1280px) */\n  colsXl?: ColCount;\n  /** Grid auto flow direction */\n  flow?: 'row' | 'column' | 'row-dense' | 'column-dense';\n  /** Stretch the grid to fill its container's full width */\n  fullwidth?: boolean;\n  /** Gap between items */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Justify items horizontally */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Minimum column width for responsive mode (default: 250px) */\n  minColWidth?: string;\n  /** Use auto-fit responsive columns */\n  responsive?: boolean;\n  /** Number of rows: '1'-'12' | 'auto' */\n  rows?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n};\n\n/**\n * bit-grid — Flexible grid layout with responsive column control.\n *\n * Columns are computed in JS and applied as `--_cols` inline, so they respond\n * to the element's own width via ResizeObserver. CSS custom properties\n * `--grid-cols`, `--grid-rows`, `--grid-gap`, `--grid-row-gap`, `--grid-col-gap`\n * are honoured as fallbacks when no attribute is set.\n *\n * @element bit-grid\n *\n * @attr {string} cols - Column count: '1'–'12' | 'auto'\n * @attr {string} cols-sm - Columns when width ≥ 640px\n * @attr {string} cols-md - Columns when width ≥ 768px\n * @attr {string} cols-lg - Columns when width ≥ 1024px\n * @attr {string} cols-xl - Columns when width ≥ 1280px\n * @attr {string} cols-2xl - Columns when width ≥ 1536px\n * @attr {string} rows - Row count: '1'–'12' | 'auto'\n * @attr {string} gap - Gap token: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} align - align-items: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n * @attr {string} justify - justify-items: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} flow - grid-auto-flow: 'row' | 'column' | 'row-dense' | 'column-dense'\n * @attr {boolean} responsive - Enables auto-fit columns without a fixed count\n * @attr {string} min-col-width - Min column width for responsive mode (default: 250px)\n * @attr {boolean} fullwidth - Stretch the grid to fill its container's full width\n * @attr {string} areas - CSS grid-template-areas value (e.g. \"'header header' 'nav main'\")\n * @attr {string} areas-sm - grid-template-areas when width ≥ 640px\n * @attr {string} areas-md - grid-template-areas when width ≥ 768px\n * @attr {string} areas-lg - grid-template-areas when width ≥ 1024px\n * @attr {string} areas-xl - grid-template-areas when width ≥ 1280px\n * @attr {string} areas-2xl - grid-template-areas when width ≥ 1536px\n *\n * @slot - Grid items\n *\n * @cssprop --grid-cols - Fallback column template (used when no cols attr is set)\n * @cssprop --grid-rows - Fallback row template\n * @cssprop --grid-gap - Fallback gap\n * @cssprop --grid-row-gap - Fallback row gap\n * @cssprop --grid-col-gap - Fallback column gap\n *\n * @example\n * <bit-grid cols=\"1\" cols-sm=\"2\" cols-lg=\"4\" gap=\"md\">\n *   <div>Item</div>\n * </bit-grid>\n *\n * @example\n * <!-- Responsive auto-fit -->\n * <bit-grid responsive min-col-width=\"200px\" gap=\"sm\">\n *   <div>Card</div>\n * </bit-grid>\n *\n * @example\n * <!-- Named grid areas -->\n * <bit-grid cols=\"2\" rows=\"2\" areas=\"'header header' 'nav main'\">\n *   <header style=\"grid-area: header\">Header</header>\n *   <nav style=\"grid-area: nav\">Nav</nav>\n *   <main style=\"grid-area: main\">Main</main>\n * </bit-grid>\n */\nexport const GRID_TAG = defineComponent<BitGridProps>({\n  props: {\n    align: { default: undefined },\n    areas: { default: '' },\n    areas2xl: { default: '' },\n    areasLg: { default: '' },\n    areasMd: { default: '' },\n    areasSm: { default: '' },\n    areasXl: { default: '' },\n    cols: { default: undefined },\n    cols2xl: { default: undefined },\n    colsLg: { default: undefined },\n    colsMd: { default: undefined },\n    colsSm: { default: undefined },\n    colsXl: { default: undefined },\n    flow: { default: undefined },\n    fullwidth: { default: false },\n    gap: { default: undefined },\n    justify: { default: undefined },\n    minColWidth: { default: '' },\n    responsive: { default: false },\n    rows: { default: undefined },\n  },\n  setup({ host, props }) {\n    const computeCols = (activeCols: string | undefined, responsive: boolean, minW: string): string | null => {\n      if (activeCols === 'auto' || (!activeCols && responsive)) {\n        return `repeat(auto-fit, minmax(${minW || '250px'}, 1fr))`;\n      }\n\n      return activeCols ? `repeat(${activeCols}, 1fr)` : null;\n    };\n    const updateCols = () => {\n      const w = host.offsetWidth;\n      const responsive = Boolean(props.responsive.value);\n      const minW = props.minColWidth.value ?? '';\n      let activeCols: string | undefined;\n\n      for (const [key, cssVar] of BREAKPOINTS) {\n        if (w >= resolveBp(host, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          activeCols = props[key].value!;\n          break;\n        }\n      }\n      activeCols ||= props.cols.value || undefined;\n\n      const colsValue = computeCols(activeCols, responsive, minW);\n\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      colsValue ? host.style.setProperty('--_cols', colsValue) : host.style.removeProperty('--_cols');\n    };\n\n    // Re-run cols whenever any responsive prop changes\n    effect(() => {\n      void [\n        props.cols.value,\n        props.colsSm.value,\n        props.colsMd.value,\n        props.colsLg.value,\n        props.colsXl.value,\n        props.cols2xl.value,\n        props.responsive.value,\n        props.minColWidth.value,\n      ];\n      updateCols();\n    });\n\n    const updateAreas = () => {\n      const w = host.offsetWidth;\n      let active = '';\n\n      for (const [key, cssVar] of AREAS_BREAKPOINTS) {\n        if (w >= resolveBp(host, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          active = props[key].value!;\n          break;\n        }\n      }\n      active ||= props.areas.value || '';\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      active ? host.style.setProperty('grid-template-areas', active) : host.style.removeProperty('grid-template-areas');\n    };\n\n    // Also, update on element resize (drives breakpoint switching)\n    onMount(() => {\n      const size = observeResize(host);\n\n      effect(() => {\n        void size.value;\n        updateCols();\n        updateAreas();\n      });\n    });\n    // Rows\n    effect(() => {\n      const rows = props.rows.value;\n\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      rows && rows !== 'auto'\n        ? host.style.setProperty('--_rows', `repeat(${rows}, 1fr)`)\n        : host.style.removeProperty('--_rows');\n    });\n    // Grid template areas (responsive)\n    effect(() => {\n      void [\n        props.areas.value,\n        props.areasSm.value,\n        props.areasMd.value,\n        props.areasLg.value,\n        props.areasXl.value,\n        props.areas2xl.value,\n      ];\n      updateAreas();\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n  tag: 'bit-grid',\n});\n"],"mappings":"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"}

package/dist/icons.cjs

@@ -0,0 +1,176 @@
+let e=require(`@vielzeug/craftit`);var t=e.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <path d="M18 6 6 18M6 6l12 12" />
+  </svg>
+`,n=e.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+`,r=`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`,i=e.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+`,a=e.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <polyline points="15 18 9 12 15 6"></polyline>
+  </svg>
+`,o=e.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <polyline points="9 18 15 12 9 6"></polyline>
+  </svg>
+`,s=e.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    width="14"
+    height="14"
+    aria-hidden="true">
+    <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>
+`,c=e.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    width="14"
+    height="14"
+    aria-hidden="true">
+    <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
+    <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
+    <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
+    <line x1="2" x2="22" y1="2" y2="22" />
+  </svg>
+`,l=e.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <path d="M18 6 6 18M6 6l12 12" />
+  </svg>
+`,u=e.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="36"
+    height="36"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <polyline points="16 16 12 12 8 16" />
+    <line x1="12" y1="12" x2="12" y2="21" />
+    <path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" />
+  </svg>
+`,d=e.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+  </svg>
+`,f=e.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    aria-hidden="true">
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+`,p=e.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    aria-hidden="true">
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+`;exports.checkIcon=n,exports.checkIconHTML=r,exports.chevronDownIcon=i,exports.chevronLeftIcon=a,exports.chevronRightIcon=o,exports.clearIcon=l,exports.closeIcon=t,exports.eyeIcon=s,exports.eyeOffIcon=c,exports.fileIcon=d,exports.minusIcon=f,exports.plusIcon=p,exports.uploadIcon=u;
+//# sourceMappingURL=icons.cjs.map

package/dist/icons.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.cjs","names":[],"sources":["../src/icons.ts"],"sourcesContent":["import { html } from '@vielzeug/craftit';\n\n// ─── Shared SVG icon utilities ────────────────────────────────────────────────\n// All icons use currentColor so they inherit whatever color the host applies.\n\nexport const closeIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </svg>\n`;\n\nexport const checkIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <path d=\"M20 6 9 17l-5-5\" />\n  </svg>\n`;\n\n/** Used inline as an innerHTML string (e.g. for imperatively built option lists). */\nexport const checkIconHTML =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"/></svg>';\n\nexport const chevronDownIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n`;\n\nexport const chevronLeftIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <polyline points=\"15 18 9 12 15 6\"></polyline>\n  </svg>\n`;\n\nexport const chevronRightIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <polyline points=\"9 18 15 12 9 6\"></polyline>\n  </svg>\n`;\n\nexport const eyeIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    width=\"14\"\n    height=\"14\"\n    aria-hidden=\"true\">\n    <path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\" />\n    <circle cx=\"12\" cy=\"12\" r=\"3\" />\n  </svg>\n`;\n\nexport const eyeOffIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    width=\"14\"\n    height=\"14\"\n    aria-hidden=\"true\">\n    <path d=\"M9.88 9.88a3 3 0 1 0 4.24 4.24\" />\n    <path d=\"M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68\" />\n    <path d=\"M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61\" />\n    <line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\" />\n  </svg>\n`;\n\nexport const clearIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </svg>\n`;\n\nexport const uploadIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"36\"\n    height=\"36\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <polyline points=\"16 16 12 12 8 16\" />\n    <line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"21\" />\n    <path d=\"M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3\" />\n  </svg>\n`;\n\nexport const fileIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"18\"\n    height=\"18\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.75\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n    <polyline points=\"14 2 14 8 20 8\" />\n  </svg>\n`;\n\nexport const minusIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n    aria-hidden=\"true\">\n    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n  </svg>\n`;\n\nexport const plusIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n    aria-hidden=\"true\">\n    <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n  </svg>\n`;\n"],"mappings":"mCAKA,IAAa,EAAY,EAAA,IAAI;;;;;;;;;;;;;;EAgBhB,EAAY,EAAA,IAAI;;;;;;;;;;;;;;EAiBhB,EACX,2NAEW,EAAkB,EAAA,IAAI;;;;;;;;;;;;;;EAgBtB,EAAkB,EAAA,IAAI;;;;;;;;;;;;;;EAgBtB,EAAmB,EAAA,IAAI;;;;;;;;;;;;;;EAgBvB,EAAU,EAAA,IAAI;;;;;;;;;;;;;;;EAiBd,EAAa,EAAA,IAAI;;;;;;;;;;;;;;;;;EAmBjB,EAAY,EAAA,IAAI;;;;;;;;;;;;;;EAgBhB,EAAa,EAAA,IAAI;;;;;;;;;;;;;;;;EAkBjB,EAAW,EAAA,IAAI;;;;;;;;;;;;;;;EAiBf,EAAY,EAAA,IAAI;;;;;;;;;;;;;EAehB,EAAW,EAAA,IAAI"}

package/dist/icons.d.ts

@@ -0,0 +1,15 @@
+export declare const closeIcon: import("@vielzeug/craftit").HTMLResult;
+export declare const checkIcon: import("@vielzeug/craftit").HTMLResult;
+/** Used inline as an innerHTML string (e.g. for imperatively built option lists). */
+export declare const checkIconHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"/></svg>";
+export declare const chevronDownIcon: import("@vielzeug/craftit").HTMLResult;
+export declare const chevronLeftIcon: import("@vielzeug/craftit").HTMLResult;
+export declare const chevronRightIcon: import("@vielzeug/craftit").HTMLResult;
+export declare const eyeIcon: import("@vielzeug/craftit").HTMLResult;
+export declare const eyeOffIcon: import("@vielzeug/craftit").HTMLResult;
+export declare const clearIcon: import("@vielzeug/craftit").HTMLResult;
+export declare const uploadIcon: import("@vielzeug/craftit").HTMLResult;
+export declare const fileIcon: import("@vielzeug/craftit").HTMLResult;
+export declare const minusIcon: import("@vielzeug/craftit").HTMLResult;
+export declare const plusIcon: import("@vielzeug/craftit").HTMLResult;
+//# sourceMappingURL=icons.d.ts.map

package/dist/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,wCAcrB,CAAC;AAEF,eAAO,MAAM,SAAS,wCAcrB,CAAC;AAEF,qFAAqF;AACrF,eAAO,MAAM,aAAa,iPACkM,CAAC;AAE7N,eAAO,MAAM,eAAe,wCAc3B,CAAC;AAEF,eAAO,MAAM,eAAe,wCAc3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wCAc5B,CAAC;AAEF,eAAO,MAAM,OAAO,wCAenB,CAAC;AAEF,eAAO,MAAM,UAAU,wCAiBtB,CAAC;AAEF,eAAO,MAAM,SAAS,wCAcrB,CAAC;AAEF,eAAO,MAAM,UAAU,wCAgBtB,CAAC;AAEF,eAAO,MAAM,QAAQ,wCAepB,CAAC;AAEF,eAAO,MAAM,SAAS,wCAarB,CAAC;AAEF,eAAO,MAAM,QAAQ,wCAcpB,CAAC"}

package/dist/icons.js

@@ -0,0 +1,181 @@
+import { html as e } from "@vielzeug/craftit";
+//#region src/icons.ts
+var t = e`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <path d="M18 6 6 18M6 6l12 12" />
+  </svg>
+`, n = e`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+`, r = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"/></svg>", i = e`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+`, a = e`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <polyline points="15 18 9 12 15 6"></polyline>
+  </svg>
+`, o = e`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <polyline points="9 18 15 12 9 6"></polyline>
+  </svg>
+`, s = e`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    width="14"
+    height="14"
+    aria-hidden="true">
+    <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>
+`, c = e`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    width="14"
+    height="14"
+    aria-hidden="true">
+    <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
+    <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
+    <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
+    <line x1="2" x2="22" y1="2" y2="22" />
+  </svg>
+`, l = e`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <path d="M18 6 6 18M6 6l12 12" />
+  </svg>
+`, u = e`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="36"
+    height="36"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <polyline points="16 16 12 12 8 16" />
+    <line x1="12" y1="12" x2="12" y2="21" />
+    <path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" />
+  </svg>
+`, d = e`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true">
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+  </svg>
+`, f = e`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    aria-hidden="true">
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+`, p = e`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    aria-hidden="true">
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+`;
+//#endregion
+export { n as checkIcon, r as checkIconHTML, i as chevronDownIcon, a as chevronLeftIcon, o as chevronRightIcon, l as clearIcon, t as closeIcon, s as eyeIcon, c as eyeOffIcon, d as fileIcon, f as minusIcon, p as plusIcon, u as uploadIcon };
+
+//# sourceMappingURL=icons.js.map