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

package/dist/Toggles/TogglerStyles.js

@@ -10,7 +10,43 @@ import { COLORS, focusStyles } from '../styles';
  */
 import styled from 'styled-components';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-export var StyledSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled[aria-pressed='true'] label:first-of-type span {\n    background-color: ", " !important;\n    cursor: not-allowed;\n\n    &:before {\n      background-color: ", " !important;\n      cursor: not-allowed;\n    }\n  }\n\n  &[aria-pressed='true']:hover span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &[aria-pressed='true'] label:first-of-type span {\n    background-color: ", ";\n\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      -webkit-transform: translateX(20px);\n      -ms-transform: translateX(20px);\n      transform: translateX(20px);\n    }\n  }\n\n  &.disabled[aria-pressed='false'] label:first-of-type span {\n    background-color: ", " !important;\n    cursor: not-allowed;\n\n    &:before {\n      background-color: ", " !important;\n      cursor: not-allowed;\n    }\n  }\n\n  &[aria-pressed='false']:hover label:first-of-type span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &:not(.disabled).focus-visible {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.neutral_300, COLORS.primary_100, COLORS.neutral_300, COLORS.neutral_200, COLORS.correct_500, COLORS.primary_20, COLORS.primary_500, COLORS.correct_500, COLORS.neutral_300, COLORS.neutral_100, COLORS.critical_500, COLORS.primary_20, focusStyles);
+export var StyledSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled[aria-pressed='true'] label:first-of-type span {\n    background-color: ", " !important;\n    cursor: not-allowed;\n\n    &:before {\n      background-color: ", " !important;\n      cursor: not-allowed;\n    }\n  }\n\n  &[aria-pressed='true']:hover span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &[aria-pressed='true'] label:first-of-type span {\n    background-color: ", ";\n\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      -webkit-transform: translateX(20px);\n      -ms-transform: translateX(20px);\n      transform: translateX(20px);\n    }\n  }\n\n  &.disabled[aria-pressed='false'] label:first-of-type span {\n    background-color: ", " !important;\n    cursor: not-allowed;\n\n    &:before {\n      background-color: ", " !important;\n      cursor: not-allowed;\n    }\n  }\n\n  &[aria-pressed='false']:hover label:first-of-type span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &:not(.disabled).focus-visible {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), function (props) {
+  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('correct_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('correct_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, focusStyles);
 export var ToggleSwitchContainer = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n"])));
-export var ToggleSwitch = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ", ";\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ", ";\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ", ";\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n"])), COLORS.neutral_500, COLORS.critical_500, COLORS.white);
+export var ToggleSwitch = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ", ";\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ", ";\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ", ";\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+});
 //# sourceMappingURL=TogglerStyles.js.map

package/dist/Toggles/TogglerStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","_templateObject","_taggedTemplateLiteral","Regular","black","neutral_300","primary_100","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","ToggleSwitchContainer","label","_templateObject2","ToggleSwitch","span","_templateObject3","neutral_500","white"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n  &.disabled {\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${COLORS.primary_100};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${COLORS.neutral_300} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${COLORS.neutral_200} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover span {\r\n    &.semantic {\r\n      background-color: ${COLORS.correct_500};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${COLORS.primary_500};\r\n\r\n    &.semantic {\r\n      background-color: ${COLORS.correct_500};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='false'] label:first-of-type span {\r\n    background-color: ${COLORS.neutral_300} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${COLORS.neutral_100} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='false']:hover label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${COLORS.critical_500};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${COLORS.neutral_500};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${COLORS.critical_500};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${COLORS.white};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,WAAW,QAAQ,WAAW;;AAE/C;AACA;AACA;AACA,OAAOC,MAAM,MAAe,mBAAmB;AAC/C,SAASC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AAElH,OAAO,IAAMC,YAAY,GAAGL,MAAM,CAACM,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,msDAShCL,iBAAiB,CAACC,kBAAkB,CAACK,OAAO,EAAEX,MAAM,CAACY,KAAK,CAAC,EAI3DR,iBAAiB,CAACE,kBAAkB,CAACK,OAAO,EAAEX,MAAM,CAACY,KAAK,CAAC,EAI3DT,iBAAiB,CAACG,kBAAkB,CAACK,OAAO,EAAEX,MAAM,CAACY,KAAK,CAAC,EAGpDZ,MAAM,CAACa,WAAW,EAaLb,MAAM,CAACc,WAAW,EAKpBd,MAAM,CAACa,WAAW,EAIhBb,MAAM,CAACe,WAAW,EAOlBf,MAAM,CAACgB,WAAW,EAIlBhB,MAAM,CAACiB,UAAU,EAKnBjB,MAAM,CAACkB,WAAW,EAGhBlB,MAAM,CAACgB,WAAW,EAWpBhB,MAAM,CAACa,WAAW,EAIhBb,MAAM,CAACmB,WAAW,EAOlBnB,MAAM,CAACoB,YAAY,EAInBpB,MAAM,CAACiB,UAAU,EAKrChB,WAAW,CAMhB;AAED,OAAO,IAAMoB,qBAAqB,GAAGnB,MAAM,CAACoB,KAAK,CAAAC,gBAAA,KAAAA,gBAAA,GAAAb,sBAAA,yIAOhD;AAED,OAAO,IAAMc,YAAY,GAAGtB,MAAM,CAACuB,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAhB,sBAAA,ioBAYjBV,MAAM,CAAC2B,WAAW,EAIhB3B,MAAM,CAACoB,YAAY,EAUnBpB,MAAM,CAAC4B,KAAK,CAMnC","ignoreList":[]}
+{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","_templateObject","_taggedTemplateLiteral","props","Regular","getColor","theme","ToggleSwitchContainer","label","_templateObject2","ToggleSwitch","span","_templateObject3"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='false'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='false']:hover label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tooltips/TooltipStyles.cjs

@@ -19,11 +19,11 @@ var distanceToEdge = function distanceToEdge(size) {
   return size == _types.Size.XSmall ? '8px' : !size || size == _types.Size.Small ? '12px' : '16px';
 };
 var Tooltip = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  pointer-events: none;\n  ", "\n  ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n  box-sizing: border-box;\n\n  padding: ", ";\n  border-radius: 2px;\n  ", "\n  height: ", ";\n  max-width: ", ";\n  background: ", ";\n  position: absolute;\n  opacity: 0;\n  z-index: ", ";\n  ", "\n\n  ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " ", "\n      ", " ", ";\n  }\n\n  & > span {\n    word-wrap: break-word;\n    color: white;\n  }\n"])), function (props) {
-  return props.size == _types.Size.Small || props.size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
+  return props.size == _types.Size.Small || props.size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('white', props.theme)) : '';
 }, function (props) {
-  return props.size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
+  return props.size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('white', props.theme)) : '';
 }, function (props) {
-  return props.size == _types.Size.Medium ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
+  return props.size == _types.Size.Medium ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('white', props.theme)) : '';
 }, function (props) {
   return props.align == 'center' ? 'text-align: center;' : '';
 }, _styles.BOXSHADOWS.BOXSHADOW_L2, function (props) {
@@ -35,7 +35,9 @@ var Tooltip = _styledComponents["default"].div(_templateObject || (_templateObje
 }, function (props) {
   var _props$maxWidth;
   return (_props$maxWidth = props.maxWidth) !== null && _props$maxWidth !== void 0 ? _props$maxWidth : '34em';
-}, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.tooltip, function (props) {
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, _zIndexes.Z_INDEXES.tooltip, function (props) {
   return props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '';
 }, function (props) {
   return props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '';
@@ -56,13 +58,13 @@ var Tooltip = _styledComponents["default"].div(_templateObject || (_templateObje
 }, function (props) {
   return props.position == 'left' ? '' : 'margin-left: -5px;';
 }, function (props) {
-  return props.position == 'top' ? _styles.COLORS.primary_800 : 'transparent';
+  return props.position == 'top' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent';
 }, function (props) {
-  return props.position == 'right' ? _styles.COLORS.primary_800 : 'transparent';
+  return props.position == 'right' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent';
 }, function (props) {
-  return props.position == 'bottom' ? _styles.COLORS.primary_800 : 'transparent';
+  return props.position == 'bottom' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent';
 }, function (props) {
-  return props.position == 'left' ? _styles.COLORS.primary_800 : 'transparent';
+  return props.position == 'left' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent';
 });
 exports.Tooltip = Tooltip;
 Tooltip.defaultProps = {

package/dist/Tooltips/TooltipStyles.cjs.map

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

package/dist/Tooltips/TooltipStyles.js

@@ -9,11 +9,11 @@ var distanceToEdge = function distanceToEdge(size) {
   return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';
 };
 export var Tooltip = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  pointer-events: none;\n  ", "\n  ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n  box-sizing: border-box;\n\n  padding: ", ";\n  border-radius: 2px;\n  ", "\n  height: ", ";\n  max-width: ", ";\n  background: ", ";\n  position: absolute;\n  opacity: 0;\n  z-index: ", ";\n  ", "\n\n  ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " ", "\n      ", " ", ";\n  }\n\n  & > span {\n    word-wrap: break-word;\n    color: white;\n  }\n"])), function (props) {
-  return props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '';
+  return props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme)) : '';
 }, function (props) {
-  return props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '';
+  return props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme)) : '';
 }, function (props) {
-  return props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '';
+  return props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme)) : '';
 }, function (props) {
   return props.align == 'center' ? 'text-align: center;' : '';
 }, BOXSHADOWS.BOXSHADOW_L2, function (props) {
@@ -25,7 +25,9 @@ export var Tooltip = styled.div(_templateObject || (_templateObject = _taggedTem
 }, function (props) {
   var _props$maxWidth;
   return (_props$maxWidth = props.maxWidth) !== null && _props$maxWidth !== void 0 ? _props$maxWidth : '34em';
-}, COLORS.primary_800, Z_INDEXES.tooltip, function (props) {
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, Z_INDEXES.tooltip, function (props) {
   return props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '';
 }, function (props) {
   return props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '';
@@ -46,13 +48,13 @@ export var Tooltip = styled.div(_templateObject || (_templateObject = _taggedTem
 }, function (props) {
   return props.position == 'left' ? '' : 'margin-left: -5px;';
 }, function (props) {
-  return props.position == 'top' ? COLORS.primary_800 : 'transparent';
+  return props.position == 'top' ? COLORS.getColor('primary_800', props.theme) : 'transparent';
 }, function (props) {
-  return props.position == 'right' ? COLORS.primary_800 : 'transparent';
+  return props.position == 'right' ? COLORS.getColor('primary_800', props.theme) : 'transparent';
 }, function (props) {
-  return props.position == 'bottom' ? COLORS.primary_800 : 'transparent';
+  return props.position == 'bottom' ? COLORS.getColor('primary_800', props.theme) : 'transparent';
 }, function (props) {
-  return props.position == 'left' ? COLORS.primary_800 : 'transparent';
+  return props.position == 'left' ? COLORS.getColor('primary_800', props.theme) : 'transparent';
 });
 Tooltip.defaultProps = {
   withArrow: false,

package/dist/Tooltips/TooltipStyles.js.map

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

package/dist/common/InputStyling.cjs

@@ -9,6 +9,20 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styledComponents = require("styled-components");
 var _styles = require("../styles");
 var _templateObject;
-var CommonInteractionStyling = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  &:focus, &.focus-state, &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.action-within), &.hover-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active:not(.action-within), &.active-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled, &.disabled-state {\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.white);
+var CommonInteractionStyling = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  &:focus, &.focus-state, &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.action-within), &.hover-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active:not(.action-within), &.active-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled, &.disabled-state {\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _styles.focusStyles, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_600', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+});
 exports.CommonInteractionStyling = CommonInteractionStyling;
 //# sourceMappingURL=InputStyling.cjs.map

package/dist/common/InputStyling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputStyling.cjs","names":["_styledComponents","require","_styles","_templateObject","CommonInteractionStyling","css","_taggedTemplateLiteral2","focusStyles","COLORS","primary_20","primary_600","primary_100","primary_800","white","neutral_300","exports"],"sources":["../../src/common/InputStyling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\n\r\nexport const CommonInteractionStyling = css`\r\n  &:focus, &.focus-state, &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover:not(.action-within), &.hover-state {\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_600};\r\n  }\r\n  &:active:not(.action-within), &.active-state {\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n  }\r\n  &:disabled, &.disabled-state {\r\n    background-color: ${COLORS.white};\r\n    span {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n    &::after {\r\n      background-color: ${COLORS.white};\r\n    }\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAA8C,IAAAE,eAAA;AAEvC,IAAMC,wBAAwB,OAAGC,qBAAG,EAAAF,eAAA,KAAAA,eAAA,OAAAG,uBAAA,gcAErCC,mBAAW,EAIOC,cAAM,CAACC,UAAU,EAC5BD,cAAM,CAACE,WAAW,EAGPF,cAAM,CAACG,WAAW,EAC7BH,cAAM,CAACI,WAAW,EAGPJ,cAAM,CAACK,KAAK,EAErBL,cAAM,CAACM,WAAW,EAGPN,cAAM,CAACK,KAAK,CAGrC;AAACE,OAAA,CAAAX,wBAAA,GAAAA,wBAAA","ignoreList":[]}
+{"version":3,"file":"InputStyling.cjs","names":["_styledComponents","require","_styles","_templateObject","CommonInteractionStyling","css","_taggedTemplateLiteral2","focusStyles","props","COLORS","getColor","theme","exports"],"sources":["../../src/common/InputStyling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\n\r\nexport const CommonInteractionStyling = css`\r\n  &:focus, &.focus-state, &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover:not(.action-within), &.hover-state {\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n  }\r\n  &:active:not(.action-within), &.active-state {\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n  &:disabled, &.disabled-state {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    span {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n    &::after {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAA8C,IAAAE,eAAA;AAEvC,IAAMC,wBAAwB,OAAGC,qBAAG,EAAAF,eAAA,KAAAA,eAAA,OAAAG,uBAAA,gcAErCC,mBAAW,EAIO,UAAAC,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAC9D,UAAAH,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAGzC,UAAAH,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAC/D,UAAAH,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAGzC,UAAAH,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAEvD,UAAAH,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAGzC,UAAAH,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAGvE;AAACC,OAAA,CAAAR,wBAAA,GAAAA,wBAAA","ignoreList":[]}

package/dist/common/InputStyling.d.ts

@@ -1 +1 @@
-export declare const CommonInteractionStyling: import("styled-components").FlattenSimpleInterpolation;
+export declare const CommonInteractionStyling: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;

package/dist/common/InputStyling.js

@@ -2,5 +2,19 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 var _templateObject;
 import { css } from 'styled-components';
 import { COLORS, focusStyles } from '../styles';
-export var CommonInteractionStyling = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus, &.focus-state, &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.action-within), &.hover-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active:not(.action-within), &.active-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled, &.disabled-state {\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), focusStyles, COLORS.primary_20, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.white);
+export var CommonInteractionStyling = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus, &.focus-state, &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.action-within), &.hover-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active:not(.action-within), &.active-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled, &.disabled-state {\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), focusStyles, function (props) {
+  return COLORS.getColor('primary_20', 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('white', props.theme);
+});
 //# sourceMappingURL=InputStyling.js.map

package/dist/common/InputStyling.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputStyling.js","names":["css","COLORS","focusStyles","CommonInteractionStyling","_templateObject","_taggedTemplateLiteral","primary_20","primary_600","primary_100","primary_800","white","neutral_300"],"sources":["../../src/common/InputStyling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\n\r\nexport const CommonInteractionStyling = css`\r\n  &:focus, &.focus-state, &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover:not(.action-within), &.hover-state {\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_600};\r\n  }\r\n  &:active:not(.action-within), &.active-state {\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n  }\r\n  &:disabled, &.disabled-state {\r\n    background-color: ${COLORS.white};\r\n    span {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n    &::after {\r\n      background-color: ${COLORS.white};\r\n    }\r\n  }\r\n`;\r\n"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,mBAAmB;AACvC,SAAQC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAE7C,OAAO,IAAMC,wBAAwB,GAAGH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,sBAAA,obAErCH,WAAW,EAIOD,MAAM,CAACK,UAAU,EAC5BL,MAAM,CAACM,WAAW,EAGPN,MAAM,CAACO,WAAW,EAC7BP,MAAM,CAACQ,WAAW,EAGPR,MAAM,CAACS,KAAK,EAErBT,MAAM,CAACU,WAAW,EAGPV,MAAM,CAACS,KAAK,CAGrC","ignoreList":[]}
+{"version":3,"file":"InputStyling.js","names":["css","COLORS","focusStyles","CommonInteractionStyling","_templateObject","_taggedTemplateLiteral","props","getColor","theme"],"sources":["../../src/common/InputStyling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\n\r\nexport const CommonInteractionStyling = css`\r\n  &:focus, &.focus-state, &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover:not(.action-within), &.hover-state {\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n  }\r\n  &:active:not(.action-within), &.active-state {\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n  &:disabled, &.disabled-state {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    span {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n    &::after {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,mBAAmB;AACvC,SAAQC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAE7C,OAAO,IAAMC,wBAAwB,GAAGH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,sBAAA,obAErCH,WAAW,EAIO,UAAAI,KAAK;EAAA,OAAIL,MAAM,CAACM,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC9D,UAAAF,KAAK;EAAA,OAAIL,MAAM,CAACM,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAGzC,UAAAF,KAAK;EAAA,OAAIL,MAAM,CAACM,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC/D,UAAAF,KAAK;EAAA,OAAIL,MAAM,CAACM,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAGzC,UAAAF,KAAK;EAAA,OAAIL,MAAM,CAACM,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAEvD,UAAAF,KAAK;EAAA,OAAIL,MAAM,CAACM,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAGzC,UAAAF,KAAK;EAAA,OAAIL,MAAM,CAACM,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAGvE","ignoreList":[]}

package/dist/styles/colors.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"colors.cjs","names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_50","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_50","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_50","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_50","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_50","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_50","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error","getColor","name","theme","colors","_default","exports"],"sources":["../../src/styles/colors.ts"],"sourcesContent":["import { useContext } from 'react';\r\nimport { ThemeContext } from 'styled-components';\r\n\r\nconst COLORS = {\r\n  //do not use these constants to get colors, use 'getColor' function instead\r\n  black: '#1F1F1F', // Neutrals / Black\r\n  white: '#FFFFFF', // Neutrals / White\r\n  grey: '#949494', // Neutrals / grey\r\n  primary: '#2E7FA1', // Brand / Primary - Core 500\r\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\r\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\r\n  correct: '#37A851', // Semantic / Correct - Core 400\r\n  warning: '#E97116', // Semantic / Warning  - Core 400\r\n  critical: '#DC3449', // Semantic / Critical - Core 500\r\n\r\n  primary_20: '#F1FBFE',\r\n  primary_50: '#E3F5FC',\r\n  primary_100: '#D4E9F2',\r\n  primary_200: '#A9D3E5',\r\n  primary_300: '#7FBCD7',\r\n  primary_400: '#519DBD',\r\n  primary_500: '#2E7FA1', // 500 Core\r\n  primary_600: '#276D8B',\r\n  primary_700: '#215369',\r\n  primary_800: '#163746',\r\n\r\n  accent1_20: '#EDFCFB',\r\n  accent1_50: '#E4F6F6',\r\n  accent1_100: '#C8EEEC',\r\n  accent1_200: '#98D8D5',\r\n  accent1_300: '#6BC2BE',\r\n  accent1_400: '#3EA39E',\r\n  accent1_500: '#25837E', // 500 Core\r\n  accent1_600: '#23716D',\r\n  accent1_700: '#145653',\r\n  accent1_800: '#0F3937',\r\n\r\n  accent2_20: '#FFFAEE',\r\n  accent2_50: '#FDF0DE',\r\n  accent2_100: '#F8E2BF',\r\n  accent2_200: '#EAC785', // 200 Core\r\n  accent2_300: '#D6AD61',\r\n  accent2_400: '#B58E45',\r\n  accent2_500: '#92702F',\r\n  accent2_600: '#806128',\r\n  accent2_700: '#604920',\r\n  accent2_800: '#42300F',\r\n\r\n  correct_20: '#ECFEF1',\r\n  correct_50: '#E2F8E4',\r\n  correct_100: '#CCEED2',\r\n  correct_200: '#A0D9AD',\r\n  correct_300: '#77C589',\r\n  correct_400: '#37A851', // 400 Core\r\n  correct_500: '#14892F',\r\n  correct_600: '#13772A',\r\n  correct_700: '#025A15',\r\n  correct_800: '#003D0E',\r\n\r\n  warning_20: '#FEF7F1',\r\n  warning_50: '#FDF0E7',\r\n  warning_100: '#FCDDC5',\r\n  warning_200: '#F8C096',\r\n  warning_300: '#F4A162',\r\n  warning_400: '#E97116', // 400 Core\r\n  warning_500: '#C45402',\r\n  warning_600: '#AD4B00',\r\n  warning_700: '#803700',\r\n  warning_800: '#572600',\r\n\r\n  critical_20: '#FEF5F7',\r\n  critical_50: '#FEECF1',\r\n  critical_100: '#FDDEE2',\r\n  critical_200: '#FDBAC2',\r\n  critical_300: '#FD96A4',\r\n  critical_400: '#FC5A6F',\r\n  critical_500: '#DC3449', // 500 Core\r\n  critical_600: '#C32238',\r\n  critical_700: '#9C0D1D',\r\n  critical_800: '#6B0613',\r\n\r\n  neutral_20: '#FAFAFA', // 020 Core\r\n  neutral_50: '#F2F2F2',\r\n  neutral_100: '#E5E5E5',\r\n  neutral_200: '#CCCCCC',\r\n  neutral_300: '#B3B3B3',\r\n  neutral_400: '#949494',\r\n  neutral_500: '#767676',\r\n  neutral_600: '#666666',\r\n  neutral_700: '#4D4D4D',\r\n  neutral_800: '#333333',\r\n\r\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\r\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\r\n\r\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\r\n\r\n  toast_info: '#2E7FA1',\r\n  toast_success: '#37A851',\r\n  toast_warning: '#E97116',\r\n  toast_error: '#DC3449',\r\n\r\n\r\n  getColor: (name: string, theme: any) => {\r\n    if (theme && theme.colors && theme.colors[name])\r\n      return theme.colors[name];\r\n    return COLORS[name as keyof typeof COLORS];\r\n  }\r\n};\r\n\r\nexport default COLORS;\r\n\r\n"],"mappings":";;;;;;AAGA,IAAMA,MAAM,GAAG;EACb;EACAC,KAAK,EAAE,SAAS;EAAE;EAClBC,KAAK,EAAE,SAAS;EAAE;EAClBC,IAAI,EAAE,SAAS;EAAE;EACjBC,OAAO,EAAE,SAAS;EAAE;EACpBC,OAAO,EAAE,SAAS;EAAE;EACpBC,OAAO,EAAE,SAAS;EAAE;EACpBC,OAAO,EAAE,SAAS;EAAE;EACpBC,OAAO,EAAE,SAAS;EAAE;EACpBC,QAAQ,EAAE,SAAS;EAAE;;EAErBC,UAAU,EAAE,SAAS;EACrBC,UAAU,EAAE,SAAS;EACrBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAAE;EACxBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAEtBC,UAAU,EAAE,SAAS;EACrBC,UAAU,EAAE,SAAS;EACrBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAAE;EACxBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAEtBC,UAAU,EAAE,SAAS;EACrBC,UAAU,EAAE,SAAS;EACrBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAAE;EACxBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAEtBC,UAAU,EAAE,SAAS;EACrBC,UAAU,EAAE,SAAS;EACrBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAAE;EACxBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAEtBC,UAAU,EAAE,SAAS;EACrBC,UAAU,EAAE,SAAS;EACrBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAAE;EACxBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAEtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,YAAY,EAAE,SAAS;EACvBC,YAAY,EAAE,SAAS;EACvBC,YAAY,EAAE,SAAS;EACvBC,YAAY,EAAE,SAAS;EACvBC,YAAY,EAAE,SAAS;EAAE;EACzBC,YAAY,EAAE,SAAS;EACvBC,YAAY,EAAE,SAAS;EACvBC,YAAY,EAAE,SAAS;EAEvBC,UAAU,EAAE,SAAS;EAAE;EACvBC,UAAU,EAAE,SAAS;EACrBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAEtBC,KAAK,EAAE,uBAAuB;EAAE;EAChCC,QAAQ,EAAE,0BAA0B;EAAE;;EAEtCC,cAAc,EAAE,+GAA+G;EAE/HC,UAAU,EAAE,SAAS;EACrBC,aAAa,EAAE,SAAS;EACxBC,aAAa,EAAE,SAAS;EACxBC,WAAW,EAAE,SAAS;EAGtBC,QAAQ,EAAE,SAAAA,SAACC,IAAY,EAAEC,KAAU,EAAK;IACtC,IAAIA,KAAK,IAAIA,KAAK,CAACC,MAAM,IAAID,KAAK,CAACC,MAAM,CAACF,IAAI,CAAC,EAC7C,OAAOC,KAAK,CAACC,MAAM,CAACF,IAAI,CAAC;IAC3B,OAAOxF,MAAM,CAACwF,IAAI,CAAwB;EAC5C;AACF,CAAC;AAAC,IAAAG,QAAA,GAEa3F,MAAM;AAAA4F,OAAA,cAAAD,QAAA","ignoreList":[]}
+{"version":3,"file":"colors.cjs","names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_50","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_50","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_50","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_50","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_50","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_50","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error","getColor","name","theme","colors","_default","exports"],"sources":["../../src/styles/colors.ts"],"sourcesContent":["import { useContext } from 'react';\r\nimport { ThemeContext } from 'styled-components';\r\n\r\nconst COLORS = {\r\n  //do not use these constants to get colors, use 'getColor' function instead\r\n  black: '#1F1F1F', // Neutrals / Black\r\n  white: '#FFFFFF', // Neutrals / White\r\n  grey: '#949494', // Neutrals / grey\r\n  primary: '#2E7FA1', // Brand / Primary - Core 500\r\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\r\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\r\n  correct: '#37A851', // Semantic / Correct - Core 400\r\n  warning: '#E97116', // Semantic / Warning  - Core 400\r\n  critical: '#DC3449', // Semantic / Critical - Core 500\r\n\r\n  primary_20: '#F1FBFE',\r\n  primary_50: '#E3F5FC',\r\n  primary_100: '#D4E9F2',\r\n  primary_200: '#A9D3E5',\r\n  primary_300: '#7FBCD7',\r\n  primary_400: '#519DBD',\r\n  primary_500: '#2E7FA1', // 500 Core\r\n  primary_600: '#276D8B',\r\n  primary_700: '#215369',\r\n  primary_800: '#163746',\r\n\r\n  accent1_20: '#EDFCFB',\r\n  accent1_50: '#E4F6F6',\r\n  accent1_100: '#C8EEEC',\r\n  accent1_200: '#98D8D5',\r\n  accent1_300: '#6BC2BE',\r\n  accent1_400: '#3EA39E',\r\n  accent1_500: '#25837E', // 500 Core\r\n  accent1_600: '#23716D',\r\n  accent1_700: '#145653',\r\n  accent1_800: '#0F3937',\r\n\r\n  accent2_20: '#FFFAEE',\r\n  accent2_50: '#FDF0DE',\r\n  accent2_100: '#F8E2BF',\r\n  accent2_200: '#EAC785', // 200 Core\r\n  accent2_300: '#D6AD61',\r\n  accent2_400: '#B58E45',\r\n  accent2_500: '#92702F',\r\n  accent2_600: '#806128',\r\n  accent2_700: '#604920',\r\n  accent2_800: '#42300F',\r\n\r\n  correct_20: '#ECFEF1',\r\n  correct_50: '#E2F8E4',\r\n  correct_100: '#CCEED2',\r\n  correct_200: '#A0D9AD',\r\n  correct_300: '#77C589',\r\n  correct_400: '#37A851', // 400 Core\r\n  correct_500: '#14892F',\r\n  correct_600: '#13772A',\r\n  correct_700: '#025A15',\r\n  correct_800: '#003D0E',\r\n\r\n  warning_20: '#FEF7F1',\r\n  warning_50: '#FDF0E7',\r\n  warning_100: '#FCDDC5',\r\n  warning_200: '#F8C096',\r\n  warning_300: '#F4A162',\r\n  warning_400: '#E97116', // 400 Core\r\n  warning_500: '#C45402',\r\n  warning_600: '#AD4B00',\r\n  warning_700: '#803700',\r\n  warning_800: '#572600',\r\n\r\n  critical_20: '#FEF5F7',\r\n  critical_50: '#FEECF1',\r\n  critical_100: '#FDDEE2',\r\n  critical_200: '#FDBAC2',\r\n  critical_300: '#FD96A4',\r\n  critical_400: '#FC5A6F',\r\n  critical_500: '#DC3449', // 500 Core\r\n  critical_600: '#C32238',\r\n  critical_700: '#9C0D1D',\r\n  critical_800: '#6B0613',\r\n\r\n  neutral_20: '#FAFAFA', // 020 Core\r\n  neutral_50: '#F2F2F2',\r\n  neutral_100: '#E5E5E5',\r\n  neutral_200: '#CCCCCC',\r\n  neutral_300: '#B3B3B3',\r\n  neutral_400: '#949494',\r\n  neutral_500: '#767676',\r\n  neutral_600: '#666666',\r\n  neutral_700: '#4D4D4D',\r\n  neutral_800: '#333333',\r\n\r\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\r\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\r\n\r\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\r\n\r\n  toast_info: '#2E7FA1',\r\n  toast_success: '#37A851',\r\n  toast_warning: '#E97116',\r\n  toast_error: '#DC3449',\r\n\r\n\r\n  getColor: (name: string, theme: any): string => {\r\n    if (theme && theme.colors && theme.colors[name])\r\n      return theme.colors[name];\r\n    return COLORS[name as keyof typeof COLORS] as string;\r\n  }\r\n};\r\n\r\nexport default COLORS;\r\n\r\n"],"mappings":"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","ignoreList":[]}

package/dist/styles/colors.d.ts

@@ -85,6 +85,6 @@ declare const COLORS: {
     toast_success: string;
     toast_warning: string;
     toast_error: string;
-    getColor: (name: string, theme: any) => any;
+    getColor: (name: string, theme: any) => string;
 };
 export default COLORS;

package/dist/styles/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_50","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_50","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_50","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_50","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_50","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_50","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error","getColor","name","theme","colors"],"sources":["../../src/styles/colors.ts"],"sourcesContent":["import { useContext } from 'react';\r\nimport { ThemeContext } from 'styled-components';\r\n\r\nconst COLORS = {\r\n  //do not use these constants to get colors, use 'getColor' function instead\r\n  black: '#1F1F1F', // Neutrals / Black\r\n  white: '#FFFFFF', // Neutrals / White\r\n  grey: '#949494', // Neutrals / grey\r\n  primary: '#2E7FA1', // Brand / Primary - Core 500\r\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\r\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\r\n  correct: '#37A851', // Semantic / Correct - Core 400\r\n  warning: '#E97116', // Semantic / Warning  - Core 400\r\n  critical: '#DC3449', // Semantic / Critical - Core 500\r\n\r\n  primary_20: '#F1FBFE',\r\n  primary_50: '#E3F5FC',\r\n  primary_100: '#D4E9F2',\r\n  primary_200: '#A9D3E5',\r\n  primary_300: '#7FBCD7',\r\n  primary_400: '#519DBD',\r\n  primary_500: '#2E7FA1', // 500 Core\r\n  primary_600: '#276D8B',\r\n  primary_700: '#215369',\r\n  primary_800: '#163746',\r\n\r\n  accent1_20: '#EDFCFB',\r\n  accent1_50: '#E4F6F6',\r\n  accent1_100: '#C8EEEC',\r\n  accent1_200: '#98D8D5',\r\n  accent1_300: '#6BC2BE',\r\n  accent1_400: '#3EA39E',\r\n  accent1_500: '#25837E', // 500 Core\r\n  accent1_600: '#23716D',\r\n  accent1_700: '#145653',\r\n  accent1_800: '#0F3937',\r\n\r\n  accent2_20: '#FFFAEE',\r\n  accent2_50: '#FDF0DE',\r\n  accent2_100: '#F8E2BF',\r\n  accent2_200: '#EAC785', // 200 Core\r\n  accent2_300: '#D6AD61',\r\n  accent2_400: '#B58E45',\r\n  accent2_500: '#92702F',\r\n  accent2_600: '#806128',\r\n  accent2_700: '#604920',\r\n  accent2_800: '#42300F',\r\n\r\n  correct_20: '#ECFEF1',\r\n  correct_50: '#E2F8E4',\r\n  correct_100: '#CCEED2',\r\n  correct_200: '#A0D9AD',\r\n  correct_300: '#77C589',\r\n  correct_400: '#37A851', // 400 Core\r\n  correct_500: '#14892F',\r\n  correct_600: '#13772A',\r\n  correct_700: '#025A15',\r\n  correct_800: '#003D0E',\r\n\r\n  warning_20: '#FEF7F1',\r\n  warning_50: '#FDF0E7',\r\n  warning_100: '#FCDDC5',\r\n  warning_200: '#F8C096',\r\n  warning_300: '#F4A162',\r\n  warning_400: '#E97116', // 400 Core\r\n  warning_500: '#C45402',\r\n  warning_600: '#AD4B00',\r\n  warning_700: '#803700',\r\n  warning_800: '#572600',\r\n\r\n  critical_20: '#FEF5F7',\r\n  critical_50: '#FEECF1',\r\n  critical_100: '#FDDEE2',\r\n  critical_200: '#FDBAC2',\r\n  critical_300: '#FD96A4',\r\n  critical_400: '#FC5A6F',\r\n  critical_500: '#DC3449', // 500 Core\r\n  critical_600: '#C32238',\r\n  critical_700: '#9C0D1D',\r\n  critical_800: '#6B0613',\r\n\r\n  neutral_20: '#FAFAFA', // 020 Core\r\n  neutral_50: '#F2F2F2',\r\n  neutral_100: '#E5E5E5',\r\n  neutral_200: '#CCCCCC',\r\n  neutral_300: '#B3B3B3',\r\n  neutral_400: '#949494',\r\n  neutral_500: '#767676',\r\n  neutral_600: '#666666',\r\n  neutral_700: '#4D4D4D',\r\n  neutral_800: '#333333',\r\n\r\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\r\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\r\n\r\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\r\n\r\n  toast_info: '#2E7FA1',\r\n  toast_success: '#37A851',\r\n  toast_warning: '#E97116',\r\n  toast_error: '#DC3449',\r\n\r\n\r\n  getColor: (name: string, theme: any) => {\r\n    if (theme && theme.colors && theme.colors[name])\r\n      return theme.colors[name];\r\n    return COLORS[name as keyof typeof COLORS];\r\n  }\r\n};\r\n\r\nexport default COLORS;\r\n\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"colors.js","names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_50","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_50","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_50","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_50","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_50","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_50","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error","getColor","name","theme","colors"],"sources":["../../src/styles/colors.ts"],"sourcesContent":["import { useContext } from 'react';\r\nimport { ThemeContext } from 'styled-components';\r\n\r\nconst COLORS = {\r\n  //do not use these constants to get colors, use 'getColor' function instead\r\n  black: '#1F1F1F', // Neutrals / Black\r\n  white: '#FFFFFF', // Neutrals / White\r\n  grey: '#949494', // Neutrals / grey\r\n  primary: '#2E7FA1', // Brand / Primary - Core 500\r\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\r\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\r\n  correct: '#37A851', // Semantic / Correct - Core 400\r\n  warning: '#E97116', // Semantic / Warning  - Core 400\r\n  critical: '#DC3449', // Semantic / Critical - Core 500\r\n\r\n  primary_20: '#F1FBFE',\r\n  primary_50: '#E3F5FC',\r\n  primary_100: '#D4E9F2',\r\n  primary_200: '#A9D3E5',\r\n  primary_300: '#7FBCD7',\r\n  primary_400: '#519DBD',\r\n  primary_500: '#2E7FA1', // 500 Core\r\n  primary_600: '#276D8B',\r\n  primary_700: '#215369',\r\n  primary_800: '#163746',\r\n\r\n  accent1_20: '#EDFCFB',\r\n  accent1_50: '#E4F6F6',\r\n  accent1_100: '#C8EEEC',\r\n  accent1_200: '#98D8D5',\r\n  accent1_300: '#6BC2BE',\r\n  accent1_400: '#3EA39E',\r\n  accent1_500: '#25837E', // 500 Core\r\n  accent1_600: '#23716D',\r\n  accent1_700: '#145653',\r\n  accent1_800: '#0F3937',\r\n\r\n  accent2_20: '#FFFAEE',\r\n  accent2_50: '#FDF0DE',\r\n  accent2_100: '#F8E2BF',\r\n  accent2_200: '#EAC785', // 200 Core\r\n  accent2_300: '#D6AD61',\r\n  accent2_400: '#B58E45',\r\n  accent2_500: '#92702F',\r\n  accent2_600: '#806128',\r\n  accent2_700: '#604920',\r\n  accent2_800: '#42300F',\r\n\r\n  correct_20: '#ECFEF1',\r\n  correct_50: '#E2F8E4',\r\n  correct_100: '#CCEED2',\r\n  correct_200: '#A0D9AD',\r\n  correct_300: '#77C589',\r\n  correct_400: '#37A851', // 400 Core\r\n  correct_500: '#14892F',\r\n  correct_600: '#13772A',\r\n  correct_700: '#025A15',\r\n  correct_800: '#003D0E',\r\n\r\n  warning_20: '#FEF7F1',\r\n  warning_50: '#FDF0E7',\r\n  warning_100: '#FCDDC5',\r\n  warning_200: '#F8C096',\r\n  warning_300: '#F4A162',\r\n  warning_400: '#E97116', // 400 Core\r\n  warning_500: '#C45402',\r\n  warning_600: '#AD4B00',\r\n  warning_700: '#803700',\r\n  warning_800: '#572600',\r\n\r\n  critical_20: '#FEF5F7',\r\n  critical_50: '#FEECF1',\r\n  critical_100: '#FDDEE2',\r\n  critical_200: '#FDBAC2',\r\n  critical_300: '#FD96A4',\r\n  critical_400: '#FC5A6F',\r\n  critical_500: '#DC3449', // 500 Core\r\n  critical_600: '#C32238',\r\n  critical_700: '#9C0D1D',\r\n  critical_800: '#6B0613',\r\n\r\n  neutral_20: '#FAFAFA', // 020 Core\r\n  neutral_50: '#F2F2F2',\r\n  neutral_100: '#E5E5E5',\r\n  neutral_200: '#CCCCCC',\r\n  neutral_300: '#B3B3B3',\r\n  neutral_400: '#949494',\r\n  neutral_500: '#767676',\r\n  neutral_600: '#666666',\r\n  neutral_700: '#4D4D4D',\r\n  neutral_800: '#333333',\r\n\r\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\r\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\r\n\r\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\r\n\r\n  toast_info: '#2E7FA1',\r\n  toast_success: '#37A851',\r\n  toast_warning: '#E97116',\r\n  toast_error: '#DC3449',\r\n\r\n\r\n  getColor: (name: string, theme: any): string => {\r\n    if (theme && theme.colors && theme.colors[name])\r\n      return theme.colors[name];\r\n    return COLORS[name as keyof typeof COLORS] as string;\r\n  }\r\n};\r\n\r\nexport default COLORS;\r\n\r\n"],"mappings":"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","ignoreList":[]}

package/dist/styles/global.cjs

@@ -11,11 +11,15 @@ var _typography = require("./typography");
 var _figmaSvg = require("@laerdal/figma-svg");
 var _styledComponents = require("styled-components");
 var _templateObject;
-var resizeIcon = btoa(_figmaSvg.SystemIcons.ExtendTextArea.replace("viewBox=\"0 0 24 24\"", "viewBox='0 0 26 26'").replace('fill="#1F1F1F"', "fill=\"".concat(_colors["default"].neutral_600, "\"")));
+var resizeIcon = function resizeIcon(props) {
+  return btoa(_figmaSvg.SystemIcons.ExtendTextArea.replace("viewBox=\"0 0 24 24\"", "viewBox='0 0 26 26'").replace('fill="#1F1F1F"', "fill=\"".concat(_colors["default"].getColor('neutral_600', props.theme), "\"")));
+};
 var globalStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  html,\n  body {\n    height: 100%;\n    font-family: '", "', sans-serif;\n    color: ", ";\n    -webkit-font-smoothing: antialiased;\n  }\n\n  [lang^=\"ja\" i] {\n    font-family: ", ", Noto Sans, Noto Sans JP, sans-serif;\n  }\n  \n  [lang^=\"ko\" i] {\n    font-family: ", ", Noto Sans, Noto Sans KR, sans-serif;\n  }\n  \n  [lang^=\"zh\" i] {\n    font-family: ", ", Noto Sans, Noto Sans SC, sans-serif;\n  }\n  \n  [lang=\"zh-cht\" i],\n  [lang=\"zh-hant\" i],\n  [lang=\"zh-hk\" i],\n  [lang=\"zh-mo\" i],\n  [lang=\"zh-tw\" i] {\n    font-family: ", ", Noto Sans, Noto Sans TC, sans-serif;\n  }\n\n\n  body {\n    margin: 0;\n    padding: 0;\n  }\n\n  main,\n  aside,\n  details {\n    display: block;\n  }\n\n  summary {\n    display: block;\n  }\n\n  #root {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  button,\n  input,\n  label {\n    font-family: inherit;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ", " !important;\n    opacity: 1 !important;\n  }\n\n  .react-resizable-handle {\n    background-image: none !important;\n  }\n\n  .react-resizable-handle::after {\n    border: none !important;\n  }\n  \n  ::-webkit-resizer {\n    background-image: url(\"data:image/svg+xml;base64,", "\");\n  }\n  \n  ", "\n"])), function (props) {
   var _props$theme$fonts, _props$theme;
   return (_props$theme$fonts = (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.fonts) !== null && _props$theme$fonts !== void 0 ? _props$theme$fonts : 'Lato';
-}, _colors["default"].black, function (props) {
+}, function (props) {
+  return _colors["default"].getColor('black', props.theme);
+}, function (props) {
   var _props$theme$fonts2, _props$theme2;
   return (_props$theme$fonts2 = (_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.fonts) !== null && _props$theme$fonts2 !== void 0 ? _props$theme$fonts2 : 'Lato';
 }, function (props) {
@@ -27,7 +31,11 @@ var globalStyles = (0, _styledComponents.css)(_templateObject || (_templateObjec
 }, function (props) {
   var _props$theme$fonts5, _props$theme5;
   return (_props$theme$fonts5 = (_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.fonts) !== null && _props$theme$fonts5 !== void 0 ? _props$theme$fonts5 : 'Lato';
-}, _colors["default"].primary_100, resizeIcon, _typography.Typography);
+}, function (props) {
+  return _colors["default"].getColor('primary_100', props.theme);
+}, function (props) {
+  return resizeIcon(props);
+}, _typography.Typography);
 var _default = globalStyles;
 exports["default"] = _default;
 //# sourceMappingURL=global.cjs.map

package/dist/styles/global.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"global.cjs","names":["_colors","_interopRequireDefault","require","_typography","_figmaSvg","_styledComponents","_templateObject","resizeIcon","btoa","SystemIcons","ExtendTextArea","replace","concat","COLORS","neutral_600","globalStyles","css","_taggedTemplateLiteral2","props","_props$theme$fonts","_props$theme","theme","fonts","black","_props$theme$fonts2","_props$theme2","_props$theme$fonts3","_props$theme3","_props$theme$fonts4","_props$theme4","_props$theme$fonts5","_props$theme5","primary_100","Typography","_default","exports"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\r\nimport {Typography} from \"./typography\";\r\nimport {SystemIcons} from \"@laerdal/figma-svg\";\r\nimport { css } from 'styled-components';\r\n\r\nconst resizeIcon = btoa(SystemIcons.ExtendTextArea.replace(\"viewBox=\\\"0 0 24 24\\\"\", \"viewBox='0 0 26 26'\")\r\n  .replace('fill=\"#1F1F1F\"', `fill=\"${COLORS.neutral_600}\"`));\r\n\r\nconst globalStyles = css`\r\n  html,\r\n  body {\r\n    height: 100%;\r\n    font-family: '${props => props.theme?.fonts ?? 'Lato'}', sans-serif;\r\n    color: ${COLORS.black};\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  [lang^=\"ja\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans JP, sans-serif;\r\n  }\r\n  \r\n  [lang^=\"ko\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans KR, sans-serif;\r\n  }\r\n  \r\n  [lang^=\"zh\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans SC, sans-serif;\r\n  }\r\n  \r\n  [lang=\"zh-cht\" i],\r\n  [lang=\"zh-hant\" i],\r\n  [lang=\"zh-hk\" i],\r\n  [lang=\"zh-mo\" i],\r\n  [lang=\"zh-tw\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans TC, sans-serif;\r\n  }\r\n\r\n\r\n  body {\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  main,\r\n  aside,\r\n  details {\r\n    display: block;\r\n  }\r\n\r\n  summary {\r\n    display: block;\r\n  }\r\n\r\n  #root {\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  button,\r\n  input,\r\n  label {\r\n    font-family: inherit;\r\n  }\r\n\r\n  .react-grid-item.react-grid-placeholder {\r\n    background: ${COLORS.primary_100} !important;\r\n    opacity: 1 !important;\r\n  }\r\n\r\n  .react-resizable-handle {\r\n    background-image: none !important;\r\n  }\r\n\r\n  .react-resizable-handle::after {\r\n    border: none !important;\r\n  }\r\n  \r\n  ::-webkit-resizer {\r\n    background-image: url(\"data:image/svg+xml;base64,${resizeIcon}\");\r\n  }\r\n  \r\n  ${Typography}\r\n`;\r\n\r\nexport default globalStyles;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAAwC,IAAAI,eAAA;AAExC,IAAMC,UAAU,GAAGC,IAAI,CAACC,qBAAW,CAACC,cAAc,CAACC,OAAO,CAAC,uBAAuB,EAAE,qBAAqB,CAAC,CACvGA,OAAO,CAAC,gBAAgB,YAAAC,MAAA,CAAWC,kBAAM,CAACC,WAAW,OAAG,CAAC,CAAC;AAE7D,IAAMC,YAAY,OAAGC,qBAAG,EAAAV,eAAA,KAAAA,eAAA,OAAAW,uBAAA,uxCAIJ,UAAAC,KAAK;EAAA,IAAAC,kBAAA,EAAAC,YAAA;EAAA,QAAAD,kBAAA,IAAAC,YAAA,GAAIF,KAAK,CAACG,KAAK,cAAAD,YAAA,uBAAXA,YAAA,CAAaE,KAAK,cAAAH,kBAAA,cAAAA,kBAAA,GAAI,MAAM;AAAA,GAC5CN,kBAAM,CAACU,KAAK,EAKN,UAAAL,KAAK;EAAA,IAAAM,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAIP,KAAK,CAACG,KAAK,cAAAI,aAAA,uBAAXA,aAAA,CAAaH,KAAK,cAAAE,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAIrC,UAAAN,KAAK;EAAA,IAAAQ,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAIT,KAAK,CAACG,KAAK,cAAAM,aAAA,uBAAXA,aAAA,CAAaL,KAAK,cAAAI,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAIrC,UAAAR,KAAK;EAAA,IAAAU,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAIX,KAAK,CAACG,KAAK,cAAAQ,aAAA,uBAAXA,aAAA,CAAaP,KAAK,cAAAM,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAQrC,UAAAV,KAAK;EAAA,IAAAY,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAIb,KAAK,CAACG,KAAK,cAAAU,aAAA,uBAAXA,aAAA,CAAaT,KAAK,cAAAQ,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAgCtCjB,kBAAM,CAACmB,WAAW,EAamBzB,UAAU,EAG7D0B,sBAAU,CACb;AAAC,IAAAC,QAAA,GAEanB,YAAY;AAAAoB,OAAA,cAAAD,QAAA","ignoreList":[]}
+{"version":3,"file":"global.cjs","names":["_colors","_interopRequireDefault","require","_typography","_figmaSvg","_styledComponents","_templateObject","resizeIcon","props","btoa","SystemIcons","ExtendTextArea","replace","concat","COLORS","getColor","theme","globalStyles","css","_taggedTemplateLiteral2","_props$theme$fonts","_props$theme","fonts","_props$theme$fonts2","_props$theme2","_props$theme$fonts3","_props$theme3","_props$theme$fonts4","_props$theme4","_props$theme$fonts5","_props$theme5","Typography","_default","exports"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\r\nimport {Typography} from \"./typography\";\r\nimport {SystemIcons} from \"@laerdal/figma-svg\";\r\nimport { css } from 'styled-components';\r\n\r\nconst resizeIcon = (props: any) => btoa(SystemIcons.ExtendTextArea.replace(\"viewBox=\\\"0 0 24 24\\\"\", \"viewBox='0 0 26 26'\")\r\n  .replace('fill=\"#1F1F1F\"', `fill=\"${COLORS.getColor('neutral_600', props.theme)}\"`));\r\n\r\nconst globalStyles = css`\r\n  html,\r\n  body {\r\n    height: 100%;\r\n    font-family: '${props => props.theme?.fonts ?? 'Lato'}', sans-serif;\r\n    color: ${props => COLORS.getColor('black', props.theme)};\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  [lang^=\"ja\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans JP, sans-serif;\r\n  }\r\n  \r\n  [lang^=\"ko\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans KR, sans-serif;\r\n  }\r\n  \r\n  [lang^=\"zh\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans SC, sans-serif;\r\n  }\r\n  \r\n  [lang=\"zh-cht\" i],\r\n  [lang=\"zh-hant\" i],\r\n  [lang=\"zh-hk\" i],\r\n  [lang=\"zh-mo\" i],\r\n  [lang=\"zh-tw\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans TC, sans-serif;\r\n  }\r\n\r\n\r\n  body {\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  main,\r\n  aside,\r\n  details {\r\n    display: block;\r\n  }\r\n\r\n  summary {\r\n    display: block;\r\n  }\r\n\r\n  #root {\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  button,\r\n  input,\r\n  label {\r\n    font-family: inherit;\r\n  }\r\n\r\n  .react-grid-item.react-grid-placeholder {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)} !important;\r\n    opacity: 1 !important;\r\n  }\r\n\r\n  .react-resizable-handle {\r\n    background-image: none !important;\r\n  }\r\n\r\n  .react-resizable-handle::after {\r\n    border: none !important;\r\n  }\r\n  \r\n  ::-webkit-resizer {\r\n    background-image: url(\"data:image/svg+xml;base64,${props => resizeIcon(props)}\");\r\n  }\r\n  \r\n  ${Typography}\r\n`;\r\n\r\nexport default globalStyles;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAAwC,IAAAI,eAAA;AAExC,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIC,KAAU;EAAA,OAAKC,IAAI,CAACC,qBAAW,CAACC,cAAc,CAACC,OAAO,CAAC,uBAAuB,EAAE,qBAAqB,CAAC,CACvHA,OAAO,CAAC,gBAAgB,YAAAC,MAAA,CAAWC,kBAAM,CAACC,QAAQ,CAAC,aAAa,EAAEP,KAAK,CAACQ,KAAK,CAAC,OAAG,CAAC,CAAC;AAAA;AAEtF,IAAMC,YAAY,OAAGC,qBAAG,EAAAZ,eAAA,KAAAA,eAAA,OAAAa,uBAAA,uxCAIJ,UAAAX,KAAK;EAAA,IAAAY,kBAAA,EAAAC,YAAA;EAAA,QAAAD,kBAAA,IAAAC,YAAA,GAAIb,KAAK,CAACQ,KAAK,cAAAK,YAAA,uBAAXA,YAAA,CAAaC,KAAK,cAAAF,kBAAA,cAAAA,kBAAA,GAAI,MAAM;AAAA,GAC5C,UAAAZ,KAAK;EAAA,OAAIM,kBAAM,CAACC,QAAQ,CAAC,OAAO,EAAEP,KAAK,CAACQ,KAAK,CAAC;AAAA,GAKxC,UAAAR,KAAK;EAAA,IAAAe,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAIhB,KAAK,CAACQ,KAAK,cAAAQ,aAAA,uBAAXA,aAAA,CAAaF,KAAK,cAAAC,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAIrC,UAAAf,KAAK;EAAA,IAAAiB,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAIlB,KAAK,CAACQ,KAAK,cAAAU,aAAA,uBAAXA,aAAA,CAAaJ,KAAK,cAAAG,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAIrC,UAAAjB,KAAK;EAAA,IAAAmB,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAIpB,KAAK,CAACQ,KAAK,cAAAY,aAAA,uBAAXA,aAAA,CAAaN,KAAK,cAAAK,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAQrC,UAAAnB,KAAK;EAAA,IAAAqB,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAItB,KAAK,CAACQ,KAAK,cAAAc,aAAA,uBAAXA,aAAA,CAAaR,KAAK,cAAAO,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAgCtC,UAAArB,KAAK;EAAA,OAAIM,kBAAM,CAACC,QAAQ,CAAC,aAAa,EAAEP,KAAK,CAACQ,KAAK,CAAC;AAAA,GAaf,UAAAR,KAAK;EAAA,OAAID,UAAU,CAACC,KAAK,CAAC;AAAA,GAG7EuB,sBAAU,CACb;AAAC,IAAAC,QAAA,GAEaf,YAAY;AAAAgB,OAAA,cAAAD,QAAA","ignoreList":[]}

package/dist/styles/global.js

@@ -4,11 +4,15 @@ import COLORS from './colors';
 import { Typography } from "./typography";
 import { SystemIcons } from "@laerdal/figma-svg";
 import { css } from 'styled-components';
-var resizeIcon = btoa(SystemIcons.ExtendTextArea.replace("viewBox=\"0 0 24 24\"", "viewBox='0 0 26 26'").replace('fill="#1F1F1F"', "fill=\"".concat(COLORS.neutral_600, "\"")));
+var resizeIcon = function resizeIcon(props) {
+  return btoa(SystemIcons.ExtendTextArea.replace("viewBox=\"0 0 24 24\"", "viewBox='0 0 26 26'").replace('fill="#1F1F1F"', "fill=\"".concat(COLORS.getColor('neutral_600', props.theme), "\"")));
+};
 var globalStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  html,\n  body {\n    height: 100%;\n    font-family: '", "', sans-serif;\n    color: ", ";\n    -webkit-font-smoothing: antialiased;\n  }\n\n  [lang^=\"ja\" i] {\n    font-family: ", ", Noto Sans, Noto Sans JP, sans-serif;\n  }\n  \n  [lang^=\"ko\" i] {\n    font-family: ", ", Noto Sans, Noto Sans KR, sans-serif;\n  }\n  \n  [lang^=\"zh\" i] {\n    font-family: ", ", Noto Sans, Noto Sans SC, sans-serif;\n  }\n  \n  [lang=\"zh-cht\" i],\n  [lang=\"zh-hant\" i],\n  [lang=\"zh-hk\" i],\n  [lang=\"zh-mo\" i],\n  [lang=\"zh-tw\" i] {\n    font-family: ", ", Noto Sans, Noto Sans TC, sans-serif;\n  }\n\n\n  body {\n    margin: 0;\n    padding: 0;\n  }\n\n  main,\n  aside,\n  details {\n    display: block;\n  }\n\n  summary {\n    display: block;\n  }\n\n  #root {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  button,\n  input,\n  label {\n    font-family: inherit;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ", " !important;\n    opacity: 1 !important;\n  }\n\n  .react-resizable-handle {\n    background-image: none !important;\n  }\n\n  .react-resizable-handle::after {\n    border: none !important;\n  }\n  \n  ::-webkit-resizer {\n    background-image: url(\"data:image/svg+xml;base64,", "\");\n  }\n  \n  ", "\n"])), function (props) {
   var _props$theme$fonts, _props$theme;
   return (_props$theme$fonts = (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.fonts) !== null && _props$theme$fonts !== void 0 ? _props$theme$fonts : 'Lato';
-}, COLORS.black, function (props) {
+}, function (props) {
+  return COLORS.getColor('black', props.theme);
+}, function (props) {
   var _props$theme$fonts2, _props$theme2;
   return (_props$theme$fonts2 = (_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.fonts) !== null && _props$theme$fonts2 !== void 0 ? _props$theme$fonts2 : 'Lato';
 }, function (props) {
@@ -20,6 +24,10 @@ var globalStyles = css(_templateObject || (_templateObject = _taggedTemplateLite
 }, function (props) {
   var _props$theme$fonts5, _props$theme5;
   return (_props$theme$fonts5 = (_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.fonts) !== null && _props$theme$fonts5 !== void 0 ? _props$theme$fonts5 : 'Lato';
-}, COLORS.primary_100, resizeIcon, Typography);
+}, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return resizeIcon(props);
+}, Typography);
 export default globalStyles;
 //# sourceMappingURL=global.js.map