@cloudscape-design/components-themeable 3.0.639 → 3.0.641

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

@@ -100,16 +100,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_hg5jk_103 > .awsui_arrow_18eso_hg5jk_103:not(#\9) {
+.awsui_button-trigger_18eso_tpyw0_103 > .awsui_arrow_18eso_tpyw0_103:not(#\9) {
   transition: transform var(--motion-duration-rotate-180-6z1h8e, 135ms) var(--motion-easing-rotate-180-l3wboa, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_button-trigger_18eso_hg5jk_103 > .awsui_arrow_18eso_hg5jk_103:not(#\9) {
+  .awsui_button-trigger_18eso_tpyw0_103 > .awsui_arrow_18eso_tpyw0_103:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_button-trigger_18eso_hg5jk_103 > .awsui_arrow_18eso_hg5jk_103:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_hg5jk_103 > .awsui_arrow_18eso_hg5jk_103:not(#\9) {
+.awsui-motion-disabled .awsui_button-trigger_18eso_tpyw0_103 > .awsui_arrow_18eso_tpyw0_103:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_tpyw0_103 > .awsui_arrow_18eso_tpyw0_103:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -118,7 +118,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_hg5jk_103:not(#\9) {
+.awsui_button-trigger_18eso_tpyw0_103:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -168,51 +168,51 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-default-aksbt5, #687078);
   min-block-size: var(--size-vertical-input-ubbp77, 32px);
 }
-.awsui_button-trigger_18eso_hg5jk_103.awsui_has-caret_18eso_hg5jk_170:not(#\9) {
+.awsui_button-trigger_18eso_tpyw0_103.awsui_has-caret_18eso_tpyw0_170:not(#\9) {
   padding-inline-end: var(--space-field-icon-offset-llp3ak, 32px);
 }
-.awsui_button-trigger_18eso_hg5jk_103 > .awsui_placeholder_18eso_hg5jk_173:not(#\9) {
+.awsui_button-trigger_18eso_tpyw0_103 > .awsui_placeholder_18eso_tpyw0_173:not(#\9) {
   color: var(--color-text-input-placeholder-epedqe, #687078);
   font-style: italic;
 }
-.awsui_button-trigger_18eso_hg5jk_103 > .awsui_arrow_18eso_hg5jk_103:not(#\9) {
+.awsui_button-trigger_18eso_tpyw0_103 > .awsui_arrow_18eso_tpyw0_103:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-field-horizontal-cy5q05, 8px);
   inset-block-start: calc(50% - var(--line-height-body-m-2zx78l, 22px) / 2);
   color: var(--color-text-button-inline-icon-default-870ilx, #545b64);
 }
-.awsui_button-trigger_18eso_hg5jk_103:not(#\9):hover > .awsui_arrow_18eso_hg5jk_103 {
+.awsui_button-trigger_18eso_tpyw0_103:not(#\9):hover > .awsui_arrow_18eso_tpyw0_103 {
   color: var(--color-text-button-inline-icon-hover-gmrtb4, #16191f);
 }
-.awsui_button-trigger_18eso_hg5jk_103.awsui_pressed_18eso_hg5jk_186 > .awsui_arrow_18eso_hg5jk_103:not(#\9) {
+.awsui_button-trigger_18eso_tpyw0_103.awsui_pressed_18eso_tpyw0_186 > .awsui_arrow_18eso_tpyw0_103:not(#\9) {
   transform: rotate(-180deg);
 }
-.awsui_button-trigger_18eso_hg5jk_103.awsui_disabled_18eso_hg5jk_189:not(#\9) {
+.awsui_button-trigger_18eso_tpyw0_103.awsui_disabled_18eso_tpyw0_189:not(#\9) {
   background-color: var(--color-background-input-disabled-zfoobi, #eaeded);
   border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
   color: var(--color-text-input-disabled-c1yp62, #879596);
   cursor: auto;
 }
-.awsui_button-trigger_18eso_hg5jk_103.awsui_disabled_18eso_hg5jk_189 > .awsui_arrow_18eso_hg5jk_103:not(#\9) {
+.awsui_button-trigger_18eso_tpyw0_103.awsui_disabled_18eso_tpyw0_189 > .awsui_arrow_18eso_tpyw0_103:not(#\9) {
   color: var(--color-text-button-inline-icon-disabled-m6lq35, #aab7b8);
 }
-.awsui_button-trigger_18eso_hg5jk_103.awsui_disabled_18eso_hg5jk_189.awsui_in-filtering-token_18eso_hg5jk_199:not(#\9) {
+.awsui_button-trigger_18eso_tpyw0_103.awsui_disabled_18eso_tpyw0_189.awsui_in-filtering-token_18eso_tpyw0_199:not(#\9) {
   border-color: var(--color-border-control-disabled-4hz3mo, #d5dbdb);
 }
-.awsui_button-trigger_18eso_hg5jk_103.awsui_disabled_18eso_hg5jk_189 > .awsui_placeholder_18eso_hg5jk_173:not(#\9) {
+.awsui_button-trigger_18eso_tpyw0_103.awsui_disabled_18eso_tpyw0_189 > .awsui_placeholder_18eso_tpyw0_173:not(#\9) {
   color: var(--color-text-input-placeholder-disabled-ovndcz, #687078);
 }
-.awsui_button-trigger_18eso_hg5jk_103.awsui_read-only_18eso_hg5jk_205:not(#\9) {
+.awsui_button-trigger_18eso_tpyw0_103.awsui_read-only_18eso_tpyw0_205:not(#\9) {
   background-color: var(--color-background-input-default-w7mbz6, #ffffff);
   border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
 }
-.awsui_button-trigger_18eso_hg5jk_103:not(#\9):focus {
+.awsui_button-trigger_18eso_tpyw0_103:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_hg5jk_103:not(#\9):not(.awsui_in-filtering-token_18eso_hg5jk_199):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_tpyw0_103:not(#\9):not(.awsui_in-filtering-token_18eso_tpyw0_199):focus {
   outline: 2px dotted transparent;
   border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-focused-v6z9fd, #0073bb);
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-focused-v6z9fd, #0073bb);
@@ -222,10 +222,10 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_hg5jk_103:not(#\
   border-end-end-radius: var(--border-radius-input-hy50dp, 2px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-0k725q, 1px) var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_button-trigger_18eso_hg5jk_103:not(#\9):not(.awsui_in-filtering-token_18eso_hg5jk_199):invalid {
+.awsui_button-trigger_18eso_tpyw0_103:not(#\9):not(.awsui_in-filtering-token_18eso_tpyw0_199):invalid {
   box-shadow: none;
 }
-.awsui_button-trigger_18eso_hg5jk_103:not(#\9):not(.awsui_in-filtering-token_18eso_hg5jk_199).awsui_invalid_18eso_hg5jk_227, .awsui_button-trigger_18eso_hg5jk_103:not(#\9):not(.awsui_in-filtering-token_18eso_hg5jk_199).awsui_invalid_18eso_hg5jk_227:focus {
+.awsui_button-trigger_18eso_tpyw0_103:not(#\9):not(.awsui_in-filtering-token_18eso_tpyw0_199).awsui_invalid_18eso_tpyw0_227, .awsui_button-trigger_18eso_tpyw0_103:not(#\9):not(.awsui_in-filtering-token_18eso_tpyw0_199).awsui_invalid_18eso_tpyw0_227:focus {
   color: var(--color-text-status-error-ofc4yr, #d13212);
   border-color: var(--color-text-status-error-ofc4yr, #d13212);
   padding-inline-start: calc(
@@ -233,23 +233,34 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_hg5jk_103:not(#\
 );
   border-inline-start-width: var(--border-invalid-width-hp6noi, 4px);
 }
-.awsui_button-trigger_18eso_hg5jk_103:not(#\9):not(.awsui_in-filtering-token_18eso_hg5jk_199).awsui_invalid_18eso_hg5jk_227:focus, .awsui_button-trigger_18eso_hg5jk_103:not(#\9):not(.awsui_in-filtering-token_18eso_hg5jk_199).awsui_invalid_18eso_hg5jk_227:focus:focus {
+.awsui_button-trigger_18eso_tpyw0_103:not(#\9):not(.awsui_in-filtering-token_18eso_tpyw0_199).awsui_invalid_18eso_tpyw0_227:focus, .awsui_button-trigger_18eso_tpyw0_103:not(#\9):not(.awsui_in-filtering-token_18eso_tpyw0_199).awsui_invalid_18eso_tpyw0_227:focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-v3635w, 1px) var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_button-trigger_18eso_hg5jk_103.awsui_in-filtering-token_18eso_hg5jk_199:not(#\9) {
+.awsui_button-trigger_18eso_tpyw0_103:not(#\9):not(.awsui_in-filtering-token_18eso_tpyw0_199).awsui_warning_18eso_tpyw0_238, .awsui_button-trigger_18eso_tpyw0_103:not(#\9):not(.awsui_in-filtering-token_18eso_tpyw0_199).awsui_warning_18eso_tpyw0_238:focus {
+  color: var(--color-text-status-warning-azn00c, #906806);
+  border-color: var(--color-text-status-warning-azn00c, #906806);
+  padding-inline-start: calc(
+  var(--space-field-horizontal-cy5q05, 8px) - (var(--border-invalid-width-hp6noi, 4px) - var(--border-field-width-yoy972, 1px))
+);
+  border-inline-start-width: var(--border-invalid-width-hp6noi, 4px);
+}
+.awsui_button-trigger_18eso_tpyw0_103:not(#\9):not(.awsui_in-filtering-token_18eso_tpyw0_199).awsui_warning_18eso_tpyw0_238:focus, .awsui_button-trigger_18eso_tpyw0_103:not(#\9):not(.awsui_in-filtering-token_18eso_tpyw0_199).awsui_warning_18eso_tpyw0_238:focus:focus {
+  box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-v3635w, 1px) var(--color-border-item-focused-v8nq2m, #0073bb);
+}
+.awsui_button-trigger_18eso_tpyw0_103.awsui_in-filtering-token_18eso_tpyw0_199:not(#\9) {
   border-color: var(--color-border-item-selected-20gejb, #0073bb);
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   block-size: 100%;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_hg5jk_103.awsui_in-filtering-token_18eso_hg5jk_199:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_tpyw0_103.awsui_in-filtering-token_18eso_tpyw0_199:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_hg5jk_103.awsui_in-filtering-token_18eso_hg5jk_199:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_tpyw0_103.awsui_in-filtering-token_18eso_tpyw0_199:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-filtering-token-operation-select-focus-outline-gutter-lr5vk6, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_hg5jk_103.awsui_in-filtering-token_18eso_hg5jk_199:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_tpyw0_103.awsui_in-filtering-token_18eso_tpyw0_199:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -263,6 +274,6 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_hg5jk_103.awsui_
   border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_button-trigger_18eso_hg5jk_103.awsui_inline-tokens_18eso_hg5jk_265:not(#\9) {
+.awsui_button-trigger_18eso_tpyw0_103.awsui_inline-tokens_18eso_tpyw0_276:not(#\9) {
   padding-block: 0;
 }

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

@@ -2,15 +2,16 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button-trigger": "awsui_button-trigger_18eso_hg5jk_103",
-  "arrow": "awsui_arrow_18eso_hg5jk_103",
-  "has-caret": "awsui_has-caret_18eso_hg5jk_170",
-  "placeholder": "awsui_placeholder_18eso_hg5jk_173",
-  "pressed": "awsui_pressed_18eso_hg5jk_186",
-  "disabled": "awsui_disabled_18eso_hg5jk_189",
-  "in-filtering-token": "awsui_in-filtering-token_18eso_hg5jk_199",
-  "read-only": "awsui_read-only_18eso_hg5jk_205",
-  "invalid": "awsui_invalid_18eso_hg5jk_227",
-  "inline-tokens": "awsui_inline-tokens_18eso_hg5jk_265"
+  "button-trigger": "awsui_button-trigger_18eso_tpyw0_103",
+  "arrow": "awsui_arrow_18eso_tpyw0_103",
+  "has-caret": "awsui_has-caret_18eso_tpyw0_170",
+  "placeholder": "awsui_placeholder_18eso_tpyw0_173",
+  "pressed": "awsui_pressed_18eso_tpyw0_186",
+  "disabled": "awsui_disabled_18eso_tpyw0_189",
+  "in-filtering-token": "awsui_in-filtering-token_18eso_tpyw0_199",
+  "read-only": "awsui_read-only_18eso_tpyw0_205",
+  "invalid": "awsui_invalid_18eso_tpyw0_227",
+  "warning": "awsui_warning_18eso_tpyw0_238",
+  "inline-tokens": "awsui_inline-tokens_18eso_tpyw0_276"
 };
   

package/lib/internal/template/internal/context/form-field-context.d.ts

@@ -30,7 +30,7 @@ export interface FormFieldControlProps {
      */
     ariaDescribedby?: string;
 }
-export interface FormFieldValidationControlProps extends FormFieldControlProps {
+export interface FormFieldCommonValidationControlProps extends FormFieldControlProps {
     /**
      * Overrides the invalidation state. Usually the invalid state
      * comes from the parent `FormField`component,
@@ -40,6 +40,19 @@ export interface FormFieldValidationControlProps extends FormFieldControlProps {
      */
     invalid?: boolean;
 }
+export interface FormFieldValidationControlProps extends FormFieldCommonValidationControlProps {
+    /**
+     * Overrides the warning state. Usually the warning state
+     * comes from the parent `FormField`component,
+     * however sometimes you need to override its
+     * state when you have more than one input within a
+     * single form field.
+     * When you use it, provide additional context with
+     * information on the input state, and associate it
+     * with the input using `ariaDescribedby`.
+     */
+    warning?: boolean;
+}
 export declare const FormFieldContext: import("react").Context<FormFieldValidationControlProps>;
 export declare function useFormFieldContext(props: FormFieldValidationControlProps): FormFieldValidationControlProps;
 //# sourceMappingURL=form-field-context.d.ts.map

package/lib/internal/template/internal/context/form-field-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/form-field-context.ts"],"names":[],"mappings":";AAIA,MAAM,WAAW,qBAAqB;IACpC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,+BAAgC,SAAQ,qBAAqB;IAC5E;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB,0DAAqD,CAAC;AAUnF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,+BAA+B,mCAGzE"}
+{"version":3,"file":"form-field-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/form-field-context.ts"],"names":[],"mappings":";AAIA,MAAM,WAAW,qBAAqB;IACpC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,qCAAsC,SAAQ,qBAAqB;IAClF;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,+BAAgC,SAAQ,qCAAqC;IAC5F;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB,0DAAqD,CAAC;AAUnF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,+BAA+B,mCAGzE"}

package/lib/internal/template/internal/context/form-field-context.js

@@ -11,6 +11,6 @@ function applyDefault(fields, defaults, keys) {
 }
 export function useFormFieldContext(props) {
     const context = useContext(FormFieldContext);
-    return applyDefault(props, context, ['invalid', 'controlId', 'ariaLabelledby', 'ariaDescribedby']);
+    return applyDefault(props, context, ['invalid', 'warning', 'controlId', 'ariaLabelledby', 'ariaDescribedby']);
 }
 //# sourceMappingURL=form-field-context.js.map

package/lib/internal/template/internal/context/form-field-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field-context.js","sourceRoot":"","sources":["../../../../src/internal/context/form-field-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AA+ClD,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAkC,EAAE,CAAC,CAAC;AAEnF,SAAS,YAAY,CAAI,MAAS,EAAE,QAAW,EAAE,IAAiB;IAChE,MAAM,MAAM,GAAM,EAAE,CAAC;IACrB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QACjB,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACxE,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAsC;IACxE,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC7C,OAAO,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,iBAAiB,CAAC,CAAC,CAAC;AACrG,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, createContext } from 'react';\n\nexport interface FormFieldControlProps {\n  /**\n   * Specifies the ID of the native form element. You can use it to relate\n   * a label element's `for` attribute to this control.\n   *\n   * It defaults to an automatically generated ID that\n   * is provided by its parent form field component.\n   */\n  controlId?: string;\n\n  /**\n   * Adds `aria-labelledby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for the element you want to use as label and set the property to that ID.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Adds `aria-describedby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for each element that you want to use as a description\n   * and set the property to a string of each ID separated by spaces (for example, `\"id1 id2 id3\"`).\n   */\n  ariaDescribedby?: string;\n}\n\nexport interface FormFieldValidationControlProps extends FormFieldControlProps {\n  /**\n   * Overrides the invalidation state. Usually the invalid state\n   * comes from the parent `FormField`component,\n   * however sometimes you need to override its\n   * state when you have more than one input within a\n   * single form field.\n   */\n  invalid?: boolean;\n}\n\nexport const FormFieldContext = createContext<FormFieldValidationControlProps>({});\n\nfunction applyDefault<T>(fields: T, defaults: T, keys: (keyof T)[]) {\n  const result = <T>{};\n  keys.forEach(key => {\n    result[key] = fields[key] === undefined ? defaults[key] : fields[key];\n  });\n  return result;\n}\n\nexport function useFormFieldContext(props: FormFieldValidationControlProps) {\n  const context = useContext(FormFieldContext);\n  return applyDefault(props, context, ['invalid', 'controlId', 'ariaLabelledby', 'ariaDescribedby']);\n}\n"]}
+{"version":3,"file":"form-field-context.js","sourceRoot":"","sources":["../../../../src/internal/context/form-field-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AA6DlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAkC,EAAE,CAAC,CAAC;AAEnF,SAAS,YAAY,CAAI,MAAS,EAAE,QAAW,EAAE,IAAiB;IAChE,MAAM,MAAM,GAAM,EAAE,CAAC;IACrB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QACjB,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACxE,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAsC;IACxE,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC7C,OAAO,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAChH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, createContext } from 'react';\n\nexport interface FormFieldControlProps {\n  /**\n   * Specifies the ID of the native form element. You can use it to relate\n   * a label element's `for` attribute to this control.\n   *\n   * It defaults to an automatically generated ID that\n   * is provided by its parent form field component.\n   */\n  controlId?: string;\n\n  /**\n   * Adds `aria-labelledby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for the element you want to use as label and set the property to that ID.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Adds `aria-describedby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for each element that you want to use as a description\n   * and set the property to a string of each ID separated by spaces (for example, `\"id1 id2 id3\"`).\n   */\n  ariaDescribedby?: string;\n}\n\nexport interface FormFieldCommonValidationControlProps extends FormFieldControlProps {\n  /**\n   * Overrides the invalidation state. Usually the invalid state\n   * comes from the parent `FormField`component,\n   * however sometimes you need to override its\n   * state when you have more than one input within a\n   * single form field.\n   */\n  invalid?: boolean;\n}\n\nexport interface FormFieldValidationControlProps extends FormFieldCommonValidationControlProps {\n  /**\n   * Overrides the warning state. Usually the warning state\n   * comes from the parent `FormField`component,\n   * however sometimes you need to override its\n   * state when you have more than one input within a\n   * single form field.\n   * When you use it, provide additional context with\n   * information on the input state, and associate it\n   * with the input using `ariaDescribedby`.\n   */\n  warning?: boolean;\n}\n\nexport const FormFieldContext = createContext<FormFieldValidationControlProps>({});\n\nfunction applyDefault<T>(fields: T, defaults: T, keys: (keyof T)[]) {\n  const result = <T>{};\n  keys.forEach(key => {\n    result[key] = fields[key] === undefined ? defaults[key] : fields[key];\n  });\n  return result;\n}\n\nexport function useFormFieldContext(props: FormFieldValidationControlProps) {\n  const context = useContext(FormFieldContext);\n  return applyDefault(props, context, ['invalid', 'warning', 'controlId', 'ariaLabelledby', 'ariaDescribedby']);\n}\n"]}

package/lib/internal/template/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (94ca71b8)";
+export var PACKAGE_VERSION = "3.0.0 (069cda15)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (94ca71b8)",
+  "PACKAGE_VERSION": "3.0.0 (069cda15)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

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

@@ -327,6 +327,7 @@ export const colorBorderItemPlaceholder: string;
 export const colorBorderItemSelected: string;
 export const colorBorderLayout: string;
 export const colorBorderNotificationStackBar: string;
+export const colorBorderPanelHeader: string;
 export const colorBorderPopover: string;
 export const colorBorderSegmentActive: string;
 export const colorBorderSegmentDefault: string;
@@ -620,6 +621,10 @@ export const spaceLayoutTogglePadding: string;
 export const spaceModalContentBottom: string;
 export const spaceModalHorizontal: string;
 export const spaceOptionIconBigTop: string;
+export const spacePanelContentBottom: string;
+export const spacePanelContentTop: string;
+export const spacePanelDividerMarginHorizontal: string;
+export const spacePanelHeaderVertical: string;
 export const spacePanelNavLeft: string;
 export const spacePanelSideLeft: string;
 export const spacePanelSideRight: string;

package/lib/internal/template/internal/generated/styles/tokens.js

@@ -327,6 +327,7 @@ export var colorBorderItemPlaceholder = "var(--color-border-item-placeholder-h8j
 export var colorBorderItemSelected = "var(--color-border-item-selected-k00wlz, #0972d3)";
 export var colorBorderLayout = "var(--color-border-layout-ownedw, #d1d5db)";
 export var colorBorderNotificationStackBar = "var(--color-border-notification-stack-bar-t3aws2, #232f3e)";
+export var colorBorderPanelHeader = "var(--color-border-panel-header-lf0q4c, #b6bec9)";
 export var colorBorderPopover = "var(--color-border-popover-umqvld, #9ba7b6)";
 export var colorBorderSegmentActive = "var(--color-border-segment-active-9ah16u, #414d5c)";
 export var colorBorderSegmentDefault = "var(--color-border-segment-default-a5zrkd, #414d5c)";
@@ -620,6 +621,10 @@ export var spaceLayoutTogglePadding = "var(--space-layout-toggle-padding-lcu6qi,
 export var spaceModalContentBottom = "var(--space-modal-content-bottom-hqahub, 16px)";
 export var spaceModalHorizontal = "var(--space-modal-horizontal-f89syl, 20px)";
 export var spaceOptionIconBigTop = "var(--space-option-icon-big-top-hybljv, 0px)";
+export var spacePanelContentBottom = "var(--space-panel-content-bottom-7k6er3, 40px)";
+export var spacePanelContentTop = "var(--space-panel-content-top-wac3yp, 20px)";
+export var spacePanelDividerMarginHorizontal = "var(--space-panel-divider-margin-horizontal-sbik1z, 8px)";
+export var spacePanelHeaderVertical = "var(--space-panel-header-vertical-gv9pti, 20px)";
 export var spacePanelNavLeft = "var(--space-panel-nav-left-b1g0mt, 28px)";
 export var spacePanelSideLeft = "var(--space-panel-side-left-5t0who, 28px)";
 export var spacePanelSideRight = "var(--space-panel-side-right-xofg51, 24px)";

package/lib/internal/template/internal/generated/theming/index.cjs

@@ -1193,6 +1193,10 @@ module.exports.preset = {
         "light": "{colorGrey700}",
         "dark": "{colorGrey700}"
       },
+      "colorBorderPanelHeader": {
+        "light": "{colorBorderDividerDefault}",
+        "dark": "{colorBorderDividerDefault}"
+      },
       "colorBorderPopover": {
         "light": "{colorGrey400}",
         "dark": "{colorGrey550}"
@@ -2107,6 +2111,22 @@ module.exports.preset = {
         "comfortable": "0px",
         "compact": "0px"
       },
+      "spacePanelContentBottom": {
+        "comfortable": "{spaceScaledXxxl}",
+        "compact": "{spaceScaledXxxl}"
+      },
+      "spacePanelContentTop": {
+        "comfortable": "{spaceScaledL}",
+        "compact": "{spaceScaledL}"
+      },
+      "spacePanelDividerMarginHorizontal": {
+        "comfortable": "{spaceXs}",
+        "compact": "{spaceXs}"
+      },
+      "spacePanelHeaderVertical": {
+        "comfortable": "{spaceScaledL}",
+        "compact": "{spaceScaledL}"
+      },
       "spacePanelNavLeft": {
         "comfortable": "28px",
         "compact": "28px"
@@ -2553,6 +2573,22 @@ module.exports.preset = {
             "comfortable": "0px",
             "compact": "0px"
           },
+          "spacePanelContentBottom": {
+            "comfortable": "{spaceScaledXxxl}",
+            "compact": "{spaceScaledXxxl}"
+          },
+          "spacePanelContentTop": {
+            "comfortable": "{spaceScaledL}",
+            "compact": "{spaceScaledL}"
+          },
+          "spacePanelDividerMarginHorizontal": {
+            "comfortable": "{spaceXs}",
+            "compact": "{spaceXs}"
+          },
+          "spacePanelHeaderVertical": {
+            "comfortable": "{spaceScaledL}",
+            "compact": "{spaceScaledL}"
+          },
           "spacePanelNavLeft": {
             "comfortable": "28px",
             "compact": "28px"
@@ -3263,6 +3299,10 @@ module.exports.preset = {
             "light": "{colorGrey700}",
             "dark": "{colorGrey700}"
           },
+          "colorBorderPanelHeader": {
+            "light": "{colorBorderDividerDefault}",
+            "dark": "{colorBorderDividerDefault}"
+          },
           "colorBorderPopover": {
             "light": "{colorGrey550}",
             "dark": "{colorGrey550}"
@@ -4305,6 +4345,10 @@ module.exports.preset = {
             "light": "{colorGrey700}",
             "dark": "{colorGrey700}"
           },
+          "colorBorderPanelHeader": {
+            "light": "{colorBorderDividerDefault}",
+            "dark": "{colorBorderDividerDefault}"
+          },
           "colorBorderPopover": {
             "light": "{colorGrey550}",
             "dark": "{colorGrey550}"
@@ -5279,6 +5323,10 @@ module.exports.preset = {
             "light": "{colorGrey700}",
             "dark": "{colorGrey700}"
           },
+          "colorBorderPanelHeader": {
+            "light": "{colorBorderDividerDefault}",
+            "dark": "{colorBorderDividerDefault}"
+          },
           "colorBorderPopover": {
             "light": "{colorGrey400}",
             "dark": "{colorGrey550}"
@@ -6253,6 +6301,10 @@ module.exports.preset = {
             "light": "{colorGrey700}",
             "dark": "{colorGrey700}"
           },
+          "colorBorderPanelHeader": {
+            "light": "{colorBorderDividerDefault}",
+            "dark": "{colorBorderDividerDefault}"
+          },
           "colorBorderPopover": {
             "light": "{colorGrey400}",
             "dark": "{colorGrey550}"
@@ -7227,6 +7279,10 @@ module.exports.preset = {
             "light": "{colorGrey700}",
             "dark": "{colorGrey700}"
           },
+          "colorBorderPanelHeader": {
+            "light": "{colorBorderDividerDefault}",
+            "dark": "{colorBorderDividerDefault}"
+          },
           "colorBorderPopover": {
             "light": "{colorGrey400}",
             "dark": "{colorGrey550}"
@@ -8203,6 +8259,10 @@ module.exports.preset = {
             "light": "{colorGrey700}",
             "dark": "{colorGrey700}"
           },
+          "colorBorderPanelHeader": {
+            "light": "{colorBorderDividerDefault}",
+            "dark": "{colorBorderDividerDefault}"
+          },
           "colorBorderPopover": {
             "light": "{colorGrey550}",
             "dark": "{colorGrey550}"
@@ -8966,6 +9026,7 @@ module.exports.preset = {
       "colorBorderItemSelected": "color",
       "colorBorderLayout": "color",
       "colorBorderNotificationStackBar": "color",
+      "colorBorderPanelHeader": "color",
       "colorBorderPopover": "color",
       "colorBorderSegmentActive": "color",
       "colorBorderSegmentDefault": "color",
@@ -9173,6 +9234,10 @@ module.exports.preset = {
       "spaceModalContentBottom": "density",
       "spaceModalHorizontal": "density",
       "spaceOptionIconBigTop": "density",
+      "spacePanelContentBottom": "density",
+      "spacePanelContentTop": "density",
+      "spacePanelDividerMarginHorizontal": "density",
+      "spacePanelHeaderVertical": "density",
       "spacePanelNavLeft": "density",
       "spacePanelSideLeft": "density",
       "spacePanelSideRight": "density",
@@ -10145,6 +10210,7 @@ module.exports.preset = {
     "colorBorderItemSelected": "color-border-item-selected",
     "colorBorderLayout": "color-border-layout",
     "colorBorderNotificationStackBar": "color-border-notification-stack-bar",
+    "colorBorderPanelHeader": "color-border-panel-header",
     "colorBorderPopover": "color-border-popover",
     "colorBorderSegmentActive": "color-border-segment-active",
     "colorBorderSegmentDefault": "color-border-segment-default",
@@ -10438,6 +10504,10 @@ module.exports.preset = {
     "spaceModalContentBottom": "space-modal-content-bottom",
     "spaceModalHorizontal": "space-modal-horizontal",
     "spaceOptionIconBigTop": "space-option-icon-big-top",
+    "spacePanelContentBottom": "space-panel-content-bottom",
+    "spacePanelContentTop": "space-panel-content-top",
+    "spacePanelDividerMarginHorizontal": "space-panel-divider-margin-horizontal",
+    "spacePanelHeaderVertical": "space-panel-header-vertical",
     "spacePanelNavLeft": "space-panel-nav-left",
     "spacePanelSideLeft": "space-panel-side-left",
     "spacePanelSideRight": "space-panel-side-right",
@@ -10840,6 +10910,7 @@ module.exports.preset = {
     "colorBorderItemSelected": "--color-border-item-selected-k00wlz",
     "colorBorderLayout": "--color-border-layout-ownedw",
     "colorBorderNotificationStackBar": "--color-border-notification-stack-bar-t3aws2",
+    "colorBorderPanelHeader": "--color-border-panel-header-lf0q4c",
     "colorBorderPopover": "--color-border-popover-umqvld",
     "colorBorderSegmentActive": "--color-border-segment-active-9ah16u",
     "colorBorderSegmentDefault": "--color-border-segment-default-a5zrkd",
@@ -11133,6 +11204,10 @@ module.exports.preset = {
     "spaceModalContentBottom": "--space-modal-content-bottom-hqahub",
     "spaceModalHorizontal": "--space-modal-horizontal-f89syl",
     "spaceOptionIconBigTop": "--space-option-icon-big-top-hybljv",
+    "spacePanelContentBottom": "--space-panel-content-bottom-7k6er3",
+    "spacePanelContentTop": "--space-panel-content-top-wac3yp",
+    "spacePanelDividerMarginHorizontal": "--space-panel-divider-margin-horizontal-sbik1z",
+    "spacePanelHeaderVertical": "--space-panel-header-vertical-gv9pti",
     "spacePanelNavLeft": "--space-panel-nav-left-b1g0mt",
     "spacePanelSideLeft": "--space-panel-side-left-5t0who",
     "spacePanelSideRight": "--space-panel-side-right-xofg51",