@uniformdev/design-system 19.161.2-alpha.1 → 19.162.2-alpha.11

package/dist/esm/index.js

@@ -66,6 +66,10 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
 
           --action-destructive-default: var(--brand-secondary-5);
           --action-destructive-hover: #e07571;
+          --action-destructive-active: rbga(210, 50, 45, 0.05); /* #d2322d */
+          --action-destructive-disabled: #f87171;
+
+          
 
           /* tertiary action */
           --tertiary-action-default: var(--gray-700);
@@ -934,16 +938,16 @@ var buttonPrimary = css8`
 })}
 `;
 var buttonDestructive = css8`
-  background: var(--brand-secondary-5);
+  background: var(--action-destructive-default);
   color: var(--white);
 
   &:disabled {
-    background: var(--gray-300);
     color: var(--white);
+    opacity: var(--opacity-50);
   }
 
   ${buttonRippleEffect({
-  hoverColor: "var(--brand-secondary-5)",
+  hoverColor: "var(--action-destructive-default)",
   activeColor: "var(--action-destructive-hover)"
 })}
 `;
@@ -1021,19 +1025,20 @@ var buttonGhost = css8`
 `;
 var buttonGhostDestructive = css8`
   background: transparent;
-  color: var(--brand-secondary-5);
+  color: var(--action-destructive-default);
 
   &:hover {
-    color: var(--brand-secondary-5);
+    outline: 1px solid var(--action-destructive-hover);
+    color: var(--action-destructive-hover);
   }
 
   &:disabled {
     background: transparent;
-    border-color: var(--gray-400);
-    color: var(--gray-400);
+    color: var(--action-destructive-disabled);
+    opacity: var(--opacity-50);
   }
 
-  ${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--gray-100)" })}
+  ${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--action-destructive-active)" })}
 `;
 var buttonTertiary = css8`
   background: var(--tertiary-action-default);
@@ -1150,7 +1155,7 @@ var toastContainerStyles = css10`
   ${functionalColors}
 
   --toastify-color-light: white;
-  --toastify-color-info: var(--utility-caution-icon);
+  --toastify-color-info: var(--utility-info-icon);
   --toastify-color-success: var(--utility-success-icon);
   --toastify-color-warning: var(--utility-caution-icon);
   --toastify-color-error: var(--utility-danger-icon);
@@ -13116,10 +13121,11 @@ function convertComboBoxGroupsToSelectableGroups(args) {
   return { groupedOptions, selectedOptions };
 }
 function getComboBoxSelectedSelectableGroups(selectedValues) {
-  const selectedOptionValues = selectedValues.flatMap(
+  const selectedValuesNormalized = selectedValues ? Array.isArray(selectedValues) ? selectedValues : [selectedValues] : null;
+  const selectedOptionValues = selectedValuesNormalized == null ? void 0 : selectedValuesNormalized.flatMap(
     (selectedValue) => Array.isArray(selectedValue.value) ? selectedValue.value : [selectedValue.value]
   );
-  return new Set(selectedOptionValues.filter((value) => value !== void 0));
+  return new Set(selectedOptionValues == null ? void 0 : selectedOptionValues.filter((value) => value !== void 0));
 }
 function flatMapOptionValues(options) {
   return options.flatMap((option) => {

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-na
 import { DecoratorFn } from '@storybook/react';
 import * as React$1 from 'react';
 import React__default, { RefObject, HTMLAttributes, MutableRefObject, ReactNode, ImgHTMLAttributes, SVGProps, InputHTMLAttributes, CSSProperties, Ref, PropsWithChildren, ButtonHTMLAttributes, FocusEventHandler, ChangeEvent, HtmlHTMLAttributes } from 'react';
-import { GroupBase, Props, MultiValue } from 'react-select';
+import { GroupBase, Props, MultiValue, SingleValue } from 'react-select';
 export { ActionMeta, FormatOptionLabelContext, FormatOptionLabelMeta, GetOptionLabel, GetOptionValue, GroupBase, GroupHeadingProps, GroupProps, MenuListProps, MenuPlacement, MultiValue, MultiValueGenericProps, MultiValueProps, MultiValueRemoveProps, OnChangeValue, OptionContext, OptionProps, Options, OptionsOrGroups } from 'react-select';
 import * as _emotion_react from '@emotion/react';
 import { SerializedStyles } from '@emotion/react';
@@ -21949,7 +21949,7 @@ declare function convertComboBoxGroupsToSelectableGroups(args: ConvertComboBoxGr
  * Finds all selected values in a combo box where there are multiple selectable groups
  * (and selecting a group should select all of its virtual children)
  */
-declare function getComboBoxSelectedSelectableGroups(selectedValues: MultiValue<ComboBoxSelectableItem>): Set<string>;
+declare function getComboBoxSelectedSelectableGroups(selectedValues: MultiValue<ComboBoxSelectableItem> | SingleValue<ComboBoxSelectableItem>): Set<string>;
 
 type InputInlineSelectOption = {
     /** sets the display name of the option */
@@ -22297,7 +22297,7 @@ declare const Textarea: React$1.ForwardRefExoticComponent<React$1.TextareaHTMLAt
 
 type WarningMessageProps = React.HTMLAttributes<HTMLSpanElement> & {
     /** sets the error message value */
-    message?: string;
+    message?: ReactNode;
     /** sets the test id for test automation (optional) */
     testId?: string;
 };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-na
 import { DecoratorFn } from '@storybook/react';
 import * as React$1 from 'react';
 import React__default, { RefObject, HTMLAttributes, MutableRefObject, ReactNode, ImgHTMLAttributes, SVGProps, InputHTMLAttributes, CSSProperties, Ref, PropsWithChildren, ButtonHTMLAttributes, FocusEventHandler, ChangeEvent, HtmlHTMLAttributes } from 'react';
-import { GroupBase, Props, MultiValue } from 'react-select';
+import { GroupBase, Props, MultiValue, SingleValue } from 'react-select';
 export { ActionMeta, FormatOptionLabelContext, FormatOptionLabelMeta, GetOptionLabel, GetOptionValue, GroupBase, GroupHeadingProps, GroupProps, MenuListProps, MenuPlacement, MultiValue, MultiValueGenericProps, MultiValueProps, MultiValueRemoveProps, OnChangeValue, OptionContext, OptionProps, Options, OptionsOrGroups } from 'react-select';
 import * as _emotion_react from '@emotion/react';
 import { SerializedStyles } from '@emotion/react';
@@ -21949,7 +21949,7 @@ declare function convertComboBoxGroupsToSelectableGroups(args: ConvertComboBoxGr
  * Finds all selected values in a combo box where there are multiple selectable groups
  * (and selecting a group should select all of its virtual children)
  */
-declare function getComboBoxSelectedSelectableGroups(selectedValues: MultiValue<ComboBoxSelectableItem>): Set<string>;
+declare function getComboBoxSelectedSelectableGroups(selectedValues: MultiValue<ComboBoxSelectableItem> | SingleValue<ComboBoxSelectableItem>): Set<string>;
 
 type InputInlineSelectOption = {
     /** sets the display name of the option */
@@ -22297,7 +22297,7 @@ declare const Textarea: React$1.ForwardRefExoticComponent<React$1.TextareaHTMLAt
 
 type WarningMessageProps = React.HTMLAttributes<HTMLSpanElement> & {
     /** sets the error message value */
-    message?: string;
+    message?: ReactNode;
     /** sets the test id for test automation (optional) */
     testId?: string;
 };

package/dist/index.js

@@ -1673,6 +1673,10 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
 
           --action-destructive-default: var(--brand-secondary-5);
           --action-destructive-hover: #e07571;
+          --action-destructive-active: rbga(210, 50, 45, 0.05); /* #d2322d */
+          --action-destructive-disabled: #f87171;
+
+          
 
           /* tertiary action */
           --tertiary-action-default: var(--gray-700);
@@ -2572,16 +2576,16 @@ var buttonPrimary = import_react10.css`
 })}
 `;
 var buttonDestructive = import_react10.css`
-  background: var(--brand-secondary-5);
+  background: var(--action-destructive-default);
   color: var(--white);
 
   &:disabled {
-    background: var(--gray-300);
     color: var(--white);
+    opacity: var(--opacity-50);
   }
 
   ${buttonRippleEffect({
-  hoverColor: "var(--brand-secondary-5)",
+  hoverColor: "var(--action-destructive-default)",
   activeColor: "var(--action-destructive-hover)"
 })}
 `;
@@ -2659,19 +2663,20 @@ var buttonGhost = import_react10.css`
 `;
 var buttonGhostDestructive = import_react10.css`
   background: transparent;
-  color: var(--brand-secondary-5);
+  color: var(--action-destructive-default);
 
   &:hover {
-    color: var(--brand-secondary-5);
+    outline: 1px solid var(--action-destructive-hover);
+    color: var(--action-destructive-hover);
   }
 
   &:disabled {
     background: transparent;
-    border-color: var(--gray-400);
-    color: var(--gray-400);
+    color: var(--action-destructive-disabled);
+    opacity: var(--opacity-50);
   }
 
-  ${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--gray-100)" })}
+  ${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--action-destructive-active)" })}
 `;
 var buttonTertiary = import_react10.css`
   background: var(--tertiary-action-default);
@@ -2799,7 +2804,7 @@ var toastContainerStyles = import_react12.css`
   ${functionalColors}
 
   --toastify-color-light: white;
-  --toastify-color-info: var(--utility-caution-icon);
+  --toastify-color-info: var(--utility-info-icon);
   --toastify-color-success: var(--utility-success-icon);
   --toastify-color-warning: var(--utility-caution-icon);
   --toastify-color-error: var(--utility-danger-icon);
@@ -14830,10 +14835,11 @@ function convertComboBoxGroupsToSelectableGroups(args) {
   return { groupedOptions, selectedOptions };
 }
 function getComboBoxSelectedSelectableGroups(selectedValues) {
-  const selectedOptionValues = selectedValues.flatMap(
+  const selectedValuesNormalized = selectedValues ? Array.isArray(selectedValues) ? selectedValues : [selectedValues] : null;
+  const selectedOptionValues = selectedValuesNormalized == null ? void 0 : selectedValuesNormalized.flatMap(
     (selectedValue) => Array.isArray(selectedValue.value) ? selectedValue.value : [selectedValue.value]
   );
-  return new Set(selectedOptionValues.filter((value) => value !== void 0));
+  return new Set(selectedOptionValues == null ? void 0 : selectedOptionValues.filter((value) => value !== void 0));
 }
 function flatMapOptionValues(options) {
   return options.flatMap((option) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.161.2-alpha.1+d59167950a",
+  "version": "19.162.2-alpha.11+5544f3f2ca",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,8 +24,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
-    "@uniformdev/canvas": "^19.161.2-alpha.1+d59167950a",
-    "@uniformdev/richtext": "^19.161.2-alpha.1+d59167950a",
+    "@uniformdev/canvas": "^19.162.2-alpha.11+5544f3f2ca",
+    "@uniformdev/richtext": "^19.162.2-alpha.11+5544f3f2ca",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.38",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d59167950aa13607d01052f435e2e6b440e8cee6"
+  "gitHead": "5544f3f2ca31829767dbe8511c21b1192a811443"
 }