@cloudscape-design/components-themeable 3.0.1372 → 3.0.1374

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":"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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 clsx from 'clsx';\n\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { getBaseProps } from '../../base-component';\nimport { useOneTheme, useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport styles from './styles.css.js';\n\ninterface CheckboxIconProps extends BaseComponentProps {\n  checked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  style?: {\n    box?: {\n      fill?: string;\n      stroke?: string;\n    };\n    line?: {\n      stroke?: string;\n    };\n  };\n}\ninterface Dimension {\n  viewBox: string;\n  indeterminate: string;\n  checked: string;\n  xy: number;\n  r: number;\n  size: number;\n}\n\n// Can't use css variables for svg attributes\nconst dimensionsByTheme: Record<NonNullable<'default' | 'refresh' | 'one'>, Dimension> = {\n  default: {\n    viewBox: '0 0 14 14',\n    indeterminate: '2.5,7 11.5,7',\n    checked: '2.5,7 6,10 11,3',\n    xy: 0.5,\n    r: 1.5,\n    size: 13,\n  },\n  refresh: {\n    viewBox: '0 0 16 16',\n    indeterminate: '3.5,8 12.5,8',\n    checked: '3.5,8 7,11 12,4',\n    xy: 0.5,\n    r: 3,\n    size: 15,\n  },\n  one: {\n    viewBox: '0 0 16 16',\n    indeterminate: '3.5,8 12.5,8',\n    checked: '3.5,8 7,11 12,4',\n    xy: 0.5,\n    r: 2,\n    size: 15,\n  },\n};\n\nconst CheckboxIcon = ({\n  checked,\n  indeterminate,\n  disabled = false,\n  readOnly = false,\n  style,\n  ...restProps\n}: CheckboxIconProps) => {\n  const baseProps = getBaseProps(restProps);\n  const oneTheme = useOneTheme();\n  const theme = useVisualRefresh() ? (oneTheme ? 'one' : 'refresh') : 'default';\n  const dimensions = dimensionsByTheme[theme];\n\n  return (\n    <svg className={styles.root} viewBox={dimensions.viewBox} aria-hidden=\"true\" focusable=\"false\" {...baseProps}>\n      <rect\n        className={clsx(styles['styled-box'], {\n          [styles['styled-box-checked']]: checked,\n          [styles['styled-box-indeterminate']]: indeterminate,\n          [styles['styled-box-disabled']]: disabled,\n          [styles['styled-box-readonly']]: readOnly,\n        })}\n        x={dimensions.xy}\n        y={dimensions.xy}\n        rx={dimensions.r}\n        ry={dimensions.r}\n        width={dimensions.size}\n        height={dimensions.size}\n        style={{ fill: style?.box?.fill, stroke: style?.box?.stroke }}\n      />\n      {checked || indeterminate ? (\n        <polyline\n          className={clsx(styles['styled-line'], {\n            [styles['styled-line-disabled']]: disabled,\n            [styles['styled-line-readonly']]: readOnly,\n          })}\n          points={indeterminate ? dimensions.indeterminate : dimensions.checked}\n          style={{ stroke: style?.line?.stroke }}\n        />\n      ) : null}\n    </svg>\n  );\n};\n\nexport default CheckboxIcon;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":"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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 clsx from 'clsx';\n\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { getBaseProps } from '../../base-component';\nimport { useOneTheme, useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport styles from './styles.css.js';\n\ninterface CheckboxIconProps extends BaseComponentProps {\n  checked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  style?: {\n    box?: {\n      fill?: string;\n      stroke?: string;\n    };\n    line?: {\n      stroke?: string;\n    };\n  };\n}\ninterface Dimension {\n  viewBox: string;\n  indeterminate: string;\n  checked: string;\n  xy: number;\n  r: number;\n  size: number;\n}\n\n// Can't use css variables for svg attributes\nconst dimensionsByTheme: Record<NonNullable<'default' | 'refresh' | 'one'>, Dimension> = {\n  default: {\n    viewBox: '0 0 14 14',\n    indeterminate: '2.5,7 11.5,7',\n    checked: '2.5,7 6,10 11,3',\n    xy: 0.5,\n    r: 1.5,\n    size: 13,\n  },\n  refresh: {\n    viewBox: '0 0 16 16',\n    indeterminate: '3.5,8 12.5,8',\n    checked: '3.5,8 7,11 12,4',\n    xy: 0.5,\n    r: 3,\n    size: 15,\n  },\n  one: {\n    viewBox: '0 0 16 16',\n    indeterminate: '3.5,8 12.5,8',\n    checked: '3.5,8 7,11 12,4',\n    xy: 0.5,\n    r: 2,\n    size: 15,\n  },\n};\n\nconst CheckboxIcon = ({\n  checked,\n  indeterminate,\n  disabled = false,\n  readOnly = false,\n  style,\n  ...restProps\n}: CheckboxIconProps) => {\n  const baseProps = getBaseProps(restProps);\n  const oneTheme = useOneTheme();\n  const theme = useVisualRefresh() ? (oneTheme ? 'one' : 'refresh') : 'default';\n  const dimensions = dimensionsByTheme[theme];\n\n  // The draw-in animation only plays once the state has changed since mount.\n  const [initialState] = useState({ checked: !!checked, indeterminate: !!indeterminate });\n  const [hasChanged, setHasChanged] = useState(false);\n  if (!hasChanged && (!!checked !== initialState.checked || !!indeterminate !== initialState.indeterminate)) {\n    setHasChanged(true);\n  }\n\n  return (\n    <svg className={styles.root} viewBox={dimensions.viewBox} aria-hidden=\"true\" focusable=\"false\" {...baseProps}>\n      <rect\n        className={clsx(styles['styled-box'], {\n          [styles['styled-box-checked']]: checked,\n          [styles['styled-box-indeterminate']]: indeterminate,\n          [styles['styled-box-disabled']]: disabled,\n          [styles['styled-box-readonly']]: readOnly,\n        })}\n        x={dimensions.xy}\n        y={dimensions.xy}\n        rx={dimensions.r}\n        ry={dimensions.r}\n        width={dimensions.size}\n        height={dimensions.size}\n        style={{ fill: style?.box?.fill, stroke: style?.box?.stroke }}\n      />\n      {checked || indeterminate ? (\n        <polyline\n          className={clsx(styles['styled-line'], {\n            [styles['styled-line-disabled']]: disabled,\n            [styles['styled-line-readonly']]: readOnly,\n          })}\n          data-awsui-motion-ready={hasChanged ? '' : undefined}\n          points={indeterminate ? dimensions.indeterminate : dimensions.checked}\n          style={{ stroke: style?.line?.stroke }}\n        />\n      ) : null}\n    </svg>\n  );\n};\n\nexport default CheckboxIcon;\n"]}

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

@@ -1,14 +1,14 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1fn7j_1v6hl_9",
-  "styled-box": "awsui_styled-box_1fn7j_1v6hl_16",
-  "styled-box-checked": "awsui_styled-box-checked_1fn7j_1v6hl_32",
-  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_1v6hl_32",
-  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_1v6hl_36",
-  "styled-box-readonly": "awsui_styled-box-readonly_1fn7j_1v6hl_36",
-  "styled-line": "awsui_styled-line_1fn7j_1v6hl_40",
-  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_1v6hl_45",
-  "styled-line-readonly": "awsui_styled-line-readonly_1fn7j_1v6hl_48"
+  "root": "awsui_root_1fn7j_xquel_9",
+  "styled-box": "awsui_styled-box_1fn7j_xquel_16",
+  "styled-box-checked": "awsui_styled-box-checked_1fn7j_xquel_32",
+  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_xquel_32",
+  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_xquel_36",
+  "styled-box-readonly": "awsui_styled-box-readonly_1fn7j_xquel_36",
+  "styled-line": "awsui_styled-line_1fn7j_xquel_40",
+  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_xquel_45",
+  "styled-line-readonly": "awsui_styled-line-readonly_1fn7j_xquel_48"
 };
   

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

@@ -6,45 +6,45 @@
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /* 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 */
-.awsui_root_1fn7j_1v6hl_9:not(#\9) {
+.awsui_root_1fn7j_xquel_9:not(#\9) {
   position: absolute;
   inline-size: 100%;
   block-size: 100%;
   inset-block-start: 0;
   inset-inline-start: 0;
 }
-.awsui_root_1fn7j_1v6hl_9 > .awsui_styled-box_1fn7j_1v6hl_16:not(#\9) {
-  fill: var(--color-background-control-default-9p1s17, #ffffff);
-  stroke: var(--color-border-control-default-9qbus4, #687078);
+.awsui_root_1fn7j_xquel_9 > .awsui_styled-box_1fn7j_xquel_16:not(#\9) {
+  fill: var(--awsui-internal-style-background-color, var(--color-background-control-default-9p1s17, #ffffff));
+  stroke: var(--awsui-internal-style-border-color, var(--color-border-control-default-9qbus4, #687078));
   stroke-width: var(--border-width-field-2365x3, 1px);
   transition: fill var(--motion-duration-transition-quick-1p8yzt, 90ms) var(--motion-easing-transition-quick-afgcka, linear), stroke var(--motion-duration-transition-quick-1p8yzt, 90ms) var(--motion-easing-transition-quick-afgcka, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_root_1fn7j_1v6hl_9 > .awsui_styled-box_1fn7j_1v6hl_16:not(#\9) {
+  .awsui_root_1fn7j_xquel_9 > .awsui_styled-box_1fn7j_xquel_16:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_root_1fn7j_1v6hl_9 > .awsui_styled-box_1fn7j_1v6hl_16:not(#\9), .awsui-mode-entering .awsui_root_1fn7j_1v6hl_9 > .awsui_styled-box_1fn7j_1v6hl_16:not(#\9) {
+.awsui-motion-disabled .awsui_root_1fn7j_xquel_9 > .awsui_styled-box_1fn7j_xquel_16:not(#\9), .awsui-mode-entering .awsui_root_1fn7j_xquel_9 > .awsui_styled-box_1fn7j_xquel_16:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_root_1fn7j_1v6hl_9 > .awsui_styled-box-checked_1fn7j_1v6hl_32:not(#\9), .awsui_root_1fn7j_1v6hl_9 > .awsui_styled-box-indeterminate_1fn7j_1v6hl_32:not(#\9) {
-  fill: var(--color-background-control-checked-ksqwhc, #0073bb);
-  stroke: var(--color-border-control-checked-g8qf7s, #0073bb);
+.awsui_root_1fn7j_xquel_9 > .awsui_styled-box-checked_1fn7j_xquel_32:not(#\9), .awsui_root_1fn7j_xquel_9 > .awsui_styled-box-indeterminate_1fn7j_xquel_32:not(#\9) {
+  fill: var(--awsui-internal-style-background-color, var(--color-background-control-checked-ksqwhc, #0073bb));
+  stroke: var(--awsui-internal-style-border-color, var(--color-border-control-checked-g8qf7s, #0073bb));
 }
-.awsui_root_1fn7j_1v6hl_9 > .awsui_styled-box-disabled_1fn7j_1v6hl_36:not(#\9), .awsui_root_1fn7j_1v6hl_9 > .awsui_styled-box-readonly_1fn7j_1v6hl_36:not(#\9) {
-  fill: var(--color-background-control-disabled-m61b8s, #d5dbdb);
-  stroke: var(--color-border-control-disabled-dh8zaw, #d5dbdb);
+.awsui_root_1fn7j_xquel_9 > .awsui_styled-box-disabled_1fn7j_xquel_36:not(#\9), .awsui_root_1fn7j_xquel_9 > .awsui_styled-box-readonly_1fn7j_xquel_36:not(#\9) {
+  fill: var(--awsui-internal-style-background-color, var(--color-background-control-disabled-m61b8s, #d5dbdb));
+  stroke: var(--awsui-internal-style-border-color, var(--color-border-control-disabled-dh8zaw, #d5dbdb));
 }
-.awsui_root_1fn7j_1v6hl_9 > .awsui_styled-line_1fn7j_1v6hl_40:not(#\9) {
-  stroke: var(--color-foreground-control-default-poakg0, #ffffff);
+.awsui_root_1fn7j_xquel_9 > .awsui_styled-line_1fn7j_xquel_40:not(#\9) {
+  stroke: var(--awsui-internal-style-color, var(--color-foreground-control-default-poakg0, #ffffff));
   stroke-width: 2;
   fill: none;
 }
-.awsui_root_1fn7j_1v6hl_9 > .awsui_styled-line-disabled_1fn7j_1v6hl_45:not(#\9) {
-  stroke: var(--color-foreground-control-disabled-bikivj, #ffffff);
+.awsui_root_1fn7j_xquel_9 > .awsui_styled-line-disabled_1fn7j_xquel_45:not(#\9) {
+  stroke: var(--awsui-internal-style-color, var(--color-foreground-control-disabled-bikivj, #ffffff));
 }
-.awsui_root_1fn7j_1v6hl_9 > .awsui_styled-line-readonly_1fn7j_1v6hl_48:not(#\9) {
-  stroke: var(--color-foreground-control-read-only-8sqxyy, #687078);
+.awsui_root_1fn7j_xquel_9 > .awsui_styled-line-readonly_1fn7j_xquel_48:not(#\9) {
+  stroke: var(--awsui-internal-style-color, var(--color-foreground-control-read-only-8sqxyy, #687078));
 }

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

@@ -2,14 +2,14 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1fn7j_1v6hl_9",
-  "styled-box": "awsui_styled-box_1fn7j_1v6hl_16",
-  "styled-box-checked": "awsui_styled-box-checked_1fn7j_1v6hl_32",
-  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_1v6hl_32",
-  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_1v6hl_36",
-  "styled-box-readonly": "awsui_styled-box-readonly_1fn7j_1v6hl_36",
-  "styled-line": "awsui_styled-line_1fn7j_1v6hl_40",
-  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_1v6hl_45",
-  "styled-line-readonly": "awsui_styled-line-readonly_1fn7j_1v6hl_48"
+  "root": "awsui_root_1fn7j_xquel_9",
+  "styled-box": "awsui_styled-box_1fn7j_xquel_16",
+  "styled-box-checked": "awsui_styled-box-checked_1fn7j_xquel_32",
+  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_xquel_32",
+  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_xquel_36",
+  "styled-box-readonly": "awsui_styled-box-readonly_1fn7j_xquel_36",
+  "styled-line": "awsui_styled-line_1fn7j_xquel_40",
+  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_xquel_45",
+  "styled-line-readonly": "awsui_styled-line-readonly_1fn7j_xquel_48"
 };
   

package/lib/internal/template/internal/components/customizable-icon/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { IconProps } from '../../../icon/interfaces';
+export interface CustomizableIconProps extends IconProps {
+    /**
+     * A custom icon replacing the default one, for example, provided by the consumer via the host
+     * component's `icons` property. When set, it renders inside the same element as the default icon,
+     * so it inherits the same size/box. When empty (any falsy value, which would otherwise render an
+     * empty icon box), the default icon with fallback props is rendered.
+     */
+    customIcon?: React.ReactNode;
+    /**
+     * Properties applied to the default icon only (when `customIcon` is empty). Use it for
+     * default-icon presentation such as built-in rotation or motion attributes — a custom icon
+     * brings its own presentation.
+     */
+    fallback?: IconProps;
+}
+export declare function CustomizableIcon({ customIcon, fallback, ...shared }: CustomizableIconProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/components/customizable-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/customizable-icon/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAE,EAAE,qBAAqB,eAK1F"}

package/lib/internal/template/internal/components/customizable-icon/index.js

@@ -0,0 +1,12 @@
+// 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 InternalIcon from '../../../icon/internal';
+export function CustomizableIcon({ customIcon, fallback, ...shared }) {
+    if (customIcon) {
+        return React.createElement(InternalIcon, { ...shared, override: customIcon });
+    }
+    return React.createElement(InternalIcon, { ...shared, ...fallback, className: clsx(shared.className, fallback === null || fallback === void 0 ? void 0 : fallback.className) });
+}
+//# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/customizable-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/customizable-icon/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAkBlD,MAAM,UAAU,gBAAgB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAyB;IACzF,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,oBAAC,YAAY,OAAK,MAAM,EAAE,QAAQ,EAAE,UAAU,GAAI,CAAC;IAC5D,CAAC;IACD,OAAO,oBAAC,YAAY,OAAK,MAAM,KAAM,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,CAAC,GAAI,CAAC;AAC5G,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\n\nexport interface CustomizableIconProps extends IconProps {\n  /**\n   * A custom icon replacing the default one, for example, provided by the consumer via the host\n   * component's `icons` property. When set, it renders inside the same element as the default icon,\n   * so it inherits the same size/box. When empty (any falsy value, which would otherwise render an\n   * empty icon box), the default icon with fallback props is rendered.\n   */\n  customIcon?: React.ReactNode;\n  /**\n   * Properties applied to the default icon only (when `customIcon` is empty). Use it for\n   * default-icon presentation such as built-in rotation or motion attributes — a custom icon\n   * brings its own presentation.\n   */\n  fallback?: IconProps;\n}\n\nexport function CustomizableIcon({ customIcon, fallback, ...shared }: CustomizableIconProps) {\n  if (customIcon) {\n    return <InternalIcon {...shared} override={customIcon} />;\n  }\n  return <InternalIcon {...shared} {...fallback} className={clsx(shared.className, fallback?.className)} />;\n}\n"]}

package/lib/internal/template/internal/components/expand-toggle-button/index.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
-export declare function ExpandToggleButton({ isExpanded, onExpandableItemToggle, expandButtonLabel, collapseButtonLabel, customIcon, className, disableFocusHighlight, }: {
+export declare function ExpandToggleButton({ isExpanded, onExpandableItemToggle, expandButtonLabel, collapseButtonLabel, customIcon, expandToggleIcon, className, disableFocusHighlight, }: {
     isExpanded?: boolean;
     onExpandableItemToggle?: () => void;
     expandButtonLabel?: string;
     collapseButtonLabel?: string;
     customIcon?: React.ReactNode;
+    expandToggleIcon?: (state: {
+        expanded: boolean;
+    }) => React.ReactNode;
     className?: string;
     disableFocusHighlight?: boolean;
 }): JSX.Element;

package/lib/internal/template/internal/components/expand-toggle-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,SAAS,EACT,qBAAqB,GACtB,EAAE;IACD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,eAyBA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,qBAAqB,GACtB,EAAE;IACD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,eA4BA"}

package/lib/internal/template/internal/components/expand-toggle-button/index.js

@@ -3,11 +3,14 @@
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { isThemeActive, Theme, useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
-import InternalIcon from '../../../icon/internal';
+import { CustomizableIcon } from '../customizable-icon';
 import styles from './styles.css.js';
-export function ExpandToggleButton({ isExpanded, onExpandableItemToggle, expandButtonLabel, collapseButtonLabel, customIcon, className, disableFocusHighlight, }) {
+export function ExpandToggleButton({ isExpanded, onExpandableItemToggle, expandButtonLabel, collapseButtonLabel, customIcon, expandToggleIcon, className, disableFocusHighlight, }) {
     const buttonRef = useRef(null);
     const { tabIndex } = useSingleTabStopNavigation(buttonRef);
-    return (React.createElement("button", { type: "button", ref: buttonRef, tabIndex: tabIndex, "aria-label": isExpanded ? collapseButtonLabel : expandButtonLabel, "aria-expanded": isExpanded, className: clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className), onClick: onExpandableItemToggle, "data-awsui-motion-trigger": "hover", "data-awsui-motion-target": "" }, customIcon !== null && customIcon !== void 0 ? customIcon : (React.createElement(InternalIcon, { size: isThemeActive(Theme.OneTheme) ? 'x-small' : 'small', name: isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled', className: clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded']) }))));
+    return (React.createElement("button", { type: "button", ref: buttonRef, tabIndex: tabIndex, "aria-label": isExpanded ? collapseButtonLabel : expandButtonLabel, "aria-expanded": isExpanded, className: clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className), onClick: onExpandableItemToggle, "data-awsui-motion-trigger": "hover", "data-awsui-motion-target": "" }, customIcon !== null && customIcon !== void 0 ? customIcon : (React.createElement(CustomizableIcon, { customIcon: expandToggleIcon === null || expandToggleIcon === void 0 ? void 0 : expandToggleIcon({ expanded: !!isExpanded }), size: isThemeActive(Theme.OneTheme) ? 'x-small' : 'small', fallback: {
+            name: isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled',
+            className: clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded']),
+        } }))));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/expand-toggle-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAEjH,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,SAAS,EACT,qBAAqB,GAStB;IACC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,gBACN,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,mBACjD,UAAU,EACzB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,qBAAqB,IAAI,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAC/G,OAAO,EAAE,sBAAsB,+BACL,OAAO,8BACR,EAAE,IAE1B,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CACb,oBAAC,YAAY,IACX,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACzD,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,mBAAmB,EACxE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,UAAU,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAAC,GAClG,CACH,CACM,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme, useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../../../icon/internal';\n\nimport styles from './styles.css.js';\n\nexport function ExpandToggleButton({\n  isExpanded,\n  onExpandableItemToggle,\n  expandButtonLabel,\n  collapseButtonLabel,\n  customIcon,\n  className,\n  disableFocusHighlight,\n}: {\n  isExpanded?: boolean;\n  onExpandableItemToggle?: () => void;\n  expandButtonLabel?: string;\n  collapseButtonLabel?: string;\n  customIcon?: React.ReactNode;\n  className?: string;\n  disableFocusHighlight?: boolean;\n}) {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      tabIndex={tabIndex}\n      aria-label={isExpanded ? collapseButtonLabel : expandButtonLabel}\n      aria-expanded={isExpanded}\n      className={clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className)}\n      onClick={onExpandableItemToggle}\n      data-awsui-motion-trigger=\"hover\"\n      data-awsui-motion-target=\"\"\n    >\n      {customIcon ?? (\n        <InternalIcon\n          size={isThemeActive(Theme.OneTheme) ? 'x-small' : 'small'}\n          name={isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled'}\n          className={clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded'])}\n        />\n      )}\n    </button>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAEjH,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,qBAAqB,GAUtB;IACC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,gBACN,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,mBACjD,UAAU,EACzB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,qBAAqB,IAAI,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAC/G,OAAO,EAAE,sBAAsB,+BACL,OAAO,8BACR,EAAE,IAE1B,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CACb,oBAAC,gBAAgB,IACf,UAAU,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC,EAC1D,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACzD,QAAQ,EAAE;YACR,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,mBAAmB;YACxE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,UAAU,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAAC;SACnG,GACD,CACH,CACM,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme, useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport { CustomizableIcon } from '../customizable-icon';\n\nimport styles from './styles.css.js';\n\nexport function ExpandToggleButton({\n  isExpanded,\n  onExpandableItemToggle,\n  expandButtonLabel,\n  collapseButtonLabel,\n  customIcon,\n  expandToggleIcon,\n  className,\n  disableFocusHighlight,\n}: {\n  isExpanded?: boolean;\n  onExpandableItemToggle?: () => void;\n  expandButtonLabel?: string;\n  collapseButtonLabel?: string;\n  customIcon?: React.ReactNode;\n  expandToggleIcon?: (state: { expanded: boolean }) => React.ReactNode;\n  className?: string;\n  disableFocusHighlight?: boolean;\n}) {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      tabIndex={tabIndex}\n      aria-label={isExpanded ? collapseButtonLabel : expandButtonLabel}\n      aria-expanded={isExpanded}\n      className={clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className)}\n      onClick={onExpandableItemToggle}\n      data-awsui-motion-trigger=\"hover\"\n      data-awsui-motion-target=\"\"\n    >\n      {customIcon ?? (\n        <CustomizableIcon\n          customIcon={expandToggleIcon?.({ expanded: !!isExpanded })}\n          size={isThemeActive(Theme.OneTheme) ? 'x-small' : 'small'}\n          fallback={{\n            name: isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled',\n            className: clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded']),\n          }}\n        />\n      )}\n    </button>\n  );\n}\n"]}

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

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (9963282c)";
-export var GIT_SHA = "9963282c";
+export var PACKAGE_VERSION = "3.0.0 (543205d7)";
+export var GIT_SHA = "543205d7";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

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

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (9963282c)",
-  "GIT_SHA": "9963282c",
+  "PACKAGE_VERSION": "3.0.0 (543205d7)",
+  "GIT_SHA": "543205d7",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false,

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

@@ -498,6 +498,7 @@ export const colorBackgroundAlertInfo: string;
 export const colorBackgroundAlertSuccess: string;
 export const colorBackgroundAlertWarning: string;
 export const colorBackgroundDialog: string;
+export const colorBackgroundDialogDefault: string;
 export const colorBackgroundStatusSuccess: string;
 export const colorBackgroundStatusWarning: string;
 export const colorBackgroundTableHeader: string;
@@ -591,6 +592,7 @@ export const colorBorderStatusInfo: string;
 export const colorBorderStatusSuccess: string;
 export const colorBorderStatusWarning: string;
 export const colorBorderDialog: string;
+export const colorBorderDialogDefault: string;
 export const colorBorderDividerInteractiveDefault: string;
 export const colorBorderTabsDivider: string;
 export const colorBorderTabsShadow: string;
@@ -914,6 +916,7 @@ export const borderRadiusSideNavigationItem: string;
 export const borderRadiusSideNavigationItemCollapsed: string;
 export const borderRadiusItemCardDefault: string;
 export const borderRadiusItemCardEmbedded: string;
+export const borderRadiusDialog: string;
 export const borderRadiusPopover: string;
 export const borderRadiusSkeleton: string;
 export const borderRadiusStatusIndicator: string;
@@ -946,6 +949,7 @@ export const borderWidthIconSmall: string;
 export const borderWidthIconXSmall: string;
 export const borderWidthItemCard: string;
 export const borderWidthItemCardHighlighted: string;
+export const borderWidthDialog: string;
 export const borderWidthItemSelected: string;
 export const borderWidthLayoutSideNavigation: string;
 export const borderWidthBadge: string;
@@ -1036,6 +1040,12 @@ export const spaceItemCardHorizontalDefault: string;
 export const spaceItemCardHorizontalEmbedded: string;
 export const spaceItemCardVerticalDefault: string;
 export const spaceItemCardVerticalEmbedded: string;
+export const spaceDialogHorizontal: string;
+export const spaceDialogVertical: string;
+export const spaceDialogActionBlock: string;
+export const spaceDialogActionInline: string;
+export const spaceDialogHeaderGap: string;
+export const spaceDialogSectionGap: string;
 export const spaceCodeEditorStatusFocusOutlineGutter: string;
 export const spaceContainerContentTop: string;
 export const spaceContainerHeaderTop: string;
@@ -1135,6 +1145,7 @@ export const spaceXxl: string;
 export const spaceXxxl: string;
 export const shadowCard: string;
 export const shadowItemCard: string;
+export const shadowDialog: string;
 export const shadowContainer: string;
 export const shadowContainerActive: string;
 export const shadowDropdown: string;

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

@@ -498,6 +498,7 @@ export var colorBackgroundAlertInfo = "var(--color-background-alert-info-lqhdg0,
 export var colorBackgroundAlertSuccess = "var(--color-background-alert-success-9dyn87, #effff1)";
 export var colorBackgroundAlertWarning = "var(--color-background-alert-warning-021z3n, #fffef0)";
 export var colorBackgroundDialog = "var(--color-background-dialog-l7uuft, #f0fbff)";
+export var colorBackgroundDialogDefault = "var(--color-background-dialog-default-xpvorm, #ffffff)";
 export var colorBackgroundStatusSuccess = "var(--color-background-status-success-1woffs, #effff1)";
 export var colorBackgroundStatusWarning = "var(--color-background-status-warning-52cylj, #fffef0)";
 export var colorBackgroundTableHeader = "var(--color-background-table-header-pgyagt, #ffffff)";
@@ -591,6 +592,7 @@ export var colorBorderStatusInfo = "var(--color-border-status-info-e5c14y, #006c
 export var colorBorderStatusSuccess = "var(--color-border-status-success-zsy8d6, #00802f)";
 export var colorBorderStatusWarning = "var(--color-border-status-warning-zj1tu9, #855900)";
 export var colorBorderDialog = "var(--color-border-dialog-c9wxm6, #006ce0)";
+export var colorBorderDialogDefault = "var(--color-border-dialog-default-8c0afg, #c6c6cd)";
 export var colorBorderDividerInteractiveDefault = "var(--color-border-divider-interactive-default-cs7tmi, #8c8c94)";
 export var colorBorderTabsDivider = "var(--color-border-tabs-divider-sog0al, #c6c6cd)";
 export var colorBorderTabsShadow = "var(--color-border-tabs-shadow-egq8wq, rgba(15, 20, 26, 0.12))";
@@ -914,6 +916,7 @@ export var borderRadiusSideNavigationItem = "var(--border-radius-side-navigation
 export var borderRadiusSideNavigationItemCollapsed = "var(--border-radius-side-navigation-item-collapsed-mi3uty, 50%)";
 export var borderRadiusItemCardDefault = "var(--border-radius-item-card-default-nurfq3, 16px)";
 export var borderRadiusItemCardEmbedded = "var(--border-radius-item-card-embedded-patnwm, 8px)";
+export var borderRadiusDialog = "var(--border-radius-dialog-adcisc, 8px)";
 export var borderRadiusPopover = "var(--border-radius-popover-pmwd0c, 8px)";
 export var borderRadiusSkeleton = "var(--border-radius-skeleton-0r7m8y, 8px)";
 export var borderRadiusStatusIndicator = "var(--border-radius-status-indicator-1d9bsf, 4px)";
@@ -946,6 +949,7 @@ export var borderWidthIconSmall = "var(--border-width-icon-small-m3z2f5, 2px)";
 export var borderWidthIconXSmall = "var(--border-width-icon-x-small-3m5wt5, 1.5px)";
 export var borderWidthItemCard = "var(--border-width-item-card-6sthd9, 1px)";
 export var borderWidthItemCardHighlighted = "var(--border-width-item-card-highlighted-1jvaro, 2px)";
+export var borderWidthDialog = "var(--border-width-dialog-6bh1ii, 1px)";
 export var borderWidthItemSelected = "var(--border-width-item-selected-l41fek, 2px)";
 export var borderWidthLayoutSideNavigation = "var(--border-width-layout-side-navigation-q0k26x, 1px)";
 export var borderWidthBadge = "var(--border-width-badge-p88itr, 0px)";
@@ -1036,6 +1040,12 @@ export var spaceItemCardHorizontalDefault = "var(--space-item-card-horizontal-de
 export var spaceItemCardHorizontalEmbedded = "var(--space-item-card-horizontal-embedded-0dtpkm, 12px)";
 export var spaceItemCardVerticalDefault = "var(--space-item-card-vertical-default-vibtiz, 16px)";
 export var spaceItemCardVerticalEmbedded = "var(--space-item-card-vertical-embedded-i4sbwc, 10px)";
+export var spaceDialogHorizontal = "var(--space-dialog-horizontal-f19fik, 12px)";
+export var spaceDialogVertical = "var(--space-dialog-vertical-24ji2g, 10px)";
+export var spaceDialogActionBlock = "var(--space-dialog-action-block-jznvno, 4px)";
+export var spaceDialogActionInline = "var(--space-dialog-action-inline-tb23m8, 4px)";
+export var spaceDialogHeaderGap = "var(--space-dialog-header-gap-h3tlnk, 8px)";
+export var spaceDialogSectionGap = "var(--space-dialog-section-gap-xh4b86, 4px)";
 export var spaceCodeEditorStatusFocusOutlineGutter = "var(--space-code-editor-status-focus-outline-gutter-udne29, -7px)";
 export var spaceContainerContentTop = "var(--space-container-content-top-ryubqz, 4px)";
 export var spaceContainerHeaderTop = "var(--space-container-header-top-3txhx4, 12px)";
@@ -1135,6 +1145,7 @@ export var spaceXxl = "var(--space-xxl-xj5vu7, 32px)";
 export var spaceXxxl = "var(--space-xxxl-pjngik, 40px)";
 export var shadowCard = "var(--shadow-card-9fwoie, none)";
 export var shadowItemCard = "var(--shadow-item-card-ltzk0y, none)";
+export var shadowDialog = "var(--shadow-dialog-q0m0rn, none)";
 export var shadowContainer = "var(--shadow-container-quglkl, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12))";
 export var shadowContainerActive = "var(--shadow-container-active-iomjxu, 0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a)";
 export var shadowDropdown = "var(--shadow-dropdown-ogwesf, 0px 4px 20px 1px rgba(0, 7, 22, 0.10))";