@loadsmart/loadsmart-ui 6.0.15 → 6.1.0

package/dist/theming/themes/miranda-compatibility.theme.d.ts

@@ -112,6 +112,7 @@ declare const mirandaCompatibility: {
     'button-large-height': string | number;
     'button-large-padding-x': string | number;
     'button-large-padding-y': string;
+    'button-outline-offset': string;
     'button-primary-background': string | number;
     'button-primary-background--hover': string;
     'button-primary-background--focus': string | number;
@@ -127,23 +128,25 @@ declare const mirandaCompatibility: {
     'button-primary-color--focus': string | number;
     'button-primary-color--active': string | number;
     'button-primary-color--disabled': string | number;
-    'button-primary-outline': string | number;
+    'button-primary-outline': string;
+    'button-primary-box-shadow': string;
     'button-secondary-background': string | number;
     'button-secondary-background--hover': string;
-    'button-secondary-background--focus': string;
-    'button-secondary-background--active': string | number;
+    'button-secondary-background--focus': string | number;
+    'button-secondary-background--active': string;
     'button-secondary-background--disabled': string | number;
-    'button-secondary-border-color': string | number;
+    'button-secondary-border-color': string;
     'button-secondary-border-color--hover': string;
     'button-secondary-border-color--focus': string;
     'button-secondary-border-color--active': string;
-    'button-secondary-border-color--disabled': string | number;
-    'button-secondary-color': string | number;
+    'button-secondary-border-color--disabled': string;
+    'button-secondary-color': string;
     'button-secondary-color--hover': string;
-    'button-secondary-color--focus': string | number;
+    'button-secondary-color--focus': string;
     'button-secondary-color--active': string;
-    'button-secondary-color--disabled': string | number;
-    'button-secondary-outline': string | number;
+    'button-secondary-color--disabled': string;
+    'button-secondary-outline': string;
+    'button-secondary-box-shadow': string;
     'button-secondary-dark-background': string | number;
     'button-secondary-dark-background--hover': string;
     'button-secondary-dark-background--focus': string | number;
@@ -159,83 +162,108 @@ declare const mirandaCompatibility: {
     'button-secondary-dark-color--focus': string | number;
     'button-secondary-dark-color--active': string;
     'button-secondary-dark-color--disabled': string | number;
-    'button-warning-background': string | number;
+    'button-tertiary-background': string | number;
+    'button-tertiary-background--hover': string;
+    'button-tertiary-background--focus': string | number;
+    'button-tertiary-background--active': string;
+    'button-tertiary-background--disabled': string | number;
+    'button-tertiary-border-color': string | number;
+    'button-tertiary-border-color--hover': string;
+    'button-tertiary-border-color--focus': string | number;
+    'button-tertiary-border-color--active': string;
+    'button-tertiary-border-color--disabled': string | number;
+    'button-tertiary-color': string;
+    'button-tertiary-color--hover': string;
+    'button-tertiary-color--focus': string;
+    'button-tertiary-color--active': string;
+    'button-tertiary-color--disabled': string;
+    'button-tertiary-outline': string;
+    'button-tertiary-box-shadow': string;
+    'button-warning-background': string;
     'button-warning-background--hover': string;
-    'button-warning-background--focus': string | number;
-    'button-warning-background--active': string | number;
-    'button-warning-background--disabled': string | number;
-    'button-warning-border-color': string | number;
-    'button-warning-border-color--hover': string | number;
-    'button-warning-border-color--focus': string | number;
-    'button-warning-border-color--active': string | number;
-    'button-warning-border-color--disabled': string | number;
-    'button-warning-color': string | number;
-    'button-warning-color--hover': string | number;
-    'button-warning-color--focus': string | number;
-    'button-warning-color--active': string | number;
+    'button-warning-background--focus': string;
+    'button-warning-background--active': string;
+    'button-warning-background--disabled': string;
+    'button-warning-border-color': string;
+    'button-warning-border-color--hover': string;
+    'button-warning-border-color--focus': string;
+    'button-warning-border-color--active': string;
+    'button-warning-border-color--disabled': string;
+    'button-warning-color': string;
+    'button-warning-color--hover': string;
+    'button-warning-color--focus': string;
+    'button-warning-color--active': string;
     'button-warning-color--disabled': string | number;
-    'button-warning-outline': string | number;
+    'button-warning-outline': string;
+    'button-warning-box-shadow': string;
     'button-icon-border-radius': string | number;
     'button-icon-small-width': string | number;
     'button-icon-width': string | number;
     'button-icon-large-width': string | number;
-    'button-icon-background': string | number;
-    'button-icon-background--hover': string | number;
-    'button-icon-background--focus': string | number;
-    'button-icon-background--active': string | number;
-    'button-icon-background--disabled': string | number;
-    'button-icon-border-color': string | number;
-    'button-icon-border-color--hover': string | number;
-    'button-icon-border-color--focus': string | number;
-    'button-icon-border-color--active': string | number;
-    'button-icon-border-color--disabled': string | number;
-    'button-icon-color': string | number;
+    'button-icon-background': string;
+    'button-icon-background--hover': string;
+    'button-icon-background--focus': string;
+    'button-icon-background--active': string;
+    'button-icon-background--disabled': string;
+    'button-icon-border-color': string;
+    'button-icon-border-color--hover': string;
+    'button-icon-border-color--focus': string;
+    'button-icon-border-color--active': string;
+    'button-icon-border-color--disabled': string;
+    'button-icon-color': string;
     'button-icon-color--hover': string;
-    'button-icon-color--focus': string | number;
-    'button-icon-color--active': string | number;
-    'button-icon-color--disabled': string | number;
-    'button-icon-outline': string | number;
+    'button-icon-color--focus': string;
+    'button-icon-color--active': string;
+    'button-icon-color--disabled': string;
+    'button-icon-outline': string;
+    'button-icon-box-shadow': string;
     'tag-border-radius': string;
     'tag-border-width': string | number;
-    'tag-font-weight': string | number;
     'tag-font-height': string | number;
     'tag-spacing': string;
-    'tag-spacing-removable': string;
+    'tag-removable-spacing': string;
     'tag-width': string;
-    'tag-outline': string | number;
+    'tag-box-shadow': string;
+    'tag-outline-offset': string;
     'tag-remove-button-background': string | number;
     'tag-remove-button-border-radius': string;
     'tag-icon-spacing': string | number;
-    'tag-small-font-size': string | number;
+    'tag-small-font-size': string;
+    'tag-small-font-weight': string;
     'tag-small-height': string;
     'tag-small-transform': string;
     'tag-small-leading-display': string;
     'tag-small-remove-button-size': string;
     'tag-small-remove-button-icon-size': string;
-    'tag-small-spacing-removable': string;
-    'tag-font-size': string | number;
+    'tag-small-spacing': string;
+    'tag-small-removable-spacing': string;
+    'tag-font-size': string;
+    'tag-font-weight': string;
     'tag-height': string;
     'tag-transform': string;
     'tag-leading-display': string;
     'tag-remove-button-size': string;
     'tag-remove-button-icon-size': string;
-    'tag-large-font-size': string | number;
+    'tag-large-font-size': string;
+    'tag-large-font-weight': string;
     'tag-large-height': string;
     'tag-large-transform': string;
     'tag-large-leading-display': string;
     'tag-large-remove-button-size': string;
     'tag-large-remove-button-icon-size': string;
-    'tag-default-background': string | number;
+    'tag-large-spacing': string;
+    'tag-default-background': string;
     'tag-default-background--hover': string;
-    'tag-default-background--focus': string | number;
-    'tag-default-color': string | number;
+    'tag-default-background--focus': string;
+    'tag-default-color': string;
     'tag-default-color--hover': string | number;
     'tag-default-color--focus': string | number;
     'tag-default-border-color': string;
     'tag-default-border-color--hover': string;
     'tag-default-border-color--focus': string;
+    'tag-default-outline': string;
     'tag-outlined-background': string | number;
-    'tag-outlined-background--hover': string;
+    'tag-outlined-background--hover': string | number;
     'tag-outlined-background--focus': string | number;
     'tag-outlined-color': string | number;
     'tag-outlined-color--hover': string | number;
@@ -243,6 +271,7 @@ declare const mirandaCompatibility: {
     'tag-outlined-border-color': string | number;
     'tag-outlined-border-color--hover': string | number;
     'tag-outlined-border-color--focus': string | number;
+    'tag-outlined-outline': string;
     'tag-accent-background': string;
     'tag-accent-background--hover': string;
     'tag-accent-background--focus': string;
@@ -252,39 +281,45 @@ declare const mirandaCompatibility: {
     'tag-accent-border-color': string;
     'tag-accent-border-color--hover': string;
     'tag-accent-border-color--focus': string;
-    'tag-success-background': string | number;
-    'tag-success-background--hover': string | number;
-    'tag-success-background--focus': string | number;
-    'tag-success-color': string | number;
+    'tag-accent-outline': string;
+    'tag-success-background': string;
+    'tag-success-background--hover': string;
+    'tag-success-background--focus': string;
+    'tag-success-color': string;
     'tag-success-color--hover': string | number;
     'tag-success-color--focus': string | number;
-    'tag-success-border-color': string | number;
-    'tag-success-border-color--hover': string | number;
-    'tag-success-border-color--focus': string | number;
-    'tag-warning-background': string | number;
-    'tag-warning-background--hover': string | number;
-    'tag-warning-background--focus': string | number;
-    'tag-warning-color': string | number;
-    'tag-warning-color--hover': string | number;
-    'tag-warning-color--focus': string | number;
-    'tag-warning-border-color': string | number;
-    'tag-warning-border-color--hover': string | number;
-    'tag-warning-border-color--focus': string | number;
-    'tag-danger-background': string | number;
-    'tag-danger-background--hover': string | number;
-    'tag-danger-background--focus': string | number;
-    'tag-danger-color': string | number;
-    'tag-danger-color--hover': string | number;
-    'tag-danger-color--focus': string | number;
-    'tag-danger-border-color': string | number;
-    'tag-danger-border-color--hover': string | number;
-    'tag-danger-border-color--focus': string | number;
+    'tag-success-border-color': string;
+    'tag-success-border-color--hover': string;
+    'tag-success-border-color--focus': string;
+    'tag-success-outline': string;
+    'tag-warning-background': string;
+    'tag-warning-background--hover': string;
+    'tag-warning-background--focus': string;
+    'tag-warning-color': string;
+    'tag-warning-color--hover': string;
+    'tag-warning-color--focus': string;
+    'tag-warning-border-color': string;
+    'tag-warning-border-color--hover': string;
+    'tag-warning-border-color--focus': string;
+    'tag-warning-outline': string;
+    'tag-danger-background': string;
+    'tag-danger-background--hover': string;
+    'tag-danger-background--focus': string;
+    'tag-danger-color': string;
+    'tag-danger-color--hover': string;
+    'tag-danger-color--focus': string;
+    'tag-danger-border-color': string;
+    'tag-danger-border-color--hover': string;
+    'tag-danger-border-color--focus': string;
+    'tag-danger-outline': string;
     'checkbox-color': string | number;
     'checkbox-font-weight': string | number;
     'checkbox-font-size': string | number;
     'checkbox-selector-border-radius': string | number;
     'checkbox-selector-size': string;
-    'checkbox-selector-outline': string | number;
+    'checkbox-selector-box-shadow': string;
+    'checkbox-selector-outline': string;
+    'checkbox-selector-outline-offset': string;
     'checkbox-small-font-size': string | number;
     'checkbox-selector-icon-color': string | number;
     'checkbox-selector-background': string | number;
@@ -317,7 +352,7 @@ declare const mirandaCompatibility: {
     'radio-font-size': string | number;
     'radio-selector-border-radius': string | number;
     'radio-selector-size': string;
-    'radio-selector-outline': string | number;
+    'radio-selector-box-shadow': string;
     'radio-small-font-size': string | number;
     'radio-small-selector-size': string;
     'radio-selector-background': string | number;
@@ -368,7 +403,9 @@ declare const mirandaCompatibility: {
     'text-field-height': string | number;
     'text-field-padding-x': string | number;
     'text-field-padding-y': string | number;
-    'text-field-outline': string | number;
+    'text-field-box-shadow': string;
+    'text-field-outline': string;
+    'text-field-outline-offset': string;
     'text-field-small-height': string | number;
     'text-field-small-padding-x': string | number;
     'text-field-small-padding-y': string | number;
@@ -393,7 +430,7 @@ declare const mirandaCompatibility: {
     'text-field-dark-border-color--disabled': string | number;
     'text-field-success-border-color': string | number;
     'text-field-danger-border-color': string;
-    'text-field-dark-outline': string;
+    'text-field-dark-box-shadow': string;
     'textarea-border-radius': string | number;
     'textarea-color': string | number;
     'textarea-font-size': string | number;
@@ -402,7 +439,9 @@ declare const mirandaCompatibility: {
     'textarea-min-height': string;
     'textarea-padding-x': string | number;
     'textarea-padding-y': string | number;
-    'textarea-outline': string | number;
+    'textarea-box-shadow': string;
+    'textarea-outline': string;
+    'textarea-outline-offset': string;
     'textarea-small-padding-x': string | number;
     'textarea-small-padding-y': string | number;
     'textarea-small-font-size': string | number;
@@ -426,12 +465,15 @@ declare const mirandaCompatibility: {
     'textarea-dark-border-color--disabled': string | number;
     'textarea-success-border-color': string | number;
     'textarea-danger-border-color': string | number;
-    'textarea-dark-outline': string;
+    'textarea-dark-box-shadow': string;
     'link-font-size': string | number;
     'link-font-height': string | number;
     'link-color': string;
     'link-font-weight': string | number;
     'link-font-weight--hover': string | number;
+    'link-box-shadow': string;
+    'link-outline': string;
+    'link-outline-offset': string;
     'breadcrumbs-font-size': string | number;
     'breadcrumbs-font-height': string | number;
     'breadcrumbs-font-weight': string | number;
@@ -515,7 +557,9 @@ declare const mirandaCompatibility: {
     'switch-width': string;
     'switch-height': string;
     'switch-border-radius': string;
-    'switch-outline': string | number;
+    'switch-box-shadow': string;
+    'switch-outline': string;
+    'switch-outline-offset': string;
     'switch-large-width': string;
     'switch-large-height': string;
     'switch-large-border-radius': string;
@@ -610,9 +654,14 @@ declare const mirandaCompatibility: {
     'top-navigation-item-icon-color': string | number;
     'top-navigation-item-color': string | number;
     'top-navigation-item-color--hover': string;
+    'select-trigger-height': string;
+    'select-trigger-border-color': string;
     'select-selected-option-check-color': string;
     'select-selected-option-background-color': string;
     'toggle-text-transform': string;
+    'toggle-box-shadow': string;
+    'toggle-outline': string;
+    'toggle-outline-offset': string;
     'toggle-background-color': string | number;
     'toggle-background-color--hover': string;
     'toggle-background-color--focus': string | number;
@@ -652,7 +701,7 @@ declare const mirandaCompatibility: {
     'toggle-multiple-checked-border-color': string;
     'toggle-multiple-checked-border-color--disabled': string;
     'toggle-multiple-font-size': string;
-    'toggle-multiple-small-font-size': string | number;
+    'toggle-multiple-small-font-size': string;
     'toggle-multiple-height': string;
     'toggle-multiple-small-height': string;
     'toggle-group-border-color--disabled': string;
@@ -666,10 +715,16 @@ declare const mirandaCompatibility: {
     'toggle-group-single-border-color': string;
     'toggle-group-single-border-radius': string;
     'toggle-group-single-padding': string;
+    'dropdown-trigger-border-color': string;
+    'dropdown-trigger-dark-border-color': string;
+    'dropdown-trigger-outlined-border-color': string | number;
     'dropdown-trigger-expanded-color': string;
-    'dropdown-trigger-height': string | number;
-    'dropdown-trigger-small-height': string | number;
-    'dropdown-trigger-large-height': string | number;
+    'dropdown-trigger-height': string;
+    'dropdown-trigger-small-height': string;
+    'dropdown-trigger-large-height': string;
+    'dropdown-trigger-box-shadow': string;
+    'dropdown-trigger-outline': string;
+    'dropdown-trigger-outline-offset': string;
     'height-small': string;
     'height-default': string;
     'height-large': string;
@@ -741,6 +796,7 @@ declare const mirandaCompatibility: {
     'border-radius-m': string;
     'border-radius-l': string;
     'border-radius-circle': string;
+    'tag-outline-outline': string;
     'dropdown-background': string | number;
     'dropdown-border-color': string | number;
     'dropdown-border-radius': string | number;

package/dist/tools/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-82e9ff9d.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-f99913ed.js"),require("@loadsmart/miranda-tokens"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-201ffe28.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-22a9ce26.js"),require("@loadsmart/miranda-tokens"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/loadsmart-ui",
-	"version": "6.0.15",
+	"version": "6.1.0",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [
@@ -18,8 +18,8 @@
 		"storybook": "storybook dev -p 6006",
 		"build": "rollup -c --environment BUILD:prod",
 		"watch-tailwind": "postcss ./tailwind.css -o ./.storybook/globals.css --watch",
-		"storybook:build": "rm -rf docs && storybook build -o ./docs",
-		"storybook:deploy": "yarn storybook:build && storybook-to-ghpages --existing-output-dir=docs",
+		"docs:build": "storybook build -o ./docs",
+		"docs:deploy": "gh-pages -d docs -m \"chore(docs): update gh-pages [skip ci]\"",
 		"release": "semantic-release",
 		"prepare": "husky install"
 	},
@@ -39,6 +39,9 @@
 	},
 	"devDependencies": {
 		"@babel/core": "^7.20.12",
+		"@babel/plugin-proposal-class-properties": "^7.18.6",
+		"@babel/plugin-proposal-private-methods": "^7.18.6",
+		"@babel/plugin-proposal-private-property-in-object": "^7.21.0",
 		"@babel/preset-env": "^7.20.2",
 		"@babel/preset-react": "^7.18.6",
 		"@babel/preset-typescript": "^7.18.6",
@@ -51,17 +54,15 @@
 		"@rollup/plugin-json": "^4.1.0",
 		"@rollup/plugin-node-resolve": "^13.0.0",
 		"@semantic-release/git": "^9.0.0",
-		"@storybook/addon-a11y": "^7.0.4",
-		"@storybook/addon-essentials": "^7.0.4",
-		"@storybook/addon-links": "^7.0.4",
-		"@storybook/addons": "^7.0.4",
-		"@storybook/react": "^7.0.4",
-		"@storybook/react-webpack5": "^7.0.4",
-		"@storybook/storybook-deployer": "^2.8.16",
-		"@storybook/testing-react": "^2.0.0",
-		"@storybook/theming": "^7.0.4",
+		"@storybook/addon-a11y": "^7.0.17",
+		"@storybook/addon-essentials": "^7.0.17",
+		"@storybook/addon-links": "^7.0.17",
+		"@storybook/addons": "^7.0.17",
+		"@storybook/react": "^7.0.17",
+		"@storybook/react-webpack5": "^7.0.17",
+		"@storybook/theming": "^7.0.17",
 		"@svgr/rollup": "^6.5.1",
-		"@svgr/webpack": "^6.5.1",
+		"@svgr/webpack": "^8.0.1",
 		"@tailwindcss/postcss7-compat": "^2.1.2",
 		"@testing-library/dom": "^8.20.0",
 		"@testing-library/jest-dom": "^5.16.5",
@@ -103,8 +104,9 @@
 		"eslint-plugin-prettier": "^3.4.0",
 		"eslint-plugin-react": "^7.23.2",
 		"eslint-plugin-react-hooks": "^4.2.0",
-		"eslint-plugin-storybook": "^0.6.11",
+		"eslint-plugin-storybook": "^0.6.12",
 		"eslint-plugin-testing-library": "^5.9.1",
+		"gh-pages": "^5.0.0",
 		"husky": "7.0.4",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "^27.5.1",
@@ -125,7 +127,7 @@
 		"rollup-plugin-typescript2": "^0.34.1",
 		"rollup-plugin-visualizer": "^5.5.2",
 		"semantic-release": "^17.4.2",
-		"storybook": "^7.0.4",
+		"storybook": "^7.0.17",
 		"styled-components": "^5.3.0",
 		"stylelint": "^13.13.1",
 		"stylelint-config-prettier": "^8.0.2",

package/src/common/CloseButton/CloseButton.tsx

@@ -36,7 +36,10 @@ const Button = styled(BaseButton)`
   })};
 
   ${focusable`
-    box-shadow: ${token('button-icon-outline')};
+    box-shadow: ${token('button-icon-box-shadow')};
+
+    outline: ${token('button-icon-outline')};
+    outline-offset: ${token('button-outline-offset')};
   `}
 `
 

package/src/common/SelectionWrapper.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import type ColorScheme from 'utils/types/ColorScheme'
 import conditional, { whenProps } from 'tools/conditional'
 import disableable from 'styles/disableable'
+import focusable from 'styles/focusable'
 import font from 'styles/font'
 import { getToken as token } from 'theming'
 import transition from 'styles/transition'
@@ -66,6 +67,8 @@ const StyledLabel = styled.label<SelectionStyleProps>`
 
   cursor: pointer;
 
+  border-radius: ${token('border-radius-s')};
+
   font-size: ${conditional({
     'checkbox-font-size': whenProps({ scale: 'default' }),
     'checkbox-small-font-size': whenProps({ scale: 'small' }),
@@ -93,6 +96,11 @@ const StyledLabel = styled.label<SelectionStyleProps>`
   }
 
   ${disableable()}
+
+  ${focusable`
+    outline: ${token('checkbox-selector-outline')};
+    outline-offset: ${token('checkbox-selector-outline-offset')};
+  `}
 `
 
 function SelectionWrapper({