@veeqo/ui 14.9.0-beta-2 → 14.9.0

package/dist/components/Accordion/Accordion.cjs

@@ -2,12 +2,10 @@
 
 var React = require('react');
 var framerMotion = require('framer-motion');
-var Text = require('../Text/Text.cjs');
+var styled = require('./styled.cjs');
 var colors = require('../../theme/modules/colors.cjs');
 var UpArrowIcon = require('../../icons/design-system/components/UpArrowIcon.cjs');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-var assignCssVars = require('../../utils/assignCssVars.cjs');
-var Accordion_module = require('./Accordion.module.scss.cjs');
+var Text = require('../Text/Text.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -22,35 +20,34 @@ const Accordion = ({ className, children, label, iconSlot, glyphColor = colors.c
         animate: { opacity: 1 },
         transition: { from: 0, type: 'tween', duration: timeout / 1000 },
     };
-    const leftStyle = assignCssVars.assignCssVars({ glyphColor });
     if (variant === 'unstyled') {
-        return (React__default.default.createElement("details", { open: !!shouldOpenOnMount, className: buildClassnames.buildClassnames([Accordion_module.details, className]) },
-            React__default.default.createElement("summary", { className: Accordion_module.unstyledSummary, onClick: handleOpen },
-                React__default.default.createElement("div", { className: Accordion_module.top },
-                    React__default.default.createElement("div", { className: Accordion_module.left, style: leftStyle },
+        return (React__default.default.createElement(styled.AccordionDetails, { open: !!shouldOpenOnMount, className: className },
+            React__default.default.createElement(styled.UnstyledAccordionSummary, { onClick: handleOpen },
+                React__default.default.createElement(styled.Top, null,
+                    React__default.default.createElement(styled.Left, { glyphColor: glyphColor },
                         iconSlot,
                         React__default.default.createElement(Text.Text, { variant: summaryTextVariant }, label)),
-                    React__default.default.createElement("div", { className: Accordion_module.right },
+                    React__default.default.createElement(styled.Right, null,
                         React__default.default.createElement(framerMotion.motion.span, { animate: {
                                 rotate: shouldOpen ? 0 : 180,
                             }, initial: { rotate: 180 } },
                             React__default.default.createElement(UpArrowIcon.ReactComponent, { name: shouldOpen ? 'downArrow' : 'upArrow' })))),
-                !!description && React__default.default.createElement(Text.Text, { variant: "hintText", className: Accordion_module.description }, description)),
-            shouldOpen && (React__default.default.createElement(framerMotion.motion.div, { className: Accordion_module.unstyledContent, ...FRAMER_MOTION_CONFIG }, children))));
+                !!description && React__default.default.createElement(styled.Description, { variant: "hintText" }, description)),
+            shouldOpen && (React__default.default.createElement(styled.UnstyledAccordionContent, { ...FRAMER_MOTION_CONFIG }, children))));
     }
-    return (React__default.default.createElement("details", { open: !!shouldOpenOnMount, className: buildClassnames.buildClassnames([Accordion_module.details, className]) },
-        React__default.default.createElement("summary", { className: Accordion_module.summary, onClick: handleOpen },
-            React__default.default.createElement("div", { className: Accordion_module.top },
-                React__default.default.createElement("div", { className: Accordion_module.left, style: leftStyle },
+    return (React__default.default.createElement(styled.AccordionDetails, { open: !!shouldOpenOnMount, className: className },
+        React__default.default.createElement(styled.AccordionSummary, { onClick: handleOpen },
+            React__default.default.createElement(styled.Top, null,
+                React__default.default.createElement(styled.Left, { glyphColor: glyphColor },
                     iconSlot,
                     React__default.default.createElement(Text.Text, { variant: summaryTextVariant }, label)),
-                React__default.default.createElement("div", { className: Accordion_module.right },
+                React__default.default.createElement(styled.Right, null,
                     React__default.default.createElement(framerMotion.motion.span, { animate: {
                             rotate: shouldOpen ? 0 : 180,
                         }, initial: { rotate: 180 } },
                         React__default.default.createElement(UpArrowIcon.ReactComponent, { name: shouldOpen ? 'downArrow' : 'upArrow' })))),
-            !!description && React__default.default.createElement(Text.Text, { variant: "hintText", className: Accordion_module.description }, description)),
-        shouldOpen && React__default.default.createElement(framerMotion.motion.div, { className: Accordion_module.content, ...FRAMER_MOTION_CONFIG }, children)));
+            !!description && React__default.default.createElement(styled.Description, { variant: "hintText" }, description)),
+        shouldOpen && React__default.default.createElement(styled.AccordionContent, { ...FRAMER_MOTION_CONFIG }, children)));
 };
 
 exports.Accordion = Accordion;

package/dist/components/Accordion/Accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.cjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\n\nimport { motion } from 'framer-motion';\nimport { Text } from '../Text';\nimport { colors } from '../../theme/modules/colors';\nimport { UpArrowIcon } from '../../icons';\nimport { AccordionProps } from './types';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport styles from './Accordion.module.scss';\n\nexport const Accordion: FC<AccordionProps> = ({\n  className,\n  children,\n  label,\n  iconSlot,\n  glyphColor = colors.neutral.ink.lightest,\n  timeout = 350,\n  description,\n  shouldOpenOnMount,\n  variant = 'default',\n  summaryTextVariant = 'body',\n}: AccordionProps) => {\n  const [shouldOpen, setShouldOpen] = useState(!!shouldOpenOnMount);\n  const handleOpen = () => setShouldOpen(!shouldOpen);\n\n  const FRAMER_MOTION_CONFIG = {\n    initial: { opacity: 0 },\n    exit: { opacity: 0 },\n    animate: { opacity: 1 },\n    transition: { from: 0, type: 'tween', duration: timeout / 1000 },\n  };\n\n  const leftStyle = assignCssVars({ glyphColor });\n\n  if (variant === 'unstyled') {\n    return (\n      <details open={!!shouldOpenOnMount} className={buildClassnames([styles.details, className])}>\n        <summary className={styles.unstyledSummary} onClick={handleOpen}>\n          <div className={styles.top}>\n            <div className={styles.left} style={leftStyle}>\n              {iconSlot}\n              <Text variant={summaryTextVariant}>{label}</Text>\n            </div>\n            <div className={styles.right}>\n              <motion.span\n                animate={{\n                  rotate: shouldOpen ? 0 : 180,\n                }}\n                initial={{ rotate: 180 }}\n              >\n                <UpArrowIcon name={shouldOpen ? 'downArrow' : 'upArrow'} />\n              </motion.span>\n            </div>\n          </div>\n          {!!description && <Text variant=\"hintText\" className={styles.description}>{description}</Text>}\n        </summary>\n        {shouldOpen && (\n          <motion.div className={styles.unstyledContent} {...FRAMER_MOTION_CONFIG}>{children}</motion.div>\n        )}\n      </details>\n    );\n  }\n\n  return (\n    <details open={!!shouldOpenOnMount} className={buildClassnames([styles.details, className])}>\n      <summary className={styles.summary} onClick={handleOpen}>\n        <div className={styles.top}>\n          <div className={styles.left} style={leftStyle}>\n            {iconSlot}\n            <Text variant={summaryTextVariant}>{label}</Text>\n          </div>\n          <div className={styles.right}>\n            <motion.span\n              animate={{\n                rotate: shouldOpen ? 0 : 180,\n              }}\n              initial={{ rotate: 180 }}\n            >\n              <UpArrowIcon name={shouldOpen ? 'downArrow' : 'upArrow'} />\n            </motion.span>\n          </div>\n        </div>\n        {!!description && <Text variant=\"hintText\" className={styles.description}>{description}</Text>}\n      </summary>\n      {shouldOpen && <motion.div className={styles.content} {...FRAMER_MOTION_CONFIG}>{children}</motion.div>}\n    </details>\n  );\n};\n"],"names":["colors","useState","assignCssVars","React","buildClassnames","styles","Text","motion","UpArrowIcon"],"mappings":"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"}
+{"version":3,"file":"Accordion.cjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\n\nimport { motion } from 'framer-motion';\nimport {\n  Top,\n  Text,\n  Left,\n  Right,\n  Description,\n  AccordionDetails,\n  AccordionContent,\n  AccordionSummary,\n  UnstyledAccordionSummary,\n  UnstyledAccordionContent,\n} from './styled';\nimport { colors } from '../../theme/modules/colors';\nimport { UpArrowIcon } from '../../icons';\nimport { AccordionProps } from './types';\n\nexport const Accordion: FC<AccordionProps> = ({\n  className,\n  children,\n  label,\n  iconSlot,\n  glyphColor = colors.neutral.ink.lightest,\n  timeout = 350,\n  description,\n  shouldOpenOnMount,\n  variant = 'default',\n  summaryTextVariant = 'body',\n}: AccordionProps) => {\n  const [shouldOpen, setShouldOpen] = useState(!!shouldOpenOnMount);\n  const handleOpen = () => setShouldOpen(!shouldOpen);\n\n  const FRAMER_MOTION_CONFIG = {\n    initial: { opacity: 0 },\n    exit: { opacity: 0 },\n    animate: { opacity: 1 },\n    transition: { from: 0, type: 'tween', duration: timeout / 1000 },\n  };\n\n  if (variant === 'unstyled') {\n    return (\n      <AccordionDetails open={!!shouldOpenOnMount} className={className}>\n        <UnstyledAccordionSummary onClick={handleOpen}>\n          <Top>\n            <Left glyphColor={glyphColor}>\n              {iconSlot}\n              <Text variant={summaryTextVariant}>{label}</Text>\n            </Left>\n            <Right>\n              <motion.span\n                animate={{\n                  rotate: shouldOpen ? 0 : 180,\n                }}\n                initial={{ rotate: 180 }}\n              >\n                <UpArrowIcon name={shouldOpen ? 'downArrow' : 'upArrow'} />\n              </motion.span>\n            </Right>\n          </Top>\n          {!!description && <Description variant=\"hintText\">{description}</Description>}\n        </UnstyledAccordionSummary>\n        {shouldOpen && (\n          <UnstyledAccordionContent {...FRAMER_MOTION_CONFIG}>{children}</UnstyledAccordionContent>\n        )}\n      </AccordionDetails>\n    );\n  }\n\n  return (\n    <AccordionDetails open={!!shouldOpenOnMount} className={className}>\n      <AccordionSummary onClick={handleOpen}>\n        <Top>\n          <Left glyphColor={glyphColor}>\n            {iconSlot}\n            <Text variant={summaryTextVariant}>{label}</Text>\n          </Left>\n          <Right>\n            <motion.span\n              animate={{\n                rotate: shouldOpen ? 0 : 180,\n              }}\n              initial={{ rotate: 180 }}\n            >\n              <UpArrowIcon name={shouldOpen ? 'downArrow' : 'upArrow'} />\n            </motion.span>\n          </Right>\n        </Top>\n        {!!description && <Description variant=\"hintText\">{description}</Description>}\n      </AccordionSummary>\n      {shouldOpen && <AccordionContent {...FRAMER_MOTION_CONFIG}>{children}</AccordionContent>}\n    </AccordionDetails>\n  );\n};\n"],"names":["colors","useState","React","AccordionDetails","UnstyledAccordionSummary","Top","Left","Text","Right","motion","UpArrowIcon","Description","UnstyledAccordionContent","AccordionSummary","AccordionContent"],"mappings":"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"}

package/dist/components/Accordion/Accordion.js

@@ -1,11 +1,9 @@
 import React__default, { useState } from 'react';
 import { motion } from 'framer-motion';
-import { Text } from '../Text/Text.js';
+import { AccordionDetails, UnstyledAccordionSummary, Top, Left, Right, Description, UnstyledAccordionContent, AccordionSummary, AccordionContent } from './styled.js';
 import { colors } from '../../theme/modules/colors.js';
 import { ReactComponent as UpArrowIcon } from '../../icons/design-system/components/UpArrowIcon.js';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import { assignCssVars } from '../../utils/assignCssVars.js';
-import styles from './Accordion.module.scss.js';
+import { Text } from '../Text/Text.js';
 
 const Accordion = ({ className, children, label, iconSlot, glyphColor = colors.neutral.ink.lightest, timeout = 350, description, shouldOpenOnMount, variant = 'default', summaryTextVariant = 'body', }) => {
     const [shouldOpen, setShouldOpen] = useState(!!shouldOpenOnMount);
@@ -16,35 +14,34 @@ const Accordion = ({ className, children, label, iconSlot, glyphColor = colors.n
         animate: { opacity: 1 },
         transition: { from: 0, type: 'tween', duration: timeout / 1000 },
     };
-    const leftStyle = assignCssVars({ glyphColor });
     if (variant === 'unstyled') {
-        return (React__default.createElement("details", { open: !!shouldOpenOnMount, className: buildClassnames([styles.details, className]) },
-            React__default.createElement("summary", { className: styles.unstyledSummary, onClick: handleOpen },
-                React__default.createElement("div", { className: styles.top },
-                    React__default.createElement("div", { className: styles.left, style: leftStyle },
+        return (React__default.createElement(AccordionDetails, { open: !!shouldOpenOnMount, className: className },
+            React__default.createElement(UnstyledAccordionSummary, { onClick: handleOpen },
+                React__default.createElement(Top, null,
+                    React__default.createElement(Left, { glyphColor: glyphColor },
                         iconSlot,
                         React__default.createElement(Text, { variant: summaryTextVariant }, label)),
-                    React__default.createElement("div", { className: styles.right },
+                    React__default.createElement(Right, null,
                         React__default.createElement(motion.span, { animate: {
                                 rotate: shouldOpen ? 0 : 180,
                             }, initial: { rotate: 180 } },
                             React__default.createElement(UpArrowIcon, { name: shouldOpen ? 'downArrow' : 'upArrow' })))),
-                !!description && React__default.createElement(Text, { variant: "hintText", className: styles.description }, description)),
-            shouldOpen && (React__default.createElement(motion.div, { className: styles.unstyledContent, ...FRAMER_MOTION_CONFIG }, children))));
+                !!description && React__default.createElement(Description, { variant: "hintText" }, description)),
+            shouldOpen && (React__default.createElement(UnstyledAccordionContent, { ...FRAMER_MOTION_CONFIG }, children))));
     }
-    return (React__default.createElement("details", { open: !!shouldOpenOnMount, className: buildClassnames([styles.details, className]) },
-        React__default.createElement("summary", { className: styles.summary, onClick: handleOpen },
-            React__default.createElement("div", { className: styles.top },
-                React__default.createElement("div", { className: styles.left, style: leftStyle },
+    return (React__default.createElement(AccordionDetails, { open: !!shouldOpenOnMount, className: className },
+        React__default.createElement(AccordionSummary, { onClick: handleOpen },
+            React__default.createElement(Top, null,
+                React__default.createElement(Left, { glyphColor: glyphColor },
                     iconSlot,
                     React__default.createElement(Text, { variant: summaryTextVariant }, label)),
-                React__default.createElement("div", { className: styles.right },
+                React__default.createElement(Right, null,
                     React__default.createElement(motion.span, { animate: {
                             rotate: shouldOpen ? 0 : 180,
                         }, initial: { rotate: 180 } },
                         React__default.createElement(UpArrowIcon, { name: shouldOpen ? 'downArrow' : 'upArrow' })))),
-            !!description && React__default.createElement(Text, { variant: "hintText", className: styles.description }, description)),
-        shouldOpen && React__default.createElement(motion.div, { className: styles.content, ...FRAMER_MOTION_CONFIG }, children)));
+            !!description && React__default.createElement(Description, { variant: "hintText" }, description)),
+        shouldOpen && React__default.createElement(AccordionContent, { ...FRAMER_MOTION_CONFIG }, children)));
 };
 
 export { Accordion };

package/dist/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\n\nimport { motion } from 'framer-motion';\nimport { Text } from '../Text';\nimport { colors } from '../../theme/modules/colors';\nimport { UpArrowIcon } from '../../icons';\nimport { AccordionProps } from './types';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport styles from './Accordion.module.scss';\n\nexport const Accordion: FC<AccordionProps> = ({\n  className,\n  children,\n  label,\n  iconSlot,\n  glyphColor = colors.neutral.ink.lightest,\n  timeout = 350,\n  description,\n  shouldOpenOnMount,\n  variant = 'default',\n  summaryTextVariant = 'body',\n}: AccordionProps) => {\n  const [shouldOpen, setShouldOpen] = useState(!!shouldOpenOnMount);\n  const handleOpen = () => setShouldOpen(!shouldOpen);\n\n  const FRAMER_MOTION_CONFIG = {\n    initial: { opacity: 0 },\n    exit: { opacity: 0 },\n    animate: { opacity: 1 },\n    transition: { from: 0, type: 'tween', duration: timeout / 1000 },\n  };\n\n  const leftStyle = assignCssVars({ glyphColor });\n\n  if (variant === 'unstyled') {\n    return (\n      <details open={!!shouldOpenOnMount} className={buildClassnames([styles.details, className])}>\n        <summary className={styles.unstyledSummary} onClick={handleOpen}>\n          <div className={styles.top}>\n            <div className={styles.left} style={leftStyle}>\n              {iconSlot}\n              <Text variant={summaryTextVariant}>{label}</Text>\n            </div>\n            <div className={styles.right}>\n              <motion.span\n                animate={{\n                  rotate: shouldOpen ? 0 : 180,\n                }}\n                initial={{ rotate: 180 }}\n              >\n                <UpArrowIcon name={shouldOpen ? 'downArrow' : 'upArrow'} />\n              </motion.span>\n            </div>\n          </div>\n          {!!description && <Text variant=\"hintText\" className={styles.description}>{description}</Text>}\n        </summary>\n        {shouldOpen && (\n          <motion.div className={styles.unstyledContent} {...FRAMER_MOTION_CONFIG}>{children}</motion.div>\n        )}\n      </details>\n    );\n  }\n\n  return (\n    <details open={!!shouldOpenOnMount} className={buildClassnames([styles.details, className])}>\n      <summary className={styles.summary} onClick={handleOpen}>\n        <div className={styles.top}>\n          <div className={styles.left} style={leftStyle}>\n            {iconSlot}\n            <Text variant={summaryTextVariant}>{label}</Text>\n          </div>\n          <div className={styles.right}>\n            <motion.span\n              animate={{\n                rotate: shouldOpen ? 0 : 180,\n              }}\n              initial={{ rotate: 180 }}\n            >\n              <UpArrowIcon name={shouldOpen ? 'downArrow' : 'upArrow'} />\n            </motion.span>\n          </div>\n        </div>\n        {!!description && <Text variant=\"hintText\" className={styles.description}>{description}</Text>}\n      </summary>\n      {shouldOpen && <motion.div className={styles.content} {...FRAMER_MOTION_CONFIG}>{children}</motion.div>}\n    </details>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\n\nimport { motion } from 'framer-motion';\nimport {\n  Top,\n  Text,\n  Left,\n  Right,\n  Description,\n  AccordionDetails,\n  AccordionContent,\n  AccordionSummary,\n  UnstyledAccordionSummary,\n  UnstyledAccordionContent,\n} from './styled';\nimport { colors } from '../../theme/modules/colors';\nimport { UpArrowIcon } from '../../icons';\nimport { AccordionProps } from './types';\n\nexport const Accordion: FC<AccordionProps> = ({\n  className,\n  children,\n  label,\n  iconSlot,\n  glyphColor = colors.neutral.ink.lightest,\n  timeout = 350,\n  description,\n  shouldOpenOnMount,\n  variant = 'default',\n  summaryTextVariant = 'body',\n}: AccordionProps) => {\n  const [shouldOpen, setShouldOpen] = useState(!!shouldOpenOnMount);\n  const handleOpen = () => setShouldOpen(!shouldOpen);\n\n  const FRAMER_MOTION_CONFIG = {\n    initial: { opacity: 0 },\n    exit: { opacity: 0 },\n    animate: { opacity: 1 },\n    transition: { from: 0, type: 'tween', duration: timeout / 1000 },\n  };\n\n  if (variant === 'unstyled') {\n    return (\n      <AccordionDetails open={!!shouldOpenOnMount} className={className}>\n        <UnstyledAccordionSummary onClick={handleOpen}>\n          <Top>\n            <Left glyphColor={glyphColor}>\n              {iconSlot}\n              <Text variant={summaryTextVariant}>{label}</Text>\n            </Left>\n            <Right>\n              <motion.span\n                animate={{\n                  rotate: shouldOpen ? 0 : 180,\n                }}\n                initial={{ rotate: 180 }}\n              >\n                <UpArrowIcon name={shouldOpen ? 'downArrow' : 'upArrow'} />\n              </motion.span>\n            </Right>\n          </Top>\n          {!!description && <Description variant=\"hintText\">{description}</Description>}\n        </UnstyledAccordionSummary>\n        {shouldOpen && (\n          <UnstyledAccordionContent {...FRAMER_MOTION_CONFIG}>{children}</UnstyledAccordionContent>\n        )}\n      </AccordionDetails>\n    );\n  }\n\n  return (\n    <AccordionDetails open={!!shouldOpenOnMount} className={className}>\n      <AccordionSummary onClick={handleOpen}>\n        <Top>\n          <Left glyphColor={glyphColor}>\n            {iconSlot}\n            <Text variant={summaryTextVariant}>{label}</Text>\n          </Left>\n          <Right>\n            <motion.span\n              animate={{\n                rotate: shouldOpen ? 0 : 180,\n              }}\n              initial={{ rotate: 180 }}\n            >\n              <UpArrowIcon name={shouldOpen ? 'downArrow' : 'upArrow'} />\n            </motion.span>\n          </Right>\n        </Top>\n        {!!description && <Description variant=\"hintText\">{description}</Description>}\n      </AccordionSummary>\n      {shouldOpen && <AccordionContent {...FRAMER_MOTION_CONFIG}>{children}</AccordionContent>}\n    </AccordionDetails>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAmBO,MAAM,SAAS,GAAuB,CAAC,EAC5C,SAAS,EACT,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EACxC,OAAO,GAAG,GAAG,EACb,WAAW,EACX,iBAAiB,EACjB,OAAO,GAAG,SAAS,EACnB,kBAAkB,GAAG,MAAM,GACZ,KAAI;AACnB,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC;IACjE,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC,CAAC,UAAU,CAAC;AAEnD,IAAA,MAAM,oBAAoB,GAAG;AAC3B,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACpB,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,QAAA,UAAU,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,EAAE;KACjE;IAED,IAAI,OAAO,KAAK,UAAU,EAAE;AAC1B,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EAAC,IAAI,EAAE,CAAC,CAAC,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAA;AAC/D,YAAAA,cAAA,CAAA,aAAA,CAAC,wBAAwB,EAAA,EAAC,OAAO,EAAE,UAAU,EAAA;AAC3C,gBAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA;AACF,oBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,UAAU,EAAE,UAAU,EAAA;wBACzB,QAAQ;wBACTA,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,OAAO,EAAE,kBAAkB,EAAA,EAAG,KAAK,CAAQ,CAC5C;AACP,oBAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,IAAA;AACJ,wBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,CAAC,IAAI,EAAA,EACV,OAAO,EAAE;gCACP,MAAM,EAAE,UAAU,GAAG,CAAC,GAAG,GAAG;AAC7B,6BAAA,EACD,OAAO,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,EAAA;AAExB,4BAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,UAAU,GAAG,WAAW,GAAG,SAAS,EAAA,CAAI,CAC/C,CACR,CACJ;AACL,gBAAA,CAAC,CAAC,WAAW,IAAIA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,OAAO,EAAC,UAAU,EAAA,EAAE,WAAW,CAAe,CACpD;AAC1B,YAAA,UAAU,KACTA,cAAA,CAAA,aAAA,CAAC,wBAAwB,EAAA,EAAA,GAAK,oBAAoB,EAAA,EAAG,QAAQ,CAA4B,CAC1F,CACgB;AAEtB,IAAA;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EAAC,IAAI,EAAE,CAAC,CAAC,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAA;AAC/D,QAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EAAC,OAAO,EAAE,UAAU,EAAA;AACnC,YAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA;AACF,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,UAAU,EAAE,UAAU,EAAA;oBACzB,QAAQ;oBACTA,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,OAAO,EAAE,kBAAkB,EAAA,EAAG,KAAK,CAAQ,CAC5C;AACP,gBAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,IAAA;AACJ,oBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,CAAC,IAAI,EAAA,EACV,OAAO,EAAE;4BACP,MAAM,EAAE,UAAU,GAAG,CAAC,GAAG,GAAG;AAC7B,yBAAA,EACD,OAAO,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,EAAA;AAExB,wBAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,UAAU,GAAG,WAAW,GAAG,SAAS,EAAA,CAAI,CAC/C,CACR,CACJ;AACL,YAAA,CAAC,CAAC,WAAW,IAAIA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,OAAO,EAAC,UAAU,EAAA,EAAE,WAAW,CAAe,CAC5D;QAClB,UAAU,IAAIA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EAAA,GAAK,oBAAoB,IAAG,QAAQ,CAAoB,CACvE;AAEvB;;;;"}

package/dist/components/Accordion/styled.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+var styled = require('styled-components');
+var framerMotion = require('framer-motion');
+var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var Text = require('../Text/Text.cjs');
+var index = require('../../theme/index.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const TapBarChild = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--TapBarChild", componentId: "vui--3ngcs3" }) `display:flex;flex-direction:row;align-items:center;`;
+const Left = styled__default.default(TapBarChild).withConfig({
+    shouldForwardProp: (prop) => !['glyphColor'].includes(prop),
+}) `
+  svg {
+    margin-right: 12px;
+    height: ${sizes.sizes.base};
+    width: ${sizes.sizes.base};
+
+    color: ${({ glyphColor }) => glyphColor};
+  }
+`;
+const Right = styled__default.default(TapBarChild).withConfig({ displayName: "vui--Right", componentId: "vui--1az9xn4" }) `justify-content:flex-end;flex-grow:2;`;
+/**
+ * Due to unique behaviour observed in Safari, we override the outline property when
+ * the accordion is focussed.
+ */
+const AccordionSummary = styled__default.default.summary.withConfig({ displayName: "vui--AccordionSummary", componentId: "vui--1cj5wqc" }) `display:flex;flex-direction:column;padding:12px;border-radius:4px;user-select:none;cursor:pointer;border:1px solid ${index.theme.colors.neutral.grey.dark};:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}:active{box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
+const Top = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Top", componentId: "vui--mks526" }) `display:flex;flex-direction:row;align-items:center;height:16px;`;
+const Description = styled__default.default(Text.Text).withConfig({ displayName: "vui--Description", componentId: "vui--z9vlxj" }) `margin-top:8px;`;
+const AccordionContent = styled__default.default(framerMotion.motion(BaseContainer.BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--a80u9i" }) `margin-top:4px;background:rgba(217, 235, 248, 0.5);padding:10px 26px;`;
+const AccordionDetails = styled__default.default.details.withConfig({ displayName: "vui--AccordionDetails", componentId: "vui--pwcrkp" }) `summary{list-style-type:none;::-webkit-details-marker{display:none;}}`;
+const UnstyledAccordionContent = styled__default.default(framerMotion.motion(BaseContainer.BaseContainer)).withConfig({ displayName: "vui--UnstyledAccordionContent", componentId: "vui--qyx6g0" }) ``;
+const UnstyledAccordionSummary = styled__default.default.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--mkwb1n" }) `&:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
+
+exports.Text = Text.Text;
+exports.AccordionContent = AccordionContent;
+exports.AccordionDetails = AccordionDetails;
+exports.AccordionSummary = AccordionSummary;
+exports.Description = Description;
+exports.Left = Left;
+exports.Right = Right;
+exports.Top = Top;
+exports.UnstyledAccordionContent = UnstyledAccordionContent;
+exports.UnstyledAccordionSummary = UnstyledAccordionSummary;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst Left = styled(TapBarChild).withConfig({\n  shouldForwardProp: (prop) => !['glyphColor'].includes(prop),\n})<{ glyphColor: string }>`\n  svg {\n    margin-right: 12px;\n    height: ${sizes.base};\n    width: ${sizes.base};\n\n    color: ${({ glyphColor }) => glyphColor};\n  }\n`;\n\nconst Right = styled(TapBarChild as any)`\n  justify-content: flex-end;\n  flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  border-radius: 4px;\n  user-select: none;\n  cursor: pointer;\n\n  border: 1px solid ${theme.colors.neutral.grey.dark};\n\n  :focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n\n  :active {\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst Top = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 16px;\n`;\n\nconst Description = styled(Text)`\n  margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n  margin-top: 4px;\n  background: rgba(217, 235, 248, 0.5);\n  padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n  summary {\n    list-style-type: none;\n    ::-webkit-details-marker {\n      display: none;\n    }\n  }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nexport {\n  AccordionSummary,\n  Top,\n  Text,\n  Left,\n  Right,\n  Description,\n  AccordionDetails,\n  AccordionContent,\n  UnstyledAccordionContent,\n  UnstyledAccordionSummary,\n};\n"],"names":["styled","BaseContainer","sizes","theme","Text","motion"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,WAAW,GAAGA,uBAAM,CAACC,2BAAa,CAAC,kIAIxC;AAED,MAAM,IAAI,GAAGD,uBAAM,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC;AAC1C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5D,CAAA,CAAC,CAAwB;;;AAGZ,YAAA,EAAAE,WAAK,CAAC,IAAI,CAAA;AACX,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAA;;AAEV,WAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU,CAAA;;;AAI3C,MAAM,KAAK,GAAGF,uBAAM,CAAC,WAAkB,CAAC;AAKxC;;;AAGG;AACH,MAAM,gBAAgB,GAAGA,uBAAM,CAAC,OAAO,yMAQjBG,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,6CAIxBA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,kCAIjCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,GAAG,GAAGH,uBAAM,CAACC,2BAAa,CAAC;AAOjC,MAAM,WAAW,GAAGD,uBAAM,CAACI,SAAI,CAAC;AAIhC,MAAM,gBAAgB,GAAGJ,uBAAM,CAACK,mBAAM,CAACJ,2BAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qEAAA;AAMtD,MAAM,gBAAgB,GAAGD,uBAAM,CAAC,OAAO;AASvC,MAAM,wBAAwB,GAAGA,uBAAM,CAACK,mBAAM,CAACJ,2BAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;AAE9D,MAAM,wBAAwB,GAAGD,uBAAM,CAAC,OAAO,uIAGnBG,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;;;;;;;;;;"}

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { Text } from '../Text';
+declare const Left: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
+    glyphColor: string;
+}, never>;
+declare const Right: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+/**
+ * Due to unique behaviour observed in Safari, we override the outline property when
+ * the accordion is focussed.
+ */
+declare const AccordionSummary: import("styled-components").StyledComponent<"summary", any, {}, never>;
+declare const Top: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+declare const Description: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    /**
+     * Due to unique behaviour observed in Safari, we override the outline property when
+     * the accordion is focussed.
+     */
+    as?: import("../Text").ValidTextTag | undefined;
+    muted?: boolean | undefined;
+    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
+} & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+declare const AccordionContent: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+declare const AccordionDetails: import("styled-components").StyledComponent<"details", any, {}, never>;
+declare const UnstyledAccordionContent: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+declare const UnstyledAccordionSummary: import("styled-components").StyledComponent<"summary", any, {}, never>;
+export { AccordionSummary, Top, Text, Left, Right, Description, AccordionDetails, AccordionContent, UnstyledAccordionContent, UnstyledAccordionSummary, };

package/dist/components/Accordion/styled.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import { Text } from '../Text/Text.js';
+import { theme } from '../../theme/index.js';
+import { sizes } from '../../theme/modules/sizes.js';
+
+const TapBarChild = styled(BaseContainer).withConfig({ displayName: "vui--TapBarChild", componentId: "vui--3ngcs3" }) `display:flex;flex-direction:row;align-items:center;`;
+const Left = styled(TapBarChild).withConfig({
+    shouldForwardProp: (prop) => !['glyphColor'].includes(prop),
+}) `
+  svg {
+    margin-right: 12px;
+    height: ${sizes.base};
+    width: ${sizes.base};
+
+    color: ${({ glyphColor }) => glyphColor};
+  }
+`;
+const Right = styled(TapBarChild).withConfig({ displayName: "vui--Right", componentId: "vui--1az9xn4" }) `justify-content:flex-end;flex-grow:2;`;
+/**
+ * Due to unique behaviour observed in Safari, we override the outline property when
+ * the accordion is focussed.
+ */
+const AccordionSummary = styled.summary.withConfig({ displayName: "vui--AccordionSummary", componentId: "vui--1cj5wqc" }) `display:flex;flex-direction:column;padding:12px;border-radius:4px;user-select:none;cursor:pointer;border:1px solid ${theme.colors.neutral.grey.dark};:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}:active{box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
+const Top = styled(BaseContainer).withConfig({ displayName: "vui--Top", componentId: "vui--mks526" }) `display:flex;flex-direction:row;align-items:center;height:16px;`;
+const Description = styled(Text).withConfig({ displayName: "vui--Description", componentId: "vui--z9vlxj" }) `margin-top:8px;`;
+const AccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--a80u9i" }) `margin-top:4px;background:rgba(217, 235, 248, 0.5);padding:10px 26px;`;
+const AccordionDetails = styled.details.withConfig({ displayName: "vui--AccordionDetails", componentId: "vui--pwcrkp" }) `summary{list-style-type:none;::-webkit-details-marker{display:none;}}`;
+const UnstyledAccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--UnstyledAccordionContent", componentId: "vui--qyx6g0" }) ``;
+const UnstyledAccordionSummary = styled.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--mkwb1n" }) `&:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
+
+export { AccordionContent, AccordionDetails, AccordionSummary, Description, Left, Right, Text, Top, UnstyledAccordionContent, UnstyledAccordionSummary };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst Left = styled(TapBarChild).withConfig({\n  shouldForwardProp: (prop) => !['glyphColor'].includes(prop),\n})<{ glyphColor: string }>`\n  svg {\n    margin-right: 12px;\n    height: ${sizes.base};\n    width: ${sizes.base};\n\n    color: ${({ glyphColor }) => glyphColor};\n  }\n`;\n\nconst Right = styled(TapBarChild as any)`\n  justify-content: flex-end;\n  flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  border-radius: 4px;\n  user-select: none;\n  cursor: pointer;\n\n  border: 1px solid ${theme.colors.neutral.grey.dark};\n\n  :focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n\n  :active {\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst Top = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 16px;\n`;\n\nconst Description = styled(Text)`\n  margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n  margin-top: 4px;\n  background: rgba(217, 235, 248, 0.5);\n  padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n  summary {\n    list-style-type: none;\n    ::-webkit-details-marker {\n      display: none;\n    }\n  }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nexport {\n  AccordionSummary,\n  Top,\n  Text,\n  Left,\n  Right,\n  Description,\n  AccordionDetails,\n  AccordionContent,\n  UnstyledAccordionContent,\n  UnstyledAccordionSummary,\n};\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,kIAIxC;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC;AAC1C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5D,CAAA,CAAC,CAAwB;;;AAGZ,YAAA,EAAA,KAAK,CAAC,IAAI,CAAA;AACX,WAAA,EAAA,KAAK,CAAC,IAAI,CAAA;;AAEV,WAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU,CAAA;;;AAI3C,MAAM,KAAK,GAAG,MAAM,CAAC,WAAkB,CAAC;AAKxC;;;AAGG;AACH,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,yMAQjB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,6CAIxB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,kCAIjC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAOjC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;AAIhC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qEAAA;AAMtD,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO;AASvC,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;AAE9D,MAAM,wBAAwB,GAAG,MAAM,CAAC,OAAO,uIAGnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;"}

package/dist/components/Action/Action.d.ts

@@ -14,7 +14,7 @@ export declare const ActionBase: React.ForwardRefExoticComponent<(Omit<{
     size?: import("./types").ActionSize | undefined;
     type?: "button" | "submit" | "reset" | undefined;
     variant?: import("./types").ActionVariant | undefined;
-} & Omit<Omit<any, "ref">, "href" | "rel" | "placeholder" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
+} & Omit<Omit<any, "ref">, "href" | "rel" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
     appearance?: import("./types").ActionAppearance | undefined;
     as?: C | undefined;
     children?: React.ReactNode;
@@ -42,7 +42,7 @@ export declare const ActionBase: React.ForwardRefExoticComponent<(Omit<{
     size?: import("./types").ActionSize | undefined;
     type?: "button" | "submit" | "reset" | undefined;
     variant?: import("./types").ActionVariant | undefined;
-} & Omit<Omit<any, "ref">, "href" | "rel" | "placeholder" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
+} & Omit<Omit<any, "ref">, "href" | "rel" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
     appearance?: import("./types").ActionAppearance | undefined;
     as?: C | undefined;
     children?: React.ReactNode;
@@ -69,7 +69,7 @@ export declare const Action: React.ForwardRefExoticComponent<(Omit<Omit<Omit<{
     size?: import("./types").ActionSize | undefined;
     type?: "button" | "submit" | "reset" | undefined;
     variant?: import("./types").ActionVariant | undefined;
-} & Omit<Omit<any, "ref">, "href" | "rel" | "placeholder" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
+} & Omit<Omit<any, "ref">, "href" | "rel" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
     appearance?: import("./types").ActionAppearance | undefined;
     as?: C | undefined;
     children?: React.ReactNode;
@@ -97,7 +97,7 @@ export declare const Action: React.ForwardRefExoticComponent<(Omit<Omit<Omit<{
     size?: import("./types").ActionSize | undefined;
     type?: "button" | "submit" | "reset" | undefined;
     variant?: import("./types").ActionVariant | undefined;
-} & Omit<Omit<any, "ref">, "href" | "rel" | "placeholder" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
+} & Omit<Omit<any, "ref">, "href" | "rel" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
     appearance?: import("./types").ActionAppearance | undefined;
     as?: C | undefined;
     children?: React.ReactNode;

package/dist/components/Card/Card.cjs

@@ -1,11 +1,8 @@
 'use strict';
 
 var React = require('react');
-var framerMotion = require('framer-motion');
 var CardHeader = require('../CardHeader/CardHeader.cjs');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-require('uid/secure');
-var Card_module = require('./Card.module.scss.cjs');
+var styled = require('./styled.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -15,30 +12,6 @@ const collapseAnimationVariants = {
     expanded: { height: 'auto' },
     collapsed: { height: 0 },
 };
-/**
- * Stable class used for styled-components selector interpolation.
- * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,
- * which calls `.toString()` and expects a CSS class selector.
- */
-const SURFACE_STABLE_CLASS = 'veeqo-card-surface';
-const Surface = React__default.default.forwardRef(({ elevation = 1, accent, className, children, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([
-        SURFACE_STABLE_CLASS,
-        Card_module.surface,
-        Card_module[`elevation-${elevation}`],
-        accent ? Card_module[`accent-${accent}`] : undefined,
-        className,
-    ]), ...rest }, children)));
-Surface.displayName = 'Card.Surface';
-Surface.toString = () => `.${SURFACE_STABLE_CLASS}`;
-const Section = React__default.default.forwardRef(({ className, ...rest }, ref) => (React__default.default.createElement("section", { ref: ref, className: buildClassnames.buildClassnames([Card_module.section, className]), ...rest })));
-Section.displayName = 'Card.Section';
-const FullBleed = React__default.default.forwardRef(({ className, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([Card_module.fullBleed, className]), ...rest })));
-FullBleed.displayName = 'Card.FullBleed';
-const FOOTER_STABLE_CLASS = 'veeqo-card-footer';
-const Footer = React__default.default.forwardRef(({ className, ...rest }, ref) => (React__default.default.createElement("footer", { ref: ref, className: buildClassnames.buildClassnames([FOOTER_STABLE_CLASS, Card_module.footer, className]), ...rest })));
-Footer.displayName = 'Card.Footer';
-Footer.toString = () => `.${FOOTER_STABLE_CLASS}`;
-/* --- Main Card component --- */
 const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
     const [isCollapsed, setIsCollapsed] = React.useState(false);
     const toggleCollapsed = () => {
@@ -47,18 +20,18 @@ const Card = ({ className, style, title, subtitle, headerTitleSlot, headerAction
     const showHeader = title || headerTitleSlot !== undefined;
     const headerMarkup = showHeader && (React__default.default.createElement(CardHeader.CardHeader, { title: title, subtitle: subtitle, titleSlot: headerTitleSlot, actionSlot: headerActionSlot, action: action, onClickClose: onClose, isCollapsed: isCollapsed, onClickCollapse: collapsable ? toggleCollapsed : undefined }));
     const showBody = (collapsable && !isCollapsed) || !collapsable;
-    const bodyMarkup = (React__default.default.createElement(framerMotion.motion.div, { className: Card_module.body, animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
-        React__default.default.createElement(Section, null, children)));
-    const footerMarkup = renderFooter !== undefined && React__default.default.createElement(Footer, null, renderFooter());
-    return (React__default.default.createElement(Surface, { className: className, style: style, elevation: elevation, accent: accent },
+    const bodyMarkup = (React__default.default.createElement(styled.Body, { animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
+        React__default.default.createElement(styled.Section, null, children)));
+    const footerMarkup = renderFooter !== undefined && React__default.default.createElement(styled.Footer, null, renderFooter());
+    return (React__default.default.createElement(styled.Surface, { className: className, style: style, elevation: elevation, accent: accent },
         headerMarkup,
         bodyMarkup,
         footerMarkup));
 };
-Card.Surface = Surface;
-Card.Section = Section;
-Card.FullBleed = FullBleed;
-Card.Footer = Footer;
+Card.Surface = styled.Surface;
+Card.Section = styled.Section;
+Card.FullBleed = styled.FullBleed;
+Card.Footer = styled.Footer;
 
 exports.Card = Card;
 //# sourceMappingURL=Card.cjs.map