@bethinkpl/design-system 26.11.1 → 26.12.0

package/docs/assets/{string-ybdEWR3p.js → string-WbDRKdc6.js}

@@ -1 +1 @@
-import{a as h,I as y,b as I}from"./Icon-D72drrb6.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-Dtb7OFDy.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-B5cbsFW6.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-DdYOFeJw.js"></script>
   </head>
 
   <body>

package/docs/preview.css

@@ -471,6 +471,26 @@ table {
   --theme-800-rgb: 9, 93, 104;
   --theme-900: #0a4c58;
   --theme-900-rgb: 10, 76, 88;
+  --raw-yellow-50: #fffae3;
+  --raw-yellow-50-rgb: 255, 250, 227;
+  --raw-yellow-100: #fff5c4;
+  --raw-yellow-100-rgb: 255, 245, 196;
+  --raw-yellow-200: #feec93;
+  --raw-yellow-200-rgb: 254, 236, 147;
+  --raw-yellow-300: #fee56d;
+  --raw-yellow-300-rgb: 254, 229, 109;
+  --raw-yellow-400: #fdde44;
+  --raw-yellow-400-rgb: 253, 222, 68;
+  --raw-yellow-500: #fad000;
+  --raw-yellow-500-rgb: 250, 208, 0;
+  --raw-yellow-600: #edbe00;
+  --raw-yellow-600-rgb: 237, 190, 0;
+  --raw-yellow-700: #cc9c00;
+  --raw-yellow-700-rgb: 204, 156, 0;
+  --raw-yellow-800: #a37800;
+  --raw-yellow-800-rgb: 163, 120, 0;
+  --raw-yellow-900: #7d5a00;
+  --raw-yellow-900-rgb: 125, 90, 0;
 }
 
 .-ds-theme-wnl {
@@ -1351,6 +1371,7 @@ table {
 .ds-icon {
   align-items: center;
   display: inline-flex;
+  transform: rotate(var(--rotate));
   transition: transform 0.15s;
   /* stylelint-disable selector-class-pattern */
   /* stylelint-disable selector-class-pattern */
@@ -1370,18 +1391,6 @@ table {
   min-height: 40px;
   min-width: 40px;
 }
-.ds-icon.-ds-rotate90 {
-  transform: rotate(90deg);
-}
-.ds-icon.-ds-rotate180 {
-  transform: rotate(180deg);
-}
-.ds-icon.-ds-rotate270 {
-  transform: rotate(270deg);
-}
-.ds-icon.-ds-no-transtition {
-  transition: initial;
-}
 .ds-icon.-ds-spin {
   animation: a-fadeIn 300ms, a-spinAround 1s infinite linear;
 }
@@ -1996,6 +2005,44 @@ table {
   --color-accent-border-weak-focused: var(--raw-violet-300);
   --color-accent-border-weak-disabled: var(--raw-violet-100);
   --color-accent-ripple: rgba(var(--raw-violet-500-rgb), 0.12);
+  --color-highlight-icon: var(--raw-yellow-500);
+  --color-highlight-icon-hovered: var(--raw-yellow-700);
+  --color-highlight-icon-focused: var(--raw-yellow-700);
+  --color-highlight-icon-disabled: var(--raw-yellow-200);
+  --color-highlight-background-strong: var(--raw-yellow-500);
+  --color-highlight-background-strong-hovered: var(--raw-yellow-600);
+  --color-highlight-background-strong-focused: var(--raw-yellow-600);
+  --color-highlight-background-strong-pressed: var(--raw-yellow-700);
+  --color-highlight-background-strong-disabled: var(--raw-yellow-200);
+  --color-highlight-background-medium: var(--raw-yellow-100);
+  --color-highlight-background-medium-hovered: var(--raw-yellow-200);
+  --color-highlight-background-medium-focused: var(--raw-yellow-200);
+  --color-highlight-background-medium-pressed: var(--raw-yellow-300);
+  --color-highlight-background-medium-disabled: var(--raw-yellow-50);
+  --color-highlight-background: var(--raw-yellow-50);
+  --color-highlight-background-hovered: var(--raw-yellow-100);
+  --color-highlight-background-focused: var(--raw-yellow-100);
+  --color-highlight-background-pressed: var(--raw-yellow-200);
+  --color-highlight-background-disabled: var(--raw-yellow-50);
+  --color-highlight-background-weak: var(--raw-white);
+  --color-highlight-background-weak-hovered: var(--raw-yellow-100);
+  --color-highlight-background-weak-focused: var(--raw-yellow-100);
+  --color-highlight-background-weak-pressed: var(--raw-yellow-200);
+  --color-highlight-background-weak-disabled: var(--raw-white);
+  --color-highlight-background-ghost: rgba(var(--raw-yellow-500-rgb), 0);
+  --color-highlight-background-ghost-hovered: rgba(var(--raw-yellow-500-rgb), 0.12);
+  --color-highlight-background-ghost-focused: rgba(var(--raw-yellow-500-rgb), 0.12);
+  --color-highlight-background-ghost-pressed: rgba(var(--raw-yellow-500-rgb), 0.18);
+  --color-highlight-background-ghost-disabled: rgba(var(--raw-yellow-500-rgb), 0);
+  --color-highlight-border: var(--raw-yellow-500);
+  --color-highlight-border-hovered: var(--raw-yellow-700);
+  --color-highlight-border-focused: var(--raw-yellow-700);
+  --color-highlight-border-disabled: var(--raw-yellow-200);
+  --color-highlight-border-weak: var(--raw-yellow-100);
+  --color-highlight-border-weak-hovered: var(--raw-yellow-300);
+  --color-highlight-border-weak-focused: var(--raw-yellow-300);
+  --color-highlight-border-weak-disabled: var(--raw-yellow-100);
+  --color-highlight-ripple: rgba(var(--raw-yellow-500-rgb), 0.12);
 }
 
 .-ds-theme-wnl {
@@ -2335,6 +2382,26 @@ html ::-webkit-scrollbar-track {
   --theme-800-rgb: 9, 93, 104;
   --theme-900: #0a4c58;
   --theme-900-rgb: 10, 76, 88;
+  --raw-yellow-50: #fffae3;
+  --raw-yellow-50-rgb: 255, 250, 227;
+  --raw-yellow-100: #fff5c4;
+  --raw-yellow-100-rgb: 255, 245, 196;
+  --raw-yellow-200: #feec93;
+  --raw-yellow-200-rgb: 254, 236, 147;
+  --raw-yellow-300: #fee56d;
+  --raw-yellow-300-rgb: 254, 229, 109;
+  --raw-yellow-400: #fdde44;
+  --raw-yellow-400-rgb: 253, 222, 68;
+  --raw-yellow-500: #fad000;
+  --raw-yellow-500-rgb: 250, 208, 0;
+  --raw-yellow-600: #edbe00;
+  --raw-yellow-600-rgb: 237, 190, 0;
+  --raw-yellow-700: #cc9c00;
+  --raw-yellow-700-rgb: 204, 156, 0;
+  --raw-yellow-800: #a37800;
+  --raw-yellow-800-rgb: 163, 120, 0;
+  --raw-yellow-900: #7d5a00;
+  --raw-yellow-900-rgb: 125, 90, 0;
 }
 
 .-ds-theme-wnl {
@@ -2831,6 +2898,44 @@ html ::-webkit-scrollbar-track {
   --color-accent-border-weak-focused: var(--raw-violet-300);
   --color-accent-border-weak-disabled: var(--raw-violet-100);
   --color-accent-ripple: rgba(var(--raw-violet-500-rgb), 0.12);
+  --color-highlight-icon: var(--raw-yellow-500);
+  --color-highlight-icon-hovered: var(--raw-yellow-700);
+  --color-highlight-icon-focused: var(--raw-yellow-700);
+  --color-highlight-icon-disabled: var(--raw-yellow-200);
+  --color-highlight-background-strong: var(--raw-yellow-500);
+  --color-highlight-background-strong-hovered: var(--raw-yellow-600);
+  --color-highlight-background-strong-focused: var(--raw-yellow-600);
+  --color-highlight-background-strong-pressed: var(--raw-yellow-700);
+  --color-highlight-background-strong-disabled: var(--raw-yellow-200);
+  --color-highlight-background-medium: var(--raw-yellow-100);
+  --color-highlight-background-medium-hovered: var(--raw-yellow-200);
+  --color-highlight-background-medium-focused: var(--raw-yellow-200);
+  --color-highlight-background-medium-pressed: var(--raw-yellow-300);
+  --color-highlight-background-medium-disabled: var(--raw-yellow-50);
+  --color-highlight-background: var(--raw-yellow-50);
+  --color-highlight-background-hovered: var(--raw-yellow-100);
+  --color-highlight-background-focused: var(--raw-yellow-100);
+  --color-highlight-background-pressed: var(--raw-yellow-200);
+  --color-highlight-background-disabled: var(--raw-yellow-50);
+  --color-highlight-background-weak: var(--raw-white);
+  --color-highlight-background-weak-hovered: var(--raw-yellow-100);
+  --color-highlight-background-weak-focused: var(--raw-yellow-100);
+  --color-highlight-background-weak-pressed: var(--raw-yellow-200);
+  --color-highlight-background-weak-disabled: var(--raw-white);
+  --color-highlight-background-ghost: rgba(var(--raw-yellow-500-rgb), 0);
+  --color-highlight-background-ghost-hovered: rgba(var(--raw-yellow-500-rgb), 0.12);
+  --color-highlight-background-ghost-focused: rgba(var(--raw-yellow-500-rgb), 0.12);
+  --color-highlight-background-ghost-pressed: rgba(var(--raw-yellow-500-rgb), 0.18);
+  --color-highlight-background-ghost-disabled: rgba(var(--raw-yellow-500-rgb), 0);
+  --color-highlight-border: var(--raw-yellow-500);
+  --color-highlight-border-hovered: var(--raw-yellow-700);
+  --color-highlight-border-focused: var(--raw-yellow-700);
+  --color-highlight-border-disabled: var(--raw-yellow-200);
+  --color-highlight-border-weak: var(--raw-yellow-100);
+  --color-highlight-border-weak-hovered: var(--raw-yellow-300);
+  --color-highlight-border-weak-focused: var(--raw-yellow-300);
+  --color-highlight-border-weak-disabled: var(--raw-yellow-100);
+  --color-highlight-ripple: rgba(var(--raw-yellow-500-rgb), 0.12);
 }
 
 .-ds-theme-wnl {

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1742560458941,"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":1743152637500,"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/Icons/Icon/Icon.stories.ts

@@ -45,10 +45,6 @@ const argTypes = {
 		control: 'select',
 		options: Object.keys(ICONS),
 	},
-	rotation: {
-		control: 'select',
-		options: [null, 90, 180, 270],
-	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;
@@ -72,7 +68,7 @@ const StoryAllIconsTemplate: StoryFn<typeof Icon> = (args) => ({
 	template:
 		'<div class="sbIconList">' +
 		'<div v-for="(icon, iconName) in ICONS" :key="iconName" class="sbIconList__icon">' +
-		'<icon :icon="icon" />' +
+		'<icon :icon="icon" :size="size" :touchable="touchable" :spinning="spinning" :rotation="rotation" :flipped-vertical="flippedVertical" :flipped-horizontal="flippedHorizontal" />' +
 		'<div>{{iconName}}</div>' +
 		'</div>' +
 		'</div>',

package/lib/js/components/Icons/Icon/Icon.vue

@@ -6,9 +6,9 @@
 			'-ds-spin': spinning,
 			'-ds-flipped-vertical': flippedVertical,
 			'-ds-flipped-horizontal': flippedHorizontal,
-			[rotationClass]: rotationClass,
 			[sizeClassName]: true,
 		}"
+		:style="{ '--rotate': `${rotation ?? 0}deg` }"
 	>
 		<font-awesome-icon v-if="isFontawesomeIcon" :icon="icon" />
 		<component :is="icon" v-else />
@@ -46,9 +46,6 @@ export default defineComponent({
 		rotation: {
 			type: Number,
 			default: null,
-			validator(value: number) {
-				return [90, 180, 270].includes(value);
-			},
 		},
 		flippedVertical: {
 			type: Boolean,
@@ -74,13 +71,6 @@ export default defineComponent({
 		isFontawesomeIcon() {
 			return 'iconName' in this.icon;
 		},
-		rotationClass() {
-			if (this.rotation === null) {
-				return null;
-			}
-
-			return `-ds-rotate${this.rotation}`;
-		},
 	},
 });
 </script>

package/lib/js/icons/fontawesome.ts

@@ -195,6 +195,7 @@ import { faStethoscope } from '@fortawesome/pro-regular-svg-icons/faStethoscope'
 import { faStopwatch as fasStopwach } from '@fortawesome/pro-solid-svg-icons/faStopwatch';
 import { faThumbsUp as fasThumbsUp } from '@fortawesome/pro-solid-svg-icons/faThumbsUp';
 import { faThumbtack as fasThumbtack } from '@fortawesome/pro-solid-svg-icons/faThumbtack';
+import { faThumbtack } from '@fortawesome/pro-regular-svg-icons/faThumbtack';
 import { faTriangleExclamation as fasTriangleExclamation } from '@fortawesome/pro-solid-svg-icons/faTriangleExclamation';
 import { faUserDoctor as fasUserDoctor } from '@fortawesome/pro-solid-svg-icons/faUserDoctor';
 import { faVideo as fasVideo } from '@fortawesome/pro-solid-svg-icons/faVideo';
@@ -400,6 +401,7 @@ export const FONTAWESOME_ICONS = {
 	FA_TEXT_SLASH: faTextSlash,
 	FA_THUMBS_UP: faThumbsUp,
 	FA_THUMBS_UP_SOLID: fasThumbsUp,
+	FA_THUMBTACK: faThumbtack,
 	FA_THUMBTACK_SOLID: fasThumbtack,
 	FA_TRASH_CAN: faTrashCan,
 	FA_TREE_PALM: faTreePalm,

package/lib/styles/components/_icons.scss

@@ -3,6 +3,7 @@
 .ds-icon {
 	align-items: center;
 	display: inline-flex;
+	transform: rotate(var(--rotate));
 	transition: transform 0.15s;
 
 	&.-ds-touchable {
@@ -14,22 +15,6 @@
 		min-width: $min-touchable-size;
 	}
 
-	&.-ds-rotate90 {
-		transform: rotate(90deg);
-	}
-
-	&.-ds-rotate180 {
-		transform: rotate(180deg);
-	}
-
-	&.-ds-rotate270 {
-		transform: rotate(270deg);
-	}
-
-	&.-ds-no-transtition {
-		transition: initial;
-	}
-
 	&.-ds-spin {
 		animation: $animation-fade-in, $animation-spin;
 	}

package/lib/styles/settings/colors/_raw.json

@@ -1 +1 @@
-{"default":[{"id":"_raw.scss_black","label":"black","value":"#0C1726"},{"id":"_raw.scss_white","label":"white","value":"#FFF"}],"gray":[{"id":"_raw.scss_gray-50","label":"gray-50","value":"#F7F7F9"},{"id":"_raw.scss_gray-100","label":"gray-100","value":"#F1F2F6"},{"id":"_raw.scss_gray-200","label":"gray-200","value":"#E5E7ED"},{"id":"_raw.scss_gray-300","label":"gray-300","value":"#C6CBD7"},{"id":"_raw.scss_gray-400","label":"gray-400","value":"#A8AFC0"},{"id":"_raw.scss_gray-500","label":"gray-500","value":"#8992A7"},{"id":"_raw.scss_gray-600","label":"gray-600","value":"#767F95"},{"id":"_raw.scss_gray-700","label":"gray-700","value":"#636C84"},{"id":"_raw.scss_gray-800","label":"gray-800","value":"#4A5269"},{"id":"_raw.scss_gray-900","label":"gray-900","value":"#343C50"}],"green":[{"id":"_raw.scss_green-50","label":"green-50","value":"#E9F7F0"},{"id":"_raw.scss_green-100","label":"green-100","value":"#D7F0E4"},{"id":"_raw.scss_green-200","label":"green-200","value":"#A2DCC1"},{"id":"_raw.scss_green-300","label":"green-300","value":"#5FC594"},{"id":"_raw.scss_green-400","label":"green-400","value":"#18A85F"},{"id":"_raw.scss_green-500","label":"green-500","value":"#16995A"},{"id":"_raw.scss_green-600","label":"green-600","value":"#158753"},{"id":"_raw.scss_green-700","label":"green-700","value":"#14744B"},{"id":"_raw.scss_green-800","label":"green-800","value":"#126344"},{"id":"_raw.scss_green-900","label":"green-900","value":"#11513D"}],"gold":[{"id":"_raw.scss_gold-50","label":"gold-50","value":"#FFF4E2"},{"id":"_raw.scss_gold-100","label":"gold-100","value":"#FFEAC5"},{"id":"_raw.scss_gold-200","label":"gold-200","value":"#FFD690"},{"id":"_raw.scss_gold-300","label":"gold-300","value":"#FBC358"},{"id":"_raw.scss_gold-400","label":"gold-400","value":"#F4AF29"},{"id":"_raw.scss_gold-500","label":"gold-500","value":"#EF9B15"},{"id":"_raw.scss_gold-600","label":"gold-600","value":"#E68D09"},{"id":"_raw.scss_gold-700","label":"gold-700","value":"#C97B0F"},{"id":"_raw.scss_gold-800","label":"gold-800","value":"#9D6213"},{"id":"_raw.scss_gold-900","label":"gold-900","value":"#865314"}],"olive":[{"id":"_raw.scss_olive-50","label":"olive-50","value":"#EEF6E3"},{"id":"_raw.scss_olive-100","label":"olive-100","value":"#E0EED1"},{"id":"_raw.scss_olive-200","label":"olive-200","value":"#C7E1AB"},{"id":"_raw.scss_olive-300","label":"olive-300","value":"#A5CF76"},{"id":"_raw.scss_olive-400","label":"olive-400","value":"#8ABD4D"},{"id":"_raw.scss_olive-500","label":"olive-500","value":"#72AD34"},{"id":"_raw.scss_olive-600","label":"olive-600","value":"#5F972F"},{"id":"_raw.scss_olive-700","label":"olive-700","value":"#4D7E26"},{"id":"_raw.scss_olive-800","label":"olive-800","value":"#35571B"},{"id":"_raw.scss_olive-900","label":"olive-900","value":"#263F13"}],"orange":[{"id":"_raw.scss_orange-50","label":"orange-50","value":"#FDEFEC"},{"id":"_raw.scss_orange-100","label":"orange-100","value":"#FBE1DC"},{"id":"_raw.scss_orange-200","label":"orange-200","value":"#F6BCB0"},{"id":"_raw.scss_orange-300","label":"orange-300","value":"#EF8772"},{"id":"_raw.scss_orange-400","label":"orange-400","value":"#E85335"},{"id":"_raw.scss_orange-500","label":"orange-500","value":"#E43C1A"},{"id":"_raw.scss_orange-600","label":"orange-600","value":"#D43718"},{"id":"_raw.scss_orange-700","label":"orange-700","value":"#BA3115"},{"id":"_raw.scss_orange-800","label":"orange-800","value":"#A02A12"},{"id":"_raw.scss_orange-900","label":"orange-900","value":"#85230F"}],"red":[{"id":"_raw.scss_red-50","label":"red-50","value":"#FCEEF0"},{"id":"_raw.scss_red-100","label":"red-100","value":"#FAE3E5"},{"id":"_raw.scss_red-200","label":"red-200","value":"#F4BDC1"},{"id":"_raw.scss_red-300","label":"red-300","value":"#EC868E"},{"id":"_raw.scss_red-400","label":"red-400","value":"#E24956"},{"id":"_raw.scss_red-500","label":"red-500","value":"#DD2A3A"},{"id":"_raw.scss_red-600","label":"red-600","value":"#CA1E2E"},{"id":"_raw.scss_red-700","label":"red-700","value":"#B41E2D"},{"id":"_raw.scss_red-800","label":"red-800","value":"#9F1D2C"},{"id":"_raw.scss_red-900","label":"red-900","value":"#831C2B"}],"blue":[{"id":"_raw.scss_blue-50","label":"blue-50","value":"#E6F4FA"},{"id":"_raw.scss_blue-100","label":"blue-100","value":"#CDE8F5"},{"id":"_raw.scss_blue-200","label":"blue-200","value":"#9FD4EC"},{"id":"_raw.scss_blue-300","label":"blue-300","value":"#62ADD5"},{"id":"_raw.scss_blue-400","label":"blue-400","value":"#308BBF"},{"id":"_raw.scss_blue-500","label":"blue-500","value":"#1779B5"},{"id":"_raw.scss_blue-600","label":"blue-600","value":"#0C6CA8"},{"id":"_raw.scss_blue-700","label":"blue-700","value":"#0C6095"},{"id":"_raw.scss_blue-800","label":"blue-800","value":"#0C5685"},{"id":"_raw.scss_blue-900","label":"blue-900","value":"#0C4870"}],"violet":[{"id":"_raw.scss_violet-50","label":"violet-50","value":"#F4F1F8"},{"id":"_raw.scss_violet-100","label":"violet-100","value":"#E6DEEE"},{"id":"_raw.scss_violet-200","label":"violet-200","value":"#CEBFDE"},{"id":"_raw.scss_violet-300","label":"violet-300","value":"#AF97C8"},{"id":"_raw.scss_violet-400","label":"violet-400","value":"#9271B5"},{"id":"_raw.scss_violet-500","label":"violet-500","value":"#7E57A7"},{"id":"_raw.scss_violet-600","label":"violet-600","value":"#72499B"},{"id":"_raw.scss_violet-700","label":"violet-700","value":"#643D8C"},{"id":"_raw.scss_violet-800","label":"violet-800","value":"#56367B"},{"id":"_raw.scss_violet-900","label":"violet-900","value":"#472F6B"}],"indigo":[{"id":"_raw.scss_indigo-50","label":"indigo-50","value":"#F0F1FD"},{"id":"_raw.scss_indigo-100","label":"indigo-100","value":"#E4E5FB"},{"id":"_raw.scss_indigo-200","label":"indigo-200","value":"#BFC2F5"},{"id":"_raw.scss_indigo-300","label":"indigo-300","value":"#989DEE"},{"id":"_raw.scss_indigo-400","label":"indigo-400","value":"#7279E6"},{"id":"_raw.scss_indigo-500","label":"indigo-500","value":"#666ED0"},{"id":"_raw.scss_indigo-600","label":"indigo-600","value":"#5D64BE"},{"id":"_raw.scss_indigo-700","label":"indigo-700","value":"#5058A6"},{"id":"_raw.scss_indigo-800","label":"indigo-800","value":"#454D90"},{"id":"_raw.scss_indigo-900","label":"indigo-900","value":"#384179"}],"theme":[{"id":"_raw.scss_theme-50","label":"theme-50","value":"#E8F6F6"},{"id":"_raw.scss_theme-100","label":"theme-100","value":"#D5EEEF"},{"id":"_raw.scss_theme-200","label":"theme-200","value":"#A6DCDE"},{"id":"_raw.scss_theme-300","label":"theme-300","value":"#5BBDC1"},{"id":"_raw.scss_theme-400","label":"theme-400","value":"#0D9EA4"},{"id":"_raw.scss_theme-500","label":"theme-500","value":"#078F96"},{"id":"_raw.scss_theme-600","label":"theme-600","value":"#088289"},{"id":"_raw.scss_theme-700","label":"theme-700","value":"#096C76"},{"id":"_raw.scss_theme-800","label":"theme-800","value":"#095D68"},{"id":"_raw.scss_theme-900","label":"theme-900","value":"#0A4C58"}]}
+{"default":[{"id":"_raw.scss_black","label":"black","value":"#0C1726"},{"id":"_raw.scss_white","label":"white","value":"#FFF"}],"gray":[{"id":"_raw.scss_gray-50","label":"gray-50","value":"#F7F7F9"},{"id":"_raw.scss_gray-100","label":"gray-100","value":"#F1F2F6"},{"id":"_raw.scss_gray-200","label":"gray-200","value":"#E5E7ED"},{"id":"_raw.scss_gray-300","label":"gray-300","value":"#C6CBD7"},{"id":"_raw.scss_gray-400","label":"gray-400","value":"#A8AFC0"},{"id":"_raw.scss_gray-500","label":"gray-500","value":"#8992A7"},{"id":"_raw.scss_gray-600","label":"gray-600","value":"#767F95"},{"id":"_raw.scss_gray-700","label":"gray-700","value":"#636C84"},{"id":"_raw.scss_gray-800","label":"gray-800","value":"#4A5269"},{"id":"_raw.scss_gray-900","label":"gray-900","value":"#343C50"}],"green":[{"id":"_raw.scss_green-50","label":"green-50","value":"#E9F7F0"},{"id":"_raw.scss_green-100","label":"green-100","value":"#D7F0E4"},{"id":"_raw.scss_green-200","label":"green-200","value":"#A2DCC1"},{"id":"_raw.scss_green-300","label":"green-300","value":"#5FC594"},{"id":"_raw.scss_green-400","label":"green-400","value":"#18A85F"},{"id":"_raw.scss_green-500","label":"green-500","value":"#16995A"},{"id":"_raw.scss_green-600","label":"green-600","value":"#158753"},{"id":"_raw.scss_green-700","label":"green-700","value":"#14744B"},{"id":"_raw.scss_green-800","label":"green-800","value":"#126344"},{"id":"_raw.scss_green-900","label":"green-900","value":"#11513D"}],"gold":[{"id":"_raw.scss_gold-50","label":"gold-50","value":"#FFF4E2"},{"id":"_raw.scss_gold-100","label":"gold-100","value":"#FFEAC5"},{"id":"_raw.scss_gold-200","label":"gold-200","value":"#FFD690"},{"id":"_raw.scss_gold-300","label":"gold-300","value":"#FBC358"},{"id":"_raw.scss_gold-400","label":"gold-400","value":"#F4AF29"},{"id":"_raw.scss_gold-500","label":"gold-500","value":"#EF9B15"},{"id":"_raw.scss_gold-600","label":"gold-600","value":"#E68D09"},{"id":"_raw.scss_gold-700","label":"gold-700","value":"#C97B0F"},{"id":"_raw.scss_gold-800","label":"gold-800","value":"#9D6213"},{"id":"_raw.scss_gold-900","label":"gold-900","value":"#865314"}],"olive":[{"id":"_raw.scss_olive-50","label":"olive-50","value":"#EEF6E3"},{"id":"_raw.scss_olive-100","label":"olive-100","value":"#E0EED1"},{"id":"_raw.scss_olive-200","label":"olive-200","value":"#C7E1AB"},{"id":"_raw.scss_olive-300","label":"olive-300","value":"#A5CF76"},{"id":"_raw.scss_olive-400","label":"olive-400","value":"#8ABD4D"},{"id":"_raw.scss_olive-500","label":"olive-500","value":"#72AD34"},{"id":"_raw.scss_olive-600","label":"olive-600","value":"#5F972F"},{"id":"_raw.scss_olive-700","label":"olive-700","value":"#4D7E26"},{"id":"_raw.scss_olive-800","label":"olive-800","value":"#35571B"},{"id":"_raw.scss_olive-900","label":"olive-900","value":"#263F13"}],"orange":[{"id":"_raw.scss_orange-50","label":"orange-50","value":"#FDEFEC"},{"id":"_raw.scss_orange-100","label":"orange-100","value":"#FBE1DC"},{"id":"_raw.scss_orange-200","label":"orange-200","value":"#F6BCB0"},{"id":"_raw.scss_orange-300","label":"orange-300","value":"#EF8772"},{"id":"_raw.scss_orange-400","label":"orange-400","value":"#E85335"},{"id":"_raw.scss_orange-500","label":"orange-500","value":"#E43C1A"},{"id":"_raw.scss_orange-600","label":"orange-600","value":"#D43718"},{"id":"_raw.scss_orange-700","label":"orange-700","value":"#BA3115"},{"id":"_raw.scss_orange-800","label":"orange-800","value":"#A02A12"},{"id":"_raw.scss_orange-900","label":"orange-900","value":"#85230F"}],"red":[{"id":"_raw.scss_red-50","label":"red-50","value":"#FCEEF0"},{"id":"_raw.scss_red-100","label":"red-100","value":"#FAE3E5"},{"id":"_raw.scss_red-200","label":"red-200","value":"#F4BDC1"},{"id":"_raw.scss_red-300","label":"red-300","value":"#EC868E"},{"id":"_raw.scss_red-400","label":"red-400","value":"#E24956"},{"id":"_raw.scss_red-500","label":"red-500","value":"#DD2A3A"},{"id":"_raw.scss_red-600","label":"red-600","value":"#CA1E2E"},{"id":"_raw.scss_red-700","label":"red-700","value":"#B41E2D"},{"id":"_raw.scss_red-800","label":"red-800","value":"#9F1D2C"},{"id":"_raw.scss_red-900","label":"red-900","value":"#831C2B"}],"blue":[{"id":"_raw.scss_blue-50","label":"blue-50","value":"#E6F4FA"},{"id":"_raw.scss_blue-100","label":"blue-100","value":"#CDE8F5"},{"id":"_raw.scss_blue-200","label":"blue-200","value":"#9FD4EC"},{"id":"_raw.scss_blue-300","label":"blue-300","value":"#62ADD5"},{"id":"_raw.scss_blue-400","label":"blue-400","value":"#308BBF"},{"id":"_raw.scss_blue-500","label":"blue-500","value":"#1779B5"},{"id":"_raw.scss_blue-600","label":"blue-600","value":"#0C6CA8"},{"id":"_raw.scss_blue-700","label":"blue-700","value":"#0C6095"},{"id":"_raw.scss_blue-800","label":"blue-800","value":"#0C5685"},{"id":"_raw.scss_blue-900","label":"blue-900","value":"#0C4870"}],"violet":[{"id":"_raw.scss_violet-50","label":"violet-50","value":"#F4F1F8"},{"id":"_raw.scss_violet-100","label":"violet-100","value":"#E6DEEE"},{"id":"_raw.scss_violet-200","label":"violet-200","value":"#CEBFDE"},{"id":"_raw.scss_violet-300","label":"violet-300","value":"#AF97C8"},{"id":"_raw.scss_violet-400","label":"violet-400","value":"#9271B5"},{"id":"_raw.scss_violet-500","label":"violet-500","value":"#7E57A7"},{"id":"_raw.scss_violet-600","label":"violet-600","value":"#72499B"},{"id":"_raw.scss_violet-700","label":"violet-700","value":"#643D8C"},{"id":"_raw.scss_violet-800","label":"violet-800","value":"#56367B"},{"id":"_raw.scss_violet-900","label":"violet-900","value":"#472F6B"}],"indigo":[{"id":"_raw.scss_indigo-50","label":"indigo-50","value":"#F0F1FD"},{"id":"_raw.scss_indigo-100","label":"indigo-100","value":"#E4E5FB"},{"id":"_raw.scss_indigo-200","label":"indigo-200","value":"#BFC2F5"},{"id":"_raw.scss_indigo-300","label":"indigo-300","value":"#989DEE"},{"id":"_raw.scss_indigo-400","label":"indigo-400","value":"#7279E6"},{"id":"_raw.scss_indigo-500","label":"indigo-500","value":"#666ED0"},{"id":"_raw.scss_indigo-600","label":"indigo-600","value":"#5D64BE"},{"id":"_raw.scss_indigo-700","label":"indigo-700","value":"#5058A6"},{"id":"_raw.scss_indigo-800","label":"indigo-800","value":"#454D90"},{"id":"_raw.scss_indigo-900","label":"indigo-900","value":"#384179"}],"theme":[{"id":"_raw.scss_theme-50","label":"theme-50","value":"#E8F6F6"},{"id":"_raw.scss_theme-100","label":"theme-100","value":"#D5EEEF"},{"id":"_raw.scss_theme-200","label":"theme-200","value":"#A6DCDE"},{"id":"_raw.scss_theme-300","label":"theme-300","value":"#5BBDC1"},{"id":"_raw.scss_theme-400","label":"theme-400","value":"#0D9EA4"},{"id":"_raw.scss_theme-500","label":"theme-500","value":"#078F96"},{"id":"_raw.scss_theme-600","label":"theme-600","value":"#088289"},{"id":"_raw.scss_theme-700","label":"theme-700","value":"#096C76"},{"id":"_raw.scss_theme-800","label":"theme-800","value":"#095D68"},{"id":"_raw.scss_theme-900","label":"theme-900","value":"#0A4C58"}],"yellow":[{"id":"_raw.scss_yellow-50","label":"yellow-50","value":"#FFFAE3"},{"id":"_raw.scss_yellow-100","label":"yellow-100","value":"#FFF5C4"},{"id":"_raw.scss_yellow-200","label":"yellow-200","value":"#FEEC93"},{"id":"_raw.scss_yellow-300","label":"yellow-300","value":"#FEE56D"},{"id":"_raw.scss_yellow-400","label":"yellow-400","value":"#FDDE44"},{"id":"_raw.scss_yellow-500","label":"yellow-500","value":"#FAD000"},{"id":"_raw.scss_yellow-600","label":"yellow-600","value":"#EDBE00"},{"id":"_raw.scss_yellow-700","label":"yellow-700","value":"#CC9C00"},{"id":"_raw.scss_yellow-800","label":"yellow-800","value":"#A37800"},{"id":"_raw.scss_yellow-900","label":"yellow-900","value":"#7D5A00"}]}

package/lib/styles/settings/colors/_raw.scss

@@ -203,4 +203,24 @@
 	--theme-800-rgb: 9, 93, 104;
 	--theme-900: #0a4c58;
 	--theme-900-rgb: 10, 76, 88;
+	--raw-yellow-50: #fffae3;
+	--raw-yellow-50-rgb: 255, 250, 227;
+	--raw-yellow-100: #fff5c4;
+	--raw-yellow-100-rgb: 255, 245, 196;
+	--raw-yellow-200: #feec93;
+	--raw-yellow-200-rgb: 254, 236, 147;
+	--raw-yellow-300: #fee56d;
+	--raw-yellow-300-rgb: 254, 229, 109;
+	--raw-yellow-400: #fdde44;
+	--raw-yellow-400-rgb: 253, 222, 68;
+	--raw-yellow-500: #fad000;
+	--raw-yellow-500-rgb: 250, 208, 0;
+	--raw-yellow-600: #edbe00;
+	--raw-yellow-600-rgb: 237, 190, 0;
+	--raw-yellow-700: #cc9c00;
+	--raw-yellow-700-rgb: 204, 156, 0;
+	--raw-yellow-800: #a37800;
+	--raw-yellow-800-rgb: 163, 120, 0;
+	--raw-yellow-900: #7d5a00;
+	--raw-yellow-900-rgb: 125, 90, 0;
 }

package/lib/styles/settings/colors/_tokens-variables.scss

@@ -442,4 +442,42 @@
 	--color-accent-border-weak-focused: var(--raw-violet-300);
 	--color-accent-border-weak-disabled: var(--raw-violet-100);
 	--color-accent-ripple: rgba(var(--raw-violet-500-rgb), 0.12);
+	--color-highlight-icon: var(--raw-yellow-500);
+	--color-highlight-icon-hovered: var(--raw-yellow-700);
+	--color-highlight-icon-focused: var(--raw-yellow-700);
+	--color-highlight-icon-disabled: var(--raw-yellow-200);
+	--color-highlight-background-strong: var(--raw-yellow-500);
+	--color-highlight-background-strong-hovered: var(--raw-yellow-600);
+	--color-highlight-background-strong-focused: var(--raw-yellow-600);
+	--color-highlight-background-strong-pressed: var(--raw-yellow-700);
+	--color-highlight-background-strong-disabled: var(--raw-yellow-200);
+	--color-highlight-background-medium: var(--raw-yellow-100);
+	--color-highlight-background-medium-hovered: var(--raw-yellow-200);
+	--color-highlight-background-medium-focused: var(--raw-yellow-200);
+	--color-highlight-background-medium-pressed: var(--raw-yellow-300);
+	--color-highlight-background-medium-disabled: var(--raw-yellow-50);
+	--color-highlight-background: var(--raw-yellow-50);
+	--color-highlight-background-hovered: var(--raw-yellow-100);
+	--color-highlight-background-focused: var(--raw-yellow-100);
+	--color-highlight-background-pressed: var(--raw-yellow-200);
+	--color-highlight-background-disabled: var(--raw-yellow-50);
+	--color-highlight-background-weak: var(--raw-white);
+	--color-highlight-background-weak-hovered: var(--raw-yellow-100);
+	--color-highlight-background-weak-focused: var(--raw-yellow-100);
+	--color-highlight-background-weak-pressed: var(--raw-yellow-200);
+	--color-highlight-background-weak-disabled: var(--raw-white);
+	--color-highlight-background-ghost: rgba(var(--raw-yellow-500-rgb), 0);
+	--color-highlight-background-ghost-hovered: rgba(var(--raw-yellow-500-rgb), 0.12);
+	--color-highlight-background-ghost-focused: rgba(var(--raw-yellow-500-rgb), 0.12);
+	--color-highlight-background-ghost-pressed: rgba(var(--raw-yellow-500-rgb), 0.18);
+	--color-highlight-background-ghost-disabled: rgba(var(--raw-yellow-500-rgb), 0);
+	--color-highlight-border: var(--raw-yellow-500);
+	--color-highlight-border-hovered: var(--raw-yellow-700);
+	--color-highlight-border-focused: var(--raw-yellow-700);
+	--color-highlight-border-disabled: var(--raw-yellow-200);
+	--color-highlight-border-weak: var(--raw-yellow-100);
+	--color-highlight-border-weak-hovered: var(--raw-yellow-300);
+	--color-highlight-border-weak-focused: var(--raw-yellow-300);
+	--color-highlight-border-weak-disabled: var(--raw-yellow-100);
+	--color-highlight-ripple: rgba(var(--raw-yellow-500-rgb), 0.12);
 }