@loadsmart/loadsmart-ui 6.0.14 → 6.0.16

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.14",
+	"version": "6.0.16",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [
@@ -78,10 +78,10 @@
 		"@types/lodash.range": "^3.2.6",
 		"@types/mdx": "^2.0.2",
 		"@types/node": "^18.11.18",
-		"@types/react": "^17.0.5",
-		"@types/react-dom": "^17.0.3",
+		"@types/react": "^17.0.59",
+		"@types/react-dom": "^17.0.20",
 		"@types/react-test-renderer": "^17.0.1",
-		"@types/styled-components": "^5.1.9",
+		"@types/styled-components": "^5.1.26",
 		"@typescript-eslint/eslint-plugin": "^4.22.1",
 		"@typescript-eslint/parser": "^4.22.1",
 		"@zerollup/ts-transform-paths": "^1.7.18",
@@ -149,7 +149,7 @@
 		"styled-components": ">=5.3.0"
 	},
 	"dependencies": {
-		"@floating-ui/react-dom": "^1.3.0",
+		"@floating-ui/react-dom": "^2.0.0",
 		"@loadsmart/utils-function": "0.3.1",
 		"@loadsmart/utils-object": "0.3.1",
 		"@loadsmart/utils-string": "0.3.1",

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({