@pega/cosmos-react-core 2.0.0-dev.2.1 → 2.0.0-dev.20.0

package/lib/components/SummaryList/ViewAll.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewAll.js","sourceRoot":"","sources":["../../../src/components/SummaryList/ViewAll.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, Ref, FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport Flex from '../Flex';\nimport SearchInput, { SearchInputProps } from '../SearchInput';\nimport NoItems from '../NoItems';\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport SummaryItem from '../SummaryItem';\nimport Progress from '../Progress';\n\nimport { SummaryListProps } from './SummaryList';\n\nexport interface ViewAllProps extends Pick<SummaryListProps, 'loading' | 'actions' | 'items'> {\n  searchInputProps?: SearchInputProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledToolbar = styled.div(({ theme: { base } }) => {\n  return css`\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: ${base.palette['primary-background']};\n    margin-bottom: ${base.spacing};\n    transform: translateY(calc(-0.5 * ${base.spacing}));\n    padding: ${base.spacing} 0;\n  `;\n});\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledViewAll = styled.div<{ loading: ViewAllProps['loading'] }>(\n  ({ loading }) => css`\n    ${loading &&\n    css`\n      min-height: 8rem;\n    `}\n  `\n);\n\nconst SearchableList: FC<ViewAllProps & ForwardProps> = forwardRef(\n  ({ loading, actions, items, searchInputProps, ...restProps }, ref: ViewAllProps['ref']) => {\n    return (\n      <StyledViewAll ref={ref} loading={loading} {...restProps}>\n        {!loading && (searchInputProps || actions) && (\n          <Flex container={{ alignItems: 'center', itemGap: 2 }} as={StyledToolbar}>\n            {searchInputProps && (\n              <Flex item={{ grow: 1 }}>\n                <SearchInput onSearchChange={searchInputProps.onSearchChange} />\n              </Flex>\n            )}\n            {actions && <Actions iconOnly={false} items={actions} />}\n          </Flex>\n        )}\n\n        {loading && <Progress placement='local' />}\n        {!loading &&\n          (items.length ? (\n            <Flex as='ul' container={{ direction: 'column', itemGap: 2 }}>\n              {items.map(\n                ({\n                  primary,\n                  secondary,\n                  visual,\n                  overflowStrategy,\n                  id,\n                  actions: itemActions,\n                  ...restItemProps\n                }) => {\n                  return (\n                    <SummaryItem\n                      key={id}\n                      {...restItemProps}\n                      visual={visual}\n                      primary={primary}\n                      secondary={secondary}\n                      overflowStrategy={overflowStrategy}\n                      actions={itemActions && <Actions items={itemActions} />}\n                    />\n                  );\n                }\n              )}\n            </Flex>\n          ) : (\n            <NoItems />\n          ))}\n      </StyledViewAll>\n    );\n  }\n);\n\nexport default SearchableList;\n"]}
+{"version":3,"file":"ViewAll.js","sourceRoot":"","sources":["../../../src/components/SummaryList/ViewAll.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,OAAO,CAAC;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,WAAW,EAAE,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,WAAiC,MAAM,eAAe,CAAC;AAO9D,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;wBAIY,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;qBACrC,IAAI,CAAC,OAAO;wCACO,IAAI,CAAC,OAAO;eACrC,IAAI,CAAC,OAAO;;MAErB,iBAAiB;;;GAGpB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,UAAU,CAChD,SAAS,CAAC,SAAS,CAAC,CACrB,CACC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAChB,iBAAiB,QAAQ,UAAU,IAAI,UAAU,MAAM,iBAAiB;;;;MAIxE,OAAO;IACT,GAAG,CAAA;;KAEF;GACF,CACF,CAAC;AAEF,MAAM,cAAc,GAAoC,UAAU,CAChE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,SAAS,EAAE,EAAE,GAAwB,EAAE,EAAE;IACxF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,KAAM,SAAS,aACrD,CAAC,OAAO,IAAI,CAAC,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAC5C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,aAAa,aACrF,gBAAgB,IAAI,CACnB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAClE,KAAC,WAAW,IAAC,cAAc,EAAE,gBAAgB,CAAC,cAAc,WAAI,WAC3D,CACR,EACA,OAAO,IAAI,KAAC,OAAO,IAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,WAAI,YACnD,CACR,EAEA,OAAO,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,WAAG,EACzC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,WAAI,CAAC,CAAC,CAAC,KAAC,UAAU,aAAG,CAAC,YAC9D,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, Ref, FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport Flex from '../Flex';\nimport EmptyState from '../EmptyState';\nimport SearchInput, { SearchInputProps, StyledSearchInput } from '../SearchInput';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport { StyledCard } from '../Card';\nimport { StyledCardContent } from '../Card/CardContent';\nimport { omitProps } from '../../styles';\nimport type { ForwardProps } from '../../types';\n\nimport SummaryList, { SummaryListProps } from './SummaryList';\n\nexport interface ViewAllProps extends Pick<SummaryListProps, 'loading' | 'actions' | 'items'> {\n  searchInputProps?: SearchInputProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledToolbar = styled.div(({ theme: { base } }) => {\n  return css`\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: ${base.palette['primary-background']};\n    margin-bottom: ${base.spacing};\n    transform: translateY(calc(-0.5 * ${base.spacing}));\n    padding: ${base.spacing} 0;\n\n    ${StyledSearchInput} {\n      flex-grow: 1;\n    }\n  `;\n});\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledViewAll = styled.div.withConfig<{ loading: ViewAllProps['loading'] }>(\n  omitProps('loading')\n)(\n  ({ loading }) => css`\n    ${StyledCardContent}:not(${StyledCard} ${StyledCard} > ${StyledCardContent}) {\n      padding: 0;\n    }\n\n    ${loading &&\n    css`\n      min-height: 8rem;\n    `}\n  `\n);\n\nconst SearchableList: FC<ViewAllProps & ForwardProps> = forwardRef(\n  ({ loading, actions, items, searchInputProps, ...restProps }, ref: ViewAllProps['ref']) => {\n    return (\n      <StyledViewAll ref={ref} loading={loading} {...restProps}>\n        {!loading && (searchInputProps || actions) && (\n          <Flex container={{ justify: 'between', alignItems: 'center', gap: 2 }} as={StyledToolbar}>\n            {searchInputProps && (\n              <Flex container={{ alignItems: 'center', gap: 1 }} item={{ grow: 1 }}>\n                <SearchInput onSearchChange={searchInputProps.onSearchChange} />\n              </Flex>\n            )}\n            {actions && <Actions iconOnly={false} items={actions} />}\n          </Flex>\n        )}\n\n        {loading && <Progress placement='local' />}\n        {!loading && (items.length ? <SummaryList items={items} /> : <EmptyState />)}\n      </StyledViewAll>\n    );\n  }\n);\n\nexport default SearchableList;\n"]}

package/lib/components/SummaryList/index.d.ts

@@ -1,6 +1,3 @@
-export { default } from './SummaryList';
-export { SummaryListProps } from './SummaryList';
-export { SummaryListItem } from './SummaryList';
-export { StyledListItem } from './SummaryList';
+export { default, SummaryListProps, SummaryListItems, SummaryListItem, StyledSummaryListItem } from './SummaryList';
 export { default as ViewAll } from './ViewAll';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/SummaryList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACtB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/lib/components/SummaryList/index.js

@@ -1,4 +1,3 @@
-export { default } from './SummaryList';
-export { StyledListItem } from './SummaryList';
+export { default, SummaryListItems, StyledSummaryListItem } from './SummaryList';
 export { default as ViewAll } from './ViewAll';
 //# sourceMappingURL=index.js.map

package/lib/components/SummaryList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SummaryList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './SummaryList';\nexport { SummaryListProps } from './SummaryList';\nexport { SummaryListItem } from './SummaryList';\nexport { StyledListItem } from './SummaryList';\nexport { default as ViewAll } from './ViewAll';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SummaryList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EAEP,gBAAgB,EAEhB,qBAAqB,EACtB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export {\n  default,\n  SummaryListProps,\n  SummaryListItems,\n  SummaryListItem,\n  StyledSummaryListItem\n} from './SummaryList';\nexport { default as ViewAll } from './ViewAll';\n"]}

package/lib/components/Switch/Switch.d.ts

@@ -20,7 +20,7 @@ export interface SwitchProps extends BaseProps {
      */
     on?: boolean;
     /** Callback that is triggered when the Switch is toggled. */
-    onChange?(e: ChangeEvent<HTMLInputElement>): void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     /** Ref for the input element. */
     ref?: Ref<HTMLInputElement>;
 }

package/lib/components/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIhG,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,6DAA6D;IAC7D,QAAQ,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAClD,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,2GAyEvB,CAAC;AAIF,eAAO,MAAM,WAAW,2GAsDvB,CAAC;AAIF,eAAO,MAAM,YAAY,yGAAe,CAAC;AAEzC,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA+BzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIzF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAUlD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,2GAwEvB,CAAC;AAIF,eAAO,MAAM,WAAW,2GAkEvB,CAAC;AAIF,eAAO,MAAM,YAAY,yGAAe,CAAC;AAEzC,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAyBzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Switch/Switch.js

@@ -1,10 +1,15 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { hideVisually } from 'polished';
+import { hideVisually, readableColor } from 'polished';
 import { defaultThemeProp } from '../../theme';
-import { useUID } from '../../hooks';
+import { useDirection, useUID } from '../../hooks';
 import Flex from '../Flex';
 import { getHoverColors } from '../../styles';
+import Icon, { StyledIcon, registerIcon } from '../Icon';
+import * as checkIcon from '../Icon/icons/check.icon';
+import { tryCatch } from '../../utils';
+registerIcon(checkIcon);
 export const SwitchLabel = styled.label(({ theme: { base, components: { switch: { width, height, 'touch-width': touchWidth, 'touch-height': touchHeight, off } } } }) => {
     return css `
       position: relative;
@@ -18,19 +23,27 @@ export const SwitchLabel = styled.label(({ theme: { base, components: { switch:
         height: ${touchHeight};
       }
 
+      /** Checkmark */
+      & > ${StyledIcon} {
+        position: absolute;
+        inset-inline-end: calc(0.5 * ${width} + 0.25rem);
+        height: calc(0.5 * ${height});
+        width: calc(0.5 * ${height});
+
+        @media (pointer: coarse) {
+          inset-inline-end: calc(0.5 * ${touchWidth} + 0.25rem);
+          height: calc(0.5 * ${touchHeight});
+          width: calc(0.5 * ${touchHeight});
+        }
+      }
+
       /** Track */
       &::before {
         position: absolute;
         content: '';
+        inset-inline-end: 0;
         width: ${width};
         height: ${height};
-        ${base.rtl
-        ? css `
-              left: 0;
-            `
-        : css `
-              right: 0;
-            `}
         background-color: ${off.color};
         transition: background-color calc(0.5 * ${base.animation.speed})
           ${base.animation.timing.ease};
@@ -46,62 +59,63 @@ export const SwitchLabel = styled.label(({ theme: { base, components: { switch:
       &::after {
         position: absolute;
         content: '';
+        inset-inline-end: calc(${width} - ${height} + 0.0625rem);
         height: calc(${height} - 0.125rem);
         width: calc(${height} - 0.125rem);
-        ${base.rtl
-        ? css `
-              left: 0.0625rem;
-            `
-        : css `
-              right: calc(${width} - ${height} + 0.0625rem);
-            `}
         background-color: ${base.palette['primary-background']};
         transition: transform calc(0.5 * ${base.animation.speed}) ${base.animation.timing.ease};
         border-radius: calc(9999 * ${base['border-radius']});
 
         @media (pointer: coarse) {
+          inset-inline-end: calc(${touchWidth} - ${touchHeight} + 0.0625rem);
           height: calc(${touchHeight} - 0.125rem);
           width: calc(${touchHeight} - 0.125rem);
-          ${!base.rtl &&
-        css `
-            right: calc(${touchWidth} - ${touchHeight} + 0.0625rem);
-          `}
         }
       }
     `;
 });
 SwitchLabel.defaultProps = defaultThemeProp;
 export const SwitchInput = styled.input(({ theme: { base, components: { 'form-control': { ':focus': { 'box-shadow': shadow } }, switch: { height, width, 'touch-height': touchHeight, 'touch-width': touchWidth, on, off } } } }) => {
-    const onHoverColor = getHoverColors(on.color).background;
-    const offHoverColor = getHoverColors(off.color).background;
+    const { ltr } = useDirection();
+    const checkmarkColor = tryCatch(() => readableColor(on.color));
+    const onHoverColors = getHoverColors(on.color);
+    const offHoverColors = getHoverColors(off.color);
     return css `
       ${hideVisually}
 
       & + ${SwitchLabel} {
-        min-height: ${base.sizes['touch-mouse']};
+        min-height: ${base['hit-area']['mouse-min']};
         @media (pointer: coarse) {
-          min-height: ${base.sizes['touch-finger']};
+          min-height: ${base['hit-area']['finger-min']};
         }
       }
 
+      & + ${SwitchLabel} > ${StyledIcon} {
+        color: ${checkmarkColor};
+      }
+
       &:checked + ${SwitchLabel}::before {
         background-color: ${on.color};
       }
 
       &:checked + ${SwitchLabel}::after {
-        transform: translateX(calc(${width} - ${height}));
+        transform: translateX(calc((${width} - ${height}) * ${ltr ? '1' : '-1'}));
 
         @media (pointer: coarse) {
-          transform: translateX(calc(${touchWidth} - ${touchHeight}));
+          transform: translateX(calc((${touchWidth} - ${touchHeight}) * ${ltr ? '1' : '-1'}));
         }
       }
 
+      &:hover + ${SwitchLabel} > ${StyledIcon} {
+        color: ${onHoverColors.foreground};
+      }
+
       &:hover:checked + ${SwitchLabel}::before {
-        background-color: ${onHoverColor};
+        background-color: ${onHoverColors.background};
       }
 
       &:hover + ${SwitchLabel}::before {
-        background-color: ${offHoverColor};
+        background-color: ${offHoverColors.background};
       }
 
       &:focus + ${SwitchLabel}::before {
@@ -115,10 +129,10 @@ export const SwitchInput = styled.input(({ theme: { base, components: { 'form-co
 });
 SwitchInput.defaultProps = defaultThemeProp;
 export const StyledSwitch = styled.div ``;
-const Switch = forwardRef(({ id = useUID(), label, disabled = false, on = false, onChange, ...restProps }, ref) => {
-    return (React.createElement(StyledSwitch, null,
-        React.createElement(SwitchInput, { ...restProps, id: id, type: 'checkbox', role: 'switch', checked: on, "aria-checked": on, disabled: disabled, onChange: onChange, ref: ref }),
-        React.createElement(Flex, { container: { alignItems: 'center' }, as: SwitchLabel, htmlFor: id }, label)));
+const Switch = forwardRef((props, ref) => {
+    const uid = useUID();
+    const { id = uid, label, disabled = false, on = false, onChange, ...restProps } = props;
+    return (_jsxs(StyledSwitch, { children: [_jsx(SwitchInput, { ...restProps, id: id, type: 'checkbox', role: 'switch', checked: on, "aria-checked": on, disabled: disabled, onChange: onChange, ref: ref }, void 0), _jsxs(Flex, { container: { alignItems: 'center' }, as: SwitchLabel, htmlFor: id, children: [label, on && _jsx(Icon, { name: 'check' }, void 0)] }, void 0)] }, void 0));
 });
 export default Switch;
 //# sourceMappingURL=Switch.js.map

package/lib/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ChangeEvent, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps } from '../FormControl';\nimport { useUID } from '../../hooks';\nimport Flex from '../Flex';\nimport { getHoverColors } from '../../styles';\n\nexport interface SwitchProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Disables the control.\n   * @default false\n   */\n  disabled?: FormControlProps['disabled'];\n  /**\n   * Sets checked prop via onChange.\n   * @default false\n   */\n  on?: boolean;\n  /** Callback that is triggered when the Switch is toggled. */\n  onChange?(e: ChangeEvent<HTMLInputElement>): void;\n  /** Ref for the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const SwitchLabel = styled.label(\n  ({\n    theme: {\n      base,\n      components: {\n        switch: { width, height, 'touch-width': touchWidth, 'touch-height': touchHeight, off }\n      }\n    }\n  }) => {\n    return css`\n      position: relative;\n      cursor: pointer;\n      padding-inline-end: calc(${width} + 0.5rem);\n      height: ${height};\n      width: 100%;\n\n      @media (pointer: coarse) {\n        padding-inline-end: calc(${touchWidth} + 0.5rem);\n        height: ${touchHeight};\n      }\n\n      /** Track */\n      &::before {\n        position: absolute;\n        content: '';\n        width: ${width};\n        height: ${height};\n        ${base.rtl\n          ? css`\n              left: 0;\n            `\n          : css`\n              right: 0;\n            `}\n        background-color: ${off.color};\n        transition: background-color calc(0.5 * ${base.animation.speed})\n          ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          width: ${touchWidth};\n          height: ${touchHeight};\n        }\n      }\n\n      /** Switch */\n      &::after {\n        position: absolute;\n        content: '';\n        height: calc(${height} - 0.125rem);\n        width: calc(${height} - 0.125rem);\n        ${base.rtl\n          ? css`\n              left: 0.0625rem;\n            `\n          : css`\n              right: calc(${width} - ${height} + 0.0625rem);\n            `}\n        background-color: ${base.palette['primary-background']};\n        transition: transform calc(0.5 * ${base.animation.speed}) ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          height: calc(${touchHeight} - 0.125rem);\n          width: calc(${touchHeight} - 0.125rem);\n          ${!base.rtl &&\n          css`\n            right: calc(${touchWidth} - ${touchHeight} + 0.0625rem);\n          `}\n        }\n      }\n    `;\n  }\n);\n\nSwitchLabel.defaultProps = defaultThemeProp;\n\nexport const SwitchInput = styled.input(\n  ({\n    theme: {\n      base,\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow }\n        },\n        switch: { height, width, 'touch-height': touchHeight, 'touch-width': touchWidth, on, off }\n      }\n    }\n  }) => {\n    const onHoverColor = getHoverColors(on.color).background;\n    const offHoverColor = getHoverColors(off.color).background;\n\n    return css`\n      ${hideVisually}\n\n      & + ${SwitchLabel} {\n        min-height: ${base.sizes['touch-mouse']};\n        @media (pointer: coarse) {\n          min-height: ${base.sizes['touch-finger']};\n        }\n      }\n\n      &:checked + ${SwitchLabel}::before {\n        background-color: ${on.color};\n      }\n\n      &:checked + ${SwitchLabel}::after {\n        transform: translateX(calc(${width} - ${height}));\n\n        @media (pointer: coarse) {\n          transform: translateX(calc(${touchWidth} - ${touchHeight}));\n        }\n      }\n\n      &:hover:checked + ${SwitchLabel}::before {\n        background-color: ${onHoverColor};\n      }\n\n      &:hover + ${SwitchLabel}::before {\n        background-color: ${offHoverColor};\n      }\n\n      &:focus + ${SwitchLabel}::before {\n        box-shadow: ${shadow};\n      }\n\n      &:disabled + ${SwitchLabel} {\n        opacity: ${base['disabled-opacity']};\n      }\n    `;\n  }\n);\n\nSwitchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSwitch = styled.div``;\n\nconst Switch: FunctionComponent<SwitchProps & ForwardProps> = forwardRef(\n  (\n    {\n      id = useUID(),\n      label,\n      disabled = false,\n      on = false,\n      onChange,\n      ...restProps\n    }: PropsWithoutRef<SwitchProps>,\n    ref: SwitchProps['ref']\n  ) => {\n    return (\n      <StyledSwitch>\n        <SwitchInput\n          {...restProps}\n          id={id}\n          type='checkbox'\n          role='switch'\n          checked={on}\n          aria-checked={on}\n          disabled={disabled}\n          onChange={onChange}\n          ref={ref}\n        />\n        <Flex container={{ alignItems: 'center' }} as={SwitchLabel} htmlFor={id}>\n          {label}\n        </Flex>\n      </StyledSwitch>\n    );\n  }\n);\n\nexport default Switch;\n"]}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\nimport Flex from '../Flex';\nimport { getHoverColors } from '../../styles';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport { tryCatch } from '../../utils';\n\nregisterIcon(checkIcon);\n\nexport interface SwitchProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Disables the control.\n   * @default false\n   */\n  disabled?: FormControlProps['disabled'];\n  /**\n   * Sets checked prop via onChange.\n   * @default false\n   */\n  on?: boolean;\n  /** Callback that is triggered when the Switch is toggled. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Ref for the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const SwitchLabel = styled.label(\n  ({\n    theme: {\n      base,\n      components: {\n        switch: { width, height, 'touch-width': touchWidth, 'touch-height': touchHeight, off }\n      }\n    }\n  }) => {\n    return css`\n      position: relative;\n      cursor: pointer;\n      padding-inline-end: calc(${width} + 0.5rem);\n      height: ${height};\n      width: 100%;\n\n      @media (pointer: coarse) {\n        padding-inline-end: calc(${touchWidth} + 0.5rem);\n        height: ${touchHeight};\n      }\n\n      /** Checkmark */\n      & > ${StyledIcon} {\n        position: absolute;\n        inset-inline-end: calc(0.5 * ${width} + 0.25rem);\n        height: calc(0.5 * ${height});\n        width: calc(0.5 * ${height});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(0.5 * ${touchWidth} + 0.25rem);\n          height: calc(0.5 * ${touchHeight});\n          width: calc(0.5 * ${touchHeight});\n        }\n      }\n\n      /** Track */\n      &::before {\n        position: absolute;\n        content: '';\n        inset-inline-end: 0;\n        width: ${width};\n        height: ${height};\n        background-color: ${off.color};\n        transition: background-color calc(0.5 * ${base.animation.speed})\n          ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          width: ${touchWidth};\n          height: ${touchHeight};\n        }\n      }\n\n      /** Switch */\n      &::after {\n        position: absolute;\n        content: '';\n        inset-inline-end: calc(${width} - ${height} + 0.0625rem);\n        height: calc(${height} - 0.125rem);\n        width: calc(${height} - 0.125rem);\n        background-color: ${base.palette['primary-background']};\n        transition: transform calc(0.5 * ${base.animation.speed}) ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(${touchWidth} - ${touchHeight} + 0.0625rem);\n          height: calc(${touchHeight} - 0.125rem);\n          width: calc(${touchHeight} - 0.125rem);\n        }\n      }\n    `;\n  }\n);\n\nSwitchLabel.defaultProps = defaultThemeProp;\n\nexport const SwitchInput = styled.input(\n  ({\n    theme: {\n      base,\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow }\n        },\n        switch: { height, width, 'touch-height': touchHeight, 'touch-width': touchWidth, on, off }\n      }\n    }\n  }) => {\n    const { ltr } = useDirection();\n\n    const checkmarkColor = tryCatch(() => readableColor(on.color));\n\n    const onHoverColors = getHoverColors(on.color);\n    const offHoverColors = getHoverColors(off.color);\n\n    return css`\n      ${hideVisually}\n\n      & + ${SwitchLabel} {\n        min-height: ${base['hit-area']['mouse-min']};\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      & + ${SwitchLabel} > ${StyledIcon} {\n        color: ${checkmarkColor};\n      }\n\n      &:checked + ${SwitchLabel}::before {\n        background-color: ${on.color};\n      }\n\n      &:checked + ${SwitchLabel}::after {\n        transform: translateX(calc((${width} - ${height}) * ${ltr ? '1' : '-1'}));\n\n        @media (pointer: coarse) {\n          transform: translateX(calc((${touchWidth} - ${touchHeight}) * ${ltr ? '1' : '-1'}));\n        }\n      }\n\n      &:hover + ${SwitchLabel} > ${StyledIcon} {\n        color: ${onHoverColors.foreground};\n      }\n\n      &:hover:checked + ${SwitchLabel}::before {\n        background-color: ${onHoverColors.background};\n      }\n\n      &:hover + ${SwitchLabel}::before {\n        background-color: ${offHoverColors.background};\n      }\n\n      &:focus + ${SwitchLabel}::before {\n        box-shadow: ${shadow};\n      }\n\n      &:disabled + ${SwitchLabel} {\n        opacity: ${base['disabled-opacity']};\n      }\n    `;\n  }\n);\n\nSwitchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSwitch = styled.div``;\n\nconst Switch: FunctionComponent<SwitchProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SwitchProps>, ref: SwitchProps['ref']) => {\n    const uid = useUID();\n    const { id = uid, label, disabled = false, on = false, onChange, ...restProps } = props;\n\n    return (\n      <StyledSwitch>\n        <SwitchInput\n          {...restProps}\n          id={id}\n          type='checkbox'\n          role='switch'\n          checked={on}\n          aria-checked={on}\n          disabled={disabled}\n          onChange={onChange}\n          ref={ref}\n        />\n        <Flex container={{ alignItems: 'center' }} as={SwitchLabel} htmlFor={id}>\n          {label}\n          {on && <Icon name='check' />}\n        </Flex>\n      </StyledSwitch>\n    );\n  }\n);\n\nexport default Switch;\n"]}

package/lib/components/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGZ,GAAG,EACH,SAAS,EACT,YAAY,EACZ,aAAa,EACd,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAQzE,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc;IAC1E,gIAAgI;IAChI,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC;IACjD,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,SAAS;IAC5F,wDAAwD;IACxD,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAwJD,QAAA,MAAM,KAAK,kGA8DN,YAAY,GAAG,IAAI,CAAC;AAEzB,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAIjG,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAQzE,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc;IAC1E,gIAAgI;IAChI,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC;IACjD,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,SAAS;IAC5F,wDAAwD;IACxD,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAgKD,QAAA,MAAM,KAAK,kGAiEN,YAAY,GAAG,IAAI,CAAC;AAEzB,eAAe,KAAK,CAAC"}

package/lib/components/Table/Table.js

@@ -1,10 +1,13 @@
-import React, { forwardRef } from 'react';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { hideVisually } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import { calculateFontSize } from '../../styles';
 import Progress from '../Progress';
 import Text from '../Text';
-import NoItems from '../NoItems';
+import EmptyState from '../EmptyState';
 import Card, { CardContent } from '../Card';
 const StyledTable = styled.table(props => {
     const { hoverHighlight, theme: { base: { palette: { 'secondary-background': hoverBg }, spacing }, components: { table } } } = props;
@@ -18,16 +21,11 @@ const StyledTable = styled.table(props => {
     width: 100%;
     background-color: transparent;
 
-    caption {
-      margin-bottom: ${spacing};
-      text-align: start;
-    }
-
     thead {
       tr th {
         padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingHeader : '0'} ${table.spacing['horizontal-inner'] ? horizontalSpacing : '0'}`};
         border-bottom: ${table.border['horizontal-inner'] ? borderHeader : 'none'};
-        border-right: ${table.border['vertical-inner'] ? borderHeader : 'none'};
+        border-inline-end: ${table.border['vertical-inner'] ? borderHeader : 'none'};
       }
 
       tr:first-of-type th {
@@ -36,13 +34,13 @@ const StyledTable = styled.table(props => {
       }
 
       tr th:first-of-type {
-        padding-left: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};
-        border-left: ${table.border['vertical-outer'] ? borderHeader : 'none'};
+        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};
+        border-inline-start: ${table.border['vertical-outer'] ? borderHeader : 'none'};
       }
 
       tr th:last-of-type {
-        padding-right: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};
-        border-right: ${table.border['vertical-outer'] ? borderHeader : 'none'};
+        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};
+        border-inline-end: ${table.border['vertical-outer'] ? borderHeader : 'none'};
       }
     }
 
@@ -50,7 +48,7 @@ const StyledTable = styled.table(props => {
       tr td {
         padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingBody : '0'} ${table.spacing['horizontal-inner'] ? horizontalSpacing : '0'}`};
         border-bottom: ${table.border['horizontal-inner'] ? borderBody : 'none'};
-        border-right: ${table.border['vertical-inner'] ? borderBody : 'none'};
+        border-inline-end: ${table.border['vertical-inner'] ? borderBody : 'none'};
       }
 
       tr:last-of-type td {
@@ -59,13 +57,13 @@ const StyledTable = styled.table(props => {
       }
 
       tr td:first-of-type {
-        padding-left: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};
-        border-left: ${table.border['vertical-outer'] ? borderBody : 'none'};
+        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};
+        border-inline-start: ${table.border['vertical-outer'] ? borderBody : 'none'};
       }
 
       tr td:last-of-type {
-        padding-right: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};
-        border-right: ${table.border['vertical-outer'] ? borderBody : 'none'};
+        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};
+        border-inline-end: ${table.border['vertical-outer'] ? borderBody : 'none'};
       }
     }
 
@@ -107,24 +105,20 @@ const StyledLoadingCell = styled.td `
   position: relative;
   height: 6rem;
 `;
+const StyledTableWrapper = styled.div `
+  /* Setting it on a table element requires 'display: block' which breaks a11y. */
+  overflow-x: auto;
+`;
+StyledTableWrapper.defaultProps = defaultThemeProp;
+const StyledTableCaption = styled.caption `
+  ${hideVisually}
+`;
+StyledTableCaption.defaultProps = defaultThemeProp;
 const Table = forwardRef((props, ref) => {
     const { columns, data = [], hoverHighlight = false, loading = false, loadingMessage = '', title, ...restProps } = props;
-    return (React.createElement(Card, null,
-        React.createElement(CardContent, null,
-            React.createElement(StyledTable, { ref: ref, hoverHighlight: hoverHighlight, ...restProps },
-                title && (React.createElement(Text, { as: 'caption', variant: 'h2' }, title)),
-                React.createElement("thead", null,
-                    React.createElement("tr", null, columns.map(col => (React.createElement(StyledCell, { as: StyledHeaderCell, ...col, scope: 'col', key: col.label }, col.label))))),
-                React.createElement("tbody", null,
-                    loading && (React.createElement("tr", null,
-                        React.createElement(StyledLoadingCell, { colSpan: columns.length },
-                            React.createElement(Progress, { placement: 'local', message: loadingMessage })))),
-                    data.length > 0 &&
-                        !loading &&
-                        data.map(row => (React.createElement("tr", { key: row.id }, columns.map(({ renderer: Renderer, ...col }) => (React.createElement(StyledCell, { as: StyledBodyCell, ...col, key: `${col.label}-${row.id}` }, typeof Renderer === 'function' ? React.createElement(Renderer, { ...row }) : row[Renderer])))))),
-                    data.length === 0 && !loading && (React.createElement("tr", null,
-                        React.createElement(StyledEmptyCell, { colSpan: columns.length },
-                            React.createElement(NoItems, null)))))))));
+    return (_jsx(Card, { children: _jsxs(CardContent, { container: { rowGap: 1 }, children: [title && (_jsx(Text, { variant: 'h2', as: 'span', "aria-hidden": true, children: title }, void 0)), _jsx(StyledTableWrapper, { children: _jsxs(StyledTable, { ref: ref, hoverHighlight: hoverHighlight, ...restProps, children: [title && _jsx(StyledTableCaption, { children: title }, void 0), _jsx("thead", { children: _jsx("tr", { children: columns.map(col => (_createElement(StyledCell, { as: StyledHeaderCell, ...col, scope: 'col', key: col.label }, col.label))) }, void 0) }, void 0), _jsxs("tbody", { children: [loading && (_jsx("tr", { children: _jsx(StyledLoadingCell, { colSpan: columns.length, children: _jsx(Progress, { placement: 'local', message: loadingMessage }, void 0) }, void 0) }, void 0)), data.length > 0 &&
+                                        !loading &&
+                                        data.map(row => (_jsx("tr", { children: columns.map(({ renderer: Renderer, ...col }) => (_createElement(StyledCell, { as: StyledBodyCell, ...col, key: `${col.label}-${row.id}` }, typeof Renderer === 'function' ? _jsx(Renderer, { ...row }, void 0) : row[Renderer]))) }, row.id))), data.length === 0 && !loading && (_jsx("tr", { children: _jsx(StyledEmptyCell, { colSpan: columns.length, children: _jsx(EmptyState, {}, void 0) }, void 0) }, void 0))] }, void 0)] }, void 0) }, void 0)] }, void 0) }, void 0));
 });
 export default Table;
 //# sourceMappingURL=Table.js.map

package/lib/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  ReactElement,\n  ComponentType\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport NoItems from '../NoItems';\nimport Card, { CardContent } from '../Card';\n\nexport interface DefaultRowData {\n  id: string | number;\n}\n\nexport interface ColumnProps<RowData extends DefaultRowData = DefaultRowData> {\n  /** Render cell content for a column with a component or by passing a property key on the row object to serve as an accessor. */\n  renderer: ComponentType<RowData> | keyof RowData;\n  /** The visual label for the column. */\n  label: string;\n  /**\n   * The text alignment of the column header and the row contents for the column.\n   * @default \"left\"\n   */\n  align?: 'left' | 'center' | 'right';\n  /**\n   * If true, this column will not wrap text on overflow.\n   * @default false\n   */\n  noWrap?: boolean;\n}\n\nexport interface TableProps<RowData extends DefaultRowData = DefaultRowData> extends BaseProps {\n  /** The column headers that will structure the Table. */\n  columns: ColumnProps<RowData>[];\n  /**\n   * The content of the Table, represented as an array of objects with key value pairs.\n   * @default []\n   */\n  data?: RowData[];\n  /**\n   * Should the data rows highlight when the mouse hovers over them.\n   * @default false\n   */\n  hoverHighlight?: boolean;\n  /**\n   * Indicates if the data to populate the Table is still loading.\n   * @default false\n   */\n  loading?: boolean;\n  /** A message to be displayed when Table data is loading. */\n  loadingMessage?: string;\n  /** The title that will render above the Table if provided. */\n  title?: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLTableElement>;\n}\n\ntype TablePropsWithDefaults = PropsWithDefaults<TableProps, 'hoverHighlight' | 'loading'>;\n\nconst StyledTable = styled.table<Pick<TablePropsWithDefaults, 'hoverHighlight'>>(props => {\n  const {\n    hoverHighlight,\n    theme: {\n      base: {\n        palette: { 'secondary-background': hoverBg },\n        spacing\n      },\n      components: { table }\n    }\n  } = props;\n\n  const verticalSpacingHeader = `calc(${table.header['vertical-spacing']} * ${spacing})`;\n  const verticalSpacingBody = `calc(${table.body['vertical-spacing']} * ${spacing})`;\n  const horizontalSpacing = `calc(max(${table.header['horizontal-spacing']}, ${table.body['horizontal-spacing']}) * ${spacing})`;\n\n  const borderHeader = `${table.header['border-width']} solid ${table.header['border-color']}`;\n  const borderBody = `${table.body['border-width']} solid ${table.body['border-color']}`;\n\n  return css`\n    border-collapse: collapse;\n    width: 100%;\n    background-color: transparent;\n\n    caption {\n      margin-bottom: ${spacing};\n      text-align: start;\n    }\n\n    thead {\n      tr th {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingHeader : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderHeader : 'none'};\n        border-right: ${table.border['vertical-inner'] ? borderHeader : 'none'};\n      }\n\n      tr:first-of-type th {\n        padding-top: ${table.spacing['vertical-outer'] ? verticalSpacingHeader : '0'};\n        border-top: ${table.border['horizontal-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:first-of-type {\n        padding-left: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-left: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:last-of-type {\n        padding-right: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-right: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n    }\n\n    tbody {\n      tr td {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingBody : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderBody : 'none'};\n        border-right: ${table.border['vertical-inner'] ? borderBody : 'none'};\n      }\n\n      tr:last-of-type td {\n        padding-bottom: ${table.spacing['vertical-outer'] ? verticalSpacingBody : '0'};\n        border-bottom: ${table.border['horizontal-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:first-of-type {\n        padding-left: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-left: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:last-of-type {\n        padding-right: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-right: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n    }\n\n    ${hoverHighlight &&\n    css`\n      tbody tr:hover td,\n      tbody tr:focus-within td {\n        background-color: ${hoverBg};\n      }\n    `}\n  `;\n});\n\nStyledTable.defaultProps = defaultThemeProp;\n\nconst StyledCell = styled.td<Pick<ColumnProps, 'align' | 'noWrap'>>(\n  ({ align, noWrap = false }) => css`\n    text-align: ${align || 'left'};\n    white-space: ${noWrap ? 'nowrap' : null};\n  `\n);\n\nStyledCell.defaultProps = defaultThemeProp;\n\nconst StyledHeaderCell = styled.th(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: {\n        table: { header }\n      }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      font-size: ${fontSizes[header['font-size'] as FontSize]};\n      font-weight: ${header['font-weight']};\n      color: ${header['foreground-color']};\n      background-color: ${header['background-color']};\n    `;\n  }\n);\n\nStyledHeaderCell.defaultProps = defaultThemeProp;\n\nconst StyledBodyCell = styled.td(\n  ({\n    theme: {\n      components: {\n        table: { body }\n      }\n    }\n  }) => css`\n    color: ${body['foreground-color']};\n    background-color: ${body['background-color']};\n  `\n);\n\nStyledBodyCell.defaultProps = defaultThemeProp;\n\nconst StyledEmptyCell = styled.td`\n  padding: calc(2 * ${props => props.theme.base.spacing});\n`;\n\nStyledEmptyCell.defaultProps = defaultThemeProp;\n\nconst StyledLoadingCell = styled.td`\n  position: relative;\n  height: 6rem;\n`;\n\nconst Table = forwardRef((props: PropsWithoutRef<TableProps>, ref: Ref<HTMLTableElement>) => {\n  const {\n    columns,\n    data = [],\n    hoverHighlight = false,\n    loading = false,\n    loadingMessage = '',\n    title,\n    ...restProps\n  } = props;\n\n  return (\n    <Card>\n      <CardContent>\n        <StyledTable ref={ref} hoverHighlight={hoverHighlight} {...restProps}>\n          {title && (\n            <Text as='caption' variant='h2'>\n              {title}\n            </Text>\n          )}\n          <thead>\n            <tr>\n              {columns.map(col => (\n                <StyledCell as={StyledHeaderCell} {...col} scope='col' key={col.label}>\n                  {col.label}\n                </StyledCell>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {loading && (\n              <tr>\n                <StyledLoadingCell colSpan={columns.length}>\n                  <Progress placement='local' message={loadingMessage} />\n                </StyledLoadingCell>\n              </tr>\n            )}\n            {data.length > 0 &&\n              !loading &&\n              data.map(row => (\n                <tr key={row.id}>\n                  {columns.map(({ renderer: Renderer, ...col }) => (\n                    <StyledCell as={StyledBodyCell} {...col} key={`${col.label}-${row.id}`}>\n                      {typeof Renderer === 'function' ? <Renderer {...row} /> : row[Renderer]}\n                    </StyledCell>\n                  ))}\n                </tr>\n              ))}\n            {data.length === 0 && !loading && (\n              <tr>\n                <StyledEmptyCell colSpan={columns.length}>\n                  <NoItems />\n                </StyledEmptyCell>\n              </tr>\n            )}\n          </tbody>\n        </StyledTable>\n      </CardContent>\n    </Card>\n  );\n}) as <RowData extends DefaultRowData = DefaultRowData>(\n  props: TableProps<RowData> & ForwardProps\n) => ReactElement | null;\n\nexport default Table;\n"]}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, ReactNode, ReactElement, ComponentType } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport EmptyState from '../EmptyState';\nimport Card, { CardContent } from '../Card';\n\nexport interface DefaultRowData {\n  id: string | number;\n}\n\nexport interface ColumnProps<RowData extends DefaultRowData = DefaultRowData> {\n  /** Render cell content for a column with a component or by passing a property key on the row object to serve as an accessor. */\n  renderer: ComponentType<RowData> | keyof RowData;\n  /** The visual label for the column. */\n  label: string;\n  /**\n   * The text alignment of the column header and the row contents for the column.\n   * @default \"left\"\n   */\n  align?: 'left' | 'center' | 'right';\n  /**\n   * If true, this column will not wrap text on overflow.\n   * @default false\n   */\n  noWrap?: boolean;\n}\n\nexport interface TableProps<RowData extends DefaultRowData = DefaultRowData> extends BaseProps {\n  /** The column headers that will structure the Table. */\n  columns: ColumnProps<RowData>[];\n  /**\n   * The content of the Table, represented as an array of objects with key value pairs.\n   * @default []\n   */\n  data?: RowData[];\n  /**\n   * Should the data rows highlight when the mouse hovers over them.\n   * @default false\n   */\n  hoverHighlight?: boolean;\n  /**\n   * Indicates if the data to populate the Table is still loading.\n   * @default false\n   */\n  loading?: boolean;\n  /** A message to be displayed when Table data is loading. */\n  loadingMessage?: string;\n  /** The title that will render above the Table if provided. */\n  title?: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLTableElement>;\n}\n\ntype TablePropsWithDefaults = PropsWithDefaults<TableProps, 'hoverHighlight' | 'loading'>;\n\nconst StyledTable = styled.table<Pick<TablePropsWithDefaults, 'hoverHighlight'>>(props => {\n  const {\n    hoverHighlight,\n    theme: {\n      base: {\n        palette: { 'secondary-background': hoverBg },\n        spacing\n      },\n      components: { table }\n    }\n  } = props;\n\n  const verticalSpacingHeader = `calc(${table.header['vertical-spacing']} * ${spacing})`;\n  const verticalSpacingBody = `calc(${table.body['vertical-spacing']} * ${spacing})`;\n  const horizontalSpacing = `calc(max(${table.header['horizontal-spacing']}, ${table.body['horizontal-spacing']}) * ${spacing})`;\n\n  const borderHeader = `${table.header['border-width']} solid ${table.header['border-color']}`;\n  const borderBody = `${table.body['border-width']} solid ${table.body['border-color']}`;\n\n  return css`\n    border-collapse: collapse;\n    width: 100%;\n    background-color: transparent;\n\n    thead {\n      tr th {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingHeader : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderHeader : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderHeader : 'none'};\n      }\n\n      tr:first-of-type th {\n        padding-top: ${table.spacing['vertical-outer'] ? verticalSpacingHeader : '0'};\n        border-top: ${table.border['horizontal-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n    }\n\n    tbody {\n      tr td {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingBody : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderBody : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderBody : 'none'};\n      }\n\n      tr:last-of-type td {\n        padding-bottom: ${table.spacing['vertical-outer'] ? verticalSpacingBody : '0'};\n        border-bottom: ${table.border['horizontal-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n    }\n\n    ${hoverHighlight &&\n    css`\n      tbody tr:hover td,\n      tbody tr:focus-within td {\n        background-color: ${hoverBg};\n      }\n    `}\n  `;\n});\n\nStyledTable.defaultProps = defaultThemeProp;\n\nconst StyledCell = styled.td<Pick<ColumnProps, 'align' | 'noWrap'>>(\n  ({ align, noWrap = false }) => css`\n    text-align: ${align || 'left'};\n    white-space: ${noWrap ? 'nowrap' : null};\n  `\n);\n\nStyledCell.defaultProps = defaultThemeProp;\n\nconst StyledHeaderCell = styled.th(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: {\n        table: { header }\n      }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      font-size: ${fontSizes[header['font-size'] as FontSize]};\n      font-weight: ${header['font-weight']};\n      color: ${header['foreground-color']};\n      background-color: ${header['background-color']};\n    `;\n  }\n);\n\nStyledHeaderCell.defaultProps = defaultThemeProp;\n\nconst StyledBodyCell = styled.td(\n  ({\n    theme: {\n      components: {\n        table: { body }\n      }\n    }\n  }) => css`\n    color: ${body['foreground-color']};\n    background-color: ${body['background-color']};\n  `\n);\n\nStyledBodyCell.defaultProps = defaultThemeProp;\n\nconst StyledEmptyCell = styled.td`\n  padding: calc(2 * ${props => props.theme.base.spacing});\n`;\n\nStyledEmptyCell.defaultProps = defaultThemeProp;\n\nconst StyledLoadingCell = styled.td`\n  position: relative;\n  height: 6rem;\n`;\n\nconst StyledTableWrapper = styled.div`\n  /* Setting it on a table element requires 'display: block' which breaks a11y. */\n  overflow-x: auto;\n`;\n\nStyledTableWrapper.defaultProps = defaultThemeProp;\n\nconst StyledTableCaption = styled.caption`\n  ${hideVisually}\n`;\n\nStyledTableCaption.defaultProps = defaultThemeProp;\n\nconst Table = forwardRef((props: PropsWithoutRef<TableProps>, ref: Ref<HTMLTableElement>) => {\n  const {\n    columns,\n    data = [],\n    hoverHighlight = false,\n    loading = false,\n    loadingMessage = '',\n    title,\n    ...restProps\n  } = props;\n\n  return (\n    <Card>\n      <CardContent container={{ rowGap: 1 }}>\n        {title && (\n          <Text variant='h2' as='span' aria-hidden>\n            {title}\n          </Text>\n        )}\n        <StyledTableWrapper>\n          <StyledTable ref={ref} hoverHighlight={hoverHighlight} {...restProps}>\n            {title && <StyledTableCaption>{title}</StyledTableCaption>}\n            <thead>\n              <tr>\n                {columns.map(col => (\n                  <StyledCell as={StyledHeaderCell} {...col} scope='col' key={col.label}>\n                    {col.label}\n                  </StyledCell>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {loading && (\n                <tr>\n                  <StyledLoadingCell colSpan={columns.length}>\n                    <Progress placement='local' message={loadingMessage} />\n                  </StyledLoadingCell>\n                </tr>\n              )}\n              {data.length > 0 &&\n                !loading &&\n                data.map(row => (\n                  <tr key={row.id}>\n                    {columns.map(({ renderer: Renderer, ...col }) => (\n                      <StyledCell as={StyledBodyCell} {...col} key={`${col.label}-${row.id}`}>\n                        {typeof Renderer === 'function' ? <Renderer {...row} /> : row[Renderer]}\n                      </StyledCell>\n                    ))}\n                  </tr>\n                ))}\n              {data.length === 0 && !loading && (\n                <tr>\n                  <StyledEmptyCell colSpan={columns.length}>\n                    <EmptyState />\n                  </StyledEmptyCell>\n                </tr>\n              )}\n            </tbody>\n          </StyledTable>\n        </StyledTableWrapper>\n      </CardContent>\n    </Card>\n  );\n}) as <RowData extends DefaultRowData = DefaultRowData>(\n  props: TableProps<RowData> & ForwardProps\n) => ReactElement | null;\n\nexport default Table;\n"]}

package/lib/components/Tabs/Tab.d.ts

@@ -4,7 +4,10 @@ import { TabsProps } from './Tabs.types';
 interface TabProps {
     /** Indicates if this Tab is active. */
     selected: boolean;
-    /** Indicates if the styling of this Tab is inverted. */
+    /**
+     * Indicates if the styling of this Tab is inverted.
+     * @deprecated
+     */
     inverted: boolean;
     /** The text to display as the name of the Tab. */
     content: string;
@@ -20,7 +23,7 @@ export interface StyledTabProps {
     inverted: TabProps['inverted'];
     tabType: TabProps['type'];
 }
-export declare const StyledTab: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledTabProps, never>;
+export declare const StyledTab: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button/BareButton").BareButtonProps & ForwardProps>, import("styled-components").DefaultTheme, StyledTabProps, never>;
 declare const Tab: FC<TabProps & ForwardProps>;
 export default Tab;
 //# sourceMappingURL=Tab.d.ts.map

package/lib/components/Tabs/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AAO/E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,UAAU,QAAQ;IAChB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,wDAAwD;IACxD,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;AAiHD,eAAO,MAAM,SAAS,wHAsBrB,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,GAAG,YAAY,CAoBpC,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AAOxE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,UAAU,QAAQ;IAChB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;AAiHD,eAAO,MAAM,SAAS,gNA0BrB,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,GAAG,YAAY,CAoBpC,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/lib/components/Tabs/Tab.js

@@ -1,9 +1,11 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { transparentize } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils/utils';
 import { StyledCount } from '../Badges/Count';
+import BareButton from '../Button/BareButton';
 const activeStyle = (color) => css `
   ::after {
     display: block;
@@ -11,11 +13,10 @@ const activeStyle = (color) => css `
   }
 `;
 const getHorizontalStyles = ({ selected, theme, inverted }) => {
-    var _a;
     const primaryColor = inverted
         ? theme.components.tabs.inverted.foreground
         : theme.components.tabs.base.foreground;
-    const lightenedColor = (_a = tryCatch(() => transparentize(0.3, primaryColor))) !== null && _a !== void 0 ? _a : '';
+    const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';
     const { spacing } = theme.base;
     return css `
     align-items: center;
@@ -70,10 +71,9 @@ const getHorizontalStyles = ({ selected, theme, inverted }) => {
   `;
 };
 const getVerticalStyles = ({ selected, theme }) => {
-    var _a;
     const borderColor = theme.base.palette['border-line'];
     const primaryColor = theme.base.palette.interactive;
-    const lightenedColor = (_a = tryCatch(() => transparentize(0.5, primaryColor))) !== null && _a !== void 0 ? _a : '';
+    const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';
     const { spacing } = theme.base;
     return css `
     display: flex;
@@ -112,7 +112,7 @@ const getVerticalStyles = ({ selected, theme }) => {
     }
   `;
 };
-export const StyledTab = styled.button `
+export const StyledTab = styled(BareButton) `
   position: relative;
   background: none;
   cursor: pointer;
@@ -124,6 +124,10 @@ export const StyledTab = styled.button `
     `}
   white-space: nowrap;
 
+  & + & {
+    margin-inline-start: 0;
+  }
+
   &:focus {
     outline: none;
   }
@@ -135,9 +139,7 @@ export const StyledTab = styled.button `
 `;
 StyledTab.defaultProps = defaultThemeProp;
 const Tab = forwardRef(({ selected, inverted, content, count, type, disabled, ...restProps }, ref) => {
-    return (React.createElement(StyledTab, { ref: ref, selected: selected, inverted: inverted, tabType: type, disabled: disabled, type: 'button', ...restProps },
-        React.createElement("span", { "data-content": content }, content),
-        count));
+    return (_jsxs(StyledTab, { ref: ref, selected: selected, inverted: inverted, tabType: type, disabled: disabled, type: 'button', ...restProps, children: [_jsx("span", { "data-content": content, children: content }, void 0), count] }, void 0));
 });
 export default Tab;
 //# sourceMappingURL=Tab.js.map