@cloudscape-design/components-themeable 3.0.1333 → 3.0.1334

package/lib/internal/template/steps/internal.js

@@ -17,46 +17,69 @@ const statusToColor = {
     'not-started': 'text-status-inactive',
     log: 'text-status-inactive',
 };
+const StepAnnotation = ({ children }) => {
+    if (children === undefined || children === null) {
+        return null;
+    }
+    return React.createElement("div", { className: styles.annotation }, children);
+};
+const StepDetails = ({ children }) => {
+    if (children === undefined || children === null) {
+        return null;
+    }
+    return React.createElement("div", { className: styles.details }, children);
+};
 const CustomStep = ({ step, orientation, renderStep, hideConnectors, }) => {
-    const { status, statusIconAriaLabel } = step;
+    const { status, statusIconAriaLabel, annotation } = step;
     const { header, details, icon } = renderStep(step);
     const iconNode = icon ? icon : React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel });
     const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);
     if (orientation === 'horizontal') {
         return (React.createElement("li", { className: styles.container },
-            React.createElement("div", { className: styles.header },
+            React.createElement(StepAnnotation, null, annotation),
+            React.createElement("div", { className: styles['step-layout'] },
                 iconNode,
                 React.createElement("hr", { className: connectorClassName, role: "none" })),
-            React.createElement("div", { className: styles['horizontal-header'] }, header),
-            details && React.createElement("div", { className: styles.details }, details)));
+            React.createElement("div", { className: styles.content },
+                React.createElement("div", { className: styles.header }, header),
+                React.createElement(StepDetails, null, details))));
     }
     // Vertical orientation: render the icon and the connector together in a column-1 "rail" so the
     // connector starts directly beneath the icon and stretches the full height of the step. Unlike
     // placing the header in the same row as the icon, this keeps the vertical line continuous even
-    // when the custom header wraps onto multiple lines.
+    // when the custom header wraps onto multiple lines. `annotation` (for example, a timeline timestamp)
+    // is rendered before the rail.
     return (React.createElement("li", { className: clsx(styles.container, styles['custom-vertical']) },
+        React.createElement(StepAnnotation, null, annotation),
         React.createElement("div", { className: styles.rail },
             iconNode,
             React.createElement("hr", { className: connectorClassName, role: "none" })),
         React.createElement("div", { className: styles.content },
             React.createElement("div", { className: styles.header }, header),
-            details && React.createElement("div", { className: styles.details }, details))));
+            React.createElement(StepDetails, null, details))));
 };
-const InternalStep = ({ status, statusIconAriaLabel, header, details, orientation, hideConnectors, }) => {
+const InternalStep = ({ status, statusIconAriaLabel, header, details, annotation, orientation, hideConnectors, }) => {
     const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);
     return (React.createElement("li", { className: styles.container },
-        React.createElement("div", { className: styles.header }, orientation === 'vertical' ? (React.createElement(InternalStatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header)) : (React.createElement(React.Fragment, null,
+        React.createElement(StepAnnotation, null, annotation),
+        React.createElement("div", { className: styles['step-layout'] }, orientation === 'vertical' ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: styles.header },
+                React.createElement(InternalStatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header)),
+            React.createElement(StepDetails, null, details),
+            React.createElement("hr", { className: clsx(connectorClassName, styles['connector-continuation']), role: "none" }))) : (React.createElement(React.Fragment, null,
             React.createElement(InternalBox, { color: statusToColor[status] },
                 React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel })),
             React.createElement("hr", { className: connectorClassName, role: "none" })))),
-        orientation === 'vertical' ? (React.createElement("hr", { className: connectorClassName, role: "none" })) : (React.createElement("div", { className: styles['horizontal-header'] },
-            React.createElement(InternalBox, { color: statusToColor[status] }, header))),
-        details && React.createElement("div", { className: styles.details }, details)));
+        orientation === 'horizontal' && (React.createElement("div", { className: styles.content },
+            React.createElement("div", { className: styles.header },
+                React.createElement(InternalBox, { color: statusToColor[status] }, header)),
+            React.createElement(StepDetails, null, details)))));
 };
 const InternalSteps = ({ steps, orientation, connectorLines, renderStep, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef, ...props }) => {
     const hideConnectors = connectorLines === 'none';
+    const hasAnnotations = steps.some(step => step.annotation !== undefined && step.annotation !== null);
     return (React.createElement("div", { ...props, className: clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical), ref: __internalRootRef },
-        React.createElement("ol", { className: styles.list, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => renderStep ? (React.createElement(CustomStep, { key: index, orientation: orientation, step: step, renderStep: renderStep, hideConnectors: hideConnectors })) : (React.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details, orientation: orientation, hideConnectors: hideConnectors }))))));
+        React.createElement("ol", { className: clsx(styles.list, orientation === 'vertical' && hasAnnotations && styles['with-annotation']), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => renderStep ? (React.createElement(CustomStep, { key: index, orientation: orientation, step: step, renderStep: renderStep, hideConnectors: hideConnectors })) : (React.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details, annotation: step.annotation, orientation: orientation, hideConnectors: hideConnectors }))))));
 };
 export default InternalSteps;
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/steps/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport InternalStatusIndicator, { InternalStatusIcon } from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps' | 'orientation' | 'connectorLines'> &\n  InternalBaseComponentProps;\n\nconst statusToColor: Record<StepsProps.Status, BoxProps.Color> = {\n  error: 'text-status-error',\n  warning: 'text-status-warning',\n  success: 'text-status-success',\n  info: 'text-status-info',\n  stopped: 'text-status-inactive',\n  pending: 'text-status-inactive',\n  'in-progress': 'text-status-inactive',\n  loading: 'text-status-inactive',\n  'not-started': 'text-status-inactive',\n  log: 'text-status-inactive',\n};\n\nconst CustomStep = ({\n  step,\n  orientation,\n  renderStep,\n  hideConnectors,\n}: {\n  step: StepsProps.Step;\n  orientation: StepsProps.Orientation;\n  renderStep: Required<StepsProps>['renderStep'];\n  hideConnectors: boolean;\n}) => {\n  const { status, statusIconAriaLabel } = step;\n  const { header, details, icon } = renderStep(step);\n  const iconNode = icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />;\n  const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\n\n  if (orientation === 'horizontal') {\n    return (\n      <li className={styles.container}>\n        <div className={styles.header}>\n          {iconNode}\n          <hr className={connectorClassName} role=\"none\" />\n        </div>\n        <div className={styles['horizontal-header']}>{header}</div>\n        {details && <div className={styles.details}>{details}</div>}\n      </li>\n    );\n  }\n\n  // Vertical orientation: render the icon and the connector together in a column-1 \"rail\" so the\n  // connector starts directly beneath the icon and stretches the full height of the step. Unlike\n  // placing the header in the same row as the icon, this keeps the vertical line continuous even\n  // when the custom header wraps onto multiple lines.\n  return (\n    <li className={clsx(styles.container, styles['custom-vertical'])}>\n      <div className={styles.rail}>\n        {iconNode}\n        <hr className={connectorClassName} role=\"none\" />\n      </div>\n      <div className={styles.content}>\n        <div className={styles.header}>{header}</div>\n        {details && <div className={styles.details}>{details}</div>}\n      </div>\n    </li>\n  );\n};\n\nconst InternalStep = ({\n  status,\n  statusIconAriaLabel,\n  header,\n  details,\n  orientation,\n  hideConnectors,\n}: StepsProps.Step & { orientation: StepsProps.Orientation; hideConnectors: boolean }) => {\n  const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\n  return (\n    <li className={styles.container}>\n      <div className={styles.header}>\n        {orientation === 'vertical' ? (\n          <InternalStatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n            {header}\n          </InternalStatusIndicator>\n        ) : (\n          <>\n            <InternalBox color={statusToColor[status]}>\n              <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />\n            </InternalBox>\n            <hr className={connectorClassName} role=\"none\" />\n          </>\n        )}\n      </div>\n      {orientation === 'vertical' ? (\n        <hr className={connectorClassName} role=\"none\" />\n      ) : (\n        <div className={styles['horizontal-header']}>\n          <InternalBox color={statusToColor[status]}>{header}</InternalBox>\n        </div>\n      )}\n      {details && <div className={styles.details}>{details}</div>}\n    </li>\n  );\n};\n\nconst InternalSteps = ({\n  steps,\n  orientation,\n  connectorLines,\n  renderStep,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  __internalRootRef,\n  ...props\n}: InternalStepsProps) => {\n  const hideConnectors = connectorLines === 'none';\n  return (\n    <div\n      {...props}\n      className={clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical)}\n      ref={__internalRootRef}\n    >\n      <ol\n        className={styles.list}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n      >\n        {steps.map((step, index) =>\n          renderStep ? (\n            <CustomStep\n              key={index}\n              orientation={orientation}\n              step={step}\n              renderStep={renderStep}\n              hideConnectors={hideConnectors}\n            />\n          ) : (\n            <InternalStep\n              key={index}\n              status={step.status}\n              statusIconAriaLabel={step.statusIconAriaLabel}\n              header={step.header}\n              details={step.details}\n              orientation={orientation}\n              hideConnectors={hideConnectors}\n            />\n          )\n        )}\n      </ol>\n    </div>\n  );\n};\n\nexport default InternalSteps;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport InternalStatusIndicator, { InternalStatusIcon } from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps' | 'orientation' | 'connectorLines'> &\n  InternalBaseComponentProps;\n\nconst statusToColor: Record<StepsProps.Status, BoxProps.Color> = {\n  error: 'text-status-error',\n  warning: 'text-status-warning',\n  success: 'text-status-success',\n  info: 'text-status-info',\n  stopped: 'text-status-inactive',\n  pending: 'text-status-inactive',\n  'in-progress': 'text-status-inactive',\n  loading: 'text-status-inactive',\n  'not-started': 'text-status-inactive',\n  log: 'text-status-inactive',\n};\n\nconst StepAnnotation = ({ children }: { children: StepsProps.Step['annotation'] }) => {\n  if (children === undefined || children === null) {\n    return null;\n  }\n  return <div className={styles.annotation}>{children}</div>;\n};\n\nconst StepDetails = ({ children }: { children: StepsProps.Step['details'] }) => {\n  if (children === undefined || children === null) {\n    return null;\n  }\n  return <div className={styles.details}>{children}</div>;\n};\n\nconst CustomStep = ({\n  step,\n  orientation,\n  renderStep,\n  hideConnectors,\n}: {\n  step: StepsProps.Step;\n  orientation: StepsProps.Orientation;\n  renderStep: Required<StepsProps>['renderStep'];\n  hideConnectors: boolean;\n}) => {\n  const { status, statusIconAriaLabel, annotation } = step;\n  const { header, details, icon } = renderStep(step);\n  const iconNode = icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />;\n  const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\n\n  if (orientation === 'horizontal') {\n    return (\n      <li className={styles.container}>\n        <StepAnnotation>{annotation}</StepAnnotation>\n        <div className={styles['step-layout']}>\n          {iconNode}\n          <hr className={connectorClassName} role=\"none\" />\n        </div>\n        <div className={styles.content}>\n          <div className={styles.header}>{header}</div>\n          <StepDetails>{details}</StepDetails>\n        </div>\n      </li>\n    );\n  }\n\n  // Vertical orientation: render the icon and the connector together in a column-1 \"rail\" so the\n  // connector starts directly beneath the icon and stretches the full height of the step. Unlike\n  // placing the header in the same row as the icon, this keeps the vertical line continuous even\n  // when the custom header wraps onto multiple lines. `annotation` (for example, a timeline timestamp)\n  // is rendered before the rail.\n  return (\n    <li className={clsx(styles.container, styles['custom-vertical'])}>\n      <StepAnnotation>{annotation}</StepAnnotation>\n      <div className={styles.rail}>\n        {iconNode}\n        <hr className={connectorClassName} role=\"none\" />\n      </div>\n      <div className={styles.content}>\n        <div className={styles.header}>{header}</div>\n        <StepDetails>{details}</StepDetails>\n      </div>\n    </li>\n  );\n};\n\nconst InternalStep = ({\n  status,\n  statusIconAriaLabel,\n  header,\n  details,\n  annotation,\n  orientation,\n  hideConnectors,\n}: StepsProps.Step & { orientation: StepsProps.Orientation; hideConnectors: boolean }) => {\n  const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\n  return (\n    <li className={styles.container}>\n      <StepAnnotation>{annotation}</StepAnnotation>\n      <div className={styles['step-layout']}>\n        {orientation === 'vertical' ? (\n          <>\n            <div className={styles.header}>\n              <InternalStatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n                {header}\n              </InternalStatusIndicator>\n            </div>\n            <StepDetails>{details}</StepDetails>\n            <hr className={clsx(connectorClassName, styles['connector-continuation'])} role=\"none\" />\n          </>\n        ) : (\n          <>\n            <InternalBox color={statusToColor[status]}>\n              <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />\n            </InternalBox>\n            <hr className={connectorClassName} role=\"none\" />\n          </>\n        )}\n      </div>\n      {orientation === 'horizontal' && (\n        <div className={styles.content}>\n          <div className={styles.header}>\n            <InternalBox color={statusToColor[status]}>{header}</InternalBox>\n          </div>\n          <StepDetails>{details}</StepDetails>\n        </div>\n      )}\n    </li>\n  );\n};\n\nconst InternalSteps = ({\n  steps,\n  orientation,\n  connectorLines,\n  renderStep,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  __internalRootRef,\n  ...props\n}: InternalStepsProps) => {\n  const hideConnectors = connectorLines === 'none';\n  const hasAnnotations = steps.some(step => step.annotation !== undefined && step.annotation !== null);\n  return (\n    <div\n      {...props}\n      className={clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical)}\n      ref={__internalRootRef}\n    >\n      <ol\n        className={clsx(styles.list, orientation === 'vertical' && hasAnnotations && styles['with-annotation'])}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n      >\n        {steps.map((step, index) =>\n          renderStep ? (\n            <CustomStep\n              key={index}\n              orientation={orientation}\n              step={step}\n              renderStep={renderStep}\n              hideConnectors={hideConnectors}\n            />\n          ) : (\n            <InternalStep\n              key={index}\n              status={step.status}\n              statusIconAriaLabel={step.statusIconAriaLabel}\n              header={step.header}\n              details={step.details}\n              annotation={step.annotation}\n              orientation={orientation}\n              hideConnectors={hideConnectors}\n            />\n          )\n        )}\n      </ol>\n    </div>\n  );\n};\n\nexport default InternalSteps;\n"]}

package/lib/internal/template/steps/styles.css.js

@@ -1,18 +1,22 @@
 
     import './styles.scoped.css';
     export default {
-  "connector": "awsui_connector_gxp9y_m67w6_181",
-  "connector-hidden": "awsui_connector-hidden_gxp9y_m67w6_185",
-  "root": "awsui_root_gxp9y_m67w6_189",
-  "list": "awsui_list_gxp9y_m67w6_222",
-  "container": "awsui_container_gxp9y_m67w6_227",
-  "header": "awsui_header_gxp9y_m67w6_232",
-  "details": "awsui_details_gxp9y_m67w6_238",
-  "custom": "awsui_custom_gxp9y_m67w6_259",
-  "horizontal": "awsui_horizontal_gxp9y_m67w6_263",
-  "horizontal-header": "awsui_horizontal-header_gxp9y_m67w6_294",
-  "custom-vertical": "awsui_custom-vertical_gxp9y_m67w6_308",
-  "rail": "awsui_rail_gxp9y_m67w6_308",
-  "content": "awsui_content_gxp9y_m67w6_326"
+  "connector": "awsui_connector_gxp9y_166tz_181",
+  "connector-hidden": "awsui_connector-hidden_gxp9y_166tz_185",
+  "header": "awsui_header_gxp9y_166tz_189",
+  "root": "awsui_root_gxp9y_166tz_193",
+  "list": "awsui_list_gxp9y_166tz_226",
+  "container": "awsui_container_gxp9y_166tz_231",
+  "annotation": "awsui_annotation_gxp9y_166tz_236",
+  "step-layout": "awsui_step-layout_gxp9y_166tz_241",
+  "details": "awsui_details_gxp9y_166tz_247",
+  "custom": "awsui_custom_gxp9y_166tz_253",
+  "horizontal": "awsui_horizontal_gxp9y_166tz_257",
+  "content": "awsui_content_gxp9y_166tz_293",
+  "vertical": "awsui_vertical_gxp9y_166tz_307",
+  "connector-continuation": "awsui_connector-continuation_gxp9y_166tz_321",
+  "custom-vertical": "awsui_custom-vertical_gxp9y_166tz_339",
+  "rail": "awsui_rail_gxp9y_166tz_339",
+  "with-annotation": "awsui_with-annotation_gxp9y_166tz_362"
 };
   

package/lib/internal/template/steps/styles.scoped.css

@@ -178,15 +178,19 @@
 */
 /* 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_connector_gxp9y_m67w6_181:not(#\9) {
+.awsui_connector_gxp9y_166tz_181:not(#\9) {
   background-color: var(--color-border-divider-default-ipvpev, #eaeded);
 }
 
-.awsui_connector_gxp9y_m67w6_181.awsui_connector-hidden_gxp9y_m67w6_185:not(#\9) {
+.awsui_connector_gxp9y_166tz_181.awsui_connector-hidden_gxp9y_166tz_185:not(#\9) {
   background-color: transparent;
 }
 
-.awsui_root_gxp9y_m67w6_189:not(#\9) {
+.awsui_header_gxp9y_166tz_189:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_root_gxp9y_166tz_193:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -219,66 +223,61 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   min-inline-size: 0;
   word-break: break-word;
 }
-.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222:not(#\9) {
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226:not(#\9) {
   list-style: none;
   padding-inline-start: 0;
   margin-block: 0;
 }
-.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227:not(#\9) {
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231:not(#\9) {
   display: grid;
   grid-template-columns: var(--space-static-l-ig026c, 20px) 1fr;
   grid-template-rows: minmax(var(--space-static-l-ig026c, 20px), auto);
 }
-.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_header_gxp9y_m67w6_232:not(#\9) {
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231 > .awsui_annotation_gxp9y_166tz_236:not(#\9) {
+  justify-self: flex-end;
+  min-inline-size: 0;
+  color: var(--color-text-status-inactive-n7p1uq, #687078);
+}
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231 > .awsui_step-layout_gxp9y_166tz_241:not(#\9) {
   display: flex;
   gap: var(--space-xxs-jnczic, 4px);
   grid-row: 1;
   grid-column: 1/span 2;
 }
-.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_details_gxp9y_m67w6_238:not(#\9) {
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231 > .awsui_details_gxp9y_166tz_247:not(#\9) {
   align-items: center;
   grid-row: 2;
   grid-column: 2;
   margin-block-end: var(--space-static-xs-4gq40t, 8px);
 }
-.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_connector_gxp9y_m67w6_181:not(#\9) {
-  grid-row: 2;
-  grid-column: 1;
-  margin-block: 0;
-  border-block: 0;
-  border-inline: 0;
-  inline-size: var(--border-divider-list-width-2qbfmz, 1px);
-  block-size: auto;
-  min-block-size: var(--space-static-xs-4gq40t, 8px);
-  position: relative;
-  inset-inline-end: var(--space-static-xxxs-zckw10, 2px);
-}
-.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > :not(#\9):last-of-type > .awsui_connector_gxp9y_m67w6_181 {
-  display: none;
-}
-.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222.awsui_custom_gxp9y_m67w6_259 > .awsui_details_gxp9y_m67w6_238:not(#\9) {
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226.awsui_custom_gxp9y_166tz_253 > .awsui_details_gxp9y_166tz_247:not(#\9) {
   margin-block-end: 0;
 }
 
-.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222:not(#\9) {
+.awsui_horizontal_gxp9y_166tz_257 > .awsui_list_gxp9y_166tz_226:not(#\9) {
   display: grid;
   align-items: flex-start;
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  grid-template-rows: auto minmax(var(--space-static-l-ig026c, 20px), auto) auto;
   grid-auto-flow: column;
 }
-.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227:not(#\9) {
-  display: grid;
-  grid-template-columns: var(--space-static-l-ig026c, 20px) 1fr;
-  grid-template-rows: minmax(var(--space-static-l-ig026c, 20px), auto);
+.awsui_horizontal_gxp9y_166tz_257 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231:not(#\9) {
+  grid-row: 1/-1;
+  grid-template-rows: subgrid;
   align-items: center;
 }
-.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_header_gxp9y_m67w6_232:not(#\9) {
-  display: flex;
+.awsui_horizontal_gxp9y_166tz_257 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231 > .awsui_annotation_gxp9y_166tz_236:not(#\9) {
+  justify-self: flex-start;
+  align-self: flex-end;
   grid-row: 1;
   grid-column: 1/span 2;
+  padding-inline-end: var(--space-xs-kw7k3v, 8px);
+}
+.awsui_horizontal_gxp9y_166tz_257 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231 > .awsui_step-layout_gxp9y_166tz_241:not(#\9) {
+  grid-row: 2;
   align-items: center;
 }
-.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_header_gxp9y_m67w6_232 > .awsui_connector_gxp9y_m67w6_181:not(#\9) {
+.awsui_horizontal_gxp9y_166tz_257 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231 > .awsui_step-layout_gxp9y_166tz_241 > .awsui_connector_gxp9y_166tz_181:not(#\9) {
   display: block;
   flex: 1;
   margin-block: 0;
@@ -291,27 +290,59 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   min-inline-size: var(--space-static-xs-4gq40t, 8px);
   margin-inline-end: var(--space-static-xxs-0cgyf1, 4px);
 }
-.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_horizontal-header_gxp9y_m67w6_294:not(#\9) {
-  grid-row: 2;
-  grid-column: 1/span 3;
-  padding-inline-end: var(--space-xs-kw7k3v, 8px);
-}
-.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_details_gxp9y_m67w6_238:not(#\9) {
+.awsui_horizontal_gxp9y_166tz_257 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231 > .awsui_content_gxp9y_166tz_293:not(#\9) {
+  align-self: flex-start;
   grid-row: 3;
   grid-column: 1/span 3;
+  min-inline-size: 0;
   padding-inline-end: var(--space-xs-kw7k3v, 8px);
 }
-.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227:not(#\9):last-child > .awsui_header_gxp9y_m67w6_232 > .awsui_connector_gxp9y_m67w6_181 {
+.awsui_horizontal_gxp9y_166tz_257 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231 > .awsui_content_gxp9y_166tz_293 > .awsui_details_gxp9y_166tz_247:not(#\9) {
+  margin-block-end: var(--space-static-xs-4gq40t, 8px);
+}
+.awsui_horizontal_gxp9y_166tz_257 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231:not(#\9):last-child > .awsui_step-layout_gxp9y_166tz_241 > .awsui_connector_gxp9y_166tz_181 {
+  display: none;
+}
+
+.awsui_vertical_gxp9y_166tz_307 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231 > .awsui_step-layout_gxp9y_166tz_241:not(#\9) {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: auto 1fr;
+  gap: 0;
+}
+.awsui_vertical_gxp9y_166tz_307 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231 > .awsui_step-layout_gxp9y_166tz_241 > :not(#\9):first-child {
+  grid-column: 1/-1;
+}
+.awsui_vertical_gxp9y_166tz_307 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231 > .awsui_step-layout_gxp9y_166tz_241 > .awsui_details_gxp9y_166tz_247:not(#\9) {
+  grid-row: 2;
+  grid-column: 2;
+  margin-block-end: var(--space-static-xs-4gq40t, 8px);
+}
+.awsui_vertical_gxp9y_166tz_307 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231 > .awsui_step-layout_gxp9y_166tz_241 > .awsui_connector-continuation_gxp9y_166tz_321:not(#\9) {
+  grid-row: 2;
+  grid-column: 1;
+  justify-self: center;
+  margin-block: 0;
+  margin-inline: 0;
+  border-block: 0;
+  border-inline: 0;
+  inline-size: var(--border-divider-list-width-2qbfmz, 1px);
+  block-size: auto;
+  min-block-size: var(--space-static-xs-4gq40t, 8px);
+  position: relative;
+  inset-inline-end: var(--space-static-xxxs-zckw10, 2px);
+}
+.awsui_vertical_gxp9y_166tz_307 > .awsui_list_gxp9y_166tz_226 > :not(#\9):last-of-type > .awsui_step-layout_gxp9y_166tz_241 > .awsui_connector-continuation_gxp9y_166tz_321 {
   display: none;
 }
 
-.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227.awsui_custom-vertical_gxp9y_m67w6_308 > .awsui_rail_gxp9y_m67w6_308:not(#\9) {
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231.awsui_custom-vertical_gxp9y_166tz_339 > .awsui_rail_gxp9y_166tz_339:not(#\9) {
   grid-column: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227.awsui_custom-vertical_gxp9y_m67w6_308 > .awsui_rail_gxp9y_m67w6_308 > .awsui_connector_gxp9y_m67w6_181:not(#\9) {
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231.awsui_custom-vertical_gxp9y_166tz_339 > .awsui_rail_gxp9y_166tz_339 > .awsui_connector_gxp9y_166tz_181:not(#\9) {
   grid-row: auto;
   grid-column: auto;
   flex: 1 1 auto;
@@ -323,11 +354,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline-end: 0;
   margin-block: var(--space-static-xxs-0cgyf1, 4px) 0;
 }
-.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227.awsui_custom-vertical_gxp9y_m67w6_308 > .awsui_content_gxp9y_m67w6_326:not(#\9) {
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231.awsui_custom-vertical_gxp9y_166tz_339 > .awsui_content_gxp9y_166tz_293:not(#\9) {
   grid-column: 2;
   min-inline-size: 0;
 }
 
-.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227.awsui_custom-vertical_gxp9y_m67w6_308:not(#\9):last-of-type > .awsui_rail_gxp9y_m67w6_308 > .awsui_connector_gxp9y_m67w6_181 {
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226.awsui_with-annotation_gxp9y_166tz_362:not(#\9) {
+  display: grid;
+  grid-template-columns: fit-content(50%) var(--space-static-l-ig026c, 20px) 1fr;
+}
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226.awsui_with-annotation_gxp9y_166tz_362 > .awsui_container_gxp9y_166tz_231:not(#\9) {
+  grid-column: 1/-1;
+  grid-template-columns: subgrid;
+}
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226.awsui_with-annotation_gxp9y_166tz_362 > .awsui_container_gxp9y_166tz_231 > .awsui_annotation_gxp9y_166tz_236:not(#\9) {
+  grid-row: 1;
+  grid-column: 1;
+  padding-inline-end: var(--space-xxs-jnczic, 4px);
+}
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226.awsui_with-annotation_gxp9y_166tz_362 > .awsui_container_gxp9y_166tz_231:not(#\9):not(.awsui_custom-vertical_gxp9y_166tz_339) > .awsui_step-layout_gxp9y_166tz_241 {
+  grid-column: 2/span 2;
+}
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226.awsui_with-annotation_gxp9y_166tz_362 > .awsui_container_gxp9y_166tz_231:not(#\9):not(.awsui_custom-vertical_gxp9y_166tz_339) > .awsui_details_gxp9y_166tz_247 {
+  grid-column: 3;
+}
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226.awsui_with-annotation_gxp9y_166tz_362 > .awsui_container_gxp9y_166tz_231.awsui_custom-vertical_gxp9y_166tz_339 > .awsui_rail_gxp9y_166tz_339:not(#\9) {
+  grid-column: 2;
+}
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226.awsui_with-annotation_gxp9y_166tz_362 > .awsui_container_gxp9y_166tz_231.awsui_custom-vertical_gxp9y_166tz_339 > .awsui_content_gxp9y_166tz_293:not(#\9) {
+  grid-column: 3;
+}
+
+.awsui_root_gxp9y_166tz_193 > .awsui_list_gxp9y_166tz_226 > .awsui_container_gxp9y_166tz_231.awsui_custom-vertical_gxp9y_166tz_339:not(#\9):last-of-type > .awsui_rail_gxp9y_166tz_339 > .awsui_connector_gxp9y_166tz_181 {
   display: none;
 }

package/lib/internal/template/steps/styles.selectors.js

@@ -2,18 +2,22 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "connector": "awsui_connector_gxp9y_m67w6_181",
-  "connector-hidden": "awsui_connector-hidden_gxp9y_m67w6_185",
-  "root": "awsui_root_gxp9y_m67w6_189",
-  "list": "awsui_list_gxp9y_m67w6_222",
-  "container": "awsui_container_gxp9y_m67w6_227",
-  "header": "awsui_header_gxp9y_m67w6_232",
-  "details": "awsui_details_gxp9y_m67w6_238",
-  "custom": "awsui_custom_gxp9y_m67w6_259",
-  "horizontal": "awsui_horizontal_gxp9y_m67w6_263",
-  "horizontal-header": "awsui_horizontal-header_gxp9y_m67w6_294",
-  "custom-vertical": "awsui_custom-vertical_gxp9y_m67w6_308",
-  "rail": "awsui_rail_gxp9y_m67w6_308",
-  "content": "awsui_content_gxp9y_m67w6_326"
+  "connector": "awsui_connector_gxp9y_166tz_181",
+  "connector-hidden": "awsui_connector-hidden_gxp9y_166tz_185",
+  "header": "awsui_header_gxp9y_166tz_189",
+  "root": "awsui_root_gxp9y_166tz_193",
+  "list": "awsui_list_gxp9y_166tz_226",
+  "container": "awsui_container_gxp9y_166tz_231",
+  "annotation": "awsui_annotation_gxp9y_166tz_236",
+  "step-layout": "awsui_step-layout_gxp9y_166tz_241",
+  "details": "awsui_details_gxp9y_166tz_247",
+  "custom": "awsui_custom_gxp9y_166tz_253",
+  "horizontal": "awsui_horizontal_gxp9y_166tz_257",
+  "content": "awsui_content_gxp9y_166tz_293",
+  "vertical": "awsui_vertical_gxp9y_166tz_307",
+  "connector-continuation": "awsui_connector-continuation_gxp9y_166tz_321",
+  "custom-vertical": "awsui_custom-vertical_gxp9y_166tz_339",
+  "rail": "awsui_rail_gxp9y_166tz_339",
+  "with-annotation": "awsui_with-annotation_gxp9y_166tz_362"
 };
   

package/lib/internal/template/table/clear-sort.d.ts

@@ -0,0 +1,9 @@
+import { TableProps } from './interfaces';
+interface ClearSortButtonProps<T> {
+    multiColumnSort: TableProps.MultiColumnSort<T>;
+    i18nStrings?: TableProps.I18nStrings;
+    onClearSort?: () => void;
+}
+export declare function ClearSortButton<T>({ multiColumnSort, i18nStrings, onClearSort }: ClearSortButtonProps<T>): JSX.Element;
+export {};
+//# sourceMappingURL=clear-sort.d.ts.map

package/lib/internal/template/table/clear-sort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clear-sort.d.ts","sourceRoot":"","sources":["../../../src/table/clear-sort.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,UAAU,oBAAoB,CAAC,CAAC;IAC9B,eAAe,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IAC/C,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,oBAAoB,CAAC,CAAC,CAAC,eAcxG"}

package/lib/internal/template/table/clear-sort.js

@@ -0,0 +1,15 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import InternalButton from '../button/internal';
+import { useInternalI18n } from '../i18n/context';
+import { fireNonCancelableEvent } from '../internal/events';
+export function ClearSortButton({ multiColumnSort, i18nStrings, onClearSort }) {
+    var _a;
+    const i18n = useInternalI18n('table');
+    return (React.createElement(InternalButton, { variant: "inline-link", formAction: "none", onClick: () => {
+            fireNonCancelableEvent(multiColumnSort.onChange, { sortingColumns: [] });
+            onClearSort === null || onClearSort === void 0 ? void 0 : onClearSort();
+        } }, (_a = i18n('i18nStrings.clearSort', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.clearSort)) !== null && _a !== void 0 ? _a : ''));
+}
+//# sourceMappingURL=clear-sort.js.map

package/lib/internal/template/table/clear-sort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clear-sort.js","sourceRoot":"","sources":["../../../src/table/clear-sort.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAS5D,MAAM,UAAU,eAAe,CAAI,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,EAA2B;;IACvG,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IACtC,OAAO,CACL,oBAAC,cAAc,IACb,OAAO,EAAC,aAAa,EACrB,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,GAAG,EAAE;YACZ,sBAAsB,CAAC,eAAe,CAAC,QAAQ,EAAE,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC;YACzE,WAAW,aAAX,WAAW,uBAAX,WAAW,EAAI,CAAC;QAClB,CAAC,IAEA,MAAA,IAAI,CAAC,uBAAuB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,CAAC,mCAAI,EAAE,CAC7C,CAClB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport InternalButton from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { TableProps } from './interfaces';\n\ninterface ClearSortButtonProps<T> {\n  multiColumnSort: TableProps.MultiColumnSort<T>;\n  i18nStrings?: TableProps.I18nStrings;\n  onClearSort?: () => void;\n}\n\nexport function ClearSortButton<T>({ multiColumnSort, i18nStrings, onClearSort }: ClearSortButtonProps<T>) {\n  const i18n = useInternalI18n('table');\n  return (\n    <InternalButton\n      variant=\"inline-link\"\n      formAction=\"none\"\n      onClick={() => {\n        fireNonCancelableEvent(multiColumnSort.onChange, { sortingColumns: [] });\n        onClearSort?.();\n      }}\n    >\n      {i18n('i18nStrings.clearSort', i18nStrings?.clearSort) ?? ''}\n    </InternalButton>\n  );\n}\n"]}

package/lib/internal/template/table/header-cell/index.d.ts

@@ -7,6 +7,9 @@ export interface TableHeaderCellProps<ItemType> extends BaseHeaderCellProps {
     sortingDisabled?: boolean;
     stuck?: boolean;
     onClick(detail: TableProps.SortingState<any>): void;
+    multiColumnSort?: TableProps.MultiColumnSort<ItemType>;
+    i18nStrings?: TableProps.I18nStrings;
+    ariaLabels?: TableProps.AriaLabels<ItemType>;
     updateColumn: (columnId: PropertyKey, newWidth: number) => void;
     isEditable?: boolean;
     columnId: PropertyKey;
@@ -18,5 +21,5 @@ export interface TableHeaderCellProps<ItemType> extends BaseHeaderCellProps {
     isLastChildOfGroup?: boolean;
     isLast?: boolean;
 }
-export declare function TableHeaderCell<ItemType>({ tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, stuck, sticky, hidden, stripedRows, onClick, colIndex, updateColumn, resizableColumns, resizableStyle, onResizeFinish, isEditable, columnId, stickyState, cellRef, tableRole, resizerRoleDescription, resizerTooltipText, isExpandable, hasDynamicContent, variant, colSpan, rowSpan, columnGroupId, isLastChildOfGroup, isLast, tableVariant, }: TableHeaderCellProps<ItemType>): JSX.Element;
+export declare function TableHeaderCell<ItemType>({ tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, stuck, sticky, hidden, stripedRows, onClick, colIndex, updateColumn, resizableColumns, resizableStyle, onResizeFinish, isEditable, columnId, stickyState, cellRef, tableRole, resizerRoleDescription, resizerTooltipText, isExpandable, hasDynamicContent, variant, colSpan, rowSpan, columnGroupId, isLastChildOfGroup, isLast, tableVariant, multiColumnSort, i18nStrings, ariaLabels, }: TableHeaderCellProps<ItemType>): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/table/header-cell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAOrD,MAAM,WAAW,oBAAoB,CAAC,QAAQ,CAAE,SAAQ,mBAAmB;IACzE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,mBAAmB,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACpD,YAAY,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,WAAW,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,EACxC,QAAQ,EACR,MAAM,EACN,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,MAAM,EACN,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,OAAO,EACP,OAAO,EACP,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,YAAY,GACb,EAAE,oBAAoB,CAAC,QAAQ,CAAC,eAsJhC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAU3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAQrD,MAAM,WAAW,oBAAoB,CAAC,QAAQ,CAAE,SAAQ,mBAAmB;IACzE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,mBAAmB,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC,UAAU,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7C,YAAY,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,WAAW,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,EACxC,QAAQ,EACR,MAAM,EACN,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,MAAM,EACN,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,OAAO,EACP,OAAO,EACP,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,YAAY,EACZ,eAAe,EACf,WAAW,EACX,UAAU,GACX,EAAE,oBAAoB,CAAC,QAAQ,CAAC,eAuQhC"}