@cloudscape-design/components 3.0.0

package/form/styles.scoped.css

@@ -0,0 +1,178 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_1i0s3_ntsvl_93:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+}
+
+.awsui_header_1i0s3_ntsvl_104:not(#\9) {
+  margin-bottom: 16px;
+  margin-bottom: var(--space-scaled-m-pv0fmt, 16px);
+}
+
+.awsui_content_1i0s3_ntsvl_108:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_error_1i0s3_ntsvl_112:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_footer_1i0s3_ntsvl_116:not(#\9) {
+  margin-top: 20px;
+  margin-top: var(--space-scaled-l-t03y3z, 20px);
+}
+
+.awsui_actions-section_1i0s3_ntsvl_120:not(#\9) {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-left: calc(-1 * 16px);
+  margin-left: calc(-1 * var(--space-scaled-m-pv0fmt, 16px));
+  margin-bottom: calc(-1 * 16px);
+  margin-bottom: calc(-1 * var(--space-scaled-m-pv0fmt, 16px));
+}
+
+.awsui_secondary-actions_1i0s3_ntsvl_129:not(#\9) {
+  min-width: 1px;
+  margin-left: 16px;
+  margin-left: var(--space-scaled-m-pv0fmt, 16px);
+  margin-bottom: 16px;
+  margin-bottom: var(--space-scaled-m-pv0fmt, 16px);
+}
+
+.awsui_actions_1i0s3_ntsvl_120:not(#\9) {
+  min-width: 1px;
+  margin-left: 16px;
+  margin-left: var(--space-scaled-m-pv0fmt, 16px);
+  margin-bottom: 16px;
+  margin-bottom: var(--space-scaled-m-pv0fmt, 16px);
+}

package/form/styles.selectors.js

@@ -0,0 +1,14 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_1i0s3_ntsvl_93",
+  "header": "awsui_header_1i0s3_ntsvl_104",
+  "content": "awsui_content_1i0s3_ntsvl_108",
+  "error": "awsui_error_1i0s3_ntsvl_112",
+  "footer": "awsui_footer_1i0s3_ntsvl_116",
+  "actions-section": "awsui_actions-section_1i0s3_ntsvl_120",
+  "secondary-actions": "awsui_secondary-actions_1i0s3_ntsvl_129",
+  "actions": "awsui_actions_1i0s3_ntsvl_120"
+};
+  

package/form-field/index.d.ts

@@ -0,0 +1,4 @@
+import { FormFieldProps } from './interfaces';
+export { FormFieldProps };
+export default function FormField({ stretch, ...props }: FormFieldProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/form-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form-field/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,OAAe,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,eAG9E"}

package/form-field/index.js

@@ -0,0 +1,14 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import InternalFormField from './internal';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import useBaseComponent from '../internal/hooks/use-base-component';
+export default function FormField(_a) {
+    var _b = _a.stretch, stretch = _b === void 0 ? false : _b, props = __rest(_a, ["stretch"]);
+    var baseComponentProps = useBaseComponent('FormField');
+    return React.createElement(InternalFormField, __assign({ stretch: stretch }, props, { __hideLabel: false }, baseComponentProps));
+}
+applyDisplayName(FormField, 'FormField');
+//# sourceMappingURL=index.js.map

package/form-field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form-field/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,iBAAiB,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAKpE,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAA6C;IAA3C,IAAA,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EAAK,KAAK,cAA3B,WAA6B,CAAF;IAC3D,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzD,OAAO,oBAAC,iBAAiB,aAAC,OAAO,EAAE,OAAO,IAAM,KAAK,IAAE,WAAW,EAAE,KAAK,IAAM,kBAAkB,EAAI,CAAC;AACxG,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport InternalFormField from './internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { FormFieldProps } from './interfaces';\n\nexport { FormFieldProps };\n\nexport default function FormField({ stretch = false, ...props }: FormFieldProps) {\n  const baseComponentProps = useBaseComponent('FormField');\n  return <InternalFormField stretch={stretch} {...props} __hideLabel={false} {...baseComponentProps} />;\n}\n\napplyDisplayName(FormField, 'FormField');\n"]}

package/form-field/interfaces.d.ts

@@ -0,0 +1,64 @@
+import { BaseComponentProps } from '../internal/base-component';
+import React from 'react';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+export interface FormFieldProps extends BaseComponentProps {
+    /**
+     * The ID of the primary form control. You can use this to set the
+     * `for` attribute of a label for accessibility.
+     *
+     * If you don't set this property, the control group automatically sets
+     * the label to the ID of an inner form control (for example, an [input](/components/input) component).
+     * This only works well if you're using a single control in the form field.
+     */
+    controlId?: string;
+    /**
+     * Determines whether the primary control should expand to 12 columns.
+     *
+     * By default (or when this property is set to `false`), the primary control
+     * occupies 9 columns. The secondary control uses the remaining 3 columns.
+     * On smaller viewports, both components occupy 12 columns and stack on top of each other.
+     *
+     * If this property is set to `true`, the primary control uses the full
+     * 12 columns. The secondary control (if present) also uses 12 columns, and the two
+     * controls stack on top of each other.
+     */
+    stretch?: boolean;
+    /**
+     * The main label for the form field.
+     */
+    label?: React.ReactNode;
+    /**
+     * Use to display an 'Info' link next to the label.
+     */
+    info?: React.ReactNode;
+    /**
+     * The primary form control (for example, input, textarea, etc.).
+     * @displayname control
+     */
+    children?: React.ReactNode;
+    /**
+     * A secondary control. You can use this for custom actions and content.
+     */
+    secondaryControl?: React.ReactNode;
+    /**
+     * Detailed information about the form field that's displayed below the label.
+     */
+    description?: React.ReactNode;
+    /**
+     * Constraint text that's displayed below the control. Use this to provide
+     * additional information about valid formats, etc.
+     */
+    constraintText?: React.ReactNode;
+    /**
+     * Text that displays as a validation message. If this is set to a
+     * non-empty string, it will render the form field as invalid.
+     */
+    errorText?: React.ReactNode;
+}
+export interface InternalFormFieldProps extends FormFieldProps, InternalBaseComponentProps {
+    /**
+     * Visually hide the label.
+     */
+    __hideLabel?: boolean;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/form-field/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,EAAE,0BAA0B;IACxF;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB"}

package/form-field/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/form-field/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface FormFieldProps extends BaseComponentProps {\n  /**\n   * The ID of the primary form control. You can use this to set the\n   * `for` attribute of a label for accessibility.\n   *\n   * If you don't set this property, the control group automatically sets\n   * the label to the ID of an inner form control (for example, an [input](/components/input) component).\n   * This only works well if you're using a single control in the form field.\n   */\n  controlId?: string;\n\n  /**\n   * Determines whether the primary control should expand to 12 columns.\n   *\n   * By default (or when this property is set to `false`), the primary control\n   * occupies 9 columns. The secondary control uses the remaining 3 columns.\n   * On smaller viewports, both components occupy 12 columns and stack on top of each other.\n   *\n   * If this property is set to `true`, the primary control uses the full\n   * 12 columns. The secondary control (if present) also uses 12 columns, and the two\n   * controls stack on top of each other.\n   */\n  stretch?: boolean;\n\n  /**\n   * The main label for the form field.\n   */\n  label?: React.ReactNode;\n\n  /**\n   * Use to display an 'Info' link next to the label.\n   */\n  info?: React.ReactNode;\n\n  /**\n   * The primary form control (for example, input, textarea, etc.).\n   * @displayname control\n   */\n  children?: React.ReactNode;\n\n  /**\n   * A secondary control. You can use this for custom actions and content.\n   */\n  secondaryControl?: React.ReactNode;\n\n  /**\n   * Detailed information about the form field that's displayed below the label.\n   */\n  description?: React.ReactNode;\n\n  /**\n   * Constraint text that's displayed below the control. Use this to provide\n   * additional information about valid formats, etc.\n   */\n  constraintText?: React.ReactNode;\n\n  /**\n   * Text that displays as a validation message. If this is set to a\n   * non-empty string, it will render the form field as invalid.\n   */\n  errorText?: React.ReactNode;\n}\n\nexport interface InternalFormFieldProps extends FormFieldProps, InternalBaseComponentProps {\n  /**\n   * Visually hide the label.\n   */\n  __hideLabel?: boolean;\n}\n"]}

package/form-field/internal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { InternalFormFieldProps } from './interfaces';
+interface FormFieldErrorProps {
+    id?: string;
+    children?: React.ReactNode;
+}
+export declare const FormFieldError: ({ id, children }: FormFieldErrorProps) => JSX.Element;
+export default function InternalFormField({ controlId, stretch, label, info, children, secondaryControl, description, constraintText, errorText, __hideLabel, __internalRootRef, ...rest }: InternalFormFieldProps): JSX.Element;
+export {};
+//# sourceMappingURL=internal.d.ts.map

package/form-field/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAatC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAItD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,qBAAsB,mBAAmB,gBAWnE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,eAgFxB"}

package/form-field/internal.js

@@ -0,0 +1,56 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import { getBaseProps } from '../internal/base-component';
+import { FormFieldDomContext, useFormFieldContext } from '../internal/context/form-field-context';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import InternalGrid from '../grid/internal';
+import InternalIcon from '../icon/internal';
+import { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';
+import styles from './styles.css.js';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { joinStrings } from '../internal/utils/strings';
+export var FormFieldError = function (_a) {
+    var id = _a.id, children = _a.children;
+    return (React.createElement("div", { className: styles.error },
+        React.createElement("div", { className: styles['error-icon-shake-wrapper'] },
+            React.createElement("div", { className: styles['error-icon-scale-wrapper'] },
+                React.createElement(InternalIcon, { name: "status-warning", size: "small" }))),
+        React.createElement("span", { id: id, className: styles.error__message }, children)));
+};
+export default function InternalFormField(_a) {
+    var controlId = _a.controlId, _b = _a.stretch, stretch = _b === void 0 ? false : _b, label = _a.label, info = _a.info, children = _a.children, secondaryControl = _a.secondaryControl, description = _a.description, constraintText = _a.constraintText, errorText = _a.errorText, __hideLabel = _a.__hideLabel, _c = _a.__internalRootRef, __internalRootRef = _c === void 0 ? null : _c, rest = __rest(_a, ["controlId", "stretch", "label", "info", "children", "secondaryControl", "description", "constraintText", "errorText", "__hideLabel", "__internalRootRef"]);
+    var baseProps = getBaseProps(rest);
+    var ref = useRef(null);
+    var isRefresh = useVisualRefresh(ref);
+    var instanceUniqueId = useUniqueId('formField');
+    var generatedControlId = controlId || instanceUniqueId;
+    var formFieldId = controlId || generatedControlId;
+    var slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);
+    var ariaDescribedBy = getAriaDescribedBy(slotIds);
+    var gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);
+    var _d = useFormFieldContext({}), parentAriaLabelledby = _d.ariaLabelledby, parentAriaDescribedby = _d.ariaDescribedby, parentInvalid = _d.invalid;
+    var contextValuesWithoutControlId = {
+        ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,
+        ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,
+        invalid: !!errorText || !!parentInvalid
+    };
+    var mergedRef = useMergeRefs(ref, __internalRootRef);
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
+        React.createElement("div", { className: clsx(__hideLabel && styles['visually-hidden']) },
+            label && (React.createElement("label", { className: styles.label, id: slotIds.label, htmlFor: generatedControlId }, label)),
+            !__hideLabel && info && React.createElement("span", { className: styles.info }, info)),
+        description && (React.createElement("div", { className: styles.description, id: slotIds.description }, description)),
+        React.createElement("div", { className: clsx(styles.controls, __hideLabel && styles['label-hidden']) },
+            React.createElement(InternalGrid, { gridDefinition: gridDefinition },
+                React.createElement(FormFieldDomContext.RootProvider, { value: __assign({ controlId: generatedControlId }, contextValuesWithoutControlId) }, children && React.createElement("div", { className: styles.control }, children)),
+                secondaryControl && (React.createElement(FormFieldDomContext.RootProvider, { value: contextValuesWithoutControlId },
+                    React.createElement("div", { className: styles['secondary-control'] }, secondaryControl))))),
+        (constraintText || errorText) && (React.createElement("div", { className: styles.hints },
+            errorText && React.createElement(FormFieldError, { id: slotIds.error }, errorText),
+            constraintText && (React.createElement("div", { className: clsx(styles.constraint, errorText && styles['constraint-has-error']), id: slotIds.constraint }, constraintText))))));
+}
+//# sourceMappingURL=internal.js.map

package/form-field/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldDomContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { joinStrings } from '../internal/utils/strings';\n\ninterface FormFieldErrorProps {\n  id?: string;\n  children?: React.ReactNode;\n}\n\nexport const FormFieldError = ({ id, children }: FormFieldErrorProps) => (\n  <div className={styles.error}>\n    <div className={styles['error-icon-shake-wrapper']}>\n      <div className={styles['error-icon-scale-wrapper']}>\n        <InternalIcon name=\"status-warning\" size=\"small\" />\n      </div>\n    </div>\n    <span id={id} className={styles.error__message}>\n      {children}\n    </span>\n  </div>\n);\n\nexport default function InternalFormField({\n  controlId,\n  stretch = false,\n  label,\n  info,\n  children,\n  secondaryControl,\n  description,\n  constraintText,\n  errorText,\n  __hideLabel,\n  __internalRootRef = null,\n  ...rest\n}: InternalFormFieldProps) {\n  const baseProps = getBaseProps(rest);\n  const ref = useRef<HTMLElement>(null);\n  const isRefresh = useVisualRefresh(ref);\n\n  const instanceUniqueId = useUniqueId('formField');\n  const generatedControlId = controlId || instanceUniqueId;\n  const formFieldId = controlId || generatedControlId;\n\n  const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n  const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n  const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n  const {\n    ariaLabelledby: parentAriaLabelledby,\n    ariaDescribedby: parentAriaDescribedby,\n    invalid: parentInvalid,\n  } = useFormFieldContext({});\n\n  const contextValuesWithoutControlId = {\n    ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n    ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n    invalid: !!errorText || !!parentInvalid,\n  };\n\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n      <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n        {label && (\n          <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n            {label}\n          </label>\n        )}\n        {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n      </div>\n\n      {description && (\n        <div className={styles.description} id={slotIds.description}>\n          {description}\n        </div>\n      )}\n\n      <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n        <InternalGrid gridDefinition={gridDefinition}>\n          <FormFieldDomContext.RootProvider\n            value={{\n              controlId: generatedControlId,\n              ...contextValuesWithoutControlId,\n            }}\n          >\n            {children && <div className={styles.control}>{children}</div>}\n          </FormFieldDomContext.RootProvider>\n\n          {secondaryControl && (\n            <FormFieldDomContext.RootProvider value={contextValuesWithoutControlId}>\n              <div className={styles['secondary-control']}>{secondaryControl}</div>\n            </FormFieldDomContext.RootProvider>\n          )}\n        </InternalGrid>\n      </div>\n\n      {(constraintText || errorText) && (\n        <div className={styles.hints}>\n          {errorText && <FormFieldError id={slotIds.error}>{errorText}</FormFieldError>}\n          {constraintText && (\n            <div\n              className={clsx(styles.constraint, errorText && styles['constraint-has-error'])}\n              id={slotIds.constraint}\n            >\n              {constraintText}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/form-field/styles.css.js

@@ -0,0 +1,24 @@
+
+    import './styles.scoped.css';
+    export default {
+  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_yshzd_97",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_yshzd_1",
+  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_yshzd_124",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_yshzd_1",
+  "error": "awsui_error_14mhv_yshzd_97",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_yshzd_1",
+  "root": "awsui_root_14mhv_yshzd_168",
+  "label": "awsui_label_14mhv_yshzd_180",
+  "info": "awsui_info_14mhv_yshzd_193",
+  "description": "awsui_description_14mhv_yshzd_198",
+  "constraint": "awsui_constraint_14mhv_yshzd_199",
+  "hints": "awsui_hints_14mhv_yshzd_206",
+  "constraint-has-error": "awsui_constraint-has-error_14mhv_yshzd_207",
+  "secondary-control": "awsui_secondary-control_14mhv_yshzd_211",
+  "controls": "awsui_controls_14mhv_yshzd_215",
+  "label-hidden": "awsui_label-hidden_14mhv_yshzd_215",
+  "control": "awsui_control_14mhv_yshzd_215",
+  "error__message": "awsui_error__message_14mhv_yshzd_234",
+  "visually-hidden": "awsui_visually-hidden_14mhv_yshzd_238"
+};
+