@ironsource/shared-ui 1.4.0-rc.10

package/index.vue.js

@@ -0,0 +1,91 @@
+import './Menu.vue_vue_type_style_index_1_lang.css';
+export { AppTriggerTypes } from './components/appTrigger/index.vue.js';
+export { AutocompleteDropdownTypes } from './components/autocompleteDropdown/index.vue.js';
+export { MenuItemTypes } from './components/menuItem/index.vue.js';
+export { MenuTypes } from './components/menu/index.vue.js';
+export { AppIconTypes } from './components/appIcon/index.vue.js';
+export { SwitchTypes } from './components/switch/index.vue.js';
+export { RadioButtonTypes } from './components/radioButton/index.vue.js';
+export { Snackbar } from './components/snackbar/index.vue.js';
+export { FloatingToolbarTypes } from './components/floatingToolbar/index.vue.js';
+export { IncludeExcludeTypes } from './components/includeExclude/index.vue.js';
+export { CssBaselineTypes } from './components/cssBaseline/index.vue.js';
+export { ID_INJECTION_KEY, useId } from './composables/useId.vue.js';
+export { EmptyStateTypes } from './components/emptyState/index.vue.js';
+export { TableTypes } from './components/table/index.vue.js';
+export { DialogTypes } from './components/dialog/index.vue.js';
+export { FilterPanelTypes } from './components/filtersPanel/index.vue.js';
+export { FilterDropdownTypes } from './components/filterDropdown/index.vue.js';
+export { DropdownTypes } from './components/dropdown/index.vue.js';
+export { TabsTypes } from './components/tabs/index.vue.js';
+export { ButtonTypes } from './components/button/index.vue.js';
+export { CheckboxTypes } from './components/checkbox/index.vue.js';
+export { IconTypes } from './components/icon/index.vue.js';
+export { SearchTypes } from './components/search/index.vue.js';
+export { SkeletonTypes } from './components/skeleton/index.vue.js';
+export { TypographyTypes } from './components/typography/index.vue.js';
+export { PopoverTypes } from './components/popover/index.vue.js';
+export { ChipTypes } from './components/chip/index.vue.js';
+export { ToggleTypes } from './components/toggle/index.vue.js';
+export { TooltipTypes } from './components/tooltip/index.vue.js';
+export { InputTypes } from './components/input/index.vue.js';
+export { TextAreaTypes } from './components/textArea/index.vue.js';
+export { EditableTypes } from './components/table-cells/index.vue.js';
+export { useToggle } from './composables/useToggle.vue.js';
+export { useSearch } from './composables/useSearch.vue.js';
+export { DateRangeTypes } from './components/dateRange/index.vue.js';
+export { DatePickerTypes } from './components/datePicker/index.vue.js';
+export { default as Popover } from './components/popover/Popover.vue.js';
+export { default as Tooltip } from './components/tooltip/Tooltip.vue.js';
+export { default as AppTrigger } from './components/appTrigger/AppTrigger.vue.js';
+export { default as AutocompleteDropdown } from './components/autocompleteDropdown/AutocompleteDropdown.vue.js';
+export { default as MenuItem } from './components/menuItem/MenuItem.vue.js';
+export { default as Menu } from './components/menu/Menu.vue.js';
+export { default as AppIcon } from './components/appIcon/AppIcon.vue.js';
+export { default as Switch } from './components/switch/Switch.vue.js';
+export { default as RadioButton } from './components/radioButton/RadioButton.vue.js';
+export { default as RadioGroup } from './components/radioButton/RadioGroup.vue.js';
+export { snackbarEmits, snackbarTypes } from './components/snackbar/snackbar.types.vue.js';
+export { default as FloatingToolbar } from './components/floatingToolbar/FloatingToolbar.vue.js';
+export { default as IncludeExclude } from './components/includeExclude/IncludeExclude.vue.js';
+export { default as IncludeExcludeOption } from './components/includeExclude/IncludeExcludeOption.vue.js';
+export { default as IncludeExcludeAppTrigger } from './components/includeExclude/IncludeExcludeAppTrigger.vue.js';
+export { default as IncludeExcludeAppHeader } from './components/includeExclude/IncludeExcludeAppHeader.vue.js';
+export { default as IncludeExcludeChipFilter } from './components/includeExclude/IncludeExcludeChipFilter.vue.js';
+export { default as CssBaseline } from './components/cssBaseline/CssBaseline.vue.js';
+export { default as EmptyState } from './components/emptyState/EmptyState.vue.js';
+export { default as Table } from './components/table/Table.vue.js';
+export { TableContext } from './components/table/TableContext.vue.js';
+export { default as Dialog } from './components/dialog/Dialog.vue.js';
+export { Reason } from './components/dialog/Reason.vue.js';
+export { default as FiltersPanel } from './components/filtersPanel/FiltersPanel.vue.js';
+export { default as FilterSearchInput } from './components/filtersPanel/FilterSearchInput.vue.js';
+export { useHiddenFilter } from './components/filtersPanel/useHiddenFilter.vue.js';
+export { default as FilterDropdown } from './components/filterDropdown/FilterDropdown.vue.js';
+export { default as AddFilterButton } from './components/filterDropdown/AddFilterButton.vue.js';
+export { default as Dropdown } from './components/dropdown/Dropdown.vue.js';
+export { default as Option } from './components/dropdown/Option.vue.js';
+export { default as Label } from './components/dropdown/Label.vue.js';
+export { default as SearchInput } from './components/dropdown/SearchInput.vue.js';
+export { default as Tabs } from './components/tabs/Tabs.vue.js';
+export { default as Button } from './components/button/Button.vue.js';
+export { default as IconButton } from './components/button/IconButton.vue.js';
+export { default as ScrollButton } from './components/button/ScrollButton.vue.js';
+export { default as Checkbox } from './components/checkbox/Checkbox.vue.js';
+export { default as Icon } from './components/icon/Icon.vue.js';
+export { icons } from './components/icon/icons/index.vue.js';
+export { default as Search } from './components/search/Search.vue.js';
+export { default as Skeleton } from './components/skeleton/Skeleton.vue.js';
+export { default as Heading } from './components/typography/Heading.vue.js';
+export { default as Text } from './components/typography/Text.vue.js';
+export { default as Chip } from './components/chip/Chip.vue.js';
+export { default as Toggle } from './components/toggle/Toggle.vue.js';
+export { default as Input } from './components/input/Input.vue.js';
+export { default as DollarInput } from './components/input/DollarInput.vue.js';
+export { default as PercentageInput } from './components/input/PercentageInput.vue.js';
+export { default as PasswordInput } from './components/input/PasswordInput.vue.js';
+export { default as TextArea } from './components/textArea/TextArea.vue.js';
+export { default as Editable } from './components/table-cells/Editable.vue.js';
+export { EditableContext, useEditableContext } from './components/table-cells/EditableContext.vue.js';
+export { default as DateRange } from './components/dateRange/DateRange.vue.js';
+export { default as DatePicker } from './components/datePicker/DatePicker.vue.js';

package/package.json

@@ -0,0 +1,309 @@
+{
+  "name": "@ironsource/shared-ui",
+  "version": "1.4.0-rc.10",
+  "engines": {
+    "npm": ">=7.0.0",
+    "node": ">=16.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && node inject-css.js",
+    "preview": "vite preview",
+    "storybook": "StoryBookEnv=dev start-storybook -p 6006",
+    "storybook:dist": "StoryBookEnv=prod start-storybook -p 6006",
+    "build-storybook": "build-storybook -o docs",
+    "serve-storybook": "RemoveAddons=true npm run build-storybook && http-server ./docs --port 6007",
+    "test-storybook": "test-storybook --maxWorkers=2",
+    "test-storybook-ci": "npx concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'npm run storybook:dist --silent' 'npx wait-on tcp:6006 && npm run test-storybook' ",
+    "jest:integration:update": "jest --updateSnapshot",
+    "jest:integration": "jest --runTestsByPath $TESTS_LISTS",
+    "test:integration": "start-server-and-test serve-storybook http-get://localhost:6007 jest:integration",
+    "test:integration:update": "start-server-and-test serve-storybook http-get://localhost:6007 jest:integration:update",
+    "test": "vitest run",
+    "test:related": "vitest related --run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src --ext .vue,.ts --max-warnings=0",
+    "lint:fix": "npm run lint -- --fix --cache",
+    "update-libs": "npm update --latest",
+    "check-update": "npx npm-check-updates -u",
+    "generate:component": "npx hygen component new",
+    "generate:composable": "npx hygen composable new",
+    "prepare": "(node -e \"if (require('fs').existsSync('./.git')){process.exit(1)} \") || husky install",
+    "icons:download": "figus download",
+    "icons:generate": "figus",
+    "build:deploy": "FOLDER=main npm run aws:build && FOLDER=main npm run aws:deploy",
+    "aws:build": "npm run build-storybook",
+    "aws:deploy": "npm run deploy:static && npm run deploy:html && npm run deploy:assets",
+    "deploy:static": "aws s3 cp ./docs s3://mobile-shared-ui-platform/$FOLDER  --recursive  --exclude 'index.html'",
+    "deploy:assets": "aws s3 cp ./docs/assets s3://mobile-shared-ui-platform/assets/  --recursive",
+    "deploy:html": "aws s3 cp ./docs/index.html s3://mobile-shared-ui-platform/$FOLDER/index.html  --cache-control='max-age=0, s-maxage=604800'",
+    "cf:invalidate": "aws cloudfront create-invalidation --distribution-id E2H80TE9BVV9YO --paths  \"/$FOLDER/*\" ",
+    "upload:visual": "aws s3 cp ./visual-tests s3://mobile-shared-ui-platform/visual-tests/$FOLDER  --recursive  --exclude '.gitkeep' ",
+    "release": "commit-and-tag-version"
+  },
+  "dependencies": {
+    "@vueuse/core": "^8.7.5",
+    "@vueuse/integrations": "^8.9.1",
+    "date-fns": "^2.29.1",
+    "floating-vue": "2.0.0-beta.20",
+    "focus-trap": "^6.9.4",
+    "vue": "^3.2.31"
+  },
+  "peerDependencies": {
+    "@vueuse/core": "^8.7.5",
+    "@vueuse/integrations": "^8.9.1",
+    "date-fns": "^2.29.1",
+    "floating-vue": "2.0.0-beta.20",
+    "focus-trap": "^6.9.4",
+    "vue": "^3.2.31"
+  },
+  "devDependencies": {
+    "@babel/core": "7.17.9",
+    "@babel/node": "7.16.8",
+    "@commitlint/cli": "^17.0.3",
+    "i": "^0.3.7",
+    "npm": "^8.19.2",
+    "@commitlint/config-conventional": "^17.0.3",
+    "@figus/cli": "^2.0.8",
+    "@mdx-js/react": "^2.1.2",
+    "@storybook/addon-a11y": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-docs": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-measure": "^6.5.9",
+    "@storybook/addon-outline": "^6.5.9",
+    "@storybook/builder-vite": "^0.1.36",
+    "@storybook/mdx2-csf": "^0.0.3",
+    "@storybook/test-runner": "^0.5.0",
+    "@storybook/vue3": "^6.5.9",
+    "@types/download": "^8.0.1",
+    "@types/node": "^18.0.0",
+    "@types/prismjs": "^1.26.0",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitest/coverage-c8": "^0.23.4",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "@vue/test-utils": "^2.0.0-rc.17",
+    "autoprefixer": "^10.4.7",
+    "commit-and-tag-version": "^10.1.0",
+    "concurrently": "^7.3.0",
+    "dedent": "^0.7.0",
+    "dotenv": "^16.0.1",
+    "eslint": "^8.11.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-storybook": "^0.5.13",
+    "eslint-plugin-vue": "^8.5.0",
+    "fast-glob": "^3.2.11",
+    "figma-api": "^1.10.1",
+    "fs-extra": "^10.1.0",
+    "happy-dom": "^2.49.0",
+    "http-server": "^14.1.1",
+    "husky": "^8.0.1",
+    "jest": "^27.5.1",
+    "jest-image-snapshot": "^6.1.0",
+    "jest-puppeteer": "^6.2.0",
+    "lint-staged": "^13.0.3",
+    "lodash.kebabcase": "^4.1.1",
+    "mustache": "^4.2.0",
+    "nodejs-file-downloader": "^4.10.1",
+    "postcss": "^8.4.14",
+    "prettier": "^2.6.0",
+    "prismjs": "^1.29.0",
+    "puppeteer": "^19.4.1",
+    "replace": "^1.2.1",
+    "rimraf": "^3.0.2",
+    "sass": "^1.49.7",
+    "start-server-and-test": "^1.15.2",
+    "svgo": "^2.8.0",
+    "typescript": "^4.5.4",
+    "vite": "^2.9.9",
+    "vite-plugin-libcss": "^1.0.5",
+    "vite-plugin-static-copy": "^0.6.0",
+    "vitest": "^0.23.2",
+    "vue-tsc": "^0.35.0"
+  },
+  "repository": "https://github.com/ironsource-mobile/shared-ui-ssp.git",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    "./appTrigger": "./components/appTrigger/AppTrigger.vue.js",
+    "./autocompleteDropdown": "./components/autocompleteDropdown/AutocompleteDropdown.vue.js",
+    "./menuItem": "./components/menuItem/MenuItem.vue.js",
+    "./menu": "./components/menu/Menu.vue.js",
+    ".": {
+      "import": "./index.js"
+    },
+    "./appIcon": "./components/appIcon/AppIcon.vue.js",
+    "./switch": "./components/switch/Switch.vue.js",
+    "./editable": "./components/table-cells/Editable.vue.js",
+    "./radioButton": "./components/radioButton/RadioButton.vue.js",
+    "./radioGroup": "./components/radioButton/RadioGroup.vue.js",
+    "./floatingToolbar": "./components/floatingToolbar/FloatingToolbar.vue.js",
+    "./includeExclude": "./components/includeExclude/index.vue.js",
+    "./cssBaseline": "./components/cssBaseline/CssBaseline.vue.js",
+    "./snackbar": "./components/snackbar/index.vue.js",
+    "./emptyState": "./components/emptyState/EmptyState.vue.js",
+    "./table": "./components/table/Table.vue.js",
+    "./dateRange": "./components/dateRange/DateRange.vue.js",
+    "./datePicker": "./components/datePicker/DatePicker.vue.js",
+    "./dialog": "./components/dialog/Dialog.vue.js",
+    "./dropdown": "./components/dropdown/index.vue.js",
+    "./filterDropdown": "./components/filterDropdown/FilterDropdown.vue.js",
+    "./filtersPanel": "./components/filtersPanel/index.vue.js",
+    "./tabs": "./components/tabs/Tabs.vue.js",
+    "./chip": "./components/chip/Chip.vue.js",
+    "./button": "./components/button/Button.vue.js",
+    "./iconButton": "./components/button/IconButton.vue.js",
+    "./scrollButton": "./components/button/ScrollButton.vue.js",
+    "./checkbox": "./components/checkbox/Checkbox.vue.js",
+    "./icon": "./components/icon/Icon.vue.js",
+    "./toggle": "./components/toggle/Toggle.vue.js",
+    "./tooltip": "./components/tooltip/Tooltip.vue.js",
+    "./search": "./components/search/Search.vue.js",
+    "./useId": "./composables/useId.vue.js",
+    "./skeleton": "./components/skeleton/Skeleton.vue.js",
+    "./text": "./components/typography/Text.vue.js",
+    "./heading": "./components/typography/Heading.vue.js",
+    "./popover": "./components/popover/Popover.vue.js",
+    "./input": "./components/input/Input.vue.js",
+    "./dollarInput": "./components/input/DollarInput.vue.js",
+    "./passwordInput": "./components/input/PasswordInput.vue.js",
+    "./percentageInput": "./components/input/PercentageInput.vue.js",
+    "./textArea": "./components/textArea/TextArea.vue.js",
+    "./styleguide": "./styleguide.scss"
+  },
+  "typesVersions": {
+    "*": {
+      "appTrigger": [
+        "./components/appTrigger/AppTrigger.vue.d.ts"
+      ],
+      "autocompleteDropdown": [
+        "./components/autocompleteDropdown/AutocompleteDropdown.vue.d.ts"
+      ],
+      "menuItem": [
+        "./components/menuItem/MenuItem.vue.d.ts"
+      ],
+      "menu": [
+        "./components/menu/Menu.vue.d.ts"
+      ],
+      "editable": [
+        "./components/table-cells/Editable.vue.d.ts"
+      ],
+      "appIcon": [
+        "./components/appIcon/AppIcon.vue.d.ts"
+      ],
+      "radioButton": [
+        "./components/radioButton/RadioButton.vue.d.ts"
+      ],
+      "RadioGroup": [
+        "./components/radioButton/RadioGroup.vue.d.ts"
+      ],
+      "floatingToolbar": [
+        "./components/floatingToolbar/FloatingToolbar.vue.d.ts"
+      ],
+      "useId": [
+        "./composables/useId.d.ts"
+      ],
+      "includeExclude": [
+        "./components/includeExclude/index.d.ts"
+      ],
+      "switch": [
+        "./components/switch/Switch.vue.d.ts"
+      ],
+      "cssBaseline": [
+        "./components/cssBaseline/CssBaseline.vue.d.ts"
+      ],
+      "emptyState": [
+        "./components/emptyState/EmptyState.vue.d.ts"
+      ],
+      "table": [
+        "./components/table/Table.vue.d.ts"
+      ],
+      "dialog": [
+        "./components/dialog/Dialog.vue.d.ts"
+      ],
+      "dropdown": [
+        "./components/dropdown/index.d.ts"
+      ],
+      "filtersPanel": [
+        "./components/filtersPanel/index.d.ts"
+      ],
+      "filterDropdown": [
+        "./components/filterDropdown/index.d.ts"
+      ],
+      "tabs": [
+        "./components/tabs/Tabs.vue.d.ts"
+      ],
+      "./dateRange": [
+        "./components/dateRange/DateRange.vue.d.ts"
+      ],
+      "./datePicker": [
+        "./components/datePicker/DatePicker.vue.d.ts"
+      ],
+      "chip": [
+        "./components/chip/Chip.vue.d.ts"
+      ],
+      "button": [
+        "./components/button/Button.vue.d.ts"
+      ],
+      "iconButton": [
+        "./components/button/IconButton.vue.d.ts"
+      ],
+      "scrollButton": [
+        "./components/button/ScrollButton.vue.d.ts"
+      ],
+      "checkbox": [
+        "./components/checkbox/Checkbox.vue.d.ts"
+      ],
+      "icon": [
+        "./components/icon/Icon.vue.d.ts"
+      ],
+      "./toggle": [
+        "./components/toggle/Toggle.vue.d.ts"
+      ],
+      "./tooltip": [
+        "./components/tooltip/Tooltip.vue.d.ts"
+      ],
+      "search": [
+        "./components/search/Search.vue.d.ts"
+      ],
+      "skeleton": [
+        "./components/skeleton/Skeleton.vue.d.ts"
+      ],
+      "text": [
+        "./components/typography/Text.vue.d.ts"
+      ],
+      "heading": [
+        "./components/typography/Heading.vue.d.ts"
+      ],
+      "popover": [
+        "./components/popover/Popover.vue.d.ts"
+      ],
+      "input": [
+        "./components/input/Input.vue.d.ts"
+      ],
+      "dollarInput": [
+        "./components/input/DollarInput.vue.d.ts"
+      ],
+      "passwordInput": [
+        "./components/input/PasswordInput.vue.d.ts"
+      ],
+      "percentageInput": [
+        "./components/input/PercentageInput.vue.d.ts"
+      ],
+      "textArea": [
+        "./components/textArea/TextArea.vue.d.ts"
+      ]
+    }
+  },
+  "lint-staged": {
+    "*.{vue,ts,js}": [
+      "npm run lint:fix",
+      "npm run test:related"
+    ]
+  }
+}

package/styleguide.scss

@@ -0,0 +1,210 @@
+/* #region Colors */
+$white: #FFFFFF;
+$black: #000000;
+
+$black-200: #696A6b;
+$black-300: #565C62;
+$black-500: #53575b;
+$black-900: #41454d;
+
+$primary-100: #E2EEFF;
+$primary-200: #C9DFFF;
+$primary-300: #96C0FF;
+$primary-400: #68A5FF;
+$primary-500: #3083FF;
+$primary-600: #2B76E6;
+$primary-700: #005BE2;
+$primary-800: #0051C9;
+$primary-900: #0046AF;
+
+$light-50: #F7F8F9;
+$light-100: #F1F3F4;
+$light-200: #EDEFF0;
+$light-300: #E5E7E9;
+$light-400: #DDDFE1;
+$light-500: #D2D5D8;
+$light-600: #B7BBC0;
+$light-700: #A9AFB4;
+$light-800: #8E959D;
+$light-900: #7B838C;
+$light-1000: #626970;
+
+$secondary-100: #e1fbfc;
+$secondary-200: #bff2f5;
+$secondary-300: #91e2e7;
+$secondary-500: #00ccd7;
+
+$positive-100: #daf5ec;
+$positive-200: #b4e9d2;
+$positive-300: #78ddbc;
+$positive-400: #5cd6ad;
+$positive-500: #22c891;
+$positive-600: #1eb281;
+$positive-700: #1b9c71;
+
+$neutral-100: #fff8e2;
+$neutral-200: #ffe0a3;
+$neutral-500: #ffb424;
+$neutral-700: #fea222;
+$neutral-900: #d8840d;
+
+$negative-100: #ffefee;
+$negative-200: #ffcbce;
+$negative-300: #ff9b96;
+$negative-400: #ff827c;
+$negative-500: #ff6a63;
+$negative-600: #ec5d56;
+$negative-700: #da564f;
+
+$dark-100: #CFD0E8;
+$dark-200: #B6B9DD;
+$dark-300: #313d91;
+$dark-400: #212791;
+$dark-500: #0d148c;
+$dark-600: #021074;
+$dark-700: #1d1c64;
+$dark-800: #070A46;
+
+$alpha-30: 4D;
+$input-shadow-color: unquote($primary-500 + '' + $alpha-30);
+$backdrop-color: rgba(0, 0, 0, 0.56);
+
+/* #endregion Colors */
+
+/* #region Spacing (used for margin, padding, flex gaps etc) */
+$spacing-multiplier: 0.5rem;
+$spacing-1: $spacing-multiplier;
+$spacing-2: $spacing-multiplier * 2;
+$spacing-3: $spacing-multiplier * 3;
+$spacing-4: $spacing-multiplier * 4;
+$spacing-5: $spacing-multiplier * 5;
+$spacing-6: $spacing-multiplier * 6;
+$spacing-7: $spacing-multiplier * 7;
+$spacing-8: $spacing-multiplier * 8;
+$spacing-9: $spacing-multiplier * 9;
+$spacing-10: $spacing-multiplier * 10;
+$spacing-11: $spacing-multiplier * 11;
+$spacing-12: $spacing-multiplier * 12;
+$spacing-13: $spacing-multiplier * 13;
+$spacing-14: $spacing-multiplier * 14;
+$spacing-32: $spacing-multiplier * 32;
+
+/* #endregion Spacing */
+
+/* #region Breakpoints */
+$breakpoint-xxs-end: 767px;
+$breakpoint-xs-start: 768px;
+$breakpoint-xs-end: 1023px;
+$breakpoint-sm-start: 1024px;
+$breakpoint-sm-end: 1279px;
+$breakpoint-md-start: 1280px;
+$breakpoint-md-end: 1439px;
+$breakpoint-lg-start: 1440px;
+$breakpoint-lg-end: 1919px;
+$breakpoint-xl: 1920px;
+/* #endregion Breakpoints */
+
+/* #region Media */
+$mobile: "only screen and (max-width:#{$breakpoint-xxs-end})";
+$tablet: "only screen and (min-width:#{$breakpoint-sm-start}) and (max-width:#{$breakpoint-sm-end})";
+$smallLaptop: "only screen and (min-width:#{$breakpoint-md-start}) and (max-width:#{$breakpoint-md-end})";
+$largeLaptop: "only screen and (min-width:#{$breakpoint-lg-start}) and (max-width:#{$breakpoint-lg-end})";
+$desktop: "only screen and (min-width:#{$breakpoint-xl})";
+// inclusive - mobile and below: use mobile, huge and below: everything, no need for media query
+$tabletAndBelow: "only screen and (max-width:#{$breakpoint-sm-end})";
+$tabletAndAbove: "only screen and (min-width:#{$breakpoint-sm-start})";
+$smallLaptopAndBelow: "only screen and (max-width:#{$breakpoint-md-end})";
+$largeLaptopAndBelow: "only screen and (max-width:#{$breakpoint-lg-end})";
+$desktopAndAbove: "only screen and (min-width:#{$breakpoint-xl})";
+$largeLaptopAndAbove: "only screen and (min-width:#{$breakpoint-lg-start})";
+// combinations
+$laptop: "only screen and (min-width:#{$breakpoint-md-start}) and (max-width:#{$breakpoint-lg-end})";
+/* #endregion Media */
+
+/* #region Grid */
+$grid-template-columns: repeat(12, [col-start] 1fr);
+$grid-gap: 1rem;
+/* #endregion Grid */
+
+/* #region Fonts */
+$heading-font-family: "NHaasGroteskDSPro-75Bd", sans-serif;
+$heading-font-family-label: "NHaasGroteskDSPro-65Md", sans-serif;
+$heading-font-size-1: 3.75rem;
+$heading-font-size-2: 2rem;
+$heading-font-size-3: 1.375rem;
+$heading-font-size-4: 1.125rem;
+$heading-font-size-5: 0.9375rem;
+$heading-font-size-6: 0.8125rem;
+$heading-font-size-label: 0.6875rem;
+$heading-font-weight: 700;
+$heading-font-weight-label: 400;
+$body-font-family: HelveticaNeue, sans-serif;
+$body-font-family-strong: HelveticaNeue-Medium, sans-serif;
+$body-font-size-xs: 0.75rem;
+$body-font-size-sm: 0.8125rem;
+$body-font-size-md: 0.875rem;
+$body-font-size-lg: 1rem;
+$body-font-weight: 400;
+$body-font-weight-strong: 500;
+$font-smoothing: antialiased;
+$heading-line-height: 1.1rem;
+$body-line-height: 1.5rem;
+.label{
+  color: $black-900;
+}
+/* #endregion Fonts */
+
+$transition-time: 250ms;
+$border: 1px solid $light-400;
+$shape-border-radius: $spacing-1;
+
+$popover-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.16),
+0px 0px 1px rgba(0, 0, 0, 0.4);
+$modal-shadow: 0px 32px 32px -8px rgba(0, 0, 0, 0.08), 0px 0px 32px -8px rgba(0, 0, 0, 0.12);
+
+
+$focus-line: linear-gradient(
+                0deg,
+                $primary-500 0,
+                $primary-500 2px,
+                $light-100 0
+);
+$focus-line-white: linear-gradient(
+                0deg,
+                $primary-500 0,
+                $primary-500 2px,
+                $white 0
+);
+$error-focus-line: linear-gradient(
+                0deg,
+                $negative-500 0,
+                $negative-500 2px,
+                $light-100 0
+);
+$error-focus-line-white: linear-gradient(
+                0deg,
+                $negative-500 0,
+                $negative-500 2px,
+                $white 0
+);
+
+
+@mixin scrollbar {
+    ::-webkit-scrollbar {
+        width: 0.625rem;
+        opacity: 0.7;
+        background-color: transparent;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        border: 3px solid transparent;
+        background-clip: padding-box;
+        border-radius: 0.625rem;
+        background-color: $light-500 !important;
+      }
+
+      ::-webkit-scrollbar-track {
+        border-radius: 0.625rem;
+        background-color: transparent;
+      }
+}

package/utils/extract-props.d.ts

@@ -0,0 +1,3 @@
+export type ExtractComponentProps<TComponent> = TComponent extends new () => {
+    $props: infer P;
+} ? P : never;