@veeqo/ui 14.7.1-beta-1 → 14.8.0

package/dist/components/AnimatedDropdown/AnimatedDropdown.cjs

@@ -2,11 +2,8 @@
 
 var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-require('uid/secure');
-var BasicDropdown = require('./components/BasicDropdown.cjs');
+var styled = require('./styled.cjs');
 var useClickAway = require('./hooks/useClickAway.cjs');
-var AnimatedDropdown_module = require('./AnimatedDropdown.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -18,30 +15,16 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  */
 const AnimatedDropdown = ({ cta, shouldShowDropdown, children, className = 'animated-dropdown', reversed = false, onClickAway = () => { }, timeout = 350, transitionClassnames = 'dropdown', onClick, onMouseEnter, onMouseLeave, }) => {
     const dropdownRef = React.useRef(null);
-    const dropdownContentRef = React.useRef(null);
     useClickAway.useClickAway(dropdownRef, (event) => {
         if (shouldShowDropdown) {
             onClickAway(event);
         }
     });
-    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
-            AnimatedDropdown_module.container,
-            `${className}-container`,
-            className,
-        ]), onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: dropdownRef },
+    return (React__default.default.createElement(styled.Container, { className: `${className}-container ${className}`, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: dropdownRef },
         !reversed && cta,
-        React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
-                AnimatedDropdown_module.wrap,
-                `${className}-wrap`,
-                className,
-            ]) },
-            React__default.default.createElement(reactTransitionGroup.CSSTransition, { in: shouldShowDropdown, timeout: timeout, classNames: transitionClassnames, unmountOnExit: true, nodeRef: dropdownContentRef },
-                React__default.default.createElement(BasicDropdown.BasicDropdown, { role: "dialog", ref: dropdownContentRef, className: buildClassnames.buildClassnames([
-                        AnimatedDropdown_module.dropdown,
-                        reversed && AnimatedDropdown_module.reversed,
-                        `${className}-basic-dropdown`,
-                        className,
-                    ]) }, children))),
+        React__default.default.createElement(styled.Wrap, { className: `${className}-wrap ${className}` },
+            React__default.default.createElement(reactTransitionGroup.CSSTransition, { in: shouldShowDropdown, timeout: timeout, classNames: transitionClassnames, unmountOnExit: true },
+                React__default.default.createElement(styled.Dropdown, { role: "dialog", reversed: reversed, className: `${className}-basic-dropdown ${className}` }, children))),
         reversed && cta));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"AnimatedDropdown.cjs","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":["useRef","useClickAway","React","buildClassnames","animatedDropdownStyles","CSSTransition","BasicDropdown"],"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,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAChD,IAAA,MAAM,kBAAkB,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAEvD,IAAAC,yBAAY,CAAC,WAAW,EAAE,CAAC,KAAY,KAAI;AACzC,QAAA,IAAI,kBAAkB,EAAE;YACtB,WAAW,CAAC,KAAK,CAAC;AACnB,QAAA;AACH,IAAA,CAAC,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,uBAAsB,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;QACjBF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC;AACzB,gBAAAC,uBAAsB,CAAC,IAAI;AAC3B,gBAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;gBACnB,SAAS;aACV,CAAC,EAAA;AAEF,YAAAF,sBAAA,CAAA,aAAA,CAACG,kCAAa,EAAA,EACZ,EAAE,EAAE,kBAAkB,EACtB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,oBAAoB,EAChC,aAAa,EAAA,IAAA,EACb,OAAO,EAAE,kBAAkB,EAAA;AAE3B,gBAAAH,sBAAA,CAAA,aAAA,CAACI,2BAAa,EAAA,EACZ,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,kBAAkB,EACvB,SAAS,EAAEH,+BAAe,CAAC;AACzB,wBAAAC,uBAAsB,CAAC,QAAQ;wBAC/B,QAAQ,IAAIA,uBAAsB,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;;;;"}
+{"version":3,"file":"AnimatedDropdown.cjs","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":["useRef","useClickAway","React","Container","Wrap","CSSTransition","Dropdown"],"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,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAEhD,IAAAC,yBAAY,CAAC,WAAW,EAAE,CAAC,KAAY,KAAI;AACzC,QAAA,IAAI,kBAAkB,EAAE;YACtB,WAAW,CAAC,KAAK,CAAC;AACnB,QAAA;AACH,IAAA,CAAC,CAAC;IAEF,QACEC,sBAAA,CAAA,aAAA,CAACC,gBAAS,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;QACjBD,sBAAA,CAAA,aAAA,CAACE,WAAI,IAAC,SAAS,EAAE,GAAG,SAAS,CAAA,MAAA,EAAS,SAAS,CAAA,CAAE,EAAA;AAC/C,YAAAF,sBAAA,CAAA,aAAA,CAACG,kCAAa,EAAA,EACZ,EAAE,EAAE,kBAAkB,EACtB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,oBAAoB,EAChC,aAAa,EAAA,IAAA,EAAA;gBAEbH,sBAAA,CAAA,aAAA,CAACI,eAAQ,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;;;;"}

package/dist/components/AnimatedDropdown/AnimatedDropdown.js

@@ -1,10 +1,7 @@
 import React__default, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import 'uid/secure';
-import { BasicDropdown } from './components/BasicDropdown.js';
+import { Container, Wrap, Dropdown } from './styled.js';
 import { useClickAway } from './hooks/useClickAway.js';
-import animatedDropdownStyles from './AnimatedDropdown.module.scss.js';
 
 /**
  * @deprecated - Use `Dropdown` component instead.
@@ -12,30 +9,16 @@ import animatedDropdownStyles from './AnimatedDropdown.module.scss.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("div", { className: buildClassnames([
-            animatedDropdownStyles.container,
-            `${className}-container`,
-            className,
-        ]), onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: dropdownRef },
+    return (React__default.createElement(Container, { className: `${className}-container ${className}`, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: dropdownRef },
         !reversed && cta,
-        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))),
+        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))),
         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 { 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;;;;"}
+{"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;;;;"}

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

@@ -1,17 +1,15 @@
 'use strict';
 
 var React = require('react');
-var buildClassnames = require('../../../utils/buildClassnames.cjs');
-require('uid/secure');
-var BasicDropdown_module = require('./BasicDropdown.module.scss.cjs');
+var styled = require('./styled.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, ...rest } = props;
-    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([BasicDropdown_module.basicDropdown, className]), ref: ref, role: role, ...rest }, children));
+    const { children, className, role } = props;
+    return (React__default.default.createElement(styled.Container, { className: className, ref: ref, role: role }, 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 { 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;;;;"}
+{"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;;;;"}

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

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

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var styled = require('styled-components');
+var BaseContainer = require('../../BaseContainer/BaseContainer.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--r1m0qe" }) `display:inline-flex;background-color:#ffffff;box-shadow:1px 4px 15px rgba(27, 33, 38, 0.25);border-radius:4px;overflow:hidden;`;
+
+exports.Container = Container;
+//# sourceMappingURL=styled.cjs.map

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

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

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

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

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

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

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

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

package/dist/components/AnimatedDropdown/styled.cjs

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

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

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

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

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

package/dist/components/AnimatedDropdown/styled.js

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

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

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

package/dist/components/Checkbox/Checkbox.cjs

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var Choice = require('../Choice/Choice.cjs');
-var styled = require('./styled.cjs');
 var generateId = require('../../utils/generateId.cjs');
+var Checkbox_module = require('./Checkbox.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -26,7 +26,7 @@ const Checkbox = ({ id, checked, indeterminate, value, name, hint, disabled, ari
     }, [indeterminate]);
     const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
     return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, disabled: disabled, className: className, hint: hint, ...otherProps },
-        React__default.default.createElement(styled.Input, { ref: checkboxRef, id: componentId, type: "checkbox", checked: checked, value: value, name: name, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: handleChange })));
+        React__default.default.createElement("input", { ref: checkboxRef, id: componentId, type: "checkbox", checked: checked, value: value, name: name, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: handleChange, className: Checkbox_module.input })));
 };
 
 exports.Checkbox = Checkbox;

package/dist/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n  id?: string;\n  checked: boolean;\n  indeterminate?: boolean;\n  value?: CheckboxValue;\n  name?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n  className?: string;\n}\n\nexport const Checkbox = ({\n  id,\n  checked,\n  indeterminate,\n  value,\n  name,\n  hint,\n  disabled,\n  ariaLabel,\n  className,\n  onChange,\n  ...otherProps\n}: CheckboxProps) => {\n  const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n  const checkboxRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.checked, value);\n    },\n    [onChange, value],\n  );\n\n  useEffect(() => {\n    if (!checkboxRef.current) return;\n    if (indeterminate === true) {\n      checkboxRef.current.indeterminate = true;\n      return;\n    }\n    checkboxRef.current.indeterminate = false;\n  }, [indeterminate]);\n\n  const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n  return (\n    <Choice\n      htmlFor={componentId}\n      disabled={disabled}\n      className={className}\n      hint={hint}\n      {...otherProps}\n    >\n      <Input\n        ref={checkboxRef}\n        id={componentId}\n        type=\"checkbox\"\n        checked={checked}\n        value={value}\n        name={name}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        onChange={handleChange}\n      />\n    </Choice>\n  );\n};\n"],"names":["useMemo","generateId","useRef","useCallback","useEffect","React","Choice","Input"],"mappings":";;;;;;;;;;;AAmBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAGA,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAEDC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD,QAAA;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEC,qCAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;AAEd,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EAAA,EACJ,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,QAAQ,EAAE,YAAY,EAAA,CACtB,CACK;AAEb;;;;"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n  id?: string;\n  checked: boolean;\n  indeterminate?: boolean;\n  value?: CheckboxValue;\n  name?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n  className?: string;\n}\n\nexport const Checkbox = ({\n  id,\n  checked,\n  indeterminate,\n  value,\n  name,\n  hint,\n  disabled,\n  ariaLabel,\n  className,\n  onChange,\n  ...otherProps\n}: CheckboxProps) => {\n  const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n  const checkboxRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.checked, value);\n    },\n    [onChange, value],\n  );\n\n  useEffect(() => {\n    if (!checkboxRef.current) return;\n    if (indeterminate === true) {\n      checkboxRef.current.indeterminate = true;\n      return;\n    }\n    checkboxRef.current.indeterminate = false;\n  }, [indeterminate]);\n\n  const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n  return (\n    <Choice\n      htmlFor={componentId}\n      disabled={disabled}\n      className={className}\n      hint={hint}\n      {...otherProps}\n    >\n      <input\n        ref={checkboxRef}\n        id={componentId}\n        type=\"checkbox\"\n        checked={checked}\n        value={value}\n        name={name}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        onChange={handleChange}\n        className={styles.input}\n      />\n    </Choice>\n  );\n};\n"],"names":["useMemo","generateId","useRef","useCallback","useEffect","React","Choice","styles"],"mappings":";;;;;;;;;;;AAoBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAGA,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAEDC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD,QAAA;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEC,qCAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;QAEdD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAEE,eAAM,CAAC,KAAK,EAAA,CACvB,CACK;AAEb;;;;"}

package/dist/components/Checkbox/Checkbox.js

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

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n  id?: string;\n  checked: boolean;\n  indeterminate?: boolean;\n  value?: CheckboxValue;\n  name?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n  className?: string;\n}\n\nexport const Checkbox = ({\n  id,\n  checked,\n  indeterminate,\n  value,\n  name,\n  hint,\n  disabled,\n  ariaLabel,\n  className,\n  onChange,\n  ...otherProps\n}: CheckboxProps) => {\n  const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n  const checkboxRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.checked, value);\n    },\n    [onChange, value],\n  );\n\n  useEffect(() => {\n    if (!checkboxRef.current) return;\n    if (indeterminate === true) {\n      checkboxRef.current.indeterminate = true;\n      return;\n    }\n    checkboxRef.current.indeterminate = false;\n  }, [indeterminate]);\n\n  const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n  return (\n    <Choice\n      htmlFor={componentId}\n      disabled={disabled}\n      className={className}\n      hint={hint}\n      {...otherProps}\n    >\n      <Input\n        ref={checkboxRef}\n        id={componentId}\n        type=\"checkbox\"\n        checked={checked}\n        value={value}\n        name={name}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        onChange={handleChange}\n      />\n    </Choice>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAmBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD,QAAA;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,QAAQ,EAAE,YAAY,EAAA,CACtB,CACK;AAEb;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n  id?: string;\n  checked: boolean;\n  indeterminate?: boolean;\n  value?: CheckboxValue;\n  name?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n  className?: string;\n}\n\nexport const Checkbox = ({\n  id,\n  checked,\n  indeterminate,\n  value,\n  name,\n  hint,\n  disabled,\n  ariaLabel,\n  className,\n  onChange,\n  ...otherProps\n}: CheckboxProps) => {\n  const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n  const checkboxRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.checked, value);\n    },\n    [onChange, value],\n  );\n\n  useEffect(() => {\n    if (!checkboxRef.current) return;\n    if (indeterminate === true) {\n      checkboxRef.current.indeterminate = true;\n      return;\n    }\n    checkboxRef.current.indeterminate = false;\n  }, [indeterminate]);\n\n  const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n  return (\n    <Choice\n      htmlFor={componentId}\n      disabled={disabled}\n      className={className}\n      hint={hint}\n      {...otherProps}\n    >\n      <input\n        ref={checkboxRef}\n        id={componentId}\n        type=\"checkbox\"\n        checked={checked}\n        value={value}\n        name={name}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        onChange={handleChange}\n        className={styles.input}\n      />\n    </Choice>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAoBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD,QAAA;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;QAEdA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,CACvB,CACK;AAEb;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._input_r02q7_1 {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: box-shadow 0.1s, background-color 0.1s;\n}\n._input_r02q7_1:checked {\n  background-color: var(--colors-secondary-blue-base);\n  border-color: var(--colors-secondary-blue-base);\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n  background-repeat: no-repeat;\n  background-size: var(--sizes-4);\n  background-position: center;\n}\n._input_r02q7_1:hover {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_r02q7_1:active {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_r02q7_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._input_r02q7_1:indeterminate {\n  background-color: var(--colors-secondary-blue-base);\n  border-color: var(--colors-secondary-blue-base);\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n  background-repeat: no-repeat;\n  background-size: var(--sizes-4);\n  background-position: center;\n}\n._input_r02q7_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-grey-base);\n  color: var(--colors-neutral-ink-light);\n  cursor: default;\n}\n._input_r02q7_1:checked:disabled {\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n}\n._input_r02q7_1:indeterminate:disabled {\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n}");
+var styles = {"input":"_input_r02q7_1"};
+
+module.exports = styles;
+//# sourceMappingURL=Checkbox.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.scss.cjs","sources":["../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":[".input {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition:\n    box-shadow 0.1s,\n    background-color 0.1s;\n\n  &:checked {\n    background-color: var(--colors-secondary-blue-base);\n    border-color: var(--colors-secondary-blue-base);\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n    background-repeat: no-repeat;\n    background-size: var(--sizes-4);\n    background-position: center;\n  }\n\n  &:hover {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:active {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:indeterminate {\n    background-color: var(--colors-secondary-blue-base);\n    border-color: var(--colors-secondary-blue-base);\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n    background-repeat: no-repeat;\n    background-size: var(--sizes-4);\n    background-position: center;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--colors-neutral-grey-base);\n    color: var(--colors-neutral-ink-light);\n    cursor: default;\n  }\n\n  &:checked:disabled {\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n  }\n\n  &:indeterminate:disabled {\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2zEAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._input_r02q7_1 {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: box-shadow 0.1s, background-color 0.1s;\n}\n._input_r02q7_1:checked {\n  background-color: var(--colors-secondary-blue-base);\n  border-color: var(--colors-secondary-blue-base);\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n  background-repeat: no-repeat;\n  background-size: var(--sizes-4);\n  background-position: center;\n}\n._input_r02q7_1:hover {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_r02q7_1:active {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_r02q7_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._input_r02q7_1:indeterminate {\n  background-color: var(--colors-secondary-blue-base);\n  border-color: var(--colors-secondary-blue-base);\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n  background-repeat: no-repeat;\n  background-size: var(--sizes-4);\n  background-position: center;\n}\n._input_r02q7_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-grey-base);\n  color: var(--colors-neutral-ink-light);\n  cursor: default;\n}\n._input_r02q7_1:checked:disabled {\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n}\n._input_r02q7_1:indeterminate:disabled {\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n}");
+var styles = {"input":"_input_r02q7_1"};
+
+export { styles as default };
+//# sourceMappingURL=Checkbox.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.scss.js","sources":["../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":[".input {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition:\n    box-shadow 0.1s,\n    background-color 0.1s;\n\n  &:checked {\n    background-color: var(--colors-secondary-blue-base);\n    border-color: var(--colors-secondary-blue-base);\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n    background-repeat: no-repeat;\n    background-size: var(--sizes-4);\n    background-position: center;\n  }\n\n  &:hover {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:active {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:indeterminate {\n    background-color: var(--colors-secondary-blue-base);\n    border-color: var(--colors-secondary-blue-base);\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n    background-repeat: no-repeat;\n    background-size: var(--sizes-4);\n    background-position: center;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--colors-neutral-grey-base);\n    color: var(--colors-neutral-ink-light);\n    cursor: default;\n  }\n\n  &:checked:disabled {\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n  }\n\n  &:indeterminate:disabled {\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2zEAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

package/dist/components/Choice/Choice.cjs

@@ -1,12 +1,14 @@
 'use strict';
 
 var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
 var Stack = require('../Stack/Stack.cjs');
 var index = require('../../theme/index.cjs');
-var styled = require('./components/styled.cjs');
-var BlockTooltip = require('./components/BlockTooltip.cjs');
+var Tooltip = require('../Tooltip/Tooltip.cjs');
 var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
 var Text = require('../Text/Text.cjs');
+var Choice_module = require('./Choice.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -20,23 +22,30 @@ const generateClassNames = (prefix) => ({
 });
 const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
     const classNames = generateClassNames(className);
-    const contentMarkup = (React__default.default.createElement(styled.RootLayout, null,
-        inputPosition === 'left' && (React__default.default.createElement(styled.InputLayout, { align: Accessory ? 'center' : 'top' }, children)),
-        Accessory && React__default.default.createElement(styled.AccessoryLayout, null, Accessory),
-        label || hint || error || Badge || Footer ? (React__default.default.createElement(styled.TextLayout, null,
+    const inputLayoutClass = [
+        Choice_module['input-layout'],
+        Accessory ? Choice_module['align-center'] : Choice_module['align-top'],
+    ].join(' ');
+    const wrapperClass = buildClassnames.buildClassnames([
+        Choice_module.wrapper,
+        bordered && Choice_module.bordered,
+        disabled && Choice_module.disabled,
+        className,
+    ]);
+    const contentMarkup = (React__default.default.createElement("div", { className: Choice_module['root-layout'] },
+        inputPosition === 'left' && React__default.default.createElement("div", { className: inputLayoutClass }, children),
+        Accessory && React__default.default.createElement("div", { className: Choice_module['accessory-layout'] }, Accessory),
+        label || hint || error || Badge || Footer ? (React__default.default.createElement("div", { className: Choice_module['text-layout'] },
             React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 Badge,
                 label && (React__default.default.createElement(Text.Text, { variant: labelVariant, className: classNames.label }, label)),
-                (tooltip || tooltipContent) && (React__default.default.createElement(BlockTooltip.BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
+                (tooltip || tooltipContent) && (React__default.default.createElement(Tooltip.Tooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
                     React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", name: "help", width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.lightest })))),
             hint && (React__default.default.createElement(Text.Text, { id: `hint-${htmlFor}`, variant: "hintText", className: classNames.hint }, hint)),
             error && (React__default.default.createElement(Text.Text, { variant: "error", className: classNames.error }, error)),
             Footer)) : null,
-        inputPosition === 'right' && (React__default.default.createElement(styled.InputLayout, { align: Accessory ? 'center' : 'top' }, children))));
-    if (bordered) {
-        return (React__default.default.createElement(styled.BorderedWrapper, { disabled: disabled, className: className }, contentMarkup));
-    }
-    return (React__default.default.createElement(styled.Wrapper, { disabled: disabled, className: className }, contentMarkup));
+        inputPosition === 'right' && React__default.default.createElement("div", { className: inputLayoutClass }, children)));
+    return (React__default.default.createElement("label", { htmlFor: htmlFor, className: wrapperClass }, contentMarkup));
 };
 
 exports.Choice = Choice;

package/dist/components/Choice/Choice.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n} from './components/styled';\nimport { BlockTooltip } from './components/BlockTooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  htmlFor: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  htmlFor,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && (\n            <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n              {hint}\n            </Text>\n          )}\n          {error && (\n            <Text variant=\"error\" className={classNames.error}>\n              {error}\n            </Text>\n          )}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":["React","RootLayout","InputLayout","AccessoryLayout","TextLayout","Stack","Text","BlockTooltip","HelpIcon","theme","BorderedWrapper","Wrapper"],"mappings":"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"}
+{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\nimport { Tooltip } from '../Tooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nimport styles from './Choice.module.scss';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  htmlFor: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  htmlFor,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const inputLayoutClass = [\n    styles['input-layout'],\n    Accessory ? styles['align-center'] : styles['align-top'],\n  ].join(' ');\n\n  const wrapperClass = buildClassnames([\n    styles.wrapper,\n    bordered && styles.bordered,\n    disabled && styles.disabled,\n    className,\n  ]);\n\n  const contentMarkup = (\n    <div className={styles['root-layout']}>\n      {inputPosition === 'left' && <div className={inputLayoutClass}>{children}</div>}\n      {Accessory && <div className={styles['accessory-layout']}>{Accessory}</div>}\n      {label || hint || error || Badge || Footer ? (\n        <div className={styles['text-layout']}>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <Tooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </Tooltip>\n            )}\n          </Stack>\n          {hint && (\n            <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n              {hint}\n            </Text>\n          )}\n          {error && (\n            <Text variant=\"error\" className={classNames.error}>\n              {error}\n            </Text>\n          )}\n          {Footer}\n        </div>\n      ) : null}\n      {inputPosition === 'right' && <div className={inputLayoutClass}>{children}</div>}\n    </div>\n  );\n\n  return (\n    <label htmlFor={htmlFor} className={wrapperClass}>\n      {contentMarkup}\n    </label>\n  );\n};\n"],"names":["styles","buildClassnames","React","Stack","Text","Tooltip","HelpIcon","theme"],"mappings":"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"}

package/dist/components/Choice/Choice.js

@@ -1,10 +1,12 @@
 import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 import { Stack } from '../Stack/Stack.js';
 import { theme } from '../../theme/index.js';
-import { RootLayout, InputLayout, AccessoryLayout, TextLayout, BorderedWrapper, Wrapper } from './components/styled.js';
-import { BlockTooltip } from './components/BlockTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
 import { Text } from '../Text/Text.js';
+import styles from './Choice.module.scss.js';
 
 const generateClassNames = (prefix) => ({
     hint: prefix ? 'choice__hint' : undefined,
@@ -14,23 +16,30 @@ const generateClassNames = (prefix) => ({
 });
 const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
     const classNames = generateClassNames(className);
-    const contentMarkup = (React__default.createElement(RootLayout, null,
-        inputPosition === 'left' && (React__default.createElement(InputLayout, { align: Accessory ? 'center' : 'top' }, children)),
-        Accessory && React__default.createElement(AccessoryLayout, null, Accessory),
-        label || hint || error || Badge || Footer ? (React__default.createElement(TextLayout, null,
+    const inputLayoutClass = [
+        styles['input-layout'],
+        Accessory ? styles['align-center'] : styles['align-top'],
+    ].join(' ');
+    const wrapperClass = buildClassnames([
+        styles.wrapper,
+        bordered && styles.bordered,
+        disabled && styles.disabled,
+        className,
+    ]);
+    const contentMarkup = (React__default.createElement("div", { className: styles['root-layout'] },
+        inputPosition === 'left' && React__default.createElement("div", { className: inputLayoutClass }, children),
+        Accessory && React__default.createElement("div", { className: styles['accessory-layout'] }, Accessory),
+        label || hint || error || Badge || Footer ? (React__default.createElement("div", { className: styles['text-layout'] },
             React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 Badge,
                 label && (React__default.createElement(Text, { variant: labelVariant, className: classNames.label }, label)),
-                (tooltip || tooltipContent) && (React__default.createElement(BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
+                (tooltip || tooltipContent) && (React__default.createElement(Tooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
                     React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", name: "help", width: theme.sizes.base, color: theme.colors.neutral.ink.lightest })))),
             hint && (React__default.createElement(Text, { id: `hint-${htmlFor}`, variant: "hintText", className: classNames.hint }, hint)),
             error && (React__default.createElement(Text, { variant: "error", className: classNames.error }, error)),
             Footer)) : null,
-        inputPosition === 'right' && (React__default.createElement(InputLayout, { align: Accessory ? 'center' : 'top' }, children))));
-    if (bordered) {
-        return (React__default.createElement(BorderedWrapper, { disabled: disabled, className: className }, contentMarkup));
-    }
-    return (React__default.createElement(Wrapper, { disabled: disabled, className: className }, contentMarkup));
+        inputPosition === 'right' && React__default.createElement("div", { className: inputLayoutClass }, children)));
+    return (React__default.createElement("label", { htmlFor: htmlFor, className: wrapperClass }, contentMarkup));
 };
 
 export { Choice };