@cloudscape-design/components 3.0.0

package/textarea/styles.scoped.css

@@ -0,0 +1,236 @@
+/*
+ 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_qk1j1_13ce5_93:not(#\9) {
+  /* used for test-utils */
+}
+
+.awsui_textarea_qk1j1_13ce5_97: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);
+  resize: auto;
+  /* stylelint-disable-line plugin/no-unsupported-browser-features */
+  cursor: text;
+  white-space: pre-wrap;
+  padding: 4px 12px;
+  padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-field-horizontal-89h2yr, 12px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  max-width: 100%;
+  width: 100%;
+  display: block;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  background-color: var(--color-background-input-default-u57378, #ffffff);
+  border-radius: 8px;
+  border-radius: var(--border-field-radius-t0kudr, 8px);
+  border: 2px solid #9ba7b6;
+  border: var(--border-field-width-idlekx, 2px) solid var(--color-border-input-default-dtyu8d, #9ba7b6);
+  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);
+}
+.awsui_textarea_qk1j1_13ce5_97.awsui_textarea-readonly_qk1j1_13ce5_122:not(#\9) {
+  background-color: #ffffff;
+  background-color: var(--color-background-input-default-u57378, #ffffff);
+  border: 2px solid #e9ebed;
+  border: var(--border-field-width-idlekx, 2px) solid var(--color-border-input-disabled-x2lopj, #e9ebed);
+}
+.awsui_textarea_qk1j1_13ce5_97:not(#\9):-ms-input-placeholder {
+  color: #5f6b7a;
+  color: var(--color-text-input-placeholder-j53j3c, #5f6b7a);
+  font-style: italic;
+  opacity: 1;
+}
+.awsui_textarea_qk1j1_13ce5_97:not(#\9)::placeholder {
+  color: #5f6b7a;
+  color: var(--color-text-input-placeholder-j53j3c, #5f6b7a);
+  font-style: italic;
+  opacity: 1;
+}
+.awsui_textarea_qk1j1_13ce5_97:not(#\9):-ms-input-placeholder {
+  color: #5f6b7a;
+  color: var(--color-text-input-placeholder-j53j3c, #5f6b7a);
+  font-style: italic;
+}
+.awsui_textarea_qk1j1_13ce5_97:not(#\9):focus {
+  outline: 2px dotted transparent;
+  border: 2px solid #0972d3;
+  border: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-focused-ap3b6s, #0972d3);
+  border-radius: 8px;
+  border-radius: var(--border-field-radius-t0kudr, 8px);
+  box-shadow: 0 0 0 0px #0972d3;
+  box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-srzyiu, 0px) var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+.awsui_textarea_qk1j1_13ce5_97:not(#\9):invalid {
+  box-shadow: none;
+}
+.awsui_textarea_qk1j1_13ce5_97:not(#\9):disabled {
+  background-color: #e9ebed;
+  background-color: var(--color-background-input-disabled-wu9j6u, #e9ebed);
+  border: 2px solid #e9ebed;
+  border: var(--border-field-width-idlekx, 2px) solid var(--color-border-input-disabled-x2lopj, #e9ebed);
+  color: #9ba7b6;
+  color: var(--color-text-input-disabled-oawyzo, #9ba7b6);
+  cursor: auto;
+  cursor: default;
+}
+.awsui_textarea_qk1j1_13ce5_97:not(#\9):disabled:-ms-input-placeholder {
+  color: #9ba7b6;
+  color: var(--color-text-input-placeholder-disabled-6928j8, #9ba7b6);
+  opacity: 1;
+}
+.awsui_textarea_qk1j1_13ce5_97:not(#\9):disabled::placeholder {
+  color: #9ba7b6;
+  color: var(--color-text-input-placeholder-disabled-6928j8, #9ba7b6);
+  opacity: 1;
+}
+.awsui_textarea_qk1j1_13ce5_97:not(#\9):disabled:-ms-input-placeholder {
+  color: #9ba7b6;
+  color: var(--color-text-input-placeholder-disabled-6928j8, #9ba7b6);
+}
+.awsui_textarea_qk1j1_13ce5_97.awsui_textarea-invalid_qk1j1_13ce5_158:not(#\9) {
+  color: #d91515;
+  color: var(--color-text-status-error-5sesl6, #d91515);
+  border-color: #d91515;
+  border-color: var(--color-text-status-error-5sesl6, #d91515);
+  padding-left: calc(
+  12px - (8px - 2px)
+);
+  padding-left: calc(
+  var(--space-field-horizontal-89h2yr, 12px) - (var(--border-invalid-width-5jpdqn, 8px) - var(--border-field-width-idlekx, 2px))
+);
+  border-left-width: 8px;
+  border-left-width: var(--border-invalid-width-5jpdqn, 8px);
+}
+.awsui_textarea_qk1j1_13ce5_97.awsui_textarea-invalid_qk1j1_13ce5_158:not(#\9):focus {
+  box-shadow: 0 0 0 2px #0972d3;
+  box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-omt6il, 2px) var(--color-border-item-focused-ap3b6s, #0972d3);
+}

package/textarea/styles.selectors.js

@@ -0,0 +1,10 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_qk1j1_13ce5_93",
+  "textarea": "awsui_textarea_qk1j1_13ce5_97",
+  "textarea-readonly": "awsui_textarea-readonly_qk1j1_13ce5_122",
+  "textarea-invalid": "awsui_textarea-invalid_qk1j1_13ce5_158"
+};
+  

package/theming/index.d.ts

@@ -0,0 +1,10 @@
+import { TypedOverride } from '../internal/generated/theming';
+export declare type Theme = TypedOverride;
+export interface ApplyThemeParams {
+    theme: Theme;
+}
+export interface ApplyThemeResult {
+    reset: () => void;
+}
+export declare function applyTheme({ theme }: ApplyThemeParams): ApplyThemeResult;
+//# sourceMappingURL=index.d.ts.map

package/theming/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAU,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEtE,oBAAY,KAAK,GAAG,aAAa,CAAC;AAClC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,gBAAgB,GAAG,gBAAgB,CAKxE"}

package/theming/index.js

@@ -0,0 +1,12 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { applyTheme as coreApplyTheme } from '@cloudscape-design/theming-runtime';
+import { preset } from '../internal/generated/theming';
+export function applyTheme(_a) {
+    var theme = _a.theme;
+    return coreApplyTheme({
+        override: theme,
+        preset: preset
+    });
+}
+//# sourceMappingURL=index.js.map

package/theming/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,EAAE,MAAM,EAAiB,MAAM,+BAA+B,CAAC;AAWtE,MAAM,UAAU,UAAU,CAAC,EAA2B;QAAzB,KAAK,WAAA;IAChC,OAAO,cAAc,CAAC;QACpB,QAAQ,EAAE,KAAK;QACf,MAAM,QAAA;KACP,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { applyTheme as coreApplyTheme } from '@cloudscape-design/theming-runtime';\nimport { preset, TypedOverride } from '../internal/generated/theming';\n\nexport type Theme = TypedOverride;\nexport interface ApplyThemeParams {\n  theme: Theme;\n}\n\nexport interface ApplyThemeResult {\n  reset: () => void;\n}\n\nexport function applyTheme({ theme }: ApplyThemeParams): ApplyThemeResult {\n  return coreApplyTheme({\n    override: theme,\n    preset,\n  });\n}\n"]}

package/tiles/index.d.ts

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

package/tiles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,UAAU,eAG9C"}

package/tiles/index.js

@@ -0,0 +1,13 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import InternalTiles from './internal';
+export default function Tiles(props) {
+    var baseComponentProps = useBaseComponent('Tiles');
+    return React.createElement(InternalTiles, __assign({}, props, baseComponentProps));
+}
+applyDisplayName(Tiles, 'Tiles');
+//# sourceMappingURL=index.js.map

package/tiles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC7C,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,OAAO,oBAAC,aAAa,eAAK,KAAK,EAAM,kBAAkB,EAAI,CAAC;AAC9D,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,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 { TilesProps } from './interfaces';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport InternalTiles from './internal';\n\nexport { TilesProps };\n\nexport default function Tiles(props: TilesProps) {\n  const baseComponentProps = useBaseComponent('Tiles');\n  return <InternalTiles {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(Tiles, 'Tiles');\n"]}

package/tiles/interfaces.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
+import { FormFieldControlProps } from '../internal/context/form-field-context';
+import { Breakpoint as _Breakpoint } from '../internal/breakpoints';
+export interface TilesProps extends BaseComponentProps, FormFieldControlProps {
+    /**
+     * Specifies the value of the selected tile.
+     * If you want to clear the selection, use `null`.
+     */
+    value: string | null;
+    /**
+     * List of tile definitions. Each tile has the following properties:
+     *
+     * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.
+     * - `label` [ReactNode] - A short description for the option the tile represents.
+     * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.
+     * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.
+     * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.
+     * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.
+     *            We recommend that you don't set this property because it's automatically set by the tiles component.
+     */
+    items?: ReadonlyArray<TilesProps.TilesDefinition>;
+    /**
+     * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field
+     * because the form field component automatically sets the correct labels to make the component accessible.
+     */
+    ariaLabel?: string;
+    /**
+     * Adds `aria-required` on the group.
+     */
+    ariaRequired?: boolean;
+    /**
+     * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.
+     * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.
+     * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.
+     */
+    columns?: number;
+    /**
+     * Called when the user selects a different tile.
+     */
+    onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;
+}
+export declare namespace TilesProps {
+    type Breakpoint = _Breakpoint;
+    interface TilesDefinition {
+        value: string;
+        label: React.ReactNode;
+        description?: React.ReactNode;
+        image?: React.ReactNode;
+        disabled?: boolean;
+        controlId?: string;
+    }
+    interface ChangeDetail {
+        value: string;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/tiles/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,qBAAqB;IAC3E;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;CAC/D;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,UAAU,GAAG,WAAW,CAAC;IACrC,UAAiB,eAAe;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;CACF"}

package/tiles/interfaces.js

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

package/tiles/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface TilesProps extends BaseComponentProps, FormFieldControlProps {\n  /**\n   * Specifies the value of the selected tile.\n   * If you want to clear the selection, use `null`.\n   */\n  value: string | null;\n\n  /**\n   * List of tile definitions. Each tile has the following properties:\n   *\n   * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.\n   * - `label` [ReactNode] - A short description for the option the tile represents.\n   * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.\n   * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.\n   * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.\n   * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.\n   *            We recommend that you don't set this property because it's automatically set by the tiles component.\n   */\n  items?: ReadonlyArray<TilesProps.TilesDefinition>;\n\n  /**\n   * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field\n   * because the form field component automatically sets the correct labels to make the component accessible.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-required` on the group.\n   */\n  ariaRequired?: boolean;\n\n  /**\n   * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.\n   * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.\n   * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.\n   */\n  columns?: number;\n\n  /**\n   * Called when the user selects a different tile.\n   */\n  onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;\n}\n\nexport namespace TilesProps {\n  export type Breakpoint = _Breakpoint;\n  export interface TilesDefinition {\n    value: string;\n    label: React.ReactNode;\n    description?: React.ReactNode;\n    image?: React.ReactNode;\n    disabled?: boolean;\n    controlId?: string;\n  }\n\n  export interface ChangeDetail {\n    value: string;\n  }\n}\n"]}

package/tiles/internal.d.ts

@@ -0,0 +1,6 @@
+import { TilesProps } from './interfaces';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+declare type InternalTilesProps = TilesProps & InternalBaseComponentProps;
+export default function InternalTiles({ value, items, ariaLabel, ariaRequired, columns, onChange, __internalRootRef, ...rest }: InternalTilesProps): JSX.Element;
+export {};
+//# sourceMappingURL=internal.d.ts.map

package/tiles/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAKlF,aAAK,kBAAkB,GAAG,UAAU,GAAG,0BAA0B,CAAC;AAElE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,KAAK,EACL,SAAS,EACT,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,kBAAkB,eA0EpB"}

package/tiles/internal.js

@@ -0,0 +1,47 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React from 'react';
+import { getBaseProps } from '../internal/base-component';
+import RadioButton from '../radio-group/radio-button';
+import styles from './styles.css.js';
+import { useFormFieldContext } from '../internal/context/form-field-context';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
+import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+var COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
+export default function InternalTiles(_a) {
+    var value = _a.value, items = _a.items, ariaLabel = _a.ariaLabel, ariaRequired = _a.ariaRequired, columns = _a.columns, onChange = _a.onChange, _b = _a.__internalRootRef, __internalRootRef = _b === void 0 ? null : _b, rest = __rest(_a, ["value", "items", "ariaLabel", "ariaRequired", "columns", "onChange", "__internalRootRef"]);
+    var getColumns = function () {
+        if (columns) {
+            return columns;
+        }
+        var nItems = items ? items.length : 0;
+        var columnsLookup = {
+            0: 1,
+            1: 1,
+            2: 2,
+            4: 2,
+            8: 2
+        };
+        return columnsLookup[nItems] || 3;
+    };
+    var _c = useFormFieldContext(rest), ariaDescribedby = _c.ariaDescribedby, ariaLabelledby = _c.ariaLabelledby;
+    var baseProps = getBaseProps(rest);
+    var generatedName = useUniqueId('awsui-tiles-');
+    var nColumns = getColumns();
+    var _d = useContainerBreakpoints(COLUMN_TRIGGERS), breakpoint = _d[0], ref = _d[1];
+    var mergedRef = useMergeRefs(ref, __internalRootRef);
+    return (React.createElement("div", __assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired }, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
+        React.createElement("div", { className: clsx(styles.columns, styles["column-".concat(nColumns)]) }, items &&
+            items.map(function (item) {
+                var _a, _b, _c, _d, _e;
+                var controlId = item.controlId || "".concat(generatedName, "-value-").concat(item.value);
+                return (React.createElement("label", { className: clsx(styles['tile-container'], (_a = {}, _a[styles['has-metadata']] = item.description || item.image, _a), (_b = {}, _b[styles.selected] = item.value === value, _b), (_c = {}, _c[styles.disabled] = !!item.disabled, _c), styles["breakpoint-".concat(breakpoint)]), key: item.value, "data-value": item.value, htmlFor: controlId, id: "".concat(controlId, "-wrapper") },
+                    React.createElement("div", { className: clsx(styles.control, (_d = {}, _d[styles['no-image']] = !item.image, _d)) },
+                        React.createElement(RadioButton, { checked: item.value === value, name: generatedName, withoutLabel: true, value: item.value, label: item.label, description: item.description, disabled: item.disabled, onChange: onChange, controlId: controlId })),
+                    item.image && (React.createElement("div", { className: clsx(styles.image, (_e = {}, _e[styles.disabled] = !!item.disabled, _e)) }, item.image))));
+            }))));
+}
+//# sourceMappingURL=internal.js.map

package/tiles/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tiles/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 clsx from 'clsx';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport RadioButton from '../radio-group/radio-button';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nexport default function InternalTiles({\n  value,\n  items,\n  ariaLabel,\n  ariaRequired,\n  columns,\n  onChange,\n  __internalRootRef = null,\n  ...rest\n}: InternalTilesProps) {\n  const getColumns = () => {\n    if (columns) {\n      return columns;\n    }\n\n    const nItems = items ? items.length : 0;\n    const columnsLookup: Record<number, number> = {\n      0: 1,\n      1: 1,\n      2: 2,\n      4: 2,\n      8: 2,\n    };\n    return columnsLookup[nItems] || 3;\n  };\n  const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n  const baseProps = getBaseProps(rest);\n  const generatedName = useUniqueId('awsui-tiles-');\n  const nColumns = getColumns();\n  const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n      aria-required={ariaRequired}\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root)}\n      ref={mergedRef}\n    >\n      <div className={clsx(styles.columns, styles[`column-${nColumns}`])}>\n        {items &&\n          items.map(item => {\n            const controlId = item.controlId || `${generatedName}-value-${item.value}`;\n            return (\n              <label\n                className={clsx(\n                  styles['tile-container'],\n                  { [styles['has-metadata']]: item.description || item.image },\n                  { [styles.selected]: item.value === value },\n                  { [styles.disabled]: !!item.disabled },\n                  styles[`breakpoint-${breakpoint}`]\n                )}\n                key={item.value}\n                data-value={item.value}\n                htmlFor={controlId}\n                id={`${controlId}-wrapper`}\n              >\n                <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n                  <RadioButton\n                    checked={item.value === value}\n                    name={generatedName}\n                    withoutLabel={true}\n                    value={item.value}\n                    label={item.label}\n                    description={item.description}\n                    disabled={item.disabled}\n                    onChange={onChange}\n                    controlId={controlId}\n                  />\n                </div>\n                {item.image && (\n                  <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>\n                )}\n              </label>\n            );\n          })}\n      </div>\n    </div>\n  );\n}\n"]}

package/tiles/styles.css.js

@@ -0,0 +1,33 @@
+
+    import './styles.scoped.css';
+    export default {
+  "column-layout": "awsui_column-layout_vj6p7_1af46_93",
+  "grid": "awsui_grid_vj6p7_1af46_104",
+  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_1af46_109",
+  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_1af46_112",
+  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_1af46_119",
+  "grid-columns-1": "awsui_grid-columns-1_vj6p7_1af46_122",
+  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_1af46_122",
+  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_1af46_125",
+  "grid-columns-2": "awsui_grid-columns-2_vj6p7_1af46_128",
+  "grid-columns-3": "awsui_grid-columns-3_vj6p7_1af46_134",
+  "grid-columns-4": "awsui_grid-columns-4_vj6p7_1af46_140",
+  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_1af46_153",
+  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_1af46_186",
+  "root": "awsui_root_vj6p7_1af46_240",
+  "tile-container": "awsui_tile-container_vj6p7_1af46_255",
+  "has-metadata": "awsui_has-metadata_vj6p7_1af46_264",
+  "selected": "awsui_selected_vj6p7_1af46_267",
+  "disabled": "awsui_disabled_vj6p7_1af46_271",
+  "columns": "awsui_columns_vj6p7_1af46_286",
+  "column-1": "awsui_column-1_vj6p7_1af46_291",
+  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_1af46_298",
+  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_1af46_303",
+  "column-2": "awsui_column-2_vj6p7_1af46_308",
+  "column-3": "awsui_column-3_vj6p7_1af46_325",
+  "column-4": "awsui_column-4_vj6p7_1af46_342",
+  "control": "awsui_control_vj6p7_1af46_360",
+  "no-image": "awsui_no-image_vj6p7_1af46_364",
+  "image": "awsui_image_vj6p7_1af46_368"
+};
+