@cloudscape-design/components 3.0.0

package/collection-preferences/styles.scoped.css

@@ -0,0 +1,255 @@
+/*
+ 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
+*/
+/*
+ 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_visible-content_tc96w_d6ntf_185:not(#\9),
+.awsui_visible-content-toggle_tc96w_d6ntf_186:not(#\9),
+.awsui_visible-content-groups_tc96w_d6ntf_187:not(#\9),
+.awsui_visible-content-group_tc96w_d6ntf_187:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_visible-content-title_tc96w_d6ntf_192:not(#\9) {
+  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);
+  font-weight: 700;
+  font-weight: var(--font-display-label-weight-m18hjh, 700);
+  color: #000716;
+  color: var(--color-text-form-label-k3j0b4, #000716);
+  margin-bottom: 20px;
+  margin-bottom: var(--space-scaled-l-t03y3z, 20px);
+}
+
+.awsui_visible-content-group-label_tc96w_d6ntf_200:not(#\9) {
+  color: #414d5c;
+  color: var(--color-text-group-label-w9to2i, #414d5c);
+  padding-bottom: 8px;
+  padding-bottom: var(--space-xs-rsr2qu, 8px);
+  border-bottom: 1px solid #e9ebed;
+  border-bottom: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+}
+
+.awsui_visible-content-option_tc96w_d6ntf_206:not(#\9) {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  padding: 8px 0px 8px 20px;
+  padding: var(--space-xs-rsr2qu, 8px) 0px var(--space-xs-rsr2qu, 8px) var(--space-scaled-l-t03y3z, 20px);
+  border-bottom: 1px solid #e9ebed;
+  border-bottom: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+}
+.awsui_visible-content-option_tc96w_d6ntf_206:not(#\9):last-child {
+  border-bottom: none;
+}
+
+.awsui_visible-content-option-label_tc96w_d6ntf_217:not(#\9) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 20px;
+  padding-right: var(--space-l-4vl6xu, 20px);
+  flex-grow: 1;
+}
+
+.awsui_root_tc96w_d6ntf_225:not(#\9),
+.awsui_modal-root_tc96w_d6ntf_226:not(#\9),
+.awsui_trigger-button_tc96w_d6ntf_227:not(#\9),
+.awsui_cancel-button_tc96w_d6ntf_228:not(#\9),
+.awsui_confirm-button_tc96w_d6ntf_229:not(#\9),
+.awsui_custom_tc96w_d6ntf_230:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_second-column-small_tc96w_d6ntf_234:not(#\9) {
+  padding-top: calc(2 * 20px);
+  padding-top: calc(2 * var(--space-scaled-l-t03y3z, 20px));
+}
+
+.awsui_wrap-lines_tc96w_d6ntf_238:not(#\9),
+.awsui_page-size_tc96w_d6ntf_239:not(#\9),
+.awsui_page-size-form-field_tc96w_d6ntf_240:not(#\9),
+.awsui_page-size-radio-group_tc96w_d6ntf_241:not(#\9) {
+  /* used in test-utils */
+}

package/collection-preferences/styles.selectors.js

@@ -0,0 +1,25 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "visible-content": "awsui_visible-content_tc96w_d6ntf_185",
+  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_d6ntf_186",
+  "visible-content-groups": "awsui_visible-content-groups_tc96w_d6ntf_187",
+  "visible-content-group": "awsui_visible-content-group_tc96w_d6ntf_187",
+  "visible-content-title": "awsui_visible-content-title_tc96w_d6ntf_192",
+  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_d6ntf_200",
+  "visible-content-option": "awsui_visible-content-option_tc96w_d6ntf_206",
+  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_d6ntf_217",
+  "root": "awsui_root_tc96w_d6ntf_225",
+  "modal-root": "awsui_modal-root_tc96w_d6ntf_226",
+  "trigger-button": "awsui_trigger-button_tc96w_d6ntf_227",
+  "cancel-button": "awsui_cancel-button_tc96w_d6ntf_228",
+  "confirm-button": "awsui_confirm-button_tc96w_d6ntf_229",
+  "custom": "awsui_custom_tc96w_d6ntf_230",
+  "second-column-small": "awsui_second-column-small_tc96w_d6ntf_234",
+  "wrap-lines": "awsui_wrap-lines_tc96w_d6ntf_238",
+  "page-size": "awsui_page-size_tc96w_d6ntf_239",
+  "page-size-form-field": "awsui_page-size-form-field_tc96w_d6ntf_240",
+  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_d6ntf_241"
+};
+  

package/collection-preferences/utils.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { CollectionPreferencesProps } from './interfaces';
+export declare const copyPreferences: ({ pageSize, wrapLines, visibleContent, custom, }: CollectionPreferencesProps.Preferences) => CollectionPreferencesProps.Preferences;
+export declare const mergePreferences: (newPref: CollectionPreferencesProps.Preferences, oldPref: CollectionPreferencesProps.Preferences) => CollectionPreferencesProps.Preferences;
+interface ModalContentLayoutProps {
+    left: React.ReactNode;
+    right: React.ReactNode;
+}
+export declare const ModalContentLayout: ({ left, right }: ModalContentLayoutProps) => JSX.Element;
+interface PageSizePreferenceProps extends CollectionPreferencesProps.PageSizePreference {
+    onChange: (value: number) => void;
+    value?: number;
+}
+export declare const PageSizePreference: ({ title, options, value, onChange }: PageSizePreferenceProps) => JSX.Element;
+interface WrapLinesPreferenceProps extends CollectionPreferencesProps.WrapLinesPreference {
+    onChange: (value: boolean) => void;
+    value?: boolean;
+}
+export declare const WrapLinesPreference: ({ label, description, value, onChange }: WrapLinesPreferenceProps) => JSX.Element;
+interface CustomPreferenceProps<T = any> extends Pick<CollectionPreferencesProps<T>, 'customPreference'> {
+    onChange: (value: T) => void;
+    value: T;
+}
+export declare const CustomPreference: ({ value, customPreference, onChange }: CustomPreferenceProps) => JSX.Element | null;
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/collection-preferences/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/utils.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAG1D,eAAO,MAAM,eAAe,qDAKzB,2BAA2B,WAAW,KAAG,2BAA2B,WAKrE,CAAC;AAEH,eAAO,MAAM,gBAAgB,YAClB,2BAA2B,WAAW,WACtC,2BAA2B,WAAW,KAC9C,2BAA2B,WAK5B,CAAC;AAEH,UAAU,uBAAuB;IAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,oBAAqB,uBAAuB,gBAsB1E,CAAC;AAEF,UAAU,uBAAwB,SAAQ,0BAA0B,CAAC,kBAAkB;IACrF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,kBAAkB,wCAAyC,uBAAuB,gBAW9F,CAAC;AAEF,UAAU,wBAAyB,SAAQ,0BAA0B,CAAC,mBAAmB;IACvF,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,mBAAmB,4CAA6C,wBAAwB,gBASpG,CAAC;AAEF,UAAU,qBAAqB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC;IACtG,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,KAAK,EAAE,CAAC,CAAC;CACV;AACD,eAAO,MAAM,gBAAgB,0CAA2C,qBAAqB,uBAc5F,CAAC"}

package/collection-preferences/utils.js

@@ -0,0 +1,71 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import InternalCheckbox from '../checkbox/internal';
+import InternalColumnLayout from '../column-layout/internal';
+import InternalFormField from '../form-field/internal';
+import InternalRadioGroup from '../radio-group/internal';
+import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import styles from './styles.css.js';
+export var copyPreferences = function (_a) {
+    var pageSize = _a.pageSize, wrapLines = _a.wrapLines, visibleContent = _a.visibleContent, custom = _a.custom;
+    return ({
+        pageSize: pageSize,
+        wrapLines: wrapLines,
+        visibleContent: visibleContent,
+        custom: custom
+    });
+};
+export var mergePreferences = function (newPref, oldPref) { return ({
+    pageSize: newPref.pageSize !== undefined ? newPref.pageSize : oldPref.pageSize,
+    wrapLines: newPref.wrapLines !== undefined ? newPref.wrapLines : oldPref.wrapLines,
+    visibleContent: newPref.visibleContent !== undefined ? newPref.visibleContent : oldPref.visibleContent,
+    custom: newPref.custom !== undefined ? newPref.custom : oldPref.custom
+}); };
+export var ModalContentLayout = function (_a) {
+    var left = _a.left, right = _a.right;
+    var _b = useContainerBreakpoints(['xs']), breakpoint = _b[0], ref = _b[1];
+    var smallContainer = breakpoint === 'default';
+    if (smallContainer) {
+        return (React.createElement("div", { ref: ref },
+            React.createElement("div", null, left),
+            right && React.createElement("div", { className: styles['second-column-small'] }, right)));
+    }
+    var columns = right ? 2 : 1;
+    return (React.createElement("div", { ref: ref },
+        React.createElement(InternalColumnLayout, { columns: columns, variant: "text-grid" },
+            React.createElement("div", null, left),
+            right && React.createElement("div", null, right))));
+};
+export var PageSizePreference = function (_a) {
+    var title = _a.title, options = _a.options, value = _a.value, onChange = _a.onChange;
+    return (React.createElement("div", { className: styles['page-size'] },
+        React.createElement(InternalFormField, { label: title, stretch: true, className: styles['page-size-form-field'] },
+            React.createElement(InternalRadioGroup, { className: styles['page-size-radio-group'], value: "".concat(value), items: options.map(function (_a) {
+                    var label = _a.label, value = _a.value;
+                    return ({ label: label, value: "".concat(value) });
+                }), onChange: function (_a) {
+                    var detail = _a.detail;
+                    return onChange(parseInt(detail.value, 10));
+                } }))));
+};
+export var WrapLinesPreference = function (_a) {
+    var label = _a.label, description = _a.description, value = _a.value, onChange = _a.onChange;
+    return (React.createElement(InternalCheckbox, { checked: !!value, description: description, onChange: function (_a) {
+            var detail = _a.detail;
+            return onChange(detail.checked);
+        }, className: styles['wrap-lines'] }, label));
+};
+export var CustomPreference = function (_a) {
+    var value = _a.value, customPreference = _a.customPreference, onChange = _a.onChange;
+    var _b = useState(value), customState = _b[0], setCustomState = _b[1];
+    if (customPreference) {
+        return (React.createElement("div", { className: styles.custom }, customPreference(customState, function (value) {
+            // prevent value to be treated as a functional callback
+            setCustomState(function () { return value; });
+            onChange(value);
+        })));
+    }
+    return null;
+};
+//# sourceMappingURL=utils.js.map

package/collection-preferences/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/collection-preferences/utils.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, { useState } from 'react';\nimport InternalCheckbox from '../checkbox/internal';\nimport InternalColumnLayout from '../column-layout/internal';\nimport InternalFormField from '../form-field/internal';\nimport InternalRadioGroup from '../radio-group/internal';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { CollectionPreferencesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const copyPreferences = ({\n  pageSize,\n  wrapLines,\n  visibleContent,\n  custom,\n}: CollectionPreferencesProps.Preferences): CollectionPreferencesProps.Preferences => ({\n  pageSize,\n  wrapLines,\n  visibleContent,\n  custom,\n});\n\nexport const mergePreferences = (\n  newPref: CollectionPreferencesProps.Preferences,\n  oldPref: CollectionPreferencesProps.Preferences\n): CollectionPreferencesProps.Preferences => ({\n  pageSize: newPref.pageSize !== undefined ? newPref.pageSize : oldPref.pageSize,\n  wrapLines: newPref.wrapLines !== undefined ? newPref.wrapLines : oldPref.wrapLines,\n  visibleContent: newPref.visibleContent !== undefined ? newPref.visibleContent : oldPref.visibleContent,\n  custom: newPref.custom !== undefined ? newPref.custom : oldPref.custom,\n});\n\ninterface ModalContentLayoutProps {\n  left: React.ReactNode;\n  right: React.ReactNode;\n}\n\nexport const ModalContentLayout = ({ left, right }: ModalContentLayoutProps) => {\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const smallContainer = breakpoint === 'default';\n\n  if (smallContainer) {\n    return (\n      <div ref={ref}>\n        <div>{left}</div>\n        {right && <div className={styles['second-column-small']}>{right}</div>}\n      </div>\n    );\n  }\n\n  const columns = right ? 2 : 1;\n  return (\n    <div ref={ref}>\n      <InternalColumnLayout columns={columns} variant=\"text-grid\">\n        <div>{left}</div>\n        {right && <div>{right}</div>}\n      </InternalColumnLayout>\n    </div>\n  );\n};\n\ninterface PageSizePreferenceProps extends CollectionPreferencesProps.PageSizePreference {\n  onChange: (value: number) => void;\n  value?: number;\n}\n\nexport const PageSizePreference = ({ title, options, value, onChange }: PageSizePreferenceProps) => (\n  <div className={styles['page-size']}>\n    <InternalFormField label={title} stretch={true} className={styles['page-size-form-field']}>\n      <InternalRadioGroup\n        className={styles['page-size-radio-group']}\n        value={`${value}`}\n        items={options.map(({ label, value }) => ({ label, value: `${value}` }))}\n        onChange={({ detail }) => onChange(parseInt(detail.value, 10))}\n      />\n    </InternalFormField>\n  </div>\n);\n\ninterface WrapLinesPreferenceProps extends CollectionPreferencesProps.WrapLinesPreference {\n  onChange: (value: boolean) => void;\n  value?: boolean;\n}\n\nexport const WrapLinesPreference = ({ label, description, value, onChange }: WrapLinesPreferenceProps) => (\n  <InternalCheckbox\n    checked={!!value}\n    description={description}\n    onChange={({ detail }) => onChange(detail.checked)}\n    className={styles['wrap-lines']}\n  >\n    {label}\n  </InternalCheckbox>\n);\n\ninterface CustomPreferenceProps<T = any> extends Pick<CollectionPreferencesProps<T>, 'customPreference'> {\n  onChange: (value: T) => void;\n  value: T;\n}\nexport const CustomPreference = ({ value, customPreference, onChange }: CustomPreferenceProps) => {\n  const [customState, setCustomState] = useState(value);\n  if (customPreference) {\n    return (\n      <div className={styles.custom}>\n        {customPreference(customState, value => {\n          // prevent value to be treated as a functional callback\n          setCustomState(() => value);\n          onChange(value);\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n"]}

package/collection-preferences/visible-content.d.ts

@@ -0,0 +1,8 @@
+import { CollectionPreferencesProps } from './interfaces';
+interface VisibleContentPreferenceProps extends CollectionPreferencesProps.VisibleContentPreference {
+    onChange: (value: ReadonlyArray<string>) => void;
+    value?: ReadonlyArray<string>;
+}
+export default function VisibleContentPreference({ title, options, value, onChange, }: VisibleContentPreferenceProps): JSX.Element;
+export {};
+//# sourceMappingURL=visible-content.d.ts.map

package/collection-preferences/visible-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visible-content.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/visible-content.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAY1D,UAAU,6BAA8B,SAAQ,0BAA0B,CAAC,wBAAwB;IACjG,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,KAAK,EACL,OAAO,EACP,KAAU,EACV,QAAQ,GACT,EAAE,6BAA6B,eAuE/B"}

package/collection-preferences/visible-content.js

@@ -0,0 +1,44 @@
+import { __assign, __spreadArray } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import InternalSpaceBetween from '../space-between/internal';
+import InternalToggle from '../toggle/internal';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
+import styles from './styles.css.js';
+var isVisible = function (id, visibleIds) { return visibleIds.indexOf(id) !== -1; };
+var className = function (suffix) { return ({
+    className: styles["visible-content-".concat(suffix)]
+}); };
+export default function VisibleContentPreference(_a) {
+    var title = _a.title, options = _a.options, _b = _a.value, value = _b === void 0 ? [] : _b, onChange = _a.onChange;
+    var idPrefix = useUniqueId('visible-content');
+    var flatOptionsIds = options.reduce(function (ids, group) { return __spreadArray(__spreadArray([], ids, true), group.options.reduce(function (groupIds, option) { return __spreadArray(__spreadArray([], groupIds, true), [option.id], false); }, []), true); }, []);
+    var onToggle = function (id) {
+        if (!isVisible(id, value)) {
+            onChange(__spreadArray(__spreadArray([], value, true), [id], false).sort(function (firstId, secondId) { return flatOptionsIds.indexOf(firstId) - flatOptionsIds.indexOf(secondId); }));
+        }
+        else {
+            onChange(value.filter(function (currentId) { return currentId !== id; }));
+        }
+    };
+    var selectionOption = function (option, optionGroupIndex, optionIndex) {
+        var labelId = "".concat(idPrefix, "-").concat(optionGroupIndex, "-").concat(optionIndex);
+        return (React.createElement("div", __assign({ key: optionIndex }, className('option')),
+            React.createElement("label", __assign({}, className('option-label'), { htmlFor: labelId }), option.label),
+            React.createElement("div", __assign({}, className('toggle')),
+                React.createElement(InternalToggle, { checked: isVisible(option.id, value), onChange: function () { return onToggle(option.id); }, disabled: option.editable === false, controlId: labelId }))));
+    };
+    var outerGroupLabelId = "".concat(idPrefix, "-outer");
+    return (React.createElement("div", { className: styles['visible-content'] },
+        React.createElement("div", __assign({}, className('title'), { id: outerGroupLabelId }), title),
+        React.createElement(InternalSpaceBetween, __assign({}, className('groups'), { size: "xs" }), options.map(function (optionGroup, optionGroupIndex) {
+            var groupLabelId = "".concat(idPrefix, "-").concat(optionGroupIndex);
+            return (React.createElement("div", __assign({ key: optionGroupIndex }, className('group'), { role: "group", "aria-labelledby": "".concat(outerGroupLabelId, " ").concat(groupLabelId) }),
+                React.createElement("div", __assign({}, className('group-label'), { id: groupLabelId }), optionGroup.label),
+                React.createElement("div", null, optionGroup.options.map(function (option, optionIndex) {
+                    return selectionOption(option, optionGroupIndex, optionIndex);
+                }))));
+        }))));
+}
+//# sourceMappingURL=visible-content.js.map

package/collection-preferences/visible-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visible-content.js","sourceRoot":"","sources":["../../../src/collection-preferences/visible-content.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 from 'react';\nimport InternalSpaceBetween from '../space-between/internal';\nimport InternalToggle from '../toggle/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nimport { CollectionPreferencesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nconst isVisible = (id: string, visibleIds: ReadonlyArray<string>) => visibleIds.indexOf(id) !== -1;\n\ninterface ClassNameProps {\n  className: string;\n}\nconst className = (suffix: string): ClassNameProps => ({\n  className: styles[`visible-content-${suffix}`],\n});\n\ninterface VisibleContentPreferenceProps extends CollectionPreferencesProps.VisibleContentPreference {\n  onChange: (value: ReadonlyArray<string>) => void;\n  value?: ReadonlyArray<string>;\n}\n\nexport default function VisibleContentPreference({\n  title,\n  options,\n  value = [],\n  onChange,\n}: VisibleContentPreferenceProps) {\n  const idPrefix = useUniqueId('visible-content');\n\n  const flatOptionsIds = options.reduce<string[]>(\n    (ids, group) => [...ids, ...group.options.reduce<string[]>((groupIds, option) => [...groupIds, option.id], [])],\n    []\n  );\n\n  const onToggle = (id: string) => {\n    if (!isVisible(id, value)) {\n      onChange(\n        [...value, id].sort((firstId, secondId) => flatOptionsIds.indexOf(firstId) - flatOptionsIds.indexOf(secondId))\n      );\n    } else {\n      onChange(value.filter(currentId => currentId !== id));\n    }\n  };\n\n  const selectionOption = (\n    option: CollectionPreferencesProps.VisibleContentOption,\n    optionGroupIndex: number,\n    optionIndex: number\n  ) => {\n    const labelId = `${idPrefix}-${optionGroupIndex}-${optionIndex}`;\n    return (\n      <div key={optionIndex} {...className('option')}>\n        <label {...className('option-label')} htmlFor={labelId}>\n          {option.label}\n        </label>\n        <div {...className('toggle')}>\n          <InternalToggle\n            checked={isVisible(option.id, value)}\n            onChange={() => onToggle(option.id)}\n            disabled={option.editable === false}\n            controlId={labelId}\n          />\n        </div>\n      </div>\n    );\n  };\n\n  const outerGroupLabelId = `${idPrefix}-outer`;\n  return (\n    <div className={styles['visible-content']}>\n      <div {...className('title')} id={outerGroupLabelId}>\n        {title}\n      </div>\n      <InternalSpaceBetween {...className('groups')} size=\"xs\">\n        {options.map((optionGroup, optionGroupIndex) => {\n          const groupLabelId = `${idPrefix}-${optionGroupIndex}`;\n          return (\n            <div\n              key={optionGroupIndex}\n              {...className('group')}\n              role=\"group\"\n              aria-labelledby={`${outerGroupLabelId} ${groupLabelId}`}\n            >\n              <div {...className('group-label')} id={groupLabelId}>\n                {optionGroup.label}\n              </div>\n              <div>\n                {optionGroup.options.map((option, optionIndex) =>\n                  selectionOption(option, optionGroupIndex, optionIndex)\n                )}\n              </div>\n            </div>\n          );\n        })}\n      </InternalSpaceBetween>\n    </div>\n  );\n}\n"]}

package/column-layout/index.d.ts

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

package/column-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/column-layout/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAW,EACX,OAAmB,EACnB,OAAgB,EAChB,cAAsB,EACtB,GAAG,KAAK,EACT,EAAE,iBAAiB,eAgBnB"}

package/column-layout/index.js

@@ -0,0 +1,18 @@
+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 InternalColumnLayout, { COLUMN_TRIGGERS } from './internal';
+import { getExternalProps } from '../internal/utils/external-props';
+import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import useBaseComponent from '../internal/hooks/use-base-component';
+export default function ColumnLayout(_a) {
+    var _b = _a.columns, columns = _b === void 0 ? 1 : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, _d = _a.borders, borders = _d === void 0 ? 'none' : _d, _e = _a.disableGutters, disableGutters = _e === void 0 ? false : _e, props = __rest(_a, ["columns", "variant", "borders", "disableGutters"]);
+    var baseComponentProps = useBaseComponent('ColumnLayout');
+    var _f = useContainerBreakpoints(COLUMN_TRIGGERS), breakpoint = _f[0], ref = _f[1];
+    var externalProps = getExternalProps(props);
+    return (React.createElement(InternalColumnLayout, __assign({ columns: columns, variant: variant, borders: borders, disableGutters: disableGutters }, externalProps, baseComponentProps, { __breakpoint: breakpoint, ref: ref })));
+}
+applyDisplayName(ColumnLayout, 'ColumnLayout');
+//# sourceMappingURL=index.js.map

package/column-layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/column-layout/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,oBAAoB,EAAE,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAKpE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAMjB;IALlB,IAAA,eAAW,EAAX,OAAO,mBAAG,CAAC,KAAA,EACX,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EACnB,eAAgB,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACnB,KAAK,cAL2B,mDAMpC,CADS;IAER,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;IACtD,IAAA,KAAoB,uBAAuB,CAAC,eAAe,CAAC,EAA3D,UAAU,QAAA,EAAE,GAAG,QAA4C,CAAC;IACnE,IAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CACL,oBAAC,oBAAoB,aACnB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,IAC1B,aAAa,EACb,kBAAkB,IACtB,YAAY,EAAE,UAAU,EACxB,GAAG,EAAE,GAAG,IACR,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,YAAY,EAAE,cAAc,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 InternalColumnLayout, { COLUMN_TRIGGERS } from './internal';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { ColumnLayoutProps } from './interfaces';\n\nexport { ColumnLayoutProps };\n\nexport default function ColumnLayout({\n  columns = 1,\n  variant = 'default',\n  borders = 'none',\n  disableGutters = false,\n  ...props\n}: ColumnLayoutProps) {\n  const baseComponentProps = useBaseComponent('ColumnLayout');\n  const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);\n  const externalProps = getExternalProps(props);\n  return (\n    <InternalColumnLayout\n      columns={columns}\n      variant={variant}\n      borders={borders}\n      disableGutters={disableGutters}\n      {...externalProps}\n      {...baseComponentProps}\n      __breakpoint={breakpoint}\n      ref={ref}\n    />\n  );\n}\n\napplyDisplayName(ColumnLayout, 'ColumnLayout');\n"]}

package/column-layout/interfaces.d.ts

@@ -0,0 +1,35 @@
+import { BaseComponentProps } from '../internal/base-component';
+import React from 'react';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { ColumnLayoutBreakpoint } from './internal';
+export interface ColumnLayoutProps extends BaseComponentProps {
+    /**
+     * Specifies the number of columns in each grid row.
+     * Valid values are any integer between 1 and 4.
+     */
+    columns?: number;
+    /**
+     * Specifies the content type. This determines the spacing of the grid.
+     */
+    variant?: ColumnLayoutProps.Variant;
+    /**
+     * Controls whether dividers are placed between rows and columns.
+     */
+    borders?: ColumnLayoutProps.Borders;
+    /**
+     * Determines whether the default gutters between columns are removed.
+     */
+    disableGutters?: boolean;
+    /**
+     * The columns to render.
+     */
+    children?: React.ReactNode;
+}
+export declare namespace ColumnLayoutProps {
+    type Variant = 'default' | 'text-grid';
+    type Borders = 'none' | 'vertical' | 'horizontal' | 'all';
+}
+export interface InternalColumnLayoutProps extends ColumnLayoutProps, InternalBaseComponentProps {
+    __breakpoint?: ColumnLayoutBreakpoint;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/column-layout/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/column-layout/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;AAClF,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC;IAEpC;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC;IAEpC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAiB,iBAAiB,CAAC;IACjC,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC9C,KAAY,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,KAAK,CAAC;CAClE;AAED,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,EAAE,0BAA0B;IAC9F,YAAY,CAAC,EAAE,sBAAsB,CAAC;CACvC"}

package/column-layout/interfaces.js

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

package/column-layout/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/column-layout/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';\nimport { ColumnLayoutBreakpoint } from './internal';\n\nexport interface ColumnLayoutProps extends BaseComponentProps {\n  /**\n   * Specifies the number of columns in each grid row.\n   * Valid values are any integer between 1 and 4.\n   */\n  columns?: number;\n\n  /**\n   * Specifies the content type. This determines the spacing of the grid.\n   */\n  variant?: ColumnLayoutProps.Variant;\n\n  /**\n   * Controls whether dividers are placed between rows and columns.\n   */\n  borders?: ColumnLayoutProps.Borders;\n\n  /**\n   * Determines whether the default gutters between columns are removed.\n   */\n  disableGutters?: boolean;\n\n  /**\n   * The columns to render.\n   */\n  children?: React.ReactNode;\n}\n\nexport namespace ColumnLayoutProps {\n  export type Variant = 'default' | 'text-grid';\n  export type Borders = 'none' | 'vertical' | 'horizontal' | 'all';\n}\n\nexport interface InternalColumnLayoutProps extends ColumnLayoutProps, InternalBaseComponentProps {\n  __breakpoint?: ColumnLayoutBreakpoint;\n}\n"]}

package/column-layout/internal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { InternalColumnLayoutProps } from './interfaces';
+export declare const COLUMN_TRIGGERS: readonly ["default", "xxs", "xs"];
+export declare type ColumnLayoutBreakpoint = typeof COLUMN_TRIGGERS[number] | null;
+declare const _default: React.ForwardRefExoticComponent<InternalColumnLayoutProps & React.RefAttributes<any>>;
+/**
+ * A responsive grid layout.
+ */
+export default _default;
+//# sourceMappingURL=internal.d.ts.map

package/column-layout/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/column-layout/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAEzD,eAAO,MAAM,eAAe,mCAAoC,CAAC;AACjE,oBAAY,sBAAsB,GAAG,OAAO,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;;AAQ3E;;GAEG;AACH,wBAyCG"}

package/column-layout/internal.js

@@ -0,0 +1,41 @@
+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 clsx from 'clsx';
+import flattenChildren from 'react-keyed-flatten-children';
+import InternalGrid from '../grid/internal';
+import { getBaseProps } from '../internal/base-component';
+import { repeat } from './util';
+import styles from './styles.css.js';
+export var COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
+var COLUMN_DEFS = {
+    1: { colspan: { "default": 12, xxs: 12, xs: 12 } },
+    2: { colspan: { "default": 12, xxs: 6, xs: 6 } },
+    3: { colspan: { "default": 12, xxs: 6, xs: 4 } },
+    4: { colspan: { "default": 12, xxs: 6, xs: 3 } }
+};
+/**
+ * A responsive grid layout.
+ */
+export default React.forwardRef(function ColumnLayout(_a, ref) {
+    var _b;
+    var _c;
+    var _d = _a.columns, columns = _d === void 0 ? 1 : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.borders, borders = _f === void 0 ? 'none' : _f, _g = _a.disableGutters, disableGutters = _g === void 0 ? false : _g, children = _a.children, __breakpoint = _a.__breakpoint, __internalRootRef = _a.__internalRootRef, restProps = __rest(_a, ["columns", "variant", "borders", "disableGutters", "children", "__breakpoint", "__internalRootRef"]);
+    var baseProps = getBaseProps(restProps);
+    var isTextGridVariant = variant === 'text-grid';
+    var shouldDisableGutters = !isTextGridVariant && disableGutters;
+    var shouldHaveHorizontalBorders = !isTextGridVariant && (borders === 'horizontal' || borders === 'all');
+    var shouldHaveVerticalBorders = !isTextGridVariant && (borders === 'vertical' || borders === 'all');
+    /*
+     Flattening the children allows us to "see through" React Fragments and nested arrays.
+     */
+    var flattenedChildren = flattenChildren(children);
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles['column-layout']), ref: __internalRootRef }),
+        React.createElement(InternalGrid, { ref: ref, disableGutters: true, gridDefinition: repeat((_c = COLUMN_DEFS[columns]) !== null && _c !== void 0 ? _c : {}, flattenedChildren.length), className: clsx(styles.grid, styles["grid-columns-".concat(columns)], styles["grid-variant-".concat(variant)], (_b = {},
+                _b[styles['grid-horizontal-borders']] = shouldHaveHorizontalBorders,
+                _b[styles['grid-vertical-borders']] = shouldHaveVerticalBorders,
+                _b[styles['grid-no-gutters']] = shouldDisableGutters,
+                _b)), __breakpoint: __breakpoint, __responsiveClassName: function (breakpoint) { return breakpoint && styles["grid-breakpoint-".concat(breakpoint)]; } }, children)));
+});
+//# sourceMappingURL=internal.js.map

package/column-layout/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/column-layout/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,MAAM,CAAC,IAAM,eAAe,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAU,CAAC;AAEjE,IAAM,WAAW,GAA4D;IAC3E,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,SAAO,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IAChD,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,SAAO,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;IAC9C,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,SAAO,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;IAC9C,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,SAAO,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;CAC/C,CAAC;AAEF;;GAEG;AACH,eAAe,KAAK,CAAC,UAAU,CAAC,SAAS,YAAY,CACnD,EAS4B,EAC5B,GAAoB;;;IATlB,IAAA,eAAW,EAAX,OAAO,mBAAG,CAAC,KAAA,EACX,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EACnB,eAAgB,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,iBAAiB,uBAAA,EACd,SAAS,cARd,oGASC,CADa;IAId,IAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAM,iBAAiB,GAAG,OAAO,KAAK,WAAW,CAAC;IAClD,IAAM,oBAAoB,GAAG,CAAC,iBAAiB,IAAI,cAAc,CAAC;IAClE,IAAM,2BAA2B,GAAG,CAAC,iBAAiB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,OAAO,KAAK,KAAK,CAAC,CAAC;IAC1G,IAAM,yBAAyB,GAAG,CAAC,iBAAiB,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,OAAO,KAAK,KAAK,CAAC,CAAC;IACtG;;OAEG;IACH,IAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAEpD,OAAO,CACL,wCAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,GAAG,EAAE,iBAAiB;QACvG,oBAAC,YAAY,IACX,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,IAAI,EACpB,cAAc,EAAE,MAAM,CAAC,MAAA,WAAW,CAAC,OAAO,CAAC,mCAAI,EAAE,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAC5E,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,uBAAgB,OAAO,CAAE,CAAC,EAAE,MAAM,CAAC,uBAAgB,OAAO,CAAE,CAAC;gBAC/F,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,2BAA2B;gBAChE,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,yBAAyB;gBAC5D,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,oBAAoB;oBACjD,EACF,YAAY,EAAE,YAAY,EAC1B,qBAAqB,EAAE,UAAA,UAAU,IAAI,OAAA,UAAU,IAAI,MAAM,CAAC,0BAAmB,UAAU,CAAE,CAAC,EAArD,CAAqD,IAEzF,QAAQ,CACI,CACX,CACP,CAAC;AACJ,CAAC,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 clsx from 'clsx';\nimport flattenChildren from 'react-keyed-flatten-children';\nimport InternalGrid from '../grid/internal';\nimport { GridProps } from '../grid/interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { repeat } from './util';\nimport styles from './styles.css.js';\nimport { InternalColumnLayoutProps } from './interfaces';\n\nexport const COLUMN_TRIGGERS = ['default', 'xxs', 'xs'] as const;\nexport type ColumnLayoutBreakpoint = typeof COLUMN_TRIGGERS[number] | null;\nconst COLUMN_DEFS: Record<number, GridProps.ElementDefinition | undefined> = {\n  1: { colspan: { default: 12, xxs: 12, xs: 12 } },\n  2: { colspan: { default: 12, xxs: 6, xs: 6 } },\n  3: { colspan: { default: 12, xxs: 6, xs: 4 } },\n  4: { colspan: { default: 12, xxs: 6, xs: 3 } },\n};\n\n/**\n * A responsive grid layout.\n */\nexport default React.forwardRef(function ColumnLayout(\n  {\n    columns = 1,\n    variant = 'default',\n    borders = 'none',\n    disableGutters = false,\n    children,\n    __breakpoint,\n    __internalRootRef,\n    ...restProps\n  }: InternalColumnLayoutProps,\n  ref?: React.Ref<any>\n) {\n  const baseProps = getBaseProps(restProps);\n  const isTextGridVariant = variant === 'text-grid';\n  const shouldDisableGutters = !isTextGridVariant && disableGutters;\n  const shouldHaveHorizontalBorders = !isTextGridVariant && (borders === 'horizontal' || borders === 'all');\n  const shouldHaveVerticalBorders = !isTextGridVariant && (borders === 'vertical' || borders === 'all');\n  /*\n   Flattening the children allows us to \"see through\" React Fragments and nested arrays.\n   */\n  const flattenedChildren = flattenChildren(children);\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles['column-layout'])} ref={__internalRootRef}>\n      <InternalGrid\n        ref={ref}\n        disableGutters={true}\n        gridDefinition={repeat(COLUMN_DEFS[columns] ?? {}, flattenedChildren.length)}\n        className={clsx(styles.grid, styles[`grid-columns-${columns}`], styles[`grid-variant-${variant}`], {\n          [styles['grid-horizontal-borders']]: shouldHaveHorizontalBorders,\n          [styles['grid-vertical-borders']]: shouldHaveVerticalBorders,\n          [styles['grid-no-gutters']]: shouldDisableGutters,\n        })}\n        __breakpoint={__breakpoint}\n        __responsiveClassName={breakpoint => breakpoint && styles[`grid-breakpoint-${breakpoint}`]}\n      >\n        {children}\n      </InternalGrid>\n    </div>\n  );\n});\n"]}