@cloudscape-design/components-themeable 3.0.1165 → 3.0.1167

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

@@ -150,52 +150,52 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-@keyframes awsui_spinner-rotator_1612d_1kqc5_1 {
+@keyframes awsui_spinner-rotator_1612d_1aac4_1 {
   0% {
-    transform: rotate(var(--awsui-spinner-rotator-from-d43v8n));
+    transform: rotate(var(--awsui-spinner-rotator-from-rhu47t));
   }
   100% {
-    transform: rotate(var(--awsui-spinner-rotator-to-d43v8n));
+    transform: rotate(var(--awsui-spinner-rotator-to-rhu47t));
   }
 }
-@keyframes awsui_spinner-line-left_1612d_1kqc5_1 {
+@keyframes awsui_spinner-line-left_1612d_1aac4_1 {
   0% {
-    transform: rotate(var(--awsui-spinner-line-left-from-d43v8n));
+    transform: rotate(var(--awsui-spinner-line-left-from-rhu47t));
   }
   50% {
-    transform: rotate(var(--awsui-spinner-line-left-to-d43v8n));
+    transform: rotate(var(--awsui-spinner-line-left-to-rhu47t));
   }
   100% {
-    transform: rotate(var(--awsui-spinner-line-left-from-d43v8n));
+    transform: rotate(var(--awsui-spinner-line-left-from-rhu47t));
   }
 }
-@keyframes awsui_spinner-line-right_1612d_1kqc5_1 {
+@keyframes awsui_spinner-line-right_1612d_1aac4_1 {
   0% {
-    transform: rotate(var(--awsui-spinner-line-right-from-d43v8n));
+    transform: rotate(var(--awsui-spinner-line-right-from-rhu47t));
   }
   50% {
-    transform: rotate(var(--awsui-spinner-line-right-to-d43v8n));
+    transform: rotate(var(--awsui-spinner-line-right-to-rhu47t));
   }
   100% {
-    transform: rotate(var(--awsui-spinner-line-right-from-d43v8n));
+    transform: rotate(var(--awsui-spinner-line-right-from-rhu47t));
   }
 }
-.awsui_root_1612d_1kqc5_183:not(#\9) {
-  --awsui-spinner-rotator-from-d43v8n: 0deg;
-  --awsui-spinner-rotator-to-d43v8n: 360deg;
-  --awsui-spinner-line-left-from-d43v8n: 0deg;
-  --awsui-spinner-line-left-to-d43v8n: 120deg;
-  --awsui-spinner-line-right-from-d43v8n: 90deg;
-  --awsui-spinner-line-right-to-d43v8n: -30deg;
+.awsui_root_1612d_1aac4_183:not(#\9) {
+  --awsui-spinner-rotator-from-rhu47t: 0deg;
+  --awsui-spinner-rotator-to-rhu47t: 360deg;
+  --awsui-spinner-line-left-from-rhu47t: 0deg;
+  --awsui-spinner-line-left-to-rhu47t: 120deg;
+  --awsui-spinner-line-right-from-rhu47t: 90deg;
+  --awsui-spinner-line-right-to-rhu47t: -30deg;
   display: inline-block;
   vertical-align: top;
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
-  animation: awsui_spinner-rotator_1612d_1kqc5_1 0.7s linear infinite;
+  animation: awsui_spinner-rotator_1612d_1aac4_1 0.7s linear infinite;
   box-sizing: border-box;
   line-height: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_root_1612d_1kqc5_183.awsui_size-normal_1612d_1kqc5_198:not(#\9) {
+.awsui_root_1612d_1aac4_183.awsui_size-normal_1612d_1aac4_198:not(#\9) {
   inline-size: var(--size-icon-normal-2f5zkr, 16px);
   block-size: var(--size-icon-normal-2f5zkr, 16px);
   padding-block: calc((var(--size-icon-normal-2f5zkr, 16px) - 12px) / 2);
@@ -203,7 +203,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: calc((var(--line-height-body-m-bedeoh, 22px) - var(--size-icon-normal-2f5zkr, 16px)) / 2);
   box-sizing: border-box;
 }
-.awsui_root_1612d_1kqc5_183.awsui_size-big_1612d_1kqc5_206:not(#\9) {
+.awsui_root_1612d_1aac4_183.awsui_size-big_1612d_1aac4_206:not(#\9) {
   inline-size: var(--size-icon-big-hnqj8f, 32px);
   block-size: var(--size-icon-big-hnqj8f, 32px);
   padding-block: calc((var(--size-icon-big-hnqj8f, 32px) - 24px) / 2);
@@ -211,7 +211,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: calc((var(--line-height-heading-xl-vs1f23, 36px) - var(--size-icon-big-hnqj8f, 32px)) / 2);
   box-sizing: border-box;
 }
-.awsui_root_1612d_1kqc5_183.awsui_size-large_1612d_1kqc5_214:not(#\9) {
+.awsui_root_1612d_1aac4_183.awsui_size-large_1612d_1aac4_214:not(#\9) {
   inline-size: var(--size-icon-large-gj7xfw, 48px);
   block-size: var(--size-icon-large-gj7xfw, 48px);
   padding-block: calc((var(--size-icon-large-gj7xfw, 48px) - 36px) / 2);
@@ -219,32 +219,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: calc((var(--line-height-display-l-3zghmm, 56px) - var(--size-icon-large-gj7xfw, 48px)) / 2);
   box-sizing: border-box;
 }
-.awsui_root_1612d_1kqc5_183.awsui_variant-normal_1612d_1kqc5_222:not(#\9) {
+.awsui_root_1612d_1aac4_183.awsui_variant-normal_1612d_1aac4_222:not(#\9) {
   color: currentColor;
 }
-.awsui_root_1612d_1kqc5_183.awsui_variant-disabled_1612d_1kqc5_225:not(#\9) {
+.awsui_root_1612d_1aac4_183.awsui_variant-disabled_1612d_1aac4_225:not(#\9) {
   color: var(--color-text-interactive-disabled-xwt2jl, #aab7b8);
 }
-.awsui_root_1612d_1kqc5_183.awsui_variant-inverted_1612d_1kqc5_228:not(#\9) {
+.awsui_root_1612d_1aac4_183.awsui_variant-inverted_1612d_1aac4_228:not(#\9) {
   color: var(--color-text-inverted-2l365o, #ffffff);
 }
-.awsui_root_1612d_1kqc5_183:not(#\9):dir(rtl) {
-  --awsui-spinner-rotator-from-d43v8n: 360deg;
-  --awsui-spinner-rotator-to-d43v8n: 0deg;
-  --awsui-spinner-line-left-from-d43v8n: 0deg;
-  --awsui-spinner-line-left-to-d43v8n: -120deg;
-  --awsui-spinner-line-right-from-d43v8n: -90deg;
-  --awsui-spinner-line-right-to-d43v8n: 30deg;
+.awsui_root_1612d_1aac4_183:not(#\9):dir(rtl) {
+  --awsui-spinner-rotator-from-rhu47t: 360deg;
+  --awsui-spinner-rotator-to-rhu47t: 0deg;
+  --awsui-spinner-line-left-from-rhu47t: 0deg;
+  --awsui-spinner-line-left-to-rhu47t: -120deg;
+  --awsui-spinner-line-right-from-rhu47t: -90deg;
+  --awsui-spinner-line-right-to-rhu47t: 30deg;
 }
 
-.awsui_circle_1612d_1kqc5_240:not(#\9) {
+.awsui_circle_1612d_1aac4_240:not(#\9) {
   display: inline-block;
   inline-size: 50%;
   block-size: 100%;
   overflow: hidden;
   position: relative;
 }
-.awsui_circle_1612d_1kqc5_240:not(#\9):after {
+.awsui_circle_1612d_1aac4_240:not(#\9):after {
   position: absolute;
   box-sizing: border-box;
   content: "";
@@ -257,7 +257,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline-end-color: transparent;
   border-block-end-color: transparent;
 }
-.awsui_circle_1612d_1kqc5_240:not(#\9):after {
+.awsui_circle_1612d_1aac4_240:not(#\9):after {
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
   animation: 1.5s ease-in-out infinite;
   inset-block-start: 0;
@@ -265,13 +265,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: 100%;
   inline-size: 200%;
 }
-.awsui_circle_1612d_1kqc5_240.awsui_circle-left_1612d_1kqc5_268:not(#\9):after {
+.awsui_circle_1612d_1aac4_240.awsui_circle-left_1612d_1aac4_268:not(#\9):after {
   inset-inline-start: 0;
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
-  animation-name: awsui_spinner-line-left_1612d_1kqc5_1;
+  animation-name: awsui_spinner-line-left_1612d_1aac4_1;
 }
-.awsui_circle_1612d_1kqc5_240.awsui_circle-right_1612d_1kqc5_273:not(#\9):after {
+.awsui_circle_1612d_1aac4_240.awsui_circle-right_1612d_1aac4_273:not(#\9):after {
   inset-inline-start: -100%;
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
-  animation-name: awsui_spinner-line-right_1612d_1kqc5_1;
+  animation-name: awsui_spinner-line-right_1612d_1aac4_1;
 }

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

@@ -2,18 +2,18 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1612d_1kqc5_183",
-  "spinner-rotator": "awsui_spinner-rotator_1612d_1kqc5_1",
-  "size-normal": "awsui_size-normal_1612d_1kqc5_198",
-  "size-big": "awsui_size-big_1612d_1kqc5_206",
-  "size-large": "awsui_size-large_1612d_1kqc5_214",
-  "variant-normal": "awsui_variant-normal_1612d_1kqc5_222",
-  "variant-disabled": "awsui_variant-disabled_1612d_1kqc5_225",
-  "variant-inverted": "awsui_variant-inverted_1612d_1kqc5_228",
-  "circle": "awsui_circle_1612d_1kqc5_240",
-  "circle-left": "awsui_circle-left_1612d_1kqc5_268",
-  "spinner-line-left": "awsui_spinner-line-left_1612d_1kqc5_1",
-  "circle-right": "awsui_circle-right_1612d_1kqc5_273",
-  "spinner-line-right": "awsui_spinner-line-right_1612d_1kqc5_1"
+  "root": "awsui_root_1612d_1aac4_183",
+  "spinner-rotator": "awsui_spinner-rotator_1612d_1aac4_1",
+  "size-normal": "awsui_size-normal_1612d_1aac4_198",
+  "size-big": "awsui_size-big_1612d_1aac4_206",
+  "size-large": "awsui_size-large_1612d_1aac4_214",
+  "variant-normal": "awsui_variant-normal_1612d_1aac4_222",
+  "variant-disabled": "awsui_variant-disabled_1612d_1aac4_225",
+  "variant-inverted": "awsui_variant-inverted_1612d_1aac4_228",
+  "circle": "awsui_circle_1612d_1aac4_240",
+  "circle-left": "awsui_circle-left_1612d_1aac4_268",
+  "spinner-line-left": "awsui_spinner-line-left_1612d_1aac4_1",
+  "circle-right": "awsui_circle-right_1612d_1aac4_273",
+  "spinner-line-right": "awsui_spinner-line-right_1612d_1aac4_1"
 };
   

package/lib/internal/template/tabs/index.d.ts

@@ -1,4 +1,4 @@
 import { TabsProps } from './interfaces';
 export { TabsProps };
-export default function Tabs({ tabs, variant, onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings, i18nStrings, fitHeight, keyboardActivationMode, actions, ...rest }: TabsProps): JSX.Element;
+export default function Tabs({ tabs, variant, onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings, i18nStrings, fitHeight, keyboardActivationMode, actions, style, ...rest }: TabsProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAsBrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,WAAW,EACX,SAAS,EACT,sBAAoC,EACpC,OAAO,EACP,GAAG,IAAI,EACR,EAAE,SAAS,eAkIX"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAsBrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,WAAW,EACX,SAAS,EACT,sBAAoC,EACpC,OAAO,EACP,KAAK,EACL,GAAG,IAAI,EACR,EAAE,SAAS,eAoIX"}

package/lib/internal/template/tabs/index.js

@@ -33,7 +33,7 @@ function shouldRenderTabContent(tab, viewedTabs) {
     }
     return false;
 }
-export default function Tabs({ tabs, variant = 'default', onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings = false, i18nStrings, fitHeight, keyboardActivationMode = 'automatic', actions, ...rest }) {
+export default function Tabs({ tabs, variant = 'default', onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings = false, i18nStrings, fitHeight, keyboardActivationMode = 'automatic', actions, style, ...rest }) {
     var _a, _b;
     for (const tab of tabs) {
         checkSafeUrl('Tabs', tab.href);
@@ -99,9 +99,9 @@ export default function Tabs({ tabs, variant = 'default', onChange, activeTabId:
     const header = (React.createElement(TabHeaderBar, { activeTabId: activeTabId, variant: variant, idNamespace: idNamespace, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, tabs: tabs, actions: actions, onChange: changeDetail => {
             setActiveTabId(changeDetail.activeTabId);
             fireNonCancelableEvent(onChange, changeDetail);
-        }, i18nStrings: i18nStrings, keyboardActivationMode: keyboardActivationMode }));
+        }, i18nStrings: i18nStrings, keyboardActivationMode: keyboardActivationMode, style: style }));
     if (variant === 'container' || variant === 'stacked') {
-        return (React.createElement(InternalContainer, { header: header, disableHeaderPaddings: true, ...baseProps, className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, disableContentPaddings: true, variant: variant === 'stacked' ? 'stacked' : 'default', fitHeight: fitHeight, ...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata }) }, content()));
+        return (React.createElement(InternalContainer, { header: header, disableHeaderPaddings: true, ...baseProps, className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, disableContentPaddings: true, variant: variant === 'stacked' ? 'stacked' : 'default', fitHeight: fitHeight, ...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata }), style: style === null || style === void 0 ? void 0 : style.container }, content()));
     }
     return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight }), ref: __internalRootRef, ...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata }) },
         header,

package/lib/internal/template/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/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\n'use client';\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalContainer from '../container/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { GeneratedAnalyticsMetadataTabsComponent } from './analytics-metadata/interfaces';\nimport { TabsProps } from './interfaces';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { TabsProps };\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n  const enabledTabs = tabs.filter(tab => !tab.disabled);\n  if (enabledTabs.length > 0) {\n    return enabledTabs[0];\n  }\n  return null;\n}\n\nfunction shouldRenderTabContent(tab: TabsProps.Tab, viewedTabs: Set<string>) {\n  switch (tab.contentRenderStrategy) {\n    case 'active':\n      return false; // rendering active tab is handled directly in component\n    case 'eager':\n      return true;\n    case 'lazy':\n      return viewedTabs.has(tab.id);\n  }\n  return false;\n}\n\nexport default function Tabs({\n  tabs,\n  variant = 'default',\n  onChange,\n  activeTabId: controlledTabId,\n  ariaLabel,\n  ariaLabelledby,\n  disableContentPaddings = false,\n  i18nStrings,\n  fitHeight,\n  keyboardActivationMode = 'automatic',\n  actions,\n  ...rest\n}: TabsProps) {\n  for (const tab of tabs) {\n    checkSafeUrl('Tabs', tab.href);\n  }\n  const { __internalRootRef } = useBaseComponent('Tabs', {\n    props: { disableContentPaddings, variant, fitHeight, keyboardActivationMode },\n    metadata: {\n      hasActions: tabs.some(tab => !!tab.action),\n      hasHeaderActions: !!actions,\n      hasDisabledReasons: tabs.some(tab => !!tab.disabledReason),\n      hasEagerLoadedTabs: tabs.some(tab => tab.contentRenderStrategy === 'eager'),\n      hasLazyLoadedTabs: tabs.some(tab => tab.contentRenderStrategy === 'lazy'),\n    },\n  });\n  const idNamespace = useUniqueId('awsui-tabs-');\n\n  const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n    componentName: 'Tabs',\n    controlledProp: 'activeTabId',\n    changeHandler: 'onChange',\n  });\n\n  const viewedTabs = useRef(new Set<string>());\n  if (activeTabId !== undefined) {\n    viewedTabs.current.add(activeTabId);\n  }\n\n  const baseProps = getBaseProps(rest);\n\n  const analyticsComponentMetadata: GeneratedAnalyticsMetadataTabsComponent = {\n    name: 'awsui.Tabs',\n    label: `.${analyticsSelectors['tabs-header-list']}`,\n  };\n\n  if (activeTabId) {\n    analyticsComponentMetadata.properties = {\n      activeTabId,\n      activeTabLabel: `.${analyticsSelectors['active-tab-header']} .${analyticsSelectors['tab-label']}`,\n      activeTabPosition: `${tabs.findIndex(tab => tab.id === activeTabId) + 1}`,\n      tabsCount: `${tabs.length}`,\n    };\n  }\n\n  const content = () => {\n    const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n    const renderContent = (tab: TabsProps.Tab) => {\n      const isTabSelected = tab === selectedTab;\n\n      const classes = clsx({\n        [styles['tabs-content']]: true,\n        [styles['tabs-content-active']]: isTabSelected,\n      });\n\n      const contentAttributes: JSX.IntrinsicElements['div'] = {\n        className: classes,\n        role: 'tabpanel',\n        id: `${idNamespace}-${tab.id}-panel`,\n        key: `${idNamespace}-${tab.id}-panel`,\n        tabIndex: 0,\n        'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n      };\n\n      const isContentShown = !tab.disabled && (isTabSelected || shouldRenderTabContent(tab, viewedTabs.current));\n\n      return <div {...contentAttributes}>{isContentShown && tab.content}</div>;\n    };\n\n    return (\n      <div\n        className={clsx(\n          variant === 'container' || variant === 'stacked'\n            ? styles['tabs-container-content-wrapper']\n            : styles['tabs-content-wrapper'],\n          {\n            [styles['with-paddings']]: !disableContentPaddings,\n          }\n        )}\n      >\n        {tabs.map(renderContent)}\n      </div>\n    );\n  };\n\n  const header = (\n    <TabHeaderBar\n      activeTabId={activeTabId}\n      variant={variant}\n      idNamespace={idNamespace}\n      ariaLabel={ariaLabel}\n      ariaLabelledby={ariaLabelledby}\n      tabs={tabs}\n      actions={actions}\n      onChange={changeDetail => {\n        setActiveTabId(changeDetail.activeTabId);\n        fireNonCancelableEvent(onChange, changeDetail);\n      }}\n      i18nStrings={i18nStrings}\n      keyboardActivationMode={keyboardActivationMode}\n    />\n  );\n\n  if (variant === 'container' || variant === 'stacked') {\n    return (\n      <InternalContainer\n        header={header}\n        disableHeaderPaddings={true}\n        {...baseProps}\n        className={clsx(baseProps.className, styles.root)}\n        __internalRootRef={__internalRootRef}\n        disableContentPaddings={true}\n        variant={variant === 'stacked' ? 'stacked' : 'default'}\n        fitHeight={fitHeight}\n        {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n      >\n        {content()}\n      </InternalContainer>\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight })}\n      ref={__internalRootRef}\n      {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n    >\n      {header}\n      {content()}\n    </div>\n  );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/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\n'use client';\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalContainer from '../container/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { GeneratedAnalyticsMetadataTabsComponent } from './analytics-metadata/interfaces';\nimport { TabsProps } from './interfaces';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { TabsProps };\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n  const enabledTabs = tabs.filter(tab => !tab.disabled);\n  if (enabledTabs.length > 0) {\n    return enabledTabs[0];\n  }\n  return null;\n}\n\nfunction shouldRenderTabContent(tab: TabsProps.Tab, viewedTabs: Set<string>) {\n  switch (tab.contentRenderStrategy) {\n    case 'active':\n      return false; // rendering active tab is handled directly in component\n    case 'eager':\n      return true;\n    case 'lazy':\n      return viewedTabs.has(tab.id);\n  }\n  return false;\n}\n\nexport default function Tabs({\n  tabs,\n  variant = 'default',\n  onChange,\n  activeTabId: controlledTabId,\n  ariaLabel,\n  ariaLabelledby,\n  disableContentPaddings = false,\n  i18nStrings,\n  fitHeight,\n  keyboardActivationMode = 'automatic',\n  actions,\n  style,\n  ...rest\n}: TabsProps) {\n  for (const tab of tabs) {\n    checkSafeUrl('Tabs', tab.href);\n  }\n  const { __internalRootRef } = useBaseComponent('Tabs', {\n    props: { disableContentPaddings, variant, fitHeight, keyboardActivationMode },\n    metadata: {\n      hasActions: tabs.some(tab => !!tab.action),\n      hasHeaderActions: !!actions,\n      hasDisabledReasons: tabs.some(tab => !!tab.disabledReason),\n      hasEagerLoadedTabs: tabs.some(tab => tab.contentRenderStrategy === 'eager'),\n      hasLazyLoadedTabs: tabs.some(tab => tab.contentRenderStrategy === 'lazy'),\n    },\n  });\n  const idNamespace = useUniqueId('awsui-tabs-');\n\n  const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n    componentName: 'Tabs',\n    controlledProp: 'activeTabId',\n    changeHandler: 'onChange',\n  });\n\n  const viewedTabs = useRef(new Set<string>());\n  if (activeTabId !== undefined) {\n    viewedTabs.current.add(activeTabId);\n  }\n\n  const baseProps = getBaseProps(rest);\n\n  const analyticsComponentMetadata: GeneratedAnalyticsMetadataTabsComponent = {\n    name: 'awsui.Tabs',\n    label: `.${analyticsSelectors['tabs-header-list']}`,\n  };\n\n  if (activeTabId) {\n    analyticsComponentMetadata.properties = {\n      activeTabId,\n      activeTabLabel: `.${analyticsSelectors['active-tab-header']} .${analyticsSelectors['tab-label']}`,\n      activeTabPosition: `${tabs.findIndex(tab => tab.id === activeTabId) + 1}`,\n      tabsCount: `${tabs.length}`,\n    };\n  }\n\n  const content = () => {\n    const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n    const renderContent = (tab: TabsProps.Tab) => {\n      const isTabSelected = tab === selectedTab;\n\n      const classes = clsx({\n        [styles['tabs-content']]: true,\n        [styles['tabs-content-active']]: isTabSelected,\n      });\n\n      const contentAttributes: JSX.IntrinsicElements['div'] = {\n        className: classes,\n        role: 'tabpanel',\n        id: `${idNamespace}-${tab.id}-panel`,\n        key: `${idNamespace}-${tab.id}-panel`,\n        tabIndex: 0,\n        'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n      };\n\n      const isContentShown = !tab.disabled && (isTabSelected || shouldRenderTabContent(tab, viewedTabs.current));\n\n      return <div {...contentAttributes}>{isContentShown && tab.content}</div>;\n    };\n\n    return (\n      <div\n        className={clsx(\n          variant === 'container' || variant === 'stacked'\n            ? styles['tabs-container-content-wrapper']\n            : styles['tabs-content-wrapper'],\n          {\n            [styles['with-paddings']]: !disableContentPaddings,\n          }\n        )}\n      >\n        {tabs.map(renderContent)}\n      </div>\n    );\n  };\n\n  const header = (\n    <TabHeaderBar\n      activeTabId={activeTabId}\n      variant={variant}\n      idNamespace={idNamespace}\n      ariaLabel={ariaLabel}\n      ariaLabelledby={ariaLabelledby}\n      tabs={tabs}\n      actions={actions}\n      onChange={changeDetail => {\n        setActiveTabId(changeDetail.activeTabId);\n        fireNonCancelableEvent(onChange, changeDetail);\n      }}\n      i18nStrings={i18nStrings}\n      keyboardActivationMode={keyboardActivationMode}\n      style={style}\n    />\n  );\n\n  if (variant === 'container' || variant === 'stacked') {\n    return (\n      <InternalContainer\n        header={header}\n        disableHeaderPaddings={true}\n        {...baseProps}\n        className={clsx(baseProps.className, styles.root)}\n        __internalRootRef={__internalRootRef}\n        disableContentPaddings={true}\n        variant={variant === 'stacked' ? 'stacked' : 'default'}\n        fitHeight={fitHeight}\n        {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n        style={style?.container}\n      >\n        {content()}\n      </InternalContainer>\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight })}\n      ref={__internalRootRef}\n      {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n    >\n      {header}\n      {content()}\n    </div>\n  );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}

package/lib/internal/template/tabs/interfaces.d.ts

@@ -1,6 +1,8 @@
 import { ButtonProps } from '../button/interfaces';
+import { ContainerProps } from '../container/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
 import { NonCancelableEventHandler } from '../internal/events';
+import { FocusRingStyle } from '../internal/types';
 export interface TabsProps extends BaseComponentProps {
     /**
      * Specifies the tabs to display. Each tab object has the following properties:
@@ -89,6 +91,10 @@ export interface TabsProps extends BaseComponentProps {
      * need to introduce friction to the switching of tabs.
      */
     keyboardActivationMode?: 'automatic' | 'manual';
+    /**
+     * @awsuiSystem core
+     */
+    style?: TabsProps.Style;
 }
 export declare namespace TabsProps {
     type Variant = 'default' | 'container' | 'stacked';
@@ -177,5 +183,44 @@ export declare namespace TabsProps {
          */
         tabsWithActionsAriaRoleDescription?: string;
     }
+    interface Style {
+        container?: ContainerProps.Style;
+        tab?: {
+            backgroundColor?: {
+                active?: string;
+                default?: string;
+                disabled?: string;
+                hover?: string;
+            };
+            borderColor?: {
+                active?: string;
+                default?: string;
+                disabled?: string;
+                hover?: string;
+            };
+            borderRadius?: string;
+            borderWidth?: string;
+            color?: {
+                active?: string;
+                default?: string;
+                disabled?: string;
+                hover?: string;
+            };
+            fontSize?: string;
+            fontWeight?: string;
+            focusRing?: FocusRingStyle;
+            paddingBlock?: string;
+            paddingInline?: string;
+            activeIndicator?: {
+                color?: string;
+                width?: string;
+                borderRadius?: string;
+            };
+        };
+        tabSeparator?: {
+            color?: string;
+            width?: string;
+        };
+    }
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/tabs/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,sBAAsB,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CACjD;AACD,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAE1D,UAAiB,GAAG;QAClB;;WAEG;QACH,EAAE,EAAE,MAAM,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB;;WAEG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B;;;;WAIG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB;;WAEG;QACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACnC;;;;;;WAMG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;;;;WAKG;QACH,qBAAqB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;KACrD;IAED,UAAiB,YAAY;QAC3B;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B;;;WAGG;QACH,kCAAkC,CAAC,EAAE,MAAM,CAAC;KAC7C;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/tabs/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonProps } from '../button/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TabsProps extends BaseComponentProps {\n  /**\n   * Specifies the tabs to display. Each tab object has the following properties:\n   *\n   * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n   * - `label` (ReactNode) - Tab label shown in the UI.\n   * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n   * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n   * - `disabledReason` (string) - (Optional) Displays tooltip near the tab when disabled. Use to provide additional context.\n   * - `dismissible` (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n   * - `dismissLabel` (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.\n   * - `dismissDisabled` (boolean) - (Optional) Determines whether the dismiss button is disabled.\n   * - `action` (ReactNode) - (Optional) Action for the tab, rendered next to its corresponding label.\n   *    Although it is technically possible to insert any content, our UX guidelines only allow you to add\n   *    an icon button or icon button dropdown.\n   * - `onDismiss` (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.\n   * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n   *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n   *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n   *    if your application routing can handle such deep links. You can manually update routing on the current page\n   *    using the `activeTabHref` property of the `change` event's detail.\n   * - `contentRenderStrategy` (string) - (Optional) Determines when tab content is rendered:\n       - `'active'`: (Default) Only render content when the tab is active.\n   *   - `'eager'`: Always render tab content (hidden when the tab is not active).\n   *   - `'lazy'`: Like 'eager', but content is only rendered after the tab is first activated.\n   */\n  tabs: ReadonlyArray<TabsProps.Tab>;\n\n  /**\n   * Actions for the tabs header, displayed next to the list of tabs.\n   * Use this to add a button or button dropdown that performs actions on the\n   * entire tab list. We recommend a maximum of one interactive element to\n   * minimize the number of keyboard tab stops between the tab list and content.\n   */\n  actions?: React.ReactNode;\n\n  /**\n   * The possible visual variants of tabs are the following:\n   * * `default` - Use in any context.\n   * * `container` - Use this variant to have the tabs displayed within a container header.\n   * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: TabsProps.Variant;\n\n  /**\n   * Called whenever the user selects a different tab.\n   * The event's `detail` contains the new `activeTabId`.\n   */\n  onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n  /**\n   * The `id` of the currently active tab.\n   * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n   * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n   */\n  activeTabId?: string;\n\n  /**\n   * Provides an `aria-label` to the tab container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets the `aria-labelledby` property on the tab container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: TabsProps.I18nStrings;\n  /**\n   * Enabling this property makes the tab content fit to the available height.\n   * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.\n   */\n  fitHeight?: boolean;\n  /**\n   * Determines how the active tab is switched when navigating using\n   * the keyboard. The options are:\n   * - 'automatic' (default): the active tab is switched using the arrow keys.\n   * - 'manual': a tab must be explicitly activated using the enter/space key.\n   * We recommend using 'automatic' in most situations to provide consistent\n   * and quick switching between tabs. Use 'manual' only if there is a specific\n   * need to introduce friction to the switching of tabs.\n   */\n  keyboardActivationMode?: 'automatic' | 'manual';\n}\nexport namespace TabsProps {\n  export type Variant = 'default' | 'container' | 'stacked';\n\n  export interface Tab {\n    /**\n     * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n     */\n    id: string;\n    /**\n     * Tab label shown in the UI.\n     */\n    label: React.ReactNode;\n    /**\n     * Tab content to render in the container.\n     */\n    content?: React.ReactNode;\n    /**\n     * Whether this tab is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Provides a reason why this tab is disabled.\n     */\n    disabledReason?: string;\n    /**\n     * (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n     * When a user clicks on this button the onDismiss handler is called.\n     */\n    dismissible?: boolean;\n    /**\n     * (Optional) Specifies an aria-label for the dismiss icon button.\n     */\n    dismissLabel?: string;\n    /**\n     * (Optional) Determines whether the dismiss button is disabled.\n     */\n    dismissDisabled?: boolean;\n    /**\n     * (Optional) Action for the tab, rendered next to its corresponding label.\n     * Although it is technically possible to insert any content, our UX guidelines only allow you to add\n     * an icon button or icon button dropdown.\n     */\n    action?: React.ReactNode;\n    /**\n     * (event => void) Called when a user clicks on the dismiss button.\n     */\n    onDismiss?: ButtonProps['onClick'];\n    /**\n     * You can use this parameter to change the default `href` of the internal tab anchor. The\n     * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n     * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n     * when the routing can handle such deep links. You can manually update routing on the current page\n     * using the `activeTabHref` property of the `change` event's detail.\n     */\n    href?: string;\n    /**\n     * Determines when tab content is rendered:\n     * - 'active' (default): Only render content when the tab is active.\n     * - 'eager': Always render tab content (hidden when the tab is not active).\n     * - 'lazy': Like 'eager', but content is only rendered after the tab is first activated.\n     */\n    contentRenderStrategy?: 'active' | 'eager' | 'lazy';\n  }\n\n  export interface ChangeDetail {\n    /**\n     * The ID of the clicked tab.\n     */\n    activeTabId: string;\n    /**\n     * The `href` attribute of the clicked tab, if defined.\n     */\n    activeTabHref?: string;\n  }\n\n  export interface I18nStrings {\n    /**\n     * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n     */\n    scrollLeftAriaLabel?: string;\n    /**\n     * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n     */\n    scrollRightAriaLabel?: string;\n    /**\n     * ARIA role description for the Tabs component when an action or dismissible prop is in use. This is used\n     * with role=\"application\" to provide further information on the purpose of this component\n     */\n    tabsWithActionsAriaRoleDescription?: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonProps } from '../button/interfaces';\nimport { ContainerProps } from '../container/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FocusRingStyle } from '../internal/types';\n\nexport interface TabsProps extends BaseComponentProps {\n  /**\n   * Specifies the tabs to display. Each tab object has the following properties:\n   *\n   * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n   * - `label` (ReactNode) - Tab label shown in the UI.\n   * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n   * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n   * - `disabledReason` (string) - (Optional) Displays tooltip near the tab when disabled. Use to provide additional context.\n   * - `dismissible` (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n   * - `dismissLabel` (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.\n   * - `dismissDisabled` (boolean) - (Optional) Determines whether the dismiss button is disabled.\n   * - `action` (ReactNode) - (Optional) Action for the tab, rendered next to its corresponding label.\n   *    Although it is technically possible to insert any content, our UX guidelines only allow you to add\n   *    an icon button or icon button dropdown.\n   * - `onDismiss` (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.\n   * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n   *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n   *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n   *    if your application routing can handle such deep links. You can manually update routing on the current page\n   *    using the `activeTabHref` property of the `change` event's detail.\n   * - `contentRenderStrategy` (string) - (Optional) Determines when tab content is rendered:\n       - `'active'`: (Default) Only render content when the tab is active.\n   *   - `'eager'`: Always render tab content (hidden when the tab is not active).\n   *   - `'lazy'`: Like 'eager', but content is only rendered after the tab is first activated.\n   */\n  tabs: ReadonlyArray<TabsProps.Tab>;\n\n  /**\n   * Actions for the tabs header, displayed next to the list of tabs.\n   * Use this to add a button or button dropdown that performs actions on the\n   * entire tab list. We recommend a maximum of one interactive element to\n   * minimize the number of keyboard tab stops between the tab list and content.\n   */\n  actions?: React.ReactNode;\n\n  /**\n   * The possible visual variants of tabs are the following:\n   * * `default` - Use in any context.\n   * * `container` - Use this variant to have the tabs displayed within a container header.\n   * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: TabsProps.Variant;\n\n  /**\n   * Called whenever the user selects a different tab.\n   * The event's `detail` contains the new `activeTabId`.\n   */\n  onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n  /**\n   * The `id` of the currently active tab.\n   * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n   * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n   */\n  activeTabId?: string;\n\n  /**\n   * Provides an `aria-label` to the tab container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets the `aria-labelledby` property on the tab container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: TabsProps.I18nStrings;\n  /**\n   * Enabling this property makes the tab content fit to the available height.\n   * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.\n   */\n  fitHeight?: boolean;\n  /**\n   * Determines how the active tab is switched when navigating using\n   * the keyboard. The options are:\n   * - 'automatic' (default): the active tab is switched using the arrow keys.\n   * - 'manual': a tab must be explicitly activated using the enter/space key.\n   * We recommend using 'automatic' in most situations to provide consistent\n   * and quick switching between tabs. Use 'manual' only if there is a specific\n   * need to introduce friction to the switching of tabs.\n   */\n  keyboardActivationMode?: 'automatic' | 'manual';\n\n  /**\n   * @awsuiSystem core\n   */\n  style?: TabsProps.Style;\n}\nexport namespace TabsProps {\n  export type Variant = 'default' | 'container' | 'stacked';\n\n  export interface Tab {\n    /**\n     * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n     */\n    id: string;\n    /**\n     * Tab label shown in the UI.\n     */\n    label: React.ReactNode;\n    /**\n     * Tab content to render in the container.\n     */\n    content?: React.ReactNode;\n    /**\n     * Whether this tab is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Provides a reason why this tab is disabled.\n     */\n    disabledReason?: string;\n    /**\n     * (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n     * When a user clicks on this button the onDismiss handler is called.\n     */\n    dismissible?: boolean;\n    /**\n     * (Optional) Specifies an aria-label for the dismiss icon button.\n     */\n    dismissLabel?: string;\n    /**\n     * (Optional) Determines whether the dismiss button is disabled.\n     */\n    dismissDisabled?: boolean;\n    /**\n     * (Optional) Action for the tab, rendered next to its corresponding label.\n     * Although it is technically possible to insert any content, our UX guidelines only allow you to add\n     * an icon button or icon button dropdown.\n     */\n    action?: React.ReactNode;\n    /**\n     * (event => void) Called when a user clicks on the dismiss button.\n     */\n    onDismiss?: ButtonProps['onClick'];\n    /**\n     * You can use this parameter to change the default `href` of the internal tab anchor. The\n     * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n     * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n     * when the routing can handle such deep links. You can manually update routing on the current page\n     * using the `activeTabHref` property of the `change` event's detail.\n     */\n    href?: string;\n    /**\n     * Determines when tab content is rendered:\n     * - 'active' (default): Only render content when the tab is active.\n     * - 'eager': Always render tab content (hidden when the tab is not active).\n     * - 'lazy': Like 'eager', but content is only rendered after the tab is first activated.\n     */\n    contentRenderStrategy?: 'active' | 'eager' | 'lazy';\n  }\n\n  export interface ChangeDetail {\n    /**\n     * The ID of the clicked tab.\n     */\n    activeTabId: string;\n    /**\n     * The `href` attribute of the clicked tab, if defined.\n     */\n    activeTabHref?: string;\n  }\n\n  export interface I18nStrings {\n    /**\n     * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n     */\n    scrollLeftAriaLabel?: string;\n    /**\n     * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n     */\n    scrollRightAriaLabel?: string;\n    /**\n     * ARIA role description for the Tabs component when an action or dismissible prop is in use. This is used\n     * with role=\"application\" to provide further information on the purpose of this component\n     */\n    tabsWithActionsAriaRoleDescription?: string;\n  }\n\n  export interface Style {\n    container?: ContainerProps.Style;\n    tab?: {\n      backgroundColor?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      borderColor?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      borderRadius?: string;\n      borderWidth?: string;\n      color?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      fontSize?: string;\n      fontWeight?: string;\n      focusRing?: FocusRingStyle;\n      paddingBlock?: string;\n      paddingInline?: string;\n      activeIndicator?: {\n        color?: string;\n        width?: string;\n        borderRadius?: string;\n      };\n    };\n    tabSeparator?: {\n      color?: string;\n      width?: string;\n    };\n  }\n}\n"]}

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

@@ -1,35 +1,35 @@
 
     import './styles.scoped.css';
     export default {
-  "tabs-header": "awsui_tabs-header_14rmt_1n7hy_154",
-  "tab-header-scroll-container": "awsui_tab-header-scroll-container_14rmt_1n7hy_163",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_1n7hy_169",
-  "pagination-button": "awsui_pagination-button_14rmt_1n7hy_186",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_1n7hy_193",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1n7hy_196",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_1n7hy_200",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1n7hy_203",
-  "actions-container": "awsui_actions-container_14rmt_1n7hy_208",
-  "tabs-tab": "awsui_tabs-tab_14rmt_1n7hy_216",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1n7hy_226",
-  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1n7hy_237",
-  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1n7hy_248",
-  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1n7hy_248",
-  "refresh": "awsui_refresh_14rmt_1n7hy_253",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1n7hy_257",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1n7hy_299",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1n7hy_377",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1n7hy_384",
-  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1n7hy_388",
-  "root": "awsui_root_14rmt_1n7hy_392",
-  "tabs": "awsui_tabs_14rmt_1n7hy_154",
-  "tabs-content": "awsui_tabs-content_14rmt_1n7hy_430",
-  "fit-height": "awsui_fit-height_14rmt_1n7hy_434",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_1n7hy_440",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1n7hy_454",
-  "with-paddings": "awsui_with-paddings_14rmt_1n7hy_454",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1n7hy_465",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1n7hy_476",
-  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1n7hy_480"
+  "tabs-header": "awsui_tabs-header_14rmt_ldrjk_154",
+  "tab-header-scroll-container": "awsui_tab-header-scroll-container_14rmt_ldrjk_163",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_ldrjk_169",
+  "pagination-button": "awsui_pagination-button_14rmt_ldrjk_186",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_ldrjk_193",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_ldrjk_196",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_ldrjk_200",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_ldrjk_203",
+  "actions-container": "awsui_actions-container_14rmt_ldrjk_208",
+  "tabs-tab": "awsui_tabs-tab_14rmt_ldrjk_216",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_ldrjk_226",
+  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_ldrjk_237",
+  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_ldrjk_245",
+  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_ldrjk_245",
+  "refresh": "awsui_refresh_14rmt_ldrjk_250",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_ldrjk_254",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_ldrjk_296",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_ldrjk_379",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_ldrjk_388",
+  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_ldrjk_392",
+  "root": "awsui_root_14rmt_ldrjk_396",
+  "tabs": "awsui_tabs_14rmt_ldrjk_154",
+  "tabs-content": "awsui_tabs-content_14rmt_ldrjk_434",
+  "fit-height": "awsui_fit-height_14rmt_ldrjk_438",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_ldrjk_444",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_ldrjk_458",
+  "with-paddings": "awsui_with-paddings_14rmt_ldrjk_458",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_ldrjk_469",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_ldrjk_480",
+  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_ldrjk_484"
 };
   

package/lib/internal/template/tabs/styles.d.ts

@@ -0,0 +1,33 @@
+import customCssProps from '../internal/generated/custom-css-properties';
+import { TabsProps } from './interfaces';
+export declare function getTabStyles(style: TabsProps['style']): {
+    [customCssProps.styleBackgroundActive]: string | undefined;
+    [customCssProps.styleBackgroundDefault]: string | undefined;
+    [customCssProps.styleBackgroundDisabled]: string | undefined;
+    [customCssProps.styleBackgroundHover]: string | undefined;
+    [customCssProps.styleBorderColorActive]: string | undefined;
+    [customCssProps.styleBorderColorDefault]: string | undefined;
+    [customCssProps.styleBorderColorDisabled]: string | undefined;
+    [customCssProps.styleBorderColorHover]: string | undefined;
+    [customCssProps.styleColorActive]: string | undefined;
+    [customCssProps.styleColorDefault]: string | undefined;
+    [customCssProps.styleColorDisabled]: string | undefined;
+    [customCssProps.styleColorHover]: string | undefined;
+    [customCssProps.styleFocusRingBorderColor]: string | undefined;
+    [customCssProps.styleFocusRingBorderRadius]: string | undefined;
+    [customCssProps.styleFocusRingBorderWidth]: string | undefined;
+    borderRadius: string | undefined;
+    borderWidth: string | undefined;
+    fontSize: string | undefined;
+    fontWeight: string | undefined;
+    paddingBlock: string | undefined;
+    paddingInline: string | undefined;
+} | undefined;
+export declare function getTabContainerStyles(style: TabsProps['style']): {
+    [customCssProps.styleTabsActiveIndicatorColor]: string | undefined;
+    [customCssProps.styleTabsActiveIndicatorWidth]: string | undefined;
+    [customCssProps.styleTabsActiveIndicatorBorderRadius]: string | undefined;
+    [customCssProps.styleTabsSeparatorColor]: string | undefined;
+    [customCssProps.styleTabsSeparatorWidth]: string | undefined;
+} | undefined;
+//# sourceMappingURL=styles.d.ts.map

package/lib/internal/template/tabs/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/tabs/styles.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC;IAYlD,CAAC,cAAc,CAAC,qBAAqB,CAAC,qBAAqC;IAC3E,CAAC,cAAc,CAAC,sBAAsB,CAAC,qBAAsC;IAC7E,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAAuC;IAC/E,CAAC,cAAc,CAAC,oBAAoB,CAAC,qBAAoC;IACzE,CAAC,cAAc,CAAC,sBAAsB,CAAC,qBAAiC;IACxE,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAAkC;IAC1E,CAAC,cAAc,CAAC,wBAAwB,CAAC,qBAAmC;IAC5E,CAAC,cAAc,CAAC,qBAAqB,CAAC,qBAAgC;IACtE,CAAC,cAAc,CAAC,gBAAgB,CAAC,qBAA2B;IAC5D,CAAC,cAAc,CAAC,iBAAiB,CAAC,qBAA4B;IAC9D,CAAC,cAAc,CAAC,kBAAkB,CAAC,qBAA6B;IAChE,CAAC,cAAc,CAAC,eAAe,CAAC,qBAA0B;IAC1D,CAAC,cAAc,CAAC,yBAAyB,CAAC,qBAAoC;IAC9E,CAAC,cAAc,CAAC,0BAA0B,CAAC,qBAAqC;IAChF,CAAC,cAAc,CAAC,yBAAyB,CAAC,qBAAoC;;;;;;;cAEjF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC;IAM3D,CAAC,cAAc,CAAC,6BAA6B,CAAC,qBAAoC;IAClF,CAAC,cAAc,CAAC,6BAA6B,CAAC,qBAAoC;IAClF,CAAC,cAAc,CAAC,oCAAoC,CAAC,qBAA2C;IAChG,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAA4B;IACpE,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAA4B;cAEvE"}

package/lib/internal/template/tabs/styles.js

@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+import customCssProps from '../internal/generated/custom-css-properties';
+export function getTabStyles(style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
+    if (SYSTEM !== 'core') {
+        return undefined;
+    }
+    return {
+        borderRadius: (_a = style === null || style === void 0 ? void 0 : style.tab) === null || _a === void 0 ? void 0 : _a.borderRadius,
+        borderWidth: (_b = style === null || style === void 0 ? void 0 : style.tab) === null || _b === void 0 ? void 0 : _b.borderWidth,
+        fontSize: (_c = style === null || style === void 0 ? void 0 : style.tab) === null || _c === void 0 ? void 0 : _c.fontSize,
+        fontWeight: (_d = style === null || style === void 0 ? void 0 : style.tab) === null || _d === void 0 ? void 0 : _d.fontWeight,
+        paddingBlock: (_e = style === null || style === void 0 ? void 0 : style.tab) === null || _e === void 0 ? void 0 : _e.paddingBlock,
+        paddingInline: (_f = style === null || style === void 0 ? void 0 : style.tab) === null || _f === void 0 ? void 0 : _f.paddingInline,
+        [customCssProps.styleBackgroundActive]: (_h = (_g = style === null || style === void 0 ? void 0 : style.tab) === null || _g === void 0 ? void 0 : _g.backgroundColor) === null || _h === void 0 ? void 0 : _h.active,
+        [customCssProps.styleBackgroundDefault]: (_k = (_j = style === null || style === void 0 ? void 0 : style.tab) === null || _j === void 0 ? void 0 : _j.backgroundColor) === null || _k === void 0 ? void 0 : _k.default,
+        [customCssProps.styleBackgroundDisabled]: (_m = (_l = style === null || style === void 0 ? void 0 : style.tab) === null || _l === void 0 ? void 0 : _l.backgroundColor) === null || _m === void 0 ? void 0 : _m.disabled,
+        [customCssProps.styleBackgroundHover]: (_p = (_o = style === null || style === void 0 ? void 0 : style.tab) === null || _o === void 0 ? void 0 : _o.backgroundColor) === null || _p === void 0 ? void 0 : _p.hover,
+        [customCssProps.styleBorderColorActive]: (_r = (_q = style === null || style === void 0 ? void 0 : style.tab) === null || _q === void 0 ? void 0 : _q.borderColor) === null || _r === void 0 ? void 0 : _r.active,
+        [customCssProps.styleBorderColorDefault]: (_t = (_s = style === null || style === void 0 ? void 0 : style.tab) === null || _s === void 0 ? void 0 : _s.borderColor) === null || _t === void 0 ? void 0 : _t.default,
+        [customCssProps.styleBorderColorDisabled]: (_v = (_u = style === null || style === void 0 ? void 0 : style.tab) === null || _u === void 0 ? void 0 : _u.borderColor) === null || _v === void 0 ? void 0 : _v.disabled,
+        [customCssProps.styleBorderColorHover]: (_x = (_w = style === null || style === void 0 ? void 0 : style.tab) === null || _w === void 0 ? void 0 : _w.borderColor) === null || _x === void 0 ? void 0 : _x.hover,
+        [customCssProps.styleColorActive]: (_z = (_y = style === null || style === void 0 ? void 0 : style.tab) === null || _y === void 0 ? void 0 : _y.color) === null || _z === void 0 ? void 0 : _z.active,
+        [customCssProps.styleColorDefault]: (_1 = (_0 = style === null || style === void 0 ? void 0 : style.tab) === null || _0 === void 0 ? void 0 : _0.color) === null || _1 === void 0 ? void 0 : _1.default,
+        [customCssProps.styleColorDisabled]: (_3 = (_2 = style === null || style === void 0 ? void 0 : style.tab) === null || _2 === void 0 ? void 0 : _2.color) === null || _3 === void 0 ? void 0 : _3.disabled,
+        [customCssProps.styleColorHover]: (_5 = (_4 = style === null || style === void 0 ? void 0 : style.tab) === null || _4 === void 0 ? void 0 : _4.color) === null || _5 === void 0 ? void 0 : _5.hover,
+        [customCssProps.styleFocusRingBorderColor]: (_7 = (_6 = style === null || style === void 0 ? void 0 : style.tab) === null || _6 === void 0 ? void 0 : _6.focusRing) === null || _7 === void 0 ? void 0 : _7.borderColor,
+        [customCssProps.styleFocusRingBorderRadius]: (_9 = (_8 = style === null || style === void 0 ? void 0 : style.tab) === null || _8 === void 0 ? void 0 : _8.focusRing) === null || _9 === void 0 ? void 0 : _9.borderRadius,
+        [customCssProps.styleFocusRingBorderWidth]: (_11 = (_10 = style === null || style === void 0 ? void 0 : style.tab) === null || _10 === void 0 ? void 0 : _10.focusRing) === null || _11 === void 0 ? void 0 : _11.borderWidth,
+    };
+}
+export function getTabContainerStyles(style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (SYSTEM !== 'core') {
+        return undefined;
+    }
+    return {
+        [customCssProps.styleTabsActiveIndicatorColor]: (_b = (_a = style === null || style === void 0 ? void 0 : style.tab) === null || _a === void 0 ? void 0 : _a.activeIndicator) === null || _b === void 0 ? void 0 : _b.color,
+        [customCssProps.styleTabsActiveIndicatorWidth]: (_d = (_c = style === null || style === void 0 ? void 0 : style.tab) === null || _c === void 0 ? void 0 : _c.activeIndicator) === null || _d === void 0 ? void 0 : _d.width,
+        [customCssProps.styleTabsActiveIndicatorBorderRadius]: (_f = (_e = style === null || style === void 0 ? void 0 : style.tab) === null || _e === void 0 ? void 0 : _e.activeIndicator) === null || _f === void 0 ? void 0 : _f.borderRadius,
+        [customCssProps.styleTabsSeparatorColor]: (_g = style === null || style === void 0 ? void 0 : style.tabSeparator) === null || _g === void 0 ? void 0 : _g.color,
+        [customCssProps.styleTabsSeparatorWidth]: (_h = style === null || style === void 0 ? void 0 : style.tabSeparator) === null || _h === void 0 ? void 0 : _h.width,
+    };
+}
+//# sourceMappingURL=styles.js.map

package/lib/internal/template/tabs/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs/styles.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 { SYSTEM } from '../internal/environment';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { TabsProps } from './interfaces';\n\nexport function getTabStyles(style: TabsProps['style']) {\n  if (SYSTEM !== 'core') {\n    return undefined;\n  }\n\n  return {\n    borderRadius: style?.tab?.borderRadius,\n    borderWidth: style?.tab?.borderWidth,\n    fontSize: style?.tab?.fontSize,\n    fontWeight: style?.tab?.fontWeight,\n    paddingBlock: style?.tab?.paddingBlock,\n    paddingInline: style?.tab?.paddingInline,\n    [customCssProps.styleBackgroundActive]: style?.tab?.backgroundColor?.active,\n    [customCssProps.styleBackgroundDefault]: style?.tab?.backgroundColor?.default,\n    [customCssProps.styleBackgroundDisabled]: style?.tab?.backgroundColor?.disabled,\n    [customCssProps.styleBackgroundHover]: style?.tab?.backgroundColor?.hover,\n    [customCssProps.styleBorderColorActive]: style?.tab?.borderColor?.active,\n    [customCssProps.styleBorderColorDefault]: style?.tab?.borderColor?.default,\n    [customCssProps.styleBorderColorDisabled]: style?.tab?.borderColor?.disabled,\n    [customCssProps.styleBorderColorHover]: style?.tab?.borderColor?.hover,\n    [customCssProps.styleColorActive]: style?.tab?.color?.active,\n    [customCssProps.styleColorDefault]: style?.tab?.color?.default,\n    [customCssProps.styleColorDisabled]: style?.tab?.color?.disabled,\n    [customCssProps.styleColorHover]: style?.tab?.color?.hover,\n    [customCssProps.styleFocusRingBorderColor]: style?.tab?.focusRing?.borderColor,\n    [customCssProps.styleFocusRingBorderRadius]: style?.tab?.focusRing?.borderRadius,\n    [customCssProps.styleFocusRingBorderWidth]: style?.tab?.focusRing?.borderWidth,\n  };\n}\n\nexport function getTabContainerStyles(style: TabsProps['style']) {\n  if (SYSTEM !== 'core') {\n    return undefined;\n  }\n\n  return {\n    [customCssProps.styleTabsActiveIndicatorColor]: style?.tab?.activeIndicator?.color,\n    [customCssProps.styleTabsActiveIndicatorWidth]: style?.tab?.activeIndicator?.width,\n    [customCssProps.styleTabsActiveIndicatorBorderRadius]: style?.tab?.activeIndicator?.borderRadius,\n    [customCssProps.styleTabsSeparatorColor]: style?.tabSeparator?.color,\n    [customCssProps.styleTabsSeparatorWidth]: style?.tabSeparator?.width,\n  };\n}\n"]}