@iress-oss/ids-components 6.0.0-alpha.11 → 6.0.0-alpha.12

package/dist/components/Tag/Tag.js

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as e } from "react/jsx-runtime";
 import { useRef as d } from "react";
 import { propagateTestid as u } from "../../helpers/utility/propagateTestid.js";
-import "../../Button-tcXF8Gpw.js";
+import "../../Button-ZGbOkyOo.js";
 import { IressCloseButton as x } from "../Button/CloseButton/CloseButton.js";
 import { IressText as g } from "../Text/Text.js";
 import { tag as C } from "./Tag.styles.js";

package/dist/components/Toaster/components/Toast/Toast.js

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as a } from "react/jsx-runtime";
 import { propagateTestid as i } from "../../../../helpers/utility/propagateTestid.js";
-import "../../../../Button-tcXF8Gpw.js";
+import "../../../../Button-ZGbOkyOo.js";
 import { IressCloseButton as h } from "../../../Button/CloseButton/CloseButton.js";
 import "../../../Inline/Inline.styles.js";
 import { IressInline as y } from "../../../Inline/Inline.js";

package/dist/{index-DrLngwHq.js → index-gmMGso0u.js}

@@ -308,11 +308,11 @@ const s = {
     variable: "var(--radii-radius\\.system\\.badge)"
   },
   "radii.radius.system.button": {
-    value: "var(--iress-radius-system-button, var(--iress-radius-075, calc(0.75 * 1rem)) var(--iress-radius-075, calc(0.75 * 1rem)) var(--iress-radius-075, calc(0.75 * 1rem)) var(--iress-radius-075, calc(0.75 * 1rem)))",
+    value: "var(--iress-radius-system-button, var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)))",
     variable: "var(--radii-radius\\.system\\.button)"
   },
   "radii.radius.system.form": {
-    value: "var(--iress-radius-system-form, var(--iress-radius-050, calc(0.5 * 1rem)) var(--iress-radius-050, calc(0.5 * 1rem)) var(--iress-radius-050, calc(0.5 * 1rem)) var(--iress-radius-050, calc(0.5 * 1rem)))",
+    value: "var(--iress-radius-system-form, var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)))",
     variable: "var(--radii-radius\\.system\\.form)"
   },
   "radii.radius.system.layout": {
@@ -580,11 +580,11 @@ const s = {
     variable: "var(--spacing-xl)"
   },
   "spacing.button.inline": {
-    value: "calc((var(--iress-radius-system--button-top-left, var(--iress-radius-075, calc(0.75 * 1rem))) * 0.25) + var(--iress-spacing-2, calc(2 * var(--iress-spacing-100, .25rem))))",
+    value: "calc((var(--iress-radius-system--button-top-left, var(--iress-radius-025, calc(0.25 * 1rem))) * 0.25) + var(--iress-spacing-2, calc(2 * var(--iress-spacing-100, .25rem))))",
     variable: "var(--spacing-button\\.inline)"
   },
   "spacing.button.block": {
-    value: "calc(var(--iress-radius-system--button-top-left, var(--iress-radius-075, calc(0.75 * 1rem))) * 0.25)",
+    value: "calc(var(--iress-radius-system--button-top-left, var(--iress-radius-025, calc(0.25 * 1rem))) * 0.25)",
     variable: "var(--spacing-button\\.block)"
   },
   "spacing.field.footer": {

package/dist/main.js

@@ -5,7 +5,7 @@ import { autoComplete as I } from "./components/Autocomplete/Autocomplete.styles
 import { useAutocompleteSearch as l } from "./components/Autocomplete/hooks/useAutocompleteSearch.js";
 import { IressBadge as n } from "./components/Badge/Badge.js";
 import { badge as u } from "./components/Badge/Badge.styles.js";
-import { I as c, b as C } from "./Button-tcXF8Gpw.js";
+import { I as c, b as C } from "./Button-ZGbOkyOo.js";
 import { IressCloseButton as b } from "./components/Button/CloseButton/CloseButton.js";
 import { IressButtonGroup as k } from "./components/ButtonGroup/ButtonGroup.js";
 import { buttonGroup as L } from "./components/ButtonGroup/ButtonGroup.styles.js";

package/dist/patterns/Loading/components/ValidateLoading.js

@@ -1,5 +1,5 @@
 import { jsx as o, jsxs as p } from "react/jsx-runtime";
-import { I as u } from "../../../Button-tcXF8Gpw.js";
+import { I as u } from "../../../Button-ZGbOkyOo.js";
 import "../../../components/Button/CloseButton/CloseButton.js";
 import { useState as g, useEffect as h } from "react";
 import { loading as x } from "../Loading.styles.js";

package/dist/patterns/Shadow/Shadow.js

@@ -303,8 +303,8 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     --radii-radius\\.075: var(--iress-radius-075, calc(0.75 * var(--iress-radius-100, 1rem)));
     --radii-radius\\.100: var(--iress-radius-100, 1rem);
     --radii-radius\\.system\\.badge: var(--iress-radius-system-badge, var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)));
-    --radii-radius\\.system\\.button: var(--iress-radius-system-button, var(--iress-radius-075, calc(0.75 * 1rem)) var(--iress-radius-075, calc(0.75 * 1rem)) var(--iress-radius-075, calc(0.75 * 1rem)) var(--iress-radius-075, calc(0.75 * 1rem)));
-    --radii-radius\\.system\\.form: var(--iress-radius-system-form, var(--iress-radius-050, calc(0.5 * 1rem)) var(--iress-radius-050, calc(0.5 * 1rem)) var(--iress-radius-050, calc(0.5 * 1rem)) var(--iress-radius-050, calc(0.5 * 1rem)));
+    --radii-radius\\.system\\.button: var(--iress-radius-system-button, var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)));
+    --radii-radius\\.system\\.form: var(--iress-radius-system-form, var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)));
     --radii-radius\\.system\\.layout: var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem));
     --radii-none: var(--iress-radius-000, 0px);
     --sizes-container\\.xs: 100%;
@@ -371,8 +371,8 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     --spacing-md: var(--iress-spacing-4, calc(4 * var(--iress-spacing-100, .25rem)));
     --spacing-lg: var(--iress-spacing-6, calc(6 * var(--iress-spacing-100, .25rem)));
     --spacing-xl: var(--iress-spacing-10, calc(10 * var(--iress-spacing-100, .25rem)));
-    --spacing-button\\.inline: calc((var(--iress-radius-system--button-top-left, var(--iress-radius-075, calc(0.75 * 1rem))) * 0.25) + var(--iress-spacing-2, calc(2 * var(--iress-spacing-100, .25rem))));
-    --spacing-button\\.block: calc(var(--iress-radius-system--button-top-left, var(--iress-radius-075, calc(0.75 * 1rem))) * 0.25);
+    --spacing-button\\.inline: calc((var(--iress-radius-system--button-top-left, var(--iress-radius-025, calc(0.25 * 1rem))) * 0.25) + var(--iress-spacing-2, calc(2 * var(--iress-spacing-100, .25rem))));
+    --spacing-button\\.block: calc(var(--iress-radius-system--button-top-left, var(--iress-radius-025, calc(0.25 * 1rem))) * 0.25);
     --spacing-field\\.footer: calc(var(--iress-typography-base-size, .875rem) * 2);
     --spacing-slider\\.tick: calc((calc(var(--iress-typography-base-size, .875rem) * (10 / 14)) - calc(var(--iress-typography-base-size, .875rem) * (5 / 14))) / 2);
     --z-index-100: 100;
@@ -874,12 +874,11 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 
     .button__root[data-active="true"] {
       background: var(--colors-colour\\.primary\\.surface);
-      box-shadow: inset 0 0 0 1px var(--colors-colour\\.primary\\.text);
+      border: 0.5px solid var(--colors-colour\\.primary\\.fill);
       color: var(--colors-colour\\.primary\\.text);
 }
 
     .button__root::before {
-      border-radius: var(--radii-radius\\.system\\.button);
       transition-property: var(--transition-prop, all);
       transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
       transition-duration: var(--transition-duration, 150ms);
@@ -887,6 +886,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
 
     .button__root::before,.button__root::after {
+      border-radius: var(--radii-radius\\.system\\.button);
+      border-style: solid;
+      border-width: 1px;
       position: absolute;
       top: 0;
       left: 0;
@@ -895,9 +897,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
 
     .button__root::after {
-      border-radius: 50%;
       transition: .2s;
-      transform: translateZ(-1px) scaleY(0) scaleX(0.3);
+      transform: translateZ(-1px);
+      opacity: 0;
       transform-origin: bottom;
 }
 
@@ -1051,7 +1053,7 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 
   .button__root--active_true {
     background: var(--colors-colour\\.primary\\.surface);
-    box-shadow: inset 0 0 0 1px var(--colors-colour\\.primary\\.text);
+    border: 0.5px solid var(--colors-colour\\.primary\\.fill);
     color: var(--colors-colour\\.primary\\.text);
 }
 
@@ -1064,32 +1066,38 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
 
   .button__root--loading_true {
+    background: var(--colors-colour\\.neutral\\.30);
+    border: 1px solid var(--colors-colour\\.neutral\\.30);
     cursor: not-allowed;
-    filter: saturate(0.25);
-    opacity: 0.5;
+    color: var(--colors-colour\\.neutral\\.60);
 }
 
   .button__root--loading_true::before,.button__root--loading_true::after {
     display: none;
 }
 
+  .button__spinner--loading_true {
+    color: var(--colors-colour\\.neutral\\.60);
+}
+
   .button__root--mode_primary {
     color: var(--colors-colour\\.primary\\.on-fill);
 }
 
   .button__root--mode_primary::before {
     background: var(--colors-colour\\.primary\\.fill);
+    border-color: var(--colors-colour\\.primary\\.fill);
     content: '';
 }
 
   .button__root--mode_primary::after {
     background: var(--colors-colour\\.primary\\.fill-hover);
+    border-color: var(--colors-colour\\.primary\\.fill-hover);
     content: '';
 }
 
   .button__root--mode_primary:is(:hover, [data-hover])::after {
-    border-radius: var(--radii-radius\\.system\\.button);
-    transform: translateZ(-1px);
+    opacity: 1;
 }
 
   .button__root--mode_primary:is(:active, [data-active])::after {
@@ -1106,17 +1114,18 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 
   .button__root--mode_secondary::before {
     background: var(--colors-colour\\.primary\\.surface);
+    border-color: color-mix(in srgb, var(--colors-colour\\.primary\\.surface), black 5%);
     content: '';
 }
 
   .button__root--mode_secondary::after {
     background: var(--colors-colour\\.primary\\.surface-hover);
+    border-color: color-mix(in srgb, var(--colors-colour\\.primary\\.surface-hover), black 5%);
     content: '';
 }
 
   .button__root--mode_secondary:is(:hover, [data-hover])::after {
-    border-radius: var(--radii-radius\\.system\\.button);
-    transform: translateZ(-1px);
+    opacity: 1;
 }
 
   .button__root--mode_secondary:is(:active, [data-active])::after {
@@ -1129,15 +1138,15 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 
   .button__root--mode_tertiary::after {
     background: var(--colors-colour\\.neutral\\.20);
-    border-radius: var(--radii-radius\\.system\\.button);
+}
+
+  .button__root--mode_tertiary::after,.button__root--mode_tertiary::before {
+    border-color: var(--colors-colour\\.primary\\.text);
     content: '';
-    opacity: 0;
-    transform: translateZ(-1px);
 }
 
   .button__root--mode_tertiary:is(:hover, [data-hover])::after {
     opacity: 1;
-    transform: translateZ(-1px);
 }
 
   .button__root--mode_tertiary:is(:active, [data-active])::after {
@@ -1148,6 +1157,36 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     color: var(--colors-colour\\.primary\\.text);
 }
 
+  .button__root--mode_muted {
+    color: var(--colors-colour\\.neutral\\.70);
+}
+
+  .button__root--mode_muted::after {
+    background: var(--colors-colour\\.neutral\\.20);
+    border-color: var(--colors-colour\\.neutral\\.20);
+    content: '';
+}
+
+  .button__root--mode_muted::before {
+    display: none;
+}
+
+  .button__root--mode_muted:is(:hover, [data-hover]) {
+    color: var(--colors-colour\\.primary\\.text);
+}
+
+  .button__root--mode_muted:is(:hover, [data-hover])::after {
+    opacity: 1;
+}
+
+  .button__root--mode_muted:is(:active, [data-active])::after {
+    box-shadow: color-mix(in srgb, var(--colors-colour\\.neutral\\.70), transparent 90%) 0px 0px 0px 3px;
+}
+
+  .button__spinner--mode_muted {
+    color: var(--colors-colour\\.neutral\\.70);
+}
+
   .button__root--noWrap_true {
     white-space: nowrap;
     min-width: fit-content;
@@ -2515,8 +2554,8 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     background: var(--colors-colour\\.neutral\\.20);
 }
 
-  .bg_colour\\.primary\\.surface {
-    background: var(--colors-colour\\.primary\\.surface);
+  .bg_transparent {
+    background: var(--colors-transparent);
 }
 
   .bd_divider {
@@ -2579,10 +2618,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     grid-area: footer;
 }
 
-  .bg_transparent {
-    background: var(--colors-transparent);
-}
-
   .m_spacing\\.0 {
     margin: var(--spacing-spacing\\.0);
 }
@@ -2623,6 +2658,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     border: none;
 }
 
+  .bg_colour\\.primary\\.surface {
+    background: var(--colors-colour\\.primary\\.surface);
+}
+
   .bg_colour\\.primary\\.surfaceHover {
     background: var(--colors-colour\\.primary\\.surface-hover);
 }
@@ -3107,6 +3146,14 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     border-radius: var(--radii-radius\\.100);
 }
 
+  .bd-c_colour\\.neutral\\.60 {
+    border-color: var(--colors-colour\\.neutral\\.60);
+}
+
+  .bd-c_transparent {
+    border-color: var(--colors-transparent);
+}
+
   .mx_xs {
     margin-inline: var(--spacing-xs);
 }
@@ -3922,10 +3969,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     white-space: nowrap;
 }
 
-  .as_flex-start {
-    align-self: flex-start;
-}
-
   .c_colour\\.data\\.bold\\.10 {
     color: var(--colors-colour\\.data\\.bold\\.10);
 }
@@ -4018,6 +4061,14 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     position: relative;
 }
 
+  .c_colour\\.neutral\\.60 {
+    color: var(--colors-colour\\.neutral\\.60);
+}
+
+  .c_colour\\.primary\\.text {
+    color: var(--colors-colour\\.primary\\.text);
+}
+
   .d_contents {
     display: contents;
 }
@@ -4126,7 +4177,7 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     height: calc(var(--iress-typography-base-size, .875rem) * 2);
     background-color: currentColor;
     clip-path: polygon(0 0, 100% 0, 0% 100%);
-    border-top-left-radius: 0.3rem;
+    border-top-left-radius: var(--iress-radius-system--form-top-left, var(--iress-radius-025, calc(0.25 * 1rem)));
 }
 
   .d_block {
@@ -4338,10 +4389,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     align-items: flex-end;
 }
 
-  .c_colour\\.primary\\.text {
-    color: var(--colors-colour\\.primary\\.text);
-}
-
   .tableChevron_false:after {
     content: '';
     width: .6em;
@@ -4429,10 +4476,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     font-weight: normal;
 }
 
-  .c_colour\\.neutral\\.60 {
-    color: var(--colors-colour\\.neutral\\.60);
-}
-
   .rotate_90 {
     rotate: 90px;
 }
@@ -4513,6 +4556,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     align-items: baseline;
 }
 
+  .as_flex-start {
+    align-self: flex-start;
+}
+
   .fk_none {
     font-kerning: none;
 }
@@ -7344,10 +7391,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     padding: 0 var(--spacing-spacing\\.3);
 }
 
-  .\\[\\&\\:\\:file-selector-button\\]\\:m_-spacing\\.1::file-selector-button {
-    margin: calc(var(--spacing-spacing\\.1) * -1);
-}
-
   .after\\:bg_colour\\.primary\\.fill::after {
     background: var(--colors-colour\\.primary\\.fill);
 }
@@ -7424,6 +7467,46 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     border-color: var(--colors-colour\\.system\\.warning\\.text);
 }
 
+  .before\\:bd-c_colour\\.system\\.danger\\.fill::before {
+    border-color: var(--colors-colour\\.system\\.danger\\.fill);
+}
+
+  .after\\:bd-c_colour\\.system\\.danger\\.fillHover::after {
+    border-color: var(--colors-colour\\.system\\.danger\\.fill-hover);
+}
+
+  .before\\:bd-c_\\[color-mix\\(in_srgb\\,_\\{colors\\.colour\\.system\\.danger\\.surface\\}\\,_black_5\\%\\)\\]::before {
+    border-color: color-mix(in srgb, var(--colors-colour\\.system\\.danger\\.surface), black 5%);
+}
+
+  .after\\:bd-c_\\[color-mix\\(in_srgb\\,_\\{colors\\.colour\\.system\\.danger\\.surfaceHover\\}\\,_black_5\\%\\)\\]::after {
+    border-color: color-mix(in srgb, var(--colors-colour\\.system\\.danger\\.surface-hover), black 5%);
+}
+
+  .after\\:bd-c_colour\\.system\\.danger\\.fill::after {
+    border-color: var(--colors-colour\\.system\\.danger\\.fill);
+}
+
+  .after\\:bd-c_colour\\.system\\.danger\\.surfaceHover::after {
+    border-color: var(--colors-colour\\.system\\.danger\\.surface-hover);
+}
+
+  .before\\:bd-c_colour\\.system\\.success\\.fill::before,.after\\:bd-c_colour\\.system\\.success\\.fill::after {
+    border-color: var(--colors-colour\\.system\\.success\\.fill);
+}
+
+  .before\\:bd-c_\\[color-mix\\(in_srgb\\,_\\{colors\\.colour\\.system\\.success\\.surface\\}\\,_black_5\\%\\)\\]::before {
+    border-color: color-mix(in srgb, var(--colors-colour\\.system\\.success\\.surface), black 5%);
+}
+
+  .after\\:bd-c_\\[color-mix\\(in_srgb\\,_\\{colors\\.colour\\.system\\.success\\.surfaceHover\\}\\,_black_5\\%\\)\\]::after {
+    border-color: color-mix(in srgb, var(--colors-colour\\.system\\.success\\.surface-hover), black 5%);
+}
+
+  .after\\:bd-c_colour\\.system\\.success\\.surfaceHover::after {
+    border-color: var(--colors-colour\\.system\\.success\\.surface-hover);
+}
+
   .after\\:bd-c_colour\\.primary\\.fill::after {
     border-color: var(--colors-colour\\.primary\\.fill);
 }
@@ -7935,6 +8018,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     max-width: 100%;
 }
 
+  .before\\:bdr-tl_none::before {
+    border-top-left-radius: var(--radii-none);
+}
+
   .before\\:top_\\[-1\\.5px\\]::before {
     top: -1.5px;
 }
@@ -7975,6 +8062,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     right: var(--spacing-spacing\\.5);
 }
 
+  .\\[\\&\\:\\:file-selector-button\\]\\:ml_-spacing\\.1::file-selector-button {
+    margin-left: calc(var(--spacing-spacing\\.1) * -1);
+}
+
   .\\[\\&\\:\\:file-selector-button\\]\\:mr_spacing\\.2::file-selector-button {
     margin-right: var(--spacing-spacing\\.2);
 }
@@ -8272,8 +8363,8 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     color: var(--colors-colour\\.system\\.warning\\.on-fill);
 }
 
-  .hover\\:bg-c_colour\\.primary\\.surfaceHover:is(:hover, [data-hover]) {
-    background-color: var(--colors-colour\\.primary\\.surface-hover);
+  .hover\\:bg-c_colour\\.neutral\\.20:is(:hover, [data-hover]) {
+    background-color: var(--colors-colour\\.neutral\\.20);
 }
 
   .hover\\:stk_colour\\.primary\\.onFill:is(:hover, [data-hover]) {
@@ -8288,6 +8379,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     color: var(--colors-colour\\.primary\\.fill-hover);
 }
 
+  .hover\\:bg-c_colour\\.primary\\.surfaceHover:is(:hover, [data-hover]) {
+    background-color: var(--colors-colour\\.primary\\.surface-hover);
+}
+
   .\\[\\&\\:has\\(button\\:hover\\)\\]\\:c_colour\\.primary\\.text:has(button:hover) {
     color: var(--colors-colour\\.primary\\.text);
 }