@robuust-digital/vue-components 1.3.2 → 2.0.0-rc.1

package/README.md

@@ -1,79 +1,74 @@
 # Robuust Vue 3 Components
 
-A modern and customizable component library built with **Vue 3** and **Tailwind CSS**, designed to deliver a flexible, cohesive UI experience across all projects. Quickly integrate reusable components with ease, and customize them to suit your unique branding needs.
+A modern and customizable component library built with **Vue 3** and **Tailwind 4 CSS**, designed to deliver a flexible, cohesive UI experience across all projects. Quickly integrate reusable components with ease, and customize them to suit your unique branding needs.
 
-## Features
+## 🚀 Features
 
 - ✨ **Vue 3 Components**: Carefully crafted components that work seamlessly with Vue 3
-- 💎 **Tailwind CSS Integration**: Leverage Tailwind CSS for styling, with full theme customization support
+- 💎 **Tailwind 4 CSS Integration**: Leverage Tailwind CSS for styling, with full theme customization support
 - 🎨 **Theming & Customization**: Tailor components to your project’s branding directly from the `tailwind.config.js`
 - 🖖🏽 **Accessibility First**: Components are designed with accessibility in mind, ensuring compliance with best practices
-- 📦 **Nuxt 3 module available**: Easily integrate with Nuxt 3 projects for seamless server-side rendering and enhanced performance
 
-## Docs
+## 📚 Table of Contents
 
-[**See full docs here**](https://robuust.github.io/vue-components/)
+- [Robuust Vue 3 Components](#robuust-vue-3-components)
+  - [🚀 Features](#-features)
+  - [📚 Table of Contents](#-table-of-contents)
+  - [Documentation](#documentation)
+  - [Three-shaking](#three-shaking)
+  - [Getting Started](#getting-started)
 
-## Installation
+## Documentation
 
-1. **Install the component library via yarn or npm:**
+📖 [**View Documentation**](https://robuust.github.io/vue-components/)
 
-```bash
-yarn add @robuust-digital/vue-components
-```
+## Three-shaking
 
-```bash
-npm i @robuust-digital/vue-components
-```
+This library is built with Vue 3 and Tailwind 4 CSS, and is designed to be tree-shakable. This means that you can import only the components you need, and the rest will be excluded from your final bundle.
 
-2. **Add the component library plugin to your `tailwind.config.js`:**
-
-```javascript
-// tailwind.config.js
-import components from '@robuust-digital/vue-components/tailwind';
-
-export default {
-  theme: {
-    extend: {
-      // Customize component styles here
-      components: (theme) => ({
-        button: {
-          '--rvc-button-height': theme('height.9'),
-          // ...
-        },
-      }),
-    },
-  },
-  plugins: [components],
-};
-```
+- [`@robuust-digital/vue-components/core`](./src/core) - The core component library
+- [`@robuust-digital/vue-components/combobox`](./src/combobox) - `Combobox` component
+- [`@robuust-digital/vue-components/dialogs`](./src/dialogs) - Headless UI components: `Drawer` and `Modal`
+- [`@robuust-digital/vue-components/dropdown`](./src/dropdown) - Headless UI component: `Dropdown`
+- [`@robuust-digital/vue-components/lightswitch`](./src/lightswitch) - Headless UI component: `Lightswitch`
+- [`@robuust-digital/vue-components/toast`](./src/toast) - Headless UI component: `Toast`
+- [`@robuust-digital/vue-components/rich-text-editor`](./src/rich-text-editor) - `RichTextEditor` component
+- [`@robuust-digital/vue-components/tooltip`](./src/tooltip) - `Tooltip` component with `@floating-ui/vue`
 
-## Import the CSS
+## Getting Started
 
-Import our base CSS file in your main entry file:
+**Clone the repository** and install dependencies:
 
-```javascript
-import '@robuust-digital/vue-components/css';
+```bash
+git clone https://github.com/robuust/vue-components.git
+cd vue-components
+yarn install
 ```
 
-*This CSS file includes essential base styles and transitions required by the components. Make sure to import it before using any components.*
+To start developing the component library, follow these steps:
 
-## For Nuxt 3 Projects
+```bash
+# Install dependencies
+yarn install
 
-**Add the module to your `nuxt.config.ts` or `nuxt.config.js`:**
+# Start the development playground
+yarn dev
 
-```javascript
-export default defineNuxtConfig({
-  modules: ['@robuust-digital/vue-components/nuxt'],
-});
-```
+# Build the component library
+yarn build
 
-This will automatically register all components globally in your Nuxt application, making them available for immediate use.
+# Run the documentation site locally
+yarn docs:dev
 
+# Build the documentation site
+yarn docs:build
 
-## License
+# Preview the documentation site
+yarn docs:preview
 
-MIT © Robuust Digital
+# Run unit tests
+yarn test:unit
 
-
-*With `@robuust-digital/vue-components`, bring consistency, flexibility, and a polished look to all your Vue 3 applications.*
+# Lint all files
+yarn lint
+```

package/dist/_shared/ButtonBase-CQjlJ85F.js

@@ -0,0 +1,87 @@
+import { watchEffect as u, createBlock as l, openBlock as t, resolveDynamicComponent as c, mergeProps as y, withCtx as d, createElementBlock as b, renderSlot as i, createCommentVNode as a, createTextVNode as r, toDisplayString as s, unref as f } from "vue";
+import { S as g } from "./icon-spinner-CmxIOqaK.js";
+const m = {
+  key: 0,
+  class: "sr-only"
+}, O = {
+  __name: "ButtonBase",
+  props: {
+    as: {
+      type: [String, Object, Function],
+      default: "button"
+    },
+    bindAs: {
+      type: String,
+      default: void 0
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    icon: {
+      type: [Object, Function],
+      default: null
+    },
+    iconOnly: {
+      type: Boolean,
+      default: !1
+    },
+    iconLeft: {
+      type: Boolean
+    },
+    size: {
+      type: String,
+      default: "base",
+      validator: (n) => ["sm", "base"].includes(n)
+    },
+    spinning: {
+      type: Boolean
+    },
+    color: {
+      type: String,
+      default: "primary",
+      validator: (n) => typeof n != "string" ? !1 : /^(primary|secondary|tertiary|light|dark|green|red|yellow|blue|green-soft|red-soft|yellow-soft|blue-soft)?$/.test(n) || n.startsWith("custom-") || n === "clear"
+    }
+  },
+  setup(n) {
+    const o = n;
+    return u(() => {
+      o.iconOnly && !o.icon && console.warn("[ButtonBase] Using iconOnly prop without providing an icon may result in an empty button.");
+    }), (e, h) => (t(), l(c(n.as), y(n.bindAs ? { as: n.bindAs } : {}, {
+      class: ["rvc-button", `rvc-button-${n.color}`, `rvc-button-${n.size}`, { "rvc-button-reverse": n.iconLeft }, { "rvc-button-icon-only": n.iconOnly }],
+      "aria-label": n.iconOnly ? n.label : null,
+      "aria-busy": n.spinning
+    }), {
+      default: d(() => [
+        n.iconOnly && n.label ? (t(), b("span", m, [
+          i(e.$slots, "default", { label: n.label }, () => [
+            r(s(n.label), 1)
+          ])
+        ])) : n.label ? i(e.$slots, "default", {
+          key: 1,
+          label: n.label
+        }, () => [
+          r(s(n.label), 1)
+        ]) : a("", !0),
+        i(e.$slots, "icon", { icon: n.icon }, () => [
+          n.icon && !n.spinning ? (t(), l(c(n.icon), {
+            key: 0,
+            class: "rvc-button-icon",
+            "aria-hidden": !n.iconOnly
+          }, null, 8, ["aria-hidden"])) : a("", !0)
+        ]),
+        i(e.$slots, "spinner", { spinning: n.spinning }, () => [
+          n.spinning ? (t(), l(f(g), {
+            key: 0,
+            class: "rvc-button-icon rvc-button-icon-loading",
+            "aria-hidden": "true"
+          })) : a("", !0)
+        ])
+      ]),
+      _: 3
+    }, 16, ["class", "aria-label", "aria-busy"]));
+  }
+};
+export {
+  O as _
+};

package/dist/_shared/ChevronDownIcon-z-5U4fIb.js

@@ -0,0 +1,55 @@
+import { createBlock as l, openBlock as a, resolveDynamicComponent as r, normalizeClass as n, withCtx as o, renderSlot as s, createTextVNode as i, toDisplayString as c, createElementBlock as d, createElementVNode as u } from "vue";
+const m = {
+  __name: "Badge",
+  props: {
+    as: {
+      type: String,
+      default: "span"
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: String,
+      default: "base",
+      validator: (e) => ["sm", "base"].includes(e)
+    },
+    color: {
+      type: String,
+      default: "default",
+      validator: (e) => typeof e != "string" ? !1 : /^(default|gray|red|yellow|green|blue|violet|purple|pink)?$/.test(e) || e.startsWith("custom-")
+    }
+  },
+  setup(e) {
+    return (t, f) => (a(), l(r(e.as), {
+      class: n(["rvc-badge", `rvc-badge-${e.color}`, `rvc-badge-${e.size}`])
+    }, {
+      default: o(() => [
+        s(t.$slots, "default", { label: e.label }, () => [
+          i(c(e.label), 1)
+        ])
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+};
+function p(e, t) {
+  return a(), d("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    u("path", {
+      "fill-rule": "evenodd",
+      d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+export {
+  m as _,
+  p as r
+};

package/dist/_shared/FormInput-abFMz_J4.js

@@ -0,0 +1,82 @@
+import { computed as y, getCurrentInstance as $, useSlots as I, createElementBlock as i, openBlock as o, normalizeClass as k, createCommentVNode as l, renderSlot as r, unref as a, createBlock as p, resolveDynamicComponent as m, normalizeProps as b, guardReactiveProps as V, withDirectives as B, mergeProps as f, vModelDynamic as C } from "vue";
+const x = () => ({ hasModelBinding: y(() => {
+  var s;
+  const n = $();
+  return ((s = n == null ? void 0 : n.vnode) == null ? void 0 : s.props) && Object.prototype.hasOwnProperty.call(n.vnode.props, "onUpdate:modelValue");
+}) }), O = {
+  key: 0,
+  class: "rvc-input-prefix"
+}, S = ["type"], j = ["type"], F = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "FormInput",
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    rootClass: {
+      type: String,
+      default: ""
+    },
+    prefixIcon: {
+      type: [Object, Function],
+      default: null
+    },
+    icon: {
+      type: [Object, Function],
+      default: null
+    },
+    size: {
+      type: String,
+      default: "base",
+      validator: (e) => ["sm", "base"].includes(e)
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: n }) {
+    const s = e, v = n, { hasModelBinding: g } = x(), u = I(), c = y({
+      get: () => s.modelValue,
+      set: (t) => v("update:modelValue", t)
+    });
+    return (t, d) => (o(), i("div", {
+      class: k([
+        "rvc-input",
+        `rvc-input-${e.size}`,
+        e.rootClass
+      ])
+    }, [
+      a(u).prefix || a(u).prefixIcon || e.prefixIcon ? (o(), i("span", O, [
+        r(t.$slots, "prefix", {}, () => [
+          r(t.$slots, "prefixIcon", { icon: e.prefixIcon }, () => [
+            e.prefixIcon ? (o(), p(m(e.prefixIcon), {
+              key: 0,
+              "aria-hidden": "true"
+            })) : l("", !0)
+          ])
+        ])
+      ])) : l("", !0),
+      r(t.$slots, "input", b(V(t.$attrs)), () => [
+        a(g) ? B((o(), i("input", f({ key: 0 }, t.$attrs, {
+          "onUpdate:modelValue": d[0] || (d[0] = (h) => c.value = h),
+          type: t.$attrs.type || "text"
+        }), null, 16, S)), [
+          [C, c.value]
+        ]) : (o(), i("input", f({
+          key: 1,
+          type: t.$attrs.type || "text"
+        }, t.$attrs), null, 16, j))
+      ]),
+      r(t.$slots, "icon", { icon: e.icon }, () => [
+        e.icon ? (o(), p(m(e.icon), {
+          key: 0,
+          "aria-hidden": "true"
+        })) : l("", !0)
+      ])
+    ], 2));
+  }
+});
+export {
+  F as _,
+  x as u
+};

package/dist/_shared/Modal-COVlUEud.js

@@ -0,0 +1,193 @@
+import { ref as g, computed as f, createBlock as w, openBlock as C, unref as a, withCtx as r, createVNode as n, withModifiers as x, createElementVNode as o, normalizeClass as B, renderSlot as b, createElementBlock as E, createCommentVNode as D, createTextVNode as L, toDisplayString as h } from "vue";
+import { TransitionRoot as F, Dialog as I, TransitionChild as $, DialogPanel as N, DialogTitle as R } from "@headlessui/vue";
+import { _ as S } from "./ButtonBase-CQjlJ85F.js";
+import { r as T } from "./XMarkIcon-90mcPzBs.js";
+function V(t) {
+  const c = g(null), i = g(!1), y = f(() => t.as === "form"), v = f(() => `${t.id}-title`), d = f(() => `${t.id}-content`), u = f(() => {
+    var m;
+    return (m = c.value) == null ? void 0 : m.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+  });
+  return {
+    contentRef: c,
+    ready: i,
+    isForm: y,
+    titleId: v,
+    descriptionId: d,
+    initialFocusElement: u
+  };
+}
+const q = {
+  role: "presentation",
+  class: "fixed inset-0 z-10 w-screen overflow-y-auto"
+}, z = { class: "flex min-h-full justify-center p-4 items-center sm:p-0" }, j = { class: "rvc-modal-header" }, M = { class: "flex items-center justify-between" }, A = {
+  key: 0,
+  class: "ml-3 flex h-7 items-center"
+}, P = ["id"], G = { class: "rvc-modal-footer" }, Q = {
+  __name: "Modal",
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    },
+    id: {
+      type: String,
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    },
+    showClose: {
+      type: Boolean
+    },
+    spinning: {
+      type: Boolean
+    },
+    submitLabel: {
+      type: String,
+      default: "Confirm"
+    },
+    cancelLabel: {
+      type: String,
+      default: "Cancel"
+    },
+    panelClass: {
+      type: String,
+      default: "sm:max-w-lg"
+    }
+  },
+  emits: ["modal:open", "modal:close", "modal:save", "modal:closed"],
+  setup(t, { emit: c }) {
+    const i = c, y = t, {
+      contentRef: v,
+      ready: d,
+      isForm: u,
+      titleId: m,
+      descriptionId: p,
+      initialFocusElement: k
+    } = V(y);
+    return (s, e) => (C(), w(a(F), { as: "template" }, {
+      default: r(() => [
+        n(a(I), {
+          as: t.as,
+          class: "rvc-modal",
+          static: "",
+          "aria-modal": "true",
+          role: "dialog",
+          "initial-focus": a(k),
+          "aria-labelledby": a(m),
+          onClose: e[6] || (e[6] = (l) => s.$emit("modal:close")),
+          onSubmit: e[7] || (e[7] = x((l) => i("modal:save", l), ["prevent"]))
+        }, {
+          default: r(() => [
+            n(a($), {
+              as: "template",
+              enter: "ease-out duration-300",
+              "enter-from": "opacity-0",
+              "enter-to": "opacity-100",
+              leave: "ease-in duration-200",
+              "leave-from": "opacity-100",
+              "leave-to": "opacity-0",
+              onBeforeEnter: e[0] || (e[0] = (l) => i("modal:open"))
+            }, {
+              default: r(() => e[8] || (e[8] = [
+                o("div", {
+                  "aria-hidden": "true",
+                  class: "fixed inset-0 transition-opacity rvc-modal-backdrop"
+                }, null, -1)
+              ])),
+              _: 1
+            }),
+            o("div", q, [
+              o("div", z, [
+                n(a($), {
+                  as: "template",
+                  enter: "ease-out duration-300",
+                  "enter-from": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+                  "enter-to": "opacity-100 translate-y-0 sm:scale-100",
+                  leave: "ease-in duration-200",
+                  "leave-from": "opacity-100 translate-y-0 sm:scale-100",
+                  "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+                  onBeforeEnter: e[4] || (e[4] = (l) => d.value = !0),
+                  onAfterLeave: e[5] || (e[5] = (l) => (d.value = !1, i("modal:closed")))
+                }, {
+                  default: r(() => [
+                    n(a(N), {
+                      class: B(["rvc-modal-panel", t.panelClass]),
+                      "aria-busy": t.spinning,
+                      "aria-describedby": a(p)
+                    }, {
+                      default: r(() => [
+                        o("header", j, [
+                          b(s.$slots, "header", { title: t.title }, () => [
+                            o("div", M, [
+                              n(a(R), {
+                                id: a(m),
+                                class: "rvc-modal-title"
+                              }, {
+                                default: r(() => [
+                                  L(h(t.title), 1)
+                                ]),
+                                _: 1
+                              }, 8, ["id"]),
+                              t.showClose ? (C(), E("div", A, [
+                                o("button", {
+                                  type: "button",
+                                  class: "relative rvc-modal-close",
+                                  "aria-label": "Close panel",
+                                  onClick: e[1] || (e[1] = (l) => i("modal:close"))
+                                }, [
+                                  n(a(T), {
+                                    class: "size-full",
+                                    "aria-hidden": "true"
+                                  })
+                                ])
+                              ])) : D("", !0)
+                            ])
+                          ])
+                        ]),
+                        o("div", {
+                          id: a(p),
+                          ref_key: "contentRef",
+                          ref: v,
+                          class: "rvc-modal-content"
+                        }, [
+                          b(s.$slots, "default", { ready: a(d) })
+                        ], 8, P),
+                        o("footer", G, [
+                          b(s.$slots, "footer", { loading: t.spinning }, () => [
+                            n(S, {
+                              type: a(u) ? "submit" : "button",
+                              label: t.submitLabel,
+                              spinning: t.spinning,
+                              disabled: t.spinning,
+                              onClick: e[2] || (e[2] = (l) => !a(u) && s.$emit("modal:save"))
+                            }, null, 8, ["type", "label", "spinning", "disabled"]),
+                            n(S, {
+                              type: "button",
+                              color: "light",
+                              label: t.cancelLabel,
+                              onClick: e[3] || (e[3] = (l) => s.$emit("modal:close"))
+                            }, null, 8, ["label"])
+                          ])
+                        ])
+                      ]),
+                      _: 3
+                    }, 8, ["class", "aria-busy", "aria-describedby"])
+                  ]),
+                  _: 3
+                })
+              ])
+            ])
+          ]),
+          _: 3
+        }, 8, ["as", "initial-focus", "aria-labelledby"])
+      ]),
+      _: 3
+    }));
+  }
+};
+export {
+  Q as _,
+  V as u
+};

package/dist/_shared/Tooltip-BKXJoJ1x.js

@@ -0,0 +1,126 @@
+import { shallowRef as a, createElementBlock as d, openBlock as u, renderSlot as f, createElementVNode as g, normalizeStyle as x, normalizeClass as S, unref as h, createCommentVNode as $, mergeProps as R } from "vue";
+import { useFloating as k, autoUpdate as z, autoPlacement as P, offset as W, shift as C, arrow as M, size as A } from "@floating-ui/vue";
+const B = ["innerHTML"], N = {
+  __name: "Tooltip",
+  props: {
+    content: {
+      type: String,
+      required: !0
+    },
+    blur: {
+      type: Boolean,
+      default: !0
+    },
+    maxWidth: {
+      type: Number,
+      default: null
+    },
+    tooltipClass: {
+      type: String,
+      default: ""
+    },
+    placement: {
+      type: String,
+      default: void 0,
+      validator: (t) => t === void 0 || [
+        "top",
+        "right",
+        "bottom",
+        "left",
+        "top-start",
+        "top-end",
+        "right-start",
+        "right-end",
+        "bottom-start",
+        "bottom-end",
+        "left-start",
+        "left-end"
+      ].includes(t)
+    },
+    size: {
+      type: String,
+      default: "base",
+      validator: (t) => ["sm", "base"].includes(t)
+    }
+  },
+  setup(t) {
+    const o = t, i = a(), s = a(), l = a(), {
+      floatingStyles: y,
+      middlewareData: b,
+      placement: c
+    } = k(i, s, {
+      middleware: [
+        o.placement ? null : P(),
+        W(o.size === "sm" ? 7 : 10),
+        C({ crossAxis: !0, padding: 5 }),
+        M({ element: l }),
+        A({
+          apply({ availableWidth: e, availableHeight: r, elements: n }) {
+            Object.assign(n.floating.style, {
+              maxWidth: o.maxWidth ? `${Math.min(e, o.maxWidth) / 16}rem` : "",
+              maxHeight: `${r / 16}rem `
+            });
+          }
+        })
+      ],
+      whileElementsMounted: z,
+      placement: o.placement
+    }), v = (e) => ({
+      top: 0,
+      bottom: 180,
+      left: -90,
+      right: 90
+    })[e.split("-")[0]] || 0, w = (e) => {
+      var p, m;
+      const r = c.value.split("-")[0], n = {
+        left: "right",
+        right: "left",
+        bottom: "top",
+        top: "bottom"
+      }[r];
+      return {
+        style: {
+          left: (p = e.arrow) != null && p.x ? `${e.arrow.x}px` : "",
+          top: (m = e.arrow) != null && m.y ? `${e.arrow.y}px` : "",
+          bottom: "",
+          right: "",
+          [n]: l.value ? `${l.value.offsetWidth * -1}px` : "",
+          transform: `rotate(${v(c.value)}deg)`
+        }
+      };
+    };
+    return (e, r) => (u(), d("div", {
+      ref_key: "wrapperRef",
+      ref: i,
+      class: "group/tooltip"
+    }, [
+      f(e.$slots, "default"),
+      g("div", {
+        ref_key: "tooltipRef",
+        ref: s,
+        class: S([
+          "rvc-tooltip group-hover/tooltip:opacity-100 group-hover/tooltip:visible invisible opacity-0",
+          t.tooltipClass,
+          `rvc-tooltip-${t.size}`,
+          { "rvc-tooltip-blur": t.blur }
+        ]),
+        style: x(h(y))
+      }, [
+        f(e.$slots, "content", { content: t.content }, () => [
+          t.content ? (u(), d("div", {
+            key: 0,
+            innerHTML: t.content
+          }, null, 8, B)) : $("", !0)
+        ]),
+        g("div", R({
+          ref_key: "arrowRef",
+          ref: l,
+          class: "absolute rvc-tooltip-arrow"
+        }, w(h(b))), null, 16)
+      ], 6)
+    ], 512));
+  }
+};
+export {
+  N as _
+};

package/dist/_shared/XMarkIcon-90mcPzBs.js

@@ -0,0 +1,19 @@
+import { createElementBlock as e, openBlock as r, createElementVNode as l } from "vue";
+function n(o, t) {
+  return r(), e("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    l("path", {
+      "fill-rule": "evenodd",
+      d: "M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+export {
+  n as r
+};