sit-onyx 0.1.0-alpha.4 → 0.1.0-alpha.6

package/README.md

@@ -1,10 +1,12 @@
-<p>
-  <a href="https://gruppe.schwarz">
-  <div align="center">
-    <img src="../../.github/schwarz-group.svg" width="400px" />
-    </div>
-  </a>
-</p>
+<div align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-light.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg">
+    <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg" width="160px">
+  </picture>
+</div>
+
+<br>
 
 # onyx
 

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

@@ -0,0 +1,24 @@
+import type { Meta } from "@storybook/vue3";
+import OnyxHeadline from "./OnyxHeadline.vue";
+/**
+ * Headline that can e.g. be used to structure the page content.
+ */
+declare const meta: Meta<typeof OnyxHeadline>;
+export default meta;
+/**
+ * This example shows a default h1 headline.
+ */
+export declare const Default: {
+    args: {
+        is: "h1";
+    };
+};
+/**
+ * This example shows a h1 headline with the monospace font family.
+ */
+export declare const Monospace: {
+    args: {
+        monospace: true;
+        is: "h1";
+    };
+};

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

@@ -0,0 +1,41 @@
+import type { OnyxHeadlineProps } from "./types";
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxHeadlineProps>, {
+    monospace: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxHeadlineProps>, {
+    monospace: boolean;
+}>>>, {
+    monospace: boolean;
+}, {}>, Readonly<{
+    /**
+     * Headline content.
+     */
+    default(): unknown;
+}> & {
+    /**
+     * Headline content.
+     */
+    default(): unknown;
+}>;
+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];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,11 @@
+export type OnyxHeadlineProps = {
+    /**
+     * Headline type. Please note that only h1-h4 are intended to be used from UX perspective.
+     * h5 and h6 will have the same styles as h4 and should only be used for semantic reasons.
+     */
+    is: HeadlineType;
+    /** If `true`, the monospace font family will be used instead of the default one. */
+    monospace?: boolean;
+};
+export declare const HEADLINE_TYPES: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+export type HeadlineType = (typeof HEADLINE_TYPES)[number];

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/TestInput/TestInput.vue.d.ts

@@ -56,9 +56,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onChange?: ((value: string) => any) | undefined;
     onValidityChange?: ((state: ValidityState) => any) | undefined;
 }, {
+    type: "number" | "search" | "email" | "tel" | "url" | "password" | "text";
     modelValue: string | number;
     label: string;
-    type: "number" | "search" | "email" | "tel" | "url" | "password" | "text";
 }, {}>;
 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 r=require("vue"),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.'}},v={validations:V},_=Symbol(),b=t=>{const n=r.computed(()=>r.unref(t==null?void 0:t.locale)??"en-US"),e=r.computed(()=>t!=null&&t.messages&&n.value in t.messages?t.messages[n.value]:v),a=r.computed(()=>(s,l={})=>{let m=y(s,e.value)??y(s,v)??"";const o=typeof l.n=="number"?l.n:void 0;return m=I(m,o),T(m,l)});return{locale:n,t:a}},E=t=>{r.provide(_,b(t))},P=()=>r.inject(_,()=>b(),!0),y=(t,n)=>{const e=t.split(".").reduce((a,s)=>!a||typeof a=="string"?a:a[s],n);return e&&typeof e=="string"?e:void 0},I=(t,n)=>{const e=t.split(" | ").map(s=>s.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]},T=(t,n)=>n?Object.entries(n).reduce((a,[s,l])=>l===void 0?a:a.replace(new RegExp(`{${s}}`,"gi"),l.toString()),t).replace(/\s?{.*}\s?/gi,""):t,x=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([t,n])=>n.enumerable).map(([t])=>t),L=t=>x().reduce((n,e)=>(n[e]=t[e],n),{}),O=t=>{if(t.valueMissing)return"valueMissing";const n=x().filter(e=>e!=="valid").sort();for(const e of n)if(e in t&&t[e])return e},C=(t,n)=>{const e=Object.entries(t).filter(([s,l])=>l!==void 0),a=Object.entries(n).filter(([s,l])=>l!==void 0);return e.length!==a.length?!1:e.every(([s,l])=>l===n[s])},N={key:0,class:"onyx-input__error","aria-live":"polite"},q={class:"onyx-input__info"},w=Object.keys(v.validations.typeMismatch),D=r.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(t,{emit:n}){var p;const e=t,a=n,{t:s}=P(),{errorMessage:l}=r.toRefs(e),m=r.ref(!1),o=r.ref(null),u=r.ref((p=o.value)==null?void 0:p.validity),d=r.computed({get:()=>e.modelValue,set:i=>a("update:modelValue",i)}),M=r.computed(()=>{if(!u.value||u.value.valid)return"";const i=O(u.value);if(e.errorMessage||i==="customError")return e.errorMessage;if(!i)return"";if(i==="typeMismatch"){const c=w.includes(e.type)?e.type:"generic";return s.value(`validations.typeMismatch.${c}`,{value:d.value})}return s.value(`validations.${i}`,{value:d.value,n:d.value.toString().length,minLength:e.minLength,maxLength:e.maxLength,min:e.min,max:e.max,step:e.step})}),S=i=>{const c=i.target;a("change",c.value)};return r.watch([o,l],()=>{o.value&&o.value.setCustomValidity(e.errorMessage||"")}),r.watch([o,d,l],()=>{if(!o.value)return;const i=L(o.value.validity);(!u.value||!C(i,u.value))&&(u.value=i,a("validityChange",u.value))},{immediate:!0}),(i,c)=>{var g,h;return r.openBlock(),r.createElementBlock("label",{class:r.normalizeClass(["onyx-input",{"onyx-input--touched":m.value}])},[r.createElementVNode("span",{class:r.normalizeClass(["onyx-input__label",{"onyx-input__label--required":e.required}])},r.toDisplayString(e.label),3),r.withDirectives(r.createElementVNode("input",r.mergeProps(e,{ref_key:"inputElement",ref:o,"onUpdate:modelValue":c[0]||(c[0]=f=>d.value=f),onChange:S,onBlur:c[1]||(c[1]=f=>m.value=!0)}),null,16),[[r.vModelDynamic,d.value]]),m.value&&!((g=u.value)!=null&&g.valid)?(r.openBlock(),r.createElementBlock("p",N,r.toDisplayString(M.value),1)):r.createCommentVNode("",!0),r.createElementVNode("p",q,'Model value: "'+r.toDisplayString(d.value)+'", is valid: '+r.toDisplayString((h=u.value)==null?void 0:h.valid),1)],2)}}}),U=(t,n)=>{const e=t.__vccOpts||t;for(const[a,s]of n)e[a]=s;return e},j=U(D,[["__scopeId","data-v-6632dbdc"]]);exports.TestInput=j;exports.provideI18n=E;
+"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,4 +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,44 @@
-import { provide as C, inject as U, computed as d, unref as q, defineComponent as w, toRefs as N, ref as p, watch as b, openBlock as M, createElementBlock as V, normalizeClass as E, createElementVNode as g, toDisplayString as v, withDirectives as j, mergeProps as D, vModelDynamic as k, createCommentVNode as z } from "vue";
-const B = {
+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: {},
+    monospace: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const n = t;
+    return (e, r) => (v(), $(N(n.is), {
+      class: h([
+        "onyx-headline",
+        `onyx-headline--${n.is}`,
+        n.monospace ? "onyx-headline--monospace" : ""
+      ])
+    }, {
+      default: w(() => [
+        U(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), 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}",
@@ -15,46 +54,46 @@ const B = {
     tel: '"{value}" must be a valid phone number.',
     url: '"{value}" must a valid URL.'
   }
-}, h = {
-  validations: B
-}, L = Symbol(), S = (t) => {
-  const r = d(() => q(t == null ? void 0 : t.locale) ?? "en-US"), e = d(() => t != null && t.messages && r.value in t.messages ? t.messages[r.value] : h), a = d(() => (n, s = {}) => {
-    let c = P(n, e.value) ?? P(n, h) ?? "";
-    const i = typeof s.n == "number" ? s.n : void 0;
-    return c = $(c, i), A(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: r, t: a };
-}, Z = (t) => {
-  C(L, S(t));
-}, R = () => U(L, () => S(), !0), P = (t, r) => {
-  const e = t.split(".").reduce((a, n) => !a || typeof a == "string" ? a : a[n], r);
+  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;
-}, $ = (t, r) => {
-  const e = t.split(" | ").map((n) => n.trim());
+}, J = (t, n) => {
+  const e = t.split(" | ").map((a) => a.trim());
   if (e.length <= 1)
     return t;
-  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];
-}, A = (t, r) => r ? Object.entries(r).reduce((a, [n, s]) => s === void 0 ? a : a.replace(new RegExp(`{${n}}`, "gi"), s.toString()), t).replace(/\s?{.*}\s?/gi, "") : t, I = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([t, r]) => r.enumerable).map(([t]) => t), F = (t) => I().reduce(
-  (r, e) => (r[e] = t[e], r),
+  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),
   {}
-), Y = (t) => {
+), Z = (t) => {
   if (t.valueMissing)
     return "valueMissing";
-  const r = I().filter((e) => e !== "valid").sort();
-  for (const e of r)
+  const n = P().filter((e) => e !== "valid").sort();
+  for (const e of n)
     if (e in t && t[e])
       return e;
-}, J = (t, r) => {
-  const e = Object.entries(t).filter(([n, s]) => s !== void 0), a = Object.entries(r).filter(([n, s]) => s !== void 0);
-  return e.length !== a.length ? !1 : e.every(([n, s]) => s === r[n]);
-}, K = {
+}, 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"
-}, G = { class: "onyx-input__info" }, H = Object.keys(
-  h.validations.typeMismatch
-), Q = /* @__PURE__ */ w({
+}, W = { class: "onyx-input__info" }, ee = Object.keys(
+  x.validations.typeMismatch
+), oe = /* @__PURE__ */ _({
   __name: "TestInput",
   props: {
     modelValue: { default: "" },
@@ -70,24 +109,24 @@ const B = {
     minLength: {}
   },
   emits: ["update:modelValue", "change", "validityChange"],
-  setup(t, { emit: r }) {
-    var f;
-    const e = t, a = r, { t: n } = R(), { errorMessage: s } = N(e), c = p(!1), i = p(null), u = p((f = i.value) == null ? void 0 : f.validity), m = d({
+  setup(t, { emit: n }) {
+    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)
-    }), O = d(() => {
-      if (!u.value || u.value.valid)
+      set: (l) => r("update:modelValue", l)
+    }), T = d(() => {
+      if (!i.value || i.value.valid)
         return "";
-      const l = Y(u.value);
+      const l = Z(i.value);
       if (e.errorMessage || l === "customError")
         return e.errorMessage;
       if (!l)
         return "";
       if (l === "typeMismatch") {
-        const o = H.includes(e.type) ? e.type : "generic";
-        return n.value(`validations.typeMismatch.${o}`, { value: m.value });
+        const u = ee.includes(e.type) ? e.type : "generic";
+        return a.value(`validations.typeMismatch.${u}`, { value: m.value });
       }
-      return n.value(`validations.${l}`, {
+      return a.value(`validations.${l}`, {
         value: m.value,
         n: m.value.toString().length,
         minLength: e.minLength,
@@ -96,50 +135,58 @@ const B = {
         max: e.max,
         step: e.step
       });
-    }), T = (l) => {
-      const o = l.target;
-      a("change", o.value);
+    }), C = (l) => {
+      const u = l.target;
+      r("change", u.value);
     };
-    return b([i, s], () => {
-      i.value && i.value.setCustomValidity(e.errorMessage || "");
-    }), b(
-      [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 = F(i.value.validity);
-        (!u.value || !J(l, u.value)) && (u.value = l, a("validityChange", u.value));
+        const l = X(o.value.validity);
+        (!i.value || !G(l, i.value)) && (i.value = l, r("validityChange", i.value));
       },
       { immediate: !0 }
-    ), (l, o) => {
-      var y, _;
-      return M(), V("label", {
-        class: E(["onyx-input", { "onyx-input--touched": c.value }])
+    ), (l, u) => {
+      var M, O;
+      return v(), y("label", {
+        class: h(["onyx-input", { "onyx-input--touched": c.value }])
       }, [
-        g("span", {
-          class: E(["onyx-input__label", { "onyx-input__label--required": e.required }])
-        }, v(e.label), 3),
-        j(g("input", D(e, {
+        f("span", {
+          class: h(["onyx-input__label", { "onyx-input__label--required": e.required }])
+        }, p(e.label), 3),
+        B(f("input", H(e, {
           ref_key: "inputElement",
-          ref: i,
-          "onUpdate:modelValue": o[0] || (o[0] = (x) => m.value = x),
-          onChange: T,
-          onBlur: o[1] || (o[1] = (x) => c.value = !0)
+          ref: o,
+          "onUpdate:modelValue": u[0] || (u[0] = (E) => m.value = E),
+          onChange: C,
+          onBlur: u[1] || (u[1] = (E) => c.value = !0)
         }), null, 16), [
-          [k, m.value]
+          [R, m.value]
         ]),
-        c.value && !((y = u.value) != null && y.valid) ? (M(), V("p", K, v(O.value), 1)) : z("", !0),
-        g("p", G, 'Model value: "' + v(m.value) + '", is valid: ' + v((_ = u.value) == null ? void 0 : _.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);
     };
   }
-}), W = (t, r) => {
-  const e = t.__vccOpts || t;
-  for (const [a, n] of r)
-    e[a] = n;
-  return e;
-}, ee = /* @__PURE__ */ W(Q, [["__scopeId", "data-v-6632dbdc"]]);
+}), ie = [
+  "primary",
+  "secondary",
+  "neutral",
+  "danger",
+  "warning",
+  "success",
+  "info"
+];
 export {
-  ee as TestInput,
-  Z as provideI18n
+  re as HEADLINE_TYPES,
+  se as ICON_SIZES,
+  ie as ONYX_COLORS,
+  ne as OnyxHeadline,
+  ae as OnyxIcon,
+  oe as TestInput,
+  le as provideI18n
 };