sit-onyx 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/components/GridPlayground/GridPlayground.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta } from "@storybook/vue3";
+import Grid from "./GridPlayground.vue";
+/**
+ * The GridPlayground allows to test and play around with the Onyx grid system
+ */
+declare const meta: Meta<typeof Grid>;
+export default meta;
+/**
+ * Please open in Fullscreen mode for playground to behave correctly!
+ */
+export declare const Default: {
+    args: {};
+};

package/dist/components/OnyxIcon/OnyxIcon.stories.d.ts

@@ -0,0 +1,37 @@
+import type { Meta } from "@storybook/vue3";
+import OnyxIcon from "./OnyxIcon.vue";
+/**
+ * Component to display icons. Supports all inline SVG icon libraries.
+ * We recommend using the official icons from `@sit-onyx/icons`.
+ *
+ * When importing SVG icon files, make sure to add `?raw` after the file name as shown in the examples to import the SVG content
+ * instead of the file system path to the file.
+ */
+declare const meta: Meta<typeof OnyxIcon>;
+export default meta;
+/**
+ * This example shows a default icon.
+ */
+export declare const Default: {
+    args: {
+        icon: string;
+    };
+};
+/**
+ * This example shows an icon with a different size.
+ */
+export declare const WithSize: {
+    args: {
+        size: "2xl";
+        icon: string;
+    };
+};
+/**
+ * This example shows an icon with a different color.
+ */
+export declare const WithColor: {
+    args: {
+        color: "success";
+        icon: string;
+    };
+};

package/dist/components/OnyxIcon/OnyxIcon.vue.d.ts

@@ -0,0 +1,29 @@
+import type { OnyxIconProps } from "./types";
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxIconProps>, {
+    size: string;
+    color: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxIconProps>, {
+    size: string;
+    color: string;
+}>>>, {
+    color: "primary" | "secondary" | "neutral" | "danger" | "warning" | "success" | "info" | "currentColor";
+    size: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/OnyxIcon/types.d.ts

@@ -0,0 +1,14 @@
+import type { OnyxColor } from '../../index';
+export type OnyxIconProps = {
+    /**
+     * SVG source of the icon. **Important**: Only provide trustworthy content, the SVG content will
+     * not be sanitized.
+     */
+    icon: string;
+    /** Icon size. */
+    size?: IconSize;
+    /** Icon color. */
+    color?: OnyxColor | "currentColor";
+};
+export declare const ICON_SIZES: readonly ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"];
+export type IconSize = (typeof ICON_SIZES)[number];

package/dist/components/OnyxRadioButton/OnyxRadioButton.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta } from "@storybook/vue3";
+import OnyxRadioButton from "./OnyxRadioButton.vue";
+/**
+ * The input component can be used to...
+ */
+declare const meta: Meta<typeof OnyxRadioButton>;
+export default meta;
+/**
+ * This example shows a standalone radio button.
+ */
+export declare const Default: {
+    args: {
+        id: string;
+        label: string;
+        name: string;
+        value: string;
+    };
+};

package/dist/components/OnyxRadioButton/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * TODO: move to dedicated file
+ */
+export type SelectionOption<T> = {
+    id: string;
+    label: string;
+    /**
+     * An optional value.
+     * It's not actually used by the selection controls, but can be used to associate data with this option.
+     */
+    value?: T;
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+    isLoading?: boolean;
+};
+export type SelectionProps<T> = SelectionOption<T> & {
+    selected?: boolean;
+};

package/dist/components/OnyxRadioButtonGroup/OnyxRadioButtonGroup.stories.d.ts

@@ -0,0 +1,27 @@
+import type { Meta } from "@storybook/vue3";
+import OnyxRadioButtonGroup from "./OnyxRadioButtonGroup.vue";
+import type { SelectionOption } from "../OnyxRadioButton/types";
+/**
+ * The input component can be used to...
+ */
+declare const meta: Meta<typeof OnyxRadioButtonGroup>;
+export default meta;
+/**
+ * This example shows a radio button group.
+ */
+export declare const Default: {
+    args: {
+        name: string;
+        options: SelectionOption<string>[];
+    };
+};
+/**
+ * This example shows a preselected radio button.
+ */
+export declare const Preselected: {
+    args: {
+        name: string;
+        options: SelectionOption<string>[];
+        modelValue: SelectionOption<string>;
+    };
+};

package/dist/components/TestInput/TestInput.vue.d.ts

@@ -52,13 +52,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     label: string;
     type: string;
 }>>> & {
-    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
     onValidityChange?: ((state: ValidityState) => any) | undefined;
 }, {
-    type: "number" | "search" | "email" | "tel" | "url" | "password" | "text";
-    modelValue: string | number;
+    type: "number" | "text" | "email" | "password" | "search" | "tel" | "url";
     label: string;
+    modelValue: string | number;
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),M=t.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(n){const a=n;return(e,r)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(a.is),{class:t.normalizeClass(["onyx-headline",`onyx-headline--${a.is}`,a.monospace?"onyx-headline--monospace":""])},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},8,["class"]))}}),V=["h1","h2","h3","h4","h5","h6"],P={tooShort:"Please lengthen this text to {minLength} characters or more (you are currently using 1 character) | Please lengthen this text to {minLength} characters or more (you are currently using {n} characters)",tooLong:"Please shorten this text to {maxLength} characters or less (you are currently using 1 character) | Please shorten this text to {maxLength} characters or less (you are currently using {n} characters)",rangeUnderflow:"Value must be greater than or equal to {min}",rangeOverflow:"Value must be less than or equal to {max}",patternMismatch:"Please match the format requested.",valueMissing:"Please fill in this field.",stepMismatch:"Please enter a value that is a multiple of {step}.",badInput:'"{value}" does not match the expected type.',typeMismatch:{generic:'"{value}" does not match the expected type.',email:'"{value}" must be a valid email address.',number:'"{value}" must be a number.',tel:'"{value}" must be a valid phone number.',url:'"{value}" must a valid URL.'}},p={validations:P},_=Symbol(),x=n=>{const a=t.computed(()=>t.unref(n==null?void 0:n.locale)??"en-US"),e=t.computed(()=>n!=null&&n.messages&&a.value in n.messages?n.messages[a.value]:p),r=t.computed(()=>(s,l={})=>{let d=y(s,e.value)??y(s,p)??"";const i=typeof l.n=="number"?l.n:void 0;return d=L(d,i),O(d,l)});return{locale:a,t:r}},I=n=>{t.provide(_,x(n))},T=()=>t.inject(_,()=>x(),!0),y=(n,a)=>{const e=n.split(".").reduce((r,s)=>!r||typeof r=="string"?r:r[s],a);return e&&typeof e=="string"?e:void 0},L=(n,a)=>{const e=n.split(" | ").map(s=>s.trim());if(e.length<=1)return n;let r=1;return a===0&&(r=0),a&&(a<=0||a>1)&&(r=2),e.length===2?r===1?e[0]:e[1]:e[r]},O=(n,a)=>a?Object.entries(a).reduce((r,[s,l])=>l===void 0?r:r.replace(new RegExp(`{${s}}`,"gi"),l.toString()),n).replace(/\s?{.*}\s?/gi,""):n,b=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([n,a])=>a.enumerable).map(([n])=>n),C=n=>b().reduce((a,e)=>(a[e]=n[e],a),{}),D=n=>{if(n.valueMissing)return"valueMissing";const a=b().filter(e=>e!=="valid").sort();for(const e of a)if(e in n&&n[e])return e},N=(n,a)=>{const e=Object.entries(n).filter(([s,l])=>l!==void 0),r=Object.entries(a).filter(([s,l])=>l!==void 0);return e.length!==r.length?!1:e.every(([s,l])=>l===a[s])},w={key:0,class:"onyx-input__error","aria-live":"polite"},B={class:"onyx-input__info"},k=Object.keys(p.validations.typeMismatch),q=t.defineComponent({__name:"TestInput",props:{modelValue:{default:""},label:{default:""},errorMessage:{},required:{type:Boolean},pattern:{},type:{default:"text"},max:{},maxLength:{},min:{},step:{},minLength:{}},emits:["update:modelValue","change","validityChange"],setup(n,{emit:a}){var v;const e=n,r=a,{t:s}=T(),{errorMessage:l}=t.toRefs(e),d=t.ref(!1),i=t.ref(null),u=t.ref((v=i.value)==null?void 0:v.validity),m=t.computed({get:()=>e.modelValue,set:o=>r("update:modelValue",o)}),E=t.computed(()=>{if(!u.value||u.value.valid)return"";const o=D(u.value);if(e.errorMessage||o==="customError")return e.errorMessage;if(!o)return"";if(o==="typeMismatch"){const c=k.includes(e.type)?e.type:"generic";return s.value(`validations.typeMismatch.${c}`,{value:m.value})}return s.value(`validations.${o}`,{value:m.value,n:m.value.toString().length,minLength:e.minLength,maxLength:e.maxLength,min:e.min,max:e.max,step:e.step})}),S=o=>{const c=o.target;r("change",c.value)};return t.watch([i,l],()=>{i.value&&i.value.setCustomValidity(e.errorMessage||"")}),t.watch([i,m,l],()=>{if(!i.value)return;const o=C(i.value.validity);(!u.value||!N(o,u.value))&&(u.value=o,r("validityChange",u.value))},{immediate:!0}),(o,c)=>{var g,h;return t.openBlock(),t.createElementBlock("label",{class:t.normalizeClass(["onyx-input",{"onyx-input--touched":d.value}])},[t.createElementVNode("span",{class:t.normalizeClass(["onyx-input__label",{"onyx-input__label--required":e.required}])},t.toDisplayString(e.label),3),t.withDirectives(t.createElementVNode("input",t.mergeProps(e,{ref_key:"inputElement",ref:i,"onUpdate:modelValue":c[0]||(c[0]=f=>m.value=f),onChange:S,onBlur:c[1]||(c[1]=f=>d.value=!0)}),null,16),[[t.vModelDynamic,m.value]]),d.value&&!((g=u.value)!=null&&g.valid)?(t.openBlock(),t.createElementBlock("p",w,t.toDisplayString(E.value),1)):t.createCommentVNode("",!0),t.createElementVNode("p",B,'Model value: "'+t.toDisplayString(m.value)+'", is valid: '+t.toDisplayString((h=u.value)==null?void 0:h.valid),1)],2)}}}),U=(n,a)=>{const e=n.__vccOpts||n;for(const[r,s]of a)e[r]=s;return e},j=U(q,[["__scopeId","data-v-6632dbdc"]]);exports.HEADLINE_TYPES=V;exports.OnyxHeadline=M;exports.TestInput=j;exports.provideI18n=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),O=t.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(n){const r=n;return(e,a)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(r.is),{class:t.normalizeClass(["onyx-headline",`onyx-headline--${r.is}`,r.monospace?"onyx-headline--monospace":""])},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},8,["class"]))}}),M=["h1","h2","h3","h4","h5","h6"],C=["innerHTML"],I=t.defineComponent({__name:"OnyxIcon",props:{icon:{},size:{default:"sm"},color:{default:"currentColor"}},setup(n){const r=n;return(e,a)=>(t.openBlock(),t.createElementBlock("figure",{class:t.normalizeClass(["onyx-icon",[r.size!=="sm"?`onyx-icon--${r.size}`:"",r.color!=="currentColor"?`onyx-icon--${r.color}`:""]]),"aria-hidden":"true",innerHTML:r.icon},null,10,C))}}),L=["2xs","xs","sm","md","lg","xl","2xl"],V={tooShort:"Please lengthen this text to {minLength} characters or more (you are currently using 1 character) | Please lengthen this text to {minLength} characters or more (you are currently using {n} characters)",tooLong:"Please shorten this text to {maxLength} characters or less (you are currently using 1 character) | Please shorten this text to {maxLength} characters or less (you are currently using {n} characters)",rangeUnderflow:"Value must be greater than or equal to {min}",rangeOverflow:"Value must be less than or equal to {max}",patternMismatch:"Please match the format requested.",valueMissing:"Please fill in this field.",stepMismatch:"Please enter a value that is a multiple of {step}.",badInput:'"{value}" does not match the expected type.',typeMismatch:{generic:'"{value}" does not match the expected type.',email:'"{value}" must be a valid email address.',number:'"{value}" must be a number.',tel:'"{value}" must be a valid phone number.',url:'"{value}" must a valid URL.'}},p={validations:V},_=Symbol(),x=n=>{const r=t.computed(()=>t.unref(n==null?void 0:n.locale)??"en-US"),e=t.computed(()=>n!=null&&n.messages&&r.value in n.messages?n.messages[r.value]:p),a=t.computed(()=>(s,l={})=>{let m=f(s,e.value)??f(s,p)??"";const i=typeof l.n=="number"?l.n:void 0;return m=N(m,i),B(m,l)});return{locale:r,t:a}},P=n=>{t.provide(_,x(n))},T=()=>t.inject(_,()=>x(),!0),f=(n,r)=>{const e=n.split(".").reduce((a,s)=>!a||typeof a=="string"?a:a[s],r);return e&&typeof e=="string"?e:void 0},N=(n,r)=>{const e=n.split(" | ").map(s=>s.trim());if(e.length<=1)return n;let a=1;return r===0&&(a=0),r&&(r<=0||r>1)&&(a=2),e.length===2?a===1?e[0]:e[1]:e[a]},B=(n,r)=>r?Object.entries(r).reduce((a,[s,l])=>l===void 0?a:a.replace(new RegExp(`{${s}}`,"gi"),l.toString()),n).replace(/\s?{.*}\s?/gi,""):n,S=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([n,r])=>r.enumerable).map(([n])=>n),D=n=>S().reduce((r,e)=>(r[e]=n[e],r),{}),$=n=>{if(n.valueMissing)return"valueMissing";const r=S().filter(e=>e!=="valid").sort();for(const e of r)if(e in n&&n[e])return e},w=(n,r)=>{const e=Object.entries(n).filter(([s,l])=>l!==void 0),a=Object.entries(r).filter(([s,l])=>l!==void 0);return e.length!==a.length?!1:e.every(([s,l])=>l===r[s])},z={key:0,class:"onyx-input__error","aria-live":"polite"},k={class:"onyx-input__info"},q=Object.keys(p.validations.typeMismatch),U=t.defineComponent({__name:"TestInput",props:{modelValue:{default:""},label:{default:""},errorMessage:{},required:{type:Boolean},pattern:{},type:{default:"text"},max:{},maxLength:{},min:{},step:{},minLength:{}},emits:["update:modelValue","change","validityChange"],setup(n,{emit:r}){var v;const e=n,a=r,{t:s}=T(),{errorMessage:l}=t.toRefs(e),m=t.ref(!1),i=t.ref(null),u=t.ref((v=i.value)==null?void 0:v.validity),d=t.computed({get:()=>e.modelValue,set:o=>a("update:modelValue",o)}),E=t.computed(()=>{if(!u.value||u.value.valid)return"";const o=$(u.value);if(e.errorMessage||o==="customError")return e.errorMessage;if(!o)return"";if(o==="typeMismatch"){const c=q.includes(e.type)?e.type:"generic";return s.value(`validations.typeMismatch.${c}`,{value:d.value})}return s.value(`validations.${o}`,{value:d.value,n:d.value.toString().length,minLength:e.minLength,maxLength:e.maxLength,min:e.min,max:e.max,step:e.step})}),b=o=>{const c=o.target;a("change",c.value)};return t.watch([i,l],()=>{i.value&&i.value.setCustomValidity(e.errorMessage||"")}),t.watch([i,d,l],()=>{if(!i.value)return;const o=D(i.value.validity);(!u.value||!w(o,u.value))&&(u.value=o,a("validityChange",u.value))},{immediate:!0}),(o,c)=>{var g,h;return t.openBlock(),t.createElementBlock("label",{class:t.normalizeClass(["onyx-input",{"onyx-input--touched":m.value}])},[t.createElementVNode("span",{class:t.normalizeClass(["onyx-input__label",{"onyx-input__label--required":e.required}])},t.toDisplayString(e.label),3),t.withDirectives(t.createElementVNode("input",t.mergeProps(e,{ref_key:"inputElement",ref:i,"onUpdate:modelValue":c[0]||(c[0]=y=>d.value=y),onChange:b,onBlur:c[1]||(c[1]=y=>m.value=!0)}),null,16),[[t.vModelDynamic,d.value]]),m.value&&!((g=u.value)!=null&&g.valid)?(t.openBlock(),t.createElementBlock("p",z,t.toDisplayString(E.value),1)):t.createCommentVNode("",!0),t.createElementVNode("p",k,'Model value: "'+t.toDisplayString(d.value)+'", is valid: '+t.toDisplayString((h=u.value)==null?void 0:h.valid),1)],2)}}}),j=["primary","secondary","neutral","danger","warning","success","info"];exports.HEADLINE_TYPES=M;exports.ICON_SIZES=L;exports.ONYX_COLORS=j;exports.OnyxHeadline=O;exports.OnyxIcon=I;exports.TestInput=U;exports.provideI18n=P;

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 export { default as OnyxHeadline } from './components/OnyxHeadline/OnyxHeadline.vue';
 export * from './components/OnyxHeadline/types';
+export { default as OnyxIcon } from './components/OnyxIcon/OnyxIcon.vue';
+export * from './components/OnyxIcon/types';
 export { default as TestInput } from './components/TestInput/TestInput.vue';
+export * from './types/colors';
 export * from './types/i18n';
 export * from './types/utils';
 export { provideI18n, type OnyxTranslations, type ProvideI18nOptions } from './i18n';

package/dist/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as S, openBlock as g, createBlock as w, resolveDynamicComponent as N, normalizeClass as f, withCtx as U, renderSlot as q, provide as D, inject as $, computed as d, unref as j, toRefs as B, ref as v, watch as E, createElementBlock as V, createElementVNode as h, toDisplayString as p, withDirectives as k, mergeProps as z, vModelDynamic as R, createCommentVNode as A } from "vue";
-const ae = /* @__PURE__ */ S({
+import { defineComponent as _, openBlock as v, createBlock as $, resolveDynamicComponent as N, normalizeClass as h, withCtx as w, renderSlot as U, createElementBlock as y, provide as q, inject as z, computed as d, unref as D, toRefs as j, ref as g, watch as S, createElementVNode as f, toDisplayString as p, withDirectives as B, mergeProps as H, vModelDynamic as R, createCommentVNode as k } from "vue";
+const ne = /* @__PURE__ */ _({
   __name: "OnyxHeadline",
   props: {
     is: {},
@@ -7,20 +7,38 @@ const ae = /* @__PURE__ */ S({
   },
   setup(t) {
     const n = t;
-    return (e, a) => (g(), w(N(n.is), {
-      class: f([
+    return (e, r) => (v(), $(N(n.is), {
+      class: h([
         "onyx-headline",
         `onyx-headline--${n.is}`,
         n.monospace ? "onyx-headline--monospace" : ""
       ])
     }, {
-      default: U(() => [
-        q(e.$slots, "default")
+      default: w(() => [
+        U(e.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), re = ["h1", "h2", "h3", "h4", "h5", "h6"], H = {
+}), re = ["h1", "h2", "h3", "h4", "h5", "h6"], Y = ["innerHTML"], ae = /* @__PURE__ */ _({
+  __name: "OnyxIcon",
+  props: {
+    icon: {},
+    size: { default: "sm" },
+    color: { default: "currentColor" }
+  },
+  setup(t) {
+    const n = t;
+    return (e, r) => (v(), y("figure", {
+      class: h(["onyx-icon", [
+        n.size !== "sm" ? `onyx-icon--${n.size}` : "",
+        n.color !== "currentColor" ? `onyx-icon--${n.color}` : ""
+      ]]),
+      "aria-hidden": "true",
+      innerHTML: n.icon
+    }, null, 10, Y));
+  }
+}), se = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"], A = {
   tooShort: "Please lengthen this text to {minLength} characters or more (you are currently using 1 character) | Please lengthen this text to {minLength} characters or more (you are currently using {n} characters)",
   tooLong: "Please shorten this text to {maxLength} characters or less (you are currently using 1 character) | Please shorten this text to {maxLength} characters or less (you are currently using {n} characters)",
   rangeUnderflow: "Value must be greater than or equal to {min}",
@@ -36,46 +54,46 @@ const ae = /* @__PURE__ */ S({
     tel: '"{value}" must be a valid phone number.',
     url: '"{value}" must a valid URL.'
   }
-}, y = {
-  validations: H
-}, L = Symbol(), O = (t) => {
-  const n = d(() => j(t == null ? void 0 : t.locale) ?? "en-US"), e = d(() => t != null && t.messages && n.value in t.messages ? t.messages[n.value] : y), a = d(() => (r, s = {}) => {
-    let c = P(r, e.value) ?? P(r, y) ?? "";
-    const i = typeof s.n == "number" ? s.n : void 0;
-    return c = F(c, i), J(c, s);
+}, x = {
+  validations: A
+}, I = Symbol(), V = (t) => {
+  const n = d(() => D(t == null ? void 0 : t.locale) ?? "en-US"), e = d(() => t != null && t.messages && n.value in t.messages ? t.messages[n.value] : x), r = d(() => (a, s = {}) => {
+    let c = L(a, e.value) ?? L(a, x) ?? "";
+    const o = typeof s.n == "number" ? s.n : void 0;
+    return c = J(c, o), K(c, s);
   });
-  return { locale: n, t: a };
-}, se = (t) => {
-  D(L, O(t));
-}, Y = () => $(L, () => O(), !0), P = (t, n) => {
-  const e = t.split(".").reduce((a, r) => !a || typeof a == "string" ? a : a[r], n);
+  return { locale: n, t: r };
+}, le = (t) => {
+  q(I, V(t));
+}, F = () => z(I, () => V(), !0), L = (t, n) => {
+  const e = t.split(".").reduce((r, a) => !r || typeof r == "string" ? r : r[a], n);
   return e && typeof e == "string" ? e : void 0;
-}, F = (t, n) => {
-  const e = t.split(" | ").map((r) => r.trim());
+}, J = (t, n) => {
+  const e = t.split(" | ").map((a) => a.trim());
   if (e.length <= 1)
     return t;
-  let a = 1;
-  return n === 0 && (a = 0), n && (n <= 0 || n > 1) && (a = 2), e.length === 2 ? a === 1 ? e[0] : e[1] : e[a];
-}, J = (t, n) => n ? Object.entries(n).reduce((a, [r, s]) => s === void 0 ? a : a.replace(new RegExp(`{${r}}`, "gi"), s.toString()), t).replace(/\s?{.*}\s?/gi, "") : t, I = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([t, n]) => n.enumerable).map(([t]) => t), K = (t) => I().reduce(
+  let r = 1;
+  return n === 0 && (r = 0), n && (n <= 0 || n > 1) && (r = 2), e.length === 2 ? r === 1 ? e[0] : e[1] : e[r];
+}, K = (t, n) => n ? Object.entries(n).reduce((r, [a, s]) => s === void 0 ? r : r.replace(new RegExp(`{${a}}`, "gi"), s.toString()), t).replace(/\s?{.*}\s?/gi, "") : t, P = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([t, n]) => n.enumerable).map(([t]) => t), X = (t) => P().reduce(
   (n, e) => (n[e] = t[e], n),
   {}
-), G = (t) => {
+), Z = (t) => {
   if (t.valueMissing)
     return "valueMissing";
-  const n = I().filter((e) => e !== "valid").sort();
+  const n = P().filter((e) => e !== "valid").sort();
   for (const e of n)
     if (e in t && t[e])
       return e;
-}, Q = (t, n) => {
-  const e = Object.entries(t).filter(([r, s]) => s !== void 0), a = Object.entries(n).filter(([r, s]) => s !== void 0);
-  return e.length !== a.length ? !1 : e.every(([r, s]) => s === n[r]);
-}, W = {
+}, G = (t, n) => {
+  const e = Object.entries(t).filter(([a, s]) => s !== void 0), r = Object.entries(n).filter(([a, s]) => s !== void 0);
+  return e.length !== r.length ? !1 : e.every(([a, s]) => s === n[a]);
+}, Q = {
   key: 0,
   class: "onyx-input__error",
   "aria-live": "polite"
-}, X = { class: "onyx-input__info" }, Z = Object.keys(
-  y.validations.typeMismatch
-), ee = /* @__PURE__ */ S({
+}, W = { class: "onyx-input__info" }, ee = Object.keys(
+  x.validations.typeMismatch
+), oe = /* @__PURE__ */ _({
   __name: "TestInput",
   props: {
     modelValue: { default: "" },
@@ -92,23 +110,23 @@ const ae = /* @__PURE__ */ S({
   },
   emits: ["update:modelValue", "change", "validityChange"],
   setup(t, { emit: n }) {
-    var _;
-    const e = t, a = n, { t: r } = Y(), { errorMessage: s } = B(e), c = v(!1), i = v(null), o = v((_ = i.value) == null ? void 0 : _.validity), m = d({
+    var b;
+    const e = t, r = n, { t: a } = F(), { errorMessage: s } = j(e), c = g(!1), o = g(null), i = g((b = o.value) == null ? void 0 : b.validity), m = d({
       get: () => e.modelValue,
-      set: (l) => a("update:modelValue", l)
+      set: (l) => r("update:modelValue", l)
     }), T = d(() => {
-      if (!o.value || o.value.valid)
+      if (!i.value || i.value.valid)
         return "";
-      const l = G(o.value);
+      const l = Z(i.value);
       if (e.errorMessage || l === "customError")
         return e.errorMessage;
       if (!l)
         return "";
       if (l === "typeMismatch") {
-        const u = Z.includes(e.type) ? e.type : "generic";
-        return r.value(`validations.typeMismatch.${u}`, { value: m.value });
+        const u = ee.includes(e.type) ? e.type : "generic";
+        return a.value(`validations.typeMismatch.${u}`, { value: m.value });
       }
-      return r.value(`validations.${l}`, {
+      return a.value(`validations.${l}`, {
         value: m.value,
         n: m.value.toString().length,
         minLength: e.minLength,
@@ -119,50 +137,56 @@ const ae = /* @__PURE__ */ S({
       });
     }), C = (l) => {
       const u = l.target;
-      a("change", u.value);
+      r("change", u.value);
     };
-    return E([i, s], () => {
-      i.value && i.value.setCustomValidity(e.errorMessage || "");
-    }), E(
-      [i, m, s],
+    return S([o, s], () => {
+      o.value && o.value.setCustomValidity(e.errorMessage || "");
+    }), S(
+      [o, m, s],
       () => {
-        if (!i.value)
+        if (!o.value)
           return;
-        const l = K(i.value.validity);
-        (!o.value || !Q(l, o.value)) && (o.value = l, a("validityChange", o.value));
+        const l = X(o.value.validity);
+        (!i.value || !G(l, i.value)) && (i.value = l, r("validityChange", i.value));
       },
       { immediate: !0 }
     ), (l, u) => {
-      var x, b;
-      return g(), V("label", {
-        class: f(["onyx-input", { "onyx-input--touched": c.value }])
+      var M, O;
+      return v(), y("label", {
+        class: h(["onyx-input", { "onyx-input--touched": c.value }])
       }, [
-        h("span", {
-          class: f(["onyx-input__label", { "onyx-input__label--required": e.required }])
+        f("span", {
+          class: h(["onyx-input__label", { "onyx-input__label--required": e.required }])
         }, p(e.label), 3),
-        k(h("input", z(e, {
+        B(f("input", H(e, {
           ref_key: "inputElement",
-          ref: i,
-          "onUpdate:modelValue": u[0] || (u[0] = (M) => m.value = M),
+          ref: o,
+          "onUpdate:modelValue": u[0] || (u[0] = (E) => m.value = E),
           onChange: C,
-          onBlur: u[1] || (u[1] = (M) => c.value = !0)
+          onBlur: u[1] || (u[1] = (E) => c.value = !0)
         }), null, 16), [
           [R, m.value]
         ]),
-        c.value && !((x = o.value) != null && x.valid) ? (g(), V("p", W, p(T.value), 1)) : A("", !0),
-        h("p", X, 'Model value: "' + p(m.value) + '", is valid: ' + p((b = o.value) == null ? void 0 : b.valid), 1)
+        c.value && !((M = i.value) != null && M.valid) ? (v(), y("p", Q, p(T.value), 1)) : k("", !0),
+        f("p", W, 'Model value: "' + p(m.value) + '", is valid: ' + p((O = i.value) == null ? void 0 : O.valid), 1)
       ], 2);
     };
   }
-}), te = (t, n) => {
-  const e = t.__vccOpts || t;
-  for (const [a, r] of n)
-    e[a] = r;
-  return e;
-}, le = /* @__PURE__ */ te(ee, [["__scopeId", "data-v-6632dbdc"]]);
+}), ie = [
+  "primary",
+  "secondary",
+  "neutral",
+  "danger",
+  "warning",
+  "success",
+  "info"
+];
 export {
   re as HEADLINE_TYPES,
-  ae as OnyxHeadline,
-  le as TestInput,
-  se as provideI18n
+  se as ICON_SIZES,
+  ie as ONYX_COLORS,
+  ne as OnyxHeadline,
+  ae as OnyxIcon,
+  oe as TestInput,
+  le as provideI18n
 };