@veeqo/ui 14.7.1-beta-1 → 14.8.0

package/dist/components/Radio/Radio.js

@@ -1,7 +1,7 @@
 import React__default, { forwardRef, useCallback, useMemo } from 'react';
 import { Choice } from '../Choice/Choice.js';
-import { Input } from './styled.js';
 import { generateId } from '../../utils/generateId.js';
+import styles from './Radio.module.scss.js';
 
 const Radio = forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
     const handleChange = useCallback((e) => {
@@ -10,7 +10,7 @@ const Radio = forwardRef(({ checked, value, name, hint, disabled, onChange, id,
     const componentId = useMemo(() => id !== null && id !== void 0 ? id : generateId('radio'), [id]);
     const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
     return (React__default.createElement(Choice, { htmlFor: componentId, disabled: disabled, hint: hint, ...otherProps },
-        React__default.createElement(Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }),
+        React__default.createElement("input", { className: styles.input, id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }),
         children));
 });
 

package/dist/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      checked,\n      value,\n      name,\n      hint,\n      disabled,\n      onChange,\n      id,\n      children,\n      'aria-label': ariaLabel,\n      ...otherProps\n    }: RadioProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n    const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n    return (\n      <Choice htmlFor={componentId} disabled={disabled} hint={hint} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;AAEhE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,KAAM,UAAU,EAAA;AAC1E,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,gBACI,SAAS,EAAA,kBAAA,EACH,eAAe,EAAA,CACjC;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Radio.module.scss';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      checked,\n      value,\n      name,\n      hint,\n      disabled,\n      onChange,\n      id,\n      children,\n      'aria-label': ariaLabel,\n      ...otherProps\n    }: RadioProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n    const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n    return (\n      <Choice htmlFor={componentId} disabled={disabled} hint={hint} {...otherProps}>\n        <input\n          className={styles.input}\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAmBO,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;AAEhE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,KAAM,UAAU,EAAA;AAC1E,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,gBACI,SAAS,EAAA,kBAAA,EACH,eAAe,EAAA,CACjC;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}

package/dist/components/Radio/Radio.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._input_1ycnq_1 {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-light);\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n  transition: box-shadow 0.1s;\n}\n._input_1ycnq_1:checked {\n  position: relative;\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:checked::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  background-color: var(--colors-secondary-blue-base);\n  border-radius: 50%;\n}\n._input_1ycnq_1:hover {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:active {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._input_1ycnq_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-ink-lightest);\n  cursor: default;\n}\n._input_1ycnq_1:disabled::before {\n  background-color: var(--colors-neutral-ink-light);\n}");
+var styles = {"input":"_input_1ycnq_1"};
+
+module.exports = styles;
+//# sourceMappingURL=Radio.module.scss.cjs.map

package/dist/components/Radio/Radio.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.module.scss.cjs","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-light);\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n\n  transition: box-shadow 0.1s;\n\n  &:checked {\n    position: relative;\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:checked::before {\n    content: '';\n    width: 10px;\n    height: 10px;\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    background-color: var(--colors-secondary-blue-base);\n    border-radius: 50%;\n  }\n\n  &:hover {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:active {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--colors-neutral-ink-lightest);\n    cursor: default;\n  }\n\n  &:disabled::before {\n    background-color: var(--colors-neutral-ink-light);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,uqCAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

package/dist/components/Radio/Radio.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._input_1ycnq_1 {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-light);\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n  transition: box-shadow 0.1s;\n}\n._input_1ycnq_1:checked {\n  position: relative;\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:checked::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  background-color: var(--colors-secondary-blue-base);\n  border-radius: 50%;\n}\n._input_1ycnq_1:hover {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:active {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._input_1ycnq_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-ink-lightest);\n  cursor: default;\n}\n._input_1ycnq_1:disabled::before {\n  background-color: var(--colors-neutral-ink-light);\n}");
+var styles = {"input":"_input_1ycnq_1"};
+
+export { styles as default };
+//# sourceMappingURL=Radio.module.scss.js.map

package/dist/components/Radio/Radio.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.module.scss.js","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-light);\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n\n  transition: box-shadow 0.1s;\n\n  &:checked {\n    position: relative;\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:checked::before {\n    content: '';\n    width: 10px;\n    height: 10px;\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    background-color: var(--colors-secondary-blue-base);\n    border-radius: 50%;\n  }\n\n  &:hover {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:active {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--colors-neutral-ink-lightest);\n    cursor: default;\n  }\n\n  &:disabled::before {\n    background-color: var(--colors-neutral-ink-light);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,uqCAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

package/dist/components/ToggleButton/ToggleButton.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
 var React = require('react');
-var styled = require('./styled.cjs');
+var Action = require('../Action/Action.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ToggleButton = ({ children, checked, size = 'base', disabled = false, onChange, }) => (React__default.default.createElement(styled.StyledButton, { type: "button", checked: checked, size: size, disabled: disabled, "aria-pressed": checked, tabIndex: "0", onClick: () => onChange(!checked) }, children));
+const ToggleButton = ({ children, checked, size = 'base', disabled = false, onChange, }) => (React__default.default.createElement(Action.Action, { variant: checked ? 'primary' : 'default', size: size, disabled: disabled, "aria-pressed": checked, onClick: () => onChange(!checked) }, children));
 
 exports.ToggleButton = ToggleButton;
 //# sourceMappingURL=ToggleButton.cjs.map

package/dist/components/ToggleButton/ToggleButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.cjs","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { StyledButton } from './styled';\n\nexport interface ToggleButtonProps {\n  children: ReactNode;\n  checked: boolean;\n  size?: 'sm' | 'base';\n  disabled?: boolean;\n  onChange: (checked: boolean) => void;\n}\n\nexport const ToggleButton = ({\n  children,\n  checked,\n  size = 'base',\n  disabled = false,\n  onChange,\n}: ToggleButtonProps) => (\n  <StyledButton\n    type=\"button\"\n    checked={checked}\n    size={size}\n    disabled={disabled}\n    aria-pressed={checked}\n    tabIndex=\"0\"\n    onClick={() => onChange(!checked)}\n  >\n    {children}\n  </StyledButton>\n);\n"],"names":["React","StyledButton"],"mappings":";;;;;;;;;AAYO,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,GACU,MAClBA,sBAAA,CAAA,aAAA,CAACC,mBAAY,EAAA,EACX,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,OAAO,EACrB,QAAQ,EAAC,GAAG,EACZ,OAAO,EAAE,MAAM,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAA,EAEhC,QAAQ,CACI;;;;"}
+{"version":3,"file":"ToggleButton.cjs","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Action } from '../Action';\n\nimport { ToggleButtonProps } from './types';\n\nexport const ToggleButton = ({\n  children,\n  checked,\n  size = 'base',\n  disabled = false,\n  onChange,\n}: ToggleButtonProps) => (\n  <Action\n    variant={checked ? 'primary' : 'default'}\n    size={size}\n    disabled={disabled}\n    aria-pressed={checked}\n    onClick={() => onChange(!checked)}\n  >\n    {children}\n  </Action>\n);\n"],"names":["React","Action"],"mappings":";;;;;;;;;AAMO,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,GACU,MAClBA,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EACL,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,EACxC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,OAAO,EACrB,OAAO,EAAE,MAAM,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAA,EAEhC,QAAQ,CACF;;;;"}

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -1,9 +1,3 @@
-import React, { ReactNode } from 'react';
-export interface ToggleButtonProps {
-    children: ReactNode;
-    checked: boolean;
-    size?: 'sm' | 'base';
-    disabled?: boolean;
-    onChange: (checked: boolean) => void;
-}
+import React from 'react';
+import { ToggleButtonProps } from './types';
 export declare const ToggleButton: ({ children, checked, size, disabled, onChange, }: ToggleButtonProps) => React.JSX.Element;

package/dist/components/ToggleButton/ToggleButton.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
-import { StyledButton } from './styled.js';
+import { Action } from '../Action/Action.js';
 
-const ToggleButton = ({ children, checked, size = 'base', disabled = false, onChange, }) => (React__default.createElement(StyledButton, { type: "button", checked: checked, size: size, disabled: disabled, "aria-pressed": checked, tabIndex: "0", onClick: () => onChange(!checked) }, children));
+const ToggleButton = ({ children, checked, size = 'base', disabled = false, onChange, }) => (React__default.createElement(Action, { variant: checked ? 'primary' : 'default', size: size, disabled: disabled, "aria-pressed": checked, onClick: () => onChange(!checked) }, children));
 
 export { ToggleButton };
 //# sourceMappingURL=ToggleButton.js.map

package/dist/components/ToggleButton/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { StyledButton } from './styled';\n\nexport interface ToggleButtonProps {\n  children: ReactNode;\n  checked: boolean;\n  size?: 'sm' | 'base';\n  disabled?: boolean;\n  onChange: (checked: boolean) => void;\n}\n\nexport const ToggleButton = ({\n  children,\n  checked,\n  size = 'base',\n  disabled = false,\n  onChange,\n}: ToggleButtonProps) => (\n  <StyledButton\n    type=\"button\"\n    checked={checked}\n    size={size}\n    disabled={disabled}\n    aria-pressed={checked}\n    tabIndex=\"0\"\n    onClick={() => onChange(!checked)}\n  >\n    {children}\n  </StyledButton>\n);\n"],"names":["React"],"mappings":";;;AAYO,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,GACU,MAClBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACX,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,OAAO,EACrB,QAAQ,EAAC,GAAG,EACZ,OAAO,EAAE,MAAM,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAA,EAEhC,QAAQ,CACI;;;;"}
+{"version":3,"file":"ToggleButton.js","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Action } from '../Action';\n\nimport { ToggleButtonProps } from './types';\n\nexport const ToggleButton = ({\n  children,\n  checked,\n  size = 'base',\n  disabled = false,\n  onChange,\n}: ToggleButtonProps) => (\n  <Action\n    variant={checked ? 'primary' : 'default'}\n    size={size}\n    disabled={disabled}\n    aria-pressed={checked}\n    onClick={() => onChange(!checked)}\n  >\n    {children}\n  </Action>\n);\n"],"names":["React"],"mappings":";;;AAMO,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,GACU,MAClBA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,EACxC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,OAAO,EACrB,OAAO,EAAE,MAAM,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAA,EAEhC,QAAQ,CACF;;;;"}

package/dist/components/ToggleButton/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type ToggleButtonProps = {
+    children: ReactNode;
+    checked: boolean;
+    size?: 'sm' | 'base';
+    disabled?: boolean;
+    onChange: (checked: boolean) => void;
+};

package/dist/components/Tooltip/Tooltip.cjs

@@ -2,11 +2,9 @@
 
 var React = require('react');
 var framerMotion = require('framer-motion');
+var styled = require('./components/styled.cjs');
 var TooltipPopover = require('./components/TooltipPopover.cjs');
 var Portal = require('../Portal/Portal.cjs');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-require('uid/secure');
-var Tooltip_module = require('./Tooltip.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -15,28 +13,26 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const WithOptionalPortal = ({ usePortal = false, children,
 // eslint-disable-next-line react/jsx-no-useless-fragment
  }) => (usePortal ? React__default.default.createElement(Portal.Portal, null, children) : React__default.default.createElement(React__default.default.Fragment, null, children));
-const Tooltip = ({ children, text, content, config, reversed = false, className, hoverableClassName, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
+const Tooltip = ({ children, text, content, config, reversed = false, className, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
     const [shouldShow, setShouldShow] = React.useState(initialShouldShow);
     const [hoverableElement, setHoverableElement] = React.useState(null);
+    const classNames = {
+        container: className && `${className} ${className}-container`,
+        tip: className && `${className}-tip`,
+        wrap: className && `${className}-wrap`,
+        triangle: className && `${className}-triangle`,
+        hoverable: className && `${className}-hoverable`,
+    };
     const hasText = text ? text.trim().length > 0 : false;
     const hasContent = !!(content || hasText);
-    // Backward-compatible suffix classes for monolith consumers that
-    // target sub-elements via the className prefix convention.
-    const legacyClassNames = className
-        ? {
-            tip: `${className}-tip`,
-            wrap: `${className}-wrap`,
-            triangle: `${className}-triangle`,
-        }
-        : undefined;
     if (!hasContent)
         return children;
     const show = () => setShouldShow(true);
     const hide = () => setShouldShow(false);
-    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([Tooltip_module.container, className, className && `${className}-container`]) },
+    return (React__default.default.createElement(styled.Container, { className: classNames.container },
         React__default.default.createElement(framerMotion.AnimatePresence, null, shouldShow && (React__default.default.createElement(WithOptionalPortal, { usePortal: useReactPortal },
-            React__default.default.createElement(TooltipPopover.TooltipPopover, { key: "tooltip-popover", hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content, legacyClassNames: legacyClassNames })))),
-        React__default.default.createElement("div", { ref: setHoverableElement, className: buildClassnames.buildClassnames([Tooltip_module.hoverable, hoverableClassName, className && `${className}-hoverable`]), onMouseEnter: show, onMouseLeave: hide }, children)));
+            React__default.default.createElement(TooltipPopover.TooltipPopover, { key: "tooltip-popover", classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content })))),
+        React__default.default.createElement(styled.Container, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
 };
 
 exports.Tooltip = Tooltip;

package/dist/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport { Portal } from '../Portal';\nimport { buildClassnames } from '../../utils';\nimport tooltipStyles from './Tooltip.module.scss';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  hoverableClassName,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  // Backward-compatible suffix classes for monolith consumers that\n  // target sub-elements via the className prefix convention.\n  const legacyClassNames: LegacyClassNames | undefined = className\n    ? {\n        tip: `${className}-tip`,\n        wrap: `${className}-wrap`,\n        triangle: `${className}-triangle`,\n      }\n    : undefined;\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <div className={buildClassnames([tooltipStyles.container, className, className && `${className}-container`])}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n              legacyClassNames={legacyClassNames}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <div\n        ref={setHoverableElement}\n        className={buildClassnames([tooltipStyles.hoverable, hoverableClassName, className && `${className}-hoverable`])}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","Portal","useState","buildClassnames","tooltipStyles","AnimatePresence","TooltipPopover"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,sBAAA,CAAA,aAAA,CAACC,aAAM,QAAE,QAAQ,CAAU,GAAGD,4EAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGE,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,QACEF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEG,+BAAe,CAAC,CAACC,cAAa,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,UAAA,CAAY,CAAC,CAAC,EAAA;QAC1GJ,sBAAA,CAAA,aAAA,CAACK,4BAAe,EAAA,IAAA,EACb,UAAU,KACTL,qCAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,sBAAA,CAAA,aAAA,CAACM,6BAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAN,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAEG,+BAAe,CAAC,CAACC,cAAa,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,YAAY,CAAC,CAAC,EAChH,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAAA,EAEjB,QAAQ,CACL,CACF;AAEV;;;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { Container } from './components/styled';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { Portal } from '../Portal';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const classNames = {\n    container: className && `${className} ${className}-container`,\n    tip: className && `${className}-tip`,\n    wrap: className && `${className}-wrap`,\n    triangle: className && `${className}-triangle`,\n    hoverable: className && `${className}-hoverable`,\n  };\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <Container className={classNames.container}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              classNames={classNames}\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <Container\n        ref={setHoverableElement}\n        className={classNames.hoverable}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </Container>\n    </Container>\n  );\n};\n"],"names":["React","Portal","useState","Container","AnimatePresence","TooltipPopover"],"mappings":";;;;;;;;;;;;AAOA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,sBAAA,CAAA,aAAA,CAACC,aAAM,QAAE,QAAQ,CAAU,GAAGD,4EAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGE,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAA,UAAA,CAAY;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;KACjD;AAED,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AAEzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;IAEvC,QACEF,qCAACG,gBAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QACxCH,sBAAA,CAAA,aAAA,CAACI,4BAAe,EAAA,IAAA,EACb,UAAU,KACTJ,qCAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,sBAAA,CAAA,aAAA,CAACK,6BAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB,CACiB,CACtB,CACe;QAElBL,sBAAA,CAAA,aAAA,CAACG,gBAAS,EAAA,EACR,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,IAEjB,QAAQ,CACC,CACF;AAEhB;;;;"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,2 +1,2 @@
 import { TooltipProps } from './types';
-export declare const Tooltip: ({ children, text, content, config, reversed, className, hoverableClassName, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => JSX.Element | null;
+export declare const Tooltip: ({ children, text, content, config, reversed, className, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => JSX.Element | null;

package/dist/components/Tooltip/Tooltip.js

@@ -1,36 +1,32 @@
 import React__default, { useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
+import { Container } from './components/styled.js';
 import { TooltipPopover } from './components/TooltipPopover.js';
 import { Portal } from '../Portal/Portal.js';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import 'uid/secure';
-import tooltipStyles from './Tooltip.module.scss.js';
 
 const WithOptionalPortal = ({ usePortal = false, children,
 // eslint-disable-next-line react/jsx-no-useless-fragment
  }) => (usePortal ? React__default.createElement(Portal, null, children) : React__default.createElement(React__default.Fragment, null, children));
-const Tooltip = ({ children, text, content, config, reversed = false, className, hoverableClassName, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
+const Tooltip = ({ children, text, content, config, reversed = false, className, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
     const [shouldShow, setShouldShow] = useState(initialShouldShow);
     const [hoverableElement, setHoverableElement] = useState(null);
+    const classNames = {
+        container: className && `${className} ${className}-container`,
+        tip: className && `${className}-tip`,
+        wrap: className && `${className}-wrap`,
+        triangle: className && `${className}-triangle`,
+        hoverable: className && `${className}-hoverable`,
+    };
     const hasText = text ? text.trim().length > 0 : false;
     const hasContent = !!(content || hasText);
-    // Backward-compatible suffix classes for monolith consumers that
-    // target sub-elements via the className prefix convention.
-    const legacyClassNames = className
-        ? {
-            tip: `${className}-tip`,
-            wrap: `${className}-wrap`,
-            triangle: `${className}-triangle`,
-        }
-        : undefined;
     if (!hasContent)
         return children;
     const show = () => setShouldShow(true);
     const hide = () => setShouldShow(false);
-    return (React__default.createElement("div", { className: buildClassnames([tooltipStyles.container, className, className && `${className}-container`]) },
+    return (React__default.createElement(Container, { className: classNames.container },
         React__default.createElement(AnimatePresence, null, shouldShow && (React__default.createElement(WithOptionalPortal, { usePortal: useReactPortal },
-            React__default.createElement(TooltipPopover, { key: "tooltip-popover", hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content, legacyClassNames: legacyClassNames })))),
-        React__default.createElement("div", { ref: setHoverableElement, className: buildClassnames([tooltipStyles.hoverable, hoverableClassName, className && `${className}-hoverable`]), onMouseEnter: show, onMouseLeave: hide }, children)));
+            React__default.createElement(TooltipPopover, { key: "tooltip-popover", classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content })))),
+        React__default.createElement(Container, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
 };
 
 export { Tooltip };

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport { Portal } from '../Portal';\nimport { buildClassnames } from '../../utils';\nimport tooltipStyles from './Tooltip.module.scss';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  hoverableClassName,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  // Backward-compatible suffix classes for monolith consumers that\n  // target sub-elements via the className prefix convention.\n  const legacyClassNames: LegacyClassNames | undefined = className\n    ? {\n        tip: `${className}-tip`,\n        wrap: `${className}-wrap`,\n        triangle: `${className}-triangle`,\n      }\n    : undefined;\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <div className={buildClassnames([tooltipStyles.container, className, className && `${className}-container`])}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n              legacyClassNames={legacyClassNames}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <div\n        ref={setHoverableElement}\n        className={buildClassnames([tooltipStyles.hoverable, hoverableClassName, className && `${className}-hoverable`])}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,cAAA,CAAA,aAAA,CAAC,MAAM,QAAE,QAAQ,CAAU,GAAGA,4DAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,UAAA,CAAY,CAAC,CAAC,EAAA;QAC1GA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EACb,UAAU,KACTA,6BAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,YAAY,CAAC,CAAC,EAChH,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAAA,EAEjB,QAAQ,CACL,CACF;AAEV;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { Container } from './components/styled';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { Portal } from '../Portal';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const classNames = {\n    container: className && `${className} ${className}-container`,\n    tip: className && `${className}-tip`,\n    wrap: className && `${className}-wrap`,\n    triangle: className && `${className}-triangle`,\n    hoverable: className && `${className}-hoverable`,\n  };\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <Container className={classNames.container}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              classNames={classNames}\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <Container\n        ref={setHoverableElement}\n        className={classNames.hoverable}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </Container>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAOA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,cAAA,CAAA,aAAA,CAAC,MAAM,QAAE,QAAQ,CAAU,GAAGA,4DAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAA,UAAA,CAAY;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;KACjD;AAED,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AAEzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;IAEvC,QACEA,6BAAC,SAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QACxCA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EACb,UAAU,KACTA,6BAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB,CACiB,CACtB,CACe;QAElBA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,IAEjB,QAAQ,CACC,CACF;AAEhB;;;;"}

package/dist/components/Tooltip/components/TooltipPopover.cjs

@@ -1,15 +1,11 @@
 'use strict';
 
 var React = require('react');
-var framerMotion = require('framer-motion');
 var reactPopper = require('react-popper');
+var styled = require('./styled.cjs');
 var types = require('../types.cjs');
 var index = require('../../../theme/index.cjs');
 var Text = require('../../Text/Text.cjs');
-var buildClassnames = require('../../../utils/buildClassnames.cjs');
-require('uid/secure');
-var assignCssVars = require('../../../utils/assignCssVars.cjs');
-var Tooltip_module = require('../Tooltip.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -17,14 +13,15 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const defaultConfig = {
     side: types.Sides.TOP,
+    triangleOffset: 6,
     tipMinWidth: 60,
     tipMaxWidth: 340,
 };
-const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, legacyClassNames, }) => {
+const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, classNames, }) => {
     const [popperElement, setPopperElement] = React.useState(null);
     const usedConfig = { ...defaultConfig, ...config };
-    const { side, tipMinWidth, tipMaxWidth } = usedConfig;
-    const { styles: popperStyles, attributes } = reactPopper.usePopper(hoverableElement, popperElement, {
+    const { side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;
+    const { styles, attributes } = reactPopper.usePopper(hoverableElement, popperElement, {
         placement: `${side}-${reversed ? 'end' : 'start'}`,
         modifiers: [
             {
@@ -35,13 +32,13 @@ const TooltipPopover = ({ content, text, hoverableElement, config, reversed, wit
             },
         ],
     });
-    const tipInlineStyles = {
-        ...popperStyles.popper,
+    const tooltipStyles = {
+        ...styles.popper,
         zIndex: index.theme.layers.tooltip,
     };
-    return (React__default.default.createElement(framerMotion.motion.div, { key: "tooltip-tip", className: buildClassnames.buildClassnames([Tooltip_module.tip, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.tip]), ref: setPopperElement, style: tipInlineStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, ...attributes.popper, role: "tooltip" },
-        React__default.default.createElement("div", { className: buildClassnames.buildClassnames([Tooltip_module.wrap, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.wrap]), style: assignCssVars.assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` }) }, content !== null && content !== void 0 ? content : (React__default.default.createElement(Text.Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
-        withTriangle && React__default.default.createElement("div", { id: "veeqo-components-triangle", className: buildClassnames.buildClassnames([Tooltip_module.triangle, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.triangle]) })));
+    return (React__default.default.createElement(styled.Tip, { key: "tooltip-tip", className: classNames.tip, ref: setPopperElement, triangleOffsetSize: triangleOffset, style: tooltipStyles, ...attributes.popper, role: "tooltip" },
+        React__default.default.createElement(styled.Wrap, { className: classNames.wrap, tipMinWidth: tipMinWidth, tipMaxWidth: tipMaxWidth }, content !== null && content !== void 0 ? content : (React__default.default.createElement(Text.Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
+        withTriangle && React__default.default.createElement(styled.Triangle, { id: "veeqo-components-triangle", className: classNames.triangle })));
 };
 
 exports.TooltipPopover = TooltipPopover;

package/dist/components/Tooltip/components/TooltipPopover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPopover.cjs","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { motion } from 'framer-motion';\nimport { usePopper } from 'react-popper';\nimport { IConfig, Sides } from '../types';\nimport { Placement, TooltipPopoverProps } from './types';\nimport { theme } from '../../../theme';\nimport { Text } from '../../Text';\nimport { assignCssVars, buildClassnames } from '../../../utils';\nimport tooltipStyles from '../Tooltip.module.scss';\n\nconst defaultConfig: IConfig = {\n  side: Sides.TOP,\n  tipMinWidth: 60,\n  tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n  content,\n  text,\n  hoverableElement,\n  config,\n  reversed,\n  withTriangle,\n  legacyClassNames,\n}: TooltipPopoverProps) => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const usedConfig = { ...defaultConfig, ...config };\n  const { side, tipMinWidth, tipMaxWidth } = usedConfig;\n\n  const { styles: popperStyles, attributes } = usePopper(hoverableElement, popperElement, {\n    placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 8],\n        },\n      },\n    ],\n  });\n\n  const tipInlineStyles = {\n    ...popperStyles.popper,\n    zIndex: theme.layers.tooltip,\n  };\n\n  return (\n    <motion.div\n      key=\"tooltip-tip\"\n      className={buildClassnames([tooltipStyles.tip, legacyClassNames?.tip])}\n      ref={setPopperElement}\n      style={tipInlineStyles}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n      transition={{ duration: 0.15 }}\n      {...attributes.popper}\n      role=\"tooltip\"\n    >\n      <div\n        className={buildClassnames([tooltipStyles.wrap, legacyClassNames?.wrap])}\n        style={assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` })}\n      >\n        {content ?? (\n          <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n            {text}\n          </Text>\n        )}\n      </div>\n      {withTriangle && <div id=\"veeqo-components-triangle\" className={buildClassnames([tooltipStyles.triangle, legacyClassNames?.triangle])} />}\n    </motion.div>\n  );\n};\n"],"names":["Sides","useState","usePopper","theme","React","motion","buildClassnames","tooltipStyles","assignCssVars","Text"],"mappings":"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"}
+{"version":3,"file":"TooltipPopover.cjs","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport { Tip, Triangle, Wrap } from './styled';\nimport { IConfig, Sides } from '../types';\nimport { Placement, TooltipPopoverProps } from './types';\nimport { theme } from '../../../theme';\nimport { Text } from '../../Text';\n\nconst defaultConfig: IConfig = {\n  side: Sides.TOP,\n  triangleOffset: 6,\n  tipMinWidth: 60,\n  tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n  content,\n  text,\n  hoverableElement,\n  config,\n  reversed,\n  withTriangle,\n  classNames,\n}: TooltipPopoverProps) => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const usedConfig = { ...defaultConfig, ...config };\n  const { side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;\n\n  const { styles, attributes } = usePopper(hoverableElement, popperElement, {\n    placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 8],\n        },\n      },\n    ],\n  });\n\n  const tooltipStyles = {\n    ...styles.popper,\n    zIndex: theme.layers.tooltip,\n  };\n\n  return (\n    <Tip\n      key=\"tooltip-tip\"\n      className={classNames.tip}\n      ref={setPopperElement}\n      triangleOffsetSize={triangleOffset}\n      style={tooltipStyles}\n      {...attributes.popper}\n      role=\"tooltip\"\n    >\n      <Wrap className={classNames.wrap} tipMinWidth={tipMinWidth} tipMaxWidth={tipMaxWidth}>\n        {content ?? (\n          <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n            {text}\n          </Text>\n        )}\n      </Wrap>\n      {withTriangle && <Triangle id=\"veeqo-components-triangle\" className={classNames.triangle} />}\n    </Tip>\n  );\n};\n"],"names":["Sides","useState","usePopper","theme","React","Tip","Wrap","Text","Triangle"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,aAAa,GAAY;IAC7B,IAAI,EAAEA,WAAK,CAAC,GAAG;AACf,IAAA,cAAc,EAAE,CAAC;AACjB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,UAAU,GACU,KAAI;IACxB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAAwB,IAAI,CAAC;IAE/E,MAAM,UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;IAErE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAGC,qBAAS,CAAC,gBAAgB,EAAE,aAAa,EAAE;AACxE,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA,CAAe;AAC/D,QAAA,SAAS,EAAE;AACT,YAAA;AACE,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,OAAO,EAAE;AACP,oBAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG;QACpB,GAAG,MAAM,CAAC,MAAM;AAChB,QAAA,MAAM,EAAEC,WAAK,CAAC,MAAM,CAAC,OAAO;KAC7B;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,UAAG,EAAA,EACF,GAAG,EAAC,aAAa,EACjB,SAAS,EAAE,UAAU,CAAC,GAAG,EACzB,GAAG,EAAE,gBAAgB,EACrB,kBAAkB,EAAE,cAAc,EAClC,KAAK,EAAE,aAAa,EAAA,GAChB,UAAU,CAAC,MAAM,EACrB,IAAI,EAAC,SAAS,EAAA;AAEd,QAAAD,sBAAA,CAAA,aAAA,CAACE,WAAI,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAA,EACjF,OAAO,aAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IACNF,sBAAA,CAAA,aAAA,CAACG,SAAI,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,IAChD,IAAI,CACA,CACR,CACI;AACN,QAAA,YAAY,IAAIH,sBAAA,CAAA,aAAA,CAACI,eAAQ,EAAA,EAAC,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAA,CAAI,CACxF;AAEV;;;;"}

package/dist/components/Tooltip/components/TooltipPopover.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { TooltipPopoverProps } from './types';
-export declare const TooltipPopover: ({ content, text, hoverableElement, config, reversed, withTriangle, legacyClassNames, }: TooltipPopoverProps) => React.JSX.Element;
+export declare const TooltipPopover: ({ content, text, hoverableElement, config, reversed, withTriangle, classNames, }: TooltipPopoverProps) => React.JSX.Element;

package/dist/components/Tooltip/components/TooltipPopover.js

@@ -1,24 +1,21 @@
 import React__default, { useState } from 'react';
-import { motion } from 'framer-motion';
 import { usePopper } from 'react-popper';
+import { Tip, Wrap, Triangle } from './styled.js';
 import { Sides } from '../types.js';
 import { theme } from '../../../theme/index.js';
 import { Text } from '../../Text/Text.js';
-import { buildClassnames } from '../../../utils/buildClassnames.js';
-import 'uid/secure';
-import { assignCssVars } from '../../../utils/assignCssVars.js';
-import tooltipStyles from '../Tooltip.module.scss.js';
 
 const defaultConfig = {
     side: Sides.TOP,
+    triangleOffset: 6,
     tipMinWidth: 60,
     tipMaxWidth: 340,
 };
-const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, legacyClassNames, }) => {
+const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, classNames, }) => {
     const [popperElement, setPopperElement] = useState(null);
     const usedConfig = { ...defaultConfig, ...config };
-    const { side, tipMinWidth, tipMaxWidth } = usedConfig;
-    const { styles: popperStyles, attributes } = usePopper(hoverableElement, popperElement, {
+    const { side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;
+    const { styles, attributes } = usePopper(hoverableElement, popperElement, {
         placement: `${side}-${reversed ? 'end' : 'start'}`,
         modifiers: [
             {
@@ -29,13 +26,13 @@ const TooltipPopover = ({ content, text, hoverableElement, config, reversed, wit
             },
         ],
     });
-    const tipInlineStyles = {
-        ...popperStyles.popper,
+    const tooltipStyles = {
+        ...styles.popper,
         zIndex: theme.layers.tooltip,
     };
-    return (React__default.createElement(motion.div, { key: "tooltip-tip", className: buildClassnames([tooltipStyles.tip, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.tip]), ref: setPopperElement, style: tipInlineStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, ...attributes.popper, role: "tooltip" },
-        React__default.createElement("div", { className: buildClassnames([tooltipStyles.wrap, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.wrap]), style: assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` }) }, content !== null && content !== void 0 ? content : (React__default.createElement(Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
-        withTriangle && React__default.createElement("div", { id: "veeqo-components-triangle", className: buildClassnames([tooltipStyles.triangle, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.triangle]) })));
+    return (React__default.createElement(Tip, { key: "tooltip-tip", className: classNames.tip, ref: setPopperElement, triangleOffsetSize: triangleOffset, style: tooltipStyles, ...attributes.popper, role: "tooltip" },
+        React__default.createElement(Wrap, { className: classNames.wrap, tipMinWidth: tipMinWidth, tipMaxWidth: tipMaxWidth }, content !== null && content !== void 0 ? content : (React__default.createElement(Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
+        withTriangle && React__default.createElement(Triangle, { id: "veeqo-components-triangle", className: classNames.triangle })));
 };
 
 export { TooltipPopover };

package/dist/components/Tooltip/components/TooltipPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPopover.js","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { motion } from 'framer-motion';\nimport { usePopper } from 'react-popper';\nimport { IConfig, Sides } from '../types';\nimport { Placement, TooltipPopoverProps } from './types';\nimport { theme } from '../../../theme';\nimport { Text } from '../../Text';\nimport { assignCssVars, buildClassnames } from '../../../utils';\nimport tooltipStyles from '../Tooltip.module.scss';\n\nconst defaultConfig: IConfig = {\n  side: Sides.TOP,\n  tipMinWidth: 60,\n  tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n  content,\n  text,\n  hoverableElement,\n  config,\n  reversed,\n  withTriangle,\n  legacyClassNames,\n}: TooltipPopoverProps) => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const usedConfig = { ...defaultConfig, ...config };\n  const { side, tipMinWidth, tipMaxWidth } = usedConfig;\n\n  const { styles: popperStyles, attributes } = usePopper(hoverableElement, popperElement, {\n    placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 8],\n        },\n      },\n    ],\n  });\n\n  const tipInlineStyles = {\n    ...popperStyles.popper,\n    zIndex: theme.layers.tooltip,\n  };\n\n  return (\n    <motion.div\n      key=\"tooltip-tip\"\n      className={buildClassnames([tooltipStyles.tip, legacyClassNames?.tip])}\n      ref={setPopperElement}\n      style={tipInlineStyles}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n      transition={{ duration: 0.15 }}\n      {...attributes.popper}\n      role=\"tooltip\"\n    >\n      <div\n        className={buildClassnames([tooltipStyles.wrap, legacyClassNames?.wrap])}\n        style={assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` })}\n      >\n        {content ?? (\n          <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n            {text}\n          </Text>\n        )}\n      </div>\n      {withTriangle && <div id=\"veeqo-components-triangle\" className={buildClassnames([tooltipStyles.triangle, legacyClassNames?.triangle])} />}\n    </motion.div>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"TooltipPopover.js","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport { Tip, Triangle, Wrap } from './styled';\nimport { IConfig, Sides } from '../types';\nimport { Placement, TooltipPopoverProps } from './types';\nimport { theme } from '../../../theme';\nimport { Text } from '../../Text';\n\nconst defaultConfig: IConfig = {\n  side: Sides.TOP,\n  triangleOffset: 6,\n  tipMinWidth: 60,\n  tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n  content,\n  text,\n  hoverableElement,\n  config,\n  reversed,\n  withTriangle,\n  classNames,\n}: TooltipPopoverProps) => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const usedConfig = { ...defaultConfig, ...config };\n  const { side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;\n\n  const { styles, attributes } = usePopper(hoverableElement, popperElement, {\n    placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 8],\n        },\n      },\n    ],\n  });\n\n  const tooltipStyles = {\n    ...styles.popper,\n    zIndex: theme.layers.tooltip,\n  };\n\n  return (\n    <Tip\n      key=\"tooltip-tip\"\n      className={classNames.tip}\n      ref={setPopperElement}\n      triangleOffsetSize={triangleOffset}\n      style={tooltipStyles}\n      {...attributes.popper}\n      role=\"tooltip\"\n    >\n      <Wrap className={classNames.wrap} tipMinWidth={tipMinWidth} tipMaxWidth={tipMaxWidth}>\n        {content ?? (\n          <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n            {text}\n          </Text>\n        )}\n      </Wrap>\n      {withTriangle && <Triangle id=\"veeqo-components-triangle\" className={classNames.triangle} />}\n    </Tip>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAQA,MAAM,aAAa,GAAY;IAC7B,IAAI,EAAE,KAAK,CAAC,GAAG;AACf,IAAA,cAAc,EAAE,CAAC;AACjB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,UAAU,GACU,KAAI;IACxB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;IAE/E,MAAM,UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;IAErE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,SAAS,CAAC,gBAAgB,EAAE,aAAa,EAAE;AACxE,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA,CAAe;AAC/D,QAAA,SAAS,EAAE;AACT,YAAA;AACE,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,OAAO,EAAE;AACP,oBAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG;QACpB,GAAG,MAAM,CAAC,MAAM;AAChB,QAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;KAC7B;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EACF,GAAG,EAAC,aAAa,EACjB,SAAS,EAAE,UAAU,CAAC,GAAG,EACzB,GAAG,EAAE,gBAAgB,EACrB,kBAAkB,EAAE,cAAc,EAClC,KAAK,EAAE,aAAa,EAAA,GAChB,UAAU,CAAC,MAAM,EACrB,IAAI,EAAC,SAAS,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAA,EACjF,OAAO,aAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IACNA,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,IAChD,IAAI,CACA,CACR,CACI;AACN,QAAA,YAAY,IAAIA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAA,CAAI,CACxF;AAEV;;;;"}

package/dist/components/Tooltip/components/styled.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var styled = require('styled-components');
+var framerMotion = require('framer-motion');
+var index = require('../../../theme/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--1exlfc5" }) `display:inline-block;`;
+const Triangle = styled__default.default.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--bq60f" }) `background-color:${index.theme.colors.neutral.ink.dark};height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:${index.theme.layers.tooltip};`;
+const Tip = styled__default.default(framerMotion.motion.div).attrs({
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.15 },
+}).withConfig({ displayName: "vui--Tip", componentId: "vui--1mrdz3b" }) `width:max-content;pointer-events:none;will-change:opacity,transform;&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
+const Wrap = styled__default.default(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1q7vib9" }) `padding:${index.theme.sizes.base} ${index.theme.sizes[5]};overflow:hidden;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;color:#fff;border-radius:${index.theme.sizes.sm};box-shadow:${index.theme.shadows.base};background:${index.theme.colors.neutral.ink.dark};`;
+
+exports.Container = Container;
+exports.Tip = Tip;
+exports.Triangle = Triangle;
+exports.Wrap = Wrap;
+//# sourceMappingURL=styled.cjs.map

package/dist/components/Tooltip/components/styled.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../../theme';\n\nimport { TriangleProps, WrapProps } from './types';\n\nconst Container = styled.div`\n  display: inline-block;\n`;\n\nconst Triangle = styled.div`\n  background-color: ${theme.colors.neutral.ink.dark};\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: ${theme.layers.tooltip};\n`;\n\nconst Tip = styled(motion.div).attrs({\n  initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  exit: { opacity: 0 },\n  transition: { duration: 0.15 },\n})<TriangleProps>`\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n\n  &[data-popper-placement^='top-start'] > #veeqo-components-triangle {\n    left: 8px;\n    bottom: 0px;\n  }\n  &[data-popper-placement^='top-end'] > #veeqo-components-triangle {\n    right: 8px;\n    bottom: 0px;\n  }\n\n  &[data-popper-placement^='bottom-start'] > #veeqo-components-triangle {\n    left: 8px;\n    top: -4px;\n  }\n  &[data-popper-placement^='bottom-end'] > #veeqo-components-triangle {\n    right: 8px;\n    top: -4px;\n  }\n`;\n\nconst Wrap = styled(Container)<WrapProps>`\n  padding: ${theme.sizes.base} ${theme.sizes[5]};\n  overflow: hidden;\n  z-index: 10;\n\n  min-width: ${({ tipMinWidth }) => tipMinWidth}px;\n  max-width: ${({ tipMaxWidth }) => tipMaxWidth}px;\n\n  color: #fff;\n  border-radius: ${theme.sizes.sm};\n  box-shadow: ${theme.shadows.base};\n  background: ${theme.colors.neutral.ink.dark};\n`;\n\nexport { Container, Tip, Wrap, Triangle };\n"],"names":["styled","theme","motion"],"mappings":";;;;;;;;;;AAOA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG;AAI5B,MAAM,QAAQ,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EACLC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,0EAAA,EAKtCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAA,CAAA;AAGjC,MAAM,GAAG,GAAGD,uBAAM,CAACE,mBAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;AACnC,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACpB,IAAA,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC/B,CAAA,CAAC;AAwBF,MAAM,IAAI,GAAGF,uBAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EACjBC,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,CAAA,EAAIA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,sCAAA,EAIhC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,aAAA,EAChC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,4BAAA,EAG5BA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,YAAA,EACjBA,WAAK,CAAC,OAAO,CAAC,IAAI,CAAA,YAAA,EAClBA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;;;;;;;"}

package/dist/components/Tooltip/components/styled.d.ts

@@ -0,0 +1,19 @@
+import { TriangleProps, WrapProps } from './types';
+declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Triangle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Tip: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {
+    initial: {
+        opacity: number;
+    };
+    animate: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+    transition: {
+        duration: number;
+    };
+} & TriangleProps, "animate" | "initial" | "exit" | "transition">;
+declare const Wrap: import("styled-components").StyledComponent<"div", any, WrapProps, never>;
+export { Container, Tip, Wrap, Triangle };

package/dist/components/Tooltip/components/styled.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+import { theme } from '../../../theme/index.js';
+
+const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--1exlfc5" }) `display:inline-block;`;
+const Triangle = styled.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--bq60f" }) `background-color:${theme.colors.neutral.ink.dark};height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:${theme.layers.tooltip};`;
+const Tip = styled(motion.div).attrs({
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.15 },
+}).withConfig({ displayName: "vui--Tip", componentId: "vui--1mrdz3b" }) `width:max-content;pointer-events:none;will-change:opacity,transform;&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
+const Wrap = styled(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1q7vib9" }) `padding:${theme.sizes.base} ${theme.sizes[5]};overflow:hidden;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;color:#fff;border-radius:${theme.sizes.sm};box-shadow:${theme.shadows.base};background:${theme.colors.neutral.ink.dark};`;
+
+export { Container, Tip, Triangle, Wrap };
+//# sourceMappingURL=styled.js.map

package/dist/components/Tooltip/components/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../../theme';\n\nimport { TriangleProps, WrapProps } from './types';\n\nconst Container = styled.div`\n  display: inline-block;\n`;\n\nconst Triangle = styled.div`\n  background-color: ${theme.colors.neutral.ink.dark};\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: ${theme.layers.tooltip};\n`;\n\nconst Tip = styled(motion.div).attrs({\n  initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  exit: { opacity: 0 },\n  transition: { duration: 0.15 },\n})<TriangleProps>`\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n\n  &[data-popper-placement^='top-start'] > #veeqo-components-triangle {\n    left: 8px;\n    bottom: 0px;\n  }\n  &[data-popper-placement^='top-end'] > #veeqo-components-triangle {\n    right: 8px;\n    bottom: 0px;\n  }\n\n  &[data-popper-placement^='bottom-start'] > #veeqo-components-triangle {\n    left: 8px;\n    top: -4px;\n  }\n  &[data-popper-placement^='bottom-end'] > #veeqo-components-triangle {\n    right: 8px;\n    top: -4px;\n  }\n`;\n\nconst Wrap = styled(Container)<WrapProps>`\n  padding: ${theme.sizes.base} ${theme.sizes[5]};\n  overflow: hidden;\n  z-index: 10;\n\n  min-width: ${({ tipMinWidth }) => tipMinWidth}px;\n  max-width: ${({ tipMaxWidth }) => tipMaxWidth}px;\n\n  color: #fff;\n  border-radius: ${theme.sizes.sm};\n  box-shadow: ${theme.shadows.base};\n  background: ${theme.colors.neutral.ink.dark};\n`;\n\nexport { Container, Tip, Wrap, Triangle };\n"],"names":[],"mappings":";;;;AAOA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG;AAI5B,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EACL,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,0EAAA,EAKtC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAA,CAAA;AAGjC,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;AACnC,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACpB,IAAA,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC/B,CAAA,CAAC;AAwBF,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EACjB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,CAAA,EAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,sCAAA,EAIhC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,aAAA,EAChC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,4BAAA,EAG5B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,YAAA,EACjB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAA,YAAA,EAClB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;;;;"}

package/dist/components/Tooltip/components/types.d.ts

@@ -1,15 +1,20 @@
-import { TooltipProps } from '../types';
-export type LegacyClassNames = {
-    tip?: string;
-    wrap?: string;
-    triangle?: string;
-};
+import { IConfig, TooltipProps } from '../types';
 export type TooltipPopoverProps = {
     hoverableElement: HTMLElement | null;
-    legacyClassNames?: LegacyClassNames;
+    classNames: {
+        container: string | undefined;
+        tip: string | undefined;
+        wrap: string | undefined;
+        triangle: string | undefined;
+        hoverable: string | undefined;
+    };
 } & Pick<TooltipProps, 'config' | 'withTriangle' | 'reversed' | 'content' | 'text'>;
 export declare enum Position {
     end = "end",
     start = "start"
 }
+export interface TriangleProps {
+    triangleOffsetSize: number;
+}
+export type WrapProps = Pick<IConfig, 'tipMinWidth' | 'tipMaxWidth'>;
 export type Placement = 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';