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

package/dist/Toggles/ToggleButton.d.ts

@@ -12,7 +12,7 @@ export interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLB
     disabled?: boolean;
     /** Required. Icon and color of toggle in default state. */
     defaultState: ToggleButtonState;
-    /** Optional. Icon and color of toggle in active state. */
+    /** Optional. Icon and color of toggle in active state. If activeState is not provided then when state is changed component will show a small border under the button to highlight the state change. */
     activeState?: ToggleButtonState;
 }
 export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/Toggles/ToggleButton.js

@@ -18,7 +18,7 @@ const Wrapper = styled.div`
   &.disabled,
   &.active:not(.state-change) {
     ${IconButtonContentStyles} {
-      background: ${props => COLORS.getColor('white', props.theme)};
+      background: transparent;
     }
   }
 
@@ -28,7 +28,10 @@ const Wrapper = styled.div`
       position: absolute;
       left: 12px;
       bottom: 1px;
-      background-color: ${props => COLORS.getColor('primary_500', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'selected'
+}, props.theme)};
       border-radius: 4px;
       height: 4px;
       width: 24px;
@@ -37,7 +40,10 @@ const Wrapper = styled.div`
 
   &.disabled:not(.state-change) {
     ${IconButtonContentStyles}:after {
-      background: ${props => COLORS.getColor('neutral_300', props.theme)};
+      background: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 `;

package/dist/Toggles/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","names":["React","IconButton","styled","IconButtonContentStyles","COLORS","jsx","_jsx","Wrapper","div","props","getColor","theme","ToggleButton","forwardRef","_ref","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","_objectWithoutProperties","_excluded","isActive","setIsActive","useState","useEffect","cls","children","_objectSpread","variant","useTransparentBackground","shape","action","iconColor","color","icon","propTypes","_pt","bool","isRequired","func","node","string"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\r\nimport { IconButton } from '../Button';\r\nimport styled from 'styled-components';\r\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\r\nimport { COLORS } from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  ${IconButtonContentStyles} {\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n\r\n  &.disabled,\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      content: '';\r\n      position: absolute;\r\n      left: 12px;\r\n      bottom: 1px;\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n      border-radius: 4px;\r\n      height: 4px;\r\n      width: 24px;\r\n    }\r\n  }\r\n\r\n  &.disabled:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      background: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ToggleButtonState {\r\n  icon: React.ReactNode;\r\n  color?: string;\r\n}\r\n\r\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\r\n  /** Required. Initial state of the toggle. */\r\n  active: boolean;\r\n  /** Optional. Handler to be called when toggle state changes. */\r\n  onChange?: (value: boolean) => void;\r\n  /** Optional. If set user can not interact with ToggleButton. */\r\n  disabled?: boolean;\r\n  /** Required. Icon and color of toggle in default state. */\r\n  defaultState: ToggleButtonState;\r\n  /** Optional. Icon and color of toggle in active state. */\r\n  activeState?: ToggleButtonState;\r\n}\r\n\r\nexport const ToggleButton = React.forwardRef(({\r\n                                                id,\r\n                                                active,\r\n                                                onChange,\r\n                                                disabled,\r\n                                                defaultState,\r\n                                                activeState,\r\n                                                className,\r\n                                                ...rest\r\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\r\n  const [isActive, setIsActive] = React.useState(false);\r\n\r\n  React.useEffect(() => setIsActive(active), [active]);\r\n\r\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n  return (\r\n    <Wrapper className={cls}>\r\n      <IconButton\r\n        variant={'secondary'}\r\n        ref={ref}\r\n        useTransparentBackground={true}\r\n        shape={'circular'}\r\n        action={() => {\r\n          setIsActive(!isActive);\r\n          if (onChange) {\r\n            onChange(!isActive);\r\n          }\r\n        }}\r\n        id={id}\r\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\r\n        disabled={disabled}\r\n        aria-pressed={isActive}\r\n        {...rest}>\r\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\r\n      </IconButton>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default ToggleButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ToggleButton.js","names":["React","IconButton","styled","IconButtonContentStyles","COLORS","jsx","_jsx","Wrapper","div","props","generateToken","componentType","defaultVariant","theme","state","ToggleButton","forwardRef","_ref","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","_objectWithoutProperties","_excluded","isActive","setIsActive","useState","useEffect","cls","children","_objectSpread","variant","useTransparentBackground","shape","action","iconColor","color","icon","propTypes","_pt","bool","isRequired","func","node","string"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\r\nimport { IconButton } from '../Button';\r\nimport styled from 'styled-components';\r\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\r\nimport { COLORS } from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  ${IconButtonContentStyles} {\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n\r\n  &.disabled,\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles} {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      content: '';\r\n      position: absolute;\r\n      left: 12px;\r\n      bottom: 1px;\r\n      background-color: ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'selected'}, props.theme)};\r\n      border-radius: 4px;\r\n      height: 4px;\r\n      width: 24px;\r\n    }\r\n  }\r\n\r\n  &.disabled:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      background: ${props => COLORS.generateToken({componentType:'icon',state:'disabled'}, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ToggleButtonState {\r\n  icon: React.ReactNode;\r\n  color?: string;\r\n}\r\n\r\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\r\n  /** Required. Initial state of the toggle. */\r\n  active: boolean;\r\n  /** Optional. Handler to be called when toggle state changes. */\r\n  onChange?: (value: boolean) => void;\r\n  /** Optional. If set user can not interact with ToggleButton. */\r\n  disabled?: boolean;\r\n  /** Required. Icon and color of toggle in default state. */\r\n  defaultState: ToggleButtonState;\r\n  /** Optional. Icon and color of toggle in active state. If activeState is not provided then when state is changed component will show a small border under the button to highlight the state change. */\r\n  activeState?: ToggleButtonState;\r\n}\r\n\r\nexport const ToggleButton = React.forwardRef(({\r\n                                                id,\r\n                                                active,\r\n                                                onChange,\r\n                                                disabled,\r\n                                                defaultState,\r\n                                                activeState,\r\n                                                className,\r\n                                                ...rest\r\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\r\n  const [isActive, setIsActive] = React.useState(false);\r\n\r\n  React.useEffect(() => setIsActive(active), [active]);\r\n\r\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n  return (\r\n    <Wrapper className={cls}>\r\n      <IconButton\r\n        variant={'secondary'}\r\n        ref={ref}\r\n        useTransparentBackground={true}\r\n        shape={'circular'}\r\n        action={() => {\r\n          setIsActive(!isActive);\r\n          if (onChange) {\r\n            onChange(!isActive);\r\n          }\r\n        }}\r\n        id={id}\r\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\r\n        disabled={disabled}\r\n        aria-pressed={isActive}\r\n        {...rest}>\r\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\r\n      </IconButton>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default ToggleButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Toggles/TogglerStyles.cjs

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

package/dist/Toggles/TogglerStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerStyles.cjs","names":["_styles","require","_styledComponents","_interopRequireDefault","_typography","StyledSwitch","exports","styled","div","props","ComponentSStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","ComponentMStyling","ComponentLStyling","focusStyles","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.cjs","names":["_styles","require","_styledComponents","_interopRequireDefault","_typography","StyledSwitch","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","state","getColor","focusStyles","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/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/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/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":[]}