@shoprenter/sr-styleguide 1.0.0

package/src/components/icons/SrNextIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$next</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrNextIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrOpenInNewIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$openInNew</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrOpenInNewIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrPackageIcon.vue

@@ -0,0 +1,10 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$package</v-icon>
+</template>
+<script>
+export default {
+    name: 'SrPackageIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrPadlockOutlineIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$padlockOutline</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrPadlockOutlineIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrPencilIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$pencil</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrPencilIcon.vue',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrPrevIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$prev</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrPrevIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrRadioOff.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$radioOff</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrRadioOff',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrRadioOn.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$radioOn</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrRadioOn',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrSearchCloseIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$searchClose</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrSearchCloseIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrSearchIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$search</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrSearchIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrSettingIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$setting</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrSettingIcon.vue',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrSuccessCircleOutlineIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$successCircleOutline</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrSuccessCircleOutlineIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrSuccessIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$success</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrSuccessIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrTrashIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$trashcan</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrTrashIcon.vue',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrWarningCircleOutlineIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$warningCircleOutline</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrWarningCircleOutlineIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/flags/SrCroatiaFlag.vue

@@ -0,0 +1,73 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path fill="#fff"
+          d="M1 11H31V21H1z"></path>
+    <path
+        d="M5,4H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z" fill="#ea3323"></path>
+    <path
+        d="M5,20H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z" transform="rotate(180 16 24)"
+        fill="#100e91"></path>
+    <path
+        d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z"
+        opacity=".15"></path>
+    <path
+        d="M16.001,22h0c2.524,0,4.59-2.065,4.59-4.59v-5.454H11.412v5.454c0,2.524,2.065,4.59,4.59,4.59h0Z"
+        fill="#ea3323"></path>
+    <path
+        d="M16.001,21.926h0c2.476,0,4.502-2.026,4.502-4.502v-5.38H11.499v5.38c0,2.476,2.026,4.502,4.502,4.502Z"
+        fill="#fff"></path>
+    <path d="M13.399,12.214h-1.733v1.904h1.733v-1.904Z" fill="#ea3323"></path>
+    <path
+        d="M13.399,16.021h1.733v-1.904h-1.733v1.904Z" fill="#ea3323"></path>
+    <path
+        d="M11.667,17.414c0,.173,.011,.343,.031,.511h1.702v-1.904h-1.733v1.393Z" fill="#ea3323"></path>
+    <path
+        d="M16.865,16.021h-1.733v1.904h1.733v-1.904Z" fill="#ea3323"></path>
+    <path
+        d="M16.865,19.828h1.733v-1.904h-1.733v1.904Z" fill="red"></path>
+    <path
+        d="M18.598,20.87c.384-.29,.719-.642,.989-1.041h-.989v1.041Z" fill="#ea3323"></path>
+    <path
+        d="M13.4,19.828h1.733v-1.904h-1.733v1.904Z" fill="#ea3323"></path>
+    <path
+        d="M12.409,19.828c.271,.4,.606,.752,.991,1.043v-1.043h-.991Z" fill="#ea3323"></path>
+    <path
+        d="M16.3,21.732c.192-.013,.38-.039,.565-.077v-1.827h-1.733v1.827c.184,.038,.372,.063,.563,.077,.202,.012,.404,.012,.605,0h0Z"
+        fill="#ea3323"></path>
+    <path d="M20.298,17.925c.02-.168,.031-.339,.031-.513v-1.391h-1.731v1.904h1.7Z"
+          fill="#ea3323"></path>
+    <path d="M16.865,16.021h1.733v-1.904h-1.733v1.904Z"
+          fill="#ea3323"></path>
+    <path
+        d="M16.865,12.214h-1.733v1.904h1.733v-1.904Z" fill="#ea3323"></path>
+    <path
+        d="M20.329,14.117v-1.904h-1.731v1.904h1.731Z" fill="#ea3323"></path>
+    <path
+        d="M20.426,11.9l1.074-2.435-.818-1.322-1.356,.502-.952-1.088-1.255,.719-1.119-.916-1.119,.916-1.255-.719-.952,1.088-1.356-.502-.819,1.322,1.073,2.436c1.352-.612,2.851-.953,4.427-.953s3.074,.341,4.426,.952h0Z"
+        fill="#fff"></path>
+    <path
+        d="M12.705,8.753l-.002,.002-1.345-.498-.753,1.215,.288,.655,.73,1.658c.545-.241,1.114-.439,1.701-.588l-.62-2.444h0Z"
+        fill="#0093dd"></path>
+    <path
+        d="M14.893,8.387l-.002,.002-1.244-.713-.942,1.077,.62,2.444c.576-.147,1.169-.247,1.777-.297l-.208-2.513h0Z"
+        fill="#100e91"></path>
+    <path
+        d="M17.112,8.388l-.003,.002-1.109-.908-1.107,.907,.208,2.513c.296-.024,.596-.038,.899-.038s.605,.013,.903,.038l.209-2.513h0Z"
+        fill="#0093dd"></path>
+    <path
+        d="M19.3,8.754h-.003s-.944-1.078-.944-1.078l-1.241,.711-.209,2.513c.608,.05,1.201,.151,1.777,.297l.621-2.444h0Z"
+        fill="#100e91"></path>
+    <path
+        d="M20.375,11.785l1.02-2.312-.753-1.215-1.342,.497-.621,2.444c.585,.149,1.152,.347,1.695,.587h0Z"
+        fill="#0093dd"></path>
+    <path
+        d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
+        fill="#fff" opacity=".2"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'SrCroatiaFlag'
+}
+</script>

package/src/components/icons/flags/SrGermanyFlag.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path fill="#cc2b1d"
+          d="M1 11H31V21H1z"></path>
+    <path
+        d="M5,4H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z"></path>
+    <path
+        d="M5,20H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z" transform="rotate(180 16 24)"
+        fill="#f8d147"></path>
+    <path
+        d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z"
+        opacity=".15"></path>
+    <path
+        d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
+        fill="#fff" opacity=".2"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'GermanFlag'
+}
+</script>

package/src/components/icons/flags/SrHungaryFlag.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path fill="#fff" d="M1 11H31V21H1z"></path>
+    <path d="M5,4H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z" fill="#be373c"></path>
+    <path d="M5,20H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z" transform="rotate(180 16 24)"
+          fill="#4f6f52"></path>
+    <path
+        d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z"
+        opacity=".15"></path>
+    <path d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
+          fill="#fff" opacity=".2"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'SrHungaryFlag'
+}
+</script>

package/src/components/icons/flags/SrRomaniaFlag.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path fill="#f6d44a"
+          d="M10 4H22V28H10z"></path>
+    <path
+        d="M5,4h6V28H5c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z" fill="#0c267b"></path>
+    <path
+        d="M25,4h6V28h-6c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z" transform="rotate(180 26 16)"
+        fill="#be2a2c"></path>
+    <path
+        d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z"
+        opacity=".15"></path>
+    <path
+        d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
+        fill="#fff" opacity=".2"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'SrRomaniaFlag'
+}
+</script>

package/src/components/icons/flags/SrSerbiaFlag.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path fill="#1a3d73"
+          d="M1 11H31V21H1z"></path>
+    <path
+        d="M5,4H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z" fill="#b8403f"></path>
+    <path
+        d="M5,20H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z" transform="rotate(180 16 24)" fill="#fff"></path>
+    <path
+        d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z"
+        opacity=".15"></path>
+    <path
+        d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
+        fill="#fff" opacity=".2"></path>
+    <path
+        d="M13.669,9.423c.207-.03,.134-.355-.066-.293,.083-.137-.099-.295-.223-.194,.027-.145-.171-.234-.262-.122,.025-.143-.17-.232-.261-.121-.006-.128-.181-.185-.262-.087-.018-.133-.24-.222-.35-.151-.005-.129-.181-.188-.262-.089-.006-.132-.189-.186-.267-.082-.028-.124-.214-.149-.274-.037-.034-.129-.23-.142-.281-.019-.037-.09-.17-.117-.239-.047,.036-.198-.104-.402-.302-.439,.011-.101-.048-.17,.099-.15,.047,.19,.343-.106,.152-.152-.009-.086-.142-.086-.152,0-.131,.013-.095-.017-.099-.121,.146-.04,.006-.202-.076-.218-.082,.016-.222,.178-.076,.218-.003,.106,.031,.133-.099,.121-.01-.086-.143-.085-.151,0-.147,.039-.007,.202,.076,.218,.089-.014,.049-.089,.175-.066,.051,.261-.366,.174-.302,.589-.069-.07-.202-.043-.239,.047-.05-.123-.247-.11-.281,.019-.06-.112-.246-.087-.274,.037-.078-.105-.261-.05-.267,.082-.081-.099-.258-.04-.262,.089-.11-.071-.332,.018-.35,.151-.081-.098-.256-.04-.262,.087-.092-.11-.287-.022-.261,.121-.092-.112-.289-.023-.262,.122-.123-.101-.306,.057-.223,.194-.201-.062-.273,.264-.066,.293-.135,.06-.095,.28,.055,.285-.078,.097,.006,.254,.131,.24-.058,.084-.011,.161-.002,.254,.037,.088,.124,.04,.181,.06,.101,.354,.349,.588,.522,.918-.103,.031-.061,.143,.032,.125,.002-.003,.009,.039,.009,.04-.063,.095-.163,.347,.014,.397,.084,.152,.11,.048,.03,.186,.604,.244,1.466,.103,2.152,.161,.686-.058,1.549,.082,2.152-.161-.085-.143-.047-.035,.031-.186,.172-.045,.079-.304,.014-.397,0-.013,.004-.051,.025-.039,.086,.006,.111-.099,.017-.125,.173-.33,.421-.564,.522-.918,.056-.02,.146,.028,.181-.06,.011-.094,.055-.17-.002-.254,.125,.013,.209-.143,.131-.24,.15-.006,.19-.226,.055-.285Z"
+        fill="#e6bd4c"></path>
+    <path
+        d="M14.231,12.033v6.004c0,.983-.437,1.945-1.093,2.644s-1.573,1.18-2.595,1.18-1.939-.481-2.595-1.18-1.093-1.661-1.093-2.644v-6.004h7.375Z"
+        fill="#b8403f"></path>
+    <path
+        d="M10.543,21.888c-.967,0-1.896-.422-2.615-1.188-.699-.746-1.1-1.716-1.1-2.662v-6.031h7.43v6.031c0,.946-.401,1.917-1.1,2.662-.719,.767-1.647,1.188-2.615,1.188Zm-3.66-9.827v5.977c0,.932,.396,1.889,1.085,2.625,.708,.755,1.623,1.171,2.575,1.171s1.867-.416,2.575-1.171c.689-.735,1.085-1.692,1.085-2.625v-5.977H6.883Z"
+        fill="#fff"></path>
+    <path
+        d="M14.062,14.242c-.054-.845-.562-2.119-1.289-1.837,.458,1.041,.017,1.234-.784,2.183-.043-.024-.365-.015-.148-.114-.298-.151-.748-.725-.397-1.095,.178-.054,.416,.167,.513-.069,.253-.011,.44-.125,.445-.316-.183,.208-.391,.215-.613,.131-.176-.047-.228-.026-.081-.136,.202,.051,.141-.115,.283-.111,.127,0,.094,.301,.233,.135,.53-.48,.123-.628-.236-.725-.243-.169-1.021,.284-1.263,.257-.054,.142-.008,.274,.128,.259-.172,.284-.262,.573-.309,1.001,.049-.432-.395-.889-.195-1.037,.145-.357-.19-.162-.539-.381-.625-.34-1.741,.069-.861,.677,.173-.381,.165-.057,.432-.076,.255,.2-.578,.248-.7,.017,.021,.249,.408,.299,.585,.41,.441-.191,.609,.252,.448,.578-.162,.277-.342,.372-.468,.497,.22,.042-.124,.097-.147,.097-.463-.514-1.332-1.373-.869-1.89,.367-.961-1.206,.159-1.149,1.168-.317,1.488,.376,3.682,.131,5.243,.384-.004,.376-.526,.546-.022,.164-.098,.252-.307,.295-.549,.078,.262,.175-.027,.234-.147,.204-.055,.297-.522,.301-.785,.131,.294,.289-.257,.259-.477,.212,.507-.263,1.204-.545,1.501,.126,.089,.401,.013,.501-.108-.069,.223-.088,.532,.188,.271,.012,.322,.203,.203,.308-.088,.237,.412,.143-.137,.34-.407,.493,.48,.05,.778,.023,1.244,.155,.21-.384,.504-.265,.763,.299,.227-.592,.816-.119,1.002,.091,.022,.226,.094,.26-.046-.032,.183,.33,.263,.393,.112,.023,.156,.37,.192,.41,.031,.017,.163,.385,.164,.403,0,.039,.161,.387,.125,.41-.032,.062,.151,.425,.072,.394-.111,.035,.139,.171,.067,.262,.044,.38-.182-.177-.632-.213-.945,.313-.154-.167-.535-.234-.765,.218-.187-.135-.515-.187-.756,.168-.658,.393-.517,.465,.047,.19-.322,.208,.073,.38,.119,.107-.419,.422,.223,.262-.485,.1,.121,.375,.197,.501,.108-.282-.298-.756-.993-.545-1.501-.029,.22,.128,.772,.259,.477,.004,.264,.097,.731,.301,.785,.058,.118,.155,.41,.234,.147,.043,.242,.131,.45,.295,.549,.169-.509,.163,.022,.546,.022-.228-1.384,.357-3.571,.186-4.867Z"
+        fill="#fff"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'SrSerbiaFlag'
+}
+</script>

package/src/components/icons/flags/SrSloveniaFlag.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path fill="#0600f5"
+          d="M1 11H31V21H1z"></path>
+    <path
+        d="M5,4H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z" fill="#fff"></path>
+    <path
+        d="M5,20H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z" transform="rotate(180 16 24)"
+        fill="#ea3323"></path>
+    <path
+        d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z"
+        opacity=".15"></path>
+    <path
+        d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
+        fill="#fff"
+        opacity=".2"></path>
+    <path
+        d="M6.612,8.569c2.019-.889,4.318-.889,6.337,0,.331,4.68-.725,7.333-3.168,7.958-2.443-.625-3.499-3.278-3.168-7.958Z"
+        fill="#0600f5"></path>
+    <path
+        d="M9.781,10.646l.767,1.534,.511-.682,1.278,1.705c0,.079-.011,.158-.033,.234-.356,1.245-1.299,2.237-2.524,2.656-1.225-.419-2.168-1.411-2.524-2.656-.022-.076-.033-.155-.033-.234l1.278-1.705,.511,.682,.767-1.534Z"
+        fill="#fff"></path>
+    <path
+        d="M6.372,8.68c.08-.038,.16-.075,.241-.111l.253,4.044c.108,1.728,1.266,3.213,2.915,3.74,1.65-.527,2.807-2.012,2.915-3.74l.253-4.044c.081,.036,.161,.073,.241,.111l-.247,3.949c-.116,1.859-1.378,3.448-3.162,3.984-1.784-.535-3.046-2.125-3.162-3.984l-.247-3.949Z"
+        fill="#ea3323"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'SrSloveniaFlag'
+}
+</script>

package/src/components/icons/flags/SrUnitedKingdomFlag.vue

@@ -0,0 +1,42 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <rect x="1" y="4" width="30"
+          height="24" rx="4" ry="4"
+          fill="#071b65"></rect>
+    <path
+        d="M5.101,4h-.101c-1.981,0-3.615,1.444-3.933,3.334L26.899,28h.101c1.981,0,3.615-1.444,3.933-3.334L5.101,4Z"
+        fill="#fff"></path>
+    <path d="M22.25,19h-2.5l9.934,7.947c.387-.353,.704-.777,.929-1.257l-8.363-6.691Z"
+          fill="#b92932"></path>
+    <path
+        d="M1.387,6.309l8.363,6.691h2.5L2.316,5.053c-.387,.353-.704,.777-.929,1.257Z" fill="#b92932"></path>
+    <path
+        d="M5,28h.101L30.933,7.334c-.318-1.891-1.952-3.334-3.933-3.334h-.101L1.067,24.666c.318,1.891,1.952,3.334,3.933,3.334Z"
+        fill="#fff"></path>
+    <rect x="13" y="4" width="6" height="24" fill="#fff"></rect>
+    <rect x="1" y="13" width="30"
+          height="6"
+          fill="#fff"></rect>
+    <rect
+        x="14" y="4" width="4" height="24" fill="#b92932"></rect>
+    <rect x="14" y="1" width="4" height="30"
+          transform="translate(32) rotate(90)"
+          fill="#b92932"></rect>
+    <path
+        d="M28.222,4.21l-9.222,7.376v1.414h.75l9.943-7.94c-.419-.384-.918-.671-1.471-.85Z" fill="#b92932"></path>
+    <path
+        d="M2.328,26.957c.414,.374,.904,.656,1.447,.832l9.225-7.38v-1.408h-.75L2.328,26.957Z" fill="#b92932"></path>
+    <path
+        d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z"
+        opacity=".15"></path>
+    <path
+        d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
+        fill="#fff" opacity=".2"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'SrUnitedKingdomFlag'
+}
+</script>

package/src/components/inputs/SrCheckbox/SrArrayCheckbox.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-checkbox
+      class="mb-2 mt-2"
+      :input-value="modelValue"
+      :ripple="false"
+      :value="checkboxValue"
+      hide-details
+      v-bind="$attrs"
+      @change="handleChange"
+  ></v-checkbox>
+</template>
+
+<script>
+export default {
+    name: 'SrArrayCheckbox',
+    inheritAttrs: false,
+    emits: ['change:modelValue'],
+    props: {
+        modelValue: {
+            type: Array,
+            default: () => []
+        },
+        checkboxValue: {
+            type: [Number, String],
+            default: 0
+        }
+    },
+    methods: {
+        handleChange (checked) {
+            this.$emit('change:modelValue', checked)
+        }
+    }
+}
+</script>

package/src/components/inputs/SrCheckbox/SrCheckbox.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-checkbox
+      v-bind="$attrs"
+      v-on="$listeners"
+      hide-details
+      :ripple="false"
+  ></v-checkbox>
+</template>
+
+<script>
+export default {
+    name: 'SrCheckbox',
+    inheritAttrs: false
+}
+</script>

package/src/components/inputs/SrCheckbox/tests/SrArrayCheckbox.spec.js

@@ -0,0 +1,73 @@
+import { mount } from '@vue/test-utils'
+import SrCheckboxArray from '../SrArrayCheckbox.vue'
+
+function mountComponent (options = {}) {
+    const vuetify = createVuetify()
+    return mount(SrCheckboxArray, {
+        vuetify,
+        attachTo: document.body,
+        ...options
+    })
+}
+
+describe('SrArrayCheckbox.vue', () => {
+    it('renders v-checkbox component', () => {
+        const wrapper = mountComponent()
+        expect(wrapper.findComponent({ name: 'v-checkbox' }).exists()).toBe(true)
+    })
+
+    it('binds input-value to modelValue prop', () => {
+        const wrapper = mountComponent({
+            propsData: { modelValue: ['apple'], checkboxValue: 'apple' }
+        })
+        const checkbox = wrapper.findComponent({ name: 'v-checkbox' })
+        expect(checkbox.props('inputValue')).toContain('apple')
+    })
+
+    it('passes checkboxValue to v-checkbox value prop', () => {
+        const wrapper = mountComponent({
+            propsData: { checkboxValue: 'banana' }
+        })
+        const checkbox = wrapper.findComponent({ name: 'v-checkbox' })
+        expect(checkbox.props('value')).toBe('banana')
+    })
+
+    it('emits change:modelValue when checkbox is clicked', async () => {
+        const wrapper = mountComponent({
+            propsData: { modelValue: [], checkboxValue: 'orange' }
+        })
+
+        const checkbox = wrapper.findComponent({ name: 'v-checkbox' })
+        await checkbox.vm.$emit('change', ['orange'])
+
+        expect(wrapper.emitted('change:modelValue')).toBeTruthy()
+        expect(wrapper.emitted('change:modelValue')[0][0]).toEqual(['orange'])
+    })
+
+    it('supports number values in checkboxValue and modelValue', async () => {
+        const wrapper = mountComponent({
+            propsData: { modelValue: [1, 2], checkboxValue: 2 }
+        })
+
+        const checkbox = wrapper.findComponent({ name: 'v-checkbox' })
+        expect(checkbox.props('inputValue')).toContain(2)
+        expect(checkbox.props('value')).toBe(2)
+    })
+
+    it('works with default empty modelValue array', () => {
+        const wrapper = mountComponent()
+        const checkbox = wrapper.findComponent({ name: 'v-checkbox' })
+        expect(Array.isArray(checkbox.props('inputValue'))).toBe(true)
+        expect(checkbox.props('inputValue')).toHaveLength(0)
+    })
+
+    it('updates correctly when props change', async () => {
+        const wrapper = mountComponent({
+            propsData: { modelValue: ['x'], checkboxValue: 'y' }
+        })
+
+        await wrapper.setProps({ modelValue: ['y'] })
+        const checkbox = wrapper.findComponent({ name: 'v-checkbox' })
+        expect(checkbox.props('inputValue')).toContain('y')
+    })
+})

package/src/components/inputs/SrDatePicker/SrDatePicker.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-menu
+      v-model="menuOpen"
+      offset-y
+      max-width="290"
+  >
+    <template #activator="{on, attrs}">
+      <v-text-field
+          :value="value"
+          :placeholder="placeholder"
+          :clearable="clearable"
+          dense hide-details outlined
+          append-icon="mdi-chevron-down"
+          readonly
+          v-bind="attrs"
+          v-on="on"
+      ></v-text-field>
+    </template>
+    <v-date-picker
+        :value="value"
+        @input="selectDate"
+        first-day-of-week="1"
+    />
+  </v-menu>
+</template>
+
+<script>
+export default {
+    name: 'SrDatePicker',
+    props: {
+        value: {
+            required: false,
+            default: null
+        },
+        placeholder: {
+            required: false,
+            default: ''
+        },
+        clearable: {
+            required: false,
+            default: false
+        }
+    },
+    data () {
+        return {
+            menuOpen: false
+        }
+    },
+    methods: {
+        selectDate (value) {
+            this.$emit('input', value)
+            this.menuOpen = false
+        }
+    }
+}
+</script>

package/src/components/inputs/SrInputField/SrInputField.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-text-field
+      v-bind="$attrs"
+      v-on="$listeners"
+      dense
+      outlined
+      persistent-hint
+      clearable
+  />
+</template>
+
+<script>
+export default {
+    name: 'SrInputField',
+    inheritAttrs: false
+}
+</script>