@laerdal/life-react-components 6.0.0-dev.1.full → 6.0.0-dev.12.full

package/dist/Toggles/TogglerStyles.js

@@ -16,19 +16,27 @@ export const StyledSwitch = styled.div`
   min-width: 48px;
   align-items: center;
   cursor: pointer;
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
   &.small {
-    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${props => ComponentSStyling(ComponentTextStyle.Regular, null)}
   }
 
   &.medium {
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, null)}
   }
 
   &.large {
-    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${props => ComponentLStyling(ComponentTextStyle.Regular, null)}
   }
+
   &.disabled {
-    color: ${props => COLORS.getColor('neutral_300', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
 
     .label {
       cursor: not-allowed;
@@ -57,7 +65,7 @@ export const StyledSwitch = styled.div`
 
   &[aria-pressed='true']:hover span {
     &.semantic {
-      background-color: ${props => COLORS.getColor('correct_500', props.theme)};
+      background-color: ${props => COLORS.getColor('positive_500', props.theme)};
     }
 
     &:before {
@@ -69,7 +77,7 @@ export const StyledSwitch = styled.div`
     background-color: ${props => COLORS.getColor('primary_500', props.theme)};
 
     &.semantic {
-      background-color: ${props => COLORS.getColor('correct_500', props.theme)};
+      background-color: ${props => COLORS.getColor('positive_500', props.theme)};
     }
 
     &:before {
@@ -127,11 +135,17 @@ export const ToggleSwitch = styled.span`
   bottom: 0;
   width: 36px;
   height: 16px;
-  background-color: ${props => COLORS.getColor('neutral_500', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'subtle'
+}, props.theme)};
   border-radius: 100px;
 
   &.semantic {
-    background-color: ${props => COLORS.getColor('critical_500', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
   &:before {

package/dist/Toggles/TogglerStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","props","Regular","getColor","theme","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='false'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='false']:hover label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","props","generateToken","componentType","defaultVariant","theme","Regular","state","getColor","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled'}, props.theme)};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='false'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='false']:hover label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Toggles/__tests__/ToggleButton.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { fireEvent, render } from '../../test-utils';
+import '@testing-library/jest-dom';
+import { SystemIcons, ToggleButton } from '../..';
+import 'jest-styled-components';
+
+
+
+describe('<ToggleButton />', () => {
+  it('Renders ToggleButton component', async () => {
+    const { container } = render(<ToggleButton id={'toggleBtn'} active={false} defaultState={{ icon: <SystemIcons.PlayList /> }} />);
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+  });
+
+  it('Renders ToggleButton component in active state', async () => {
+    const { container } = render(<ToggleButton id={'toggleBtn'} active={true} defaultState={{ icon: <SystemIcons.PlayList /> }} />);
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+    //check correct state class set
+    expect(container.querySelector('[id="toggleBtn"]')!.closest('div')).toHaveClass('active');
+  });
+
+  it('Renders ToggleButton component in state-change', async () => {
+    const { container } = render(
+      <ToggleButton active={false} id={'toggleBtn'} activeState={{ icon: <SystemIcons.PlayList /> }} defaultState={{ icon: <SystemIcons.PlayList /> }} />,
+    );
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+    //check correct state class set
+    expect(container.querySelector('[id="toggleBtn"]')!.closest('div')).toHaveClass('state-change');
+  });
+
+  it('Renders ToggleButton component in disabled state', async () => {
+    const { container } = render(<ToggleButton disabled={true} id={'toggleBtn'} active={true} defaultState={{ icon: <SystemIcons.PlayList /> }} />);
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+    //check correct state class set
+    expect(container.querySelector('[id="toggleBtn"]')!.closest('div')).toHaveClass('disabled');
+    //check inner button is disabled
+    expect(container.querySelector('[id="toggleBtn"]') as HTMLButtonElement).toBeDisabled();
+  });
+
+  it('Check action for ToggleButton component', async () => {
+    //mock action callback
+    const handleChange = jest.fn();
+
+    const { container } = render(
+      <ToggleButton active={false} onChange={handleChange} id={'toggleBtn'} activeState={{ icon: <SystemIcons.PlayList /> }} defaultState={{ icon: <SystemIcons.PlayList /> }} />,
+    );
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+    fireEvent.click(container.querySelector('[id="toggleBtn"]') as HTMLButtonElement);
+
+    //check callback  called
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/Toggles/__tests__/ToggleSwitch.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { fireEvent, render } from '../../test-utils';
+import '@testing-library/jest-dom';
+import { Size, ToggleSwitch } from '../..';
+import 'jest-styled-components';
+
+
+
+describe('<ToggleSwitch />', () => {
+  it('Renders ToggleSwitch component', async () => {
+    const { getByText } = render(<ToggleSwitch label={'Test Switch label'} id="TogglerWithoutLabelNormal" onToggle={(val) => {}} selected={false} />);
+
+    //check label element rendered
+    expect(getByText('Test Switch label').closest('label')).toBeTruthy();
+    //check label text
+    expect(getByText('Test Switch label')).toBeTruthy();
+    //no size defined, medium by default
+    expect(getByText('Test Switch label').closest('div')).toHaveClass('medium');
+  });
+
+  it('Renders ToggleSwitch component without label', async () => {
+    const { container } = render(<ToggleSwitch size={Size.Large} id="TogglerWithoutLabelNormal" onToggle={(val) => {}} selected={false} />);
+
+    //check label element rendered
+    expect(container.querySelector('.label')).toBeFalsy();
+    //large size defined
+    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveClass('large');
+    //should be able to focus the parent div as not disabeld
+    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveAttribute('tabindex', '0');
+  });
+
+  it('Renders disabled ToggleSwitch component', async () => {
+    const { container } = render(<ToggleSwitch disabled={true} id="TogglerWithoutLabelNormal" onToggle={(val) => {}} selected={false} />);
+
+    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveClass('disabled');
+    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('Renders semantic ToggleSwitch component', async () => {
+    const { container } = render(<ToggleSwitch isSemantic={true} id="TogglerWithoutLabelNormal" onToggle={(val) => {}} selected={false} />);
+
+    //semnatic class should be added
+    expect(container.querySelector('[id="switchContainer"]')!.firstElementChild).toHaveClass('semantic');
+  });
+
+  it('Check toggle click for ToggleSwitch component', async () => {
+    const handleToggle = jest.fn();
+    const { container } = render(<ToggleSwitch isSemantic={true} id="TogglerWithoutLabelNormal" onToggle={handleToggle} selected={false} />);
+
+    fireEvent(
+      container.querySelector('[id="switchContainer"]')!.closest('div') as HTMLDivElement,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(handleToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('Check toggle click not fired when ToggleSwitch disabled', async () => {
+    const handleToggle = jest.fn();
+    const { container } = render(<ToggleSwitch disabled={true} id="TogglerWithoutLabelNormal" onToggle={handleToggle} selected={false} />);
+
+    //check disabled
+    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveClass('disabled');
+    //simulate click
+    fireEvent(
+      container.querySelector('[id="switchContainer"]')!.closest('div') as HTMLDivElement,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    //check callback not called
+    expect(handleToggle).toHaveBeenCalledTimes(0);
+  });
+
+  it('Check toggle onkeydown ev for ToggleSwitch component', async () => {
+    const handleToggle = jest.fn();
+    const { container } = render(<ToggleSwitch isSemantic={true} id="TogglerWithoutLabelNormal" onToggle={handleToggle} selected={false} />);
+
+    fireEvent.keyDown(container.querySelector('[id="switchContainer"]')!.closest('div') as HTMLDivElement, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+    expect(handleToggle).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/Tooltips/TooltipStyles.cjs

@@ -16,9 +16,14 @@ const distanceToEdge = size => {
 };
 const Tooltip = exports.Tooltip = _styledComponents.default.div`
   pointer-events: none;
-  ${props => props.$size == _types.Size.Small || props.$size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('white', props.theme)) : ''}
-  ${props => props.$size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('white', props.theme)) : ''}
-    ${props => props.$size == _types.Size.Medium ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('white', props.theme)) : ''}
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'default'
+}, props.theme)};
+  ${props => props.$size == _types.Size.Small || props.$size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null) : ''}
+  ${props => props.$size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null) : ''}
+    ${props => props.$size == _types.Size.Medium ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null) : ''}
     ${props => props.$align == 'center' ? 'text-align: center;' : ''}
     box-shadow: ${_styles.BOXSHADOWS.BOXSHADOW_L2};
   box-sizing: border-box;
@@ -28,7 +33,10 @@ const Tooltip = exports.Tooltip = _styledComponents.default.div`
   ${props => props.$width ? `width: ${props.$width};` : 'width: max-content;'}
   height: ${props => props.$height};
   max-width: ${props => props.$maxWidth ?? '34em'};
-  background: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+  background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme)};
   position: absolute;
   opacity: 0;
   z-index: ${_zIndexes.Z_INDEXES.tooltip};
@@ -55,8 +63,22 @@ const Tooltip = exports.Tooltip = _styledComponents.default.div`
     margin: -0.5px;
     border-width: 4px;
     border-style: solid;
-    border-color: ${props => props.$position == 'top' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent'} ${props => props.$position == 'right' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent'}
-      ${props => props.$position == 'bottom' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent'} ${props => props.$position == 'left' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent'};
+    border-color: ${props => props.$position == 'top' ? _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme) : 'transparent'} 
+      ${props => props.$position == 'right' ? _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme) : 'transparent'}
+      ${props => props.$position == 'bottom' ? _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme) : 'transparent'} 
+      ${props => props.$position == 'left' ? _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme) : 'transparent'};
   }
 
   & > span {

package/dist/Tooltips/TooltipStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipStyles.cjs","names":["_styledComponents","_interopRequireWildcard","require","_types","_styles","_typography","_zIndexes","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","distanceToEdge","size","Size","XSmall","Small","Tooltip","exports","styled","div","props","$size","Medium","ComponentSStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","ComponentXSStyling","ComponentMStyling","$align","BOXSHADOWS","BOXSHADOW_L2","$width","$height","$maxWidth","Z_INDEXES","tooltip","$position","$withArrow","defaultProps","TooltipTrigger","triggerType","delay","css","TooltipContainer","$triggerType","$delay","focusStyles"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { Size } from '../types';\r\nimport { BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles } from '../styles';\r\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nconst distanceToEdge = (size: Size | undefined) => {\r\n  return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';\r\n};\r\n\r\nexport const Tooltip = styled.div<{\r\n  $withArrow?: boolean;\r\n  $size?: Size;\r\n  $height?: string;\r\n  $maxWidth?: string;\r\n  $align?: 'start' | 'end' | 'center' | undefined;\r\n  $position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\r\n  $width?: string;\r\n}>`\r\n  pointer-events: none;\r\n  ${(props) => (props.$size == Size.Small || props.$size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme)) : '')}\r\n  ${(props) => (props.$size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme)) : '')}\r\n    ${(props) => (props.$size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme)) : '')}\r\n    ${(props) => (props.$align == 'center' ? 'text-align: center;' : '')}\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n  box-sizing: border-box;\r\n\r\n  padding: ${(props) => (props.$size == Size.XSmall ? '4px 8px' : props.$size == Size.Medium ? '8px 12px' : '6px 10px')};\r\n  border-radius: 2px;\r\n  ${(props) => (props.$width ? `width: ${props.$width};` : 'width: max-content;')}\r\n  height: ${(props) => props.$height};\r\n  max-width: ${(props) => props.$maxWidth ?? '34em'};\r\n  background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  position: absolute;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.tooltip};\r\n  ${(props) => (props.$position == 'top' ? 'bottom: 110%;' : props.$position == 'bottom' ? 'top: 110%;' : '')}\r\n\r\n  ${(props) => (props.$position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\r\n    ${(props) => (props.$position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\r\n            \r\n    ${(props) =>\r\n    props.$position == 'left' || props.$position == 'right'\r\n      ? ''\r\n      : props.$align == 'start'\r\n      ? 'left: 0%;'\r\n      : props.$align == 'end'\r\n      ? 'right: 0%;'\r\n      : 'left: 50%; transform: translateX(-50%);'}\r\n\r\n\r\n&::after {\r\n    ${(props) => (!props.$withArrow ? 'display: none;' : '')}\r\n    content: \"\";\r\n    position: absolute;\r\n    ${(props) => (props.$position == 'top' ? 'top: 100%;' : props.$position == 'bottom' ? 'bottom: 100%;' : '')}\r\n\r\n    ${(props) => (props.$position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\r\n    ${(props) => (props.$position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\r\n\r\n    ${(props) =>\r\n      props.$position == 'left' || props.$position == 'right'\r\n        ? ''\r\n        : props.$align == 'start'\r\n        ? `left: ${distanceToEdge(props.$size)};`\r\n        : props.$align == 'end'\r\n        ? `right: ${distanceToEdge(props.$size)};`\r\n        : 'left: 50%;'}\r\n\r\n    ${(props) => (props.$position == 'left' ? '' : 'margin-left: -5px;')}\r\n    margin: -0.5px;\r\n    border-width: 4px;\r\n    border-style: solid;\r\n    border-color: ${(props) => (props.$position == 'top' ? COLORS.getColor('primary_800', props.theme) : 'transparent')} ${(props) => (props.$position == 'right' ? COLORS.getColor('primary_800', props.theme) : 'transparent')}\r\n      ${(props) => (props.$position == 'bottom' ? COLORS.getColor('primary_800', props.theme) : 'transparent')} ${(props) => (props.$position == 'left' ? COLORS.getColor('primary_800', props.theme) : 'transparent')};\r\n  }\r\n\r\n  & > span {\r\n    word-wrap: break-word;\r\n    color: white;\r\n  }\r\n`;\r\n\r\nTooltip.defaultProps = {\r\n  $withArrow: false,\r\n  $size: Size.Small,\r\n  $height: 'auto',\r\n  $align: 'center',\r\n  $position: 'bottom',\r\n};\r\n\r\nexport const TooltipTrigger = (triggerType: 'hover' | 'click', delay?: string) => css`\r\n  ${triggerType == 'hover'\r\n    ? `&:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\r\n      opacity: 1;\r\n      transition: 0.5s;\r\n    transition-delay: ${delay ?? '0.7s'};\r\n    }`\r\n    : `& ${Tooltip} {\r\n      transition: 0.5s;\r\n      transition-delay: ${delay ?? '0s'};\r\n    }\r\n  \r\n    &.show ${Tooltip} {\r\n      opacity: 1;\r\n    }\r\n  \r\n    &.hide ${Tooltip} {\r\n      opacity: 0;\r\n    }`}\r\n`;\r\n\r\nexport const TooltipContainer = styled.div<{ $triggerType: 'hover' | 'click', $delay?: string }>`\r\n  display: inline-block;\r\n  position: relative;\r\n\r\n  ${(props) => TooltipTrigger(props.$triggerType, props.$delay)}\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TooltipStyles.cjs","names":["_styledComponents","_interopRequireWildcard","require","_types","_styles","_typography","_zIndexes","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","distanceToEdge","size","Size","XSmall","Small","Tooltip","exports","styled","div","props","COLORS","generateToken","componentType","isOnFill","defaultVariant","theme","$size","Medium","ComponentSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentMStyling","$align","BOXSHADOWS","BOXSHADOW_L2","$width","$height","$maxWidth","Z_INDEXES","tooltip","$position","$withArrow","defaultProps","TooltipTrigger","triggerType","delay","css","TooltipContainer","$triggerType","$delay","focusStyles"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { Size } from '../types';\r\nimport { BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles } from '../styles';\r\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nconst distanceToEdge = (size: Size | undefined) => {\r\n  return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';\r\n};\r\n\r\nexport const Tooltip = styled.div<{\r\n  $withArrow?: boolean;\r\n  $size?: Size;\r\n  $height?: string;\r\n  $maxWidth?: string;\r\n  $align?: 'start' | 'end' | 'center' | undefined;\r\n  $position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\r\n  $width?: string;\r\n}>`\r\n  pointer-events: none;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', isOnFill: true, defaultVariant: 'default' }, props.theme)};\r\n  ${(props) => (props.$size == Size.Small || props.$size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, null) : '')}\r\n  ${(props) => (props.$size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, null) : '')}\r\n    ${(props) => (props.$size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, null) : '')}\r\n    ${(props) => (props.$align == 'center' ? 'text-align: center;' : '')}\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n  box-sizing: border-box;\r\n\r\n  padding: ${(props) => (props.$size == Size.XSmall ? '4px 8px' : props.$size == Size.Medium ? '8px 12px' : '6px 10px')};\r\n  border-radius: 2px;\r\n  ${(props) => (props.$width ? `width: ${props.$width};` : 'width: max-content;')}\r\n  height: ${(props) => props.$height};\r\n  max-width: ${(props) => props.$maxWidth ?? '34em'};\r\n  background: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme)};\r\n  position: absolute;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.tooltip};\r\n  ${(props) => (props.$position == 'top' ? 'bottom: 110%;' : props.$position == 'bottom' ? 'top: 110%;' : '')}\r\n\r\n  ${(props) => (props.$position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\r\n    ${(props) => (props.$position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\r\n            \r\n    ${(props) =>\r\n    props.$position == 'left' || props.$position == 'right'\r\n      ? ''\r\n      : props.$align == 'start'\r\n      ? 'left: 0%;'\r\n      : props.$align == 'end'\r\n      ? 'right: 0%;'\r\n      : 'left: 50%; transform: translateX(-50%);'}\r\n\r\n\r\n&::after {\r\n    ${(props) => (!props.$withArrow ? 'display: none;' : '')}\r\n    content: \"\";\r\n    position: absolute;\r\n    ${(props) => (props.$position == 'top' ? 'top: 100%;' : props.$position == 'bottom' ? 'bottom: 100%;' : '')}\r\n\r\n    ${(props) => (props.$position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\r\n    ${(props) => (props.$position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\r\n\r\n    ${(props) =>\r\n      props.$position == 'left' || props.$position == 'right'\r\n        ? ''\r\n        : props.$align == 'start'\r\n        ? `left: ${distanceToEdge(props.$size)};`\r\n        : props.$align == 'end'\r\n        ? `right: ${distanceToEdge(props.$size)};`\r\n        : 'left: 50%;'}\r\n\r\n    ${(props) => (props.$position == 'left' ? '' : 'margin-left: -5px;')}\r\n    margin: -0.5px;\r\n    border-width: 4px;\r\n    border-style: solid;\r\n    border-color: ${(props) => (props.$position == 'top' ? COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme) : 'transparent')} \r\n      ${(props) => (props.$position == 'right' ? COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme) : 'transparent')}\r\n      ${(props) => (props.$position == 'bottom' ? COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme) : 'transparent')} \r\n      ${(props) => (props.$position == 'left' ? COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme) : 'transparent')};\r\n  }\r\n\r\n  & > span {\r\n    word-wrap: break-word;\r\n    color: white;\r\n  }\r\n`;\r\n\r\nTooltip.defaultProps = {\r\n  $withArrow: false,\r\n  $size: Size.Small,\r\n  $height: 'auto',\r\n  $align: 'center',\r\n  $position: 'bottom',\r\n};\r\n\r\nexport const TooltipTrigger = (triggerType: 'hover' | 'click', delay?: string) => css`\r\n  ${triggerType == 'hover'\r\n    ? `&:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\r\n      opacity: 1;\r\n      transition: 0.5s;\r\n    transition-delay: ${delay ?? '0.7s'};\r\n    }`\r\n    : `& ${Tooltip} {\r\n      transition: 0.5s;\r\n      transition-delay: ${delay ?? '0s'};\r\n    }\r\n  \r\n    &.show ${Tooltip} {\r\n      opacity: 1;\r\n    }\r\n  \r\n    &.hide ${Tooltip} {\r\n      opacity: 0;\r\n    }`}\r\n`;\r\n\r\nexport const TooltipContainer = styled.div<{ $triggerType: 'hover' | 'click', $delay?: string }>`\r\n  display: inline-block;\r\n  position: relative;\r\n\r\n  ${(props) => TooltipTrigger(props.$triggerType, props.$delay)}\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tooltips/TooltipStyles.js

@@ -8,9 +8,14 @@ const distanceToEdge = size => {
 };
 export const Tooltip = styled.div`
   pointer-events: none;
-  ${props => props.$size == Size.Small || props.$size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme)) : ''}
-  ${props => props.$size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme)) : ''}
-    ${props => props.$size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme)) : ''}
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'default'
+}, props.theme)};
+  ${props => props.$size == Size.Small || props.$size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, null) : ''}
+  ${props => props.$size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, null) : ''}
+    ${props => props.$size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, null) : ''}
     ${props => props.$align == 'center' ? 'text-align: center;' : ''}
     box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};
   box-sizing: border-box;
@@ -20,7 +25,10 @@ export const Tooltip = styled.div`
   ${props => props.$width ? `width: ${props.$width};` : 'width: max-content;'}
   height: ${props => props.$height};
   max-width: ${props => props.$maxWidth ?? '34em'};
-  background: ${props => COLORS.getColor('primary_800', props.theme)};
+  background: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme)};
   position: absolute;
   opacity: 0;
   z-index: ${Z_INDEXES.tooltip};
@@ -47,8 +55,22 @@ export const Tooltip = styled.div`
     margin: -0.5px;
     border-width: 4px;
     border-style: solid;
-    border-color: ${props => props.$position == 'top' ? COLORS.getColor('primary_800', props.theme) : 'transparent'} ${props => props.$position == 'right' ? COLORS.getColor('primary_800', props.theme) : 'transparent'}
-      ${props => props.$position == 'bottom' ? COLORS.getColor('primary_800', props.theme) : 'transparent'} ${props => props.$position == 'left' ? COLORS.getColor('primary_800', props.theme) : 'transparent'};
+    border-color: ${props => props.$position == 'top' ? COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme) : 'transparent'} 
+      ${props => props.$position == 'right' ? COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme) : 'transparent'}
+      ${props => props.$position == 'bottom' ? COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme) : 'transparent'} 
+      ${props => props.$position == 'left' ? COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme) : 'transparent'};
   }
 
   & > span {

package/dist/Tooltips/TooltipStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipStyles.js","names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","$size","Medium","Regular","getColor","theme","$align","BOXSHADOW_L2","$width","$height","$maxWidth","tooltip","$position","$withArrow","defaultProps","TooltipTrigger","triggerType","delay","TooltipContainer","$triggerType","$delay"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { Size } from '../types';\r\nimport { BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles } from '../styles';\r\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nconst distanceToEdge = (size: Size | undefined) => {\r\n  return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';\r\n};\r\n\r\nexport const Tooltip = styled.div<{\r\n  $withArrow?: boolean;\r\n  $size?: Size;\r\n  $height?: string;\r\n  $maxWidth?: string;\r\n  $align?: 'start' | 'end' | 'center' | undefined;\r\n  $position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\r\n  $width?: string;\r\n}>`\r\n  pointer-events: none;\r\n  ${(props) => (props.$size == Size.Small || props.$size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme)) : '')}\r\n  ${(props) => (props.$size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme)) : '')}\r\n    ${(props) => (props.$size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme)) : '')}\r\n    ${(props) => (props.$align == 'center' ? 'text-align: center;' : '')}\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n  box-sizing: border-box;\r\n\r\n  padding: ${(props) => (props.$size == Size.XSmall ? '4px 8px' : props.$size == Size.Medium ? '8px 12px' : '6px 10px')};\r\n  border-radius: 2px;\r\n  ${(props) => (props.$width ? `width: ${props.$width};` : 'width: max-content;')}\r\n  height: ${(props) => props.$height};\r\n  max-width: ${(props) => props.$maxWidth ?? '34em'};\r\n  background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  position: absolute;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.tooltip};\r\n  ${(props) => (props.$position == 'top' ? 'bottom: 110%;' : props.$position == 'bottom' ? 'top: 110%;' : '')}\r\n\r\n  ${(props) => (props.$position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\r\n    ${(props) => (props.$position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\r\n            \r\n    ${(props) =>\r\n    props.$position == 'left' || props.$position == 'right'\r\n      ? ''\r\n      : props.$align == 'start'\r\n      ? 'left: 0%;'\r\n      : props.$align == 'end'\r\n      ? 'right: 0%;'\r\n      : 'left: 50%; transform: translateX(-50%);'}\r\n\r\n\r\n&::after {\r\n    ${(props) => (!props.$withArrow ? 'display: none;' : '')}\r\n    content: \"\";\r\n    position: absolute;\r\n    ${(props) => (props.$position == 'top' ? 'top: 100%;' : props.$position == 'bottom' ? 'bottom: 100%;' : '')}\r\n\r\n    ${(props) => (props.$position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\r\n    ${(props) => (props.$position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\r\n\r\n    ${(props) =>\r\n      props.$position == 'left' || props.$position == 'right'\r\n        ? ''\r\n        : props.$align == 'start'\r\n        ? `left: ${distanceToEdge(props.$size)};`\r\n        : props.$align == 'end'\r\n        ? `right: ${distanceToEdge(props.$size)};`\r\n        : 'left: 50%;'}\r\n\r\n    ${(props) => (props.$position == 'left' ? '' : 'margin-left: -5px;')}\r\n    margin: -0.5px;\r\n    border-width: 4px;\r\n    border-style: solid;\r\n    border-color: ${(props) => (props.$position == 'top' ? COLORS.getColor('primary_800', props.theme) : 'transparent')} ${(props) => (props.$position == 'right' ? COLORS.getColor('primary_800', props.theme) : 'transparent')}\r\n      ${(props) => (props.$position == 'bottom' ? COLORS.getColor('primary_800', props.theme) : 'transparent')} ${(props) => (props.$position == 'left' ? COLORS.getColor('primary_800', props.theme) : 'transparent')};\r\n  }\r\n\r\n  & > span {\r\n    word-wrap: break-word;\r\n    color: white;\r\n  }\r\n`;\r\n\r\nTooltip.defaultProps = {\r\n  $withArrow: false,\r\n  $size: Size.Small,\r\n  $height: 'auto',\r\n  $align: 'center',\r\n  $position: 'bottom',\r\n};\r\n\r\nexport const TooltipTrigger = (triggerType: 'hover' | 'click', delay?: string) => css`\r\n  ${triggerType == 'hover'\r\n    ? `&:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\r\n      opacity: 1;\r\n      transition: 0.5s;\r\n    transition-delay: ${delay ?? '0.7s'};\r\n    }`\r\n    : `& ${Tooltip} {\r\n      transition: 0.5s;\r\n      transition-delay: ${delay ?? '0s'};\r\n    }\r\n  \r\n    &.show ${Tooltip} {\r\n      opacity: 1;\r\n    }\r\n  \r\n    &.hide ${Tooltip} {\r\n      opacity: 0;\r\n    }`}\r\n`;\r\n\r\nexport const TooltipContainer = styled.div<{ $triggerType: 'hover' | 'click', $delay?: string }>`\r\n  display: inline-block;\r\n  position: relative;\r\n\r\n  ${(props) => TooltipTrigger(props.$triggerType, props.$delay)}\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TooltipStyles.js","names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","generateToken","componentType","isOnFill","defaultVariant","theme","$size","Medium","Regular","$align","BOXSHADOW_L2","$width","$height","$maxWidth","tooltip","$position","$withArrow","defaultProps","TooltipTrigger","triggerType","delay","TooltipContainer","$triggerType","$delay"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { Size } from '../types';\r\nimport { BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles } from '../styles';\r\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nconst distanceToEdge = (size: Size | undefined) => {\r\n  return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';\r\n};\r\n\r\nexport const Tooltip = styled.div<{\r\n  $withArrow?: boolean;\r\n  $size?: Size;\r\n  $height?: string;\r\n  $maxWidth?: string;\r\n  $align?: 'start' | 'end' | 'center' | undefined;\r\n  $position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\r\n  $width?: string;\r\n}>`\r\n  pointer-events: none;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', isOnFill: true, defaultVariant: 'default' }, props.theme)};\r\n  ${(props) => (props.$size == Size.Small || props.$size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, null) : '')}\r\n  ${(props) => (props.$size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, null) : '')}\r\n    ${(props) => (props.$size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, null) : '')}\r\n    ${(props) => (props.$align == 'center' ? 'text-align: center;' : '')}\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n  box-sizing: border-box;\r\n\r\n  padding: ${(props) => (props.$size == Size.XSmall ? '4px 8px' : props.$size == Size.Medium ? '8px 12px' : '6px 10px')};\r\n  border-radius: 2px;\r\n  ${(props) => (props.$width ? `width: ${props.$width};` : 'width: max-content;')}\r\n  height: ${(props) => props.$height};\r\n  max-width: ${(props) => props.$maxWidth ?? '34em'};\r\n  background: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme)};\r\n  position: absolute;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.tooltip};\r\n  ${(props) => (props.$position == 'top' ? 'bottom: 110%;' : props.$position == 'bottom' ? 'top: 110%;' : '')}\r\n\r\n  ${(props) => (props.$position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\r\n    ${(props) => (props.$position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\r\n            \r\n    ${(props) =>\r\n    props.$position == 'left' || props.$position == 'right'\r\n      ? ''\r\n      : props.$align == 'start'\r\n      ? 'left: 0%;'\r\n      : props.$align == 'end'\r\n      ? 'right: 0%;'\r\n      : 'left: 50%; transform: translateX(-50%);'}\r\n\r\n\r\n&::after {\r\n    ${(props) => (!props.$withArrow ? 'display: none;' : '')}\r\n    content: \"\";\r\n    position: absolute;\r\n    ${(props) => (props.$position == 'top' ? 'top: 100%;' : props.$position == 'bottom' ? 'bottom: 100%;' : '')}\r\n\r\n    ${(props) => (props.$position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\r\n    ${(props) => (props.$position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\r\n\r\n    ${(props) =>\r\n      props.$position == 'left' || props.$position == 'right'\r\n        ? ''\r\n        : props.$align == 'start'\r\n        ? `left: ${distanceToEdge(props.$size)};`\r\n        : props.$align == 'end'\r\n        ? `right: ${distanceToEdge(props.$size)};`\r\n        : 'left: 50%;'}\r\n\r\n    ${(props) => (props.$position == 'left' ? '' : 'margin-left: -5px;')}\r\n    margin: -0.5px;\r\n    border-width: 4px;\r\n    border-style: solid;\r\n    border-color: ${(props) => (props.$position == 'top' ? COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme) : 'transparent')} \r\n      ${(props) => (props.$position == 'right' ? COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme) : 'transparent')}\r\n      ${(props) => (props.$position == 'bottom' ? COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme) : 'transparent')} \r\n      ${(props) => (props.$position == 'left' ? COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme) : 'transparent')};\r\n  }\r\n\r\n  & > span {\r\n    word-wrap: break-word;\r\n    color: white;\r\n  }\r\n`;\r\n\r\nTooltip.defaultProps = {\r\n  $withArrow: false,\r\n  $size: Size.Small,\r\n  $height: 'auto',\r\n  $align: 'center',\r\n  $position: 'bottom',\r\n};\r\n\r\nexport const TooltipTrigger = (triggerType: 'hover' | 'click', delay?: string) => css`\r\n  ${triggerType == 'hover'\r\n    ? `&:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\r\n      opacity: 1;\r\n      transition: 0.5s;\r\n    transition-delay: ${delay ?? '0.7s'};\r\n    }`\r\n    : `& ${Tooltip} {\r\n      transition: 0.5s;\r\n      transition-delay: ${delay ?? '0s'};\r\n    }\r\n  \r\n    &.show ${Tooltip} {\r\n      opacity: 1;\r\n    }\r\n  \r\n    &.hide ${Tooltip} {\r\n      opacity: 0;\r\n    }`}\r\n`;\r\n\r\nexport const TooltipContainer = styled.div<{ $triggerType: 'hover' | 'click', $delay?: string }>`\r\n  display: inline-block;\r\n  position: relative;\r\n\r\n  ${(props) => TooltipTrigger(props.$triggerType, props.$delay)}\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tooltips/__tests__/TooltipWrapper.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {TooltipWrapper} from '../index';
+import {render} from '../../test-utils';
+
+
+
+
+describe('TooltipWrapper', () => {
+
+  it('should render', () => {
+    const wrapper = render(<TooltipWrapper label={'label'}/>);
+
+    expect(wrapper.queryByText('label')).toBeInTheDocument();
+  });
+
+});

package/dist/common/InputStyling.cjs

@@ -12,20 +12,43 @@ const CommonInteractionStyling = exports.CommonInteractionStyling = (0, _styledC
   }
 
   &:hover:not(.action-within), &.hover-state {
-    background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
-    color: ${props => _styles.COLORS.getColor('primary_600', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
   }
+
   &:active:not(.action-within), &.active-state {
-    background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
-    color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
   }
+
   &:disabled, &.disabled-state {
-    background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'disabled'
+}, props.theme)};
     span {
-      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     }
     &::after {
-      background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
     }
   }
 `;

package/dist/common/InputStyling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputStyling.cjs","names":["_styledComponents","require","_styles","CommonInteractionStyling","exports","css","focusStyles","props","COLORS","getColor","theme"],"sources":["../../src/common/InputStyling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\n\r\nexport const CommonInteractionStyling = css`\r\n  &:focus, &.focus-state, &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover:not(.action-within), &.hover-state {\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n  }\r\n  &:active:not(.action-within), &.active-state {\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n  &:disabled, &.disabled-state {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    span {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n    &::after {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEO,MAAME,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,qBAAG;AAC3C;AACA,MAAMC,mBAAW;AACjB;AACA;AACA;AACA,wBAAwBC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3E,aAAaH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA,wBAAwBH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC5E,aAAaH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA,wBAAwBH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AACtE;AACA,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA,0BAA0BH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AACxE;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"InputStyling.cjs","names":["_styledComponents","require","_styles","CommonInteractionStyling","exports","css","focusStyles","props","COLORS","generateToken","componentType","state","theme","defaultVariant"],"sources":["../../src/common/InputStyling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\n\r\nexport const CommonInteractionStyling = css`\r\n  &:focus, &.focus-state, &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover:not(.action-within), &.hover-state {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n  }\r\n\r\n  &:active:not(.action-within), &.active-state {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n  }\r\n\r\n  &:disabled, &.disabled-state {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'disabled' }, props.theme)};\r\n    span {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    }\r\n    &::after {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n    }\r\n  }\r\n`;\r\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEO,MAAME,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,qBAAG;AAC3C;AACA,MAAMC,mBAAW;AACjB;AACA;AACA;AACA,wBAAwBC,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEC,KAAK,EAAE;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACnH,aAAaL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,KAAK,EAAE;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAClG;AACA;AACA;AACA,wBAAwBL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEC,KAAK,EAAE;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACpH,aAAaL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,KAAK,EAAE;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACnG;AACA;AACA;AACA,wBAAwBL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEC,KAAK,EAAE;AAAW,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACtH;AACA,eAAeL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,KAAK,EAAE;AAAW,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACvG;AACA;AACA,0BAA0BL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEG,cAAc,EAAE;AAAU,CAAC,EAAEN,KAAK,CAACK,KAAK,CAAC;AAChI;AACA;AACA,CAAC","ignoreList":[]}

package/dist/common/InputStyling.js

@@ -6,20 +6,43 @@ export const CommonInteractionStyling = css`
   }
 
   &:hover:not(.action-within), &.hover-state {
-    background-color: ${props => COLORS.getColor('primary_20', props.theme)};
-    color: ${props => COLORS.getColor('primary_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
   }
+
   &:active:not(.action-within), &.active-state {
-    background-color: ${props => COLORS.getColor('primary_100', props.theme)};
-    color: ${props => COLORS.getColor('primary_800', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
   }
+
   &:disabled, &.disabled-state {
-    background-color: ${props => COLORS.getColor('white', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'disabled'
+}, props.theme)};
     span {
-      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     }
     &::after {
-      background-color: ${props => COLORS.getColor('white', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
     }
   }
 `;