@laerdal/life-react-components 1.1.2-dev.8 → 1.2.1-dev.2

package/dist/esm/Tabs/VerticalTabs.js

@@ -18,6 +18,8 @@ const VerticalTabs = ({
     OptionalLineIcon: entry.optionalLineIcon,
     disabled: entry.disabled,
     showNotificationDot: entry.showNotificationDot,
+    size: size,
+    variant: entry.variant,
     onLinkClick: () => {
       if (entry.onClick) {
         entry.onClick();
@@ -35,7 +37,8 @@ VerticalTabs.propTypes = {
     disabled: _pt.bool,
     onClick: _pt.func,
     exact: _pt.bool,
-    showNotificationDot: _pt.bool
+    showNotificationDot: _pt.bool,
+    variant: _pt.oneOf(['critical', 'positive']).isRequired
   })).isRequired
 };
 export default VerticalTabs;

package/dist/esm/Tabs/VerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/VerticalTabs.tsx"],"names":["React","Tabs","TabLink","VerticalTabs","size","entries","map","entry","to","exact","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","onClick"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,OAAP,MAAoB,WAApB;;AAkBA,MAAMC,YAAY,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,CAAD,KAA0C;AAC7D,sBACE,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAED,IAAI,IAAI;AAApB,KACGC,OAAO,EAAEC,GAAT,CAAcC,KAAD,iBACZ,oBAAC,OAAD;AACE,IAAA,GAAG,EAAEA,KAAK,CAACC,EADb;AAEE,IAAA,EAAE,EAAED,KAAK,CAACC,EAFZ;AAGE,IAAA,KAAK,EAAED,KAAK,CAACE,KAHf;AAIE,IAAA,YAAY,EAAEF,KAAK,CAACG,YAJtB;AAKE,IAAA,YAAY,EAAEH,KAAK,CAACI,YALtB;AAME,IAAA,gBAAgB,EAAEJ,KAAK,CAACK,gBAN1B;AAOE,IAAA,QAAQ,EAAEL,KAAK,CAACM,QAPlB;AAQE,IAAA,mBAAmB,EAAEN,KAAK,CAACO,mBAR7B;AASE,IAAA,WAAW,EAAE,MAAM;AACjB,UAAIP,KAAK,CAACQ,OAAV,EAAmB;AACjBR,QAAAA,KAAK,CAACQ,OAAN;AACD;AACF;AAbH,IADD,CADH,CADF;AAoBD,CArBD;;;AAJEX,EAAAA,I;AACAC,EAAAA,O;AAXAK,IAAAA,Y;AACAC,IAAAA,Y;AAEAH,IAAAA,E;AACAK,IAAAA,Q;AACAE,IAAAA,O;AACAN,IAAAA,K;AACAK,IAAAA,mB;;;AA8BF,eAAeX,YAAf","sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.FunctionComponent<BaseProps>;\n  to: string;\n  disabled?: boolean;\n  onClick?: () => void;\n  exact?: boolean;\n  showNotificationDot?: boolean;\n}\ninterface VerticalTabsProps {\n  size?: string;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size || 'large'}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          exact={entry.exact}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          onLinkClick={() => {\n            if (entry.onClick) {\n              entry.onClick();\n            }\n          }}></TabLink>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"file":"VerticalTabs.js"}
+{"version":3,"sources":["../../../src/Tabs/VerticalTabs.tsx"],"names":["React","Tabs","TabLink","VerticalTabs","size","entries","map","entry","to","exact","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","variant","onClick"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,OAAP,MAAoB,WAApB;;AAmBA,MAAMC,YAAY,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,CAAD,KAA0C;AAC7D,sBACE,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAED,IAAI,IAAI;AAApB,KACGC,OAAO,EAAEC,GAAT,CAAcC,KAAD,iBACZ,oBAAC,OAAD;AACE,IAAA,GAAG,EAAEA,KAAK,CAACC,EADb;AAEE,IAAA,EAAE,EAAED,KAAK,CAACC,EAFZ;AAGE,IAAA,KAAK,EAAED,KAAK,CAACE,KAHf;AAIE,IAAA,YAAY,EAAEF,KAAK,CAACG,YAJtB;AAKE,IAAA,YAAY,EAAEH,KAAK,CAACI,YALtB;AAME,IAAA,gBAAgB,EAAEJ,KAAK,CAACK,gBAN1B;AAOE,IAAA,QAAQ,EAAEL,KAAK,CAACM,QAPlB;AAQE,IAAA,mBAAmB,EAAEN,KAAK,CAACO,mBAR7B;AASE,IAAA,IAAI,EAAEV,IATR;AAUE,IAAA,OAAO,EAAEG,KAAK,CAACQ,OAVjB;AAWE,IAAA,WAAW,EAAE,MAAM;AACjB,UAAIR,KAAK,CAACS,OAAV,EAAmB;AACjBT,QAAAA,KAAK,CAACS,OAAN;AACD;AACF;AAfH,IADD,CADH,CADF;AAsBD,CAvBD;;;AAJEZ,EAAAA,I;AACAC,EAAAA,O;AAZAK,IAAAA,Y;AACAC,IAAAA,Y;AAEAH,IAAAA,E;AACAK,IAAAA,Q;AACAG,IAAAA,O;AACAP,IAAAA,K;AACAK,IAAAA,mB;AACAC,IAAAA,O,aAAS,U,EAAa,U;;;AAgCxB,eAAeZ,YAAf","sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.FunctionComponent<BaseProps>;\n  to: string;\n  disabled?: boolean;\n  onClick?: () => void;\n  exact?: boolean;\n  showNotificationDot?: boolean;\n  variant: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: string;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size || 'large'}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          exact={entry.exact}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={() => {\n            if (entry.onClick) {\n              entry.onClick();\n            }\n          }}></TabLink>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"file":"VerticalTabs.js"}

package/dist/esm/Toggles/ToggleSwitch.js

@@ -9,7 +9,8 @@ import * as React from 'react';
 /**
  * Import custom styles.
  */
-import { ToggleSwitchContainer, ToggleSwitch as Switch } from './TogglerStyles';
+import { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';
+import { Size } from '..';
 
 const ToggleSwitch = ({
   id,
@@ -17,6 +18,7 @@ const ToggleSwitch = ({
   selected,
   label,
   isSemantic,
+  size,
   onToggle
 }) => {
   /**
@@ -32,15 +34,18 @@ const ToggleSwitch = ({
     onToggle(!selected);
   };
 
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToggleSwitchContainer, null, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    disabled: disabled,
-    checked: selected,
-    id: id,
-    onChange: handleClick
-  }), /*#__PURE__*/React.createElement(Switch, {
+  size = size ?? Size.Medium;
+  return /*#__PURE__*/React.createElement(StyledSwitch, {
+    onClick: handleClick,
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
+    selected: selected,
+    tabIndex: disabled ? -1 : 0
+  }, /*#__PURE__*/React.createElement(ToggleSwitchContainer, null, /*#__PURE__*/React.createElement(Switch, {
     className: isSemantic ? 'semantic' : ''
-  }), label));
+  })), label && /*#__PURE__*/React.createElement("label", {
+    className: 'label',
+    htmlFor: id
+  }, label));
 };
 
 export default ToggleSwitch;

package/dist/esm/Toggles/ToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toggles/ToggleSwitch.tsx"],"names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","id","disabled","selected","label","isSemantic","onToggle","handleClick"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASC,qBAAT,EAAgCC,YAAY,IAAIC,MAAhD,QAA8D,iBAA9D;;AAEA,MAAMD,YAAY,GAAG,CAAC;AAAEE,EAAAA,EAAF;AAAMC,EAAAA,QAAN;AAAgBC,EAAAA,QAAhB;AAA0BC,EAAAA,KAA1B;AAAiCC,EAAAA,UAAjC;AAA6CC,EAAAA;AAA7C,CAAD,KAAgF;AACnG;AACF;AACA;AACE,QAAMC,WAAW,GAAG,MAAM;AACxB;AACA,QAAIL,QAAJ,EAAc;AACZ;AACD,KAJuB,CAMxB;;;AACAI,IAAAA,QAAQ,CAAC,CAACH,QAAF,CAAR;AACD,GARD;;AAUA,sBACE,8CACE,oBAAC,qBAAD,qBACE;AAAO,IAAA,IAAI,EAAC,UAAZ;AAAuB,IAAA,QAAQ,EAAED,QAAjC;AAA2C,IAAA,OAAO,EAAEC,QAApD;AAA8D,IAAA,EAAE,EAAEF,EAAlE;AAAsE,IAAA,QAAQ,EAAEM;AAAhF,IADF,eAEE,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAEF,UAAU,GAAG,UAAH,GAAgB;AAA7C,IAFF,EAGID,KAHJ,CADF,CADF;AASD,CAvBD;;AAyBA,eAAeL,YAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch } from './TogglerStyles';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, onToggle }: ToggleSwitchProps) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const handleClick = () => {\n    // If disabled, don't do anything\n    if (disabled) {\n      return;\n    }\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  return (\n    <div>\n      <ToggleSwitchContainer>\n        <input type=\"checkbox\" disabled={disabled} checked={selected} id={id} onChange={handleClick} />\n        <Switch className={isSemantic ? 'semantic' : ''} />\n        { label }\n      </ToggleSwitchContainer>\n    </div>\n  );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.js"}
+{"version":3,"sources":["../../../src/Toggles/ToggleSwitch.tsx"],"names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","Size","id","disabled","selected","label","isSemantic","size","onToggle","handleClick","Medium","toString","toLowerCase","concat"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASC,qBAAT,EAAgCC,YAAY,IAAIC,MAAhD,EAAwDC,YAAxD,QAA4E,iBAA5E;AACA,SAASC,IAAT,QAAqB,IAArB;;AAEA,MAAMH,YAAY,GAAG,CAAC;AAAEI,EAAAA,EAAF;AAAMC,EAAAA,QAAN;AAAgBC,EAAAA,QAAhB;AAA0BC,EAAAA,KAA1B;AAAiCC,EAAAA,UAAjC;AAA6CC,EAAAA,IAA7C;AAAmDC,EAAAA;AAAnD,CAAD,KAAsF;AACzG;AACF;AACA;AACE,QAAMC,WAAW,GAAG,MAAM;AACxB;AACA,QAAIN,QAAJ,EAAc;AACZ;AACD,KAJuB,CAMxB;;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GARD;;AAUAG,EAAAA,IAAI,GAAGA,IAAI,IAAIN,IAAI,CAACS,MAApB;AAEA,sBACE,oBAAC,YAAD;AACE,IAAA,OAAO,EAAED,WADX;AAEE,IAAA,SAAS,EAAEF,IAAI,CACZI,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDV,QAAQ,GAAG,WAAH,GAAiB,EAHxB,CAFb;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ;AAP5B,kBAQE,oBAAC,qBAAD,qBACE,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C,IADF,CARF,EAWGD,KAAK,iBACJ;AAAO,IAAA,SAAS,EAAE,OAAlB;AAA2B,IAAA,OAAO,EAAEH;AAApC,KACGG,KADH,CAZJ,CADF;AAmBD,CAnCD;;AAqCA,eAAeP,YAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\nimport { Size } from '..';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const handleClick = () => {\n    // If disabled, don't do anything\n    if (disabled) {\n      return;\n    }\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      onClick={handleClick}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}>\n      <ToggleSwitchContainer>\n        <Switch className={isSemantic ? 'semantic' : ''} />\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.js"}

package/dist/esm/Toggles/TogglerStyles.js

@@ -6,97 +6,123 @@ import { COLORS } from '../styles';
  * Import third-party libraries.
  */
 
-import styled from 'styled-components';
-import { ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-export const ToggleSwitchContainer = styled.label`
-  position: relative;
-  display: inline-block;
-  height: 28px;
-  width: auto;
+import styled, { css } from 'styled-components';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
+export const StyledSwitch = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: max-content;
+  min-height: 48px;
+  min-width: 48px;
+  align-items: center;
+  cursor: pointer;
+  &.small {
+    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
+  }
 
-  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
+  &.medium {
+    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
+  }
 
-  input {
-    opacity: 0;
-    width: 0;
-    height: 0;
+  &.large {
+    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}
+  }
+  &.disabled {
+    color: ${COLORS.neutral_300};
 
-    &:disabled + span {
-      background-color: ${COLORS.neutral_300} !important;
+    .label {
       cursor: not-allowed;
-
-      &:before {
-        background-color: ${COLORS.neutral_100} !important;
-        cursor: not-allowed;
-      }
     }
+  }
+  .label {
+    cursor: inherit;
+    margin-left: 8px;
+  }
 
-    &:checked {
-      &:disabled + span {
-        background-color: ${COLORS.neutral_300} !important;
-        cursor: not-allowed;
-
-        &:before {
-          background-color: ${COLORS.neutral_200} !important;
-          cursor: not-allowed;
-        }
-      }
-
-      &:hover + span {
-        background-color: ${COLORS.primary_700};
-
-        &.semantic {
-          background-color: ${COLORS.correct_500};
-        }
-
-        &:before {
-          background-color: ${COLORS.primary_100};
-        }
-      }
-
-      & + span {
-        background-color: ${COLORS.primary_500};
-
-        &.semantic {
-          background-color: ${COLORS.correct_500};
-        }
-
-        &:before {
-          -webkit-transform: translateX(12px);
-          -ms-transform: translateX(12px);
-          transform: translateX(12px);
-        }
-      }
+  &:not(.disabled):active label:first-of-type span {
+    &:before {
+      background-color: ${COLORS.primary_100};
     }
+  }
 
-    &:hover + span {
-      background-color: ${COLORS.neutral_500};
-
-      &.semantic {
-        background-color: ${COLORS.critical_500};
-      }
-
-      &:before {
-        background-color: ${COLORS.primary_100};
-      }
-    }
+  ${props => props.selected ? css`
+          &.disabled label:first-of-type span {
+            background-color: ${COLORS.neutral_300} !important;
+            cursor: not-allowed;
+
+            &:before {
+              background-color: ${COLORS.neutral_200} !important;
+              cursor: not-allowed;
+            }
+          }
+          &:hover span {
+            &.semantic {
+              background-color: ${COLORS.correct_500};
+            }
+
+            &:before {
+              background-color: ${COLORS.primary_20};
+            }
+          }
+          label:first-of-type span {
+            background-color: ${COLORS.primary_500};
+
+            &.semantic {
+              background-color: ${COLORS.correct_500};
+            }
+
+            &:before {
+              -webkit-transform: translateX(20px);
+              -ms-transform: translateX(20px);
+              transform: translateX(20px);
+            }
+          }
+        ` : css`
+          &.disabled label:first-of-type span {
+            background-color: ${COLORS.neutral_300} !important;
+            cursor: not-allowed;
+
+            &:before {
+              background-color: ${COLORS.neutral_100} !important;
+              cursor: not-allowed;
+            }
+          }
+          &:hover label:first-of-type span {
+            &.semantic {
+              background-color: ${COLORS.critical_500};
+            }
+
+            &:before {
+              background-color: ${COLORS.primary_20};
+            }
+          }
+        `}
+  &:not(.disabled):focus label:first-of-type span {
+    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};
+  }
 
-    &:focus + span {
-      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};
-    }
+  &:not(.disabled) label:first-of-type {
+    cursor: inherit;
   }
 `;
+export const ToggleSwitchContainer = styled.label`
+  position: relative;
+  align-items: center;
+  display: inline-flex;
+  height: 28px;
+  width: auto;
+  padding: 10px 6px;
+`;
 export const ToggleSwitch = styled.span`
   position: relative;
   display: inline-block;
-  margin-right: 10px;
   vertical-align: middle;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  width: 28px;
+  width: 36px;
   height: 16px;
   background-color: ${COLORS.neutral_500};
   border-radius: 100px;
@@ -111,10 +137,11 @@ export const ToggleSwitch = styled.span`
     height: 12px;
     width: 12px;
     left: 2px;
-    bottom: 2px;
+    top: calc(50% - 6px);
     background-color: ${COLORS.white};
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
+    -webkit-transition: background-color 0.1s, transform 0.1s;
+    transition: 0.1s;
+    transition-timing-function: ease-in-out;
     border-radius: 50%;
   }
 `;

package/dist/esm/Toggles/TogglerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toggles/TogglerStyles.ts"],"names":["COLORS","styled","ComponentSStyling","ComponentTextStyle","ToggleSwitchContainer","label","Regular","black","neutral_300","neutral_100","neutral_200","primary_700","correct_500","primary_100","primary_500","neutral_500","critical_500","focus_25","focus","ToggleSwitch","span","white"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,WAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,sBAAtD;AAEA,OAAO,MAAMC,qBAAqB,GAAGH,MAAM,CAACI,KAAM;AAClD;AACA;AACA;AACA;AACA;AACA,IAAIH,iBAAiB,CAACC,kBAAkB,CAACG,OAApB,EAA6BN,MAAM,CAACO,KAApC,CAA2C;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BP,MAAM,CAACQ,WAAY;AAC7C;AACA;AACA;AACA,4BAA4BR,MAAM,CAACS,WAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BT,MAAM,CAACQ,WAAY;AAC/C;AACA;AACA;AACA,8BAA8BR,MAAM,CAACU,WAAY;AACjD;AACA;AACA;AACA;AACA;AACA,4BAA4BV,MAAM,CAACW,WAAY;AAC/C;AACA;AACA,8BAA8BX,MAAM,CAACY,WAAY;AACjD;AACA;AACA;AACA,8BAA8BZ,MAAM,CAACa,WAAY;AACjD;AACA;AACA;AACA;AACA,4BAA4Bb,MAAM,CAACc,WAAY;AAC/C;AACA;AACA,8BAA8Bd,MAAM,CAACY,WAAY;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BZ,MAAM,CAACe,WAAY;AAC7C;AACA;AACA,4BAA4Bf,MAAM,CAACgB,YAAa;AAChD;AACA;AACA;AACA,4BAA4BhB,MAAM,CAACa,WAAY;AAC/C;AACA;AACA;AACA;AACA,iCAAiCb,MAAM,CAACiB,QAAS,iBAAgBjB,MAAM,CAACkB,KAAM;AAC9E;AACA;AACA,CA7EO;AA+EP,OAAO,MAAMC,YAAY,GAAGlB,MAAM,CAACmB,IAAK;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBpB,MAAM,CAACe,WAAY;AACzC;AACA;AACA;AACA,wBAAwBf,MAAM,CAACgB,YAAa;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBhB,MAAM,CAACqB,KAAM;AACrC;AACA;AACA;AACA;AACA,CA/BO","sourcesContent":["/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  display: inline-block;\n  height: 28px;\n  width: auto;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n\n    &:disabled + span {\n      background-color: ${COLORS.neutral_300} !important;\n      cursor: not-allowed;\n\n      &:before {\n        background-color: ${COLORS.neutral_100} !important;\n        cursor: not-allowed;\n      }\n    }\n\n    &:checked {\n      &:disabled + span {\n        background-color: ${COLORS.neutral_300} !important;\n        cursor: not-allowed;\n\n        &:before {\n          background-color: ${COLORS.neutral_200} !important;\n          cursor: not-allowed;\n        }\n      }\n\n      &:hover + span {\n        background-color: ${COLORS.primary_700};\n\n        &.semantic {\n          background-color: ${COLORS.correct_500};\n        }\n\n        &:before {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      & + span {\n        background-color: ${COLORS.primary_500};\n\n        &.semantic {\n          background-color: ${COLORS.correct_500};\n        }\n\n        &:before {\n          -webkit-transform: translateX(12px);\n          -ms-transform: translateX(12px);\n          transform: translateX(12px);\n        }\n      }\n    }\n\n    &:hover + span {\n      background-color: ${COLORS.neutral_500};\n\n      &.semantic {\n        background-color: ${COLORS.critical_500};\n      }\n\n      &:before {\n        background-color: ${COLORS.primary_100};\n      }\n    }\n\n    &:focus + span {\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n    }\n  }\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\n  margin-right: 10px;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 28px;\n  height: 16px;\n  background-color: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    bottom: 2px;\n    background-color: ${COLORS.white};\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border-radius: 50%;\n  }\n`;\n"],"file":"TogglerStyles.js"}
+{"version":3,"sources":["../../../src/Toggles/TogglerStyles.ts"],"names":["COLORS","styled","css","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","props","selected","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focus_25","focus","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,WAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,iBAA/C,EAAkEC,kBAAlE,QAA4F,sBAA5F;AAEA,OAAO,MAAMC,YAAY,GAAGN,MAAM,CAACO,GAAuC;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMH,iBAAiB,CAACC,kBAAkB,CAACG,OAApB,EAA6BT,MAAM,CAACU,KAApC,CAA2C;AAClE;AACA;AACA;AACA,MAAMN,iBAAiB,CAACE,kBAAkB,CAACG,OAApB,EAA6BT,MAAM,CAACU,KAApC,CAA2C;AAClE;AACA;AACA;AACA,MAAMP,iBAAiB,CAACG,kBAAkB,CAACG,OAApB,EAA6BT,MAAM,CAACU,KAApC,CAA2C;AAClE;AACA;AACA,aAAaV,MAAM,CAACW,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BX,MAAM,CAACY,WAAY;AAC7C;AACA;AACA;AACA,IAAKC,KAAD,IACAA,KAAK,CAACC,QAAN,GACIZ,GAAI;AACZ;AACA,gCAAgCF,MAAM,CAACW,WAAY;AACnD;AACA;AACA;AACA,kCAAkCX,MAAM,CAACe,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA,kCAAkCf,MAAM,CAACgB,WAAY;AACrD;AACA;AACA;AACA,kCAAkChB,MAAM,CAACiB,UAAW;AACpD;AACA;AACA;AACA,gCAAgCjB,MAAM,CAACkB,WAAY;AACnD;AACA;AACA,kCAAkClB,MAAM,CAACgB,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAjCI,GAkCId,GAAI;AACZ;AACA,gCAAgCF,MAAM,CAACW,WAAY;AACnD;AACA;AACA;AACA,kCAAkCX,MAAM,CAACmB,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA,kCAAkCnB,MAAM,CAACoB,YAAa;AACtD;AACA;AACA;AACA,kCAAkCpB,MAAM,CAACiB,UAAW;AACpD;AACA;AACA,SAAU;AACV;AACA,+BAA+BjB,MAAM,CAACqB,QAAS,iBAAgBrB,MAAM,CAACsB,KAAM;AAC5E;AACA;AACA;AACA;AACA;AACA,CAnGO;AAqGP,OAAO,MAAMC,qBAAqB,GAAGtB,MAAM,CAACuB,KAAM;AAClD;AACA;AACA;AACA;AACA;AACA;AACA,CAPO;AASP,OAAO,MAAMC,YAAY,GAAGxB,MAAM,CAACyB,IAAK;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB1B,MAAM,CAAC2B,WAAY;AACzC;AACA;AACA;AACA,wBAAwB3B,MAAM,CAACoB,YAAa;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBpB,MAAM,CAAC4B,KAAM;AACrC;AACA;AACA;AACA;AACA;AACA,CA/BO","sourcesContent":["/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\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    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\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: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled):focus label:first-of-type span {\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\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: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\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: ${COLORS.white};\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`;\n"],"file":"TogglerStyles.js"}

package/dist/esm/Toggles/TogglerTypes.js

@@ -1,6 +1,2 @@
-/**
- * Types for the table.
- */
-;
 export {};
 //# sourceMappingURL=TogglerTypes.js.map

package/dist/esm/Toggles/TogglerTypes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toggles/TogglerTypes.ts"],"names":[],"mappings":"AAAA;AACA;AACA;AAQC","sourcesContent":["/**\n * Types for the table.\n */\nexport interface ToggleSwitchProps {\n  id: string;\n  label?: string;\n  disabled?: boolean;\n  selected?: boolean;\n  isSemantic?: boolean;\n  onToggle: (selected: boolean) => void;\n};\n"],"file":"TogglerTypes.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"TogglerTypes.js"}

package/dist/esm/Tooltips/TooltipStyles.js

@@ -0,0 +1,77 @@
+import styled, { css } from 'styled-components';
+import { Size } from '../types';
+import { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';
+import { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
+
+const distanceToEdge = size => {
+  return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';
+};
+
+export const Tooltip = styled.div`
+
+    pointer-events: none;
+    ${props => props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : ''}
+    ${props => props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : ''}
+    ${props => props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : ''}
+    ${props => props.align == 'center' ? 'text-align: center;' : ''}
+    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};
+    
+    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};
+    border-radius: 2px;
+    width: max-content;
+    height: ${props => props.height};
+    max-width: 34ems;
+    background: ${COLORS.primary_800};
+    position: absolute; 
+    opacity: 0; 
+    z-index: 1;
+    ${props => props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : ''}
+
+    ${props => props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : ''}
+    ${props => props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : ''}
+            
+    ${props => props.position == 'left' || props.position == 'right' ? '' : props.align == 'start' ? 'left: 0%;' : props.align == 'end' ? 'right: 0%;' : 'left: 50%; transform: translateX(-50%);'}
+
+
+&::after {
+    ${props => !props.withArrow ? 'display: none;' : ''}
+    content: "";
+    position: absolute;
+    ${props => props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : ''}
+    
+    ${props => props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : ''}
+    ${props => props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : ''}
+
+    ${props => props.position == 'left' || props.position == 'right' ? '' : props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}
+
+    ${props => props.position == 'left' ? '' : 'margin-left: -5px;'}
+    margin: -0.5px;
+    border-width: 4px;
+    border-style: solid;
+    border-color: ${props => props.position == 'top' ? COLORS.primary_800 : 'transparent'} 
+                    ${props => props.position == 'right' ? COLORS.primary_800 : 'transparent'} 
+                    ${props => props.position == 'bottom' ? COLORS.primary_800 : 'transparent'} 
+                    ${props => props.position == 'left' ? COLORS.primary_800 : 'transparent'};
+  }
+`;
+Tooltip.defaultProps = {
+  withArrow: false,
+  size: Size.Small,
+  height: 'auto',
+  align: 'center',
+  position: 'bottom'
+};
+export const TooltipTrigger = css`
+  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {
+    opacity: 1;
+    transition: 0.5s;
+    transition-delay: 1s;
+  }
+`;
+export const TooltipContainer = styled.div`
+  display: inline-block;
+  position: relative;
+
+  ${TooltipTrigger}
+`;
+//# sourceMappingURL=TooltipStyles.js.map

package/dist/esm/Tooltips/TooltipStyles.js.map

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

package/dist/esm/Tooltips/TooltipTypes.js

@@ -0,0 +1,6 @@
+/**
+ * Types for the table.
+ */
+;
+export {};
+//# sourceMappingURL=TooltipTypes.js.map

package/dist/esm/Tooltips/TooltipTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":"AAEA;AACA;AACA;AAUG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n  "],"file":"TooltipTypes.js"}

package/dist/esm/Tooltips/TooltipWrapper.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { TooltipContainer, Tooltip } from './TooltipStyles';
+import { Size } from '..';
+
+const TooltipWrapper = ({
+  label,
+  children,
+  withArrow,
+  size = Size.Small,
+  height = 'auto',
+  align = 'center',
+  position = 'bottom'
+}) => {
+  return /*#__PURE__*/React.createElement(TooltipContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
+    align: align,
+    height: height,
+    size: size,
+    withArrow: withArrow,
+    position: position
+  }, label), children);
+};
+
+export default TooltipWrapper;
+//# sourceMappingURL=TooltipWrapper.js.map

package/dist/esm/Tooltips/TooltipWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Tooltips/TooltipWrapper.tsx"],"names":["React","TooltipContainer","Tooltip","Size","TooltipWrapper","label","children","withArrow","size","Small","height","align","position"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,gBAAT,EAA2BC,OAA3B,QAA0C,iBAA1C;AACA,SAASC,IAAT,QAAqB,IAArB;;AAEC,MAAMC,cAAc,GAAG,CAAC;AACtBC,EAAAA,KADsB;AACfC,EAAAA,QADe;AAEtBC,EAAAA,SAFsB;AAGtBC,EAAAA,IAAI,GAAGL,IAAI,CAACM,KAHU;AAItBC,EAAAA,MAAM,GAAG,MAJa;AAKtBC,EAAAA,KAAK,GAAG,QALc;AAMtBC,EAAAA,QAAQ,GAAG;AANW,CAAD,KAMoB;AAExC,sBAAO,oBAAC,gBAAD,qBACC,oBAAC,OAAD;AAAS,IAAA,KAAK,EAAED,KAAhB;AACG,IAAA,MAAM,EAAED,MADX;AAEG,IAAA,IAAI,EAAEF,IAFT;AAGG,IAAA,SAAS,EAAED,SAHd;AAIG,IAAA,QAAQ,EAAEK;AAJb,KAKIP,KALJ,CADD,EAQDC,QARC,CAAP;AAUF,CAlBD;;AAoBA,eAAeF,cAAf","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer>\n            <Tooltip align={align} \n               height={height} \n               size={size}\n               withArrow={withArrow} \n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}

package/dist/esm/Tooltips/index.js

@@ -0,0 +1,4 @@
+import TooltipWrapper from './TooltipWrapper';
+import { TooltipTrigger, TooltipContainer } from './TooltipStyles';
+export { TooltipWrapper, TooltipTrigger, TooltipContainer };
+//# sourceMappingURL=index.js.map

package/dist/esm/Tooltips/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Tooltips/index.ts"],"names":["TooltipWrapper","TooltipTrigger","TooltipContainer"],"mappings":"AAAA,OAAOA,cAAP,MAA2B,kBAA3B;AACA,SAAQC,cAAR,EAAwBC,gBAAxB,QAA+C,iBAA/C;AAEA,SAASF,cAAT,EAAyBC,cAAzB,EAAyCC,gBAAzC","sourcesContent":["import TooltipWrapper from './TooltipWrapper';\nimport {TooltipTrigger, TooltipContainer} from './TooltipStyles';\n\nexport { TooltipWrapper, TooltipTrigger, TooltipContainer };\n"],"file":"index.js"}