@beterdichtbij/component-library 0.46.0 → 0.47.0

package/dist/scss/extern/_prime-vue.scss

@@ -0,0 +1,551 @@
+:root {
+    --p-border-radius-none: 0;
+    --p-border-radius-xs: 2px;
+    --p-border-radius-sm: 4px;
+    --p-border-radius-md: 6px;
+    --p-border-radius-lg: 8px;
+    --p-border-radius-xl: 12px;
+    --p-emerald-50: #ecfdf5;
+    --p-emerald-100: #d1fae5;
+    --p-emerald-200: #a7f3d0;
+    --p-emerald-300: #6ee7b7;
+    --p-emerald-400: #34d399;
+    --p-emerald-500: #10b981;
+    --p-emerald-600: #059669;
+    --p-emerald-700: #047857;
+    --p-emerald-800: #065f46;
+    --p-emerald-900: #064e3b;
+    --p-emerald-950: #022c22;
+    --p-green-50: #f0fdf4;
+    --p-green-100: #dcfce7;
+    --p-green-200: #bbf7d0;
+    --p-green-300: #86efac;
+    --p-green-400: #4ade80;
+    --p-green-500: #22c55e;
+    --p-green-600: #16a34a;
+    --p-green-700: #15803d;
+    --p-green-800: #166534;
+    --p-green-900: #14532d;
+    --p-green-950: #052e16;
+    --p-lime-50: #f7fee7;
+    --p-lime-100: #ecfccb;
+    --p-lime-200: #d9f99d;
+    --p-lime-300: #bef264;
+    --p-lime-400: #a3e635;
+    --p-lime-500: #84cc16;
+    --p-lime-600: #65a30d;
+    --p-lime-700: #4d7c0f;
+    --p-lime-800: #3f6212;
+    --p-lime-900: #365314;
+    --p-lime-950: #1a2e05;
+    --p-red-50: #fef2f2;
+    --p-red-100: #fee2e2;
+    --p-red-200: #fecaca;
+    --p-red-300: #fca5a5;
+    --p-red-400: #f87171;
+    --p-red-500: #ef4444;
+    --p-red-600: #dc2626;
+    --p-red-700: #b91c1c;
+    --p-red-800: #991b1b;
+    --p-red-900: #7f1d1d;
+    --p-red-950: #450a0a;
+    --p-orange-50: #fff7ed;
+    --p-orange-100: #ffedd5;
+    --p-orange-200: #fed7aa;
+    --p-orange-300: #fdba74;
+    --p-orange-400: #fb923c;
+    --p-orange-500: #f97316;
+    --p-orange-600: #ea580c;
+    --p-orange-700: #c2410c;
+    --p-orange-800: #9a3412;
+    --p-orange-900: #7c2d12;
+    --p-orange-950: #431407;
+    --p-amber-50: #fffbeb;
+    --p-amber-100: #fef3c7;
+    --p-amber-200: #fde68a;
+    --p-amber-300: #fcd34d;
+    --p-amber-400: #fbbf24;
+    --p-amber-500: #f59e0b;
+    --p-amber-600: #d97706;
+    --p-amber-700: #b45309;
+    --p-amber-800: #92400e;
+    --p-amber-900: #78350f;
+    --p-amber-950: #451a03;
+    --p-yellow-50: #fefce8;
+    --p-yellow-100: #fef9c3;
+    --p-yellow-200: #fef08a;
+    --p-yellow-300: #fde047;
+    --p-yellow-400: #facc15;
+    --p-yellow-500: #eab308;
+    --p-yellow-600: #ca8a04;
+    --p-yellow-700: #a16207;
+    --p-yellow-800: #854d0e;
+    --p-yellow-900: #713f12;
+    --p-yellow-950: #422006;
+    --p-teal-50: #f0fdfa;
+    --p-teal-100: #ccfbf1;
+    --p-teal-200: #99f6e4;
+    --p-teal-300: #5eead4;
+    --p-teal-400: #2dd4bf;
+    --p-teal-500: #14b8a6;
+    --p-teal-600: #0d9488;
+    --p-teal-700: #0f766e;
+    --p-teal-800: #115e59;
+    --p-teal-900: #134e4a;
+    --p-teal-950: #042f2e;
+    --p-cyan-50: #ecfeff;
+    --p-cyan-100: #cffafe;
+    --p-cyan-200: #a5f3fc;
+    --p-cyan-300: #67e8f9;
+    --p-cyan-400: #22d3ee;
+    --p-cyan-500: #06b6d4;
+    --p-cyan-600: #0891b2;
+    --p-cyan-700: #0e7490;
+    --p-cyan-800: #155e75;
+    --p-cyan-900: #164e63;
+    --p-cyan-950: #083344;
+    --p-sky-50: #f0f9ff;
+    --p-sky-100: #e0f2fe;
+    --p-sky-200: #bae6fd;
+    --p-sky-300: #7dd3fc;
+    --p-sky-400: #38bdf8;
+    --p-sky-500: #0ea5e9;
+    --p-sky-600: #0284c7;
+    --p-sky-700: #0369a1;
+    --p-sky-800: #075985;
+    --p-sky-900: #0c4a6e;
+    --p-sky-950: #082f49;
+    --p-blue-50: #eff6ff;
+    --p-blue-100: #dbeafe;
+    --p-blue-200: #bfdbfe;
+    --p-blue-300: #93c5fd;
+    --p-blue-400: #60a5fa;
+    --p-blue-500: #3b82f6;
+    --p-blue-600: #2563eb;
+    --p-blue-700: #1d4ed8;
+    --p-blue-800: #1e40af;
+    --p-blue-900: #1e3a8a;
+    --p-blue-950: #172554;
+    --p-indigo-50: #eef2ff;
+    --p-indigo-100: #e0e7ff;
+    --p-indigo-200: #c7d2fe;
+    --p-indigo-300: #a5b4fc;
+    --p-indigo-400: #818cf8;
+    --p-indigo-500: #6366f1;
+    --p-indigo-600: #4f46e5;
+    --p-indigo-700: #4338ca;
+    --p-indigo-800: #3730a3;
+    --p-indigo-900: #312e81;
+    --p-indigo-950: #1e1b4b;
+    --p-violet-50: #f5f3ff;
+    --p-violet-100: #ede9fe;
+    --p-violet-200: #ddd6fe;
+    --p-violet-300: #c4b5fd;
+    --p-violet-400: #a78bfa;
+    --p-violet-500: #8b5cf6;
+    --p-violet-600: #7c3aed;
+    --p-violet-700: #6d28d9;
+    --p-violet-800: #5b21b6;
+    --p-violet-900: #4c1d95;
+    --p-violet-950: #2e1065;
+    --p-purple-50: #faf5ff;
+    --p-purple-100: #f3e8ff;
+    --p-purple-200: #e9d5ff;
+    --p-purple-300: #d8b4fe;
+    --p-purple-400: #c084fc;
+    --p-purple-500: #a855f7;
+    --p-purple-600: #9333ea;
+    --p-purple-700: #7e22ce;
+    --p-purple-800: #6b21a8;
+    --p-purple-900: #581c87;
+    --p-purple-950: #3b0764;
+    --p-fuchsia-50: #fdf4ff;
+    --p-fuchsia-100: #fae8ff;
+    --p-fuchsia-200: #f5d0fe;
+    --p-fuchsia-300: #f0abfc;
+    --p-fuchsia-400: #e879f9;
+    --p-fuchsia-500: #d946ef;
+    --p-fuchsia-600: #c026d3;
+    --p-fuchsia-700: #a21caf;
+    --p-fuchsia-800: #86198f;
+    --p-fuchsia-900: #701a75;
+    --p-fuchsia-950: #4a044e;
+    --p-pink-50: #fdf2f8;
+    --p-pink-100: #fce7f3;
+    --p-pink-200: #fbcfe8;
+    --p-pink-300: #f9a8d4;
+    --p-pink-400: #f472b6;
+    --p-pink-500: #ec4899;
+    --p-pink-600: #db2777;
+    --p-pink-700: #be185d;
+    --p-pink-800: #9d174d;
+    --p-pink-900: #831843;
+    --p-pink-950: #500724;
+    --p-rose-50: #fff1f2;
+    --p-rose-100: #ffe4e6;
+    --p-rose-200: #fecdd3;
+    --p-rose-300: #fda4af;
+    --p-rose-400: #fb7185;
+    --p-rose-500: #f43f5e;
+    --p-rose-600: #e11d48;
+    --p-rose-700: #be123c;
+    --p-rose-800: #9f1239;
+    --p-rose-900: #881337;
+    --p-rose-950: #4c0519;
+    --p-slate-50: #f8fafc;
+    --p-slate-100: #f1f5f9;
+    --p-slate-200: #e2e8f0;
+    --p-slate-300: #cbd5e1;
+    --p-slate-400: #94a3b8;
+    --p-slate-500: #64748b;
+    --p-slate-600: #475569;
+    --p-slate-700: #334155;
+    --p-slate-800: #1e293b;
+    --p-slate-900: #0f172a;
+    --p-slate-950: #020617;
+    --p-gray-50: #f9fafb;
+    --p-gray-100: #f3f4f6;
+    --p-gray-200: #e5e7eb;
+    --p-gray-300: #d1d5db;
+    --p-gray-400: #9ca3af;
+    --p-gray-500: #6b7280;
+    --p-gray-600: #4b5563;
+    --p-gray-700: #374151;
+    --p-gray-800: #1f2937;
+    --p-gray-900: #111827;
+    --p-gray-950: #030712;
+    --p-zinc-50: #fafafa;
+    --p-zinc-100: #f4f4f5;
+    --p-zinc-200: #e4e4e7;
+    --p-zinc-300: #d4d4d8;
+    --p-zinc-400: #a1a1aa;
+    --p-zinc-500: #71717a;
+    --p-zinc-600: #52525b;
+    --p-zinc-700: #3f3f46;
+    --p-zinc-800: #27272a;
+    --p-zinc-900: #18181b;
+    --p-zinc-950: #09090b;
+    --p-neutral-50: #fafafa;
+    --p-neutral-100: #f5f5f5;
+    --p-neutral-200: #e5e5e5;
+    --p-neutral-300: #d4d4d4;
+    --p-neutral-400: #a3a3a3;
+    --p-neutral-500: #737373;
+    --p-neutral-600: #525252;
+    --p-neutral-700: #404040;
+    --p-neutral-800: #262626;
+    --p-neutral-900: #171717;
+    --p-neutral-950: #0a0a0a;
+    --p-stone-50: #fafaf9;
+    --p-stone-100: #f5f5f4;
+    --p-stone-200: #e7e5e4;
+    --p-stone-300: #d6d3d1;
+    --p-stone-400: #a8a29e;
+    --p-stone-500: #78716c;
+    --p-stone-600: #57534e;
+    --p-stone-700: #44403c;
+    --p-stone-800: #292524;
+    --p-stone-900: #1c1917;
+    --p-stone-950: #0c0a09;
+}
+
+:root {
+    --p-ripple-background: rgba(0, 0, 0, 0.1);
+}
+
+:root {
+    --p-button-border-radius: var(--p-form-field-border-radius);
+    --p-button-rounded-border-radius: 2rem;
+    --p-button-gap: 0.5rem;
+    --p-button-padding-x: var(--p-form-field-padding-x);
+    --p-button-padding-y: var(--p-form-field-padding-y);
+    --p-button-icon-only-width: 2.5rem;
+    --p-button-sm-font-size: var(--p-form-field-sm-font-size);
+    --p-button-sm-padding-x: var(--p-form-field-sm-padding-x);
+    --p-button-sm-padding-y: var(--p-form-field-sm-padding-y);
+    --p-button-sm-icon-only-width: 2rem;
+    --p-button-lg-font-size: var(--p-form-field-lg-font-size);
+    --p-button-lg-padding-x: var(--p-form-field-lg-padding-x);
+    --p-button-lg-padding-y: var(--p-form-field-lg-padding-y);
+    --p-button-lg-icon-only-width: 3rem;
+    --p-button-label-font-weight: 500;
+    --p-button-raised-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    --p-button-focus-ring-width: var(--p-focus-ring-width);
+    --p-button-focus-ring-style: var(--p-focus-ring-style);
+    --p-button-focus-ring-offset: var(--p-focus-ring-offset);
+    --p-button-badge-size: 1rem;
+    --p-button-transition-duration: var(--p-form-field-transition-duration);
+    --p-button-primary-background: var(--p-primary-color);
+    --p-button-primary-hover-background: var(--p-primary-hover-color);
+    --p-button-primary-active-background: var(--p-primary-active-color);
+    --p-button-primary-border-color: var(--p-primary-color);
+    --p-button-primary-hover-border-color: var(--p-primary-hover-color);
+    --p-button-primary-active-border-color: var(--p-primary-active-color);
+    --p-button-primary-color: var(--p-primary-contrast-color);
+    --p-button-primary-hover-color: var(--p-primary-contrast-color);
+    --p-button-primary-active-color: var(--p-primary-contrast-color);
+    --p-button-primary-focus-ring-color: var(--p-primary-color);
+    --p-button-primary-focus-ring-shadow: none;
+    --p-button-secondary-background: var(--p-surface-100);
+    --p-button-secondary-hover-background: var(--p-surface-200);
+    --p-button-secondary-active-background: var(--p-surface-300);
+    --p-button-secondary-border-color: var(--p-surface-100);
+    --p-button-secondary-hover-border-color: var(--p-surface-200);
+    --p-button-secondary-active-border-color: var(--p-surface-300);
+    --p-button-secondary-color: var(--p-surface-600);
+    --p-button-secondary-hover-color: var(--p-surface-700);
+    --p-button-secondary-active-color: var(--p-surface-800);
+    --p-button-secondary-focus-ring-color: var(--p-surface-600);
+    --p-button-secondary-focus-ring-shadow: none;
+    --p-button-info-background: var(--p-sky-500);
+    --p-button-info-hover-background: var(--p-sky-600);
+    --p-button-info-active-background: var(--p-sky-700);
+    --p-button-info-border-color: var(--p-sky-500);
+    --p-button-info-hover-border-color: var(--p-sky-600);
+    --p-button-info-active-border-color: var(--p-sky-700);
+    --p-button-info-color: #ffffff;
+    --p-button-info-hover-color: #ffffff;
+    --p-button-info-active-color: #ffffff;
+    --p-button-info-focus-ring-color: var(--p-sky-500);
+    --p-button-info-focus-ring-shadow: none;
+    --p-button-success-background: var(--p-green-500);
+    --p-button-success-hover-background: var(--p-green-600);
+    --p-button-success-active-background: var(--p-green-700);
+    --p-button-success-border-color: var(--p-green-500);
+    --p-button-success-hover-border-color: var(--p-green-600);
+    --p-button-success-active-border-color: var(--p-green-700);
+    --p-button-success-color: #ffffff;
+    --p-button-success-hover-color: #ffffff;
+    --p-button-success-active-color: #ffffff;
+    --p-button-success-focus-ring-color: var(--p-green-500);
+    --p-button-success-focus-ring-shadow: none;
+    --p-button-warn-background: var(--p-orange-500);
+    --p-button-warn-hover-background: var(--p-orange-600);
+    --p-button-warn-active-background: var(--p-orange-700);
+    --p-button-warn-border-color: var(--p-orange-500);
+    --p-button-warn-hover-border-color: var(--p-orange-600);
+    --p-button-warn-active-border-color: var(--p-orange-700);
+    --p-button-warn-color: #ffffff;
+    --p-button-warn-hover-color: #ffffff;
+    --p-button-warn-active-color: #ffffff;
+    --p-button-warn-focus-ring-color: var(--p-orange-500);
+    --p-button-warn-focus-ring-shadow: none;
+    --p-button-help-background: var(--p-purple-500);
+    --p-button-help-hover-background: var(--p-purple-600);
+    --p-button-help-active-background: var(--p-purple-700);
+    --p-button-help-border-color: var(--p-purple-500);
+    --p-button-help-hover-border-color: var(--p-purple-600);
+    --p-button-help-active-border-color: var(--p-purple-700);
+    --p-button-help-color: #ffffff;
+    --p-button-help-hover-color: #ffffff;
+    --p-button-help-active-color: #ffffff;
+    --p-button-help-focus-ring-color: var(--p-purple-500);
+    --p-button-help-focus-ring-shadow: none;
+    --p-button-danger-background: var(--p-red-500);
+    --p-button-danger-hover-background: var(--p-red-600);
+    --p-button-danger-active-background: var(--p-red-700);
+    --p-button-danger-border-color: var(--p-red-500);
+    --p-button-danger-hover-border-color: var(--p-red-600);
+    --p-button-danger-active-border-color: var(--p-red-700);
+    --p-button-danger-color: #ffffff;
+    --p-button-danger-hover-color: #ffffff;
+    --p-button-danger-active-color: #ffffff;
+    --p-button-danger-focus-ring-color: var(--p-red-500);
+    --p-button-danger-focus-ring-shadow: none;
+    --p-button-contrast-background: var(--p-surface-950);
+    --p-button-contrast-hover-background: var(--p-surface-900);
+    --p-button-contrast-active-background: var(--p-surface-800);
+    --p-button-contrast-border-color: var(--p-surface-950);
+    --p-button-contrast-hover-border-color: var(--p-surface-900);
+    --p-button-contrast-active-border-color: var(--p-surface-800);
+    --p-button-contrast-color: var(--p-surface-0);
+    --p-button-contrast-hover-color: var(--p-surface-0);
+    --p-button-contrast-active-color: var(--p-surface-0);
+    --p-button-contrast-focus-ring-color: var(--p-surface-950);
+    --p-button-contrast-focus-ring-shadow: none;
+    --p-button-outlined-primary-hover-background: var(--p-primary-50);
+    --p-button-outlined-primary-active-background: var(--p-primary-100);
+    --p-button-outlined-primary-border-color: var(--p-primary-200);
+    --p-button-outlined-primary-color: var(--p-primary-color);
+    --p-button-outlined-secondary-hover-background: var(--p-surface-50);
+    --p-button-outlined-secondary-active-background: var(--p-surface-100);
+    --p-button-outlined-secondary-border-color: var(--p-surface-200);
+    --p-button-outlined-secondary-color: var(--p-surface-500);
+    --p-button-outlined-success-hover-background: var(--p-green-50);
+    --p-button-outlined-success-active-background: var(--p-green-100);
+    --p-button-outlined-success-border-color: var(--p-green-200);
+    --p-button-outlined-success-color: var(--p-green-500);
+    --p-button-outlined-info-hover-background: var(--p-sky-50);
+    --p-button-outlined-info-active-background: var(--p-sky-100);
+    --p-button-outlined-info-border-color: var(--p-sky-200);
+    --p-button-outlined-info-color: var(--p-sky-500);
+    --p-button-outlined-warn-hover-background: var(--p-orange-50);
+    --p-button-outlined-warn-active-background: var(--p-orange-100);
+    --p-button-outlined-warn-border-color: var(--p-orange-200);
+    --p-button-outlined-warn-color: var(--p-orange-500);
+    --p-button-outlined-help-hover-background: var(--p-purple-50);
+    --p-button-outlined-help-active-background: var(--p-purple-100);
+    --p-button-outlined-help-border-color: var(--p-purple-200);
+    --p-button-outlined-help-color: var(--p-purple-500);
+    --p-button-outlined-danger-hover-background: var(--p-red-50);
+    --p-button-outlined-danger-active-background: var(--p-red-100);
+    --p-button-outlined-danger-border-color: var(--p-red-200);
+    --p-button-outlined-danger-color: var(--p-red-500);
+    --p-button-outlined-contrast-hover-background: var(--p-surface-50);
+    --p-button-outlined-contrast-active-background: var(--p-surface-100);
+    --p-button-outlined-contrast-border-color: var(--p-surface-700);
+    --p-button-outlined-contrast-color: var(--p-surface-950);
+    --p-button-outlined-plain-hover-background: var(--p-surface-50);
+    --p-button-outlined-plain-active-background: var(--p-surface-100);
+    --p-button-outlined-plain-border-color: var(--p-surface-200);
+    --p-button-outlined-plain-color: var(--p-surface-700);
+    --p-button-text-primary-hover-background: var(--p-primary-50);
+    --p-button-text-primary-active-background: var(--p-primary-100);
+    --p-button-text-primary-color: var(--p-primary-color);
+    --p-button-text-secondary-hover-background: var(--p-surface-50);
+    --p-button-text-secondary-active-background: var(--p-surface-100);
+    --p-button-text-secondary-color: var(--p-surface-500);
+    --p-button-text-success-hover-background: var(--p-green-50);
+    --p-button-text-success-active-background: var(--p-green-100);
+    --p-button-text-success-color: var(--p-green-500);
+    --p-button-text-info-hover-background: var(--p-sky-50);
+    --p-button-text-info-active-background: var(--p-sky-100);
+    --p-button-text-info-color: var(--p-sky-500);
+    --p-button-text-warn-hover-background: var(--p-orange-50);
+    --p-button-text-warn-active-background: var(--p-orange-100);
+    --p-button-text-warn-color: var(--p-orange-500);
+    --p-button-text-help-hover-background: var(--p-purple-50);
+    --p-button-text-help-active-background: var(--p-purple-100);
+    --p-button-text-help-color: var(--p-purple-500);
+    --p-button-text-danger-hover-background: var(--p-red-50);
+    --p-button-text-danger-active-background: var(--p-red-100);
+    --p-button-text-danger-color: var(--p-red-500);
+    --p-button-text-contrast-hover-background: var(--p-surface-50);
+    --p-button-text-contrast-active-background: var(--p-surface-100);
+    --p-button-text-contrast-color: var(--p-surface-950);
+    --p-button-text-plain-hover-background: var(--p-surface-50);
+    --p-button-text-plain-active-background: var(--p-surface-100);
+    --p-button-text-plain-color: var(--p-surface-700);
+    --p-button-link-color: var(--p-primary-color);
+    --p-button-link-hover-color: var(--p-primary-color);
+    --p-button-link-active-color: var(--p-primary-color);
+}
+
+:root {
+    --p-splitbutton-border-radius: var(--p-form-field-border-radius);
+    --p-splitbutton-rounded-border-radius: 2rem;
+    --p-splitbutton-raised-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+:root {
+    --p-tieredmenu-background: var(--p-content-background);
+    --p-tieredmenu-border-color: var(--p-content-border-color);
+    --p-tieredmenu-color: var(--p-content-color);
+    --p-tieredmenu-border-radius: var(--p-content-border-radius);
+    --p-tieredmenu-shadow: var(--p-overlay-navigation-shadow);
+    --p-tieredmenu-transition-duration: var(--p-transition-duration);
+    --p-tieredmenu-list-padding: var(--p-navigation-list-padding);
+    --p-tieredmenu-list-gap: var(--p-navigation-list-gap);
+    --p-tieredmenu-item-focus-background: var(--p-navigation-item-focus-background);
+    --p-tieredmenu-item-active-background: var(--p-navigation-item-active-background);
+    --p-tieredmenu-item-color: var(--p-navigation-item-color);
+    --p-tieredmenu-item-focus-color: var(--p-navigation-item-focus-color);
+    --p-tieredmenu-item-active-color: var(--p-navigation-item-active-color);
+    --p-tieredmenu-item-padding: var(--p-navigation-item-padding);
+    --p-tieredmenu-item-border-radius: var(--p-navigation-item-border-radius);
+    --p-tieredmenu-item-gap: var(--p-navigation-item-gap);
+    --p-tieredmenu-item-icon-color: var(--p-navigation-item-icon-color);
+    --p-tieredmenu-item-icon-focus-color: var(--p-navigation-item-icon-focus-color);
+    --p-tieredmenu-item-icon-active-color: var(--p-navigation-item-icon-active-color);
+    --p-tieredmenu-submenu-mobile-indent: 1rem;
+    --p-tieredmenu-submenu-icon-size: var(--p-navigation-submenu-icon-size);
+    --p-tieredmenu-submenu-icon-color: var(--p-navigation-submenu-icon-color);
+    --p-tieredmenu-submenu-icon-focus-color: var(--p-navigation-submenu-icon-focus-color);
+    --p-tieredmenu-submenu-icon-active-color: var(--p-navigation-submenu-icon-active-color);
+    --p-tieredmenu-separator-border-color: var(--p-content-border-color);
+}
+
+body {
+  .p-splitbutton {
+    border-radius: 8px;
+
+    .p-splitbutton-button {
+      width: 200px;
+      padding: 8px;
+      gap: 8px;
+      justify-content: left;
+
+      span {
+        font-weight: 500;
+        font-size: 15px;
+      }
+    }
+
+    .p-button-icon-only {
+        width: 40px;
+    }
+
+    .p-button-outlined {
+      font-weight: $font-normal;
+      background-color: $color-white;
+      color: #394156;
+      border: 1px solid $color-border;
+
+      &.p-splitbutton-button {
+        border-right-width: 0;
+
+        img {
+          margin: 0;
+        }
+      }
+
+      &.p-button-secondary:hover {
+        border-color: $color-border;
+        background-color: $gray-7;
+        color: #394156;
+
+        svg {
+          fill: $color-white;
+        }
+      }
+
+      .p-button-label {
+        font-size: 15px;
+        font-weight: $font-normal;
+      }
+
+      svg {
+        margin-right: 0;
+        margin-top: 5px;
+      }
+    }
+  }
+
+  .p-tieredmenu-overlay {
+    width: 240px;
+    z-index: 1055 !important;
+
+    .p-tieredmenu-root-list {
+      padding: 0 !important;
+
+      a, a:hover {
+        color: inherit;
+        text-decoration: none;
+      }
+    }
+
+    .menu-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px;
+      cursor: pointer;
+      font-size: 1rem;
+
+      .icon-image {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+}

package/dist/scss/templates/_content-library-template.scss

@@ -0,0 +1,53 @@
+.content-library-template {
+    .select-button-block {
+        .v-select {
+            input {
+                padding: 0px;
+            }
+
+            &.vs--single.vs--open .vs__selected {
+                position: inherit;
+                top: 0%;
+            }
+
+            .vs__selected-options {
+                flex-wrap: unset;
+                padding: 0px;
+
+                span {
+                    line-height: 40px;
+                    font-size: 16px;
+                    white-space: nowrap;
+
+                    img {
+                        height: 18px;
+                        margin-right: 5px;
+                    }
+
+                    svg {
+                        margin-right: 5px;
+                    }
+                }
+            }
+
+            .vs__dropdown-menu {
+                padding: 0px;
+
+                .vs__dropdown-option {
+                    padding: 0px 0px 0px 10px;
+                    line-height: 40px;
+                    font-size: 16px;
+
+                    img {
+                        height: 18px;
+                        margin-right: 5px;
+                    }
+
+                    svg {
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+    }
+}

package/dist/utils/array.d.ts

@@ -1,2 +1,4 @@
 export declare const IsFilledArray: (subject: any) => boolean;
 export declare const ConvertObjectToArray: (obj: any) => any[];
+export declare const ArrayHasValues: (array: Array<any>) => boolean;
+export declare const IsArrayEmpty: (array: Array<any>) => boolean;

package/dist/utils/number.d.ts

@@ -0,0 +1 @@
+export declare const IsNumber: (number: any) => boolean;

package/dist/utils/regex.d.ts

@@ -0,0 +1,6 @@
+export declare const escapeRegExp: (string: string) => string;
+export declare const StripHtml: (string: string) => string;
+export declare const HumanizeTipTapMessage: (string: string) => string;
+export declare const ReplaceNewLinesWithBreakLines: (string: string) => string;
+export declare const IsValidHL7Code: (codesCsv: string) => boolean;
+export declare const IsValidEmail: (email: string) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@beterdichtbij/component-library",
     "private": false,
-    "version": "0.46.0",
+    "version": "0.47.0",
     "type": "module",
     "files": [
         "dist"
@@ -52,6 +52,7 @@
         "vue": "^3.2.47"
     },
     "dependencies": {
+        "@primeuix/themes": "^1.0.0",
         "@tiptap/extension-bold": "2.1.12",
         "@tiptap/extension-bullet-list": "2.1.12",
         "@tiptap/extension-document": "2.1.12",
@@ -71,8 +72,10 @@
         "dropzone": "5.9.3",
         "maska": "2.1.11",
         "pinia": "2.1",
+        "primevue": "^4.3.1",
         "uid": "2.0.2",
-        "vue-i18n": "^9.4.1"
+        "vue-i18n": "^9.4.1",
+        "vue-select": "^4.0.0-beta.6"
     },
     "devDependencies": {
         "@azure/static-web-apps-cli": "1.1.4",
@@ -88,6 +91,7 @@
         "@storybook/vue3-vite": "^7.0.11",
         "@types/bootstrap": "5.2.10",
         "@types/dropzone": "5.7.6",
+        "@types/vue-select": "^3.16.8",
         "@typescript-eslint/eslint-plugin": "6.8.0",
         "@typescript-eslint/parser": "6.8.0",
         "@vitejs/plugin-vue": "^4.1.0",