@laerdal/life-react-components 6.0.0-dev.2.full → 6.0.0-dev.20.full

package/dist/Tabs/VerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.js","names":["React","Tabs","TabLink","Size","jsx","_jsx","VerticalTabs","_ref","size","entries","Large","children","map","entry","href","to","requiredLine","optionalLine","endLineIcon","OptionalLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","onLinkClick","e","onClick","propTypes","_pt","arrayOf","shape","string","isRequired","node","bool","func","oneOf"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Tabs from './Tabs';\r\nimport TabLink from './TabLink';\r\nimport { BaseProps } from '../icons';\r\nimport { Size } from '../types';\r\n\r\nexport interface VerticalTabEntry {\r\n  /**\r\n   * Required. The main text to be displayed on the tab.\r\n   */\r\n  requiredLine: string;\r\n\r\n  /**\r\n   * Optional. The secondary text to be displayed on the tab link under the required line.\r\n   */\r\n  optionalLine?: string;\r\n\r\n  /**\r\n   * Optional. The icon to be displayed next to the secondary text on the tab link under the required line.\r\n   */\r\n  optionalLineIcon?: React.ReactNode;\r\n\r\n  /**\r\n   * Optional. The icon to be displayed at the end of the tab.\r\n   */\r\n  endLineIcon?: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The URL to which the tab links.\r\n   */\r\n  to: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the tab is disabled.\r\n   * If true, the tab will be unclickable and will have a disabled appearance.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The handler function to be called when the tab is clicked.\r\n   */\r\n  onClick?: (e: React.MouseEvent) => void;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether a notification dot should be shown on the tab.\r\n   */\r\n  showNotificationDot?: boolean;\r\n\r\n  /**\r\n   * Optional. The variant of the notification dot. It can be 'critical' or 'positive'. Defaults to 'Critical'\r\n   */\r\n  variant?: 'critical' | 'positive';\r\n}\r\n\r\nexport interface VerticalTabsProps {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  entries: VerticalTabEntry[];\r\n}\r\n\r\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\r\n  return (\r\n    <Tabs size={size ?? Size.Large}>\r\n      {entries?.map((entry: VerticalTabEntry) => (\r\n        <TabLink\r\n          key={entry.to}\r\n          href={entry.to}\r\n          requiredLine={entry.requiredLine}\r\n          optionalLine={entry.optionalLine}\r\n          endLineIcon={entry.endLineIcon}\r\n          OptionalLineIcon={entry.optionalLineIcon}\r\n          disabled={entry.disabled}\r\n          showNotificationDot={entry.showNotificationDot}\r\n          size={size}\r\n          variant={entry.variant}\r\n          onLinkClick={(e) => {\r\n            if (entry.onClick) {\r\n              entry.onClick(e);\r\n            }\r\n          }}/>\r\n      ))}\r\n    </Tabs>\r\n  );\r\n};\r\n\r\nexport default VerticalTabs;\r\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,OAAO,MAAM,WAAW;AAE/B,SAASC,IAAI,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAuDhC,MAAMC,YAAY,GAAGC,IAAA,IAA0C;EAAA,IAAzC;IAAEC,IAAI;IAAEC;EAA2B,CAAC,GAAAF,IAAA;EACxD,oBACEF,IAAA,CAACJ,IAAI;IAACO,IAAI,EAAEA,IAAI,IAAIL,IAAI,CAACO,KAAM;IAAAC,QAAA,EAC5BF,OAAO,EAAEG,GAAG,CAAEC,KAAuB,iBACpCR,IAAA,CAACH,OAAO;MAENY,IAAI,EAAED,KAAK,CAACE,EAAG;MACfC,YAAY,EAAEH,KAAK,CAACG,YAAa;MACjCC,YAAY,EAAEJ,KAAK,CAACI,YAAa;MACjCC,WAAW,EAAEL,KAAK,CAACK,WAAY;MAC/BC,gBAAgB,EAAEN,KAAK,CAACO,gBAAiB;MACzCC,QAAQ,EAAER,KAAK,CAACQ,QAAS;MACzBC,mBAAmB,EAAET,KAAK,CAACS,mBAAoB;MAC/Cd,IAAI,EAAEA,IAAK;MACXe,OAAO,EAAEV,KAAK,CAACU,OAAQ;MACvBC,WAAW,EAAGC,CAAC,IAAK;QAClB,IAAIZ,KAAK,CAACa,OAAO,EAAE;UACjBb,KAAK,CAACa,OAAO,CAACD,CAAC,CAAC;QAClB;MACF;IAAE,GAdGZ,KAAK,CAACE,EAcR,CACN;EAAC,CACE,CAAC;AAEX,CAAC;AAACT,YAAA,CAAAqB,SAAA;EA1BAlB,OAAO,EAAAmB,GAAA,CAAAC,OAAA,CAAAD,GAAA,CAAAE,KAAA;IA9CPd,YAAY,EAAAY,GAAA,CAAAG,MAAA,CAAAC,UAAA;IAKZf,YAAY,EAAAW,GAAA,CAAAG,MAAA;IAKZX,gBAAgB,EAAAQ,GAAA,CAAAK,IAAA;IAKhBf,WAAW,EAAAU,GAAA,CAAAK,IAAA;IAKXlB,EAAE,EAAAa,GAAA,CAAAG,MAAA,CAAAC,UAAA;IAMFX,QAAQ,EAAAO,GAAA,CAAAM,IAAA;IAKRR,OAAO,EAAAE,GAAA,CAAAO,IAAA;IAKPb,mBAAmB,EAAAM,GAAA,CAAAM,IAAA;IAKnBX,OAAO,EAAAK,GAAA,CAAAQ,KAAA,EAAG,UAAU,EAAG,UAAU;EAAA,IAAAJ;AAAA;AAiCnC,eAAe1B,YAAY","ignoreList":[]}
+{"version":3,"file":"VerticalTabs.js","names":["React","Tabs","TabLink","Size","jsx","_jsx","VerticalTabs","_ref","size","entries","Large","children","map","entry","href","to","requiredLine","optionalLine","endLineIcon","OptionalLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","onLinkClick","e","onClick","preventDefault","propTypes","_pt","arrayOf","shape","string","isRequired","node","bool","func","oneOf"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Tabs from './Tabs';\r\nimport TabLink from './TabLink';\r\nimport { BaseProps } from '../icons';\r\nimport { Size } from '../types';\r\n\r\nexport interface VerticalTabEntry {\r\n  /**\r\n   * Required. The main text to be displayed on the tab.\r\n   */\r\n  requiredLine: string;\r\n\r\n  /**\r\n   * Optional. The secondary text to be displayed on the tab link under the required line.\r\n   */\r\n  optionalLine?: string;\r\n\r\n  /**\r\n   * Optional. The icon to be displayed next to the secondary text on the tab link under the required line.\r\n   */\r\n  optionalLineIcon?: React.ReactNode;\r\n\r\n  /**\r\n   * Optional. The icon to be displayed at the end of the tab.\r\n   */\r\n  endLineIcon?: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The URL to which the tab links.\r\n   */\r\n  to: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the tab is disabled.\r\n   * If true, the tab will be unclickable and will have a disabled appearance.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The handler function to be called when the tab is clicked.\r\n   */\r\n  onClick?: (e: React.MouseEvent) => void;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether a notification dot should be shown on the tab.\r\n   */\r\n  showNotificationDot?: boolean;\r\n\r\n  /**\r\n   * Optional. The variant of the notification dot. It can be 'critical' or 'positive'. Defaults to 'Critical'\r\n   */\r\n  variant?: 'critical' | 'positive';\r\n}\r\n\r\nexport interface VerticalTabsProps {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  entries: VerticalTabEntry[];\r\n}\r\n\r\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\r\n  return (\r\n    <Tabs size={size ?? Size.Large}>\r\n      {entries?.map((entry: VerticalTabEntry) => (\r\n        <TabLink\r\n          key={entry.to}\r\n          href={entry.to}\r\n          requiredLine={entry.requiredLine}\r\n          optionalLine={entry.optionalLine}\r\n          endLineIcon={entry.endLineIcon}\r\n          OptionalLineIcon={entry.optionalLineIcon}\r\n          disabled={entry.disabled}\r\n          showNotificationDot={entry.showNotificationDot}\r\n          size={size}\r\n          variant={entry.variant}\r\n          onLinkClick={(e) => {\r\n            if (entry.onClick) {\r\n              entry.onClick(e);\r\n              e.preventDefault && e.preventDefault();\r\n            }\r\n          }}/>\r\n      ))}\r\n    </Tabs>\r\n  );\r\n};\r\n\r\nexport default VerticalTabs;\r\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,OAAO,MAAM,WAAW;AAE/B,SAASC,IAAI,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAuDhC,MAAMC,YAAY,GAAGC,IAAA,IAA0C;EAAA,IAAzC;IAAEC,IAAI;IAAEC;EAA2B,CAAC,GAAAF,IAAA;EACxD,oBACEF,IAAA,CAACJ,IAAI;IAACO,IAAI,EAAEA,IAAI,IAAIL,IAAI,CAACO,KAAM;IAAAC,QAAA,EAC5BF,OAAO,EAAEG,GAAG,CAAEC,KAAuB,iBACpCR,IAAA,CAACH,OAAO;MAENY,IAAI,EAAED,KAAK,CAACE,EAAG;MACfC,YAAY,EAAEH,KAAK,CAACG,YAAa;MACjCC,YAAY,EAAEJ,KAAK,CAACI,YAAa;MACjCC,WAAW,EAAEL,KAAK,CAACK,WAAY;MAC/BC,gBAAgB,EAAEN,KAAK,CAACO,gBAAiB;MACzCC,QAAQ,EAAER,KAAK,CAACQ,QAAS;MACzBC,mBAAmB,EAAET,KAAK,CAACS,mBAAoB;MAC/Cd,IAAI,EAAEA,IAAK;MACXe,OAAO,EAAEV,KAAK,CAACU,OAAQ;MACvBC,WAAW,EAAGC,CAAC,IAAK;QAClB,IAAIZ,KAAK,CAACa,OAAO,EAAE;UACjBb,KAAK,CAACa,OAAO,CAACD,CAAC,CAAC;UAChBA,CAAC,CAACE,cAAc,IAAIF,CAAC,CAACE,cAAc,CAAC,CAAC;QACxC;MACF;IAAE,GAfGd,KAAK,CAACE,EAeR,CACN;EAAC,CACE,CAAC;AAEX,CAAC;AAACT,YAAA,CAAAsB,SAAA;EA3BAnB,OAAO,EAAAoB,GAAA,CAAAC,OAAA,CAAAD,GAAA,CAAAE,KAAA;IA9CPf,YAAY,EAAAa,GAAA,CAAAG,MAAA,CAAAC,UAAA;IAKZhB,YAAY,EAAAY,GAAA,CAAAG,MAAA;IAKZZ,gBAAgB,EAAAS,GAAA,CAAAK,IAAA;IAKhBhB,WAAW,EAAAW,GAAA,CAAAK,IAAA;IAKXnB,EAAE,EAAAc,GAAA,CAAAG,MAAA,CAAAC,UAAA;IAMFZ,QAAQ,EAAAQ,GAAA,CAAAM,IAAA;IAKRT,OAAO,EAAAG,GAAA,CAAAO,IAAA;IAKPd,mBAAmB,EAAAO,GAAA,CAAAM,IAAA;IAKnBZ,OAAO,EAAAM,GAAA,CAAAQ,KAAA,EAAG,UAAU,EAAG,UAAU;EAAA,IAAAJ;AAAA;AAkCnC,eAAe3B,YAAY","ignoreList":[]}

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__/TabLink.tests.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';

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/Tabs/__tests__/Tablist.tests.d.ts

@@ -0,0 +1,2 @@
+import 'jest-styled-components';
+import '@testing-library/jest-dom/extend-expect';

package/dist/Tag/Tag.cjs

@@ -34,8 +34,8 @@ const Container = _styledComponents.default.div`
     color: ${props => _.COLORS.getColor('neutral_600', props.theme)};
   }
   &.positive {
-    background-color: ${props => _.COLORS.getColor('correct_100', props.theme)};
-    color: ${props => _.COLORS.getColor('correct_600', props.theme)};
+    background-color: ${props => _.COLORS.getColor('positive_100', props.theme)};
+    color: ${props => _.COLORS.getColor('positive_600', props.theme)};
   }
   &.warning {
     background-color: ${props => _.COLORS.getColor('warning_100', 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('correct_100', props.theme)};\r\n    color: ${props => COLORS.getColor('correct_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","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":[]}

package/dist/Tag/Tag.js

@@ -25,8 +25,8 @@ const Container = styled.div`
     color: ${props => COLORS.getColor('neutral_600', props.theme)};
   }
   &.positive {
-    background-color: ${props => COLORS.getColor('correct_100', props.theme)};
-    color: ${props => COLORS.getColor('correct_600', props.theme)};
+    background-color: ${props => COLORS.getColor('positive_100', props.theme)};
+    color: ${props => COLORS.getColor('positive_600', props.theme)};
   }
   &.warning {
     background-color: ${props => COLORS.getColor('warning_100', 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('correct_100', props.theme)};\r\n    color: ${props => COLORS.getColor('correct_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","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":[]}

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/Tile.cjs

@@ -24,9 +24,15 @@ const Wrapper = _styledComponents.default.div`
   display: flex;
   flex-flow: column;
   flex-direction: column;
-  background: ${props => _styles.COLORS.getColor('white', props.theme)};
+  background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   border-radius: 8px;
-  border: 1px solid ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+  border: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   box-sizing: border-box;
 `;
 const Tile = _ref => {

package/dist/Tile/Tile.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.cjs","names":["_react","_interopRequireDefault","require","_types","_styledComponents","_TileHeader","_TileFooter","_TileBody","_styles","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","props","COLORS","getColor","theme","Tile","_ref","header","footer","size","Size","Medium","style","children","className","rest","_objectWithoutProperties2","jsxs","jsx","_default","exports"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport {TileProps} from './TileTypes';\r\nimport styled from 'styled-components';\r\nimport TileHeader from './TileHeader';\r\nimport TileFooter from './TileFooter';\r\nimport TileBody from './TileBody';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n  border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Tile: React.FunctionComponent<TileProps> = ({\r\n                                                    header,\r\n                                                    footer,\r\n                                                    size = Size.Medium,\r\n                                                    style,\r\n                                                    children,\r\n                                                    className,\r\n                                                    ...rest\r\n                                                  }) => {\r\n\r\n  return (\r\n    <Wrapper style={style}\r\n             className={`${size} ${className || ''}`}\r\n             {...rest}>\r\n      {header && <TileHeader {...header} size={size}/>}\r\n      <TileBody size={size}>\r\n        {children}\r\n      </TileBody>\r\n      {footer && <TileFooter {...footer} size={size}/>}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default Tile;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tile.cjs","names":["_react","_interopRequireDefault","require","_types","_styledComponents","_TileHeader","_TileFooter","_TileBody","_styles","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","Tile","_ref","header","footer","size","Size","Medium","style","children","className","rest","_objectWithoutProperties2","jsxs","jsx","_default","exports"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport {TileProps} from './TileTypes';\r\nimport styled from 'styled-components';\r\nimport TileHeader from './TileHeader';\r\nimport TileFooter from './TileFooter';\r\nimport TileBody from './TileBody';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n  border-radius: 8px;\r\n  border: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Tile: React.FunctionComponent<TileProps> = ({\r\n                                                    header,\r\n                                                    footer,\r\n                                                    size = Size.Medium,\r\n                                                    style,\r\n                                                    children,\r\n                                                    className,\r\n                                                    ...rest\r\n                                                  }) => {\r\n\r\n  return (\r\n    <Wrapper style={style}\r\n             className={`${size} ${className || ''}`}\r\n             {...rest}>\r\n      {header && <TileHeader {...header} size={size}/>}\r\n      <TileBody size={size}>\r\n        {children}\r\n      </TileBody>\r\n      {footer && <TileFooter {...footer} size={size}/>}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default Tile;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tile/Tile.js

@@ -17,9 +17,15 @@ const Wrapper = styled.div`
   display: flex;
   flex-flow: column;
   flex-direction: column;
-  background: ${props => COLORS.getColor('white', props.theme)};
+  background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   border-radius: 8px;
-  border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+  border: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   box-sizing: border-box;
 `;
 const Tile = _ref => {

package/dist/Tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","names":["React","Size","styled","TileHeader","TileFooter","TileBody","COLORS","jsx","_jsx","jsxs","_jsxs","Wrapper","div","props","getColor","theme","Tile","_ref","header","footer","size","Medium","style","children","className","rest","_objectWithoutProperties","_excluded","_objectSpread"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport {TileProps} from './TileTypes';\r\nimport styled from 'styled-components';\r\nimport TileHeader from './TileHeader';\r\nimport TileFooter from './TileFooter';\r\nimport TileBody from './TileBody';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n  border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Tile: React.FunctionComponent<TileProps> = ({\r\n                                                    header,\r\n                                                    footer,\r\n                                                    size = Size.Medium,\r\n                                                    style,\r\n                                                    children,\r\n                                                    className,\r\n                                                    ...rest\r\n                                                  }) => {\r\n\r\n  return (\r\n    <Wrapper style={style}\r\n             className={`${size} ${className || ''}`}\r\n             {...rest}>\r\n      {header && <TileHeader {...header} size={size}/>}\r\n      <TileBody size={size}>\r\n        {children}\r\n      </TileBody>\r\n      {footer && <TileFooter {...footer} size={size}/>}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default Tile;\r\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAE7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,QAAQ,MAAM,YAAY;AACjC,SAAQC,MAAM,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEjC,MAAMC,OAAO,GAAGT,MAAM,CAACU,GAAG;AAC1B;AACA;AACA;AACA;AACA;AACA,gBAAgBC,KAAK,IAAIP,MAAM,CAACQ,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAC9D;AACA,sBAAsBF,KAAK,IAAIP,MAAM,CAACQ,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC1E;AACA,CAAC;AAED,MAAMC,IAAwC,GAAGC,IAAA,IAQO;EAAA,IARN;MACEC,MAAM;MACNC,MAAM;MACNC,IAAI,GAAGnB,IAAI,CAACoB,MAAM;MAClBC,KAAK;MACLC,QAAQ;MACRC;IAEF,CAAC,GAAAP,IAAA;IADIQ,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAGzD,oBACEjB,KAAA,CAACC,OAAO,EAAAiB,aAAA,CAAAA,aAAA;IAACN,KAAK,EAAEA,KAAM;IACbE,SAAS,EAAE,GAAGJ,IAAI,IAAII,SAAS,IAAI,EAAE;EAAG,GACpCC,IAAI;IAAAF,QAAA,GACdL,MAAM,iBAAIV,IAAA,CAACL,UAAU,EAAAyB,aAAA,CAAAA,aAAA,KAAKV,MAAM;MAAEE,IAAI,EAAEA;IAAK,EAAC,CAAC,eAChDZ,IAAA,CAACH,QAAQ;MAACe,IAAI,EAAEA,IAAK;MAAAG,QAAA,EAClBA;IAAQ,CACD,CAAC,EACVJ,MAAM,iBAAIX,IAAA,CAACJ,UAAU,EAAAwB,aAAA,CAAAA,aAAA,KAAKT,MAAM;MAAEC,IAAI,EAAEA;IAAK,EAAC,CAAC;EAAA,EACzC,CAAC;AAEd,CAAC;AAGD,eAAeJ,IAAI","ignoreList":[]}
+{"version":3,"file":"Tile.js","names":["React","Size","styled","TileHeader","TileFooter","TileBody","COLORS","jsx","_jsx","jsxs","_jsxs","Wrapper","div","props","generateToken","componentType","defaultVariant","theme","Tile","_ref","header","footer","size","Medium","style","children","className","rest","_objectWithoutProperties","_excluded","_objectSpread"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport {TileProps} from './TileTypes';\r\nimport styled from 'styled-components';\r\nimport TileHeader from './TileHeader';\r\nimport TileFooter from './TileFooter';\r\nimport TileBody from './TileBody';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n  border-radius: 8px;\r\n  border: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Tile: React.FunctionComponent<TileProps> = ({\r\n                                                    header,\r\n                                                    footer,\r\n                                                    size = Size.Medium,\r\n                                                    style,\r\n                                                    children,\r\n                                                    className,\r\n                                                    ...rest\r\n                                                  }) => {\r\n\r\n  return (\r\n    <Wrapper style={style}\r\n             className={`${size} ${className || ''}`}\r\n             {...rest}>\r\n      {header && <TileHeader {...header} size={size}/>}\r\n      <TileBody size={size}>\r\n        {children}\r\n      </TileBody>\r\n      {footer && <TileFooter {...footer} size={size}/>}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default Tile;\r\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAE7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,QAAQ,MAAM,YAAY;AACjC,SAAQC,MAAM,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEjC,MAAMC,OAAO,GAAGT,MAAM,CAACU,GAAG;AAC1B;AACA;AACA;AACA;AACA;AACA,gBAAgBC,KAAK,IAAIP,MAAM,CAACQ,aAAa,CAAC;EAACC,aAAa,EAAC,YAAY;EAAEC,cAAc,EAAC;AAAS,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AAClH;AACA,sBAAsBJ,KAAK,IAAIP,MAAM,CAACQ,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEC,cAAc,EAAC;AAAQ,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AACnH;AACA,CAAC;AAED,MAAMC,IAAwC,GAAGC,IAAA,IAQO;EAAA,IARN;MACEC,MAAM;MACNC,MAAM;MACNC,IAAI,GAAGrB,IAAI,CAACsB,MAAM;MAClBC,KAAK;MACLC,QAAQ;MACRC;IAEF,CAAC,GAAAP,IAAA;IADIQ,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAGzD,oBACEnB,KAAA,CAACC,OAAO,EAAAmB,aAAA,CAAAA,aAAA;IAACN,KAAK,EAAEA,KAAM;IACbE,SAAS,EAAE,GAAGJ,IAAI,IAAII,SAAS,IAAI,EAAE;EAAG,GACpCC,IAAI;IAAAF,QAAA,GACdL,MAAM,iBAAIZ,IAAA,CAACL,UAAU,EAAA2B,aAAA,CAAAA,aAAA,KAAKV,MAAM;MAAEE,IAAI,EAAEA;IAAK,EAAC,CAAC,eAChDd,IAAA,CAACH,QAAQ;MAACiB,IAAI,EAAEA,IAAK;MAAAG,QAAA,EAClBA;IAAQ,CACD,CAAC,EACVJ,MAAM,iBAAIb,IAAA,CAACJ,UAAU,EAAA0B,aAAA,CAAAA,aAAA,KAAKT,MAAM;MAAEC,IAAI,EAAEA;IAAK,EAAC,CAAC;EAAA,EACzC,CAAC;AAEd,CAAC;AAGD,eAAeJ,IAAI","ignoreList":[]}

package/dist/Tile/TileCommonItems.cjs

@@ -26,7 +26,10 @@ const TileNoteWrapper = exports.TileNoteWrapper = _styledComponents.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
 
   &.small {
     gap: 4px;
@@ -73,7 +76,10 @@ const TileHyperLinkText = exports.TileHyperLinkText = _styledComponents.default.
 const TileHyperLinkWrapper = exports.TileHyperLinkWrapper = _styledComponents.default.div`
   width: max-content;
 
-  ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('primary_500', props.theme))}
+  ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme))}
   a {
     display: flex;
     flex-direction: row;

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","getColor","theme","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","componentType","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.getColor('neutral_600', 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.getColor('primary_500', 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":"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","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","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":"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","ignoreList":[]}

package/dist/Tile/TileCommonItems.js

@@ -19,7 +19,10 @@ export const TileNoteWrapper = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  color: ${props => COLORS.getColor('neutral_600', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
 
   &.small {
     gap: 4px;
@@ -66,7 +69,10 @@ export const TileHyperLinkText = styled.div``;
 export const TileHyperLinkWrapper = styled.div`
   width: max-content;
 
-  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('primary_500', props.theme))}
+  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme))}
   a {
     display: flex;
     flex-direction: row;