@bethinkpl/design-system 26.14.3 → 26.14.5

package/docs/assets/{preview-dRTG5wog.js → preview-DlI-9236.js}

@@ -1,2 +1,2 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-Mv9wJbYE.js","./iframe-B7O_YbfU.js","./_commonjsHelpers-Chg3vePA.js","./index-vG0co4wr.js"])))=>i.map(i=>d[i]);
-import{_ as s}from"./iframe-B7O_YbfU.js";import"../sb-preview/runtime.js";const{global:_}=__STORYBOOK_MODULE_GLOBAL__;var o,i=Object.entries((o=_.TAGS_OPTIONS)!=null?o:{}).reduce((e,r)=>{let[t,a]=r;return a.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await s(()=>import("./DocsRenderer-CFRXHY34-Mv9wJbYE.js").then(r=>r.am),__vite__mapDeps([0,1,2,3]),import.meta.url);return new e},stories:{filter:e=>{var r;return(e.tags||[]).filter(t=>i[t]).length===0&&!((r=e.parameters.docs)!=null&&r.disable)}}}};export{d as parameters};
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-TNb7LCKP.js","./iframe-BvVXUrhW.js","./_commonjsHelpers-Chg3vePA.js","./index-vG0co4wr.js"])))=>i.map(i=>d[i]);
+import{_ as s}from"./iframe-BvVXUrhW.js";import"../sb-preview/runtime.js";const{global:_}=__STORYBOOK_MODULE_GLOBAL__;var o,i=Object.entries((o=_.TAGS_OPTIONS)!=null?o:{}).reduce((e,r)=>{let[t,a]=r;return a.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await s(()=>import("./DocsRenderer-CFRXHY34-TNb7LCKP.js").then(r=>r.am),__vite__mapDeps([0,1,2,3]),import.meta.url);return new e},stories:{filter:e=>{var r;return(e.tags||[]).filter(t=>i[t]).length===0&&!((r=e.parameters.docs)!=null&&r.disable)}}}};export{d as parameters};

package/docs/assets/{string-CFc0pFCE.js → string-Ct9SAoCE.js}

@@ -1 +1 @@
-import{a as h,I as y,b as I}from"./Icon-BPz80dqH.js";import{d as p,r as g,o as s,c as n,a as d,f as i,k as $,x as u,g as m,n as b}from"./vue.esm-bundler-DmkhfO_9.js";import{_ as c}from"./_plugin-vue_export-helper-DlAUqK2U.js";const f=p({name:"Modal",components:{WnlIcon:h},props:{showHeader:{type:Boolean,default:!0},animateScrollingContent:{type:Boolean,default:!1}},emits:["close-modal"],data(){return{ICONS:Object.freeze(y),ICON_SIZES:Object.freeze(I)}}}),C={key:0,class:"m-modal__header"},N={key:1,class:"m-modal__footer"};function w(e,a,o,l,t,S){const r=g("wnl-icon");return s(),n("div",{class:"m-modal",onClick:a[2]||(a[2]=u(_=>e.$emit("close-modal"),["stop"]))},[d("div",{class:"m-modal__contentWrapper",onClick:a[1]||(a[1]=u(()=>{},["stop"]))},[e.showHeader?(s(),n("div",C,[i(e.$slots,"header",{},void 0,!0),$(r,{touchable:"",icon:e.ICONS.FA_XMARK,class:"m-modal__header__close",size:e.ICON_SIZES.SMALL,onClick:a[0]||(a[0]=u(_=>e.$emit("close-modal"),["stop"]))},null,8,["icon","size"])])):m("",!0),d("div",{class:b(["m-modal__content",{"scrollable-main-container":e.animateScrollingContent}])},[i(e.$slots,"default",{},void 0,!0)],2),a[3]||(a[3]=d("div",{class:"m-modal__content__shadow"},null,-1)),e.$slots.footer?(s(),n("div",N,[i(e.$slots,"footer",{},void 0,!0)])):m("",!0)])])}const A=c(f,[["render",w],["__scopeId","data-v-b165f419"]]);f.__docgenInfo={displayName:"Modal",exportName:"default",description:"",tags:{},props:[{name:"showHeader",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"animateScrollingContent",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"close-modal"}],slots:[{name:"header"},{name:"default"},{name:"footer"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Modal/Modal.vue"]};const V={DEFAULT:"default",DISABLED:"disabled"},Q={ONE:"one",TWO:"two"},v=p({name:"SurveyQuestionTextarea",props:{value:{type:String,required:!0},placeholder:{type:String,default:"Wpisz swoją odpowiedź"},disabled:{type:Boolean,default:!1}},emits:["input"],watch:{value(){this.$refs.textarea.style.height="auto",this.$refs.textarea.style.height=this.$refs.textarea.scrollHeight+"px"}},methods:{onInput(e){this.$emit("input",e.target.value)}}}),E=["disabled","placeholder","value"];function O(e,a,o,l,t,S){return s(),n("textarea",{ref:"textarea",class:"ds-surveyQuestionTextarea",disabled:e.disabled,placeholder:e.placeholder,value:e.value,onInput:a[0]||(a[0]=(...r)=>e.onInput&&e.onInput(...r))},null,40,E)}const z=c(v,[["render",O],["__scopeId","data-v-a0f836ab"]]);v.__docgenInfo={displayName:"SurveyQuestionTextarea",exportName:"default",description:"",tags:{},props:[{name:"value",type:{name:"string"},required:!0},{name:"placeholder",type:{name:"string"},defaultValue:{func:!1,value:"'Wpisz swoją odpowiedź'"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"input",type:{names:["undefined"]}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/SurveyQuestions/SurveyQuestionTextarea.vue"]};const B=e=>{for(var a="",o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",l=o.length,t=0;t<e;t++)a+=o.charAt(Math.floor(Math.random()*l));return a};export{A as M,V as S,Q as a,z as b,B as r};
+import{a as h,I as y,b as I}from"./Icon-D0llnARZ.js";import{d as p,r as g,o as s,c as n,a as d,f as i,k as $,x as u,g as m,n as b}from"./vue.esm-bundler-DmkhfO_9.js";import{_ as c}from"./_plugin-vue_export-helper-DlAUqK2U.js";const f=p({name:"Modal",components:{WnlIcon:h},props:{showHeader:{type:Boolean,default:!0},animateScrollingContent:{type:Boolean,default:!1}},emits:["close-modal"],data(){return{ICONS:Object.freeze(y),ICON_SIZES:Object.freeze(I)}}}),C={key:0,class:"m-modal__header"},N={key:1,class:"m-modal__footer"};function w(e,a,o,l,t,S){const r=g("wnl-icon");return s(),n("div",{class:"m-modal",onClick:a[2]||(a[2]=u(_=>e.$emit("close-modal"),["stop"]))},[d("div",{class:"m-modal__contentWrapper",onClick:a[1]||(a[1]=u(()=>{},["stop"]))},[e.showHeader?(s(),n("div",C,[i(e.$slots,"header",{},void 0,!0),$(r,{touchable:"",icon:e.ICONS.FA_XMARK,class:"m-modal__header__close",size:e.ICON_SIZES.SMALL,onClick:a[0]||(a[0]=u(_=>e.$emit("close-modal"),["stop"]))},null,8,["icon","size"])])):m("",!0),d("div",{class:b(["m-modal__content",{"scrollable-main-container":e.animateScrollingContent}])},[i(e.$slots,"default",{},void 0,!0)],2),a[3]||(a[3]=d("div",{class:"m-modal__content__shadow"},null,-1)),e.$slots.footer?(s(),n("div",N,[i(e.$slots,"footer",{},void 0,!0)])):m("",!0)])])}const A=c(f,[["render",w],["__scopeId","data-v-b165f419"]]);f.__docgenInfo={displayName:"Modal",exportName:"default",description:"",tags:{},props:[{name:"showHeader",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"animateScrollingContent",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"close-modal"}],slots:[{name:"header"},{name:"default"},{name:"footer"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Modal/Modal.vue"]};const V={DEFAULT:"default",DISABLED:"disabled"},Q={ONE:"one",TWO:"two"},v=p({name:"SurveyQuestionTextarea",props:{value:{type:String,required:!0},placeholder:{type:String,default:"Wpisz swoją odpowiedź"},disabled:{type:Boolean,default:!1}},emits:["input"],watch:{value(){this.$refs.textarea.style.height="auto",this.$refs.textarea.style.height=this.$refs.textarea.scrollHeight+"px"}},methods:{onInput(e){this.$emit("input",e.target.value)}}}),E=["disabled","placeholder","value"];function O(e,a,o,l,t,S){return s(),n("textarea",{ref:"textarea",class:"ds-surveyQuestionTextarea",disabled:e.disabled,placeholder:e.placeholder,value:e.value,onInput:a[0]||(a[0]=(...r)=>e.onInput&&e.onInput(...r))},null,40,E)}const z=c(v,[["render",O],["__scopeId","data-v-a0f836ab"]]);v.__docgenInfo={displayName:"SurveyQuestionTextarea",exportName:"default",description:"",tags:{},props:[{name:"value",type:{name:"string"},required:!0},{name:"placeholder",type:{name:"string"},defaultValue:{func:!1,value:"'Wpisz swoją odpowiedź'"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"input",type:{names:["undefined"]}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/SurveyQuestions/SurveyQuestionTextarea.vue"]};const B=e=>{for(var a="",o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",l=o.length,t=0;t<e;t++)a+=o.charAt(Math.floor(Math.random()*l));return a};export{A as M,V as S,Q as a,z as b,B as r};

package/docs/iframe.html

@@ -510,7 +510,7 @@
 </script>
 <link rel="stylesheet" href="./preview.css">
 
-    <script type="module" crossorigin src="./assets/iframe-B7O_YbfU.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-BvVXUrhW.js"></script>
   </head>
 
   <body>

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1747834978084,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@types/jest":"29.5.13","@vue/vue3-jest":"29.2.2","jest":"29.7.0","jest-environment-jsdom":"29.7.0","ts-jest":"29.0.5"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":2,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}
+{"generatedAt":1747988135977,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@types/jest":"29.5.13","@vue/vue3-jest":"29.2.2","jest":"29.7.0","jest-environment-jsdom":"29.7.0","ts-jest":"29.0.5"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":2,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}

package/lib/js/components/Banner/Banner.consts.ts

@@ -1,3 +1,5 @@
+import { Value } from '../../utils/type.utils';
+
 export const BANNER_COLORS = {
 	DEFAULT: 'default',
 	NEUTRAL: 'neutral',
@@ -8,7 +10,11 @@ export const BANNER_COLORS = {
 	DANGER: 'danger',
 } as const;
 
+export type BannerColor = Value<typeof BANNER_COLORS>;
+
 export const BANNER_LAYOUTS = {
 	HORIZONTAL: 'horizontal',
 	VERTICAL: 'vertical',
 } as const;
+
+export type BannerLayout = Value<typeof BANNER_LAYOUTS>;

package/lib/js/components/Banner/Banner.vue

@@ -305,7 +305,7 @@ import DsButton, {
 import DsDivider, { DIVIDER_PROMINENCES } from '../Divider';
 import DsIcon, { ICONS } from '../Icons/Icon';
 import DsIconButton, { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../Buttons/IconButton';
-import { BANNER_COLORS, BANNER_LAYOUTS } from './Banner.consts';
+import { BANNER_COLORS, BANNER_LAYOUTS, BannerColor, BannerLayout } from './Banner.consts';
 import { defineComponent, toRaw } from 'vue';
 
 export default defineComponent({
@@ -333,7 +333,7 @@ export default defineComponent({
 		color: {
 			type: String,
 			default: BANNER_COLORS.DEFAULT,
-			validator: (color) => Object.values(BANNER_COLORS).includes(color),
+			validator: (color: BannerColor) => Object.values(BANNER_COLORS).includes(color),
 		},
 		title: {
 			type: String,
@@ -342,7 +342,7 @@ export default defineComponent({
 		layout: {
 			type: String,
 			default: BANNER_LAYOUTS.HORIZONTAL,
-			validator: (layout) => Object.values(BANNER_LAYOUTS).includes(layout),
+			validator: (layout: BannerLayout) => Object.values(BANNER_LAYOUTS).includes(layout),
 		},
 		isExpanded: {
 			type: Boolean,

package/lib/js/components/Buttons/Button/Button.consts.ts

@@ -1,15 +1,21 @@
+import { Value } from '../../../utils/type.utils';
+
 export const BUTTON_SIZES = {
 	SMALL: 'small',
 	MEDIUM: 'medium',
 	LARGE: 'large',
 } as const;
 
+export type ButtonSize = Value<typeof BUTTON_SIZES>;
+
 export const BUTTON_TYPES = {
 	FILLED: 'filled',
 	OUTLINED: 'outlined',
 	TEXT: 'text',
 } as const;
 
+export type ButtonType = Value<typeof BUTTON_TYPES>;
+
 export const BUTTON_COLORS = {
 	PRIMARY: 'primary',
 	NEUTRAL: 'neutral',
@@ -18,11 +24,15 @@ export const BUTTON_COLORS = {
 	INVERTED: 'inverted',
 } as const;
 
+export type ButtonColor = Value<typeof BUTTON_COLORS>;
+
 export const BUTTON_RADIUSES = {
 	CAPSULE: 'capsule',
 	ROUNDED: 'rounded',
 } as const;
 
+export type ButtonRadius = Value<typeof BUTTON_RADIUSES>;
+
 export const BUTTON_STATES = {
 	DEFAULT: 'default',
 	HOVERED: 'hovered',
@@ -31,8 +41,12 @@ export const BUTTON_STATES = {
 	LOADING: 'loading',
 } as const;
 
+export type ButtonState = Value<typeof BUTTON_STATES>;
+
 export const BUTTON_ELEVATIONS = {
 	NONE: 'none',
 	X_SMALL: 'x-small',
 	SMALL: 'small',
 } as const;
+
+export type ButtonElevation = Value<typeof BUTTON_ELEVATIONS>;

package/lib/js/components/Buttons/Button/Button.vue

@@ -85,7 +85,7 @@ export default defineComponent({
 			},
 		},
 		color: {
-			type: String,
+			type: [String, null],
 			default: BUTTON_COLORS.PRIMARY,
 			validator(value: Value<typeof ICON_BUTTON_COLORS>) {
 				return Object.values(ICON_BUTTON_COLORS).includes(value);

package/lib/js/components/Buttons/IconButton/IconButton.consts.ts

@@ -1,4 +1,5 @@
 import { BUTTON_TYPES } from '../Button/Button.consts';
+import { Value } from '../../../utils/type.utils';
 
 export const ICON_BUTTON_SIZES = {
 	XX_SMALL: 'xx-small',
@@ -8,17 +9,23 @@ export const ICON_BUTTON_SIZES = {
 	LARGE: 'large',
 } as const;
 
+export type IconButtonSize = Value<typeof ICON_BUTTON_SIZES>;
+
 export const ICON_BUTTON_TYPES = {
 	ICON_ONLY: 'icon-only',
 	OUTLINED: BUTTON_TYPES.OUTLINED,
 	FILLED: BUTTON_TYPES.FILLED,
 } as const;
 
+export type IconButtonType = Value<typeof ICON_BUTTON_TYPES>;
+
 export const ICON_BUTTON_COLOR_SCHEMES = {
 	ALL_IN_COLOR: 'all-in-color',
 	NEUTRAL_LABEL: 'neutral-label',
 } as const;
 
+export type IconButtonColorScheme = Value<typeof ICON_BUTTON_COLOR_SCHEMES>;
+
 export const ICON_BUTTON_COLORS = {
 	PRIMARY: 'primary',
 	NEUTRAL: 'neutral',
@@ -31,6 +38,8 @@ export const ICON_BUTTON_COLORS = {
 	INFO: 'info',
 } as const;
 
+export type IconButtonColor = Value<typeof ICON_BUTTON_COLORS>;
+
 export const ICON_BUTTON_STATES = {
 	DEFAULT: 'default',
 	HOVERED: 'hovered',
@@ -38,3 +47,5 @@ export const ICON_BUTTON_STATES = {
 	DISABLED: 'disabled',
 	LOADING: 'loading',
 } as const;
+
+export type IconButtonState = Value<typeof ICON_BUTTON_STATES>;

package/lib/js/components/Buttons/IconButton/IconButton.vue

@@ -266,6 +266,8 @@ import WnlButton, {
 	BUTTON_ELEVATIONS,
 	BUTTON_RADIUSES,
 	BUTTON_TYPES,
+	ButtonElevation,
+	ButtonRadius,
 } from '../Button';
 import {
 	ICON_BUTTON_COLOR_SCHEMES,
@@ -273,6 +275,10 @@ import {
 	ICON_BUTTON_SIZES,
 	ICON_BUTTON_STATES,
 	ICON_BUTTON_TYPES,
+	IconButtonColor,
+	IconButtonColorScheme,
+	IconButtonSize,
+	IconButtonType,
 } from './IconButton.consts';
 import { Value } from '../../../utils/type.utils';
 import { defineComponent, toRaw } from 'vue';
@@ -296,21 +302,21 @@ export default defineComponent({
 		size: {
 			type: String,
 			default: ICON_BUTTON_SIZES.LARGE,
-			validator(value) {
+			validator(value: IconButtonSize) {
 				return Object.values(ICON_BUTTON_SIZES).includes(value);
 			},
 		},
 		radius: {
 			type: String,
 			default: BUTTON_RADIUSES.CAPSULE,
-			validator(value) {
+			validator(value: ButtonRadius) {
 				return Object.values(BUTTON_RADIUSES).includes(value);
 			},
 		},
 		type: {
 			type: String,
 			default: ICON_BUTTON_TYPES.ICON_ONLY,
-			validator(value) {
+			validator(value: IconButtonType) {
 				return Object.values(ICON_BUTTON_TYPES).includes(value);
 			},
 		},
@@ -324,21 +330,21 @@ export default defineComponent({
 		color: {
 			type: String,
 			default: ICON_BUTTON_COLORS.PRIMARY,
-			validator(value): boolean {
+			validator(value: IconButtonColor) {
 				return Object.values(ICON_BUTTON_COLORS).includes(value);
 			},
 		},
 		colorScheme: {
 			type: String,
 			default: ICON_BUTTON_COLOR_SCHEMES.ALL_IN_COLOR,
-			validator(value): boolean {
+			validator(value: IconButtonColorScheme) {
 				return Object.values(ICON_BUTTON_COLOR_SCHEMES).includes(value);
 			},
 		},
 		elevation: {
 			type: String,
 			default: BUTTON_ELEVATIONS.NONE,
-			validator(value) {
+			validator(value: ButtonElevation) {
 				return Object.values(BUTTON_ELEVATIONS).includes(value);
 			},
 		},
@@ -393,9 +399,9 @@ export default defineComponent({
 			}
 			return this.type;
 		},
-		computedColor(): string | null {
+		computedColor(): string | undefined {
 			if (this.isButtonColor) {
-				return null;
+				return undefined;
 			}
 			if (this.type === ICON_BUTTON_TYPES.ICON_ONLY) {
 				return this.color;

package/lib/js/components/Chip/Chip.consts.ts

@@ -1,8 +1,12 @@
+import { Value } from '../../utils/type.utils';
+
 export const CHIP_SIZES = {
 	X_SMALL: 'x-small',
 	SMALL: 'small',
 } as const;
 
+export type ChipSize = Value<typeof CHIP_SIZES>;
+
 export const CHIP_COLORS = {
 	PRIMARY: 'primary',
 	PRIMARY_STRONG: 'primaryStrong',
@@ -15,12 +19,20 @@ export const CHIP_COLORS = {
 	INFO: 'info',
 } as const;
 
+export const CHIP_DEFAULT_COLOR = CHIP_COLORS.NEUTRAL;
+
+export type ChipColor = Value<typeof CHIP_COLORS>;
+
 export const CHIP_STATES = {
 	DEFAULT: 'default',
 	DISABLED: 'disabled',
 } as const;
 
+export type ChipState = Value<typeof CHIP_STATES>;
+
 export const CHIP_RADIUSES = {
 	CAPSULE: 'capsule',
 	ROUNDED: 'rounded',
 } as const;
+
+export type ChipRadius = Value<typeof CHIP_RADIUSES>;

package/lib/js/components/Chip/Chip.stories.ts

@@ -1,5 +1,11 @@
 import Chip from './Chip.vue';
-import { CHIP_COLORS, CHIP_RADIUSES, CHIP_SIZES, CHIP_STATES } from './Chip.consts';
+import {
+	CHIP_COLORS,
+	CHIP_DEFAULT_COLOR,
+	CHIP_RADIUSES,
+	CHIP_SIZES,
+	CHIP_STATES,
+} from './Chip.consts';
 import { ICONS } from '../Icons/Icon';
 import LogoBadge from '../../../images/logo-badge.svg';
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
@@ -55,7 +61,7 @@ const args = {
 	leftIcon: null,
 	radius: CHIP_RADIUSES.CAPSULE,
 	size: CHIP_SIZES.SMALL,
-	color: CHIP_COLORS.NEUTRAL,
+	color: CHIP_DEFAULT_COLOR,
 	colorHex: '',
 	isRemovable: false,
 	state: CHIP_STATES.DEFAULT,

package/lib/js/components/Chip/Chip.vue

@@ -246,7 +246,17 @@ import IconButton, {
 	ICON_BUTTON_STATES,
 } from '../Buttons/IconButton';
 import Icon, { ICON_SIZES, ICONS } from '../Icons/Icon';
-import { CHIP_COLORS, CHIP_RADIUSES, CHIP_SIZES, CHIP_STATES } from './Chip.consts';
+import {
+	CHIP_COLORS,
+	CHIP_RADIUSES,
+	CHIP_SIZES,
+	CHIP_STATES,
+	CHIP_DEFAULT_COLOR,
+	ChipColor,
+	ChipRadius,
+	ChipSize,
+	ChipState,
+} from './Chip.consts';
 
 const CHIP_ICON_BUTTONS_COLOR_MAP = {
 	[CHIP_COLORS.INVERTED]: ICON_BUTTON_COLORS.PRIMARY,
@@ -282,21 +292,21 @@ export default defineComponent({
 		radius: {
 			type: String,
 			default: CHIP_RADIUSES.CAPSULE,
-			validator(value: Value<typeof CHIP_RADIUSES>) {
+			validator(value: ChipRadius) {
 				return Object.values(CHIP_RADIUSES).includes(value);
 			},
 		},
 		size: {
 			type: String,
 			default: CHIP_SIZES.SMALL,
-			validator(size) {
+			validator(size: ChipSize) {
 				return Object.values(CHIP_SIZES).includes(size);
 			},
 		},
 		color: {
 			type: String,
-			default: CHIP_COLORS.NEUTRAL,
-			validator(color) {
+			default: CHIP_DEFAULT_COLOR,
+			validator(color: ChipColor) {
 				return Object.values(CHIP_COLORS).includes(color);
 			},
 		},
@@ -307,7 +317,7 @@ export default defineComponent({
 		state: {
 			type: String,
 			default: CHIP_STATES.DEFAULT,
-			validator(value: Value<typeof CHIP_STATES>) {
+			validator(value: ChipState) {
 				return Object.values(CHIP_STATES).includes(value);
 			},
 		},

package/lib/js/components/DatePickers/DatePicker/DatePicker.vue

@@ -24,9 +24,9 @@
 				:text="text"
 				:interactive="isInteractive"
 				:additional-text="additionalText"
-				:color="color as TileColors"
+				:color="tileColor"
 				:border-color="borderColor"
-				:state="state as TileStates"
+				:state="tileState"
 				:icon-right="tileIcon"
 				:is-icon-right-hidden-on-mobile="isIconHiddenOnMobile"
 				:eyebrow-text="eyebrowText"
@@ -142,13 +142,13 @@ import { defineComponent, PropType, Ref, ref, toRaw } from 'vue';
 
 import { Instance as DatePickerInstance } from 'flatpickr/dist/types/instance';
 
-import { IconItem, ICONS } from '../../Icons/Icon';
 import DsTile, {
 	TILE_ADDITIONAL_TEXT_MAX_WIDTHS,
 	TILE_BORDER_COLORS,
-	TileColors,
-	TileStates,
+	TileColor,
+	TileState,
 } from '../../Tile';
+import { IconItem, ICONS } from '../../Icons/Icon';
 import DateBox from '../DateBox';
 
 import {
@@ -348,6 +348,12 @@ export default defineComponent({
 		showHelpMessage() {
 			return this.helpMessage !== null;
 		},
+		tileState() {
+			return this.state as TileState;
+		},
+		tileColor() {
+			return this.color as TileColor;
+		},
 	},
 	methods: {
 		async bindFlatpickrInstance() {

package/lib/js/components/Drawer/Drawer.vue

@@ -81,7 +81,7 @@ export default defineComponent({
 		position: {
 			type: String as PropType<DrawerPosition>,
 			default: DRAWER_POSITIONS.RIGHT,
-			validator(position) {
+			validator(position: DrawerPosition) {
 				return Object.values(DRAWER_POSITIONS).includes(position);
 			},
 		},

package/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue

@@ -59,7 +59,7 @@ export default defineComponent({
 		state: {
 			type: String as PropType<DrawerListItemState>,
 			default: DRAWER_LIST_ITEM_STATES.DEFAULT,
-			validator(state) {
+			validator(state: DrawerListItemState) {
 				return Object.values(DRAWER_LIST_ITEM_STATES).includes(state);
 			},
 		},

package/lib/js/components/Drawer/DrawerSection/DrawerSection.vue

@@ -33,6 +33,7 @@ import SectionHeader, {
 	SECTION_HEADER_ICON_COLORS,
 	SECTION_HEADER_SIZES,
 	SectionHeaderIconColor,
+	SectionHeaderSize,
 } from '../../Headers/SectionHeader';
 import { defineComponent, toRaw } from 'vue';
 
@@ -85,7 +86,7 @@ export default defineComponent({
 		size: {
 			type: String,
 			default: SECTION_HEADER_SIZES.XX_SMALL,
-			validator(size) {
+			validator(size: SectionHeaderSize) {
 				return Object.values(SECTION_HEADER_SIZES).includes(size);
 			},
 		},

package/lib/js/components/Dropdown/Dropdown.consts.ts

@@ -1,15 +1,23 @@
+import { Value } from '../../utils/type.utils';
+
 export const DROPDOWN_TRIGGER_ACTIONS = {
 	CLICK: 'click',
 	HOVER: 'hover',
 } as const;
 
+export type DropdownTriggerAction = Value<typeof DROPDOWN_TRIGGER_ACTIONS>;
+
 export const DROPDOWN_RADIUSES = {
 	TOP: 'top',
 	BOTTOM: 'bottom',
 	BOTH: 'both',
 } as const;
 
+export type DropdownRadius = Value<typeof DROPDOWN_RADIUSES>;
+
 export const DROPDOWN_PLACEMENTS = {
 	BOTTOM_START: 'bottom-start',
 	BOTTOM_END: 'bottom-end',
 } as const;
+
+export type DropdownPlacement = Value<typeof DROPDOWN_PLACEMENTS>;

package/lib/js/components/Dropdown/Dropdown.vue

@@ -85,6 +85,9 @@ import {
 	DROPDOWN_PLACEMENTS,
 	DROPDOWN_RADIUSES,
 	DROPDOWN_TRIGGER_ACTIONS,
+	DropdownPlacement,
+	DropdownRadius,
+	DropdownTriggerAction,
 } from './Dropdown.consts';
 
 import { defineComponent } from 'vue';
@@ -110,21 +113,21 @@ export default defineComponent({
 		triggerAction: {
 			type: String,
 			default: DROPDOWN_TRIGGER_ACTIONS.CLICK,
-			validator(triggerAction) {
+			validator(triggerAction: DropdownTriggerAction) {
 				return Object.values(DROPDOWN_TRIGGER_ACTIONS).includes(triggerAction);
 			},
 		},
 		radius: {
 			type: String,
 			default: DROPDOWN_RADIUSES.BOTH,
-			validate(radius) {
+			validate(radius: DropdownRadius) {
 				return Object.values(DROPDOWN_RADIUSES).includes(radius);
 			},
 		},
 		placement: {
 			type: String,
 			default: DROPDOWN_PLACEMENTS.BOTTOM_START,
-			validate(placement) {
+			validate(placement: DropdownPlacement) {
 				return Object.values(DROPDOWN_PLACEMENTS).includes(placement);
 			},
 		},

package/lib/js/components/Form/Checkbox/Checkbox.vue

@@ -27,7 +27,7 @@ export default defineComponent({
 		size: {
 			type: String as PropType<CheckboxSize>,
 			default: CHECKBOX_SIZE.SMALL,
-			validator(size) {
+			validator(size: CheckboxSize) {
 				return Object.values(CHECKBOX_SIZE).includes(size);
 			},
 		},
@@ -42,7 +42,7 @@ export default defineComponent({
 		state: {
 			type: String as PropType<CheckboxState>,
 			default: CHECKBOX_STATE.DEFAULT,
-			validator(state) {
+			validator(state: CheckboxState) {
 				return Object.values(CHECKBOX_STATE).includes(state);
 			},
 		},

package/lib/js/components/Form/RadioButton/RadioButton.vue

@@ -32,7 +32,7 @@ export default defineComponent({
 		size: {
 			type: String as PropType<RadioButtonSize>,
 			default: RADIO_BUTTON_SIZE.SMALL,
-			validator(size) {
+			validator(size: RadioButtonSize) {
 				return Object.values(RADIO_BUTTON_SIZE).includes(size);
 			},
 		},
@@ -47,7 +47,7 @@ export default defineComponent({
 		state: {
 			type: String as PropType<RadioButtonState>,
 			default: RADIO_BUTTON_STATE.DEFAULT,
-			validator(state) {
+			validator(state: RadioButtonState) {
 				return Object.values(RADIO_BUTTON_STATE).includes(state);
 			},
 		},

package/lib/js/components/Form/SelectionControl/SelectionControl.vue

@@ -247,7 +247,7 @@ export default defineComponent({
 		size: {
 			type: String as PropType<SelectionControlSize>,
 			default: SELECTION_CONTROL_SIZE.SMALL,
-			validator(size) {
+			validator(size: SelectionControlSize) {
 				return Object.values(SELECTION_CONTROL_SIZE).includes(size);
 			},
 		},
@@ -262,7 +262,7 @@ export default defineComponent({
 		state: {
 			type: String as PropType<SelectionControlState>,
 			default: SELECTION_CONTROL_STATE.DEFAULT,
-			validator(state) {
+			validator(state: SelectionControlState) {
 				return Object.values(SELECTION_CONTROL_STATE).includes(state);
 			},
 		},
@@ -283,7 +283,7 @@ export default defineComponent({
 		type: {
 			type: String as PropType<SelectionControlType>,
 			required: true,
-			validator(type) {
+			validator(type: SelectionControlType) {
 				return Object.values(SELECTION_CONTROL_TYPE).includes(type);
 			},
 		},

package/lib/js/components/Headers/OverlayHeader/OverlayHeader.consts.ts

@@ -1,3 +1,5 @@
+import { Value } from '../../../utils/type.utils';
+
 export const OVERLAY_HEADER_BORDER_COLORS = {
 	NEUTRAL_GHOST: 'neutralGhost',
 	NEUTRAL: 'neutral',
@@ -6,7 +8,11 @@ export const OVERLAY_HEADER_BORDER_COLORS = {
 	WARNING: 'warning',
 } as const;
 
+export type OverlayHeaderBorderColor = Value<typeof OVERLAY_HEADER_BORDER_COLORS>;
+
 export const OVERLAY_HEADER_STATES = {
 	DEFAULT: 'default',
 	LOADING: 'loading',
 } as const;
+
+export type OverlayHeaderState = Value<typeof OVERLAY_HEADER_STATES>;

package/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue

@@ -325,7 +325,11 @@ import {
 	ICON_BUTTON_STATES,
 } from '../../Buttons/IconButton';
 import { ICONS } from '../../Icons/Icon';
-import { OVERLAY_HEADER_BORDER_COLORS, OVERLAY_HEADER_STATES } from './OverlayHeader.consts';
+import {
+	OVERLAY_HEADER_BORDER_COLORS,
+	OVERLAY_HEADER_STATES,
+	OverlayHeaderBorderColor,
+} from './OverlayHeader.consts';
 import { Value } from '../../../utils/type.utils';
 import { isElementEditable } from '../../../utils/shortcut-keys';
 import { toRaw } from 'vue';
@@ -351,7 +355,8 @@ export default defineComponent({
 		borderColor: {
 			type: String,
 			default: OVERLAY_HEADER_BORDER_COLORS.NEUTRAL_GHOST,
-			validator: (value) => Object.values(OVERLAY_HEADER_BORDER_COLORS).includes(value),
+			validator: (value: OverlayHeaderBorderColor) =>
+				Object.values(OVERLAY_HEADER_BORDER_COLORS).includes(value),
 		},
 		isTitleInteractive: {
 			type: Boolean,

package/lib/js/components/Headers/PageHeader/PageHeader.consts.ts

@@ -1,4 +1,8 @@
+import { Value } from '../../../utils/type.utils';
+
 export const PAGE_HEADER_MOBILE_LAYOUTS = {
 	VERTICAL: 'vertical',
 	HORIZONTAL: 'horizontal',
 } as const;
+
+export type PageHeaderMobileLayout = Value<typeof PAGE_HEADER_MOBILE_LAYOUTS>;