@cloudscape-design/components 3.0.671 → 3.0.673

package/internal/components/button-trigger/styles.scoped.css

@@ -98,16 +98,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_button-trigger_18eso_1ecvo_101 > .awsui_arrow_18eso_1ecvo_101:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101 > .awsui_arrow_18eso_m2fj5_101:not(#\9) {
   transition: transform var(--motion-duration-rotate-180-dpvl4m, 135ms) var(--motion-easing-rotate-180-e270ko, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_button-trigger_18eso_1ecvo_101 > .awsui_arrow_18eso_1ecvo_101:not(#\9) {
+  .awsui_button-trigger_18eso_m2fj5_101 > .awsui_arrow_18eso_m2fj5_101:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_button-trigger_18eso_1ecvo_101 > .awsui_arrow_18eso_1ecvo_101:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_1ecvo_101 > .awsui_arrow_18eso_1ecvo_101:not(#\9) {
+.awsui-motion-disabled .awsui_button-trigger_18eso_m2fj5_101 > .awsui_arrow_18eso_m2fj5_101:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_m2fj5_101 > .awsui_arrow_18eso_m2fj5_101:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -116,7 +116,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -166,51 +166,51 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-default-1zl7hq, #7d8998);
   min-block-size: var(--size-vertical-input-v5iwwf, 32px);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_has-caret_18eso_1ecvo_168:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_has-caret_18eso_m2fj5_168:not(#\9) {
   padding-inline-end: var(--space-field-icon-offset-csk9vw, 36px);
 }
-.awsui_button-trigger_18eso_1ecvo_101 > .awsui_placeholder_18eso_1ecvo_171:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101 > .awsui_placeholder_18eso_m2fj5_171:not(#\9) {
   color: var(--color-text-input-placeholder-mx1ygd, #5f6b7a);
   font-style: italic;
 }
-.awsui_button-trigger_18eso_1ecvo_101 > .awsui_arrow_18eso_1ecvo_101:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101 > .awsui_arrow_18eso_m2fj5_101:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-field-horizontal-gg19kw, 12px);
   inset-block-start: calc(50% - var(--line-height-body-m-30ar75, 20px) / 2);
   color: var(--color-text-button-inline-icon-default-s3yux9, #0972d3);
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):hover > .awsui_arrow_18eso_1ecvo_101 {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):hover > .awsui_arrow_18eso_m2fj5_101 {
   color: var(--color-text-button-inline-icon-hover-my2daf, #033160);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_pressed_18eso_1ecvo_184 > .awsui_arrow_18eso_1ecvo_101:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_pressed_18eso_m2fj5_184 > .awsui_arrow_18eso_m2fj5_101:not(#\9) {
   transform: rotate(-180deg);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_disabled_18eso_1ecvo_187:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_disabled_18eso_m2fj5_187:not(#\9) {
   background-color: var(--color-background-input-disabled-ab59a3, #e9ebed);
   border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
   color: var(--color-text-input-disabled-f8pjm5, #9ba7b6);
   cursor: auto;
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_disabled_18eso_1ecvo_187 > .awsui_arrow_18eso_1ecvo_101:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_disabled_18eso_m2fj5_187 > .awsui_arrow_18eso_m2fj5_101:not(#\9) {
   color: var(--color-text-button-inline-icon-disabled-mz5gmn, #9ba7b6);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_disabled_18eso_1ecvo_187.awsui_in-filtering-token_18eso_1ecvo_197:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_disabled_18eso_m2fj5_187.awsui_in-filtering-token_18eso_m2fj5_197:not(#\9) {
   border-color: var(--color-border-control-disabled-bv2kkn, #d1d5db);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_disabled_18eso_1ecvo_187 > .awsui_placeholder_18eso_1ecvo_171:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_disabled_18eso_m2fj5_187 > .awsui_placeholder_18eso_m2fj5_171:not(#\9) {
   color: var(--color-text-input-placeholder-disabled-abhb0d, #9ba7b6);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_read-only_18eso_1ecvo_203:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_readonly_18eso_m2fj5_203:not(#\9):not(.awsui_button-trigger_18eso_m2fj5_101.awsui_disabled_18eso_m2fj5_187) {
   background-color: var(--color-background-input-default-igdh5e, #ffffff);
   border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):focus {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197):focus {
   outline: 2px dotted transparent;
   border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-focused-3d15sl, #033160);
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-focused-3d15sl, #033160);
@@ -220,10 +220,10 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101:not(#\
   border-end-end-radius: var(--border-radius-input-plgbrq, 8px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-0ctpjf, 0px) var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197):invalid {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197):invalid {
   box-shadow: none;
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_invalid_18eso_1ecvo_225, .awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_invalid_18eso_1ecvo_225:focus {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_invalid_18eso_m2fj5_225, .awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_invalid_18eso_m2fj5_225:focus {
   color: var(--color-text-status-error-wdvepn, #d91515);
   border-color: var(--color-text-status-error-wdvepn, #d91515);
   padding-inline-start: calc(
@@ -231,10 +231,10 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101:not(#\
 );
   border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_invalid_18eso_1ecvo_225:focus, .awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_invalid_18eso_1ecvo_225:focus:focus {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_invalid_18eso_m2fj5_225:focus, .awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_invalid_18eso_m2fj5_225:focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_warning_18eso_1ecvo_236, .awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_warning_18eso_1ecvo_236:focus {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_warning_18eso_m2fj5_236, .awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_warning_18eso_m2fj5_236:focus {
   color: var(--color-text-status-warning-yik8vi, #8d6605);
   border-color: var(--color-text-status-warning-yik8vi, #8d6605);
   padding-inline-start: calc(
@@ -242,23 +242,23 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101:not(#\
 );
   border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_warning_18eso_1ecvo_236:focus, .awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_warning_18eso_1ecvo_236:focus:focus {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_warning_18eso_m2fj5_236:focus, .awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_warning_18eso_m2fj5_236:focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_in-filtering-token_18eso_1ecvo_197:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_in-filtering-token_18eso_m2fj5_197:not(#\9) {
   border-color: var(--color-border-item-selected-k00wlz, #0972d3);
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   block-size: 100%;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101.awsui_in-filtering-token_18eso_1ecvo_197:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_m2fj5_101.awsui_in-filtering-token_18eso_m2fj5_197:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101.awsui_in-filtering-token_18eso_1ecvo_197:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_m2fj5_101.awsui_in-filtering-token_18eso_m2fj5_197:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-filtering-token-operation-select-focus-outline-gutter-0ailok, -5px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101.awsui_in-filtering-token_18eso_1ecvo_197:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_m2fj5_101.awsui_in-filtering-token_18eso_m2fj5_197:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -272,6 +272,6 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101.awsui_
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_inline-tokens_18eso_1ecvo_274:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_inline-tokens_18eso_m2fj5_274:not(#\9) {
   padding-block: 0;
 }

package/internal/components/button-trigger/styles.selectors.js

@@ -2,16 +2,16 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button-trigger": "awsui_button-trigger_18eso_1ecvo_101",
-  "arrow": "awsui_arrow_18eso_1ecvo_101",
-  "has-caret": "awsui_has-caret_18eso_1ecvo_168",
-  "placeholder": "awsui_placeholder_18eso_1ecvo_171",
-  "pressed": "awsui_pressed_18eso_1ecvo_184",
-  "disabled": "awsui_disabled_18eso_1ecvo_187",
-  "in-filtering-token": "awsui_in-filtering-token_18eso_1ecvo_197",
-  "read-only": "awsui_read-only_18eso_1ecvo_203",
-  "invalid": "awsui_invalid_18eso_1ecvo_225",
-  "warning": "awsui_warning_18eso_1ecvo_236",
-  "inline-tokens": "awsui_inline-tokens_18eso_1ecvo_274"
+  "button-trigger": "awsui_button-trigger_18eso_m2fj5_101",
+  "arrow": "awsui_arrow_18eso_m2fj5_101",
+  "has-caret": "awsui_has-caret_18eso_m2fj5_168",
+  "placeholder": "awsui_placeholder_18eso_m2fj5_171",
+  "pressed": "awsui_pressed_18eso_m2fj5_184",
+  "disabled": "awsui_disabled_18eso_m2fj5_187",
+  "in-filtering-token": "awsui_in-filtering-token_18eso_m2fj5_197",
+  "readonly": "awsui_readonly_18eso_m2fj5_203",
+  "invalid": "awsui_invalid_18eso_m2fj5_225",
+  "warning": "awsui_warning_18eso_m2fj5_236",
+  "inline-tokens": "awsui_inline-tokens_18eso_m2fj5_274"
 };
   

package/internal/components/checkbox-icon/index.d.ts

@@ -4,6 +4,7 @@ export interface CheckboxIconProps extends BaseComponentProps {
     checked?: boolean;
     indeterminate?: boolean;
     disabled?: boolean;
+    readOnly?: boolean;
 }
 export interface Dimension {
     viewBox: string;
@@ -14,6 +15,6 @@ export interface Dimension {
     size: number;
 }
 export declare const dimensionsByTheme: Record<NonNullable<'default' | 'refresh'>, Dimension>;
-declare const CheckboxIcon: ({ checked, indeterminate, disabled, ...restProps }: CheckboxIconProps) => JSX.Element;
+declare const CheckboxIcon: ({ checked, indeterminate, disabled, readOnly, ...restProps }: CheckboxIconProps) => JSX.Element;
 export default CheckboxIcon;
 //# sourceMappingURL=index.d.ts.map

package/internal/components/checkbox-icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAIxE,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG,SAAS,CAAC,EAAE,SAAS,CAiBnF,CAAC;AAEF,QAAA,MAAM,YAAY,uDAAgE,iBAAiB,gBA2BlG,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAIxE,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG,SAAS,CAAC,EAAE,SAAS,CAiBnF,CAAC;AAEF,QAAA,MAAM,YAAY,iEAMf,iBAAiB,gBA+BnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/internal/components/checkbox-icon/index.js

@@ -26,7 +26,7 @@ export const dimensionsByTheme = {
     },
 };
 const CheckboxIcon = (_a) => {
-    var { checked, indeterminate, disabled = false } = _a, restProps = __rest(_a, ["checked", "indeterminate", "disabled"]);
+    var { checked, indeterminate, disabled = false, readOnly = false } = _a, restProps = __rest(_a, ["checked", "indeterminate", "disabled", "readOnly"]);
     const baseProps = getBaseProps(restProps);
     const theme = useVisualRefresh() ? 'refresh' : 'default';
     const dimensions = dimensionsByTheme[theme];
@@ -35,8 +35,12 @@ const CheckboxIcon = (_a) => {
                 [styles['styled-box-checked']]: checked,
                 [styles['styled-box-indeterminate']]: indeterminate,
                 [styles['styled-box-disabled']]: disabled,
+                [styles['styled-box-readonly']]: readOnly,
             }), x: dimensions.xy, y: dimensions.xy, rx: dimensions.r, ry: dimensions.r, width: dimensions.size, height: dimensions.size }),
-        checked || indeterminate ? (React.createElement("polyline", { className: clsx(styles['styled-line'], { [styles['styled-line-disabled']]: disabled }), points: indeterminate ? dimensions.indeterminate : dimensions.checked })) : null));
+        checked || indeterminate ? (React.createElement("polyline", { className: clsx(styles['styled-line'], {
+                [styles['styled-line-disabled']]: disabled,
+                [styles['styled-line-readonly']]: readOnly,
+            }), points: indeterminate ? dimensions.indeterminate : dimensions.checked })) : null));
 };
 export default CheckboxIcon;
 //# sourceMappingURL=index.js.map

package/internal/components/checkbox-icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAgBrC,6CAA6C;AAC7C,MAAM,CAAC,MAAM,iBAAiB,GAA0D;IACtF,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE,cAAc;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,EAAE,EAAE,GAAG;QACP,CAAC,EAAE,GAAG;QACN,IAAI,EAAE,EAAE;KACT;IACD,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE,cAAc;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,EAAE,EAAE,CAAC;QACL,CAAC,EAAE,CAAC;QACJ,IAAI,EAAE,EAAE;KACT;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EAA6E,EAAE,EAAE;QAAjF,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,GAAG,KAAK,OAAmC,EAA9B,SAAS,cAAxD,wCAA0D,CAAF;IAC5E,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,MAAM,UAAU,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,2CAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,OAAO,iBAAc,MAAM,EAAC,SAAS,EAAC,OAAO,IAAK,SAAS;QAC1G,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;gBACpC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,OAAO;gBACvC,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,aAAa;gBACnD,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,QAAQ;aAC1C,CAAC,EACF,CAAC,EAAE,UAAU,CAAC,EAAE,EAChB,CAAC,EAAE,UAAU,CAAC,EAAE,EAChB,EAAE,EAAE,UAAU,CAAC,CAAC,EAChB,EAAE,EAAE,UAAU,CAAC,CAAC,EAChB,KAAK,EAAE,UAAU,CAAC,IAAI,EACtB,MAAM,EAAE,UAAU,CAAC,IAAI,GACvB;QACD,OAAO,IAAI,aAAa,CAAC,CAAC,CAAC,CAC1B,kCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EACtF,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,GACrE,CACH,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface CheckboxIconProps extends BaseComponentProps {\n  checked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n}\nexport interface Dimension {\n  viewBox: string;\n  indeterminate: string;\n  checked: string;\n  xy: number;\n  r: number;\n  size: number;\n}\n\n// Can't use css variables for svg attributes\nexport const dimensionsByTheme: Record<NonNullable<'default' | 'refresh'>, Dimension> = {\n  default: {\n    viewBox: '0 0 14 14',\n    indeterminate: '2.5,7 11.5,7',\n    checked: '2.5,7 6,10 11,3',\n    xy: 0.5,\n    r: 1.5,\n    size: 13,\n  },\n  refresh: {\n    viewBox: '0 0 16 16',\n    indeterminate: '3.5,8 12.5,8',\n    checked: '3.5,8 7,11 12,4',\n    xy: 1,\n    r: 2,\n    size: 14,\n  },\n};\n\nconst CheckboxIcon = ({ checked, indeterminate, disabled = false, ...restProps }: CheckboxIconProps) => {\n  const baseProps = getBaseProps(restProps);\n  const theme = useVisualRefresh() ? 'refresh' : 'default';\n  const dimensions = dimensionsByTheme[theme];\n  return (\n    <svg className={styles.root} viewBox={dimensions.viewBox} aria-hidden=\"true\" focusable=\"false\" {...baseProps}>\n      <rect\n        className={clsx(styles['styled-box'], {\n          [styles['styled-box-checked']]: checked,\n          [styles['styled-box-indeterminate']]: indeterminate,\n          [styles['styled-box-disabled']]: disabled,\n        })}\n        x={dimensions.xy}\n        y={dimensions.xy}\n        rx={dimensions.r}\n        ry={dimensions.r}\n        width={dimensions.size}\n        height={dimensions.size}\n      />\n      {checked || indeterminate ? (\n        <polyline\n          className={clsx(styles['styled-line'], { [styles['styled-line-disabled']]: disabled })}\n          points={indeterminate ? dimensions.indeterminate : dimensions.checked}\n        />\n      ) : null}\n    </svg>\n  );\n};\n\nexport default CheckboxIcon;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAiBrC,6CAA6C;AAC7C,MAAM,CAAC,MAAM,iBAAiB,GAA0D;IACtF,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE,cAAc;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,EAAE,EAAE,GAAG;QACP,CAAC,EAAE,GAAG;QACN,IAAI,EAAE,EAAE;KACT;IACD,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE,cAAc;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,EAAE,EAAE,CAAC;QACL,CAAC,EAAE,CAAC;QACJ,IAAI,EAAE,EAAE;KACT;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EAMF,EAAE,EAAE;QANF,EACpB,OAAO,EACP,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,OAEE,EADf,SAAS,cALQ,oDAMrB,CADa;IAEZ,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,MAAM,UAAU,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,2CAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,OAAO,iBAAc,MAAM,EAAC,SAAS,EAAC,OAAO,IAAK,SAAS;QAC1G,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;gBACpC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,OAAO;gBACvC,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,aAAa;gBACnD,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,QAAQ;gBACzC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,QAAQ;aAC1C,CAAC,EACF,CAAC,EAAE,UAAU,CAAC,EAAE,EAChB,CAAC,EAAE,UAAU,CAAC,EAAE,EAChB,EAAE,EAAE,UAAU,CAAC,CAAC,EAChB,EAAE,EAAE,UAAU,CAAC,CAAC,EAChB,KAAK,EAAE,UAAU,CAAC,IAAI,EACtB,MAAM,EAAE,UAAU,CAAC,IAAI,GACvB;QACD,OAAO,IAAI,aAAa,CAAC,CAAC,CAAC,CAC1B,kCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE;gBACrC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,QAAQ;gBAC1C,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,QAAQ;aAC3C,CAAC,EACF,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,GACrE,CACH,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface CheckboxIconProps extends BaseComponentProps {\n  checked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n}\nexport interface Dimension {\n  viewBox: string;\n  indeterminate: string;\n  checked: string;\n  xy: number;\n  r: number;\n  size: number;\n}\n\n// Can't use css variables for svg attributes\nexport const dimensionsByTheme: Record<NonNullable<'default' | 'refresh'>, Dimension> = {\n  default: {\n    viewBox: '0 0 14 14',\n    indeterminate: '2.5,7 11.5,7',\n    checked: '2.5,7 6,10 11,3',\n    xy: 0.5,\n    r: 1.5,\n    size: 13,\n  },\n  refresh: {\n    viewBox: '0 0 16 16',\n    indeterminate: '3.5,8 12.5,8',\n    checked: '3.5,8 7,11 12,4',\n    xy: 1,\n    r: 2,\n    size: 14,\n  },\n};\n\nconst CheckboxIcon = ({\n  checked,\n  indeterminate,\n  disabled = false,\n  readOnly = false,\n  ...restProps\n}: CheckboxIconProps) => {\n  const baseProps = getBaseProps(restProps);\n  const theme = useVisualRefresh() ? 'refresh' : 'default';\n  const dimensions = dimensionsByTheme[theme];\n  return (\n    <svg className={styles.root} viewBox={dimensions.viewBox} aria-hidden=\"true\" focusable=\"false\" {...baseProps}>\n      <rect\n        className={clsx(styles['styled-box'], {\n          [styles['styled-box-checked']]: checked,\n          [styles['styled-box-indeterminate']]: indeterminate,\n          [styles['styled-box-disabled']]: disabled,\n          [styles['styled-box-readonly']]: readOnly,\n        })}\n        x={dimensions.xy}\n        y={dimensions.xy}\n        rx={dimensions.r}\n        ry={dimensions.r}\n        width={dimensions.size}\n        height={dimensions.size}\n      />\n      {checked || indeterminate ? (\n        <polyline\n          className={clsx(styles['styled-line'], {\n            [styles['styled-line-disabled']]: disabled,\n            [styles['styled-line-readonly']]: readOnly,\n          })}\n          points={indeterminate ? dimensions.indeterminate : dimensions.checked}\n        />\n      ) : null}\n    </svg>\n  );\n};\n\nexport default CheckboxIcon;\n"]}

package/internal/components/checkbox-icon/styles.css.js

@@ -1,12 +1,14 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1fn7j_qlcjn_97",
-  "styled-box": "awsui_styled-box_1fn7j_qlcjn_104",
-  "styled-box-checked": "awsui_styled-box-checked_1fn7j_qlcjn_110",
-  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_qlcjn_110",
-  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_qlcjn_114",
-  "styled-line": "awsui_styled-line_1fn7j_qlcjn_128",
-  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_qlcjn_133"
+  "root": "awsui_root_1fn7j_1yjhw_97",
+  "styled-box": "awsui_styled-box_1fn7j_1yjhw_104",
+  "styled-box-checked": "awsui_styled-box-checked_1fn7j_1yjhw_110",
+  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_1yjhw_110",
+  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_1yjhw_114",
+  "styled-box-readonly": "awsui_styled-box-readonly_1fn7j_1yjhw_114",
+  "styled-line": "awsui_styled-line_1fn7j_1yjhw_128",
+  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_1yjhw_133",
+  "styled-line-readonly": "awsui_styled-line-readonly_1fn7j_1yjhw_136"
 };
   

package/internal/components/checkbox-icon/styles.scoped.css

@@ -94,42 +94,45 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1fn7j_qlcjn_97:not(#\9) {
+.awsui_root_1fn7j_1yjhw_97:not(#\9) {
   position: absolute;
   inline-size: 100%;
   block-size: 100%;
   inset-block-start: 0;
   inset-inline-start: 0;
 }
-.awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box_1fn7j_qlcjn_104:not(#\9) {
+.awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box_1fn7j_1yjhw_104:not(#\9) {
   fill: var(--color-background-control-default-qzruqy, #ffffff);
   stroke: var(--color-border-control-default-0fzxw0, #7d8998);
   stroke-width: var(--border-field-width-09w7vk, 2px);
   transition: fill var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear), stroke var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
 }
-.awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box-checked_1fn7j_qlcjn_110:not(#\9), .awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box-indeterminate_1fn7j_qlcjn_110:not(#\9) {
+.awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box-checked_1fn7j_1yjhw_110:not(#\9), .awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box-indeterminate_1fn7j_1yjhw_110:not(#\9) {
   fill: var(--color-background-control-checked-w517i0, #0972d3);
   stroke: var(--color-border-control-checked-wlsmbn, #0972d3);
 }
-.awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box-disabled_1fn7j_qlcjn_114:not(#\9) {
+.awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box-disabled_1fn7j_1yjhw_114:not(#\9), .awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box-readonly_1fn7j_1yjhw_114:not(#\9) {
   fill: var(--color-background-control-disabled-pwkvgd, #d1d5db);
   stroke: var(--color-border-control-disabled-bv2kkn, #d1d5db);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box_1fn7j_qlcjn_104:not(#\9) {
+  .awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box_1fn7j_1yjhw_104:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box_1fn7j_qlcjn_104:not(#\9), .awsui-mode-entering .awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box_1fn7j_qlcjn_104:not(#\9) {
+.awsui-motion-disabled .awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box_1fn7j_1yjhw_104:not(#\9), .awsui-mode-entering .awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box_1fn7j_1yjhw_104:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_root_1fn7j_qlcjn_97 > .awsui_styled-line_1fn7j_qlcjn_128:not(#\9) {
+.awsui_root_1fn7j_1yjhw_97 > .awsui_styled-line_1fn7j_1yjhw_128:not(#\9) {
   stroke: var(--color-foreground-control-default-wq2gpa, #ffffff);
   stroke-width: 2;
   fill: none;
 }
-.awsui_root_1fn7j_qlcjn_97 > .awsui_styled-line-disabled_1fn7j_qlcjn_133:not(#\9) {
+.awsui_root_1fn7j_1yjhw_97 > .awsui_styled-line-disabled_1fn7j_1yjhw_133:not(#\9) {
   stroke: var(--color-foreground-control-disabled-zmz2k2, #ffffff);
+}
+.awsui_root_1fn7j_1yjhw_97 > .awsui_styled-line-readonly_1fn7j_1yjhw_136:not(#\9) {
+  stroke: var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
 }

package/internal/components/checkbox-icon/styles.selectors.js

@@ -2,12 +2,14 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1fn7j_qlcjn_97",
-  "styled-box": "awsui_styled-box_1fn7j_qlcjn_104",
-  "styled-box-checked": "awsui_styled-box-checked_1fn7j_qlcjn_110",
-  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_qlcjn_110",
-  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_qlcjn_114",
-  "styled-line": "awsui_styled-line_1fn7j_qlcjn_128",
-  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_qlcjn_133"
+  "root": "awsui_root_1fn7j_1yjhw_97",
+  "styled-box": "awsui_styled-box_1fn7j_1yjhw_104",
+  "styled-box-checked": "awsui_styled-box-checked_1fn7j_1yjhw_110",
+  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_1yjhw_110",
+  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_1yjhw_114",
+  "styled-box-readonly": "awsui_styled-box-readonly_1fn7j_1yjhw_114",
+  "styled-line": "awsui_styled-line_1fn7j_1yjhw_128",
+  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_1yjhw_133",
+  "styled-line-readonly": "awsui_styled-line-readonly_1fn7j_1yjhw_136"
 };
   

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (7ab93c5b)";
+export var PACKAGE_VERSION = "3.0.0 (c5cfbc0a)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (7ab93c5b)",
+  "PACKAGE_VERSION": "3.0.0 (c5cfbc0a)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/internal/generated/styles/tokens.d.ts

@@ -350,6 +350,7 @@ export const colorBorderTilesDisabled: string;
 export const colorBorderTutorial: string;
 export const colorForegroundControlDefault: string;
 export const colorForegroundControlDisabled: string;
+export const colorForegroundControlReadOnly: string;
 export const colorShadowDefault: string;
 export const colorShadowMedium: string;
 export const colorShadowSide: string;

package/internal/generated/styles/tokens.js

@@ -350,6 +350,7 @@ export var colorBorderTilesDisabled = "var(--color-border-tiles-disabled-q5e1so,
 export var colorBorderTutorial = "var(--color-border-tutorial-kk53ya, #d1d5db)";
 export var colorForegroundControlDefault = "var(--color-foreground-control-default-wq2gpa, #ffffff)";
 export var colorForegroundControlDisabled = "var(--color-foreground-control-disabled-zmz2k2, #ffffff)";
+export var colorForegroundControlReadOnly = "var(--color-foreground-control-read-only-ibiswj, #5f6b7a)";
 export var colorShadowDefault = "var(--color-shadow-default-8jp634, rgba(0, 7, 22, 0.12))";
 export var colorShadowMedium = "var(--color-shadow-medium-wuskz4, rgba(0, 7, 22, 0.12))";
 export var colorShadowSide = "var(--color-shadow-side-75ahs7, rgba(0, 7, 22, 0.12))";

package/internal/generated/theming/index.cjs

@@ -1285,6 +1285,10 @@ module.exports.preset = {
         "light": "{colorWhite}",
         "dark": "{colorGrey800}"
       },
+      "colorForegroundControlReadOnly": {
+        "light": "{colorGrey550}",
+        "dark": "{colorGrey450}"
+      },
       "colorShadowDefault": {
         "light": "{colorGreyTransparentHeavy}",
         "dark": "{colorGreyTransparentHeavy}"
@@ -3431,6 +3435,10 @@ module.exports.preset = {
             "light": "{colorGrey800}",
             "dark": "{colorGrey800}"
           },
+          "colorForegroundControlReadOnly": {
+            "light": "{colorGrey450}",
+            "dark": "{colorGrey450}"
+          },
           "colorShadowDefault": {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
@@ -4497,6 +4505,10 @@ module.exports.preset = {
             "light": "{colorGrey800}",
             "dark": "{colorGrey800}"
           },
+          "colorForegroundControlReadOnly": {
+            "light": "{colorGrey450}",
+            "dark": "{colorGrey450}"
+          },
           "colorShadowDefault": {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
@@ -5495,6 +5507,10 @@ module.exports.preset = {
             "light": "{colorWhite}",
             "dark": "{colorGrey800}"
           },
+          "colorForegroundControlReadOnly": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey450}"
+          },
           "colorShadowDefault": {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
@@ -6493,6 +6509,10 @@ module.exports.preset = {
             "light": "{colorWhite}",
             "dark": "{colorGrey800}"
           },
+          "colorForegroundControlReadOnly": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey450}"
+          },
           "colorShadowDefault": {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
@@ -7491,6 +7511,10 @@ module.exports.preset = {
             "light": "{colorWhite}",
             "dark": "{colorGrey800}"
           },
+          "colorForegroundControlReadOnly": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey450}"
+          },
           "colorShadowDefault": {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
@@ -8491,6 +8515,10 @@ module.exports.preset = {
             "light": "{colorGrey800}",
             "dark": "{colorGrey800}"
           },
+          "colorForegroundControlReadOnly": {
+            "light": "{colorGrey450}",
+            "dark": "{colorGrey450}"
+          },
           "colorShadowDefault": {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
@@ -9209,6 +9237,7 @@ module.exports.preset = {
       "colorBorderTutorial": "color",
       "colorForegroundControlDefault": "color",
       "colorForegroundControlDisabled": "color",
+      "colorForegroundControlReadOnly": "color",
       "colorShadowDefault": "color",
       "colorShadowMedium": "color",
       "colorShadowSide": "color",
@@ -9610,6 +9639,7 @@ module.exports.preset = {
     "colorBorderStatusWarning",
     "colorForegroundControlDefault",
     "colorForegroundControlDisabled",
+    "colorForegroundControlReadOnly",
     "colorTextAccent",
     "colorTextBodyDefault",
     "colorTextBodySecondary",
@@ -9928,6 +9958,7 @@ module.exports.preset = {
     "colorBorderStatusWarning",
     "colorForegroundControlDefault",
     "colorForegroundControlDisabled",
+    "colorForegroundControlReadOnly",
     "colorTextAccent",
     "colorTextBodyDefault",
     "colorTextBodySecondary",
@@ -10409,6 +10440,7 @@ module.exports.preset = {
     "colorBorderTutorial": "color-border-tutorial",
     "colorForegroundControlDefault": "color-foreground-control-default",
     "colorForegroundControlDisabled": "color-foreground-control-disabled",
+    "colorForegroundControlReadOnly": "color-foreground-control-read-only",
     "colorShadowDefault": "color-shadow-default",
     "colorShadowMedium": "color-shadow-medium",
     "colorShadowSide": "color-shadow-side",
@@ -11118,6 +11150,7 @@ module.exports.preset = {
     "colorBorderTutorial": "--color-border-tutorial-kk53ya",
     "colorForegroundControlDefault": "--color-foreground-control-default-wq2gpa",
     "colorForegroundControlDisabled": "--color-foreground-control-disabled-zmz2k2",
+    "colorForegroundControlReadOnly": "--color-foreground-control-read-only-ibiswj",
     "colorShadowDefault": "--color-shadow-default-8jp634",
     "colorShadowMedium": "--color-shadow-medium-wuskz4",
     "colorShadowSide": "--color-shadow-side-75ahs7",

package/internal/generated/theming/index.cjs.d.ts

@@ -130,6 +130,7 @@ export declare interface TypedOverride {
     colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
     colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
     colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+    colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
     colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
     colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
     colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -353,6 +354,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -576,6 +578,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -799,6 +802,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1022,6 +1026,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1245,6 +1250,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1468,6 +1474,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1691,6 +1698,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;