@veeqo/ui 14.9.0 → 14.10.0-beta-1

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 { 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;;;;"}
+{"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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"}

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, classNames, }: TooltipPopoverProps) => React.JSX.Element;
+export declare const TooltipPopover: ({ content, text, hoverableElement, config, reversed, withTriangle, legacyClassNames, }: TooltipPopoverProps) => React.JSX.Element;

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

@@ -1,21 +1,24 @@
 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, classNames, }) => {
+const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, legacyClassNames, }) => {
     const [popperElement, setPopperElement] = useState(null);
     const usedConfig = { ...defaultConfig, ...config };
-    const { side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;
-    const { styles, attributes } = usePopper(hoverableElement, popperElement, {
+    const { side, tipMinWidth, tipMaxWidth } = usedConfig;
+    const { styles: popperStyles, attributes } = usePopper(hoverableElement, popperElement, {
         placement: `${side}-${reversed ? 'end' : 'start'}`,
         modifiers: [
             {
@@ -26,13 +29,13 @@ const TooltipPopover = ({ content, text, hoverableElement, config, reversed, wit
             },
         ],
     });
-    const tooltipStyles = {
-        ...styles.popper,
+    const tipInlineStyles = {
+        ...popperStyles.popper,
         zIndex: theme.layers.tooltip,
     };
-    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 })));
+    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]) })));
 };
 
 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 { 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;;;;"}
+{"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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"}

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

@@ -1,20 +1,15 @@
-import { IConfig, TooltipProps } from '../types';
+import { TooltipProps } from '../types';
+export type LegacyClassNames = {
+    tip?: string;
+    wrap?: string;
+    triangle?: string;
+};
 export type TooltipPopoverProps = {
     hoverableElement: HTMLElement | null;
-    classNames: {
-        container: string | undefined;
-        tip: string | undefined;
-        wrap: string | undefined;
-        triangle: string | undefined;
-        hoverable: string | undefined;
-    };
+    legacyClassNames?: LegacyClassNames;
 } & 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';

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

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport enum Sides {\n  BOTTOM = 'bottom',\n  TOP = 'top',\n}\n\nexport interface IConfig {\n  side: Sides.TOP | Sides.BOTTOM;\n  triangleOffset: number;\n  tipMinWidth: number;\n  tipMaxWidth: number;\n  tipOffset?: number;\n}\n\nexport interface TooltipProps {\n  children?: any;\n  text?: string;\n  content?: ReactNode;\n  config?: IConfig;\n  reversed?: boolean;\n  additionalOffset?: number;\n  className?: string;\n  withTriangle?: boolean;\n  unmountOnExit?: boolean;\n  initialShouldShow?: boolean;\n  useReactPortal?: boolean;\n}\n"],"names":["Sides"],"mappings":";;AAEYA;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,KAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAHWA,aAAK,KAALA,aAAK,GAAA,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"types.cjs","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport enum Sides {\n  BOTTOM = 'bottom',\n  TOP = 'top',\n}\n\nexport interface IConfig {\n  side: Sides.TOP | Sides.BOTTOM;\n  /** @deprecated No longer used. Triangle positioning is handled by CSS Module classes. */\n  triangleOffset?: number;\n  tipMinWidth: number;\n  tipMaxWidth: number;\n  tipOffset?: number;\n}\n\nexport interface TooltipProps {\n  children?: any;\n  text?: string;\n  content?: ReactNode;\n  config?: IConfig;\n  reversed?: boolean;\n  additionalOffset?: number;\n  className?: string;\n  hoverableClassName?: string;\n  withTriangle?: boolean;\n  unmountOnExit?: boolean;\n  initialShouldShow?: boolean;\n  useReactPortal?: boolean;\n}\n"],"names":["Sides"],"mappings":";;AAEYA;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,KAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAHWA,aAAK,KAALA,aAAK,GAAA,EAAA,CAAA,CAAA;;"}

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

@@ -5,7 +5,8 @@ export declare enum Sides {
 }
 export interface IConfig {
     side: Sides.TOP | Sides.BOTTOM;
-    triangleOffset: number;
+    /** @deprecated No longer used. Triangle positioning is handled by CSS Module classes. */
+    triangleOffset?: number;
     tipMinWidth: number;
     tipMaxWidth: number;
     tipOffset?: number;
@@ -18,6 +19,7 @@ export interface TooltipProps {
     reversed?: boolean;
     additionalOffset?: number;
     className?: string;
+    hoverableClassName?: string;
     withTriangle?: boolean;
     unmountOnExit?: boolean;
     initialShouldShow?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport enum Sides {\n  BOTTOM = 'bottom',\n  TOP = 'top',\n}\n\nexport interface IConfig {\n  side: Sides.TOP | Sides.BOTTOM;\n  triangleOffset: number;\n  tipMinWidth: number;\n  tipMaxWidth: number;\n  tipOffset?: number;\n}\n\nexport interface TooltipProps {\n  children?: any;\n  text?: string;\n  content?: ReactNode;\n  config?: IConfig;\n  reversed?: boolean;\n  additionalOffset?: number;\n  className?: string;\n  withTriangle?: boolean;\n  unmountOnExit?: boolean;\n  initialShouldShow?: boolean;\n  useReactPortal?: boolean;\n}\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,KAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAHW,KAAK,KAAL,KAAK,GAAA,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport enum Sides {\n  BOTTOM = 'bottom',\n  TOP = 'top',\n}\n\nexport interface IConfig {\n  side: Sides.TOP | Sides.BOTTOM;\n  /** @deprecated No longer used. Triangle positioning is handled by CSS Module classes. */\n  triangleOffset?: number;\n  tipMinWidth: number;\n  tipMaxWidth: number;\n  tipOffset?: number;\n}\n\nexport interface TooltipProps {\n  children?: any;\n  text?: string;\n  content?: ReactNode;\n  config?: IConfig;\n  reversed?: boolean;\n  additionalOffset?: number;\n  className?: string;\n  hoverableClassName?: string;\n  withTriangle?: boolean;\n  unmountOnExit?: boolean;\n  initialShouldShow?: boolean;\n  useReactPortal?: boolean;\n}\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,KAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAHW,KAAK,KAAL,KAAK,GAAA,EAAA,CAAA,CAAA;;;;"}

package/dist/hoc/withLabels/BlockTooltip.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+var Tooltip = require('../../components/Tooltip/Tooltip.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var BlockTooltip_module = require('./BlockTooltip.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const BlockTooltip = ({ className, ...rest }) => (React__default.default.createElement(Tooltip.Tooltip, { ...rest, className: buildClassnames.buildClassnames([BlockTooltip_module.block, className]), hoverableClassName: BlockTooltip_module.hoverableFlex }));
+
+exports.BlockTooltip = BlockTooltip;
+//# sourceMappingURL=BlockTooltip.cjs.map

package/dist/hoc/withLabels/BlockTooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.cjs","sources":["../../../src/hoc/withLabels/BlockTooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../../components/Tooltip';\nimport { TooltipProps } from '../../components/Tooltip/types';\nimport { buildClassnames } from '../../utils';\nimport blockTooltipStyles from './BlockTooltip.module.scss';\n\nexport const BlockTooltip = ({ className, ...rest }: TooltipProps) => (\n  <Tooltip\n    {...rest}\n    className={buildClassnames([blockTooltipStyles.block, className])}\n    hoverableClassName={blockTooltipStyles.hoverableFlex}\n  />\n);\n"],"names":["React","Tooltip","buildClassnames","blockTooltipStyles"],"mappings":";;;;;;;;;;;;AAMO,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAgB,MAC/DA,sBAAA,CAAA,aAAA,CAACC,eAAO,OACF,IAAI,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,mBAAkB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,EACjE,kBAAkB,EAAEA,mBAAkB,CAAC,aAAa,EAAA,CACpD;;;;"}

package/dist/hoc/withLabels/BlockTooltip.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TooltipProps } from '../../components/Tooltip/types';
+export declare const BlockTooltip: ({ className, ...rest }: TooltipProps) => React.JSX.Element;

package/dist/hoc/withLabels/BlockTooltip.js

@@ -0,0 +1,10 @@
+import React__default from 'react';
+import { Tooltip } from '../../components/Tooltip/Tooltip.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import blockTooltipStyles from './BlockTooltip.module.scss.js';
+
+const BlockTooltip = ({ className, ...rest }) => (React__default.createElement(Tooltip, { ...rest, className: buildClassnames([blockTooltipStyles.block, className]), hoverableClassName: blockTooltipStyles.hoverableFlex }));
+
+export { BlockTooltip };
+//# sourceMappingURL=BlockTooltip.js.map

package/dist/hoc/withLabels/BlockTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.js","sources":["../../../src/hoc/withLabels/BlockTooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../../components/Tooltip';\nimport { TooltipProps } from '../../components/Tooltip/types';\nimport { buildClassnames } from '../../utils';\nimport blockTooltipStyles from './BlockTooltip.module.scss';\n\nexport const BlockTooltip = ({ className, ...rest }: TooltipProps) => (\n  <Tooltip\n    {...rest}\n    className={buildClassnames([blockTooltipStyles.block, className])}\n    hoverableClassName={blockTooltipStyles.hoverableFlex}\n  />\n);\n"],"names":["React"],"mappings":";;;;;;AAMO,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAgB,MAC/DA,cAAA,CAAA,aAAA,CAAC,OAAO,OACF,IAAI,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,kBAAkB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,EACjE,kBAAkB,EAAE,kBAAkB,CAAC,aAAa,EAAA,CACpD;;;;"}

package/dist/hoc/withLabels/BlockTooltip.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._block_10obo_1 {\n  display: block;\n}\n\n._hoverableFlex_10obo_5 {\n  display: flex;\n}");
+var blockTooltipStyles = {"block":"_block_10obo_1","hoverableFlex":"_hoverableFlex_10obo_5"};
+
+module.exports = blockTooltipStyles;
+//# sourceMappingURL=BlockTooltip.module.scss.cjs.map

package/dist/hoc/withLabels/BlockTooltip.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.module.scss.cjs","sources":["../../../src/hoc/withLabels/BlockTooltip.module.scss"],"sourcesContent":[".block {\n  display: block;\n}\n\n.hoverableFlex {\n  display: flex;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2FAAA;;;;;"}

package/dist/hoc/withLabels/BlockTooltip.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._block_10obo_1 {\n  display: block;\n}\n\n._hoverableFlex_10obo_5 {\n  display: flex;\n}");
+var blockTooltipStyles = {"block":"_block_10obo_1","hoverableFlex":"_hoverableFlex_10obo_5"};
+
+export { blockTooltipStyles as default };
+//# sourceMappingURL=BlockTooltip.module.scss.js.map

package/dist/hoc/withLabels/BlockTooltip.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.module.scss.js","sources":["../../../src/hoc/withLabels/BlockTooltip.module.scss"],"sourcesContent":[".block {\n  display: block;\n}\n\n.hoverableFlex {\n  display: flex;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2FAAA;;;;;"}

package/dist/hoc/withLabels/withLabels.cjs

@@ -9,7 +9,7 @@ var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cj
 var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
 var LockIcon = require('../../icons/design-system/components/LockIcon.cjs');
 var index = require('../../theme/index.cjs');
-var styled = require('./styled.cjs');
+var BlockTooltip = require('./BlockTooltip.cjs');
 var withLabels_module = require('./withLabels.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -25,7 +25,7 @@ const withLabels = (Component) => {
         return (React__default.default.createElement(FlexCol.FlexCol, { className: withLabels_module.rootStack },
             React__default.default.createElement(FlexRow.FlexRow, null,
                 React__default.default.createElement(Text.Text, { variant: "inputLabel", id: `${componentId}-label`, htmlFor: componentId }, label),
-                (tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent },
+                (tooltip || tooltipContent) && (React__default.default.createElement(BlockTooltip.BlockTooltip, { text: tooltip, content: tooltipContent },
                     React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
             hint && (React__default.default.createElement(Text.Text, { variant: "hintText", as: "span", className: withLabels_module.hint, id: `${componentId}-hint` }, hint)),
             React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }),

package/dist/hoc/withLabels/withLabels.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './styled';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <FlexRow id={`${componentId}-error`} gap=\"xs\">\n              <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n              <Text variant=\"error\" as=\"span\" className={styles.error}>\n                {error}\n              </Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n              <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n              <Text variant=\"bodyBold\" as=\"span\">\n                {disabledMessage}\n              </Text>\n            </FlexRow>\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","CriticalIcon","LockIcon"],"mappings":"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"}
+{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <FlexRow id={`${componentId}-error`} gap=\"xs\">\n              <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n              <Text variant=\"error\" as=\"span\" className={styles.error}>\n                {error}\n              </Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n              <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n              <Text variant=\"bodyBold\" as=\"span\">\n                {disabledMessage}\n              </Text>\n            </FlexRow>\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","CriticalIcon","LockIcon"],"mappings":"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"}

package/dist/hoc/withLabels/withLabels.js

@@ -7,7 +7,7 @@ import { ReactComponent as CriticalIcon } from '../../icons/design-system/compon
 import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
 import { ReactComponent as LockIcon } from '../../icons/design-system/components/LockIcon.js';
 import { theme } from '../../theme/index.js';
-import { BlockTooltip } from './styled.js';
+import { BlockTooltip } from './BlockTooltip.js';
 import labelStyles from './withLabels.module.scss.js';
 
 // eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX

package/dist/hoc/withLabels/withLabels.js.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './styled';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <FlexRow id={`${componentId}-error`} gap=\"xs\">\n              <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n              <Text variant=\"error\" as=\"span\" className={styles.error}>\n                {error}\n              </Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n              <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n              <Text variant=\"bodyBold\" as=\"span\">\n                {disabledMessage}\n              </Text>\n            </FlexRow>\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":"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"}
+{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <FlexRow id={`${componentId}-error`} gap=\"xs\">\n              <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n              <Text variant=\"error\" as=\"span\" className={styles.error}>\n                {error}\n              </Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n              <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n              <Text variant=\"bodyBold\" as=\"span\">\n                {disabledMessage}\n              </Text>\n            </FlexRow>\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":"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"}

package/dist/index.cjs

@@ -41,7 +41,7 @@ var Divider = require('./components/Divider/Divider.cjs');
 var Dropdown = require('./components/Dropdown/Dropdown.cjs');
 var FeatureBanner = require('./components/FeatureBanner/FeatureBanner.cjs');
 var FilterTag = require('./components/FilterTag/FilterTag.cjs');
-var index$1 = require('./components/Grid/index.cjs');
+var Grid = require('./components/Grid/Grid.cjs');
 var Image = require('./components/Image/Image.cjs');
 var InputAffix = require('./components/InputAffix/InputAffix.cjs');
 var InputGroup = require('./components/InputGroup/InputGroup.cjs');
@@ -68,7 +68,7 @@ var Stepper = require('./components/Stepper/Stepper.cjs');
 var SystemBanner = require('./components/SystemBanner/SystemBanner.cjs');
 var Tag = require('./components/Tag/Tag.cjs');
 var Text = require('./components/Text/Text.cjs');
-var index$4 = require('./components/TextField/index.cjs');
+var index$3 = require('./components/TextField/index.cjs');
 var ToastsLayout = require('./components/ToastsLayout/ToastsLayout.cjs');
 var Toggle = require('./components/Toggle/Toggle.cjs');
 var ToggleButton = require('./components/ToggleButton/ToggleButton.cjs');
@@ -84,13 +84,13 @@ var ViewTab = require('./components/ViewTab/ViewTab.cjs');
 var ViewsContainer = require('./components/ViewsContainer/ViewsContainer.cjs');
 var WeightInput = require('./components/WeightInput/WeightInput.cjs');
 var Indicator = require('./components/Indicator/Indicator.cjs');
-var index$3 = require('./components/SelectDropdown/index.cjs');
+var index$2 = require('./components/SelectDropdown/index.cjs');
 var ThemeInjector = require('./components/ThemeInjector/ThemeInjector.cjs');
 var TokenProvider = require('./components/TokenProvider/TokenProvider.cjs');
 var DataGrid = require('./components/DataGrid/DataGrid.cjs');
 var FlexCol = require('./components/Flex/FlexCol/FlexCol.cjs');
 var FlexRow = require('./components/Flex/FlexRow/FlexRow.cjs');
-var index$2 = require('./components/PhoneInput/index.cjs');
+var index$1 = require('./components/PhoneInput/index.cjs');
 var ChannelMark = require('./components/ChannelMark/ChannelMark.cjs');
 var constants$2 = require('./components/ChannelMark/constants.cjs');
 var CarrierMark = require('./components/CarrierMark/CarrierMark.cjs');
@@ -118,7 +118,7 @@ var assignCssVars = require('./utils/assignCssVars.cjs');
 var buildChannelMarkUrl = require('./utils/buildChannelMarkUrl.cjs');
 var buildCarrierMarkUrl = require('./utils/buildCarrierMarkUrl.cjs');
 var getContextAwareLink = require('./utils/getContextAwareLink.cjs');
-var index$5 = require('./theme/index.cjs');
+var index$4 = require('./theme/index.cjs');
 var AccountsIcon = require('./icons/design-system/components/AccountsIcon.cjs');
 var AccountsOutlineIcon = require('./icons/design-system/components/AccountsOutlineIcon.cjs');
 var AddIcon = require('./icons/design-system/components/AddIcon.cjs');
@@ -401,7 +401,7 @@ exports.Divider = Divider.Divider;
 exports.Dropdown = Dropdown.Dropdown;
 exports.FeatureBanner = FeatureBanner.FeatureBanner;
 exports.FilterTag = FilterTag.FilterTag;
-exports.Grid = index$1.Grid;
+exports.Grid = Grid.Grid;
 exports.Image = Image.Image;
 exports.InputAffix = InputAffix.InputAffix;
 exports.InputGroup = InputGroup.InputGroup;
@@ -428,7 +428,7 @@ exports.Stepper = Stepper.Stepper;
 exports.SystemBanner = SystemBanner.SystemBanner;
 exports.Tag = Tag.Tag;
 exports.Text = Text.Text;
-exports.TextField = index$4.TextField;
+exports.TextField = index$3.TextField;
 exports.ToastsLayout = ToastsLayout.ToastsLayout;
 exports.Toggle = Toggle.Toggle;
 exports.ToggleButton = ToggleButton.ToggleButton;
@@ -451,13 +451,13 @@ exports.ViewTab = ViewTab.ViewTab;
 exports.ViewsContainer = ViewsContainer.ViewsContainer;
 exports.WeightInput = WeightInput.WeightInput;
 exports.Indicator = Indicator.Indicator;
-exports.SelectDropdown = index$3.SelectDropdown;
+exports.SelectDropdown = index$2.SelectDropdown;
 exports.ThemeInjector = ThemeInjector.ThemeInjector;
 exports.TokenProvider = TokenProvider.TokenProvider;
 exports.DataGrid = DataGrid.DataGrid;
 exports.FlexCol = FlexCol.FlexCol;
 exports.FlexRow = FlexRow.FlexRow;
-exports.PhoneInput = index$2.PhoneInput;
+exports.PhoneInput = index$1.PhoneInput;
 exports.ChannelMark = ChannelMark.ChannelMark;
 exports.ChannelTypeMap = constants$2.ChannelTypeMap;
 exports.CarrierMark = CarrierMark.CarrierMark;
@@ -487,7 +487,7 @@ exports.assignCssVars = assignCssVars.assignCssVars;
 exports.buildChannelMarkUrl = buildChannelMarkUrl.buildChannelMarkUrl;
 exports.buildCarrierMarkUrl = buildCarrierMarkUrl.buildCarrierMarkUrl;
 exports.getContextAwareLink = getContextAwareLink.getContextAwareLink;
-exports.theme = index$5.theme;
+exports.theme = index$4.theme;
 exports.AccountsIcon = AccountsIcon.ReactComponent;
 exports.AccountsOutlineIcon = AccountsOutlineIcon.ReactComponent;
 exports.AddIcon = AddIcon.ReactComponent;

package/dist/index.js

@@ -39,7 +39,7 @@ export { Divider } from './components/Divider/Divider.js';
 export { Dropdown } from './components/Dropdown/Dropdown.js';
 export { FeatureBanner } from './components/FeatureBanner/FeatureBanner.js';
 export { FilterTag } from './components/FilterTag/FilterTag.js';
-export { Grid } from './components/Grid/index.js';
+export { Grid } from './components/Grid/Grid.js';
 export { Image } from './components/Image/Image.js';
 export { InputAffix } from './components/InputAffix/InputAffix.js';
 export { InputGroup } from './components/InputGroup/InputGroup.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "14.9.0",
+  "version": "14.10.0-beta-1",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",

package/dist/components/AnimatedDropdown/components/styled.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var BaseContainer = require('../../BaseContainer/BaseContainer.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(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--r1m0qe" }) `display:inline-flex;background-color:#ffffff;box-shadow:1px 4px 15px rgba(27, 33, 38, 0.25);border-radius:4px;overflow:hidden;`;
-
-exports.Container = Container;
-//# sourceMappingURL=styled.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/AnimatedDropdown/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../../BaseContainer/BaseContainer';\n\nexport const Container = styled(BaseContainer)`\n  display: inline-flex;\n  background-color: #ffffff;\n  box-shadow: 1px 4px 15px rgba(27, 33, 38, 0.25);\n  border-radius: 4px;\n  overflow: hidden;\n`;\n"],"names":["styled","BaseContainer"],"mappings":";;;;;;;;;MAIa,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8HAAA;;;;"}

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

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/components/AnimatedDropdown/components/styled.js

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-import { BaseContainer } from '../../BaseContainer/BaseContainer.js';
-
-const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--r1m0qe" }) `display:inline-flex;background-color:#ffffff;box-shadow:1px 4px 15px rgba(27, 33, 38, 0.25);border-radius:4px;overflow:hidden;`;
-
-export { Container };
-//# sourceMappingURL=styled.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/AnimatedDropdown/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../../BaseContainer/BaseContainer';\n\nexport const Container = styled(BaseContainer)`\n  display: inline-flex;\n  background-color: #ffffff;\n  box-shadow: 1px 4px 15px rgba(27, 33, 38, 0.25);\n  border-radius: 4px;\n  overflow: hidden;\n`;\n"],"names":[],"mappings":";;;MAIa,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8HAAA;;;;"}

package/dist/components/AnimatedDropdown/styled.cjs

@@ -1,19 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var BasicDropdown = require('./components/BasicDropdown.cjs');
-var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
-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(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--q4276w" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;`;
-const Wrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--cfebb1" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;min-width:100%;`;
-const Dropdown = styled__default.default(BasicDropdown.BasicDropdown).withConfig({ displayName: "vui--Dropdown", componentId: "vui--u4w0zl" }) `flex-direction:column;position:absolute;z-index:${index.theme.layers.popup};${(props) => (props.reversed ? 'bottom: 8px;' : 'top: 6px;')} &.dropdown-enter{opacity:0;transform:translateY(-6px);}&.dropdown-enter-active{opacity:1;transition:all 200ms;transform:translateY(0px);}&.dropdown-exit{opacity:1;transform:translateY(0px);}&.dropdown-exit-active{opacity:0;transition:all 200ms;transform:translateY(-6px);}`;
-
-exports.Container = Container;
-exports.Dropdown = Dropdown;
-exports.Wrap = Wrap;
-//# sourceMappingURL=styled.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/AnimatedDropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BasicDropdown } from './components/BasicDropdown';\nimport { BaseContainer as BasicContainer } from '../BaseContainer/BaseContainer';\nimport { theme } from '../../theme';\n\nconst Container = styled(BasicContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n`;\n\nconst Wrap = styled(BasicContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  min-width: 100%;\n`;\n\nconst Dropdown = styled(BasicDropdown)<{ reversed?: boolean }>`\n  flex-direction: column;\n  position: absolute;\n  z-index: ${theme.layers.popup};\n\n  ${(props) => (props.reversed ? 'bottom: 8px;' : 'top: 6px;')}\n\n  &.dropdown-enter {\n    opacity: 0;\n    transform: translateY(-6px);\n  }\n\n  &.dropdown-enter-active {\n    opacity: 1;\n    transition: all 200ms;\n    transform: translateY(0px);\n  }\n\n  &.dropdown-exit {\n    opacity: 1;\n    transform: translateY(0px);\n  }\n\n  &.dropdown-exit-active {\n    opacity: 0;\n    transition: all 200ms;\n    transform: translateY(-6px);\n  }\n`;\n\nexport { Wrap, Dropdown, Container };\n"],"names":["styled","BasicContainer","BasicDropdown","theme"],"mappings":";;;;;;;;;;;AAMA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAc,CAAC;AAOxC,MAAM,IAAI,GAAGD,uBAAM,CAACC,2BAAc,CAAC;AAQnC,MAAM,QAAQ,GAAGD,uBAAM,CAACE,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGzBC,WAAK,CAAC,MAAM,CAAC,KAAK,CAAA,CAAA,EAE3B,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,cAAc,GAAG,WAAW,CAAC;;;;;;"}

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

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-declare const Wrap: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-declare const Dropdown: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../types").EventHandlerProps & {
-    className?: string | undefined;
-    children: import("react").ReactNode;
-    role?: import("react").AriaRole | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>, any, {
-    reversed?: boolean | undefined;
-}, never>;
-export { Wrap, Dropdown, Container };

package/dist/components/AnimatedDropdown/styled.js

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-import { BasicDropdown } from './components/BasicDropdown.js';
-import { BaseContainer } from '../BaseContainer/BaseContainer.js';
-import { theme } from '../../theme/index.js';
-
-const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--q4276w" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;`;
-const Wrap = styled(BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--cfebb1" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;min-width:100%;`;
-const Dropdown = styled(BasicDropdown).withConfig({ displayName: "vui--Dropdown", componentId: "vui--u4w0zl" }) `flex-direction:column;position:absolute;z-index:${theme.layers.popup};${(props) => (props.reversed ? 'bottom: 8px;' : 'top: 6px;')} &.dropdown-enter{opacity:0;transform:translateY(-6px);}&.dropdown-enter-active{opacity:1;transition:all 200ms;transform:translateY(0px);}&.dropdown-exit{opacity:1;transform:translateY(0px);}&.dropdown-exit-active{opacity:0;transition:all 200ms;transform:translateY(-6px);}`;
-
-export { Container, Dropdown, Wrap };
-//# sourceMappingURL=styled.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/AnimatedDropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BasicDropdown } from './components/BasicDropdown';\nimport { BaseContainer as BasicContainer } from '../BaseContainer/BaseContainer';\nimport { theme } from '../../theme';\n\nconst Container = styled(BasicContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n`;\n\nconst Wrap = styled(BasicContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  min-width: 100%;\n`;\n\nconst Dropdown = styled(BasicDropdown)<{ reversed?: boolean }>`\n  flex-direction: column;\n  position: absolute;\n  z-index: ${theme.layers.popup};\n\n  ${(props) => (props.reversed ? 'bottom: 8px;' : 'top: 6px;')}\n\n  &.dropdown-enter {\n    opacity: 0;\n    transform: translateY(-6px);\n  }\n\n  &.dropdown-enter-active {\n    opacity: 1;\n    transition: all 200ms;\n    transform: translateY(0px);\n  }\n\n  &.dropdown-exit {\n    opacity: 1;\n    transform: translateY(0px);\n  }\n\n  &.dropdown-exit-active {\n    opacity: 0;\n    transition: all 200ms;\n    transform: translateY(-6px);\n  }\n`;\n\nexport { Wrap, Dropdown, Container };\n"],"names":["BasicContainer"],"mappings":";;;;;AAMA,MAAM,SAAS,GAAG,MAAM,CAACA,aAAc,CAAC;AAOxC,MAAM,IAAI,GAAG,MAAM,CAACA,aAAc,CAAC;AAQnC,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGzB,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA,CAAA,EAE3B,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,cAAc,GAAG,WAAW,CAAC;;;;"}

package/dist/components/Dropdown/styled.cjs

@@ -1,15 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var framerMotion = require('framer-motion');
-var index = require('../../theme/index.cjs');
-var Card = require('../Card/Card.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const DropdownContainer = styled__default.default(framerMotion.motion(Card.Card.Surface)).withConfig({ displayName: "vui--DropdownContainer", componentId: "vui--1yrw4mw" }) `display:inline-flex;flex-direction:column;overflow:hidden;background-color:white;box-shadow:${index.theme.shadows.md};border-radius:${index.theme.radius.base};padding:${index.theme.sizes.base};`;
-
-exports.DropdownContainer = DropdownContainer;
-//# sourceMappingURL=styled.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Dropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../theme';\nimport { Card } from '../Card';\n\nexport const DropdownContainer = styled(motion(Card.Surface))`\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  background-color: white;\n  box-shadow: ${theme.shadows.md};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":["styled","motion","Card","theme"],"mappings":";;;;;;;;;;;AAMO,MAAM,iBAAiB,GAAGA,uBAAM,CAACC,mBAAM,CAACC,SAAI,CAAC,OAAO,CAAC,CAAC,mLAM7CC,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACbA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,SAAA,EACvBA,WAAK,CAAC,KAAK,CAAC,IAAI;;;;"}

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

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-export declare const DropdownContainer: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-}>, any, {}, never>;

package/dist/components/Dropdown/styled.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-import { motion } from 'framer-motion';
-import { theme } from '../../theme/index.js';
-import { Card } from '../Card/Card.js';
-
-const DropdownContainer = styled(motion(Card.Surface)).withConfig({ displayName: "vui--DropdownContainer", componentId: "vui--1yrw4mw" }) `display:inline-flex;flex-direction:column;overflow:hidden;background-color:white;box-shadow:${theme.shadows.md};border-radius:${theme.radius.base};padding:${theme.sizes.base};`;
-
-export { DropdownContainer };
-//# sourceMappingURL=styled.js.map