@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/Toggles/TogglerStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\n * Import custom styles.\n */\nimport { COLORS, focusStyles } 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  &.disabled[aria-pressed='true'] 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\n  &[aria-pressed='true']:hover span {\n    &.semantic {\n      background-color: ${COLORS.correct_500};\n    }\n\n    &:before {\n      background-color: ${COLORS.primary_20};\n    }\n  }\n\n  &[aria-pressed='true'] 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  &.disabled[aria-pressed='false'] 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\n  &[aria-pressed='false']: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-visible {\n    ${focusStyles}\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: 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: ${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"],"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,gwDAShCH,iBAAiB,CAACC,kBAAkB,CAACG,OAAO,EAAET,MAAM,CAACU,KAAK,CAAC,EAI3DN,iBAAiB,CAACE,kBAAkB,CAACG,OAAO,EAAET,MAAM,CAACU,KAAK,CAAC,EAI3DP,iBAAiB,CAACG,kBAAkB,CAACG,OAAO,EAAET,MAAM,CAACU,KAAK,CAAC,EAGpDV,MAAM,CAACW,WAAW,EAaLX,MAAM,CAACY,WAAW,EAKpBZ,MAAM,CAACW,WAAW,EAIhBX,MAAM,CAACa,WAAW,EAOlBb,MAAM,CAACc,WAAW,EAIlBd,MAAM,CAACe,UAAU,EAKnBf,MAAM,CAACgB,WAAW,EAGhBhB,MAAM,CAACc,WAAW,EAWpBd,MAAM,CAACW,WAAW,EAIhBX,MAAM,CAACiB,WAAW,EAOlBjB,MAAM,CAACkB,YAAY,EAInBlB,MAAM,CAACe,UAAU,EAKrCd,WAAW,CAMhB;AAED,OAAO,IAAMkB,qBAAqB,GAAGjB,MAAM,CAACkB,KAAK,wMAOhD;AAED,OAAO,IAAMC,YAAY,GAAGnB,MAAM,CAACoB,IAAI,gsBAYjBtB,MAAM,CAACuB,WAAW,EAIhBvB,MAAM,CAACkB,YAAY,EAUnBlB,MAAM,CAACwB,KAAK,CAMnC"}
+{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","ToggleSwitchContainer","label","ToggleSwitch","span","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,gwDAShCH,iBAAiB,CAACC,kBAAkB,CAACG,OAAO,EAAET,MAAM,CAACU,KAAK,CAAC,EAI3DN,iBAAiB,CAACE,kBAAkB,CAACG,OAAO,EAAET,MAAM,CAACU,KAAK,CAAC,EAI3DP,iBAAiB,CAACG,kBAAkB,CAACG,OAAO,EAAET,MAAM,CAACU,KAAK,CAAC,EAGpDV,MAAM,CAACW,WAAW,EAaLX,MAAM,CAACY,WAAW,EAKpBZ,MAAM,CAACW,WAAW,EAIhBX,MAAM,CAACa,WAAW,EAOlBb,MAAM,CAACc,WAAW,EAIlBd,MAAM,CAACe,UAAU,EAKnBf,MAAM,CAACgB,WAAW,EAGhBhB,MAAM,CAACc,WAAW,EAWpBd,MAAM,CAACW,WAAW,EAIhBX,MAAM,CAACiB,WAAW,EAOlBjB,MAAM,CAACkB,YAAY,EAInBlB,MAAM,CAACe,UAAU,EAKrCd,WAAW,CAMhB;AAED,OAAO,IAAMkB,qBAAqB,GAAGjB,MAAM,CAACkB,KAAK,wMAOhD;AAED,OAAO,IAAMC,YAAY,GAAGnB,MAAM,CAACoB,IAAI,gsBAYjBtB,MAAM,CAACuB,WAAW,EAIhBvB,MAAM,CAACkB,YAAY,EAUnBlB,MAAM,CAACwB,KAAK,CAMnC"}

package/dist/Toggles/TogglerTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerTypes.cjs","names":[],"sources":["../../src/Toggles/TogglerTypes.ts"],"sourcesContent":["import { Size } from '..';\n\n/**\n * Types for the table.\n */\nexport interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'onClick' | 'tabIndex'  >{\n  id: string;\n  label?: string;\n  disabled?: boolean;\n  selected?: boolean;\n  isSemantic?: boolean;\n  size?: Size;\n  onToggle: (selected: boolean) => void;\n}\n"],"mappings":""}
+{"version":3,"file":"TogglerTypes.cjs","names":[],"sources":["../../src/Toggles/TogglerTypes.ts"],"sourcesContent":["import { Size } from '..';\r\n\r\n/**\r\n * Types for the table.\r\n */\r\nexport interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'onClick' | 'tabIndex'  >{\r\n  id: string;\r\n  label?: string;\r\n  disabled?: boolean;\r\n  selected?: boolean;\r\n  isSemantic?: boolean;\r\n  size?: Size;\r\n  onToggle: (selected: boolean) => void;\r\n}\r\n"],"mappings":""}

package/dist/Toggles/TogglerTypes.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-import { Size } from '..';
-/**
- * Types for the table.
- */
-export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'onClick' | 'tabIndex'> {
-    id: string;
-    label?: string;
-    disabled?: boolean;
-    selected?: boolean;
-    isSemantic?: boolean;
-    size?: Size;
-    onToggle: (selected: boolean) => void;
-}
+/// <reference types="react" />
+import { Size } from '..';
+/**
+ * Types for the table.
+ */
+export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'onClick' | 'tabIndex'> {
+    id: string;
+    label?: string;
+    disabled?: boolean;
+    selected?: boolean;
+    isSemantic?: boolean;
+    size?: Size;
+    onToggle: (selected: boolean) => void;
+}

package/dist/Toggles/TogglerTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerTypes.js","names":[],"sources":["../../src/Toggles/TogglerTypes.ts"],"sourcesContent":["import { Size } from '..';\n\n/**\n * Types for the table.\n */\nexport interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'onClick' | 'tabIndex'  >{\n  id: string;\n  label?: string;\n  disabled?: boolean;\n  selected?: boolean;\n  isSemantic?: boolean;\n  size?: Size;\n  onToggle: (selected: boolean) => void;\n}\n"],"mappings":""}
+{"version":3,"file":"TogglerTypes.js","names":[],"sources":["../../src/Toggles/TogglerTypes.ts"],"sourcesContent":["import { Size } from '..';\r\n\r\n/**\r\n * Types for the table.\r\n */\r\nexport interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'onClick' | 'tabIndex'  >{\r\n  id: string;\r\n  label?: string;\r\n  disabled?: boolean;\r\n  selected?: boolean;\r\n  isSemantic?: boolean;\r\n  size?: Size;\r\n  onToggle: (selected: boolean) => void;\r\n}\r\n"],"mappings":""}

package/dist/Toggles/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Toggles/index.ts"],"sourcesContent":["import ToggleSwitch from './ToggleSwitch';\nimport ToggleButton from './ToggleButton';\n\nexport {ToggleSwitch, ToggleButton};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AACA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Toggles/index.ts"],"sourcesContent":["import ToggleSwitch from './ToggleSwitch';\r\nimport ToggleButton from './ToggleButton';\r\n\r\nexport {ToggleSwitch, ToggleButton};\r\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AACA"}

package/dist/Toggles/index.d.ts

@@ -1,3 +1,3 @@
-import ToggleSwitch from './ToggleSwitch';
-import ToggleButton from './ToggleButton';
-export { ToggleSwitch, ToggleButton };
+import ToggleSwitch from './ToggleSwitch';
+import ToggleButton from './ToggleButton';
+export { ToggleSwitch, ToggleButton };

package/dist/Toggles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ToggleSwitch","ToggleButton"],"sources":["../../src/Toggles/index.ts"],"sourcesContent":["import ToggleSwitch from './ToggleSwitch';\nimport ToggleButton from './ToggleButton';\n\nexport {ToggleSwitch, ToggleButton};\n"],"mappings":"AAAA,OAAOA,YAAY,MAAM,gBAAgB;AACzC,OAAOC,YAAY,MAAM,gBAAgB;AAEzC,SAAQD,YAAY,EAAEC,YAAY"}
+{"version":3,"file":"index.js","names":["ToggleSwitch","ToggleButton"],"sources":["../../src/Toggles/index.ts"],"sourcesContent":["import ToggleSwitch from './ToggleSwitch';\r\nimport ToggleButton from './ToggleButton';\r\n\r\nexport {ToggleSwitch, ToggleButton};\r\n"],"mappings":"AAAA,OAAOA,YAAY,MAAM,gBAAgB;AACzC,OAAOC,YAAY,MAAM,gBAAgB;AAEzC,SAAQD,YAAY,EAAEC,YAAY"}

package/dist/Tooltips/TooltipOverflow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipOverflow.cjs","names":["TooltipOverflow","label","children","input","withArrow","maxWidth","width","value","size","Size","Small","height","align","position","props","React","useState","textOverflowed","setTextOverflowed","focused","setFocused","useResizeDetector","targetRef","customW","customH","useEffect","checkIfOverflowed","over","current","offsetWidth","scrollWidth","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","addEventListener"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \ninterface TooltipOverflowProps extends TooltipProps {\n    input?: React.MutableRefObject<HTMLInputElement | null>;\n    maxWidth?: string;\n    width?: string;\n    value?: string;\n}\n\n const TooltipOverflow = ({\n   label, children,\n   input,\n   withArrow,\n   maxWidth,\n   width,\n   value,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'top',\n   ...props } : TooltipOverflowProps) => {\n\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<boolean>(false);\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  }, [customW, customH]);\n\n  const checkIfOverflowed = () => {\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\n    setTextOverflowed(over);\n  };\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  });\n\n  const onFocus = () => {\n    checkIfOverflowed();\n    setFocused(true);\n  };\n\n  const onBlur = () => {\n    setFocused(false);\n  };\n\n  React.useEffect(() => {\n    return () => {\n      if(input?.current)\n      {\n        input?.current.removeEventListener(\"focus\", onFocus);\n        input?.current.removeEventListener(\"blur\", onBlur);\n      }\n    }\n  }, []);\n\n  const renderedCallback = React.useCallback(() => {\n    if(input && input.current)\n    {\n      input.current.addEventListener(\"focus\", onFocus);\n      input.current.addEventListener(\"blur\", onBlur);\n      checkIfOverflowed();\n    }\n  }, []);\n \n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\n               height={height}\n               role=\"tooltip\"\n               maxWidth={maxWidth}\n               width={width}\n               size={size}\n               withArrow={withArrow}\n               position={position}\n               {...props}>\n                <span>\n               {children} </span>\n            </Tooltip> }</div>;\n };\n \n export default TooltipOverflow;\n"],"mappings":"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"}
+{"version":3,"file":"TooltipOverflow.cjs","names":["TooltipOverflow","label","children","input","withArrow","maxWidth","width","value","size","Size","Small","height","align","position","props","React","useState","textOverflowed","setTextOverflowed","focused","setFocused","useResizeDetector","targetRef","customW","customH","useEffect","checkIfOverflowed","over","current","offsetWidth","scrollWidth","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","addEventListener"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\r\nimport * as React from 'react';\r\n\r\nimport { TooltipProps } from './TooltipTypes';\r\nimport { useResizeDetector } from 'react-resize-detector';\r\n\r\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\r\nimport { Size } from '..';\r\n \r\ninterface TooltipOverflowProps extends TooltipProps {\r\n    input?: React.MutableRefObject<HTMLInputElement | null>;\r\n    maxWidth?: string;\r\n    width?: string;\r\n    value?: string;\r\n}\r\n\r\n const TooltipOverflow = ({\r\n   label, children,\r\n   input,\r\n   withArrow,\r\n   maxWidth,\r\n   width,\r\n   value,\r\n   size = Size.Small,\r\n   height = 'auto',\r\n   align = 'center', \r\n   position = 'top',\r\n   ...props } : TooltipOverflowProps) => {\r\n\r\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\r\n\r\n  React.useEffect(() => {\r\n    checkIfOverflowed();\r\n  }, [customW, customH]);\r\n\r\n  const checkIfOverflowed = () => {\r\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\r\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\r\n    setTextOverflowed(over);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    checkIfOverflowed();\r\n  });\r\n\r\n  const onFocus = () => {\r\n    checkIfOverflowed();\r\n    setFocused(true);\r\n  };\r\n\r\n  const onBlur = () => {\r\n    setFocused(false);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    return () => {\r\n      if(input?.current)\r\n      {\r\n        input?.current.removeEventListener(\"focus\", onFocus);\r\n        input?.current.removeEventListener(\"blur\", onBlur);\r\n      }\r\n    }\r\n  }, []);\r\n\r\n  const renderedCallback = React.useCallback(() => {\r\n    if(input && input.current)\r\n    {\r\n      input.current.addEventListener(\"focus\", onFocus);\r\n      input.current.addEventListener(\"blur\", onBlur);\r\n      checkIfOverflowed();\r\n    }\r\n  }, []);\r\n \r\n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\r\n               height={height}\r\n               role=\"tooltip\"\r\n               maxWidth={maxWidth}\r\n               width={width}\r\n               size={size}\r\n               withArrow={withArrow}\r\n               position={position}\r\n               {...props}>\r\n                <span>\r\n               {children} </span>\r\n            </Tooltip> }</div>;\r\n };\r\n \r\n export default TooltipOverflow;\r\n"],"mappings":";;;;;;;;;;;;AACA;AAGA;AAEA;AACA;AAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAWmB;EAAA,IAVtCC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IACfC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAGC,MAAI,CAACC,KAAK;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,MAAM;IAAA,kBACfC,KAAK;IAALA,KAAK,2BAAG,QAAQ;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IACbC,KAAK;EAET,sBAA4CC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAnEC,cAAc;IAAEC,iBAAiB;EACxC,uBAA8BH,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAArDG,OAAO;IAAEC,UAAU;EAC1B,yBAA0C,IAAAC,sCAAiB,EAAC;MAAEC,SAAS,EAAEnB;IAAM,CAAC,CAAC;IAAnEoB,OAAO,sBAAdjB,KAAK;IAAmBkB,OAAO,sBAAfb,MAAM;EAE7BI,KAAK,CAACU,SAAS,CAAC,YAAM;IACpBC,iBAAiB,EAAE;EACrB,CAAC,EAAE,CAACH,OAAO,EAAEC,OAAO,CAAC,CAAC;EAEtB,IAAME,iBAAiB,GAAG,SAApBA,iBAAiB,GAAS;IAAA;IAC9B;IACA,IAAMC,IAAI,YAAIxB,KAAK,IAAI,CAACgB,OAAO,IAAIhB,KAAK,CAACyB,OAAO,IAAIzB,KAAK,CAACyB,OAAO,CAACC,WAAW,GAAG,CAAC,GAAG1B,KAAK,CAACyB,OAAO,CAACE,WAAW,yCAAK,KAAK;IACvHZ,iBAAiB,CAACS,IAAI,CAAC;EACzB,CAAC;EAEDZ,KAAK,CAACU,SAAS,CAAC,YAAM;IACpBC,iBAAiB,EAAE;EACrB,CAAC,CAAC;EAEF,IAAMK,OAAO,GAAG,SAAVA,OAAO,GAAS;IACpBL,iBAAiB,EAAE;IACnBN,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC;EAED,IAAMY,MAAM,GAAG,SAATA,MAAM,GAAS;IACnBZ,UAAU,CAAC,KAAK,CAAC;EACnB,CAAC;EAEDL,KAAK,CAACU,SAAS,CAAC,YAAM;IACpB,OAAO,YAAM;MACX,IAAGtB,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEyB,OAAO,EACjB;QACEzB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEyB,OAAO,CAACK,mBAAmB,CAAC,OAAO,EAAEF,OAAO,CAAC;QACpD5B,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEyB,OAAO,CAACK,mBAAmB,CAAC,MAAM,EAAED,MAAM,CAAC;MACpD;IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,IAAME,gBAAgB,GAAGnB,KAAK,CAACoB,WAAW,CAAC,YAAM;IAC/C,IAAGhC,KAAK,IAAIA,KAAK,CAACyB,OAAO,EACzB;MACEzB,KAAK,CAACyB,OAAO,CAACQ,gBAAgB,CAAC,OAAO,EAAEL,OAAO,CAAC;MAChD5B,KAAK,CAACyB,OAAO,CAACQ,gBAAgB,CAAC,MAAM,EAAEJ,MAAM,CAAC;MAC9CN,iBAAiB,EAAE;IACrB;EACF,CAAC,EAAE,EAAE,CAAC;EAEJ,oBAAO;IAAK,GAAG,EAAEQ,gBAAiB;IAAA,UAAEjB,cAAc,iBAAI,qBAAC,sBAAO;MAAC,KAAK,EAAEL,KAAM;MACjE,MAAM,EAAED,MAAO;MACf,IAAI,EAAC,SAAS;MACd,QAAQ,EAAEN,QAAS;MACnB,KAAK,EAAEC,KAAM;MACb,IAAI,EAAEE,IAAK;MACX,SAAS,EAAEJ,SAAU;MACrB,QAAQ,EAAES;IAAS,GACfC,KAAK;MAAA,uBACR;QAAA,WACAZ,QAAQ,EAAC,GAAC;MAAA;IAAO;EACX,EAAQ;AAC7B,CAAC;AAAC;EA5ECG,QAAQ;EACRC,KAAK;EACLC,KAAK;AAAA;AAAA,eA4EOP,eAAe;AAAA"}

package/dist/Tooltips/TooltipOverflow.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { TooltipProps } from './TooltipTypes';
-interface TooltipOverflowProps extends TooltipProps {
-    input?: React.MutableRefObject<HTMLInputElement | null>;
-    maxWidth?: string;
-    width?: string;
-    value?: string;
-}
-declare const TooltipOverflow: ({ label, children, input, withArrow, maxWidth, width, value, size, height, align, position, ...props }: TooltipOverflowProps) => JSX.Element;
-export default TooltipOverflow;
+import * as React from 'react';
+import { TooltipProps } from './TooltipTypes';
+interface TooltipOverflowProps extends TooltipProps {
+    input?: React.MutableRefObject<HTMLInputElement | null>;
+    maxWidth?: string;
+    width?: string;
+    value?: string;
+}
+declare const TooltipOverflow: ({ label, children, input, withArrow, maxWidth, width, value, size, height, align, position, ...props }: TooltipOverflowProps) => JSX.Element;
+export default TooltipOverflow;

package/dist/Tooltips/TooltipOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipOverflow.js","names":["React","useResizeDetector","Tooltip","Size","TooltipOverflow","label","children","input","withArrow","maxWidth","width","value","size","Small","height","align","position","props","useState","textOverflowed","setTextOverflowed","focused","setFocused","targetRef","customW","customH","useEffect","checkIfOverflowed","over","current","offsetWidth","scrollWidth","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","addEventListener"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \ninterface TooltipOverflowProps extends TooltipProps {\n    input?: React.MutableRefObject<HTMLInputElement | null>;\n    maxWidth?: string;\n    width?: string;\n    value?: string;\n}\n\n const TooltipOverflow = ({\n   label, children,\n   input,\n   withArrow,\n   maxWidth,\n   width,\n   value,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'top',\n   ...props } : TooltipOverflowProps) => {\n\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<boolean>(false);\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  }, [customW, customH]);\n\n  const checkIfOverflowed = () => {\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\n    setTextOverflowed(over);\n  };\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  });\n\n  const onFocus = () => {\n    checkIfOverflowed();\n    setFocused(true);\n  };\n\n  const onBlur = () => {\n    setFocused(false);\n  };\n\n  React.useEffect(() => {\n    return () => {\n      if(input?.current)\n      {\n        input?.current.removeEventListener(\"focus\", onFocus);\n        input?.current.removeEventListener(\"blur\", onBlur);\n      }\n    }\n  }, []);\n\n  const renderedCallback = React.useCallback(() => {\n    if(input && input.current)\n    {\n      input.current.addEventListener(\"focus\", onFocus);\n      input.current.addEventListener(\"blur\", onBlur);\n      checkIfOverflowed();\n    }\n  }, []);\n \n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\n               height={height}\n               role=\"tooltip\"\n               maxWidth={maxWidth}\n               width={width}\n               size={size}\n               withArrow={withArrow}\n               position={position}\n               {...props}>\n                <span>\n               {children} </span>\n            </Tooltip> }</div>;\n };\n \n export default TooltipOverflow;\n"],"mappings":"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"}
+{"version":3,"file":"TooltipOverflow.js","names":["React","useResizeDetector","Tooltip","Size","TooltipOverflow","label","children","input","withArrow","maxWidth","width","value","size","Small","height","align","position","props","useState","textOverflowed","setTextOverflowed","focused","setFocused","targetRef","customW","customH","useEffect","checkIfOverflowed","over","current","offsetWidth","scrollWidth","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","addEventListener"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\r\nimport * as React from 'react';\r\n\r\nimport { TooltipProps } from './TooltipTypes';\r\nimport { useResizeDetector } from 'react-resize-detector';\r\n\r\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\r\nimport { Size } from '..';\r\n \r\ninterface TooltipOverflowProps extends TooltipProps {\r\n    input?: React.MutableRefObject<HTMLInputElement | null>;\r\n    maxWidth?: string;\r\n    width?: string;\r\n    value?: string;\r\n}\r\n\r\n const TooltipOverflow = ({\r\n   label, children,\r\n   input,\r\n   withArrow,\r\n   maxWidth,\r\n   width,\r\n   value,\r\n   size = Size.Small,\r\n   height = 'auto',\r\n   align = 'center', \r\n   position = 'top',\r\n   ...props } : TooltipOverflowProps) => {\r\n\r\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\r\n\r\n  React.useEffect(() => {\r\n    checkIfOverflowed();\r\n  }, [customW, customH]);\r\n\r\n  const checkIfOverflowed = () => {\r\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\r\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\r\n    setTextOverflowed(over);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    checkIfOverflowed();\r\n  });\r\n\r\n  const onFocus = () => {\r\n    checkIfOverflowed();\r\n    setFocused(true);\r\n  };\r\n\r\n  const onBlur = () => {\r\n    setFocused(false);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    return () => {\r\n      if(input?.current)\r\n      {\r\n        input?.current.removeEventListener(\"focus\", onFocus);\r\n        input?.current.removeEventListener(\"blur\", onBlur);\r\n      }\r\n    }\r\n  }, []);\r\n\r\n  const renderedCallback = React.useCallback(() => {\r\n    if(input && input.current)\r\n    {\r\n      input.current.addEventListener(\"focus\", onFocus);\r\n      input.current.addEventListener(\"blur\", onBlur);\r\n      checkIfOverflowed();\r\n    }\r\n  }, []);\r\n \r\n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\r\n               height={height}\r\n               role=\"tooltip\"\r\n               maxWidth={maxWidth}\r\n               width={width}\r\n               size={size}\r\n               withArrow={withArrow}\r\n               position={position}\r\n               {...props}>\r\n                <span>\r\n               {children} </span>\r\n            </Tooltip> }</div>;\r\n };\r\n \r\n export default TooltipOverflow;\r\n"],"mappings":"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"}

package/dist/Tooltips/TooltipStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipStyles.cjs","names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentSStyling","ComponentTextStyle","Regular","COLORS","white","ComponentXSStyling","ComponentMStyling","align","BOXSHADOWS","BOXSHADOW_L2","width","height","maxWidth","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","triggerType","delay","css","TooltipContainer","focusStyles"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\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  maxWidth?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n  width?: string;\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  box-sizing: border-box;\n\n  padding: ${(props) => (props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px')};\n  border-radius: 2px;\n  ${(props) => (props.width ? `width: ${props.width};` : 'width: max-content;')}\n  height: ${(props) => props.height};\n  max-width: ${(props) => props.maxWidth ?? '34em'};\n  background: ${COLORS.primary_800};\n  position: absolute;\n  opacity: 0;\n  z-index: ${Z_INDEXES.tooltip};\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        ? ''\n        : props.align == 'start'\n        ? `left: ${distanceToEdge(props.size)};`\n        : props.align == 'end'\n        ? `right: ${distanceToEdge(props.size)};`\n        : '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')} ${(props) => (props.position == 'right' ? COLORS.primary_800 : 'transparent')}\n      ${(props) => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} ${(props) => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n\n  & > span {\n    word-wrap: break-word;\n    color: white;\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 = (triggerType: 'hover' | 'click', delay?: string) => css`\n  ${triggerType == 'hover'\n    ? `&:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n      opacity: 1;\n      transition: 0.5s;\n    transition-delay: ${delay ?? '0.7s'};\n    }`\n    : `& ${Tooltip} {\n      transition: 0.5s;\n      transition-delay: ${delay ?? '0s'};\n    }\n  \n    &.show ${Tooltip} {\n      opacity: 1;\n    }\n  \n    &.hide ${Tooltip} {\n      opacity: 0;\n    }`}\n`;\n\nexport const TooltipContainer = styled.div<{ triggerType: 'hover' | 'click', delay?: string }>`\n  display: inline-block;\n  position: relative;\n\n  ${(props) => TooltipTrigger(props.triggerType, props.delay)}\n\n  &:focus {\n    ${focusStyles}\n  }\n`;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAgD;AAAA;AAAA;AAEhD,IAAMA,cAAc,GAAG,SAAjBA,cAAc,CAAIC,IAAsB,EAAK;EACjD,OAAOA,IAAI,IAAIC,WAAI,CAACC,MAAM,GAAG,KAAK,GAAG,CAACF,IAAI,IAAIA,IAAI,IAAIC,WAAI,CAACE,KAAK,GAAG,MAAM,GAAG,MAAM;AACpF,CAAC;AAEM,IAAMC,OAAO,GAAGC,yBAAM,CAACC,GAAG,4tBAU7B,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACE,KAAK,IAAII,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACO,MAAM,GAAG,IAAAC,6BAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,GAAG,EAAE;AAAA,CAAC,EACrI,UAACN,KAAK;EAAA,OAAMA,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACC,MAAM,GAAG,IAAAY,8BAAkB,EAACJ,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,GAAG,EAAE;AAAA,CAAC,EACxG,UAACN,KAAK;EAAA,OAAMA,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACO,MAAM,GAAG,IAAAO,6BAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,GAAG,EAAE;AAAA,CAAC,EACzG,UAACN,KAAK;EAAA,OAAMA,KAAK,CAACS,KAAK,IAAI,QAAQ,GAAG,qBAAqB,GAAG,EAAE;AAAA,CAAC,EACrDC,kBAAU,CAACC,YAAY,EAG5B,UAACX,KAAK;EAAA,OAAMA,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACC,MAAM,GAAG,SAAS,GAAGK,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACO,MAAM,GAAG,UAAU,GAAG,UAAU;AAAA,CAAC,EAEjH,UAACD,KAAK;EAAA,OAAMA,KAAK,CAACY,KAAK,oBAAaZ,KAAK,CAACY,KAAK,SAAM,qBAAqB;AAAA,CAAC,EACnE,UAACZ,KAAK;EAAA,OAAKA,KAAK,CAACa,MAAM;AAAA,GACpB,UAACb,KAAK;EAAA;EAAA,0BAAKA,KAAK,CAACc,QAAQ,6DAAI,MAAM;AAAA,GAClCT,cAAM,CAACU,WAAW,EAGrBC,mBAAS,CAACC,OAAO,EAC1B,UAACjB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,KAAK,GAAG,eAAe,GAAGlB,KAAK,CAACkB,QAAQ,IAAI,QAAQ,GAAG,YAAY,GAAG,EAAE;AAAA,CAAC,EAEvG,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,MAAM,GAAG,4DAA4D,GAAG,EAAE;AAAA,CAAC,EACvG,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,OAAO,GAAG,qDAAqD,GAAG,EAAE;AAAA,CAAC,EAEnG,UAAClB,KAAK;EAAA,OACRA,KAAK,CAACkB,QAAQ,IAAI,MAAM,IAAIlB,KAAK,CAACkB,QAAQ,IAAI,OAAO,GACjD,EAAE,GACFlB,KAAK,CAACS,KAAK,IAAI,OAAO,GACtB,WAAW,GACXT,KAAK,CAACS,KAAK,IAAI,KAAK,GACpB,YAAY,GACZ,yCAAyC;AAAA,GAI3C,UAACT,KAAK;EAAA,OAAM,CAACA,KAAK,CAACmB,SAAS,GAAG,gBAAgB,GAAG,EAAE;AAAA,CAAC,EAGrD,UAACnB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,KAAK,GAAG,YAAY,GAAGlB,KAAK,CAACkB,QAAQ,IAAI,QAAQ,GAAG,eAAe,GAAG,EAAE;AAAA,CAAC,EAEvG,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,OAAO,GAAG,uDAAuD,GAAG,EAAE;AAAA,CAAC,EACrG,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,MAAM,GAAG,sDAAsD,GAAG,EAAE;AAAA,CAAC,EAEnG,UAAClB,KAAK;EAAA,OACNA,KAAK,CAACkB,QAAQ,IAAI,MAAM,IAAIlB,KAAK,CAACkB,QAAQ,IAAI,OAAO,GACjD,EAAE,GACFlB,KAAK,CAACS,KAAK,IAAI,OAAO,mBACbjB,cAAc,CAACQ,KAAK,CAACP,IAAI,CAAC,SACnCO,KAAK,CAACS,KAAK,IAAI,KAAK,oBACVjB,cAAc,CAACQ,KAAK,CAACP,IAAI,CAAC,SACpC,YAAY;AAAA,GAEhB,UAACO,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,MAAM,GAAG,EAAE,GAAG,oBAAoB;AAAA,CAAC,EAInD,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,KAAK,GAAGb,cAAM,CAACU,WAAW,GAAG,aAAa;AAAA,CAAC,EAAI,UAACf,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,OAAO,GAAGb,cAAM,CAACU,WAAW,GAAG,aAAa;AAAA,CAAC,EACpK,UAACf,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,QAAQ,GAAGb,cAAM,CAACU,WAAW,GAAG,aAAa;AAAA,CAAC,EAAI,UAACf,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,MAAM,GAAGb,cAAM,CAACU,WAAW,GAAG,aAAa;AAAA,CAAC,CAOjK;AAAC;AAEFlB,OAAO,CAACuB,YAAY,GAAG;EACrBD,SAAS,EAAE,KAAK;EAChB1B,IAAI,EAAEC,WAAI,CAACE,KAAK;EAChBiB,MAAM,EAAE,MAAM;EACdJ,KAAK,EAAE,QAAQ;EACfS,QAAQ,EAAE;AACZ,CAAC;AAEM,IAAMG,cAAc,GAAG,SAAjBA,cAAc,CAAIC,WAA8B,EAAEC,KAAc;EAAA,WAAKC,qBAAG,iGACjFF,WAAW,IAAI,OAAO,qBACTzB,OAAO,8BAAoBA,OAAO,uBAAaA,OAAO,mFAG/C0B,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,MAAM,4BAE5B1B,OAAO,kEAEQ0B,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAI,sCAG1B1B,OAAO,0DAIPA,OAAO,iCAEd;AAAA,CACL;AAAC;AAEK,IAAM4B,gBAAgB,GAAG3B,yBAAM,CAACC,GAAG,iLAItC,UAACC,KAAK;EAAA,OAAKqB,cAAc,CAACrB,KAAK,CAACsB,WAAW,EAAEtB,KAAK,CAACuB,KAAK,CAAC;AAAA,GAGvDG,mBAAW,CAEhB;AAAC"}
+{"version":3,"file":"TooltipStyles.cjs","names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentSStyling","ComponentTextStyle","Regular","COLORS","white","ComponentXSStyling","ComponentMStyling","align","BOXSHADOWS","BOXSHADOW_L2","width","height","maxWidth","primary_800","Z_INDEXES","tooltip","position","withArrow","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":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAgD;AAAA;AAAA;AAEhD,IAAMA,cAAc,GAAG,SAAjBA,cAAc,CAAIC,IAAsB,EAAK;EACjD,OAAOA,IAAI,IAAIC,WAAI,CAACC,MAAM,GAAG,KAAK,GAAG,CAACF,IAAI,IAAIA,IAAI,IAAIC,WAAI,CAACE,KAAK,GAAG,MAAM,GAAG,MAAM;AACpF,CAAC;AAEM,IAAMC,OAAO,GAAGC,yBAAM,CAACC,GAAG,4tBAU7B,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACE,KAAK,IAAII,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACO,MAAM,GAAG,IAAAC,6BAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,GAAG,EAAE;AAAA,CAAC,EACrI,UAACN,KAAK;EAAA,OAAMA,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACC,MAAM,GAAG,IAAAY,8BAAkB,EAACJ,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,GAAG,EAAE;AAAA,CAAC,EACxG,UAACN,KAAK;EAAA,OAAMA,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACO,MAAM,GAAG,IAAAO,6BAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,GAAG,EAAE;AAAA,CAAC,EACzG,UAACN,KAAK;EAAA,OAAMA,KAAK,CAACS,KAAK,IAAI,QAAQ,GAAG,qBAAqB,GAAG,EAAE;AAAA,CAAC,EACrDC,kBAAU,CAACC,YAAY,EAG5B,UAACX,KAAK;EAAA,OAAMA,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACC,MAAM,GAAG,SAAS,GAAGK,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACO,MAAM,GAAG,UAAU,GAAG,UAAU;AAAA,CAAC,EAEjH,UAACD,KAAK;EAAA,OAAMA,KAAK,CAACY,KAAK,oBAAaZ,KAAK,CAACY,KAAK,SAAM,qBAAqB;AAAA,CAAC,EACnE,UAACZ,KAAK;EAAA,OAAKA,KAAK,CAACa,MAAM;AAAA,GACpB,UAACb,KAAK;EAAA;EAAA,0BAAKA,KAAK,CAACc,QAAQ,6DAAI,MAAM;AAAA,GAClCT,cAAM,CAACU,WAAW,EAGrBC,mBAAS,CAACC,OAAO,EAC1B,UAACjB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,KAAK,GAAG,eAAe,GAAGlB,KAAK,CAACkB,QAAQ,IAAI,QAAQ,GAAG,YAAY,GAAG,EAAE;AAAA,CAAC,EAEvG,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,MAAM,GAAG,4DAA4D,GAAG,EAAE;AAAA,CAAC,EACvG,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,OAAO,GAAG,qDAAqD,GAAG,EAAE;AAAA,CAAC,EAEnG,UAAClB,KAAK;EAAA,OACRA,KAAK,CAACkB,QAAQ,IAAI,MAAM,IAAIlB,KAAK,CAACkB,QAAQ,IAAI,OAAO,GACjD,EAAE,GACFlB,KAAK,CAACS,KAAK,IAAI,OAAO,GACtB,WAAW,GACXT,KAAK,CAACS,KAAK,IAAI,KAAK,GACpB,YAAY,GACZ,yCAAyC;AAAA,GAI3C,UAACT,KAAK;EAAA,OAAM,CAACA,KAAK,CAACmB,SAAS,GAAG,gBAAgB,GAAG,EAAE;AAAA,CAAC,EAGrD,UAACnB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,KAAK,GAAG,YAAY,GAAGlB,KAAK,CAACkB,QAAQ,IAAI,QAAQ,GAAG,eAAe,GAAG,EAAE;AAAA,CAAC,EAEvG,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,OAAO,GAAG,uDAAuD,GAAG,EAAE;AAAA,CAAC,EACrG,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,MAAM,GAAG,sDAAsD,GAAG,EAAE;AAAA,CAAC,EAEnG,UAAClB,KAAK;EAAA,OACNA,KAAK,CAACkB,QAAQ,IAAI,MAAM,IAAIlB,KAAK,CAACkB,QAAQ,IAAI,OAAO,GACjD,EAAE,GACFlB,KAAK,CAACS,KAAK,IAAI,OAAO,mBACbjB,cAAc,CAACQ,KAAK,CAACP,IAAI,CAAC,SACnCO,KAAK,CAACS,KAAK,IAAI,KAAK,oBACVjB,cAAc,CAACQ,KAAK,CAACP,IAAI,CAAC,SACpC,YAAY;AAAA,GAEhB,UAACO,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,MAAM,GAAG,EAAE,GAAG,oBAAoB;AAAA,CAAC,EAInD,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,KAAK,GAAGb,cAAM,CAACU,WAAW,GAAG,aAAa;AAAA,CAAC,EAAI,UAACf,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,OAAO,GAAGb,cAAM,CAACU,WAAW,GAAG,aAAa;AAAA,CAAC,EACpK,UAACf,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,QAAQ,GAAGb,cAAM,CAACU,WAAW,GAAG,aAAa;AAAA,CAAC,EAAI,UAACf,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,MAAM,GAAGb,cAAM,CAACU,WAAW,GAAG,aAAa;AAAA,CAAC,CAOjK;AAAC;AAEFlB,OAAO,CAACuB,YAAY,GAAG;EACrBD,SAAS,EAAE,KAAK;EAChB1B,IAAI,EAAEC,WAAI,CAACE,KAAK;EAChBiB,MAAM,EAAE,MAAM;EACdJ,KAAK,EAAE,QAAQ;EACfS,QAAQ,EAAE;AACZ,CAAC;AAEM,IAAMG,cAAc,GAAG,SAAjBA,cAAc,CAAIC,WAA8B,EAAEC,KAAc;EAAA,WAAKC,qBAAG,iGACjFF,WAAW,IAAI,OAAO,qBACTzB,OAAO,8BAAoBA,OAAO,uBAAaA,OAAO,mFAG/C0B,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,MAAM,4BAE5B1B,OAAO,kEAEQ0B,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAI,sCAG1B1B,OAAO,0DAIPA,OAAO,iCAEd;AAAA,CACL;AAAC;AAEK,IAAM4B,gBAAgB,GAAG3B,yBAAM,CAACC,GAAG,iLAItC,UAACC,KAAK;EAAA,OAAKqB,cAAc,CAACrB,KAAK,CAACsB,WAAW,EAAEtB,KAAK,CAACuB,KAAK,CAAC;AAAA,GAGvDG,mBAAW,CAEhB;AAAC"}

package/dist/Tooltips/TooltipStyles.d.ts

@@ -1,15 +1,15 @@
-import { Size } from '../types';
-export declare const Tooltip: import("styled-components").StyledComponent<"div", any, {
-    withArrow?: boolean | undefined;
-    size?: Size | undefined;
-    height?: string | undefined;
-    maxWidth?: string | undefined;
-    align?: 'start' | 'end' | 'center' | undefined;
-    position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
-    width?: string | undefined;
-}, never>;
-export declare const TooltipTrigger: (triggerType: 'hover' | 'click', delay?: string) => import("styled-components").FlattenSimpleInterpolation;
-export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {
-    triggerType: 'hover' | 'click';
-    delay?: string | undefined;
-}, never>;
+import { Size } from '../types';
+export declare const Tooltip: import("styled-components").StyledComponent<"div", any, {
+    withArrow?: boolean | undefined;
+    size?: Size | undefined;
+    height?: string | undefined;
+    maxWidth?: string | undefined;
+    align?: 'start' | 'end' | 'center' | undefined;
+    position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    width?: string | undefined;
+}, never>;
+export declare const TooltipTrigger: (triggerType: 'hover' | 'click', delay?: string) => import("styled-components").FlattenSimpleInterpolation;
+export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {
+    triggerType: 'hover' | 'click';
+    delay?: string | undefined;
+}, never>;

package/dist/Tooltips/TooltipStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipStyles.js","names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","width","height","maxWidth","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","triggerType","delay","TooltipContainer"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\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  maxWidth?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n  width?: string;\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  box-sizing: border-box;\n\n  padding: ${(props) => (props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px')};\n  border-radius: 2px;\n  ${(props) => (props.width ? `width: ${props.width};` : 'width: max-content;')}\n  height: ${(props) => props.height};\n  max-width: ${(props) => props.maxWidth ?? '34em'};\n  background: ${COLORS.primary_800};\n  position: absolute;\n  opacity: 0;\n  z-index: ${Z_INDEXES.tooltip};\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        ? ''\n        : props.align == 'start'\n        ? `left: ${distanceToEdge(props.size)};`\n        : props.align == 'end'\n        ? `right: ${distanceToEdge(props.size)};`\n        : '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')} ${(props) => (props.position == 'right' ? COLORS.primary_800 : 'transparent')}\n      ${(props) => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} ${(props) => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n\n  & > span {\n    word-wrap: break-word;\n    color: white;\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 = (triggerType: 'hover' | 'click', delay?: string) => css`\n  ${triggerType == 'hover'\n    ? `&:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n      opacity: 1;\n      transition: 0.5s;\n    transition-delay: ${delay ?? '0.7s'};\n    }`\n    : `& ${Tooltip} {\n      transition: 0.5s;\n      transition-delay: ${delay ?? '0s'};\n    }\n  \n    &.show ${Tooltip} {\n      opacity: 1;\n    }\n  \n    &.hide ${Tooltip} {\n      opacity: 0;\n    }`}\n`;\n\nexport const TooltipContainer = styled.div<{ triggerType: 'hover' | 'click', delay?: string }>`\n  display: inline-block;\n  position: relative;\n\n  ${(props) => TooltipTrigger(props.triggerType, props.delay)}\n\n  &:focus {\n    ${focusStyles}\n  }\n`;\n"],"mappings":"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"}
+{"version":3,"file":"TooltipStyles.js","names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","width","height","maxWidth","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","triggerType","delay","TooltipContainer"],"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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"}

package/dist/Tooltips/TooltipTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipTypes.cjs","names":[],"sources":["../../src/Tooltips/TooltipTypes.tsx"],"sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {\n\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    delay?: string;\n    tabIndex?: number;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n    trigger?: 'hover' | 'click';\n    hideAfter?: number;\n  }\n"],"mappings":""}
+{"version":3,"file":"TooltipTypes.cjs","names":[],"sources":["../../src/Tooltips/TooltipTypes.tsx"],"sourcesContent":["import { Size } from \"../types\";\r\n\r\n/**\r\n * Types for the table.\r\n */\r\n export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {\r\n\r\n    label?: string;\r\n    withArrow?: boolean;\r\n    width?: string;\r\n    size?: Size;\r\n    delay?: string;\r\n    tabIndex?: number;\r\n    height?: string;\r\n    align? : 'start' | 'end' | 'center' | undefined;\r\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\r\n    children?: React.ReactNode;\r\n    trigger?: 'hover' | 'click';\r\n    hideAfter?: number;\r\n  }\r\n"],"mappings":""}

package/dist/Tooltips/TooltipTypes.d.ts

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-import { Size } from "../types";
-/**
- * Types for the table.
- */
-export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
-    label?: string;
-    withArrow?: boolean;
-    width?: string;
-    size?: Size;
-    delay?: string;
-    tabIndex?: number;
-    height?: string;
-    align?: 'start' | 'end' | 'center' | undefined;
-    position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
-    children?: React.ReactNode;
-    trigger?: 'hover' | 'click';
-    hideAfter?: number;
-}
+/// <reference types="react" />
+import { Size } from "../types";
+/**
+ * Types for the table.
+ */
+export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    withArrow?: boolean;
+    width?: string;
+    size?: Size;
+    delay?: string;
+    tabIndex?: number;
+    height?: string;
+    align?: 'start' | 'end' | 'center' | undefined;
+    position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    children?: React.ReactNode;
+    trigger?: 'hover' | 'click';
+    hideAfter?: number;
+}

package/dist/Tooltips/TooltipTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipTypes.js","names":[],"sources":["../../src/Tooltips/TooltipTypes.tsx"],"sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {\n\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    delay?: string;\n    tabIndex?: number;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n    trigger?: 'hover' | 'click';\n    hideAfter?: number;\n  }\n"],"mappings":""}
+{"version":3,"file":"TooltipTypes.js","names":[],"sources":["../../src/Tooltips/TooltipTypes.tsx"],"sourcesContent":["import { Size } from \"../types\";\r\n\r\n/**\r\n * Types for the table.\r\n */\r\n export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {\r\n\r\n    label?: string;\r\n    withArrow?: boolean;\r\n    width?: string;\r\n    size?: Size;\r\n    delay?: string;\r\n    tabIndex?: number;\r\n    height?: string;\r\n    align? : 'start' | 'end' | 'center' | undefined;\r\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\r\n    children?: React.ReactNode;\r\n    trigger?: 'hover' | 'click';\r\n    hideAfter?: number;\r\n  }\r\n"],"mappings":""}

package/dist/Tooltips/TooltipWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipWrapper.cjs","names":["TooltipWrapper","label","children","withArrow","tabIndex","size","Size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","React","useState","showTooltip","setShowTooltip","timeoutRef","useRef","ref","useClickOutsideRef","handleClick","e","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","useEffect","document","addEventListener","removeEventListener","cls"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {TooltipProps} from './TooltipTypes';\n\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\nimport {useClickOutsideRef} from '../common';\nimport {useEffect, useRef} from \"react\";\nimport {Size} from \"../types\";\n\nconst TooltipWrapper = ({\n                          label, children,\n                          withArrow,\n                          tabIndex,\n                          size = Size.Small,\n                          height = 'auto',\n                          delay = undefined,\n                          align = 'center',\n                          position = 'bottom',\n                          trigger = 'hover',\n                          hideAfter = 5000,\n                          ...props\n                        }: TooltipProps) => {\n\n  const [showTooltip, setShowTooltip] = React.useState(false);\n  const timeoutRef = useRef<any>();\n\n  const ref = useClickOutsideRef(() => setShowTooltip(false));\n\n  const handleClick = (e?: MouseEvent) => {\n    if (ref?.current?.contains(e?.target as Node)) {\n      setShowTooltip(true)\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n    }\n  }\n  const handleButtonDown = (e?: KeyboardEvent) => {\n    if (e?.key === 'Enter' || e?.key === ' ') {\n      setShowTooltip(true);\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n    }\n  }\n\n  useEffect(() => {\n    if (trigger == 'click') {\n      document.addEventListener('mousedown', handleClick);\n      ref?.current?.addEventListener('keydown', handleButtonDown);\n\n      return () => {\n        document.removeEventListener('mousedown', handleClick);\n        ref?.current?.removeEventListener('keydown', handleButtonDown);\n      };\n    }\n  }, [trigger])\n\n  const cls = `${trigger === 'click' ? showTooltip ? 'show' : 'hide' : ''}`;\n  return <TooltipContainer ref={ref}\n                           delay={delay}\n                           tabIndex={tabIndex}\n                           triggerType={trigger}\n                           className={cls}>\n    <Tooltip align={align}\n             height={height}\n             role=\"tooltip\"\n             size={size}\n             withArrow={withArrow}\n             position={position}\n             {...props}>\n      {label}\n    </Tooltip>\n    {children}\n  </TooltipContainer>;\n};\n\nexport default TooltipWrapper;\n"],"mappings":"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"}
+{"version":3,"file":"TooltipWrapper.cjs","names":["TooltipWrapper","label","children","withArrow","tabIndex","size","Size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","React","useState","showTooltip","setShowTooltip","timeoutRef","useRef","ref","useClickOutsideRef","handleClick","e","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","useEffect","document","addEventListener","removeEventListener","cls"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport {TooltipProps} from './TooltipTypes';\r\n\r\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\r\nimport {useClickOutsideRef} from '../common';\r\nimport {useEffect, useRef} from \"react\";\r\nimport {Size} from \"../types\";\r\n\r\nconst TooltipWrapper = ({\r\n                          label, children,\r\n                          withArrow,\r\n                          tabIndex,\r\n                          size = Size.Small,\r\n                          height = 'auto',\r\n                          delay = undefined,\r\n                          align = 'center',\r\n                          position = 'bottom',\r\n                          trigger = 'hover',\r\n                          hideAfter = 5000,\r\n                          ...props\r\n                        }: TooltipProps) => {\r\n\r\n  const [showTooltip, setShowTooltip] = React.useState(false);\r\n  const timeoutRef = useRef<any>();\r\n\r\n  const ref = useClickOutsideRef(() => setShowTooltip(false));\r\n\r\n  const handleClick = (e?: MouseEvent) => {\r\n    if (ref?.current?.contains(e?.target as Node)) {\r\n      setShowTooltip(true)\r\n      timeoutRef.current && clearTimeout(timeoutRef.current);\r\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\r\n    }\r\n  }\r\n  const handleButtonDown = (e?: KeyboardEvent) => {\r\n    if (e?.key === 'Enter' || e?.key === ' ') {\r\n      setShowTooltip(true);\r\n      timeoutRef.current && clearTimeout(timeoutRef.current);\r\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\r\n    }\r\n  }\r\n\r\n  useEffect(() => {\r\n    if (trigger == 'click') {\r\n      document.addEventListener('mousedown', handleClick);\r\n      ref?.current?.addEventListener('keydown', handleButtonDown);\r\n\r\n      return () => {\r\n        document.removeEventListener('mousedown', handleClick);\r\n        ref?.current?.removeEventListener('keydown', handleButtonDown);\r\n      };\r\n    }\r\n  }, [trigger])\r\n\r\n  const cls = `${trigger === 'click' ? showTooltip ? 'show' : 'hide' : ''}`;\r\n  return <TooltipContainer ref={ref}\r\n                           delay={delay}\r\n                           tabIndex={tabIndex}\r\n                           triggerType={trigger}\r\n                           className={cls}>\r\n    <Tooltip align={align}\r\n             height={height}\r\n             role=\"tooltip\"\r\n             size={size}\r\n             withArrow={withArrow}\r\n             position={position}\r\n             {...props}>\r\n      {label}\r\n    </Tooltip>\r\n    {children}\r\n  </TooltipContainer>;\r\n};\r\n\r\nexport default TooltipWrapper;\r\n"],"mappings":"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"}

package/dist/Tooltips/TooltipWrapper.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { TooltipProps } from './TooltipTypes';
-declare const TooltipWrapper: ({ label, children, withArrow, tabIndex, size, height, delay, align, position, trigger, hideAfter, ...props }: TooltipProps) => JSX.Element;
-export default TooltipWrapper;
+/// <reference types="react" />
+import { TooltipProps } from './TooltipTypes';
+declare const TooltipWrapper: ({ label, children, withArrow, tabIndex, size, height, delay, align, position, trigger, hideAfter, ...props }: TooltipProps) => JSX.Element;
+export default TooltipWrapper;

package/dist/Tooltips/TooltipWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipWrapper.js","names":["React","TooltipContainer","Tooltip","useClickOutsideRef","useEffect","useRef","Size","TooltipWrapper","label","children","withArrow","tabIndex","size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","useState","showTooltip","setShowTooltip","timeoutRef","ref","handleClick","e","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","document","addEventListener","removeEventListener","cls"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {TooltipProps} from './TooltipTypes';\n\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\nimport {useClickOutsideRef} from '../common';\nimport {useEffect, useRef} from \"react\";\nimport {Size} from \"../types\";\n\nconst TooltipWrapper = ({\n                          label, children,\n                          withArrow,\n                          tabIndex,\n                          size = Size.Small,\n                          height = 'auto',\n                          delay = undefined,\n                          align = 'center',\n                          position = 'bottom',\n                          trigger = 'hover',\n                          hideAfter = 5000,\n                          ...props\n                        }: TooltipProps) => {\n\n  const [showTooltip, setShowTooltip] = React.useState(false);\n  const timeoutRef = useRef<any>();\n\n  const ref = useClickOutsideRef(() => setShowTooltip(false));\n\n  const handleClick = (e?: MouseEvent) => {\n    if (ref?.current?.contains(e?.target as Node)) {\n      setShowTooltip(true)\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n    }\n  }\n  const handleButtonDown = (e?: KeyboardEvent) => {\n    if (e?.key === 'Enter' || e?.key === ' ') {\n      setShowTooltip(true);\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n    }\n  }\n\n  useEffect(() => {\n    if (trigger == 'click') {\n      document.addEventListener('mousedown', handleClick);\n      ref?.current?.addEventListener('keydown', handleButtonDown);\n\n      return () => {\n        document.removeEventListener('mousedown', handleClick);\n        ref?.current?.removeEventListener('keydown', handleButtonDown);\n      };\n    }\n  }, [trigger])\n\n  const cls = `${trigger === 'click' ? showTooltip ? 'show' : 'hide' : ''}`;\n  return <TooltipContainer ref={ref}\n                           delay={delay}\n                           tabIndex={tabIndex}\n                           triggerType={trigger}\n                           className={cls}>\n    <Tooltip align={align}\n             height={height}\n             role=\"tooltip\"\n             size={size}\n             withArrow={withArrow}\n             position={position}\n             {...props}>\n      {label}\n    </Tooltip>\n    {children}\n  </TooltipContainer>;\n};\n\nexport default TooltipWrapper;\n"],"mappings":"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"}
+{"version":3,"file":"TooltipWrapper.js","names":["React","TooltipContainer","Tooltip","useClickOutsideRef","useEffect","useRef","Size","TooltipWrapper","label","children","withArrow","tabIndex","size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","useState","showTooltip","setShowTooltip","timeoutRef","ref","handleClick","e","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","document","addEventListener","removeEventListener","cls"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport {TooltipProps} from './TooltipTypes';\r\n\r\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\r\nimport {useClickOutsideRef} from '../common';\r\nimport {useEffect, useRef} from \"react\";\r\nimport {Size} from \"../types\";\r\n\r\nconst TooltipWrapper = ({\r\n                          label, children,\r\n                          withArrow,\r\n                          tabIndex,\r\n                          size = Size.Small,\r\n                          height = 'auto',\r\n                          delay = undefined,\r\n                          align = 'center',\r\n                          position = 'bottom',\r\n                          trigger = 'hover',\r\n                          hideAfter = 5000,\r\n                          ...props\r\n                        }: TooltipProps) => {\r\n\r\n  const [showTooltip, setShowTooltip] = React.useState(false);\r\n  const timeoutRef = useRef<any>();\r\n\r\n  const ref = useClickOutsideRef(() => setShowTooltip(false));\r\n\r\n  const handleClick = (e?: MouseEvent) => {\r\n    if (ref?.current?.contains(e?.target as Node)) {\r\n      setShowTooltip(true)\r\n      timeoutRef.current && clearTimeout(timeoutRef.current);\r\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\r\n    }\r\n  }\r\n  const handleButtonDown = (e?: KeyboardEvent) => {\r\n    if (e?.key === 'Enter' || e?.key === ' ') {\r\n      setShowTooltip(true);\r\n      timeoutRef.current && clearTimeout(timeoutRef.current);\r\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\r\n    }\r\n  }\r\n\r\n  useEffect(() => {\r\n    if (trigger == 'click') {\r\n      document.addEventListener('mousedown', handleClick);\r\n      ref?.current?.addEventListener('keydown', handleButtonDown);\r\n\r\n      return () => {\r\n        document.removeEventListener('mousedown', handleClick);\r\n        ref?.current?.removeEventListener('keydown', handleButtonDown);\r\n      };\r\n    }\r\n  }, [trigger])\r\n\r\n  const cls = `${trigger === 'click' ? showTooltip ? 'show' : 'hide' : ''}`;\r\n  return <TooltipContainer ref={ref}\r\n                           delay={delay}\r\n                           tabIndex={tabIndex}\r\n                           triggerType={trigger}\r\n                           className={cls}>\r\n    <Tooltip align={align}\r\n             height={height}\r\n             role=\"tooltip\"\r\n             size={size}\r\n             withArrow={withArrow}\r\n             position={position}\r\n             {...props}>\r\n      {label}\r\n    </Tooltip>\r\n    {children}\r\n  </TooltipContainer>;\r\n};\r\n\r\nexport default TooltipWrapper;\r\n"],"mappings":"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"}

package/dist/Tooltips/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Tooltips/index.ts"],"sourcesContent":["import TooltipWrapper from './TooltipWrapper';\nimport {TooltipTrigger, TooltipContainer, Tooltip} from './TooltipStyles';\n\nexport { TooltipWrapper, TooltipTrigger, TooltipContainer, Tooltip };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Tooltips/index.ts"],"sourcesContent":["import TooltipWrapper from './TooltipWrapper';\r\nimport {TooltipTrigger, TooltipContainer, Tooltip} from './TooltipStyles';\r\n\r\nexport { TooltipWrapper, TooltipTrigger, TooltipContainer, Tooltip };\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA"}

package/dist/Tooltips/index.d.ts

@@ -1,3 +1,3 @@
-import TooltipWrapper from './TooltipWrapper';
-import { TooltipTrigger, TooltipContainer, Tooltip } from './TooltipStyles';
-export { TooltipWrapper, TooltipTrigger, TooltipContainer, Tooltip };
+import TooltipWrapper from './TooltipWrapper';
+import { TooltipTrigger, TooltipContainer, Tooltip } from './TooltipStyles';
+export { TooltipWrapper, TooltipTrigger, TooltipContainer, Tooltip };

package/dist/Tooltips/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TooltipWrapper","TooltipTrigger","TooltipContainer","Tooltip"],"sources":["../../src/Tooltips/index.ts"],"sourcesContent":["import TooltipWrapper from './TooltipWrapper';\nimport {TooltipTrigger, TooltipContainer, Tooltip} from './TooltipStyles';\n\nexport { TooltipWrapper, TooltipTrigger, TooltipContainer, Tooltip };\n"],"mappings":"AAAA,OAAOA,cAAc,MAAM,kBAAkB;AAC7C,SAAQC,cAAc,EAAEC,gBAAgB,EAAEC,OAAO,QAAO,iBAAiB;AAEzE,SAASH,cAAc,EAAEC,cAAc,EAAEC,gBAAgB,EAAEC,OAAO"}
+{"version":3,"file":"index.js","names":["TooltipWrapper","TooltipTrigger","TooltipContainer","Tooltip"],"sources":["../../src/Tooltips/index.ts"],"sourcesContent":["import TooltipWrapper from './TooltipWrapper';\r\nimport {TooltipTrigger, TooltipContainer, Tooltip} from './TooltipStyles';\r\n\r\nexport { TooltipWrapper, TooltipTrigger, TooltipContainer, Tooltip };\r\n"],"mappings":"AAAA,OAAOA,cAAc,MAAM,kBAAkB;AAC7C,SAAQC,cAAc,EAAEC,gBAAgB,EAAEC,OAAO,QAAO,iBAAiB;AAEzE,SAASH,cAAc,EAAEC,cAAc,EAAEC,gBAAgB,EAAEC,OAAO"}