@laerdal/life-react-components 6.0.0-dev.8.full → 6.0.1

package/dist/Tabs/__tests__/HorizontalTabs.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { fireEvent, render } from '../../test-utils';
+import HorizontalTabs from '../HorizontalTabs';
+import { Size } from '../../types';
+import 'jest-styled-components';
+import '@testing-library/jest-dom';
+
+const tabs = [
+  {
+    value: 'Tab1',
+    selected: false,
+    to: 'tab1',
+  },
+  {
+    value: 'Tab2',
+    selected: true,
+    to: 'tab2',
+  },
+  {
+    value: 'Tab3',
+    selected: false,
+    to: 'tab3',
+    disabled: true,
+  },
+];
+
+
+
+
+describe('<HorizontalTabs />', () => {
+  it('Renders tabs component', async () => {
+    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={tabs} onTabChange={(to) => {}}></HorizontalTabs>);
+    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
+    expect(queryByTestId('horizontal-tabs-container')?.querySelectorAll('[data-testid*="tab_"]')).toHaveLength(3);
+  });
+
+  it('Renders tabs component with side fill', async () => {
+    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} sideFill={true} tabs={tabs} onTabChange={(to) => {}}></HorizontalTabs>);
+    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
+    expect(queryByTestId('horizontal-tabs-container')?.querySelector('.fill')).toBeTruthy();
+  });
+
+  it('Renders tabs component with no tabs provided', async () => {
+    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={[]} onTabChange={(to) => {}}></HorizontalTabs>);
+    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
+    expect(queryByTestId('horizontal-tabs-container')?.querySelectorAll('[data-testid*="tab_"]')).toHaveLength(0);
+  });
+
+  it('Check disabled tabs rendered correctly', async () => {
+    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={tabs} onTabChange={(to) => {}}></HorizontalTabs>);
+    const disabledTab = tabs.find((t) => t.disabled);
+    const notDisabledTab = tabs.find((t) => !t.disabled);
+    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
+
+    const disabledTabElem = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_${disabledTab?.value}"]`);
+    const notDisabledTabElem = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_${notDisabledTab?.value}"]`);
+
+    //check disabled/non-disabled rendered
+    expect(disabledTabElem).toBeTruthy();
+    expect(notDisabledTabElem).toBeTruthy();
+
+    //check tab index prop set correct
+    expect(disabledTabElem).toHaveAttribute('tabindex', '-1');
+    expect(notDisabledTabElem).not.toHaveClass('disabled');
+  });
+
+  it('Check tab change callback called on tab click', async () => {
+    const tabChangeFn = jest.fn();
+    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={tabs} onTabChange={tabChangeFn}></HorizontalTabs>);
+
+    const notDisabledTab = tabs.find((t) => !t.disabled);
+    const notDisabledTabElem = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_${notDisabledTab?.value}"]`);
+
+    //fire click tab click event
+    fireEvent(
+      notDisabledTabElem as HTMLButtonElement,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    //check has been called
+    expect(tabChangeFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('Check tab width calculed correctly when fullWidth prop set', async () => {
+    const { queryByTestId, queryByText } = render(<HorizontalTabs fullWidth={true} size={Size.Small} tabs={tabs} onTabChange={() => {}}></HorizontalTabs>);
+
+    const tabElement = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_Tab1"]`) as HTMLButtonElement;
+
+    expect(tabElement).toBeTruthy();
+    expect(tabElement.style).toHaveProperty('width', `${100 / tabs.length}%`);
+  });
+});

package/dist/Tabs/__tests__/TabLink.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import { createMemoryHistory } from 'history';
+import TabLink from '../TabLink';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+import { NavigationProvider } from '../../Navigation';
+
+describe('<TabLink />', () => {
+
+  const navProps = {
+    currentPath: '',
+    isActiveRoute: () => false,
+    navigate: (path: string, isExternal: boolean) => {}
+  };
+
+  it('Renders primary button', async () => {
+    const { queryByText, getByTestId } = render(
+      <NavigationProvider {...navProps}>
+        <TabLink requiredLine="This is a required line" onLinkClick={() => {}} href="/test" testId="TestTabLink" />
+      </NavigationProvider>,
+    );
+    expect(queryByText('This is a required line')).toBeDefined();
+    expect(getByTestId('TestTabLink')).toHaveStyle('background-color: transparent');
+    expect(getByTestId('TestTabLink')).toHaveStyle('font-size: 16px');
+
+    // Check that click takes you to correct route
+    getByTestId('TestTabLink').click();
+    //expect(history.location.pathname).toBe('/test');
+  });
+  it('Renders notification dot if defined', async () => {
+    const { queryByText, getByTestId } = render(
+      <NavigationProvider {...navProps}>
+        <TabLink requiredLine="This is a required line" onLinkClick={() => {}} href="/test" testId="TestTabLinkWithNotifcationDot" showNotificationDot={true} />
+      </NavigationProvider>,
+    );
+    expect(queryByText('This is a required line')).toBeDefined();
+    expect(getByTestId('NotificationDot')).toBeDefined();
+  });
+});

package/dist/Tabs/__tests__/Tablist.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { prettyDOM, render } from '../../test-utils';
+import Tabs from '../Tabs';
+import { Size } from '../../types';
+import 'jest-styled-components';
+import '@testing-library/jest-dom';
+
+describe('<Tabs />', () => {
+  it('Renders tabs component', async () => {
+    const { queryByRole } = render(<Tabs size={Size.Small}></Tabs>);
+    expect(queryByRole('tablist')).toBeDefined();
+    expect(queryByRole('tablist')?.children).toHaveLength(0);
+  });
+
+  it('Renders tabs component with children and medium size', async () => {
+    const renderer = render(
+      <Tabs size={Size.Medium}>
+        <a data-testid="child"><div>test tab</div><div/></a>
+      </Tabs>,
+    );
+    expect(renderer.queryByRole('tablist')).toBeTruthy();
+    expect(renderer.queryByRole('tablist')?.children).toHaveLength(1);
+    expect(renderer.queryByRole('tablist')).toHaveStyleRule('height', '56px', { modifier: 'a' });
+    expect(renderer.queryByTestId('child')?.querySelector('div')).toHaveStyle('margin: 10px 0 3px 16px');
+  });
+
+  it('Renders tabs component with children and large size', async () => {
+    const { queryByRole, queryByTestId } = render(
+      <Tabs size={Size.Large}>
+        <a data-testid="child"><div>test tab</div><div/></a>
+      </Tabs>,
+    );
+    expect(queryByRole('tablist')).toBeTruthy();
+    expect(queryByRole('tablist')).toHaveStyleRule('height', '64px', { modifier: 'a' });
+    expect(queryByTestId('child')?.querySelector('div')).toHaveStyle('margin: 12px 0 4px 16px');
+  });
+});

package/dist/Tag/Tag.cjs

@@ -30,28 +30,64 @@ const Container = _styledComponents.default.div`
   box-sizing: border-box;
 
   &.neutral {
-    background-color: ${props => _.COLORS.getColor('neutral_100', props.theme)};
-    color: ${props => _.COLORS.getColor('neutral_600', props.theme)};
+    background-color: ${props => _.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'neutral'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'neutral'
+}, props.theme)};
   }
   &.positive {
-    background-color: ${props => _.COLORS.getColor('positive_100', props.theme)};
-    color: ${props => _.COLORS.getColor('positive_600', props.theme)};
+    background-color: ${props => _.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'positive'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'positive'
+}, props.theme)};
   }
   &.warning {
-    background-color: ${props => _.COLORS.getColor('warning_100', props.theme)};
-    color: ${props => _.COLORS.getColor('warning_600', props.theme)};
+    background-color: ${props => _.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'warning'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'warning'
+}, props.theme)};
   }
   &.critical {
-    background-color: ${props => _.COLORS.getColor('critical_100', props.theme)};
-    color: ${props => _.COLORS.getColor('critical_600', props.theme)};
+    background-color: ${props => _.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'critical'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
   &.accent1 {
-    background-color: ${props => _.COLORS.getColor('accent1_100', props.theme)};
-    color: ${props => _.COLORS.getColor('accent1_600', props.theme)};
+    background-color: ${props => _.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'accent1'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'accent1'
+}, props.theme)};
   }
   &.accent2 {
-    background-color: ${props => _.COLORS.getColor('accent2_100', props.theme)};
-    color: ${props => _.COLORS.getColor('accent2_600', props.theme)};
+    background-color: ${props => _.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'accent2'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'accent2'
+}, props.theme)};
   }
 
 `;

package/dist/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","Container","styled","div","props","$isLabelPresent","COLORS","getColor","theme","IconContainer","TextContainer","ComponentXSStyling","ComponentTextStyle","Bold","Tag","_ref","label","icon","variant","className","rest","_objectWithoutProperties2","cls","jsxs","$variant","children","jsx","$icon","propTypes","_propTypes","string","node","oneOf","_default","exports"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{$variant: TagVariants, $isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.$isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n  &.positive {\r\n    background-color: ${props => COLORS.getColor('positive_100', props.theme)};\r\n    color: ${props => COLORS.getColor('positive_600', props.theme)};\r\n  }\r\n  &.warning {\r\n    background-color: ${props => COLORS.getColor('warning_100', props.theme)};\r\n    color: ${props => COLORS.getColor('warning_600', props.theme)};\r\n  }\r\n  &.critical {\r\n    background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n    color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${props => COLORS.getColor('accent2_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent2_600', props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{$variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{$variant: TagVariants, $icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container $variant={variant} $isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer $variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer $variant={variant} $icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tag.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","Container","styled","div","props","$isLabelPresent","COLORS","generateToken","componentType","defaultVariant","theme","IconContainer","TextContainer","ComponentXSStyling","ComponentTextStyle","Bold","Tag","_ref","label","icon","variant","className","rest","_objectWithoutProperties2","cls","jsxs","$variant","children","jsx","$icon","propTypes","_propTypes","string","node","oneOf","_default","exports"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{$variant: TagVariants, $isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.$isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'neutral' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'neutral' }, props.theme)};\r\n  }\r\n  &.positive {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'positive' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'positive' }, props.theme)};\r\n  }\r\n  &.warning {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'warning' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'warning' }, props.theme)};\r\n  }\r\n  &.critical {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'critical' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'critical' }, props.theme)};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'accent1' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'accent1' }, props.theme)};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'accent2' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'accent2' }, props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{$variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{$variant: TagVariants, $icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container $variant={variant} $isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer $variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer $variant={variant} $icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tag/Tag.js

@@ -21,28 +21,64 @@ const Container = styled.div`
   box-sizing: border-box;
 
   &.neutral {
-    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
-    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'neutral'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'neutral'
+}, props.theme)};
   }
   &.positive {
-    background-color: ${props => COLORS.getColor('positive_100', props.theme)};
-    color: ${props => COLORS.getColor('positive_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'positive'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'positive'
+}, props.theme)};
   }
   &.warning {
-    background-color: ${props => COLORS.getColor('warning_100', props.theme)};
-    color: ${props => COLORS.getColor('warning_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'warning'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'warning'
+}, props.theme)};
   }
   &.critical {
-    background-color: ${props => COLORS.getColor('critical_100', props.theme)};
-    color: ${props => COLORS.getColor('critical_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'critical'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
   &.accent1 {
-    background-color: ${props => COLORS.getColor('accent1_100', props.theme)};
-    color: ${props => COLORS.getColor('accent1_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'accent1'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'accent1'
+}, props.theme)};
   }
   &.accent2 {
-    background-color: ${props => COLORS.getColor('accent2_100', props.theme)};
-    color: ${props => COLORS.getColor('accent2_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'accent2'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'accent2'
+}, props.theme)};
   }
 
 `;

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","jsx","_jsx","jsxs","_jsxs","Container","div","props","$isLabelPresent","getColor","theme","IconContainer","TextContainer","Bold","Tag","_ref","label","icon","variant","className","rest","_objectWithoutProperties","_excluded","cls","_objectSpread","$variant","children","$icon","propTypes","_pt","string","node","oneOf"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{$variant: TagVariants, $isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.$isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n  &.positive {\r\n    background-color: ${props => COLORS.getColor('positive_100', props.theme)};\r\n    color: ${props => COLORS.getColor('positive_600', props.theme)};\r\n  }\r\n  &.warning {\r\n    background-color: ${props => COLORS.getColor('warning_100', props.theme)};\r\n    color: ${props => COLORS.getColor('warning_600', props.theme)};\r\n  }\r\n  &.critical {\r\n    background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n    color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${props => COLORS.getColor('accent2_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent2_600', props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{$variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{$variant: TagVariants, $icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container $variant={variant} $isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer $variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer $variant={variant} $icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","jsx","_jsx","jsxs","_jsxs","Container","div","props","$isLabelPresent","generateToken","componentType","defaultVariant","theme","IconContainer","TextContainer","Bold","Tag","_ref","label","icon","variant","className","rest","_objectWithoutProperties","_excluded","cls","_objectSpread","$variant","children","$icon","propTypes","_pt","string","node","oneOf"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{$variant: TagVariants, $isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.$isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'neutral' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'neutral' }, props.theme)};\r\n  }\r\n  &.positive {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'positive' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'positive' }, props.theme)};\r\n  }\r\n  &.warning {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'warning' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'warning' }, props.theme)};\r\n  }\r\n  &.critical {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'critical' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'critical' }, props.theme)};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'accent1' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'accent1' }, props.theme)};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'accent2' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'accent2' }, props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{$variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{$variant: TagVariants, $icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container $variant={variant} $isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer $variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer $variant={variant} $icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tag/__tests__/Tag.test.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import 'jest-styled-components';
+import { Tag } from '..';
+import '@testing-library/jest-dom';
+import { COLORS, SystemIcons } from '../..';
+
+describe('<Tag />',()=>{
+    it('renders only label', async () => {
+        const{getByText} = render(
+            <Tag label='sample text'/>
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeNull();
+    });
+
+    it('renders only icon', async () => {
+        const{getByTestId} = render(
+            <Tag icon={<SystemIcons.Time/>} />
+        );
+        expect(getByTestId('iconContainer')).toBeDefined();
+        expect(getByTestId('iconContainer').previousElementSibling).toBeNull();
+    });
+
+    it('renders label and icon', async () => {
+        const{getByText} = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+    });
+
+    it('renders positive background', async () => {
+        const{getByText, container } = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} variant='positive' />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+        expect(container.firstChild).toHaveClass('positive');
+    });
+
+    it('renders warning background', async () => {
+        const{getByText, container} = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} variant='warning' />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+        expect(container.firstChild).toHaveClass('warning');
+    });
+
+    it('renders critical background', async () => {
+        const{getByText, container} = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} variant='critical' />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+        expect(container.firstChild).toHaveClass('critical');
+    });
+
+    it('renders accent1 background', async () => {
+        const{getByText, container} = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} variant='accent1' />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+        expect(container.firstChild).toHaveClass('accent1');
+    });
+
+    it('renders accent2 background', async () => {
+        const{getByText, container} = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} variant='accent2' />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+        expect(container.firstChild).toHaveClass('accent2');
+    });
+
+    it('renders neutral background', async () => {
+        const{getByText, container} = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+        expect(container.firstChild).toHaveClass('neutral');
+    });
+});

package/dist/Tile/TileCommonItems.cjs

@@ -242,7 +242,7 @@ const RenderTileItem = function (item, size) {
             componentType
           } = item,
           rest = (0, _objectWithoutProperties2.default)(item, _excluded2);
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.TextButton, _objectSpread(_objectSpread({
           size: [_types.Size.XSmall, _types.Size.XSmall, _types.Size.XXSmall].includes(size) ? _types.Size.Small : size == _types.Size.Large ? _types.Size.Large : _types.Size.Medium
         }, rest), {}, {
           children: buttonText

package/dist/Tile/TileCommonItems.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileCommonItems.cjs","names":["_Button","require","_Toggles","_Dropdown","_react","_interopRequireDefault","_styledComponents","_styles","_HyperLink","_types","_jsxRuntime","_excluded","_excluded2","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","TileNoteText","exports","styled","div","TileNoteIcon","TileNoteWrapper","props","COLORS","generateToken","componentType","defaultVariant","theme","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","jsx","IconButton","variant","useTransparentBackground","shape","action","tooltip","disabled","children","icon","ToggleButton","active","onChange","defaultState","activeState","DropdownButton","type","items","itemsType","onClick","value","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","label","keepLabel","jsxs","className","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","_objectWithoutProperties2","HyperLink","buttonText","Button","XSmall","XXSmall","includes","Small","Medium"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\r\n  TileDropdownButton,\r\n  TileHyperLink,\r\n  TileIconButton,\r\n  TileNote,\r\n  TileStandardButton, TileTextDropdownButton,\r\n  TileToggleButton\r\n} from './TileTypes';\r\nimport {Button, IconButton} from '../Button';\r\nimport {ToggleButton} from '../Toggles';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS, ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {HyperLink} from '../HyperLink';\r\nimport {Size} from '../types';\r\n\r\n\r\nexport const TileNoteText = styled.div``;\r\nexport const TileNoteIcon = styled.div`display: flex;`;\r\nexport const TileNoteWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n\r\n  &.small {\r\n    gap: 4px;\r\n\r\n    ${TileNoteIcon} {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n\r\n    ${TileNoteText} {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    gap: 6px;\r\n\r\n    ${TileNoteIcon} {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n\r\n    ${TileNoteText} {\r\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n  }\r\n\r\n  &.large {\r\n    gap: 8px;\r\n\r\n    ${TileNoteIcon} {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n\r\n    ${TileNoteText} {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport const TileHyperLinkIcon = styled.div`display: flex`;\r\nexport const TileHyperLinkText = styled.div``;\r\n\r\nexport const TileHyperLinkWrapper = styled.div`\r\n  width: max-content;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme))}\r\n  a {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    gap: 4px;\r\n  }\r\n\r\n  &.small {\r\n    ${TileHyperLinkIcon} {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n\r\n    ${TileHyperLinkText} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n    a {\r\n      gap: 4px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${TileHyperLinkIcon} {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n\r\n    ${TileHyperLinkText} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n    a {\r\n      gap: 6px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${TileHyperLinkIcon} {\r\n      width: 28px;\r\n      height: 28px;\r\n    }\r\n\r\n    ${TileHyperLinkText} {\r\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n    a {\r\n      gap: 8px;\r\n    }\r\n  }\r\n`\r\n\r\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileTextDropdownButton | TileStandardButton | TileNote | TileHyperLink,\r\n                               size: Size,\r\n                               key: any | undefined = undefined) => {\r\n  switch (item.componentType) {\r\n    case 'icon': {\r\n      return <IconButton key={key}\r\n                         variant={item.variant ?? 'secondary'}\r\n                         useTransparentBackground={item.variant == 'secondary' ? true : false}\r\n                         shape={item.shape ?? 'circular'}\r\n                         action={item.action}\r\n                         tooltip={item.tooltip}\r\n                         disabled={item.disabled}>\r\n        {item.icon}\r\n      </IconButton>\r\n    }\r\n    case 'toggle': {\r\n      return <ToggleButton key={key}\r\n                           active={item.active}\r\n                           onChange={item.onChange}\r\n                           defaultState={item.defaultState}\r\n                           activeState={item.activeState}\r\n                           disabled={item.disabled}/>\r\n    }\r\n    case 'dropdown': {\r\n      return <DropdownButton key={key}\r\n                             type={'icon'}\r\n                             items={item.items}\r\n                             itemsType={item.itemsType}\r\n                             onClick={item.onClick}\r\n                             value={item.value}\r\n                             icon={item.icon}\r\n                             tooltip={item.tooltip}\r\n                             action={item.action}\r\n                             actionIcon={item.actionIcon}\r\n                             actionLabel={item.actionLabel}\r\n                             actionVariant={item.actionVariant}\r\n                             actionLoading={item.actionLoading}\r\n                             multiSelect={item.multiSelect}\r\n                             scrollable={item.scrollable}\r\n                             pinTopItem={item.pinTopItem}\r\n                             maxHeight={item.maxHeight}\r\n                             disabled={item.disabled}/>\r\n\r\n    }\r\n    case 'text-dropdown': {\r\n      return <DropdownButton key={key}\r\n                             type={'text'}\r\n                             items={item.items}\r\n                             itemsType={item.itemsType}\r\n                             onClick={item.onClick}\r\n                             value={item.value}\r\n                             label={item.label}\r\n                             keepLabel={item.keepLabel}\r\n                             action={item.action}\r\n                             actionIcon={item.actionIcon}\r\n                             actionLabel={item.actionLabel}\r\n                             actionVariant={item.actionVariant}\r\n                             actionLoading={item.actionLoading}\r\n                             multiSelect={item.multiSelect}\r\n                             scrollable={item.scrollable}\r\n                             pinTopItem={item.pinTopItem}\r\n                             maxHeight={item.maxHeight}\r\n                             disabled={item.disabled}/>\r\n\r\n    }\r\n    case 'note': {\r\n      return (\r\n        <TileNoteWrapper key={key} className={size}>\r\n          {\r\n            item.noteIcon &&\r\n            <TileNoteIcon>\r\n              {React.cloneElement(item.noteIcon as React.ReactElement<any>, {size: size === Size.Large ? '20px' : '16'})}\r\n            </TileNoteIcon>\r\n          }\r\n          <TileNoteText>{item.noteText}</TileNoteText>\r\n        </TileNoteWrapper>\r\n      );\r\n\r\n    }\r\n    case 'link': {\r\n      const {linkText, componentType, linkIcon, ...rest} = item;\r\n      return (\r\n        <TileHyperLinkWrapper className={size} key={key}>\r\n          <HyperLink {...rest}>\r\n            <TileHyperLinkText>{linkText}</TileHyperLinkText>\r\n            {\r\n              linkIcon &&\r\n              <TileHyperLinkIcon>\r\n                {React.cloneElement(linkIcon as React.ReactElement<any>, {size: size === Size.Large ? '28px' : '24px'})}\r\n              </TileHyperLinkIcon>\r\n            }\r\n          </HyperLink>\r\n        </TileHyperLinkWrapper>\r\n      );\r\n    }\r\n    case 'button': {\r\n      const {buttonText, componentType, ...rest} = item;\r\n      return <Button key={key}\r\n                     size={[Size.XSmall, Size.XSmall, Size.XXSmall].includes(size) ? Size.Small: \r\n                      size == Size.Large ? Size.Large : Size.Medium}\r\n                     {...rest}>\r\n        {buttonText}\r\n      </Button>\r\n    }\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;AAQA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAQA,IAAAO,UAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AAA8B,IAAAS,WAAA,GAAAT,OAAA;AAAA,MAAAU,SAAA;EAAAC,UAAA;AAAA,SAAAC,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAJ,CAAA,OAAAG,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAL,CAAA,GAAAC,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAR,CAAA,EAAAC,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAZ,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAI,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,QAAAe,gBAAA,CAAAC,OAAA,EAAAjB,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAe,yBAAA,GAAAf,MAAA,CAAAgB,gBAAA,CAAAnB,CAAA,EAAAG,MAAA,CAAAe,yBAAA,CAAAhB,CAAA,KAAAH,OAAA,CAAAI,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAiB,cAAA,CAAApB,CAAA,EAAAC,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAGvB,MAAMqB,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AACjC,MAAMC,YAAY,GAAAH,OAAA,CAAAG,YAAA,GAAGF,yBAAM,CAACC,GAAG,gBAAgB;AAC/C,MAAME,eAAe,GAAAJ,OAAA,CAAAI,eAAA,GAAGH,yBAAM,CAACC,GAAG;AACzC;AACA;AACA;AACA,WAAWG,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACrG;AACA;AACA;AACA;AACA,MAAMP,YAAY;AAClB;AACA;AACA;AACA;AACA,MAAMJ,YAAY;AAClB,QAAQ,IAAAY,2BAAmB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,MAAMV,YAAY;AAClB;AACA;AACA;AACA;AACA,MAAMJ,YAAY;AAClB,QAAQ,IAAAe,0BAAkB,EAACF,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMV,YAAY;AAClB;AACA;AACA;AACA;AACA,MAAMJ,YAAY;AAClB,QAAQ,IAAAgB,yBAAiB,EAACH,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC;AAC3D;AACA;AACA,CAAC;AAGM,MAAMG,iBAAiB,GAAAhB,OAAA,CAAAgB,iBAAA,GAAGf,yBAAM,CAACC,GAAG,eAAe;AACnD,MAAMe,iBAAiB,GAAAjB,OAAA,CAAAiB,iBAAA,GAAGhB,yBAAM,CAACC,GAAG,EAAE;AAEtC,MAAMgB,oBAAoB,GAAAlB,OAAA,CAAAkB,oBAAA,GAAGjB,yBAAM,CAACC,GAAG;AAC9C;AACA;AACA,IAAIG,KAAK,IAAI,IAAAU,yBAAiB,EAACH,0BAAkB,CAACO,IAAI,EAAEb,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,WAAW;EAAEC,cAAc,EAAE;AAAU,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACnJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMM,iBAAiB;AACvB;AACA;AACA;AACA;AACA,MAAMC,iBAAiB;AACvB,QAAQ,IAAAF,yBAAiB,EAACH,0BAAkB,CAACO,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMH,iBAAiB;AACvB;AACA;AACA;AACA;AACA,MAAMC,iBAAiB;AACvB,QAAQ,IAAAG,yBAAiB,EAACR,0BAAkB,CAACO,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMH,iBAAiB;AACvB;AACA;AACA;AACA;AACA,MAAMC,iBAAiB;AACvB,QAAQ,IAAAI,yBAAiB,EAACT,0BAAkB,CAACO,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMG,cAAc,GAAG,SAAAA,CAACC,IAAqI,EACrIC,IAAU,EAC2B;EAAA,IAArCC,GAAoB,GAAAlC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAmC,SAAA,GAAAnC,SAAA,MAAGmC,SAAS;EAC7D,QAAQH,IAAI,CAACf,aAAa;IACxB,KAAK,MAAM;MAAE;QACX,oBAAO,IAAAlC,WAAA,CAAAqD,GAAA,EAAC/D,OAAA,CAAAgE,UAAU;UACCC,OAAO,EAAEN,IAAI,CAACM,OAAO,IAAI,WAAY;UACrCC,wBAAwB,EAAEP,IAAI,CAACM,OAAO,IAAI,WAAW,GAAG,IAAI,GAAG,KAAM;UACrEE,KAAK,EAAER,IAAI,CAACQ,KAAK,IAAI,UAAW;UAChCC,MAAM,EAAET,IAAI,CAACS,MAAO;UACpBC,OAAO,EAAEV,IAAI,CAACU,OAAQ;UACtBC,QAAQ,EAAEX,IAAI,CAACW,QAAS;UAAAC,QAAA,EACxCZ,IAAI,CAACa;QAAI,GAPYX,GAQZ,CAAC;MACf;IACA,KAAK,QAAQ;MAAE;QACb,oBAAO,IAAAnD,WAAA,CAAAqD,GAAA,EAAC7D,QAAA,CAAAuE,YAAY;UACCC,MAAM,EAAEf,IAAI,CAACe,MAAO;UACpBC,QAAQ,EAAEhB,IAAI,CAACgB,QAAS;UACxBC,YAAY,EAAEjB,IAAI,CAACiB,YAAa;UAChCC,WAAW,EAAElB,IAAI,CAACkB,WAAY;UAC9BP,QAAQ,EAAEX,IAAI,CAACW;QAAS,GALnBT,GAKoB,CAAC;MACjD;IACA,KAAK,UAAU;MAAE;QACf,oBAAO,IAAAnD,WAAA,CAAAqD,GAAA,EAAC5D,SAAA,CAAA2E,cAAc;UACCC,IAAI,EAAE,MAAO;UACbC,KAAK,EAAErB,IAAI,CAACqB,KAAM;UAClBC,SAAS,EAAEtB,IAAI,CAACsB,SAAU;UAC1BC,OAAO,EAAEvB,IAAI,CAACuB,OAAQ;UACtBC,KAAK,EAAExB,IAAI,CAACwB,KAAM;UAClBX,IAAI,EAAEb,IAAI,CAACa,IAAK;UAChBH,OAAO,EAAEV,IAAI,CAACU,OAAQ;UACtBD,MAAM,EAAET,IAAI,CAACS,MAAO;UACpBgB,UAAU,EAAEzB,IAAI,CAACyB,UAAW;UAC5BC,WAAW,EAAE1B,IAAI,CAAC0B,WAAY;UAC9BC,aAAa,EAAE3B,IAAI,CAAC2B,aAAc;UAClCC,aAAa,EAAE5B,IAAI,CAAC4B,aAAc;UAClCC,WAAW,EAAE7B,IAAI,CAAC6B,WAAY;UAC9BC,UAAU,EAAE9B,IAAI,CAAC8B,UAAW;UAC5BC,UAAU,EAAE/B,IAAI,CAAC+B,UAAW;UAC5BC,SAAS,EAAEhC,IAAI,CAACgC,SAAU;UAC1BrB,QAAQ,EAAEX,IAAI,CAACW;QAAS,GAjBnBT,GAiBoB,CAAC;MAEnD;IACA,KAAK,eAAe;MAAE;QACpB,oBAAO,IAAAnD,WAAA,CAAAqD,GAAA,EAAC5D,SAAA,CAAA2E,cAAc;UACCC,IAAI,EAAE,MAAO;UACbC,KAAK,EAAErB,IAAI,CAACqB,KAAM;UAClBC,SAAS,EAAEtB,IAAI,CAACsB,SAAU;UAC1BC,OAAO,EAAEvB,IAAI,CAACuB,OAAQ;UACtBC,KAAK,EAAExB,IAAI,CAACwB,KAAM;UAClBS,KAAK,EAAEjC,IAAI,CAACiC,KAAM;UAClBC,SAAS,EAAElC,IAAI,CAACkC,SAAU;UAC1BzB,MAAM,EAAET,IAAI,CAACS,MAAO;UACpBgB,UAAU,EAAEzB,IAAI,CAACyB,UAAW;UAC5BC,WAAW,EAAE1B,IAAI,CAAC0B,WAAY;UAC9BC,aAAa,EAAE3B,IAAI,CAAC2B,aAAc;UAClCC,aAAa,EAAE5B,IAAI,CAAC4B,aAAc;UAClCC,WAAW,EAAE7B,IAAI,CAAC6B,WAAY;UAC9BC,UAAU,EAAE9B,IAAI,CAAC8B,UAAW;UAC5BC,UAAU,EAAE/B,IAAI,CAAC+B,UAAW;UAC5BC,SAAS,EAAEhC,IAAI,CAACgC,SAAU;UAC1BrB,QAAQ,EAAEX,IAAI,CAACW;QAAS,GAjBnBT,GAiBoB,CAAC;MAEnD;IACA,KAAK,MAAM;MAAE;QACX,oBACE,IAAAnD,WAAA,CAAAoF,IAAA,EAACtD,eAAe;UAAWuD,SAAS,EAAEnC,IAAK;UAAAW,QAAA,GAEvCZ,IAAI,CAACqC,QAAQ,iBACb,IAAAtF,WAAA,CAAAqD,GAAA,EAACxB,YAAY;YAAAgC,QAAA,eACV0B,cAAK,CAACC,YAAY,CAACvC,IAAI,CAACqC,QAAQ,EAA6B;cAACpC,IAAI,EAAEA,IAAI,KAAKuC,WAAI,CAACC,KAAK,GAAG,MAAM,GAAG;YAAI,CAAC;UAAC,CAC9F,CAAC,eAEjB,IAAA1F,WAAA,CAAAqD,GAAA,EAAC5B,YAAY;YAAAoC,QAAA,EAAEZ,IAAI,CAAC0C;UAAQ,CAAe,CAAC;QAAA,GAPxBxC,GAQL,CAAC;MAGtB;IACA,KAAK,MAAM;MAAE;QACX,MAAM;YAACyC,QAAQ;YAAE1D,aAAa;YAAE2D;UAAiB,CAAC,GAAG5C,IAAI;UAAZ6C,IAAI,OAAAC,yBAAA,CAAA1E,OAAA,EAAI4B,IAAI,EAAAhD,SAAA;QACzD,oBACE,IAAAD,WAAA,CAAAqD,GAAA,EAACT,oBAAoB;UAACyC,SAAS,EAAEnC,IAAK;UAAAW,QAAA,eACpC,IAAA7D,WAAA,CAAAoF,IAAA,EAACtF,UAAA,CAAAkG,SAAS,EAAAhF,aAAA,CAAAA,aAAA,KAAK8E,IAAI;YAAAjC,QAAA,gBACjB,IAAA7D,WAAA,CAAAqD,GAAA,EAACV,iBAAiB;cAAAkB,QAAA,EAAE+B;YAAQ,CAAoB,CAAC,EAE/CC,QAAQ,iBACR,IAAA7F,WAAA,CAAAqD,GAAA,EAACX,iBAAiB;cAAAmB,QAAA,eACf0B,cAAK,CAACC,YAAY,CAACK,QAAQ,EAA6B;gBAAC3C,IAAI,EAAEA,IAAI,KAAKuC,WAAI,CAACC,KAAK,GAAG,MAAM,GAAG;cAAM,CAAC;YAAC,CACtF,CAAC;UAAA,EAEb;QAAC,GAT8BvC,GAUtB,CAAC;MAE3B;IACA,KAAK,QAAQ;MAAE;QACb,MAAM;YAAC8C,UAAU;YAAE/D;UAAsB,CAAC,GAAGe,IAAI;UAAZ6C,IAAI,OAAAC,yBAAA,CAAA1E,OAAA,EAAI4B,IAAI,EAAA/C,UAAA;QACjD,oBAAO,IAAAF,WAAA,CAAAqD,GAAA,EAAC/D,OAAA,CAAA4G,MAAM,EAAAlF,aAAA,CAAAA,aAAA;UACCkC,IAAI,EAAE,CAACuC,WAAI,CAACU,MAAM,EAAEV,WAAI,CAACU,MAAM,EAAEV,WAAI,CAACW,OAAO,CAAC,CAACC,QAAQ,CAACnD,IAAI,CAAC,GAAGuC,WAAI,CAACa,KAAK,GACzEpD,IAAI,IAAIuC,WAAI,CAACC,KAAK,GAAGD,WAAI,CAACC,KAAK,GAAGD,WAAI,CAACc;QAAO,GAC3CT,IAAI;UAAAjC,QAAA,EACpBoC;QAAU,IAJO9C,GAKZ,CAAC;MACX;EACF;AACF,CAAC;AAAAzB,OAAA,CAAAsB,cAAA,GAAAA,cAAA","ignoreList":[]}
+{"version":3,"file":"TileCommonItems.cjs","names":["_Button","require","_Toggles","_Dropdown","_react","_interopRequireDefault","_styledComponents","_styles","_HyperLink","_types","_jsxRuntime","_excluded","_excluded2","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","TileNoteText","exports","styled","div","TileNoteIcon","TileNoteWrapper","props","COLORS","generateToken","componentType","defaultVariant","theme","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","jsx","IconButton","variant","useTransparentBackground","shape","action","tooltip","disabled","children","icon","ToggleButton","active","onChange","defaultState","activeState","DropdownButton","type","items","itemsType","onClick","value","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","label","keepLabel","jsxs","className","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","_objectWithoutProperties2","HyperLink","buttonText","TextButton","XSmall","XXSmall","includes","Small","Medium"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\r\n  TileDropdownButton,\r\n  TileHyperLink,\r\n  TileIconButton,\r\n  TileNote,\r\n  TileStandardButton, TileTextDropdownButton,\r\n  TileToggleButton\r\n} from './TileTypes';\r\nimport {TextButton, IconButton} from '../Button';\r\nimport {ToggleButton} from '../Toggles';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS, ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {HyperLink} from '../HyperLink';\r\nimport {Size} from '../types';\r\n\r\n\r\nexport const TileNoteText = styled.div``;\r\nexport const TileNoteIcon = styled.div`display: flex;`;\r\nexport const TileNoteWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n\r\n  &.small {\r\n    gap: 4px;\r\n\r\n    ${TileNoteIcon} {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n\r\n    ${TileNoteText} {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    gap: 6px;\r\n\r\n    ${TileNoteIcon} {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n\r\n    ${TileNoteText} {\r\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n  }\r\n\r\n  &.large {\r\n    gap: 8px;\r\n\r\n    ${TileNoteIcon} {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n\r\n    ${TileNoteText} {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport const TileHyperLinkIcon = styled.div`display: flex`;\r\nexport const TileHyperLinkText = styled.div``;\r\n\r\nexport const TileHyperLinkWrapper = styled.div`\r\n  width: max-content;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme))}\r\n  a {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    gap: 4px;\r\n  }\r\n\r\n  &.small {\r\n    ${TileHyperLinkIcon} {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n\r\n    ${TileHyperLinkText} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n    a {\r\n      gap: 4px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${TileHyperLinkIcon} {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n\r\n    ${TileHyperLinkText} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n    a {\r\n      gap: 6px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${TileHyperLinkIcon} {\r\n      width: 28px;\r\n      height: 28px;\r\n    }\r\n\r\n    ${TileHyperLinkText} {\r\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n    a {\r\n      gap: 8px;\r\n    }\r\n  }\r\n`\r\n\r\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileTextDropdownButton | TileStandardButton | TileNote | TileHyperLink,\r\n                               size: Size,\r\n                               key: any | undefined = undefined) => {\r\n  switch (item.componentType) {\r\n    case 'icon': {\r\n      return <IconButton key={key}\r\n                         variant={item.variant ?? 'secondary'}\r\n                         useTransparentBackground={item.variant == 'secondary' ? true : false}\r\n                         shape={item.shape ?? 'circular'}\r\n                         action={item.action}\r\n                         tooltip={item.tooltip}\r\n                         disabled={item.disabled}>\r\n        {item.icon}\r\n      </IconButton>\r\n    }\r\n    case 'toggle': {\r\n      return <ToggleButton key={key}\r\n                           active={item.active}\r\n                           onChange={item.onChange}\r\n                           defaultState={item.defaultState}\r\n                           activeState={item.activeState}\r\n                           disabled={item.disabled}/>\r\n    }\r\n    case 'dropdown': {\r\n      return <DropdownButton key={key}\r\n                             type={'icon'}\r\n                             items={item.items}\r\n                             itemsType={item.itemsType}\r\n                             onClick={item.onClick}\r\n                             value={item.value}\r\n                             icon={item.icon}\r\n                             tooltip={item.tooltip}\r\n                             action={item.action}\r\n                             actionIcon={item.actionIcon}\r\n                             actionLabel={item.actionLabel}\r\n                             actionVariant={item.actionVariant}\r\n                             actionLoading={item.actionLoading}\r\n                             multiSelect={item.multiSelect}\r\n                             scrollable={item.scrollable}\r\n                             pinTopItem={item.pinTopItem}\r\n                             maxHeight={item.maxHeight}\r\n                             disabled={item.disabled}/>\r\n\r\n    }\r\n    case 'text-dropdown': {\r\n      return <DropdownButton key={key}\r\n                             type={'text'}\r\n                             items={item.items}\r\n                             itemsType={item.itemsType}\r\n                             onClick={item.onClick}\r\n                             value={item.value}\r\n                             label={item.label}\r\n                             keepLabel={item.keepLabel}\r\n                             action={item.action}\r\n                             actionIcon={item.actionIcon}\r\n                             actionLabel={item.actionLabel}\r\n                             actionVariant={item.actionVariant}\r\n                             actionLoading={item.actionLoading}\r\n                             multiSelect={item.multiSelect}\r\n                             scrollable={item.scrollable}\r\n                             pinTopItem={item.pinTopItem}\r\n                             maxHeight={item.maxHeight}\r\n                             disabled={item.disabled}/>\r\n\r\n    }\r\n    case 'note': {\r\n      return (\r\n        <TileNoteWrapper key={key} className={size}>\r\n          {\r\n            item.noteIcon &&\r\n            <TileNoteIcon>\r\n              {React.cloneElement(item.noteIcon as React.ReactElement<any>, {size: size === Size.Large ? '20px' : '16'})}\r\n            </TileNoteIcon>\r\n          }\r\n          <TileNoteText>{item.noteText}</TileNoteText>\r\n        </TileNoteWrapper>\r\n      );\r\n\r\n    }\r\n    case 'link': {\r\n      const {linkText, componentType, linkIcon, ...rest} = item;\r\n      return (\r\n        <TileHyperLinkWrapper className={size} key={key}>\r\n          <HyperLink {...rest}>\r\n            <TileHyperLinkText>{linkText}</TileHyperLinkText>\r\n            {\r\n              linkIcon &&\r\n              <TileHyperLinkIcon>\r\n                {React.cloneElement(linkIcon as React.ReactElement<any>, {size: size === Size.Large ? '28px' : '24px'})}\r\n              </TileHyperLinkIcon>\r\n            }\r\n          </HyperLink>\r\n        </TileHyperLinkWrapper>\r\n      );\r\n    }\r\n    case 'button': {\r\n      const {buttonText, componentType, ...rest} = item;\r\n      return <TextButton key={key}\r\n                     size={[Size.XSmall, Size.XSmall, Size.XXSmall].includes(size) ? Size.Small: \r\n                      size == Size.Large ? Size.Large : Size.Medium}\r\n                     {...rest}>\r\n        {buttonText}\r\n      </TextButton>\r\n    }\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tile/TileCommonItems.js

@@ -4,7 +4,7 @@ const _excluded = ["linkText", "componentType", "linkIcon"],
   _excluded2 = ["buttonText", "componentType"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { Button, IconButton } from '../Button';
+import { TextButton, IconButton } from '../Button';
 import { ToggleButton } from '../Toggles';
 import { DropdownButton } from '../Dropdown';
 import React from 'react';
@@ -235,7 +235,7 @@ export const RenderTileItem = function (item, size) {
             componentType
           } = item,
           rest = _objectWithoutProperties(item, _excluded2);
-        return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        return /*#__PURE__*/_jsx(TextButton, _objectSpread(_objectSpread({
           size: [Size.XSmall, Size.XSmall, Size.XXSmall].includes(size) ? Size.Small : size == Size.Large ? Size.Large : Size.Medium
         }, rest), {}, {
           children: buttonText