@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/Tabs/TabLink.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.cjs","names":["React","_interopRequireWildcard","require","_reactRouterDom","_styledComponents","_interopRequireDefault","_NotificationDot","_types","_styles","_zIndexes","_common","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","OptionalLineWrapperWithIcon","styled","div","_taggedTemplateLiteral2","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","forwardRef","_ref","ref","to","_ref$disabled","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","_ref$showNotification","showNotificationDot","_ref$size","size","Size","Small","endLineIcon","onActiveStateChanged","_ref$variant","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","_objectWithoutProperties2","_useState","useState","_useState2","_slicedToArray2","activeState","setActiveState","jsx","onMouseEnter","onMouseLeave","jsxs","Fragment","NavLink","toString","_ref2","isActive","onMouseDown","defaultOnMouseDownHandler","tabIndex","role","onClick","NotificationDot","_default","exports"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { NavLink, NavLinkProps } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport { NotificationDot } from '../NotificationDot';\r\nimport { Size } from '../types';\r\nimport { COLORS, focusStyles } from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { useState } from 'react';\r\n\r\ntype TabLinkProps = {\r\n  disabled?: boolean;\r\n  forceDeactivate?: boolean;\r\n  requiredLine: string;\r\n  optionalLine?: string;\r\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\r\n  endLineIcon?: React.ReactNode;\r\n  onLinkClick?: (e: React.MouseEvent) => void;\r\n  testId?: string;\r\n  onActiveStateChanged?: (state: boolean) => void;\r\n  showNotificationDot?: boolean;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  variant?: 'positive' | 'critical';\r\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\r\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\r\n} & NavLinkProps;\r\n\r\nconst OptionalLineWrapperWithIcon = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span {\r\n    margin: 0 0 0 4px !important;\r\n    font-size: 12px;\r\n    line-height: 16px;\r\n  }\r\n`;\r\n\r\nconst TopWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span:not(:only-child) {\r\n    width: calc(100% - 32px);\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div`\r\n  width: 100%;\r\n  margin: auto 0 auto 16px !important;\r\n`;\r\n\r\nconst StyledNotification = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst EndLineIcon = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst OptionalLineWrapper = styled.div`\r\n  font-size: 12px;\r\n`;\r\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\r\nconst Wrapper = styled.div<{ disabled: boolean }>`\r\n  position: relative;\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    a {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  a {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n\r\n    font-size: 16px;\r\n    line-height: 120%;\r\n    color: ${COLORS.neutral_600};\r\n\r\n    background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\r\n    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\r\n    border-left: 1px solid transparent;\r\n    text-decoration: none;\r\n    position: relative;\r\n    border-radius: 2px;\r\n\r\n    &:not(:last-child) {\r\n      margin-bottom: 4px;\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &.active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${COLORS.neutral_20};\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n\r\n    &:hover, &.dropdown-hover {\r\n      z-index: ${Z_INDEXES.hover};\r\n      background-color: ${COLORS.primary_20};\r\n      color: ${COLORS.primary_600};\r\n    }\r\n\r\n    &:active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_800};\r\n    }\r\n\r\n    &.active {\r\n      &::after {\r\n        position: absolute;\r\n        content: ' ';\r\n        width: 4px;\r\n        top: 6px;\r\n        bottom: 6px;\r\n        left: 3px;\r\n        background-color: ${COLORS.primary_500};\r\n\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      &::after {\r\n        background-color: ${COLORS.primary_600};\r\n      }\r\n    }\r\n\r\n    &.active:active {\r\n      background-color: ${COLORS.primary_100};\r\n\r\n      &::after {\r\n        background-color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n\r\n    &.disabled {\r\n      background-color: ${COLORS.white};\r\n      color: ${COLORS.neutral_300};\r\n\r\n      span {\r\n        color: ${COLORS.neutral_300};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${COLORS.neutral_300};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\r\n  to,\r\n  disabled = false,\r\n  requiredLine,\r\n  optionalLine,\r\n  OptionalLineIcon,\r\n  onLinkClick,\r\n  forceDeactivate,\r\n  testId,\r\n  showNotificationDot = false,\r\n  size = Size.Small,\r\n  endLineIcon,\r\n  onActiveStateChanged,\r\n  variant = 'critical',\r\n  children,\r\n  containerOnMouseEnter,\r\n  containerOnMouseLeave,\r\n  className,\r\n  ...rest\r\n}: TabLinkProps, ref) => {\r\n  \r\n  const [activeState, setActiveState] = useState<boolean>(false);\r\n\r\n  return (\r\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\r\n      <>\r\n        <NavLink\r\n          to={forceDeactivate ? 'invalid' : to.toString()}\r\n          //disabled={disabled}\r\n          className={({ isActive }) => {\r\n            onActiveStateChanged && onActiveStateChanged(activeState);\r\n            if (forceDeactivate) {\r\n              if (disabled) return 'disabled';\r\n              else return '';\r\n            }\r\n\r\n            if (isActive != activeState) setActiveState(isActive);\r\n\r\n            return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\r\n          }}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          tabIndex={disabled ? -1 : 0}\r\n          role=\"tab\"\r\n          aria-selected={activeState}\r\n          onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\r\n          ref={ref}\r\n          data-testid={testId}\r\n          {...rest}>\r\n          <TextContainer>\r\n            <TopWrapper>\r\n              <span>{requiredLine}</span>\r\n            </TopWrapper>\r\n            {optionalLine && OptionalLineIcon ? (\r\n              <OptionalLineWrapperWithIcon>\r\n                {OptionalLineIcon}\r\n                {!!optionalLine && <span>{optionalLine}</span>}\r\n              </OptionalLineWrapperWithIcon>\r\n            ) : optionalLine ? (\r\n              <OptionalLineWrapper>\r\n                <span>{optionalLine}</span>\r\n              </OptionalLineWrapper>\r\n            ) : (\r\n              <></>\r\n            )}\r\n          </TextContainer>\r\n          <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\r\n          {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\r\n        </NavLink>\r\n        {children}\r\n      </>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default TabLink;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TabLink.cjs","names":["React","_interopRequireWildcard","require","_reactRouterDom","_styledComponents","_interopRequireDefault","_NotificationDot","_types","_styles","_zIndexes","_common","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","OptionalLineWrapperWithIcon","styled","div","_taggedTemplateLiteral2","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","props","COLORS","getColor","theme","disabled","focusStyles","Z_INDEXES","active","hover","TabLink","forwardRef","_ref","ref","to","_ref$disabled","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","_ref$showNotification","showNotificationDot","_ref$size","size","Size","Small","endLineIcon","onActiveStateChanged","_ref$variant","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","_objectWithoutProperties2","_useState","useState","_useState2","_slicedToArray2","activeState","setActiveState","jsx","onMouseEnter","onMouseLeave","jsxs","Fragment","NavLink","toString","_ref2","isActive","onMouseDown","defaultOnMouseDownHandler","tabIndex","role","onClick","NotificationDot","_default","exports"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { NavLink, NavLinkProps } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport { NotificationDot } from '../NotificationDot';\r\nimport { Size } from '../types';\r\nimport { COLORS, focusStyles } from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { useState } from 'react';\r\n\r\ntype TabLinkProps = {\r\n  disabled?: boolean;\r\n  forceDeactivate?: boolean;\r\n  requiredLine: string;\r\n  optionalLine?: string;\r\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\r\n  endLineIcon?: React.ReactNode;\r\n  onLinkClick?: (e: React.MouseEvent) => void;\r\n  testId?: string;\r\n  onActiveStateChanged?: (state: boolean) => void;\r\n  showNotificationDot?: boolean;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  variant?: 'positive' | 'critical';\r\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\r\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\r\n} & NavLinkProps;\r\n\r\nconst OptionalLineWrapperWithIcon = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span {\r\n    margin: 0 0 0 4px !important;\r\n    font-size: 12px;\r\n    line-height: 16px;\r\n  }\r\n`;\r\n\r\nconst TopWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span:not(:only-child) {\r\n    width: calc(100% - 32px);\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div`\r\n  width: 100%;\r\n  margin: auto 0 auto 16px !important;\r\n`;\r\n\r\nconst StyledNotification = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst EndLineIcon = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst OptionalLineWrapper = styled.div`\r\n  font-size: 12px;\r\n`;\r\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\r\nconst Wrapper = styled.div<{ disabled: boolean }>`\r\n  position: relative;\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    a {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  a {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n\r\n    font-size: 16px;\r\n    line-height: 120%;\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n\r\n    background-color: ${(props) => (props.disabled ? COLORS.getColor('neutral_100', props.theme) : 'transparent')};\r\n    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\r\n    border-left: 1px solid transparent;\r\n    text-decoration: none;\r\n    position: relative;\r\n    border-radius: 2px;\r\n\r\n    &:not(:last-child) {\r\n      margin-bottom: 4px;\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &.active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n\r\n    &:hover, &.dropdown-hover {\r\n      z-index: ${Z_INDEXES.hover};\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\r\n    &:active {\r\n      z-index: ${Z_INDEXES.active};\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\r\n    &.active {\r\n      &::after {\r\n        position: absolute;\r\n        content: ' ';\r\n        width: 4px;\r\n        top: 6px;\r\n        bottom: 6px;\r\n        left: 3px;\r\n        background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      &::after {\r\n        background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n      }\r\n    }\r\n\r\n    &.active:active {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      &::after {\r\n        background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n\r\n    &.disabled {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n      span {\r\n        color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\r\n  to,\r\n  disabled = false,\r\n  requiredLine,\r\n  optionalLine,\r\n  OptionalLineIcon,\r\n  onLinkClick,\r\n  forceDeactivate,\r\n  testId,\r\n  showNotificationDot = false,\r\n  size = Size.Small,\r\n  endLineIcon,\r\n  onActiveStateChanged,\r\n  variant = 'critical',\r\n  children,\r\n  containerOnMouseEnter,\r\n  containerOnMouseLeave,\r\n  className,\r\n  ...rest\r\n}: TabLinkProps, ref) => {\r\n  \r\n  const [activeState, setActiveState] = useState<boolean>(false);\r\n\r\n  return (\r\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\r\n      <>\r\n        <NavLink\r\n          to={forceDeactivate ? 'invalid' : to.toString()}\r\n          //disabled={disabled}\r\n          className={({ isActive }) => {\r\n            onActiveStateChanged && onActiveStateChanged(activeState);\r\n            if (forceDeactivate) {\r\n              if (disabled) return 'disabled';\r\n              else return '';\r\n            }\r\n\r\n            if (isActive != activeState) setActiveState(isActive);\r\n\r\n            return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\r\n          }}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          tabIndex={disabled ? -1 : 0}\r\n          role=\"tab\"\r\n          aria-selected={activeState}\r\n          onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\r\n          ref={ref}\r\n          data-testid={testId}\r\n          {...rest}>\r\n          <TextContainer>\r\n            <TopWrapper>\r\n              <span>{requiredLine}</span>\r\n            </TopWrapper>\r\n            {optionalLine && OptionalLineIcon ? (\r\n              <OptionalLineWrapperWithIcon>\r\n                {OptionalLineIcon}\r\n                {!!optionalLine && <span>{optionalLine}</span>}\r\n              </OptionalLineWrapperWithIcon>\r\n            ) : optionalLine ? (\r\n              <OptionalLineWrapper>\r\n                <span>{optionalLine}</span>\r\n              </OptionalLineWrapper>\r\n            ) : (\r\n              <></>\r\n            )}\r\n          </TextContainer>\r\n          <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\r\n          {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\r\n        </NavLink>\r\n        {children}\r\n      </>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default TabLink;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tabs/TabLink.js

@@ -25,11 +25,41 @@ var StyledNotification = styled.div(_templateObject4 || (_templateObject4 = _tag
 var EndLineIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 15px 0 0 !important;\n"])));
 var OptionalLineWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: 12px;\n"])));
 //replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
-var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    font-size: 16px;\n    line-height: 120%;\n    color: ", ";\n\n    background-color: ", ";\n    cursor: ", ";\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n\n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ", ";\n    }\n\n    &:hover, &.dropdown-hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.disabled {\n      background-color: ", ";\n      color: ", ";\n\n      span {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), COLORS.neutral_600, function (props) {
-  return props.disabled ? COLORS.neutral_100 : 'transparent';
+var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    font-size: 16px;\n    line-height: 120%;\n    color: ", ";\n\n    background-color: ", ";\n    cursor: ", ";\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n\n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ", ";\n    }\n\n    &:hover, &.dropdown-hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.disabled {\n      background-color: ", ";\n      color: ", ";\n\n      span {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
+}, function (props) {
+  return props.disabled ? COLORS.getColor('neutral_100', props.theme) : 'transparent';
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
-}, focusStyles, Z_INDEXES.active, COLORS.neutral_20, COLORS.primary_20, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
+}, focusStyles, Z_INDEXES.active, function (props) {
+  return COLORS.getColor('neutral_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, Z_INDEXES.hover, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_600', props.theme);
+}, Z_INDEXES.active, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_600', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+});
 var TabLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var to = _ref.to,
     _ref$disabled = _ref.disabled,

package/dist/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","OptionalLineWrapperWithIcon","div","_templateObject","_taggedTemplateLiteral","TopWrapper","_templateObject2","TextContainer","_templateObject3","StyledNotification","_templateObject4","EndLineIcon","_templateObject5","OptionalLineWrapper","_templateObject6","Wrapper","_templateObject7","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","forwardRef","_ref","ref","to","_ref$disabled","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","_ref$showNotification","showNotificationDot","_ref$size","size","Small","endLineIcon","onActiveStateChanged","_ref$variant","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","activeState","setActiveState","onMouseEnter","onMouseLeave","_objectSpread","toString","_ref2","isActive","onMouseDown","tabIndex","role","onClick","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { NavLink, NavLinkProps } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport { NotificationDot } from '../NotificationDot';\r\nimport { Size } from '../types';\r\nimport { COLORS, focusStyles } from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { useState } from 'react';\r\n\r\ntype TabLinkProps = {\r\n  disabled?: boolean;\r\n  forceDeactivate?: boolean;\r\n  requiredLine: string;\r\n  optionalLine?: string;\r\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\r\n  endLineIcon?: React.ReactNode;\r\n  onLinkClick?: (e: React.MouseEvent) => void;\r\n  testId?: string;\r\n  onActiveStateChanged?: (state: boolean) => void;\r\n  showNotificationDot?: boolean;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  variant?: 'positive' | 'critical';\r\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\r\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\r\n} & NavLinkProps;\r\n\r\nconst OptionalLineWrapperWithIcon = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span {\r\n    margin: 0 0 0 4px !important;\r\n    font-size: 12px;\r\n    line-height: 16px;\r\n  }\r\n`;\r\n\r\nconst TopWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span:not(:only-child) {\r\n    width: calc(100% - 32px);\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div`\r\n  width: 100%;\r\n  margin: auto 0 auto 16px !important;\r\n`;\r\n\r\nconst StyledNotification = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst EndLineIcon = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst OptionalLineWrapper = styled.div`\r\n  font-size: 12px;\r\n`;\r\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\r\nconst Wrapper = styled.div<{ disabled: boolean }>`\r\n  position: relative;\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    a {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  a {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n\r\n    font-size: 16px;\r\n    line-height: 120%;\r\n    color: ${COLORS.neutral_600};\r\n\r\n    background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\r\n    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\r\n    border-left: 1px solid transparent;\r\n    text-decoration: none;\r\n    position: relative;\r\n    border-radius: 2px;\r\n\r\n    &:not(:last-child) {\r\n      margin-bottom: 4px;\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &.active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${COLORS.neutral_20};\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n\r\n    &:hover, &.dropdown-hover {\r\n      z-index: ${Z_INDEXES.hover};\r\n      background-color: ${COLORS.primary_20};\r\n      color: ${COLORS.primary_600};\r\n    }\r\n\r\n    &:active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_800};\r\n    }\r\n\r\n    &.active {\r\n      &::after {\r\n        position: absolute;\r\n        content: ' ';\r\n        width: 4px;\r\n        top: 6px;\r\n        bottom: 6px;\r\n        left: 3px;\r\n        background-color: ${COLORS.primary_500};\r\n\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      &::after {\r\n        background-color: ${COLORS.primary_600};\r\n      }\r\n    }\r\n\r\n    &.active:active {\r\n      background-color: ${COLORS.primary_100};\r\n\r\n      &::after {\r\n        background-color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n\r\n    &.disabled {\r\n      background-color: ${COLORS.white};\r\n      color: ${COLORS.neutral_300};\r\n\r\n      span {\r\n        color: ${COLORS.neutral_300};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${COLORS.neutral_300};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\r\n  to,\r\n  disabled = false,\r\n  requiredLine,\r\n  optionalLine,\r\n  OptionalLineIcon,\r\n  onLinkClick,\r\n  forceDeactivate,\r\n  testId,\r\n  showNotificationDot = false,\r\n  size = Size.Small,\r\n  endLineIcon,\r\n  onActiveStateChanged,\r\n  variant = 'critical',\r\n  children,\r\n  containerOnMouseEnter,\r\n  containerOnMouseLeave,\r\n  className,\r\n  ...rest\r\n}: TabLinkProps, ref) => {\r\n  \r\n  const [activeState, setActiveState] = useState<boolean>(false);\r\n\r\n  return (\r\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\r\n      <>\r\n        <NavLink\r\n          to={forceDeactivate ? 'invalid' : to.toString()}\r\n          //disabled={disabled}\r\n          className={({ isActive }) => {\r\n            onActiveStateChanged && onActiveStateChanged(activeState);\r\n            if (forceDeactivate) {\r\n              if (disabled) return 'disabled';\r\n              else return '';\r\n            }\r\n\r\n            if (isActive != activeState) setActiveState(isActive);\r\n\r\n            return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\r\n          }}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          tabIndex={disabled ? -1 : 0}\r\n          role=\"tab\"\r\n          aria-selected={activeState}\r\n          onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\r\n          ref={ref}\r\n          data-testid={testId}\r\n          {...rest}>\r\n          <TextContainer>\r\n            <TopWrapper>\r\n              <span>{requiredLine}</span>\r\n            </TopWrapper>\r\n            {optionalLine && OptionalLineIcon ? (\r\n              <OptionalLineWrapperWithIcon>\r\n                {OptionalLineIcon}\r\n                {!!optionalLine && <span>{optionalLine}</span>}\r\n              </OptionalLineWrapperWithIcon>\r\n            ) : optionalLine ? (\r\n              <OptionalLineWrapper>\r\n                <span>{optionalLine}</span>\r\n              </OptionalLineWrapper>\r\n            ) : (\r\n              <></>\r\n            )}\r\n          </TextContainer>\r\n          <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\r\n          {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\r\n        </NavLink>\r\n        {children}\r\n      </>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default TabLink;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","OptionalLineWrapperWithIcon","div","_templateObject","_taggedTemplateLiteral","TopWrapper","_templateObject2","TextContainer","_templateObject3","StyledNotification","_templateObject4","EndLineIcon","_templateObject5","OptionalLineWrapper","_templateObject6","Wrapper","_templateObject7","props","getColor","theme","disabled","active","hover","TabLink","forwardRef","_ref","ref","to","_ref$disabled","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","_ref$showNotification","showNotificationDot","_ref$size","size","Small","endLineIcon","onActiveStateChanged","_ref$variant","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","activeState","setActiveState","onMouseEnter","onMouseLeave","_objectSpread","toString","_ref2","isActive","onMouseDown","tabIndex","role","onClick","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { NavLink, NavLinkProps } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport { NotificationDot } from '../NotificationDot';\r\nimport { Size } from '../types';\r\nimport { COLORS, focusStyles } from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { useState } from 'react';\r\n\r\ntype TabLinkProps = {\r\n  disabled?: boolean;\r\n  forceDeactivate?: boolean;\r\n  requiredLine: string;\r\n  optionalLine?: string;\r\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\r\n  endLineIcon?: React.ReactNode;\r\n  onLinkClick?: (e: React.MouseEvent) => void;\r\n  testId?: string;\r\n  onActiveStateChanged?: (state: boolean) => void;\r\n  showNotificationDot?: boolean;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  variant?: 'positive' | 'critical';\r\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\r\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\r\n} & NavLinkProps;\r\n\r\nconst OptionalLineWrapperWithIcon = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span {\r\n    margin: 0 0 0 4px !important;\r\n    font-size: 12px;\r\n    line-height: 16px;\r\n  }\r\n`;\r\n\r\nconst TopWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span:not(:only-child) {\r\n    width: calc(100% - 32px);\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div`\r\n  width: 100%;\r\n  margin: auto 0 auto 16px !important;\r\n`;\r\n\r\nconst StyledNotification = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst EndLineIcon = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst OptionalLineWrapper = styled.div`\r\n  font-size: 12px;\r\n`;\r\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\r\nconst Wrapper = styled.div<{ disabled: boolean }>`\r\n  position: relative;\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    a {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  a {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n\r\n    font-size: 16px;\r\n    line-height: 120%;\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n\r\n    background-color: ${(props) => (props.disabled ? COLORS.getColor('neutral_100', props.theme) : 'transparent')};\r\n    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\r\n    border-left: 1px solid transparent;\r\n    text-decoration: none;\r\n    position: relative;\r\n    border-radius: 2px;\r\n\r\n    &:not(:last-child) {\r\n      margin-bottom: 4px;\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &.active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n\r\n    &:hover, &.dropdown-hover {\r\n      z-index: ${Z_INDEXES.hover};\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\r\n    &:active {\r\n      z-index: ${Z_INDEXES.active};\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\r\n    &.active {\r\n      &::after {\r\n        position: absolute;\r\n        content: ' ';\r\n        width: 4px;\r\n        top: 6px;\r\n        bottom: 6px;\r\n        left: 3px;\r\n        background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      &::after {\r\n        background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n      }\r\n    }\r\n\r\n    &.active:active {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      &::after {\r\n        background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n\r\n    &.disabled {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n      span {\r\n        color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\r\n  to,\r\n  disabled = false,\r\n  requiredLine,\r\n  optionalLine,\r\n  OptionalLineIcon,\r\n  onLinkClick,\r\n  forceDeactivate,\r\n  testId,\r\n  showNotificationDot = false,\r\n  size = Size.Small,\r\n  endLineIcon,\r\n  onActiveStateChanged,\r\n  variant = 'critical',\r\n  children,\r\n  containerOnMouseEnter,\r\n  containerOnMouseLeave,\r\n  className,\r\n  ...rest\r\n}: TabLinkProps, ref) => {\r\n  \r\n  const [activeState, setActiveState] = useState<boolean>(false);\r\n\r\n  return (\r\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\r\n      <>\r\n        <NavLink\r\n          to={forceDeactivate ? 'invalid' : to.toString()}\r\n          //disabled={disabled}\r\n          className={({ isActive }) => {\r\n            onActiveStateChanged && onActiveStateChanged(activeState);\r\n            if (forceDeactivate) {\r\n              if (disabled) return 'disabled';\r\n              else return '';\r\n            }\r\n\r\n            if (isActive != activeState) setActiveState(isActive);\r\n\r\n            return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\r\n          }}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          tabIndex={disabled ? -1 : 0}\r\n          role=\"tab\"\r\n          aria-selected={activeState}\r\n          onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\r\n          ref={ref}\r\n          data-testid={testId}\r\n          {...rest}>\r\n          <TextContainer>\r\n            <TopWrapper>\r\n              <span>{requiredLine}</span>\r\n            </TopWrapper>\r\n            {optionalLine && OptionalLineIcon ? (\r\n              <OptionalLineWrapperWithIcon>\r\n                {OptionalLineIcon}\r\n                {!!optionalLine && <span>{optionalLine}</span>}\r\n              </OptionalLineWrapperWithIcon>\r\n            ) : optionalLine ? (\r\n              <OptionalLineWrapper>\r\n                <span>{optionalLine}</span>\r\n              </OptionalLineWrapper>\r\n            ) : (\r\n              <></>\r\n            )}\r\n          </TextContainer>\r\n          <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\r\n          {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\r\n        </NavLink>\r\n        {children}\r\n      </>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default TabLink;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tag/Tag.cjs

@@ -22,7 +22,31 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
   return props.isLabelPresent ? '64px' : '';
-}, _.COLORS.neutral_100, _.COLORS.neutral_600, _.COLORS.correct_100, _.COLORS.correct_600, _.COLORS.warning_100, _.COLORS.warning_600, _.COLORS.critical_100, _.COLORS.critical_600, _.COLORS.accent1_100, _.COLORS.accent1_600, _.COLORS.accent2_100, _.COLORS.accent2_600);
+}, function (props) {
+  return _.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('neutral_600', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('correct_100', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('correct_600', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('warning_100', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('warning_600', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('critical_100', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('critical_600', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('accent1_100', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('accent1_600', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('accent2_100', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('accent2_600', props.theme);
+});
 var IconContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
 var TextContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), (0, _.ComponentXSStyling)(_.ComponentTextStyle.Bold, null));
 var Tag = function Tag(_ref) {

package/dist/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","Container","styled","div","_taggedTemplateLiteral2","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","ComponentXSStyling","ComponentTextStyle","Bold","Tag","_ref","label","icon","_ref$variant","variant","className","rest","_objectWithoutProperties2","cls","concat","jsxs","children","jsx","propTypes","_propTypes","string","node","oneOf","_default","exports"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${COLORS.neutral_100};\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n  &.positive {\r\n    background-color: ${COLORS.correct_100};\r\n    color: ${COLORS.correct_600};\r\n  }\r\n  &.warning {\r\n    background-color: ${COLORS.warning_100};\r\n    color: ${COLORS.warning_600};\r\n  }\r\n  &.critical {\r\n    background-color: ${COLORS.critical_100};\r\n    color: ${COLORS.critical_600};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${COLORS.accent1_100};\r\n    color: ${COLORS.accent1_600};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${COLORS.accent2_100};\r\n    color: ${COLORS.accent2_600};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer variant={variant} icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,CAAA,GAAAH,OAAA;AAAoE,IAAAI,WAAA,GAAAJ,OAAA;AAAA,IAAAK,SAAA;AAAA,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,cAAAR,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,aAAA/B,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAEpE,IAAMkC,SAAS,GAAGC,4BAAM,CAACC,GAAG,CAAAxC,eAAA,KAAAA,eAAA,OAAAyC,uBAAA,8oBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCC,QAAM,CAACC,WAAW,EAC7BD,QAAM,CAACE,WAAW,EAGPF,QAAM,CAACG,WAAW,EAC7BH,QAAM,CAACI,WAAW,EAGPJ,QAAM,CAACK,WAAW,EAC7BL,QAAM,CAACM,WAAW,EAGPN,QAAM,CAACO,YAAY,EAC9BP,QAAM,CAACQ,YAAY,EAGRR,QAAM,CAACS,WAAW,EAC7BT,QAAM,CAACU,WAAW,EAGPV,QAAM,CAACW,WAAW,EAC7BX,QAAM,CAACY,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGlB,4BAAM,CAACC,GAAG,CAAAvC,gBAAA,KAAAA,gBAAA,OAAAwC,uBAAA,4HAQ/B;AAED,IAAMiB,aAAa,GAAGnB,4BAAM,CAACC,GAAG,CAAAtC,gBAAA,KAAAA,gBAAA,OAAAuC,uBAAA,8IAM5B,IAAAkB,oBAAkB,EAACC,oBAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CACpD;AAcD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsCA,CAAAC,IAAA,EAA6D;EAAA,IAAxDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAAC,YAAA,GAAAH,IAAA,CAAEI,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAC,SAAS,GAAAA,YAAA;IAAEE,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAKC,IAAI,OAAAC,yBAAA,aAAAP,IAAA,EAAAhE,SAAA;EACjG,IAAMwE,GAAG,MAAAC,MAAA,CAAMJ,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,OAAAI,MAAA,CAAIL,OAAO,CAAE;EAC3C,oBACE,IAAArE,WAAA,CAAA2E,IAAA,EAACnC,SAAS,EAAAP,aAAA,CAAAA,aAAA;IAACoC,OAAO,EAAEA,OAAQ;IAACxB,cAAc,EAAE,CAAC,CAACqB,KAAM;IAACI,SAAS,EAAEG;EAAI,GAAKF,IAAI;IAAAK,QAAA,GAC3ET,IAAI,iBAAI,IAAAnE,WAAA,CAAA6E,GAAA,EAAClB,aAAa;MAACU,OAAO,EAAEA,OAAQ;MAAC,eAAa,eAAgB;MAAAO,QAAA,EAClET;IAAI,CACQ,CAAC,EAEjBD,KAAK,iBAAI,IAAAlE,WAAA,CAAA6E,GAAA,EAACjB,aAAa;MAACS,OAAO,EAAEA,OAAQ;MAACF,IAAI,EAAEA,IAAK;MAAAS,QAAA,EACjDV;IAAK,CACO,CAAC;EAAA,EAET,CAAC;AAEhB,CAAC;AAACF,GAAA,CAAAc,SAAA;EArBAZ,KAAK,EAAAa,UAAA,YAAAC,MAAA;EAELb,IAAI,EAAAY,UAAA,YAAAE,IAAA;EAEJZ,OAAO,EAAAU,UAAA,YAAAG,KAAA,EARiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAAA,IAAAC,QAAA,GA2BlFnB,GAAG;AAAAoB,OAAA,cAAAD,QAAA","ignoreList":[]}
+{"version":3,"file":"Tag.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","Container","styled","div","_taggedTemplateLiteral2","props","isLabelPresent","COLORS","getColor","theme","IconContainer","TextContainer","ComponentXSStyling","ComponentTextStyle","Bold","Tag","_ref","label","icon","_ref$variant","variant","className","rest","_objectWithoutProperties2","cls","concat","jsxs","children","jsx","propTypes","_propTypes","string","node","oneOf","_default","exports"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n  &.positive {\r\n    background-color: ${props => COLORS.getColor('correct_100', props.theme)};\r\n    color: ${props => COLORS.getColor('correct_600', props.theme)};\r\n  }\r\n  &.warning {\r\n    background-color: ${props => COLORS.getColor('warning_100', props.theme)};\r\n    color: ${props => COLORS.getColor('warning_600', props.theme)};\r\n  }\r\n  &.critical {\r\n    background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n    color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${props => COLORS.getColor('accent2_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent2_600', props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer variant={variant} icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tag/Tag.js

@@ -13,7 +13,31 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
   return props.isLabelPresent ? '64px' : '';
-}, COLORS.neutral_100, COLORS.neutral_600, COLORS.correct_100, COLORS.correct_600, COLORS.warning_100, COLORS.warning_600, COLORS.critical_100, COLORS.critical_600, COLORS.accent1_100, COLORS.accent1_600, COLORS.accent2_100, COLORS.accent2_600);
+}, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
+}, function (props) {
+  return COLORS.getColor('correct_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('correct_600', props.theme);
+}, function (props) {
+  return COLORS.getColor('warning_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('warning_600', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_600', props.theme);
+}, function (props) {
+  return COLORS.getColor('accent1_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('accent1_600', props.theme);
+}, function (props) {
+  return COLORS.getColor('accent2_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('accent2_600', props.theme);
+});
 var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
 var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
 var Tag = function Tag(_ref) {

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","jsx","_jsx","jsxs","_jsxs","Container","div","_templateObject","_taggedTemplateLiteral","props","isLabelPresent","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","_templateObject2","TextContainer","_templateObject3","Bold","Tag","_ref","label","icon","_ref$variant","variant","className","rest","_objectWithoutProperties","_excluded","cls","concat","_objectSpread","children","propTypes","_pt","string","node","oneOf"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${COLORS.neutral_100};\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n  &.positive {\r\n    background-color: ${COLORS.correct_100};\r\n    color: ${COLORS.correct_600};\r\n  }\r\n  &.warning {\r\n    background-color: ${COLORS.warning_100};\r\n    color: ${COLORS.warning_600};\r\n  }\r\n  &.critical {\r\n    background-color: ${COLORS.critical_100};\r\n    color: ${COLORS.critical_600};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${COLORS.accent1_100};\r\n    color: ${COLORS.accent1_600};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${COLORS.accent2_100};\r\n    color: ${COLORS.accent2_600};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer variant={variant} icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,IAAI;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEpE,IAAMC,SAAS,GAAGR,MAAM,CAACS,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,koBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCZ,MAAM,CAACa,WAAW,EAC7Bb,MAAM,CAACc,WAAW,EAGPd,MAAM,CAACe,WAAW,EAC7Bf,MAAM,CAACgB,WAAW,EAGPhB,MAAM,CAACiB,WAAW,EAC7BjB,MAAM,CAACkB,WAAW,EAGPlB,MAAM,CAACmB,YAAY,EAC9BnB,MAAM,CAACoB,YAAY,EAGRpB,MAAM,CAACqB,WAAW,EAC7BrB,MAAM,CAACsB,WAAW,EAGPtB,MAAM,CAACuB,WAAW,EAC7BvB,MAAM,CAACwB,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAG1B,MAAM,CAACS,GAAG,CAAAkB,gBAAA,KAAAA,gBAAA,GAAAhB,sBAAA,gHAQ/B;AAED,IAAMiB,aAAa,GAAG5B,MAAM,CAACS,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAlB,sBAAA,kIAM5BR,kBAAkB,CAACD,kBAAkB,CAAC4B,IAAI,EAAE,IAAI,CAAC,CACpD;AAcD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsCA,CAAAC,IAAA,EAA6D;EAAA,IAAxDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAAC,YAAA,GAAAH,IAAA,CAAEI,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAC,SAAS,GAAAA,YAAA;IAAEE,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAKC,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EACjG,IAAMC,GAAG,MAAAC,MAAA,CAAML,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,OAAAK,MAAA,CAAIN,OAAO,CAAE;EAC3C,oBACE7B,KAAA,CAACC,SAAS,EAAAmC,aAAA,CAAAA,aAAA;IAACP,OAAO,EAAEA,OAAQ;IAACvB,cAAc,EAAE,CAAC,CAACoB,KAAM;IAACI,SAAS,EAAEI;EAAI,GAAKH,IAAI;IAAAM,QAAA,GAC3EV,IAAI,iBAAI7B,IAAA,CAACqB,aAAa;MAACU,OAAO,EAAEA,OAAQ;MAAC,eAAa,eAAgB;MAAAQ,QAAA,EAClEV;IAAI,CACQ,CAAC,EAEjBD,KAAK,iBAAI5B,IAAA,CAACuB,aAAa;MAACQ,OAAO,EAAEA,OAAQ;MAACF,IAAI,EAAEA,IAAK;MAAAU,QAAA,EACjDX;IAAK,CACO,CAAC;EAAA,EAET,CAAC;AAEhB,CAAC;AAACF,GAAA,CAAAc,SAAA;EArBAZ,KAAK,EAAAa,GAAA,CAAAC,MAAA;EAELb,IAAI,EAAAY,GAAA,CAAAE,IAAA;EAEJZ,OAAO,EAAAU,GAAA,CAAAG,KAAA,EARiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AA2BjG,eAAelB,GAAG","ignoreList":[]}
+{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","jsx","_jsx","jsxs","_jsxs","Container","div","_templateObject","_taggedTemplateLiteral","props","isLabelPresent","getColor","theme","IconContainer","_templateObject2","TextContainer","_templateObject3","Bold","Tag","_ref","label","icon","_ref$variant","variant","className","rest","_objectWithoutProperties","_excluded","cls","concat","_objectSpread","children","propTypes","_pt","string","node","oneOf"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n  &.positive {\r\n    background-color: ${props => COLORS.getColor('correct_100', props.theme)};\r\n    color: ${props => COLORS.getColor('correct_600', props.theme)};\r\n  }\r\n  &.warning {\r\n    background-color: ${props => COLORS.getColor('warning_100', props.theme)};\r\n    color: ${props => COLORS.getColor('warning_600', props.theme)};\r\n  }\r\n  &.critical {\r\n    background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n    color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${props => COLORS.getColor('accent2_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent2_600', props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer variant={variant} icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tile/Tile.cjs

@@ -20,7 +20,11 @@ var _excluded = ["header", "footer", "size", "style", "children", "className"];
 var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), _styles.COLORS.white, _styles.COLORS.neutral_200);
+var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+});
 var Tile = function Tile(_ref) {
   var header = _ref.header,
     footer = _ref.footer,

package/dist/Tile/Tile.cjs.map

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

package/dist/Tile/Tile.js

@@ -14,7 +14,11 @@ import TileBody from './TileBody';
 import { COLORS } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), COLORS.white, COLORS.neutral_200);
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+});
 var Tile = function Tile(_ref) {
   var header = _ref.header,
     footer = _ref.footer,

package/dist/Tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","names":["React","Size","styled","TileHeader","TileFooter","TileBody","COLORS","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","white","neutral_200","Tile","_ref","header","footer","_ref$size","size","Medium","style","children","className","rest","_objectWithoutProperties","_excluded","_objectSpread","concat"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport {TileProps} from './TileTypes';\r\nimport styled from 'styled-components';\r\nimport TileHeader from './TileHeader';\r\nimport TileFooter from './TileFooter';\r\nimport TileBody from './TileBody';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n  flex-direction: column;\r\n  background: ${COLORS.white};\r\n  border-radius: 8px;\r\n  border: 1px solid ${COLORS.neutral_200};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Tile: React.FunctionComponent<TileProps> = ({\r\n                                                    header,\r\n                                                    footer,\r\n                                                    size = Size.Medium,\r\n                                                    style,\r\n                                                    children,\r\n                                                    className,\r\n                                                    ...rest\r\n                                                  }) => {\r\n\r\n  return (\r\n    <Wrapper style={style}\r\n             className={`${size} ${className || ''}`}\r\n             {...rest}>\r\n      {header && <TileHeader {...header} size={size}/>}\r\n      <TileBody size={size}>\r\n        {children}\r\n      </TileBody>\r\n      {footer && <TileFooter {...footer} size={size}/>}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default Tile;\r\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAE7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,QAAQ,MAAM,YAAY;AACjC,SAAQC,MAAM,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEjC,IAAMC,OAAO,GAAGT,MAAM,CAACU,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,iNAMVR,MAAM,CAACS,KAAK,EAENT,MAAM,CAACU,WAAW,CAEvC;AAED,IAAMC,IAAwC,GAAG,SAA3CA,IAAwCA,CAAAC,IAAA,EAQU;EAAA,IAPJC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAAC,SAAA,GAAAH,IAAA,CACNI,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAGpB,IAAI,CAACsB,MAAM,GAAAF,SAAA;IAClBG,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRC,SAAS,GAAAR,IAAA,CAATQ,SAAS;IACNC,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAGzD,oBACEnB,KAAA,CAACC,OAAO,EAAAmB,aAAA,CAAAA,aAAA;IAACN,KAAK,EAAEA,KAAM;IACbE,SAAS,KAAAK,MAAA,CAAKT,IAAI,OAAAS,MAAA,CAAIL,SAAS,IAAI,EAAE;EAAG,GACpCC,IAAI;IAAAF,QAAA,GACdN,MAAM,iBAAIX,IAAA,CAACL,UAAU,EAAA2B,aAAA,CAAAA,aAAA,KAAKX,MAAM;MAAEG,IAAI,EAAEA;IAAK,EAAC,CAAC,eAChDd,IAAA,CAACH,QAAQ;MAACiB,IAAI,EAAEA,IAAK;MAAAG,QAAA,EAClBA;IAAQ,CACD,CAAC,EACVL,MAAM,iBAAIZ,IAAA,CAACJ,UAAU,EAAA0B,aAAA,CAAAA,aAAA,KAAKV,MAAM;MAAEE,IAAI,EAAEA;IAAK,EAAC,CAAC;EAAA,EACzC,CAAC;AAEd,CAAC;AAGD,eAAeL,IAAI","ignoreList":[]}
+{"version":3,"file":"Tile.js","names":["React","Size","styled","TileHeader","TileFooter","TileBody","COLORS","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","Tile","_ref","header","footer","_ref$size","size","Medium","style","children","className","rest","_objectWithoutProperties","_excluded","_objectSpread","concat"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport {TileProps} from './TileTypes';\r\nimport styled from 'styled-components';\r\nimport TileHeader from './TileHeader';\r\nimport TileFooter from './TileFooter';\r\nimport TileBody from './TileBody';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n  border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Tile: React.FunctionComponent<TileProps> = ({\r\n                                                    header,\r\n                                                    footer,\r\n                                                    size = Size.Medium,\r\n                                                    style,\r\n                                                    children,\r\n                                                    className,\r\n                                                    ...rest\r\n                                                  }) => {\r\n\r\n  return (\r\n    <Wrapper style={style}\r\n             className={`${size} ${className || ''}`}\r\n             {...rest}>\r\n      {header && <TileHeader {...header} size={size}/>}\r\n      <TileBody size={size}>\r\n        {children}\r\n      </TileBody>\r\n      {footer && <TileFooter {...footer} size={size}/>}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default Tile;\r\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAE7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,QAAQ,MAAM,YAAY;AACjC,SAAQC,MAAM,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEjC,IAAMC,OAAO,GAAGT,MAAM,CAACU,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,iNAMV,UAAAC,KAAK;EAAA,OAAIT,MAAM,CAACU,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAExC,UAAAF,KAAK;EAAA,OAAIT,MAAM,CAACU,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAEzE;AAED,IAAMC,IAAwC,GAAG,SAA3CA,IAAwCA,CAAAC,IAAA,EAQU;EAAA,IAPJC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAAC,SAAA,GAAAH,IAAA,CACNI,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAGrB,IAAI,CAACuB,MAAM,GAAAF,SAAA;IAClBG,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRC,SAAS,GAAAR,IAAA,CAATQ,SAAS;IACNC,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAGzD,oBACEpB,KAAA,CAACC,OAAO,EAAAoB,aAAA,CAAAA,aAAA;IAACN,KAAK,EAAEA,KAAM;IACbE,SAAS,KAAAK,MAAA,CAAKT,IAAI,OAAAS,MAAA,CAAIL,SAAS,IAAI,EAAE;EAAG,GACpCC,IAAI;IAAAF,QAAA,GACdN,MAAM,iBAAIZ,IAAA,CAACL,UAAU,EAAA4B,aAAA,CAAAA,aAAA,KAAKX,MAAM;MAAEG,IAAI,EAAEA;IAAK,EAAC,CAAC,eAChDf,IAAA,CAACH,QAAQ;MAACkB,IAAI,EAAEA,IAAK;MAAAG,QAAA,EAClBA;IAAQ,CACD,CAAC,EACVL,MAAM,iBAAIb,IAAA,CAACJ,UAAU,EAAA2B,aAAA,CAAAA,aAAA,KAAKV,MAAM;MAAEE,IAAI,EAAEA;IAAK,EAAC,CAAC;EAAA,EACzC,CAAC;AAEd,CAAC;AAGD,eAAeL,IAAI","ignoreList":[]}

package/dist/Tile/TileCommonItems.cjs

@@ -26,13 +26,17 @@ var TileNoteText = _styledComponents["default"].div(_templateObject || (_templat
 exports.TileNoteText = TileNoteText;
 var TileNoteIcon = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["display: flex;"])));
 exports.TileNoteIcon = TileNoteIcon;
-var TileNoteWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ", ";\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"])), _styles.COLORS.neutral_600, TileNoteIcon, TileNoteText, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null));
+var TileNoteWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ", ";\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_600', props.theme);
+}, TileNoteIcon, TileNoteText, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null));
 exports.TileNoteWrapper = TileNoteWrapper;
 var TileHyperLinkIcon = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["display: flex"])));
 exports.TileHyperLinkIcon = TileHyperLinkIcon;
 var TileHyperLinkText = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])([""])));
 exports.TileHyperLinkText = TileHyperLinkText;
-var TileHyperLinkWrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 28px;\n      height: 28px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
+var TileHyperLinkWrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 28px;\n      height: 28px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"])), function (props) {
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('primary_500', props.theme));
+}, TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
 exports.TileHyperLinkWrapper = TileHyperLinkWrapper;
 var RenderTileItem = function RenderTileItem(item, size) {
   var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;

package/dist/Tile/TileCommonItems.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileCommonItems.cjs","names":["_Button","require","_Toggles","_Dropdown","_react","_interopRequireDefault","_styledComponents","_styles","_HyperLink","_types","_jsxRuntime","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","TileNoteText","styled","div","_taggedTemplateLiteral2","exports","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","componentType","_item$variant","_item$shape","jsx","IconButton","variant","useTransparentBackground","shape","action","tooltip","disabled","children","icon","ToggleButton","active","onChange","defaultState","activeState","DropdownButton","type","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","jsxs","className","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","_objectWithoutProperties2","HyperLink","buttonText","Button","XSmall","XXSmall","includes","Small","Medium"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\r\n  TileDropdownButton,\r\n  TileHyperLink,\r\n  TileIconButton,\r\n  TileNote,\r\n  TileStandardButton,\r\n  TileToggleButton\r\n} from './TileTypes';\r\nimport {Button, IconButton} from '../Button';\r\nimport {ToggleButton} from '../Toggles';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS, ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {HyperLink} from '../HyperLink';\r\nimport {Size} from '../types';\r\n\r\n\r\nexport const TileNoteText = styled.div``;\r\nexport const TileNoteIcon = styled.div`display: flex;`;\r\nexport const TileNoteWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  color: ${COLORS.neutral_600};\r\n\r\n  &.small {\r\n    gap: 4px;\r\n\r\n    ${TileNoteIcon} {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n\r\n    ${TileNoteText} {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    gap: 6px;\r\n\r\n    ${TileNoteIcon} {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n\r\n    ${TileNoteText} {\r\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n  }\r\n\r\n  &.large {\r\n    gap: 8px;\r\n\r\n    ${TileNoteIcon} {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n\r\n    ${TileNoteText} {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport const TileHyperLinkIcon = styled.div`display: flex`;\r\nexport const TileHyperLinkText = styled.div``;\r\n\r\nexport const TileHyperLinkWrapper = styled.div`\r\n  width: max-content;\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\r\n  a {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    gap: 4px;\r\n  }\r\n\r\n  &.small {\r\n    ${TileHyperLinkIcon} {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n\r\n    ${TileHyperLinkText} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n    a {\r\n      gap: 4px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${TileHyperLinkIcon} {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n\r\n    ${TileHyperLinkText} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n    a {\r\n      gap: 6px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${TileHyperLinkIcon} {\r\n      width: 28px;\r\n      height: 28px;\r\n    }\r\n\r\n    ${TileHyperLinkText} {\r\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n    a {\r\n      gap: 8px;\r\n    }\r\n  }\r\n`\r\n\r\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\r\n                               size: Size,\r\n                               key: any | undefined = undefined) => {\r\n  switch (item.componentType) {\r\n    case 'icon': {\r\n      return <IconButton key={key}\r\n                         variant={item.variant ?? 'secondary'}\r\n                         useTransparentBackground={item.variant == 'secondary' ? true : false}\r\n                         shape={item.shape ?? 'circular'}\r\n                         action={item.action}\r\n                         tooltip={item.tooltip}\r\n                         disabled={item.disabled}>\r\n        {item.icon}\r\n      </IconButton>\r\n    }\r\n    case 'toggle': {\r\n      return <ToggleButton key={key}\r\n                           active={item.active}\r\n                           onChange={item.onChange}\r\n                           defaultState={item.defaultState}\r\n                           activeState={item.activeState}\r\n                           disabled={item.disabled}/>\r\n    }\r\n    case 'dropdown': {\r\n      return <DropdownButton key={key}\r\n                             type={'icon'}\r\n                             items={item.items}\r\n                             itemsType={item.itemsType}\r\n                             onClick={item.onClick}\r\n                             icon={item.icon}\r\n                             tooltip={item.tooltip}\r\n                             action={item.action}\r\n                             actionIcon={item.actionIcon}\r\n                             actionLabel={item.actionLabel}\r\n                             actionVariant={item.actionVariant}\r\n                             actionLoading={item.actionLoading}\r\n                             multiSelect={item.multiSelect}\r\n                             scrollable={item.scrollable}\r\n                             pinTopItem={item.pinTopItem}\r\n                             maxHeight={item.maxHeight}\r\n                             disabled={item.disabled}/>\r\n\r\n    }\r\n    case 'note': {\r\n      return <TileNoteWrapper key={key} className={size}>\r\n        {\r\n          item.noteIcon &&\r\n          <TileNoteIcon>\r\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\r\n          </TileNoteIcon>\r\n        }\r\n        <TileNoteText>{item.noteText}</TileNoteText>\r\n      </TileNoteWrapper>\r\n\r\n    }\r\n    case 'link': {\r\n      const {linkText, componentType, linkIcon, ...rest} = item;\r\n      return <TileHyperLinkWrapper className={size} key={key}>\r\n        <HyperLink {...rest}>\r\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\r\n          {\r\n            linkIcon &&\r\n            <TileHyperLinkIcon>\r\n              {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\r\n            </TileHyperLinkIcon>\r\n          }\r\n        </HyperLink>\r\n      </TileHyperLinkWrapper>\r\n    }\r\n    case 'button': {\r\n      const {buttonText, componentType, ...rest} = item;\r\n      return <Button key={key}\r\n                     size={[Size.XSmall, Size.XSmall, Size.XXSmall].includes(size) ? Size.Small: \r\n                      size == Size.Large ? Size.Large : Size.Medium}\r\n                     {...rest}>\r\n        {buttonText}\r\n      </Button>\r\n    }\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TileCommonItems.cjs","names":["_Button","require","_Toggles","_Dropdown","_react","_interopRequireDefault","_styledComponents","_styles","_HyperLink","_types","_jsxRuntime","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","TileNoteText","styled","div","_taggedTemplateLiteral2","exports","TileNoteIcon","TileNoteWrapper","props","COLORS","getColor","theme","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","componentType","_item$variant","_item$shape","jsx","IconButton","variant","useTransparentBackground","shape","action","tooltip","disabled","children","icon","ToggleButton","active","onChange","defaultState","activeState","DropdownButton","type","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","jsxs","className","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","_objectWithoutProperties2","HyperLink","buttonText","Button","XSmall","XXSmall","includes","Small","Medium"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\r\n  TileDropdownButton,\r\n  TileHyperLink,\r\n  TileIconButton,\r\n  TileNote,\r\n  TileStandardButton,\r\n  TileToggleButton\r\n} from './TileTypes';\r\nimport {Button, IconButton} from '../Button';\r\nimport {ToggleButton} from '../Toggles';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS, ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {HyperLink} from '../HyperLink';\r\nimport {Size} from '../types';\r\n\r\n\r\nexport const TileNoteText = styled.div``;\r\nexport const TileNoteIcon = styled.div`display: flex;`;\r\nexport const TileNoteWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n\r\n  &.small {\r\n    gap: 4px;\r\n\r\n    ${TileNoteIcon} {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n\r\n    ${TileNoteText} {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    gap: 6px;\r\n\r\n    ${TileNoteIcon} {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n\r\n    ${TileNoteText} {\r\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n  }\r\n\r\n  &.large {\r\n    gap: 8px;\r\n\r\n    ${TileNoteIcon} {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n\r\n    ${TileNoteText} {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport const TileHyperLinkIcon = styled.div`display: flex`;\r\nexport const TileHyperLinkText = styled.div``;\r\n\r\nexport const TileHyperLinkWrapper = styled.div`\r\n  width: max-content;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('primary_500', props.theme))}\r\n  a {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    gap: 4px;\r\n  }\r\n\r\n  &.small {\r\n    ${TileHyperLinkIcon} {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n\r\n    ${TileHyperLinkText} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n    a {\r\n      gap: 4px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${TileHyperLinkIcon} {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n\r\n    ${TileHyperLinkText} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n    a {\r\n      gap: 6px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${TileHyperLinkIcon} {\r\n      width: 28px;\r\n      height: 28px;\r\n    }\r\n\r\n    ${TileHyperLinkText} {\r\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n    a {\r\n      gap: 8px;\r\n    }\r\n  }\r\n`\r\n\r\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\r\n                               size: Size,\r\n                               key: any | undefined = undefined) => {\r\n  switch (item.componentType) {\r\n    case 'icon': {\r\n      return <IconButton key={key}\r\n                         variant={item.variant ?? 'secondary'}\r\n                         useTransparentBackground={item.variant == 'secondary' ? true : false}\r\n                         shape={item.shape ?? 'circular'}\r\n                         action={item.action}\r\n                         tooltip={item.tooltip}\r\n                         disabled={item.disabled}>\r\n        {item.icon}\r\n      </IconButton>\r\n    }\r\n    case 'toggle': {\r\n      return <ToggleButton key={key}\r\n                           active={item.active}\r\n                           onChange={item.onChange}\r\n                           defaultState={item.defaultState}\r\n                           activeState={item.activeState}\r\n                           disabled={item.disabled}/>\r\n    }\r\n    case 'dropdown': {\r\n      return <DropdownButton key={key}\r\n                             type={'icon'}\r\n                             items={item.items}\r\n                             itemsType={item.itemsType}\r\n                             onClick={item.onClick}\r\n                             icon={item.icon}\r\n                             tooltip={item.tooltip}\r\n                             action={item.action}\r\n                             actionIcon={item.actionIcon}\r\n                             actionLabel={item.actionLabel}\r\n                             actionVariant={item.actionVariant}\r\n                             actionLoading={item.actionLoading}\r\n                             multiSelect={item.multiSelect}\r\n                             scrollable={item.scrollable}\r\n                             pinTopItem={item.pinTopItem}\r\n                             maxHeight={item.maxHeight}\r\n                             disabled={item.disabled}/>\r\n\r\n    }\r\n    case 'note': {\r\n      return <TileNoteWrapper key={key} className={size}>\r\n        {\r\n          item.noteIcon &&\r\n          <TileNoteIcon>\r\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\r\n          </TileNoteIcon>\r\n        }\r\n        <TileNoteText>{item.noteText}</TileNoteText>\r\n      </TileNoteWrapper>\r\n\r\n    }\r\n    case 'link': {\r\n      const {linkText, componentType, linkIcon, ...rest} = item;\r\n      return <TileHyperLinkWrapper className={size} key={key}>\r\n        <HyperLink {...rest}>\r\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\r\n          {\r\n            linkIcon &&\r\n            <TileHyperLinkIcon>\r\n              {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\r\n            </TileHyperLinkIcon>\r\n          }\r\n        </HyperLink>\r\n      </TileHyperLinkWrapper>\r\n    }\r\n    case 'button': {\r\n      const {buttonText, componentType, ...rest} = item;\r\n      return <Button key={key}\r\n                     size={[Size.XSmall, Size.XSmall, Size.XXSmall].includes(size) ? Size.Small: \r\n                      size == Size.Large ? Size.Large : Size.Medium}\r\n                     {...rest}>\r\n        {buttonText}\r\n      </Button>\r\n    }\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tile/TileCommonItems.js

@@ -18,10 +18,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var TileNoteText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
 export var TileNoteIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display: flex;"])));
-export var TileNoteWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ", ";\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"])), COLORS.neutral_600, TileNoteIcon, TileNoteText, ComponentXXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentSStyling(ComponentTextStyle.Regular, null));
+export var TileNoteWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ", ";\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
+}, TileNoteIcon, TileNoteText, ComponentXXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentSStyling(ComponentTextStyle.Regular, null));
 export var TileHyperLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display: flex"])));
 export var TileHyperLinkText = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
-export var TileHyperLinkWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 28px;\n      height: 28px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, ComponentSStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentMStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentLStyling(ComponentTextStyle.Bold, null));
+export var TileHyperLinkWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 28px;\n      height: 28px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"])), function (props) {
+  return ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('primary_500', props.theme));
+}, TileHyperLinkIcon, TileHyperLinkText, ComponentSStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentMStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentLStyling(ComponentTextStyle.Bold, null));
 export var RenderTileItem = function RenderTileItem(item, size) {
   var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
   switch (item.componentType) {