@veeqo/ui 14.9.0-beta-2 → 14.9.1

package/dist/components/AnimatedDropdown/AnimatedDropdown.js

@@ -1,7 +1,10 @@
 import React__default, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { Container, Wrap, Dropdown } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { BasicDropdown } from './components/BasicDropdown.js';
 import { useClickAway } from './hooks/useClickAway.js';
+import animatedDropdownStyles from './AnimatedDropdown.module.scss.js';
 
 /**
  * @deprecated - Use `Dropdown` component instead.
@@ -9,16 +12,30 @@ import { useClickAway } from './hooks/useClickAway.js';
  */
 const AnimatedDropdown = ({ cta, shouldShowDropdown, children, className = 'animated-dropdown', reversed = false, onClickAway = () => { }, timeout = 350, transitionClassnames = 'dropdown', onClick, onMouseEnter, onMouseLeave, }) => {
     const dropdownRef = useRef(null);
+    const dropdownContentRef = useRef(null);
     useClickAway(dropdownRef, (event) => {
         if (shouldShowDropdown) {
             onClickAway(event);
         }
     });
-    return (React__default.createElement(Container, { className: `${className}-container ${className}`, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: dropdownRef },
+    return (React__default.createElement("div", { className: buildClassnames([
+            animatedDropdownStyles.container,
+            `${className}-container`,
+            className,
+        ]), onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: dropdownRef },
         !reversed && cta,
-        React__default.createElement(Wrap, { className: `${className}-wrap ${className}` },
-            React__default.createElement(CSSTransition, { in: shouldShowDropdown, timeout: timeout, classNames: transitionClassnames, unmountOnExit: true },
-                React__default.createElement(Dropdown, { role: "dialog", reversed: reversed, className: `${className}-basic-dropdown ${className}` }, children))),
+        React__default.createElement("div", { className: buildClassnames([
+                animatedDropdownStyles.wrap,
+                `${className}-wrap`,
+                className,
+            ]) },
+            React__default.createElement(CSSTransition, { in: shouldShowDropdown, timeout: timeout, classNames: transitionClassnames, unmountOnExit: true, nodeRef: dropdownContentRef },
+                React__default.createElement(BasicDropdown, { role: "dialog", ref: dropdownContentRef, className: buildClassnames([
+                        animatedDropdownStyles.dropdown,
+                        reversed && animatedDropdownStyles.reversed,
+                        `${className}-basic-dropdown`,
+                        className,
+                    ]) }, children))),
         reversed && cta));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"AnimatedDropdown.js","sources":["../../../src/components/AnimatedDropdown/AnimatedDropdown.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Wrap, Dropdown, Container } from './styled';\n\nimport { AnimatedDropdownProps } from './types';\nimport { useClickAway } from './hooks/useClickAway';\n\n/**\n * @deprecated - Use `Dropdown` component instead.\n * This component is deprecated and will be removed in future versions.\n */\nexport const AnimatedDropdown = ({\n  cta,\n  shouldShowDropdown,\n  children,\n  className = 'animated-dropdown',\n  reversed = false,\n  onClickAway = () => {},\n  timeout = 350,\n  transitionClassnames = 'dropdown',\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n}: AnimatedDropdownProps) => {\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  useClickAway(dropdownRef, (event: Event) => {\n    if (shouldShowDropdown) {\n      onClickAway(event);\n    }\n  });\n\n  return (\n    <Container\n      className={`${className}-container ${className}`}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      ref={dropdownRef}\n    >\n      {!reversed && cta}\n      <Wrap className={`${className}-wrap ${className}`}>\n        <CSSTransition\n          in={shouldShowDropdown}\n          timeout={timeout}\n          classNames={transitionClassnames}\n          unmountOnExit\n        >\n          <Dropdown\n            role=\"dialog\"\n            reversed={reversed}\n            className={`${className}-basic-dropdown ${className}`}\n          >\n            {children}\n          </Dropdown>\n        </CSSTransition>\n      </Wrap>\n      {reversed && cta}\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAQA;;;AAGG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAC/B,GAAG,EACH,kBAAkB,EAClB,QAAQ,EACR,SAAS,GAAG,mBAAmB,EAC/B,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,MAAK,EAAE,CAAC,EACtB,OAAO,GAAG,GAAG,EACb,oBAAoB,GAAG,UAAU,EACjC,OAAO,EACP,YAAY,EACZ,YAAY,GACU,KAAI;AAC1B,IAAA,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC;AAEhD,IAAA,YAAY,CAAC,WAAW,EAAE,CAAC,KAAY,KAAI;AACzC,QAAA,IAAI,kBAAkB,EAAE;YACtB,WAAW,CAAC,KAAK,CAAC;AACnB,QAAA;AACH,IAAA,CAAC,CAAC;IAEF,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,SAAS,EAAE,CAAA,EAAG,SAAS,CAAA,WAAA,EAAc,SAAS,CAAA,CAAE,EAChD,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,WAAW,EAAA;QAEf,CAAC,QAAQ,IAAI,GAAG;QACjBA,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,SAAS,EAAE,GAAG,SAAS,CAAA,MAAA,EAAS,SAAS,CAAA,CAAE,EAAA;AAC/C,YAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,EAAE,EAAE,kBAAkB,EACtB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,oBAAoB,EAChC,aAAa,EAAA,IAAA,EAAA;gBAEbA,cAAA,CAAA,aAAA,CAAC,QAAQ,IACP,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAA,EAAG,SAAS,CAAA,gBAAA,EAAmB,SAAS,EAAE,EAAA,EAEpD,QAAQ,CACA,CACG,CACX;AACN,QAAA,QAAQ,IAAI,GAAG,CACN;AAEhB;;;;"}
+{"version":3,"file":"AnimatedDropdown.js","sources":["../../../src/components/AnimatedDropdown/AnimatedDropdown.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { buildClassnames } from '../../utils';\nimport { BasicDropdown } from './components/BasicDropdown';\nimport { AnimatedDropdownProps } from './types';\nimport { useClickAway } from './hooks/useClickAway';\nimport animatedDropdownStyles from './AnimatedDropdown.module.scss';\n\n/**\n * @deprecated - Use `Dropdown` component instead.\n * This component is deprecated and will be removed in future versions.\n */\nexport const AnimatedDropdown = ({\n  cta,\n  shouldShowDropdown,\n  children,\n  className = 'animated-dropdown',\n  reversed = false,\n  onClickAway = () => {},\n  timeout = 350,\n  transitionClassnames = 'dropdown',\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n}: AnimatedDropdownProps) => {\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const dropdownContentRef = useRef<HTMLDivElement>(null);\n\n  useClickAway(dropdownRef, (event: Event) => {\n    if (shouldShowDropdown) {\n      onClickAway(event);\n    }\n  });\n\n  return (\n    <div\n      className={buildClassnames([\n        animatedDropdownStyles.container,\n        `${className}-container`,\n        className,\n      ])}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      ref={dropdownRef}\n    >\n      {!reversed && cta}\n      <div\n        className={buildClassnames([\n          animatedDropdownStyles.wrap,\n          `${className}-wrap`,\n          className,\n        ])}\n      >\n        <CSSTransition\n          in={shouldShowDropdown}\n          timeout={timeout}\n          classNames={transitionClassnames}\n          unmountOnExit\n          nodeRef={dropdownContentRef}\n        >\n          <BasicDropdown\n            role=\"dialog\"\n            ref={dropdownContentRef}\n            className={buildClassnames([\n              animatedDropdownStyles.dropdown,\n              reversed && animatedDropdownStyles.reversed,\n              `${className}-basic-dropdown`,\n              className,\n            ])}\n          >\n            {children}\n          </BasicDropdown>\n        </CSSTransition>\n      </div>\n      {reversed && cta}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AASA;;;AAGG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAC/B,GAAG,EACH,kBAAkB,EAClB,QAAQ,EACR,SAAS,GAAG,mBAAmB,EAC/B,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,MAAK,EAAE,CAAC,EACtB,OAAO,GAAG,GAAG,EACb,oBAAoB,GAAG,UAAU,EACjC,OAAO,EACP,YAAY,EACZ,YAAY,GACU,KAAI;AAC1B,IAAA,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC;AAChD,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC;AAEvD,IAAA,YAAY,CAAC,WAAW,EAAE,CAAC,KAAY,KAAI;AACzC,QAAA,IAAI,kBAAkB,EAAE;YACtB,WAAW,CAAC,KAAK,CAAC;AACnB,QAAA;AACH,IAAA,CAAC,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,sBAAsB,CAAC,SAAS;AAChC,YAAA,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;YACxB,SAAS;AACV,SAAA,CAAC,EACF,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,WAAW,EAAA;QAEf,CAAC,QAAQ,IAAI,GAAG;QACjBA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,sBAAsB,CAAC,IAAI;AAC3B,gBAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;gBACnB,SAAS;aACV,CAAC,EAAA;AAEF,YAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,EAAE,EAAE,kBAAkB,EACtB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,oBAAoB,EAChC,aAAa,EAAA,IAAA,EACb,OAAO,EAAE,kBAAkB,EAAA;AAE3B,gBAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,kBAAkB,EACvB,SAAS,EAAE,eAAe,CAAC;AACzB,wBAAA,sBAAsB,CAAC,QAAQ;wBAC/B,QAAQ,IAAI,sBAAsB,CAAC,QAAQ;AAC3C,wBAAA,CAAA,EAAG,SAAS,CAAA,eAAA,CAAiB;wBAC7B,SAAS;AACV,qBAAA,CAAC,EAAA,EAED,QAAQ,CACK,CACF,CACZ;AACL,QAAA,QAAQ,IAAI,GAAG,CACZ;AAEV;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_9gxyg_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n._wrap_9gxyg_12 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  min-width: 100%;\n}\n\n._dropdown_9gxyg_24 {\n  flex-direction: column;\n  position: absolute;\n  z-index: var(--layers-popup);\n  top: 6px;\n  /* CSSTransition applies global class names that cannot be scoped by CSS Modules.\n     The compound selector (.localClass:global(.globalClass)) keeps the transition\n     styles properly scoped while targeting the global classes added by\n     react-transition-group. */\n}\n._dropdown_9gxyg_24.dropdown-enter {\n  opacity: 0;\n  transform: translateY(-6px);\n}\n._dropdown_9gxyg_24.dropdown-enter-active {\n  opacity: 1;\n  transform: translateY(0);\n  transition: all 200ms;\n}\n._dropdown_9gxyg_24.dropdown-exit {\n  opacity: 1;\n  transform: translateY(0);\n}\n._dropdown_9gxyg_24.dropdown-exit-active {\n  opacity: 0;\n  transform: translateY(-6px);\n  transition: all 200ms;\n}\n\n._reversed_9gxyg_53 {\n  top: auto;\n  bottom: 8px;\n}");
+var animatedDropdownStyles = {"container":"_container_9gxyg_1","wrap":"_wrap_9gxyg_12","dropdown":"_dropdown_9gxyg_24","reversed":"_reversed_9gxyg_53"};
+
+module.exports = animatedDropdownStyles;
+//# sourceMappingURL=AnimatedDropdown.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedDropdown.module.scss.cjs","sources":["../../../src/components/AnimatedDropdown/AnimatedDropdown.module.scss"],"sourcesContent":[".container {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.wrap {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  min-width: 100%;\n}\n\n.dropdown {\n  flex-direction: column;\n  position: absolute;\n  z-index: var(--layers-popup);\n  top: 6px;\n\n  /* CSSTransition applies global class names that cannot be scoped by CSS Modules.\n     The compound selector (.localClass:global(.globalClass)) keeps the transition\n     styles properly scoped while targeting the global classes added by\n     react-transition-group. */\n  &:global(.dropdown-enter) {\n    opacity: 0;\n    transform: translateY(-6px);\n  }\n\n  &:global(.dropdown-enter-active) {\n    opacity: 1;\n    transform: translateY(0);\n    transition: all 200ms;\n  }\n\n  &:global(.dropdown-exit) {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  &:global(.dropdown-exit-active) {\n    opacity: 0;\n    transform: translateY(-6px);\n    transition: all 200ms;\n  }\n}\n\n.reversed {\n  top: auto;\n  bottom: 8px;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,yxCAAA;AACA,6BAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_9gxyg_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n._wrap_9gxyg_12 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  min-width: 100%;\n}\n\n._dropdown_9gxyg_24 {\n  flex-direction: column;\n  position: absolute;\n  z-index: var(--layers-popup);\n  top: 6px;\n  /* CSSTransition applies global class names that cannot be scoped by CSS Modules.\n     The compound selector (.localClass:global(.globalClass)) keeps the transition\n     styles properly scoped while targeting the global classes added by\n     react-transition-group. */\n}\n._dropdown_9gxyg_24.dropdown-enter {\n  opacity: 0;\n  transform: translateY(-6px);\n}\n._dropdown_9gxyg_24.dropdown-enter-active {\n  opacity: 1;\n  transform: translateY(0);\n  transition: all 200ms;\n}\n._dropdown_9gxyg_24.dropdown-exit {\n  opacity: 1;\n  transform: translateY(0);\n}\n._dropdown_9gxyg_24.dropdown-exit-active {\n  opacity: 0;\n  transform: translateY(-6px);\n  transition: all 200ms;\n}\n\n._reversed_9gxyg_53 {\n  top: auto;\n  bottom: 8px;\n}");
+var animatedDropdownStyles = {"container":"_container_9gxyg_1","wrap":"_wrap_9gxyg_12","dropdown":"_dropdown_9gxyg_24","reversed":"_reversed_9gxyg_53"};
+
+export { animatedDropdownStyles as default };
+//# sourceMappingURL=AnimatedDropdown.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedDropdown.module.scss.js","sources":["../../../src/components/AnimatedDropdown/AnimatedDropdown.module.scss"],"sourcesContent":[".container {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.wrap {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  min-width: 100%;\n}\n\n.dropdown {\n  flex-direction: column;\n  position: absolute;\n  z-index: var(--layers-popup);\n  top: 6px;\n\n  /* CSSTransition applies global class names that cannot be scoped by CSS Modules.\n     The compound selector (.localClass:global(.globalClass)) keeps the transition\n     styles properly scoped while targeting the global classes added by\n     react-transition-group. */\n  &:global(.dropdown-enter) {\n    opacity: 0;\n    transform: translateY(-6px);\n  }\n\n  &:global(.dropdown-enter-active) {\n    opacity: 1;\n    transform: translateY(0);\n    transition: all 200ms;\n  }\n\n  &:global(.dropdown-exit) {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  &:global(.dropdown-exit-active) {\n    opacity: 0;\n    transform: translateY(-6px);\n    transition: all 200ms;\n  }\n}\n\n.reversed {\n  top: auto;\n  bottom: 8px;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,yxCAAA;AACA,6BAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/components/AnimatedDropdown/components/BasicDropdown.cjs

@@ -1,15 +1,17 @@
 'use strict';
 
 var React = require('react');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var BasicDropdown_module = require('./BasicDropdown.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const BasicDropdown = React.forwardRef((props, ref) => {
-    const { children, className, role } = props;
-    return (React__default.default.createElement(styled.Container, { className: className, ref: ref, role: role }, children));
+    const { children, className, role, ...rest } = props;
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([BasicDropdown_module.basicDropdown, className]), ref: ref, role: role, ...rest }, children));
 });
 
 exports.BasicDropdown = BasicDropdown;

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

@@ -1 +1 @@
-{"version":3,"file":"BasicDropdown.cjs","sources":["../../../../src/components/AnimatedDropdown/components/BasicDropdown.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { Container } from './styled';\n\nimport { BasicDropdownProps } from '../types';\n\nexport const BasicDropdown = forwardRef<HTMLDivElement, BasicDropdownProps>(\n  (props: BasicDropdownProps, ref) => {\n    const { children, className, role } = props;\n\n    return (\n      <Container className={className} ref={ref} role={role}>\n        {children}\n      </Container>\n    );\n  },\n);\n"],"names":["forwardRef","React","Container"],"mappings":";;;;;;;;;AAMO,MAAM,aAAa,GAAGA,gBAAU,CACrC,CAAC,KAAyB,EAAE,GAAG,KAAI;IACjC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK;AAE3C,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,gBAAS,IAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,IAClD,QAAQ,CACC;AAEhB,CAAC;;;;"}
+{"version":3,"file":"BasicDropdown.cjs","sources":["../../../../src/components/AnimatedDropdown/components/BasicDropdown.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { buildClassnames } from '../../../utils';\nimport { BasicDropdownProps } from '../types';\nimport basicDropdownStyles from './BasicDropdown.module.scss';\n\nexport const BasicDropdown = forwardRef<HTMLDivElement, BasicDropdownProps>(\n  (props: BasicDropdownProps, ref) => {\n    const { children, className, role, ...rest } = props;\n\n    return (\n      <div className={buildClassnames([basicDropdownStyles.basicDropdown, className])} ref={ref} role={role} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["forwardRef","React","buildClassnames","basicDropdownStyles"],"mappings":";;;;;;;;;;;AAMO,MAAM,aAAa,GAAGA,gBAAU,CACrC,CAAC,KAAyB,EAAE,GAAG,KAAI;AACjC,IAAA,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK;AAEpD,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,+BAAe,CAAC,CAACC,oBAAmB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,IAAI,EAAA,EAC5G,QAAQ,CACL;AAEV,CAAC;;;;"}

package/dist/components/AnimatedDropdown/components/BasicDropdown.js

@@ -1,9 +1,11 @@
 import React__default, { forwardRef } from 'react';
-import { Container } from './styled.js';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import basicDropdownStyles from './BasicDropdown.module.scss.js';
 
 const BasicDropdown = forwardRef((props, ref) => {
-    const { children, className, role } = props;
-    return (React__default.createElement(Container, { className: className, ref: ref, role: role }, children));
+    const { children, className, role, ...rest } = props;
+    return (React__default.createElement("div", { className: buildClassnames([basicDropdownStyles.basicDropdown, className]), ref: ref, role: role, ...rest }, children));
 });
 
 export { BasicDropdown };

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

@@ -1 +1 @@
-{"version":3,"file":"BasicDropdown.js","sources":["../../../../src/components/AnimatedDropdown/components/BasicDropdown.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { Container } from './styled';\n\nimport { BasicDropdownProps } from '../types';\n\nexport const BasicDropdown = forwardRef<HTMLDivElement, BasicDropdownProps>(\n  (props: BasicDropdownProps, ref) => {\n    const { children, className, role } = props;\n\n    return (\n      <Container className={className} ref={ref} role={role}>\n        {children}\n      </Container>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;AAMO,MAAM,aAAa,GAAG,UAAU,CACrC,CAAC,KAAyB,EAAE,GAAG,KAAI;IACjC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK;AAE3C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,IAClD,QAAQ,CACC;AAEhB,CAAC;;;;"}
+{"version":3,"file":"BasicDropdown.js","sources":["../../../../src/components/AnimatedDropdown/components/BasicDropdown.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { buildClassnames } from '../../../utils';\nimport { BasicDropdownProps } from '../types';\nimport basicDropdownStyles from './BasicDropdown.module.scss';\n\nexport const BasicDropdown = forwardRef<HTMLDivElement, BasicDropdownProps>(\n  (props: BasicDropdownProps, ref) => {\n    const { children, className, role, ...rest } = props;\n\n    return (\n      <div className={buildClassnames([basicDropdownStyles.basicDropdown, className])} ref={ref} role={role} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAMO,MAAM,aAAa,GAAG,UAAU,CACrC,CAAC,KAAyB,EAAE,GAAG,KAAI;AACjC,IAAA,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK;AAEpD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,CAAC,CAAC,mBAAmB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,IAAI,EAAA,EAC5G,QAAQ,CACL;AAEV,CAAC;;;;"}

package/dist/components/AnimatedDropdown/components/BasicDropdown.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._basicDropdown_1y6wv_1 {\n  display: inline-flex;\n  background-color: #ffffff;\n  box-shadow: 1px 4px 15px rgba(27, 33, 38, 0.25);\n  border-radius: var(--radius-base);\n  overflow: hidden;\n}");
+var basicDropdownStyles = {"basicDropdown":"_basicDropdown_1y6wv_1"};
+
+module.exports = basicDropdownStyles;
+//# sourceMappingURL=BasicDropdown.module.scss.cjs.map

package/dist/components/AnimatedDropdown/components/BasicDropdown.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicDropdown.module.scss.cjs","sources":["../../../../src/components/AnimatedDropdown/components/BasicDropdown.module.scss"],"sourcesContent":[".basicDropdown {\n  display: inline-flex;\n  background-color: #ffffff;\n  box-shadow: 1px 4px 15px rgba(27, 33, 38, 0.25);\n  border-radius: var(--radius-base);\n  overflow: hidden;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,oMAAA;AACA,0BAAA,CAAA,eAAA,CAAA,wBAAA;;;;"}

package/dist/components/AnimatedDropdown/components/BasicDropdown.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("._basicDropdown_1y6wv_1 {\n  display: inline-flex;\n  background-color: #ffffff;\n  box-shadow: 1px 4px 15px rgba(27, 33, 38, 0.25);\n  border-radius: var(--radius-base);\n  overflow: hidden;\n}");
+var basicDropdownStyles = {"basicDropdown":"_basicDropdown_1y6wv_1"};
+
+export { basicDropdownStyles as default };
+//# sourceMappingURL=BasicDropdown.module.scss.js.map

package/dist/components/AnimatedDropdown/components/BasicDropdown.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicDropdown.module.scss.js","sources":["../../../../src/components/AnimatedDropdown/components/BasicDropdown.module.scss"],"sourcesContent":[".basicDropdown {\n  display: inline-flex;\n  background-color: #ffffff;\n  box-shadow: 1px 4px 15px rgba(27, 33, 38, 0.25);\n  border-radius: var(--radius-base);\n  overflow: hidden;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,oMAAA;AACA,0BAAA,CAAA,eAAA,CAAA,wBAAA;;;;"}

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

package/dist/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { CardHeader } from '../CardHeader';\nimport { buildClassnames } from '../../utils';\nimport styles from './Card.module.scss';\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\n\nconst collapseAnimationVariants = {\n  expanded: { height: 'auto' },\n  collapsed: { height: 0 },\n};\n\ntype CardAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport type CardProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  title?: string;\n  subtitle?: string;\n  headerTitleSlot?: React.ReactNode;\n  headerActionSlot?: React.ReactNode;\n  action?: CardAction;\n  collapsable?: boolean;\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children: ReactNode;\n  onClose?: () => void;\n  renderFooter?: () => ReactNode;\n};\n\n/* --- Sub-components --- */\n\nexport interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children?: ReactNode;\n}\n\n/**\n * Stable class used for styled-components selector interpolation.\n * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,\n * which calls `.toString()` and expects a CSS class selector.\n */\nconst SURFACE_STABLE_CLASS = 'veeqo-card-surface';\n\nconst Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n  ({ elevation = 1, accent, className, children, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([\n        SURFACE_STABLE_CLASS,\n        styles.surface,\n        styles[`elevation-${elevation}`],\n        accent ? styles[`accent-${accent}`] : undefined,\n        className,\n      ])}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\nSurface.displayName = 'Card.Surface';\nSurface.toString = () => `.${SURFACE_STABLE_CLASS}`;\n\nconst Section = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...rest }, ref) => (\n    <section ref={ref} className={buildClassnames([styles.section, className])} {...rest} />\n  ),\n);\nSection.displayName = 'Card.Section';\n\nconst FullBleed = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.fullBleed, className])} {...rest} />\n  ),\n);\nFullBleed.displayName = 'Card.FullBleed';\n\nconst FOOTER_STABLE_CLASS = 'veeqo-card-footer';\n\nconst Footer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...rest }, ref) => (\n    <footer ref={ref} className={buildClassnames([FOOTER_STABLE_CLASS, styles.footer, className])} {...rest} />\n  ),\n);\nFooter.displayName = 'Card.Footer';\nFooter.toString = () => `.${FOOTER_STABLE_CLASS}`;\n\n/* --- Main Card component --- */\n\nexport const Card = ({\n  className,\n  style,\n  title,\n  subtitle,\n  headerTitleSlot,\n  headerActionSlot,\n  action,\n  collapsable,\n  elevation,\n  accent,\n  children,\n  onClose,\n  renderFooter,\n}: CardProps) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const toggleCollapsed = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  const showHeader = title || headerTitleSlot !== undefined;\n  const headerMarkup = showHeader && (\n    <CardHeader\n      title={title}\n      subtitle={subtitle}\n      titleSlot={headerTitleSlot}\n      actionSlot={headerActionSlot}\n      action={action}\n      onClickClose={onClose}\n      isCollapsed={isCollapsed}\n      onClickCollapse={collapsable ? toggleCollapsed : undefined}\n    />\n  );\n\n  const showBody = (collapsable && !isCollapsed) || !collapsable;\n  const bodyMarkup = (\n    <motion.div\n      className={styles.body}\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </motion.div>\n  );\n\n  const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n  return (\n    <Surface className={className} style={style} elevation={elevation} accent={accent}>\n      {headerMarkup}\n      {bodyMarkup}\n      {footerMarkup}\n    </Surface>\n  );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React","buildClassnames","styles","useState","CardHeader","motion"],"mappings":";;;;;;;;;;;;;AASA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AA+BD;;;;AAIG;AACH,MAAM,oBAAoB,GAAG,oBAAoB;AAEjD,MAAM,OAAO,GAAGA,sBAAK,CAAC,UAAU,CAC9B,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC3DA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC;QACzB,oBAAoB;AACpB,QAAAC,WAAM,CAAC,OAAO;AACd,QAAAA,WAAM,CAAC,CAAA,UAAA,EAAa,SAAS,CAAA,CAAE,CAAC;AAChC,QAAA,MAAM,GAAGA,WAAM,CAAC,CAAA,OAAA,EAAU,MAAM,CAAA,CAAE,CAAC,GAAG,SAAS;QAC/C,SAAS;AACV,KAAA,CAAC,KACE,IAAI,EAAA,EAEP,QAAQ,CACL,CACP,CACF;AACD,OAAO,CAAC,WAAW,GAAG,cAAc;AACpC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAA,CAAA,EAAI,oBAAoB,CAAA,CAAE;AAEnD,MAAM,OAAO,GAAGF,sBAAK,CAAC,UAAU,CAC9B,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAS,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,WAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CACzF,CACF;AACD,OAAO,CAAC,WAAW,GAAG,cAAc;AAEpC,MAAM,SAAS,GAAGF,sBAAK,CAAC,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,WAAM,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CACvF,CACF;AACD,SAAS,CAAC,WAAW,GAAG,gBAAgB;AAExC,MAAM,mBAAmB,GAAG,mBAAmB;AAE/C,MAAM,MAAM,GAAGF,sBAAK,CAAC,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAAC,mBAAmB,EAAEC,WAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CAC5G,CACF;AACD,MAAM,CAAC,WAAW,GAAG,aAAa;AAClC,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAA,CAAA,EAAI,mBAAmB,CAAA,CAAE;AAEjD;AAEO,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BH,sBAAA,CAAA,aAAA,CAACI,qBAAU,EAAA,EACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAAA,CAC1D,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdJ,qCAACK,mBAAM,CAAC,GAAG,EAAA,EACT,SAAS,EAAEH,WAAM,CAAC,IAAI,EACtB,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAF,sBAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CAClB,CACd;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIA,sBAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,EAAE,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,IAAI,CAAC,MAAM,GAAG,MAAM;;;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n  expanded: { height: 'auto' },\n  collapsed: { height: 0 },\n};\n\ntype CardAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport type CardProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  title?: string;\n  subtitle?: string;\n  headerTitleSlot?: React.ReactNode;\n  headerActionSlot?: React.ReactNode;\n  action?: CardAction;\n  collapsable?: boolean;\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children: ReactNode;\n  onClose?: () => void;\n  renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n  className,\n  style,\n  title,\n  subtitle,\n  headerTitleSlot,\n  headerActionSlot,\n  action,\n  collapsable,\n  elevation,\n  accent,\n  children,\n  onClose,\n  renderFooter,\n}: CardProps) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const toggleCollapsed = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  const showHeader = title || headerTitleSlot !== undefined;\n  const headerMarkup = showHeader && (\n    <CardHeader\n      title={title}\n      subtitle={subtitle}\n      titleSlot={headerTitleSlot}\n      actionSlot={headerActionSlot}\n      action={action}\n      onClickClose={onClose}\n      isCollapsed={isCollapsed}\n      onClickCollapse={collapsable ? toggleCollapsed : undefined}\n    />\n  );\n\n  const showBody = (collapsable && !isCollapsed) || !collapsable;\n  const bodyMarkup = (\n    <Body\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </Body>\n  );\n\n  const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n  return (\n    <Surface className={className} style={style} elevation={elevation} accent={accent}>\n      {headerMarkup}\n      {bodyMarkup}\n      {footerMarkup}\n    </Surface>\n  );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["useState","React","CardHeader","Body","Section","Footer","Surface","FullBleed"],"mappings":";;;;;;;;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AAuBM,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BC,sBAAA,CAAA,aAAA,CAACC,qBAAU,EAAA,EACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAAA,CAC1D,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdD,sBAAA,CAAA,aAAA,CAACE,WAAI,EAAA,EACH,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAF,sBAAA,CAAA,aAAA,CAACG,cAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,IAAA,EAAE,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEJ,sBAAA,CAAA,aAAA,CAACK,cAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAGA,cAAO;AACtB,IAAI,CAAC,OAAO,GAAGF,cAAO;AACtB,IAAI,CAAC,SAAS,GAAGG,gBAAS;AAC1B,IAAI,CAAC,MAAM,GAAGF,aAAM;;;;"}

package/dist/components/Card/Card.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-export type CardElevation = 0 | 1 | 2 | 3 | 4;
+import { CardElevation } from './styled';
 type CardAction = {
     title: string;
     onClick: () => void;
@@ -19,16 +19,11 @@ export type CardProps = {
     onClose?: () => void;
     renderFooter?: () => ReactNode;
 };
-export interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
-    elevation?: CardElevation;
-    accent?: 'info' | 'success' | 'error';
-    children?: ReactNode;
-}
 export declare const Card: {
     ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }: CardProps): React.JSX.Element;
-    Surface: React.ForwardRefExoticComponent<SurfaceProps & React.RefAttributes<HTMLDivElement>>;
-    Section: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-    FullBleed: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-    Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+    Surface: import("styled-components").StyledComponent<"div", any, import("./styled").SurfaceProps, never>;
+    Section: import("styled-components").StyledComponent<"section", any, {}, never>;
+    FullBleed: import("styled-components").StyledComponent<"div", any, {}, never>;
+    Footer: import("styled-components").StyledComponent<"footer", any, {}, never>;
 };
 export {};

package/dist/components/Card/Card.js

@@ -1,38 +1,11 @@
 import React__default, { useState } from 'react';
-import { motion } from 'framer-motion';
 import { CardHeader } from '../CardHeader/CardHeader.js';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import 'uid/secure';
-import styles from './Card.module.scss.js';
+import { Body, Section, Footer, Surface, FullBleed } from './styled.js';
 
 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.forwardRef(({ elevation = 1, accent, className, children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([
-        SURFACE_STABLE_CLASS,
-        styles.surface,
-        styles[`elevation-${elevation}`],
-        accent ? styles[`accent-${accent}`] : undefined,
-        className,
-    ]), ...rest }, children)));
-Surface.displayName = 'Card.Surface';
-Surface.toString = () => `.${SURFACE_STABLE_CLASS}`;
-const Section = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("section", { ref: ref, className: buildClassnames([styles.section, className]), ...rest })));
-Section.displayName = 'Card.Section';
-const FullBleed = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.fullBleed, className]), ...rest })));
-FullBleed.displayName = 'Card.FullBleed';
-const FOOTER_STABLE_CLASS = 'veeqo-card-footer';
-const Footer = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("footer", { ref: ref, className: buildClassnames([FOOTER_STABLE_CLASS, styles.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] = useState(false);
     const toggleCollapsed = () => {
@@ -41,7 +14,7 @@ const Card = ({ className, style, title, subtitle, headerTitleSlot, headerAction
     const showHeader = title || headerTitleSlot !== undefined;
     const headerMarkup = showHeader && (React__default.createElement(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.createElement(motion.div, { className: styles.body, animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
+    const bodyMarkup = (React__default.createElement(Body, { animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
         React__default.createElement(Section, null, children)));
     const footerMarkup = renderFooter !== undefined && React__default.createElement(Footer, null, renderFooter());
     return (React__default.createElement(Surface, { className: className, style: style, elevation: elevation, accent: accent },

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { CardHeader } from '../CardHeader';\nimport { buildClassnames } from '../../utils';\nimport styles from './Card.module.scss';\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\n\nconst collapseAnimationVariants = {\n  expanded: { height: 'auto' },\n  collapsed: { height: 0 },\n};\n\ntype CardAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport type CardProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  title?: string;\n  subtitle?: string;\n  headerTitleSlot?: React.ReactNode;\n  headerActionSlot?: React.ReactNode;\n  action?: CardAction;\n  collapsable?: boolean;\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children: ReactNode;\n  onClose?: () => void;\n  renderFooter?: () => ReactNode;\n};\n\n/* --- Sub-components --- */\n\nexport interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children?: ReactNode;\n}\n\n/**\n * Stable class used for styled-components selector interpolation.\n * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,\n * which calls `.toString()` and expects a CSS class selector.\n */\nconst SURFACE_STABLE_CLASS = 'veeqo-card-surface';\n\nconst Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n  ({ elevation = 1, accent, className, children, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([\n        SURFACE_STABLE_CLASS,\n        styles.surface,\n        styles[`elevation-${elevation}`],\n        accent ? styles[`accent-${accent}`] : undefined,\n        className,\n      ])}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\nSurface.displayName = 'Card.Surface';\nSurface.toString = () => `.${SURFACE_STABLE_CLASS}`;\n\nconst Section = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...rest }, ref) => (\n    <section ref={ref} className={buildClassnames([styles.section, className])} {...rest} />\n  ),\n);\nSection.displayName = 'Card.Section';\n\nconst FullBleed = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.fullBleed, className])} {...rest} />\n  ),\n);\nFullBleed.displayName = 'Card.FullBleed';\n\nconst FOOTER_STABLE_CLASS = 'veeqo-card-footer';\n\nconst Footer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...rest }, ref) => (\n    <footer ref={ref} className={buildClassnames([FOOTER_STABLE_CLASS, styles.footer, className])} {...rest} />\n  ),\n);\nFooter.displayName = 'Card.Footer';\nFooter.toString = () => `.${FOOTER_STABLE_CLASS}`;\n\n/* --- Main Card component --- */\n\nexport const Card = ({\n  className,\n  style,\n  title,\n  subtitle,\n  headerTitleSlot,\n  headerActionSlot,\n  action,\n  collapsable,\n  elevation,\n  accent,\n  children,\n  onClose,\n  renderFooter,\n}: CardProps) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const toggleCollapsed = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  const showHeader = title || headerTitleSlot !== undefined;\n  const headerMarkup = showHeader && (\n    <CardHeader\n      title={title}\n      subtitle={subtitle}\n      titleSlot={headerTitleSlot}\n      actionSlot={headerActionSlot}\n      action={action}\n      onClickClose={onClose}\n      isCollapsed={isCollapsed}\n      onClickCollapse={collapsable ? toggleCollapsed : undefined}\n    />\n  );\n\n  const showBody = (collapsable && !isCollapsed) || !collapsable;\n  const bodyMarkup = (\n    <motion.div\n      className={styles.body}\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </motion.div>\n  );\n\n  const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n  return (\n    <Surface className={className} style={style} elevation={elevation} accent={accent}>\n      {headerMarkup}\n      {bodyMarkup}\n      {footerMarkup}\n    </Surface>\n  );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React"],"mappings":";;;;;;;AASA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AA+BD;;;;AAIG;AACH,MAAM,oBAAoB,GAAG,oBAAoB;AAEjD,MAAM,OAAO,GAAGA,cAAK,CAAC,UAAU,CAC9B,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC3DA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC;QACzB,oBAAoB;AACpB,QAAA,MAAM,CAAC,OAAO;AACd,QAAA,MAAM,CAAC,CAAA,UAAA,EAAa,SAAS,CAAA,CAAE,CAAC;AAChC,QAAA,MAAM,GAAG,MAAM,CAAC,CAAA,OAAA,EAAU,MAAM,CAAA,CAAE,CAAC,GAAG,SAAS;QAC/C,SAAS;AACV,KAAA,CAAC,KACE,IAAI,EAAA,EAEP,QAAQ,CACL,CACP,CACF;AACD,OAAO,CAAC,WAAW,GAAG,cAAc;AACpC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAA,CAAA,EAAI,oBAAoB,CAAA,CAAE;AAEnD,MAAM,OAAO,GAAGA,cAAK,CAAC,UAAU,CAC9B,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAS,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CACzF,CACF;AACD,OAAO,CAAC,WAAW,GAAG,cAAc;AAEpC,MAAM,SAAS,GAAGA,cAAK,CAAC,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CACvF,CACF;AACD,SAAS,CAAC,WAAW,GAAG,gBAAgB;AAExC,MAAM,mBAAmB,GAAG,mBAAmB;AAE/C,MAAM,MAAM,GAAGA,cAAK,CAAC,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CAC5G,CACF;AACD,MAAM,CAAC,WAAW,GAAG,aAAa;AAClC,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAA,CAAA,EAAI,mBAAmB,CAAA,CAAE;AAEjD;AAEO,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAAA,CAC1D,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdA,6BAAC,MAAM,CAAC,GAAG,EAAA,EACT,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CAClB,CACd;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,EAAE,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,IAAI,CAAC,MAAM,GAAG,MAAM;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n  expanded: { height: 'auto' },\n  collapsed: { height: 0 },\n};\n\ntype CardAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport type CardProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  title?: string;\n  subtitle?: string;\n  headerTitleSlot?: React.ReactNode;\n  headerActionSlot?: React.ReactNode;\n  action?: CardAction;\n  collapsable?: boolean;\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children: ReactNode;\n  onClose?: () => void;\n  renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n  className,\n  style,\n  title,\n  subtitle,\n  headerTitleSlot,\n  headerActionSlot,\n  action,\n  collapsable,\n  elevation,\n  accent,\n  children,\n  onClose,\n  renderFooter,\n}: CardProps) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const toggleCollapsed = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  const showHeader = title || headerTitleSlot !== undefined;\n  const headerMarkup = showHeader && (\n    <CardHeader\n      title={title}\n      subtitle={subtitle}\n      titleSlot={headerTitleSlot}\n      actionSlot={headerActionSlot}\n      action={action}\n      onClickClose={onClose}\n      isCollapsed={isCollapsed}\n      onClickCollapse={collapsable ? toggleCollapsed : undefined}\n    />\n  );\n\n  const showBody = (collapsable && !isCollapsed) || !collapsable;\n  const bodyMarkup = (\n    <Body\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </Body>\n  );\n\n  const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n  return (\n    <Surface className={className} style={style} elevation={elevation} accent={accent}>\n      {headerMarkup}\n      {bodyMarkup}\n      {footerMarkup}\n    </Surface>\n  );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React"],"mappings":";;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AAuBM,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAAA,CAC1D,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,EAAE,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,IAAI,CAAC,MAAM,GAAG,MAAM;;;;"}

package/dist/components/Card/index.d.ts

@@ -1,2 +1 @@
 export { Card } from './Card';
-export type { CardElevation, SurfaceProps } from './Card';

package/dist/components/Card/styled.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+var styled = require('styled-components');
+var framerMotion = require('framer-motion');
+var shadows = require('../../theme/modules/shadows.cjs');
+var colors = require('../../theme/modules/colors.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+var radius = require('../../theme/modules/radius.cjs');
+var text = require('../../theme/modules/text.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const { grey } = colors.colors.neutral;
+const elevationShadowMap = {
+    0: 'none',
+    1: shadows.Shadows.sm,
+    2: shadows.Shadows.base,
+    3: shadows.Shadows.md,
+    4: shadows.Shadows.lg,
+};
+const accents = {
+    info: colors.colors.secondary.blue.base,
+    success: colors.colors.secondary.green.base,
+    error: colors.colors.secondary.red.base,
+};
+const Footer = styled__default.default.footer.withConfig({ displayName: "vui--Footer", componentId: "vui--livrdi" }) `margin-top:${sizes.sizes.base};padding:${sizes.sizes.md};z-index:2;`;
+const Section = styled__default.default.section.withConfig({ displayName: "vui--Section", componentId: "vui--z99ese" }) `padding-right:${sizes.sizes.md};padding-left:${sizes.sizes.md};margin-top:${sizes.sizes.md};margin-bottom:${sizes.sizes.md};font-family:${text.text.body.fontFamily};font-size:${text.text.body.fontSize};font-weight:${text.text.body.fontWeight};line-height:${text.text.body.lineHeight};color:${text.text.body.color};& + &{border-top:${sizes.sizes.line} solid ${grey.base};padding-top:${sizes.sizes.md};}`;
+const FullBleed = styled__default.default.div.withConfig({ displayName: "vui--FullBleed", componentId: "vui--1lgjeo7" }) `margin-left:-${sizes.sizes.md};margin-right:-${sizes.sizes.md};`;
+const Body = styled__default.default(framerMotion.motion.div).withConfig({ displayName: "vui--Body", componentId: "vui--pfgeh3" }) `overflow-y:hidden;&:not(:first-child)> ${Section}:first-child{margin-top:0;}`;
+const Surface = styled__default.default.div.withConfig({ displayName: "vui--Surface", componentId: "vui--g1wpqa" }) `position:relative;width:100%;background-color:white;border:${sizes.sizes.line} solid ${grey.base};box-shadow:${(props) => props.elevation !== undefined ? elevationShadowMap[props.elevation] : shadows.Shadows.sm};border-radius:${radius.radius.md};overflow:hidden;box-sizing:border-box;${({ accent }) => accent &&
+    `
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: ${sizes.sizes.xs};
+      background-color: ${accents[accent]};
+    }
+  `}`;
+
+exports.Body = Body;
+exports.Footer = Footer;
+exports.FullBleed = FullBleed;
+exports.Section = Section;
+exports.Surface = Surface;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Card/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { Shadows } from '../../theme/modules/shadows';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\nimport { radius } from '../../theme/modules/radius';\nimport { text } from '../../theme/modules/text';\n\nconst { grey } = colors.neutral;\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\n\nconst elevationShadowMap = {\n  0: 'none',\n  1: Shadows.sm,\n  2: Shadows.base,\n  3: Shadows.md,\n  4: Shadows.lg,\n};\n\nconst accents = {\n  info: colors.secondary.blue.base,\n  success: colors.secondary.green.base,\n  error: colors.secondary.red.base,\n};\n\nexport const Footer = styled.footer`\n  margin-top: ${sizes.base};\n  padding: ${sizes.md};\n  z-index: 2;\n`;\n\nexport const Section = styled.section`\n  padding-right: ${sizes.md};\n  padding-left: ${sizes.md};\n  margin-top: ${sizes.md};\n  margin-bottom: ${sizes.md};\n\n  font-family: ${text.body.fontFamily};\n  font-size: ${text.body.fontSize};\n  font-weight: ${text.body.fontWeight};\n  line-height: ${text.body.lineHeight};\n  color: ${text.body.color};\n\n  & + & {\n    border-top: ${sizes.line} solid ${grey.base};\n    padding-top: ${sizes.md};\n  }\n`;\n\nexport const FullBleed = styled.div`\n  margin-left: -${sizes.md};\n  margin-right: -${sizes.md};\n`;\n\nexport const Body = styled(motion.div)`\n  overflow-y: hidden;\n\n  &:not(:first-child) > ${Section}:first-child {\n    margin-top: 0;\n  }\n`;\n\nexport interface SurfaceProps {\n  elevation?: CardElevation;\n  accent?: keyof typeof accents;\n}\n\nexport const Surface = styled.div<SurfaceProps>`\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: ${sizes.line} solid ${grey.base};\n  box-shadow: ${(props) =>\n    props.elevation !== undefined ? elevationShadowMap[props.elevation] : Shadows.sm};\n  border-radius: ${radius.md};\n  overflow: hidden;\n  box-sizing: border-box;\n\n  ${({ accent }) =>\n    accent &&\n    `\n    &::after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: ${sizes.xs};\n      background-color: ${accents[accent]};\n    }\n  `}\n`;\n"],"names":["colors","Shadows","styled","sizes","text","motion","radius"],"mappings":";;;;;;;;;;;;;;AAQA,MAAM,EAAE,IAAI,EAAE,GAAGA,aAAM,CAAC,OAAO;AAI/B,MAAM,kBAAkB,GAAG;AACzB,IAAA,CAAC,EAAE,MAAM;IACT,CAAC,EAAEC,eAAO,CAAC,EAAE;IACb,CAAC,EAAEA,eAAO,CAAC,IAAI;IACf,CAAC,EAAEA,eAAO,CAAC,EAAE;IACb,CAAC,EAAEA,eAAO,CAAC,EAAE;CACd;AAED,MAAM,OAAO,GAAG;AACd,IAAA,IAAI,EAAED,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAChC,IAAA,OAAO,EAAEA,aAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;AACpC,IAAA,KAAK,EAAEA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;CACjC;AAEM,MAAM,MAAM,GAAGE,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACnBC,WAAK,CAAC,IAAI,CAAA,SAAA,EACbA,WAAK,CAAC,EAAE;AAId,MAAM,OAAO,GAAGD,uBAAM,CAAC,OAAO,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAClBC,WAAK,CAAC,EAAE,CAAA,cAAA,EACTA,WAAK,CAAC,EAAE,CAAA,YAAA,EACVA,WAAK,CAAC,EAAE,CAAA,eAAA,EACLA,WAAK,CAAC,EAAE,CAAA,aAAA,EAEVC,SAAI,CAAC,IAAI,CAAC,UAAU,CAAA,WAAA,EACtBA,SAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,aAAA,EAChBA,SAAI,CAAC,IAAI,CAAC,UAAU,CAAA,aAAA,EACpBA,SAAI,CAAC,IAAI,CAAC,UAAU,UAC1BA,SAAI,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAGRD,WAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,aAAA,EAC5BA,WAAK,CAAC,EAAE;AAIpB,MAAM,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EACjBC,WAAK,CAAC,EAAE,CAAA,eAAA,EACPA,WAAK,CAAC,EAAE;AAGpB,MAAM,IAAI,GAAGD,uBAAM,CAACG,mBAAM,CAAC,GAAG,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAGZ,OAAO;AAU1B,MAAM,OAAO,GAAGH,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2DAAA,EAIrBC,WAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,YAAA,EACzB,CAAC,KAAK,KAClB,KAAK,CAAC,SAAS,KAAK,SAAS,GAAG,kBAAkB,CAAC,KAAK,CAAC,SAAS,CAAC,GAAGF,eAAO,CAAC,EAAE,CAAA,eAAA,EACjEK,aAAM,CAAC,EAAE,CAAA,uCAAA,EAIxB,CAAC,EAAE,MAAM,EAAE,KACX,MAAM;AACN,IAAA;;;;;;;AAOY,cAAA,EAAAH,WAAK,CAAC,EAAE,CAAA;0BACE,OAAO,CAAC,MAAM,CAAC,CAAA;;AAEtC,EAAA,CAAA,CAAA;;;;;;;;"}

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

@@ -0,0 +1,16 @@
+export type CardElevation = 0 | 1 | 2 | 3 | 4;
+declare const accents: {
+    info: string;
+    success: string;
+    error: string;
+};
+export declare const Footer: import("styled-components").StyledComponent<"footer", any, {}, never>;
+export declare const Section: import("styled-components").StyledComponent<"section", any, {}, never>;
+export declare const FullBleed: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Body: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export interface SurfaceProps {
+    elevation?: CardElevation;
+    accent?: keyof typeof accents;
+}
+export declare const Surface: import("styled-components").StyledComponent<"div", any, SurfaceProps, never>;
+export {};

package/dist/components/Card/styled.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+import { Shadows } from '../../theme/modules/shadows.js';
+import { colors } from '../../theme/modules/colors.js';
+import { sizes } from '../../theme/modules/sizes.js';
+import { radius } from '../../theme/modules/radius.js';
+import { text } from '../../theme/modules/text.js';
+
+const { grey } = colors.neutral;
+const elevationShadowMap = {
+    0: 'none',
+    1: Shadows.sm,
+    2: Shadows.base,
+    3: Shadows.md,
+    4: Shadows.lg,
+};
+const accents = {
+    info: colors.secondary.blue.base,
+    success: colors.secondary.green.base,
+    error: colors.secondary.red.base,
+};
+const Footer = styled.footer.withConfig({ displayName: "vui--Footer", componentId: "vui--livrdi" }) `margin-top:${sizes.base};padding:${sizes.md};z-index:2;`;
+const Section = styled.section.withConfig({ displayName: "vui--Section", componentId: "vui--z99ese" }) `padding-right:${sizes.md};padding-left:${sizes.md};margin-top:${sizes.md};margin-bottom:${sizes.md};font-family:${text.body.fontFamily};font-size:${text.body.fontSize};font-weight:${text.body.fontWeight};line-height:${text.body.lineHeight};color:${text.body.color};& + &{border-top:${sizes.line} solid ${grey.base};padding-top:${sizes.md};}`;
+const FullBleed = styled.div.withConfig({ displayName: "vui--FullBleed", componentId: "vui--1lgjeo7" }) `margin-left:-${sizes.md};margin-right:-${sizes.md};`;
+const Body = styled(motion.div).withConfig({ displayName: "vui--Body", componentId: "vui--pfgeh3" }) `overflow-y:hidden;&:not(:first-child)> ${Section}:first-child{margin-top:0;}`;
+const Surface = styled.div.withConfig({ displayName: "vui--Surface", componentId: "vui--g1wpqa" }) `position:relative;width:100%;background-color:white;border:${sizes.line} solid ${grey.base};box-shadow:${(props) => props.elevation !== undefined ? elevationShadowMap[props.elevation] : Shadows.sm};border-radius:${radius.md};overflow:hidden;box-sizing:border-box;${({ accent }) => accent &&
+    `
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: ${sizes.xs};
+      background-color: ${accents[accent]};
+    }
+  `}`;
+
+export { Body, Footer, FullBleed, Section, Surface };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/Card/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { Shadows } from '../../theme/modules/shadows';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\nimport { radius } from '../../theme/modules/radius';\nimport { text } from '../../theme/modules/text';\n\nconst { grey } = colors.neutral;\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\n\nconst elevationShadowMap = {\n  0: 'none',\n  1: Shadows.sm,\n  2: Shadows.base,\n  3: Shadows.md,\n  4: Shadows.lg,\n};\n\nconst accents = {\n  info: colors.secondary.blue.base,\n  success: colors.secondary.green.base,\n  error: colors.secondary.red.base,\n};\n\nexport const Footer = styled.footer`\n  margin-top: ${sizes.base};\n  padding: ${sizes.md};\n  z-index: 2;\n`;\n\nexport const Section = styled.section`\n  padding-right: ${sizes.md};\n  padding-left: ${sizes.md};\n  margin-top: ${sizes.md};\n  margin-bottom: ${sizes.md};\n\n  font-family: ${text.body.fontFamily};\n  font-size: ${text.body.fontSize};\n  font-weight: ${text.body.fontWeight};\n  line-height: ${text.body.lineHeight};\n  color: ${text.body.color};\n\n  & + & {\n    border-top: ${sizes.line} solid ${grey.base};\n    padding-top: ${sizes.md};\n  }\n`;\n\nexport const FullBleed = styled.div`\n  margin-left: -${sizes.md};\n  margin-right: -${sizes.md};\n`;\n\nexport const Body = styled(motion.div)`\n  overflow-y: hidden;\n\n  &:not(:first-child) > ${Section}:first-child {\n    margin-top: 0;\n  }\n`;\n\nexport interface SurfaceProps {\n  elevation?: CardElevation;\n  accent?: keyof typeof accents;\n}\n\nexport const Surface = styled.div<SurfaceProps>`\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: ${sizes.line} solid ${grey.base};\n  box-shadow: ${(props) =>\n    props.elevation !== undefined ? elevationShadowMap[props.elevation] : Shadows.sm};\n  border-radius: ${radius.md};\n  overflow: hidden;\n  box-sizing: border-box;\n\n  ${({ accent }) =>\n    accent &&\n    `\n    &::after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: ${sizes.xs};\n      background-color: ${accents[accent]};\n    }\n  `}\n`;\n"],"names":[],"mappings":";;;;;;;;AAQA,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO;AAI/B,MAAM,kBAAkB,GAAG;AACzB,IAAA,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,OAAO,CAAC,EAAE;IACb,CAAC,EAAE,OAAO,CAAC,IAAI;IACf,CAAC,EAAE,OAAO,CAAC,EAAE;IACb,CAAC,EAAE,OAAO,CAAC,EAAE;CACd;AAED,MAAM,OAAO,GAAG;AACd,IAAA,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAChC,IAAA,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;AACpC,IAAA,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;CACjC;AAEM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACnB,KAAK,CAAC,IAAI,CAAA,SAAA,EACb,KAAK,CAAC,EAAE;AAId,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAClB,KAAK,CAAC,EAAE,CAAA,cAAA,EACT,KAAK,CAAC,EAAE,CAAA,YAAA,EACV,KAAK,CAAC,EAAE,CAAA,eAAA,EACL,KAAK,CAAC,EAAE,CAAA,aAAA,EAEV,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA,WAAA,EACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,aAAA,EAChB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA,aAAA,EACpB,IAAI,CAAC,IAAI,CAAC,UAAU,UAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAGR,KAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,aAAA,EAC5B,KAAK,CAAC,EAAE;AAIpB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EACjB,KAAK,CAAC,EAAE,CAAA,eAAA,EACP,KAAK,CAAC,EAAE;AAGpB,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAGZ,OAAO;AAU1B,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2DAAA,EAIrB,KAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,YAAA,EACzB,CAAC,KAAK,KAClB,KAAK,CAAC,SAAS,KAAK,SAAS,GAAG,kBAAkB,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,EAAE,CAAA,eAAA,EACjE,MAAM,CAAC,EAAE,CAAA,uCAAA,EAIxB,CAAC,EAAE,MAAM,EAAE,KACX,MAAM;AACN,IAAA;;;;;;;AAOY,cAAA,EAAA,KAAK,CAAC,EAAE,CAAA;0BACE,OAAO,CAAC,MAAM,CAAC,CAAA;;AAEtC,EAAA,CAAA,CAAA;;;;"}

package/dist/components/CardHeader/CardHeader.cjs

@@ -3,7 +3,7 @@
 var React = require('react');
 var Text = require('../Text/Text.cjs');
 var Button = require('../Button/Button.cjs');
-var CardHeader_module = require('./CardHeader.module.scss.cjs');
+var styled = require('./styled.cjs');
 var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
 var DownArrowIcon = require('../../icons/design-system/components/DownArrowIcon.cjs');
 var UpArrowIcon = require('../../icons/design-system/components/UpArrowIcon.cjs');
@@ -12,8 +12,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const CardHeader = ({ id, title, subtitle, titleSlot, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.default.createElement("header", { className: CardHeader_module.header },
-    React__default.default.createElement("div", { className: CardHeader_module.headerGrid },
+const CardHeader = ({ id, title, subtitle, titleSlot, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.default.createElement(styled.Header, null,
+    React__default.default.createElement(styled.HeaderGrid, null,
         titleSlot || (React__default.default.createElement(Text.Text, { id: id, variant: headerVariant }, title)),
         action && (React__default.default.createElement(Button.Button, { variant: "link", onClick: action.onClick }, action.title)),
         actionSlot,

package/dist/components/CardHeader/CardHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.cjs","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport styles from './CardHeader.module.scss';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  titleSlot?: React.ReactNode;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  titleSlot,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <header className={styles.header}>\n    <div className={styles.headerGrid}>\n      {titleSlot || (\n        <Text id={id} variant={headerVariant}>\n          {title}\n        </Text>\n      )}\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          type=\"button\"\n        />\n      )}\n    </div>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </header>\n);\n"],"names":["React","styles","Text","Button","DownArrowIcon","UpArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAEC,iBAAM,CAAC,MAAM,EAAA;AAC9B,IAAAD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,iBAAM,CAAC,UAAU,EAAA;AAC9B,QAAA,SAAS,KACRD,sBAAA,CAAA,aAAA,CAACE,SAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAA,EACjC,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdH,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGH,sBAAA,CAAA,aAAA,CAACI,4BAAa,EAAA,IAAA,CAAG,GAAGJ,sBAAA,CAAA,aAAA,CAACK,0BAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXL,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEH,sBAAA,CAAA,aAAA,CAACM,wBAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EAAA,YAAA,EACV,OAAO,EAClB,IAAI,EAAC,QAAQ,EAAA,CACb,CACH,CACG;AACL,IAAA,QAAQ,IAAIN,sBAAA,CAAA,aAAA,CAACE,SAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}
+{"version":3,"file":"CardHeader.cjs","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  titleSlot?: React.ReactNode;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  titleSlot,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <Header>\n    <HeaderGrid>\n      {titleSlot || (\n        <Text id={id} variant={headerVariant}>\n          {title}\n        </Text>\n      )}\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          type=\"button\"\n        />\n      )}\n    </HeaderGrid>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </Header>\n);\n"],"names":["React","Header","HeaderGrid","Text","Button","DownArrowIcon","UpArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,qCAACC,aAAM,EAAA,IAAA;AACL,IAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,IAAA;AACR,QAAA,SAAS,KACRF,sBAAA,CAAA,aAAA,CAACG,SAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAA,EACjC,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdJ,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGJ,sBAAA,CAAA,aAAA,CAACK,4BAAa,EAAA,IAAA,CAAG,GAAGL,sBAAA,CAAA,aAAA,CAACM,0BAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXN,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEJ,sBAAA,CAAA,aAAA,CAACO,wBAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EAAA,YAAA,EACV,OAAO,EAClB,IAAI,EAAC,QAAQ,EAAA,CACb,CACH,CACU;AACZ,IAAA,QAAQ,IAAIP,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}