@activecollab/components 2.0.248 → 2.0.250

package/dist/cjs/components/Button/Styles.js

@@ -46,6 +46,10 @@ StyledButtonElements.displayName = "StyledButtonElements";
 var StyledButtonElement = exports.StyledButtonElement = _styledComponents.default.span.withConfig({
   displayName: "Styles__StyledButtonElement",
   componentId: "sc-vi1kcr-2"
-})(["display:inline-flex;svg{margin:0 4px;}"]);
+})(["", " display:inline-flex;svg{margin:0 4px;}"], {
+  "overflow": "hidden",
+  "textOverflow": "ellipsis",
+  "whiteSpace": "nowrap"
+});
 StyledButtonElement.displayName = "StyledButtonElement";
 //# sourceMappingURL=Styles.js.map

package/dist/cjs/components/Button/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledButton","exports","styled","button","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","active","children","Array","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ButtonProps } from \"./Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledButtonProps extends ButtonProps {\n  iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  vertical-align: middle;\n  font-weight: 500;\n  display: inline-block;\n  line-height: 1;\n  margin: 0;\n  text-decoration: none;\n  font-size: 0.875rem;\n  user-select: none;\n  cursor: pointer;\n  text-align: center;\n  flex-shrink: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 288px;\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: var(--ac-br-rounded);\n      color: var(--page-paper-main);\n\n      &:hover,\n      &:focus-visible {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      border: solid 1px var(--color-theme-700);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover,\n      &:focus-visible {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: var(--ac-br-6);\n      color: var(--color-primary);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: var(--ac-br-6);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n    ${(props) =>\n    props.iconOnly &&\n    css`\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      padding: 0;\n      width: 32px;\n\n      ${(props.size === \"small\" || props.size === \"big\") &&\n      css`\n        border-radius: var(--ac-br-rounded);\n      `};\n\n      ${props.size === \"small\" &&\n      css`\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        width: 40px;\n      `}\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      .c-btn__elements__element:first-child svg {\n        margin-left: -6px;\n      }\n      .c-btn__elements__element:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${(props.size === \"small\" || props.size === \"big\") &&\n      css`\n        border-radius: var(--ac-br-rounded);\n      `}\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      .c-btn__elements__element:first-child svg {\n        margin-left: -4px;\n      }\n      .c-btn__elements__element:last-child svg {\n        margin-right: -4px;\n      }\n      ${props.size === \"small\" &&\n      css`\n        border-radius: var(--ac-br-4);\n      `}\n      ${props.size === \"big\" &&\n      css`\n        border-radius: var(--ac-br-8);\n      `}\n    `}\n\n    ${(props) =>\n    props.active &&\n    css`\n      ${(props.variant === \"primary\" || props.variant === \"contained\") &&\n      css`\n        background-color: var(--color-primary-800);\n      `}\n\n      ${(props.variant === \"secondary\" || props.variant === \"outlined\") &&\n      css`\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      `}\n\n      ${props.variant === \"dark transparent\" &&\n      css`\n        background-color: var(--only-black);\n      `}\n\n      ${props.variant === \"circle raised\" &&\n      css`\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      `}\n\n    ${(props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n      css`\n        background-color: var(--color-primary-200);\n      `}\n\n    ${(props.variant === \"option\" || props.variant === \"text gray\") &&\n      css`\n        color: var(--color-primary);\n        &:hover,\n        &:focus-visible {\n          color: var(--color-primary);\n        }\n        ${props.children instanceof Array &&\n        css`\n          background-color: var(--color-theme-300);\n        `}\n      `}\n    `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n  display: flex;\n  align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n  display: inline-flex;\n  svg {\n    margin: 0 4px;\n  }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledButton","exports","styled","button","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","active","children","Array","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { ButtonProps } from \"./Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledButtonProps extends ButtonProps {\n  iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  vertical-align: middle;\n  font-weight: 500;\n  display: inline-block;\n  line-height: 1;\n  margin: 0;\n  text-decoration: none;\n  font-size: 0.875rem;\n  user-select: none;\n  cursor: pointer;\n  text-align: center;\n  flex-shrink: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 288px;\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: var(--ac-br-rounded);\n      color: var(--page-paper-main);\n\n      &:hover,\n      &:focus-visible {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      border: solid 1px var(--color-theme-700);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover,\n      &:focus-visible {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: var(--ac-br-6);\n      color: var(--color-primary);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: var(--ac-br-6);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n    ${(props) =>\n    props.iconOnly &&\n    css`\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      padding: 0;\n      width: 32px;\n\n      ${(props.size === \"small\" || props.size === \"big\") &&\n      css`\n        border-radius: var(--ac-br-rounded);\n      `};\n\n      ${props.size === \"small\" &&\n      css`\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        width: 40px;\n      `}\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      .c-btn__elements__element:first-child svg {\n        margin-left: -6px;\n      }\n      .c-btn__elements__element:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${(props.size === \"small\" || props.size === \"big\") &&\n      css`\n        border-radius: var(--ac-br-rounded);\n      `}\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      .c-btn__elements__element:first-child svg {\n        margin-left: -4px;\n      }\n      .c-btn__elements__element:last-child svg {\n        margin-right: -4px;\n      }\n      ${props.size === \"small\" &&\n      css`\n        border-radius: var(--ac-br-4);\n      `}\n      ${props.size === \"big\" &&\n      css`\n        border-radius: var(--ac-br-8);\n      `}\n    `}\n\n    ${(props) =>\n    props.active &&\n    css`\n      ${(props.variant === \"primary\" || props.variant === \"contained\") &&\n      css`\n        background-color: var(--color-primary-800);\n      `}\n\n      ${(props.variant === \"secondary\" || props.variant === \"outlined\") &&\n      css`\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      `}\n\n      ${props.variant === \"dark transparent\" &&\n      css`\n        background-color: var(--only-black);\n      `}\n\n      ${props.variant === \"circle raised\" &&\n      css`\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      `}\n\n    ${(props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n      css`\n        background-color: var(--color-primary-200);\n      `}\n\n    ${(props.variant === \"option\" || props.variant === \"text gray\") &&\n      css`\n        color: var(--color-primary);\n        &:hover,\n        &:focus-visible {\n          color: var(--color-primary);\n        }\n        ${props.children instanceof Array &&\n        css`\n          background-color: var(--color-theme-300);\n        `}\n      `}\n    `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n  display: flex;\n  align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n  ${tw`tw-truncate`}\n  display: inline-flex;\n  svg {\n    margin: 0 4px;\n  }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":"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"}

package/dist/cjs/components/ChooseV2/ChooseV2.js

@@ -4,20 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChooseV2 = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react = _interopRequireWildcard(require("react"));
+var _Styles = require("./Styles");
+var _utils = require("../../utils");
 var _ButtonGroup = require("../ButtonGroup");
-var _Choose = require("../Choose");
+var _RadioButton = require("../RadioButton");
+var _Typography = require("../Typography");
+var _excluded = ["required", "multiple", "invalid", "options", "selected", "onChange"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var StyledChoose = (0, _styledComponents.default)(_Choose.Choose).withConfig({
-  displayName: "ChooseV2__StyledChoose",
-  componentId: "sc-142e30o-0"
-})(["", ""], function (props) {
-  return !props.active && (0, _styledComponents.css)(["background-color:transparent !important;"]);
-});
-var ChooseV2 = exports.ChooseV2 = function ChooseV2(_ref) {
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ChooseV2 = exports.ChooseV2 = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _parentSize$width, _flexSize$width;
   var _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
     _ref$multiple = _ref.multiple,
@@ -26,28 +32,101 @@ var ChooseV2 = exports.ChooseV2 = function ChooseV2(_ref) {
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
     options = _ref.options,
     selected = _ref.selected,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var internalRef = (0, _react.useRef)(null);
+  var flexContainerRef = (0, _react.useRef)(null);
+  var handleRef = (0, _utils.useForkRef)(ref, internalRef);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    useVerticalLayout = _useState2[0],
+    setUseVerticalLayout = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isReady = _useState4[0],
+    setIsReady = _useState4[1];
+  var parentSize = (0, _utils.useResizeObserver)(internalRef);
+  var flexSize = (0, _utils.useResizeObserver)(flexContainerRef);
+  var parentWidth = (_parentSize$width = parentSize === null || parentSize === void 0 ? void 0 : parentSize.width) !== null && _parentSize$width !== void 0 ? _parentSize$width : 0;
+  var flexWidth = (_flexSize$width = flexSize === null || flexSize === void 0 ? void 0 : flexSize.width) !== null && _flexSize$width !== void 0 ? _flexSize$width : 0;
+  (0, _react.useEffect)(function () {
+    if (parentWidth === 0) return;
+    var measure = function measure() {
+      var temp = document.createElement("div");
+      temp.style.display = "inline-flex";
+      temp.style.visibility = "hidden";
+      temp.style.position = "absolute";
+      temp.style.whiteSpace = "nowrap";
+      temp.style.pointerEvents = "none";
+      document.body.appendChild(temp);
+      options.forEach(function (option) {
+        var button = document.createElement("button");
+        button.textContent = option.name;
+        button.style.padding = "6px 12px";
+        button.style.border = "1px solid transparent";
+        button.style.marginRight = "4px";
+        temp.appendChild(button);
+      });
+      var totalWidth = temp.offsetWidth + 8;
+      document.body.removeChild(temp);
+      setUseVerticalLayout(totalWidth > parentWidth);
+      setIsReady(true);
+    };
+    requestAnimationFrame(measure);
+  }, [parentWidth, options, flexWidth]);
   var handleSelect = function handleSelect(id) {
     if (multiple) {
       var newSelected = selected.includes(id) ? selected.filter(function (s) {
         return s !== id;
       }) : [...selected, id];
-      if (required && newSelected.length === 0) {
-        return;
-      }
+      if (required && newSelected.length === 0) return;
       onChange(newSelected);
     } else {
-      if (required && selected.includes(id)) {
-        return;
-      }
       var _newSelected = selected.includes(id) ? [] : [id];
+      if (required && _newSelected.length === 0) return;
       onChange(_newSelected);
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_ButtonGroup.ButtonGroup, {
+  var handleRadioChange = function handleRadioChange(id) {
+    if (multiple) handleSelect(id);else onChange([id]);
+  };
+  if (!isReady) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: handleRef,
+      style: {
+        width: "100%",
+        minHeight: "32px"
+      }
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: handleRef
+  }, rest, {
+    style: {
+      display: "flex",
+      width: "100%"
+    }
+  }), useVerticalLayout ? /*#__PURE__*/_react.default.createElement(_Styles.StyledVerticalContainer, null, options.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement(_Styles.StyledRadioOption, {
+      key: option.id,
+      "data-disabled": option.disabled,
+      onClick: function onClick() {
+        return !option.disabled && handleRadioChange(option.id);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_RadioButton.RadioButton, {
+      checked: selected.includes(option.id),
+      disabled: option.disabled,
+      onChange: function onChange() {
+        return !option.disabled && handleRadioChange(option.id);
+      },
+      name: multiple ? "choose-v2-".concat(option.id) : "choose-v2-group"
+    }), /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, option.name));
+  })) : /*#__PURE__*/_react.default.createElement(_Styles.StyledFlexContainer, {
+    ref: flexContainerRef
+  }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.ButtonGroup, {
     invalid: invalid
   }, options.map(function (option) {
-    return /*#__PURE__*/_react.default.createElement(StyledChoose, {
+    return /*#__PURE__*/_react.default.createElement(_Styles.StyledChoose, {
       key: option.id,
       active: selected.includes(option.id),
       disabled: option.disabled,
@@ -55,6 +134,7 @@ var ChooseV2 = exports.ChooseV2 = function ChooseV2(_ref) {
         return handleSelect(option.id);
       }
     }, option.name);
-  }));
-};
+  }))));
+});
+ChooseV2.displayName = "ChooseV2";
 //# sourceMappingURL=ChooseV2.js.map

package/dist/cjs/components/ChooseV2/ChooseV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChooseV2.js","names":["_react","_interopRequireDefault","require","_styledComponents","_interopRequireWildcard","_ButtonGroup","_Choose","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","StyledChoose","styled","Choose","withConfig","displayName","componentId","props","active","css","ChooseV2","exports","_ref","_ref$required","required","_ref$multiple","multiple","_ref$invalid","invalid","options","selected","onChange","handleSelect","id","newSelected","includes","filter","s","length","createElement","ButtonGroup","map","option","key","disabled","onClick","name"],"sources":["../../../../src/components/ChooseV2/ChooseV2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport styled, { css } from \"styled-components\";\n\nimport { ButtonGroup } from \"../ButtonGroup\";\nimport { Choose } from \"../Choose\";\n\nexport interface ChooseV2Option {\n  id: string | number;\n  name: string;\n  disabled?: boolean;\n}\n\nexport interface ChooseV2Props {\n  required?: boolean;\n  multiple?: boolean;\n  invalid?: boolean;\n  options: ChooseV2Option[];\n  selected: (string | number)[];\n  onChange: (ids: (string | number)[]) => void;\n}\n\nconst StyledChoose = styled(Choose)`\n  ${(props) =>\n    !props.active &&\n    css`\n      background-color: transparent !important;\n    `}\n`;\n\nexport const ChooseV2: React.FC<ChooseV2Props> = ({\n  required = false,\n  multiple = false,\n  invalid = false,\n  options,\n  selected,\n  onChange,\n}) => {\n  const handleSelect = (id: string | number) => {\n    if (multiple) {\n      const newSelected = selected.includes(id)\n        ? selected.filter((s) => s !== id)\n        : [...selected, id];\n      if (required && newSelected.length === 0) {\n        return;\n      }\n      onChange(newSelected);\n    } else {\n      if (required && selected.includes(id)) {\n        return;\n      }\n      const newSelected = selected.includes(id) ? [] : [id];\n      onChange(newSelected);\n    }\n  };\n\n  return (\n    <ButtonGroup invalid={invalid}>\n      {options.map((option) => (\n        <StyledChoose\n          key={option.id}\n          active={selected.includes(option.id)}\n          disabled={option.disabled}\n          onClick={() => handleSelect(option.id)}\n        >\n          {option.name}\n        </StyledChoose>\n      ))}\n    </ButtonGroup>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ChooseV2.js","names":["_react","_interopRequireWildcard","require","_Styles","_utils","_ButtonGroup","_RadioButton","_Typography","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","arr2","l","Symbol","iterator","f","next","done","push","value","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ChooseV2","exports","React","forwardRef","_ref","ref","_parentSize$width","_flexSize$width","_ref$required","required","_ref$multiple","multiple","_ref$invalid","invalid","options","selected","onChange","rest","internalRef","useRef","flexContainerRef","handleRef","useForkRef","_useState","useState","_useState2","useVerticalLayout","setUseVerticalLayout","_useState3","_useState4","isReady","setIsReady","parentSize","useResizeObserver","flexSize","parentWidth","width","flexWidth","useEffect","measure","temp","document","createElement","style","display","visibility","position","whiteSpace","pointerEvents","body","appendChild","forEach","option","button","textContent","padding","border","marginRight","totalWidth","offsetWidth","removeChild","requestAnimationFrame","handleSelect","id","newSelected","includes","filter","s","handleRadioChange","minHeight","StyledVerticalContainer","map","StyledRadioOption","disabled","onClick","RadioButton","checked","concat","Body2","StyledFlexContainer","ButtonGroup","StyledChoose","active","displayName"],"sources":["../../../../src/components/ChooseV2/ChooseV2.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from \"react\";\n\nimport {\n  StyledChoose,\n  StyledFlexContainer,\n  StyledRadioOption,\n  StyledVerticalContainer,\n} from \"./Styles\";\nimport { useResizeObserver, useForkRef } from \"../../utils\";\nimport { ButtonGroup } from \"../ButtonGroup\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Body2 } from \"../Typography\";\n\nexport interface ChooseV2Option {\n  id: string | number;\n  name: string;\n  disabled?: boolean;\n}\n\nexport interface ChooseV2Props {\n  required?: boolean;\n  multiple?: boolean;\n  invalid?: boolean;\n  options: ChooseV2Option[];\n  selected: (string | number)[];\n  onChange: (ids: (string | number)[]) => void;\n}\n\nexport const ChooseV2 = React.forwardRef<\n  HTMLDivElement,\n  ChooseV2Props &\n    Omit<React.ComponentPropsWithoutRef<\"div\">, keyof ChooseV2Props>\n>(\n  (\n    {\n      required = false,\n      multiple = false,\n      invalid = false,\n      options,\n      selected,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const internalRef = useRef<HTMLDivElement | null>(null);\n    const flexContainerRef = useRef<HTMLDivElement | null>(null);\n    const handleRef = useForkRef(ref, internalRef);\n\n    const [useVerticalLayout, setUseVerticalLayout] = useState(false);\n    const [isReady, setIsReady] = useState(false);\n\n    const parentSize = useResizeObserver(internalRef);\n    const flexSize = useResizeObserver(flexContainerRef);\n\n    const parentWidth = parentSize?.width ?? 0;\n    const flexWidth = flexSize?.width ?? 0;\n\n    useEffect(() => {\n      if (parentWidth === 0) return;\n\n      const measure = () => {\n        const temp = document.createElement(\"div\");\n        temp.style.display = \"inline-flex\";\n        temp.style.visibility = \"hidden\";\n        temp.style.position = \"absolute\";\n        temp.style.whiteSpace = \"nowrap\";\n        temp.style.pointerEvents = \"none\";\n        document.body.appendChild(temp);\n\n        options.forEach((option) => {\n          const button = document.createElement(\"button\");\n          button.textContent = option.name;\n          button.style.padding = \"6px 12px\";\n          button.style.border = \"1px solid transparent\";\n          button.style.marginRight = \"4px\";\n          temp.appendChild(button);\n        });\n\n        const totalWidth = temp.offsetWidth + 8;\n        document.body.removeChild(temp);\n\n        setUseVerticalLayout(totalWidth > parentWidth);\n        setIsReady(true);\n      };\n\n      requestAnimationFrame(measure);\n    }, [parentWidth, options, flexWidth]);\n\n    const handleSelect = (id: string | number) => {\n      if (multiple) {\n        const newSelected = selected.includes(id)\n          ? selected.filter((s) => s !== id)\n          : [...selected, id];\n        if (required && newSelected.length === 0) return;\n        onChange(newSelected);\n      } else {\n        const newSelected = selected.includes(id) ? [] : [id];\n        if (required && newSelected.length === 0) return;\n        onChange(newSelected);\n      }\n    };\n\n    const handleRadioChange = (id: string | number) => {\n      if (multiple) handleSelect(id);\n      else onChange([id]);\n    };\n\n    if (!isReady) {\n      return (\n        <div ref={handleRef} style={{ width: \"100%\", minHeight: \"32px\" }} />\n      );\n    }\n\n    return (\n      <div ref={handleRef} {...rest} style={{ display: \"flex\", width: \"100%\" }}>\n        {useVerticalLayout ? (\n          <StyledVerticalContainer>\n            {options.map((option) => (\n              <StyledRadioOption\n                key={option.id}\n                data-disabled={option.disabled}\n                onClick={() => !option.disabled && handleRadioChange(option.id)}\n              >\n                <RadioButton\n                  checked={selected.includes(option.id)}\n                  disabled={option.disabled}\n                  onChange={() =>\n                    !option.disabled && handleRadioChange(option.id)\n                  }\n                  name={multiple ? `choose-v2-${option.id}` : \"choose-v2-group\"}\n                />\n                <Body2>{option.name}</Body2>\n              </StyledRadioOption>\n            ))}\n          </StyledVerticalContainer>\n        ) : (\n          <StyledFlexContainer ref={flexContainerRef}>\n            <ButtonGroup invalid={invalid}>\n              {options.map((option) => (\n                <StyledChoose\n                  key={option.id}\n                  active={selected.includes(option.id)}\n                  disabled={option.disabled}\n                  onClick={() => handleSelect(option.id)}\n                >\n                  {option.name}\n                </StyledChoose>\n              ))}\n            </ButtonGroup>\n          </StyledFlexContainer>\n        )}\n      </div>\n    );\n  }\n);\n\nChooseV2.displayName = \"ChooseV2\";\n"],"mappings":"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"}

package/dist/cjs/components/ChooseV2/Styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledVerticalContainer = exports.StyledRadioOption = exports.StyledFlexContainer = exports.StyledChoose = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Choose = require("../Choose/Choose");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var StyledChoose = exports.StyledChoose = (0, _styledComponents.default)(_Choose.Choose).withConfig({
+  displayName: "Styles__StyledChoose",
+  componentId: "sc-uv67fb-0"
+})(["flex-shrink:0;white-space:nowrap;", ""], function (props) {
+  return !props.active && (0, _styledComponents.css)(["background-color:transparent !important;"]);
+});
+StyledChoose.displayName = "StyledChoose";
+var StyledVerticalContainer = exports.StyledVerticalContainer = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledVerticalContainer",
+  componentId: "sc-uv67fb-1"
+})(["display:flex;flex-direction:column;width:100%;gap:8px;"]);
+StyledVerticalContainer.displayName = "StyledVerticalContainer";
+var StyledRadioOption = exports.StyledRadioOption = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledRadioOption",
+  componentId: "sc-uv67fb-2"
+})(["display:flex;align-items:center;gap:6px;cursor:pointer;&:hover{opacity:0.8;}&[data-disabled=\"true\"]{opacity:0.5;cursor:not-allowed;}"]);
+StyledRadioOption.displayName = "StyledRadioOption";
+var StyledFlexContainer = exports.StyledFlexContainer = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledFlexContainer",
+  componentId: "sc-uv67fb-3"
+})(["display:flex;width:100%;"]);
+StyledFlexContainer.displayName = "StyledFlexContainer";
+//# sourceMappingURL=Styles.js.map

package/dist/cjs/components/ChooseV2/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_Choose","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledChoose","exports","styled","Choose","withConfig","displayName","componentId","props","active","css","StyledVerticalContainer","div","StyledRadioOption","StyledFlexContainer"],"sources":["../../../../src/components/ChooseV2/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Choose } from \"../Choose/Choose\";\n\nexport const StyledChoose = styled(Choose)`\n  flex-shrink: 0;\n  white-space: nowrap;\n\n  ${(props) =>\n    !props.active &&\n    css`\n      background-color: transparent !important;\n    `}\n`;\n\nStyledChoose.displayName = \"StyledChoose\";\n\nexport const StyledVerticalContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n`;\n\nStyledVerticalContainer.displayName = \"StyledVerticalContainer\";\n\nexport const StyledRadioOption = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.8;\n  }\n\n  &[data-disabled=\"true\"] {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`;\n\nStyledRadioOption.displayName = \"StyledRadioOption\";\n\nexport const StyledFlexContainer = styled.div`\n  display: flex;\n  width: 100%;\n`;\n\nStyledFlexContainer.displayName = \"StyledFlexContainer\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAA0C,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAEnC,IAAMY,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,yBAAM,EAACC,cAAM,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8CAItC,UAACC,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,MAAM,QACbC,qBAAG,+CAEF;AAAA,EACJ;AAEDT,YAAY,CAACK,WAAW,GAAG,cAAc;AAElC,IAAMK,uBAAuB,GAAAT,OAAA,CAAAS,uBAAA,GAAGR,yBAAM,CAACS,GAAG,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8DAKhD;AAEDI,uBAAuB,CAACL,WAAW,GAAG,yBAAyB;AAExD,IAAMO,iBAAiB,GAAAX,OAAA,CAAAW,iBAAA,GAAGV,yBAAM,CAACS,GAAG,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8IAc1C;AAEDM,iBAAiB,CAACP,WAAW,GAAG,mBAAmB;AAE5C,IAAMQ,mBAAmB,GAAAZ,OAAA,CAAAY,mBAAA,GAAGX,yBAAM,CAACS,GAAG,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gCAG5C;AAEDO,mBAAmB,CAACR,WAAW,GAAG,qBAAqB"}

package/dist/esm/components/Button/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,UAAU,iBAAkB,SAAQ,WAAW;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,sFA4RxB,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAGhC,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAK/B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,UAAU,iBAAkB,SAAQ,WAAW;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,sFA4RxB,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAGhC,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAM/B,CAAC"}

package/dist/esm/components/Button/Styles.js

@@ -14,6 +14,10 @@ StyledButtonElements.displayName = "StyledButtonElements";
 export const StyledButtonElement = styled.span.withConfig({
   displayName: "Styles__StyledButtonElement",
   componentId: "sc-vi1kcr-2"
-})(["display:inline-flex;svg{margin:0 4px;}"]);
+})(["", " display:inline-flex;svg{margin:0 4px;}"], {
+  "overflow": "hidden",
+  "textOverflow": "ellipsis",
+  "whiteSpace": "nowrap"
+});
 StyledButtonElement.displayName = "StyledButtonElement";
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/Button/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledButton","button","withConfig","displayName","componentId","props","size","variant","iconOnly","active","children","Array","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ButtonProps } from \"./Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledButtonProps extends ButtonProps {\n  iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  vertical-align: middle;\n  font-weight: 500;\n  display: inline-block;\n  line-height: 1;\n  margin: 0;\n  text-decoration: none;\n  font-size: 0.875rem;\n  user-select: none;\n  cursor: pointer;\n  text-align: center;\n  flex-shrink: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 288px;\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: var(--ac-br-rounded);\n      color: var(--page-paper-main);\n\n      &:hover,\n      &:focus-visible {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      border: solid 1px var(--color-theme-700);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover,\n      &:focus-visible {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: var(--ac-br-6);\n      color: var(--color-primary);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: var(--ac-br-6);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n    ${(props) =>\n    props.iconOnly &&\n    css`\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      padding: 0;\n      width: 32px;\n\n      ${(props.size === \"small\" || props.size === \"big\") &&\n      css`\n        border-radius: var(--ac-br-rounded);\n      `};\n\n      ${props.size === \"small\" &&\n      css`\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        width: 40px;\n      `}\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      .c-btn__elements__element:first-child svg {\n        margin-left: -6px;\n      }\n      .c-btn__elements__element:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${(props.size === \"small\" || props.size === \"big\") &&\n      css`\n        border-radius: var(--ac-br-rounded);\n      `}\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      .c-btn__elements__element:first-child svg {\n        margin-left: -4px;\n      }\n      .c-btn__elements__element:last-child svg {\n        margin-right: -4px;\n      }\n      ${props.size === \"small\" &&\n      css`\n        border-radius: var(--ac-br-4);\n      `}\n      ${props.size === \"big\" &&\n      css`\n        border-radius: var(--ac-br-8);\n      `}\n    `}\n\n    ${(props) =>\n    props.active &&\n    css`\n      ${(props.variant === \"primary\" || props.variant === \"contained\") &&\n      css`\n        background-color: var(--color-primary-800);\n      `}\n\n      ${(props.variant === \"secondary\" || props.variant === \"outlined\") &&\n      css`\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      `}\n\n      ${props.variant === \"dark transparent\" &&\n      css`\n        background-color: var(--only-black);\n      `}\n\n      ${props.variant === \"circle raised\" &&\n      css`\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      `}\n\n    ${(props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n      css`\n        background-color: var(--color-primary-200);\n      `}\n\n    ${(props.variant === \"option\" || props.variant === \"text gray\") &&\n      css`\n        color: var(--color-primary);\n        &:hover,\n        &:focus-visible {\n          color: var(--color-primary);\n        }\n        ${props.children instanceof Array &&\n        css`\n          background-color: var(--color-theme-300);\n        `}\n      `}\n    `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n  display: flex;\n  align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n  display: inline-flex;\n  svg {\n    margin: 0 4px;\n  }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledButton","button","withConfig","displayName","componentId","props","size","variant","iconOnly","active","children","Array","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { ButtonProps } from \"./Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledButtonProps extends ButtonProps {\n  iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  vertical-align: middle;\n  font-weight: 500;\n  display: inline-block;\n  line-height: 1;\n  margin: 0;\n  text-decoration: none;\n  font-size: 0.875rem;\n  user-select: none;\n  cursor: pointer;\n  text-align: center;\n  flex-shrink: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 288px;\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: var(--ac-br-rounded);\n      color: var(--page-paper-main);\n\n      &:hover,\n      &:focus-visible {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      border: solid 1px var(--color-theme-700);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover,\n      &:focus-visible {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: var(--ac-br-6);\n      color: var(--color-primary);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: var(--ac-br-6);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n    ${(props) =>\n    props.iconOnly &&\n    css`\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      padding: 0;\n      width: 32px;\n\n      ${(props.size === \"small\" || props.size === \"big\") &&\n      css`\n        border-radius: var(--ac-br-rounded);\n      `};\n\n      ${props.size === \"small\" &&\n      css`\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        width: 40px;\n      `}\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      .c-btn__elements__element:first-child svg {\n        margin-left: -6px;\n      }\n      .c-btn__elements__element:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${(props.size === \"small\" || props.size === \"big\") &&\n      css`\n        border-radius: var(--ac-br-rounded);\n      `}\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      .c-btn__elements__element:first-child svg {\n        margin-left: -4px;\n      }\n      .c-btn__elements__element:last-child svg {\n        margin-right: -4px;\n      }\n      ${props.size === \"small\" &&\n      css`\n        border-radius: var(--ac-br-4);\n      `}\n      ${props.size === \"big\" &&\n      css`\n        border-radius: var(--ac-br-8);\n      `}\n    `}\n\n    ${(props) =>\n    props.active &&\n    css`\n      ${(props.variant === \"primary\" || props.variant === \"contained\") &&\n      css`\n        background-color: var(--color-primary-800);\n      `}\n\n      ${(props.variant === \"secondary\" || props.variant === \"outlined\") &&\n      css`\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      `}\n\n      ${props.variant === \"dark transparent\" &&\n      css`\n        background-color: var(--only-black);\n      `}\n\n      ${props.variant === \"circle raised\" &&\n      css`\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      `}\n\n    ${(props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n      css`\n        background-color: var(--color-primary-200);\n      `}\n\n    ${(props.variant === \"option\" || props.variant === \"text gray\") &&\n      css`\n        color: var(--color-primary);\n        &:hover,\n        &:focus-visible {\n          color: var(--color-primary);\n        }\n        ${props.children instanceof Array &&\n        css`\n          background-color: var(--color-theme-300);\n        `}\n      `}\n    `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n  display: flex;\n  align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n  ${tw`tw-truncate`}\n  display: inline-flex;\n  svg {\n    margin: 0 4px;\n  }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":"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"}

package/dist/esm/components/ChooseV2/ChooseV2.d.ts

@@ -12,5 +12,5 @@ export interface ChooseV2Props {
     selected: (string | number)[];
     onChange: (ids: (string | number)[]) => void;
 }
-export declare const ChooseV2: React.FC<ChooseV2Props>;
+export declare const ChooseV2: React.ForwardRefExoticComponent<ChooseV2Props & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof ChooseV2Props> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=ChooseV2.d.ts.map

package/dist/esm/components/ChooseV2/ChooseV2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChooseV2.d.ts","sourceRoot":"","sources":["../../../../src/components/ChooseV2/ChooseV2.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;CAC9C;AAUD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwC5C,CAAC"}
+{"version":3,"file":"ChooseV2.d.ts","sourceRoot":"","sources":["../../../../src/components/ChooseV2/ChooseV2.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAa3D,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,QAAQ,8MA+HpB,CAAC"}

package/dist/esm/components/ChooseV2/ChooseV2.js

@@ -1,42 +1,104 @@
-import React from "react";
-import styled, { css } from "styled-components";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useRef, useState, useEffect } from "react";
+import { StyledChoose, StyledFlexContainer, StyledRadioOption, StyledVerticalContainer } from "./Styles";
+import { useResizeObserver, useForkRef } from "../../utils";
 import { ButtonGroup } from "../ButtonGroup";
-import { Choose } from "../Choose";
-const StyledChoose = styled(Choose).withConfig({
-  displayName: "ChooseV2__StyledChoose",
-  componentId: "sc-142e30o-0"
-})(["", ""], props => !props.active && css(["background-color:transparent !important;"]));
-export const ChooseV2 = _ref => {
+import { RadioButton } from "../RadioButton";
+import { Body2 } from "../Typography";
+export const ChooseV2 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  var _parentSize$width, _flexSize$width;
   let {
     required = false,
     multiple = false,
     invalid = false,
     options,
     selected,
-    onChange
+    onChange,
+    ...rest
   } = _ref;
+  const internalRef = useRef(null);
+  const flexContainerRef = useRef(null);
+  const handleRef = useForkRef(ref, internalRef);
+  const [useVerticalLayout, setUseVerticalLayout] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const parentSize = useResizeObserver(internalRef);
+  const flexSize = useResizeObserver(flexContainerRef);
+  const parentWidth = (_parentSize$width = parentSize == null ? void 0 : parentSize.width) != null ? _parentSize$width : 0;
+  const flexWidth = (_flexSize$width = flexSize == null ? void 0 : flexSize.width) != null ? _flexSize$width : 0;
+  useEffect(() => {
+    if (parentWidth === 0) return;
+    const measure = () => {
+      const temp = document.createElement("div");
+      temp.style.display = "inline-flex";
+      temp.style.visibility = "hidden";
+      temp.style.position = "absolute";
+      temp.style.whiteSpace = "nowrap";
+      temp.style.pointerEvents = "none";
+      document.body.appendChild(temp);
+      options.forEach(option => {
+        const button = document.createElement("button");
+        button.textContent = option.name;
+        button.style.padding = "6px 12px";
+        button.style.border = "1px solid transparent";
+        button.style.marginRight = "4px";
+        temp.appendChild(button);
+      });
+      const totalWidth = temp.offsetWidth + 8;
+      document.body.removeChild(temp);
+      setUseVerticalLayout(totalWidth > parentWidth);
+      setIsReady(true);
+    };
+    requestAnimationFrame(measure);
+  }, [parentWidth, options, flexWidth]);
   const handleSelect = id => {
     if (multiple) {
       const newSelected = selected.includes(id) ? selected.filter(s => s !== id) : [...selected, id];
-      if (required && newSelected.length === 0) {
-        return;
-      }
+      if (required && newSelected.length === 0) return;
       onChange(newSelected);
     } else {
-      if (required && selected.includes(id)) {
-        return;
-      }
       const newSelected = selected.includes(id) ? [] : [id];
+      if (required && newSelected.length === 0) return;
       onChange(newSelected);
     }
   };
-  return /*#__PURE__*/React.createElement(ButtonGroup, {
+  const handleRadioChange = id => {
+    if (multiple) handleSelect(id);else onChange([id]);
+  };
+  if (!isReady) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: handleRef,
+      style: {
+        width: "100%",
+        minHeight: "32px"
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: handleRef
+  }, rest, {
+    style: {
+      display: "flex",
+      width: "100%"
+    }
+  }), useVerticalLayout ? /*#__PURE__*/React.createElement(StyledVerticalContainer, null, options.map(option => /*#__PURE__*/React.createElement(StyledRadioOption, {
+    key: option.id,
+    "data-disabled": option.disabled,
+    onClick: () => !option.disabled && handleRadioChange(option.id)
+  }, /*#__PURE__*/React.createElement(RadioButton, {
+    checked: selected.includes(option.id),
+    disabled: option.disabled,
+    onChange: () => !option.disabled && handleRadioChange(option.id),
+    name: multiple ? "choose-v2-" + option.id : "choose-v2-group"
+  }), /*#__PURE__*/React.createElement(Body2, null, option.name)))) : /*#__PURE__*/React.createElement(StyledFlexContainer, {
+    ref: flexContainerRef
+  }, /*#__PURE__*/React.createElement(ButtonGroup, {
     invalid: invalid
   }, options.map(option => /*#__PURE__*/React.createElement(StyledChoose, {
     key: option.id,
     active: selected.includes(option.id),
     disabled: option.disabled,
     onClick: () => handleSelect(option.id)
-  }, option.name)));
-};
+  }, option.name)))));
+});
+ChooseV2.displayName = "ChooseV2";
 //# sourceMappingURL=ChooseV2.js.map

package/dist/esm/components/ChooseV2/ChooseV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChooseV2.js","names":["React","styled","css","ButtonGroup","Choose","StyledChoose","withConfig","displayName","componentId","props","active","ChooseV2","_ref","required","multiple","invalid","options","selected","onChange","handleSelect","id","newSelected","includes","filter","s","length","createElement","map","option","key","disabled","onClick","name"],"sources":["../../../../src/components/ChooseV2/ChooseV2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport styled, { css } from \"styled-components\";\n\nimport { ButtonGroup } from \"../ButtonGroup\";\nimport { Choose } from \"../Choose\";\n\nexport interface ChooseV2Option {\n  id: string | number;\n  name: string;\n  disabled?: boolean;\n}\n\nexport interface ChooseV2Props {\n  required?: boolean;\n  multiple?: boolean;\n  invalid?: boolean;\n  options: ChooseV2Option[];\n  selected: (string | number)[];\n  onChange: (ids: (string | number)[]) => void;\n}\n\nconst StyledChoose = styled(Choose)`\n  ${(props) =>\n    !props.active &&\n    css`\n      background-color: transparent !important;\n    `}\n`;\n\nexport const ChooseV2: React.FC<ChooseV2Props> = ({\n  required = false,\n  multiple = false,\n  invalid = false,\n  options,\n  selected,\n  onChange,\n}) => {\n  const handleSelect = (id: string | number) => {\n    if (multiple) {\n      const newSelected = selected.includes(id)\n        ? selected.filter((s) => s !== id)\n        : [...selected, id];\n      if (required && newSelected.length === 0) {\n        return;\n      }\n      onChange(newSelected);\n    } else {\n      if (required && selected.includes(id)) {\n        return;\n      }\n      const newSelected = selected.includes(id) ? [] : [id];\n      onChange(newSelected);\n    }\n  };\n\n  return (\n    <ButtonGroup invalid={invalid}>\n      {options.map((option) => (\n        <StyledChoose\n          key={option.id}\n          active={selected.includes(option.id)}\n          disabled={option.disabled}\n          onClick={() => handleSelect(option.id)}\n        >\n          {option.name}\n        </StyledChoose>\n      ))}\n    </ButtonGroup>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,MAAM,QAAQ,WAAW;AAiBlC,MAAMC,YAAY,GAAGJ,MAAM,CAACG,MAAM,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAC9BC,KAAK,IACN,CAACA,KAAK,CAACC,MAAM,IACbR,GAAG,8CAEF,CACJ;AAED,OAAO,MAAMS,QAAiC,GAAGC,IAAA,IAO3C;EAAA,IAP4C;IAChDC,QAAQ,GAAG,KAAK;IAChBC,QAAQ,GAAG,KAAK;IAChBC,OAAO,GAAG,KAAK;IACfC,OAAO;IACPC,QAAQ;IACRC;EACF,CAAC,GAAAN,IAAA;EACC,MAAMO,YAAY,GAAIC,EAAmB,IAAK;IAC5C,IAAIN,QAAQ,EAAE;MACZ,MAAMO,WAAW,GAAGJ,QAAQ,CAACK,QAAQ,CAACF,EAAE,CAAC,GACrCH,QAAQ,CAACM,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKJ,EAAE,CAAC,GAChC,CAAC,GAAGH,QAAQ,EAAEG,EAAE,CAAC;MACrB,IAAIP,QAAQ,IAAIQ,WAAW,CAACI,MAAM,KAAK,CAAC,EAAE;QACxC;MACF;MACAP,QAAQ,CAACG,WAAW,CAAC;IACvB,CAAC,MAAM;MACL,IAAIR,QAAQ,IAAII,QAAQ,CAACK,QAAQ,CAACF,EAAE,CAAC,EAAE;QACrC;MACF;MACA,MAAMC,WAAW,GAAGJ,QAAQ,CAACK,QAAQ,CAACF,EAAE,CAAC,GAAG,EAAE,GAAG,CAACA,EAAE,CAAC;MACrDF,QAAQ,CAACG,WAAW,CAAC;IACvB;EACF,CAAC;EAED,oBACErB,KAAA,CAAA0B,aAAA,CAACvB,WAAW;IAACY,OAAO,EAAEA;EAAQ,GAC3BC,OAAO,CAACW,GAAG,CAAEC,MAAM,iBAClB5B,KAAA,CAAA0B,aAAA,CAACrB,YAAY;IACXwB,GAAG,EAAED,MAAM,CAACR,EAAG;IACfV,MAAM,EAAEO,QAAQ,CAACK,QAAQ,CAACM,MAAM,CAACR,EAAE,CAAE;IACrCU,QAAQ,EAAEF,MAAM,CAACE,QAAS;IAC1BC,OAAO,EAAEA,CAAA,KAAMZ,YAAY,CAACS,MAAM,CAACR,EAAE;EAAE,GAEtCQ,MAAM,CAACI,IACI,CACf,CACU,CAAC;AAElB,CAAC"}
+{"version":3,"file":"ChooseV2.js","names":["React","useRef","useState","useEffect","StyledChoose","StyledFlexContainer","StyledRadioOption","StyledVerticalContainer","useResizeObserver","useForkRef","ButtonGroup","RadioButton","Body2","ChooseV2","forwardRef","_ref","ref","_parentSize$width","_flexSize$width","required","multiple","invalid","options","selected","onChange","rest","internalRef","flexContainerRef","handleRef","useVerticalLayout","setUseVerticalLayout","isReady","setIsReady","parentSize","flexSize","parentWidth","width","flexWidth","measure","temp","document","createElement","style","display","visibility","position","whiteSpace","pointerEvents","body","appendChild","forEach","option","button","textContent","name","padding","border","marginRight","totalWidth","offsetWidth","removeChild","requestAnimationFrame","handleSelect","id","newSelected","includes","filter","s","length","handleRadioChange","minHeight","_extends","map","key","disabled","onClick","checked","active","displayName"],"sources":["../../../../src/components/ChooseV2/ChooseV2.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from \"react\";\n\nimport {\n  StyledChoose,\n  StyledFlexContainer,\n  StyledRadioOption,\n  StyledVerticalContainer,\n} from \"./Styles\";\nimport { useResizeObserver, useForkRef } from \"../../utils\";\nimport { ButtonGroup } from \"../ButtonGroup\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Body2 } from \"../Typography\";\n\nexport interface ChooseV2Option {\n  id: string | number;\n  name: string;\n  disabled?: boolean;\n}\n\nexport interface ChooseV2Props {\n  required?: boolean;\n  multiple?: boolean;\n  invalid?: boolean;\n  options: ChooseV2Option[];\n  selected: (string | number)[];\n  onChange: (ids: (string | number)[]) => void;\n}\n\nexport const ChooseV2 = React.forwardRef<\n  HTMLDivElement,\n  ChooseV2Props &\n    Omit<React.ComponentPropsWithoutRef<\"div\">, keyof ChooseV2Props>\n>(\n  (\n    {\n      required = false,\n      multiple = false,\n      invalid = false,\n      options,\n      selected,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const internalRef = useRef<HTMLDivElement | null>(null);\n    const flexContainerRef = useRef<HTMLDivElement | null>(null);\n    const handleRef = useForkRef(ref, internalRef);\n\n    const [useVerticalLayout, setUseVerticalLayout] = useState(false);\n    const [isReady, setIsReady] = useState(false);\n\n    const parentSize = useResizeObserver(internalRef);\n    const flexSize = useResizeObserver(flexContainerRef);\n\n    const parentWidth = parentSize?.width ?? 0;\n    const flexWidth = flexSize?.width ?? 0;\n\n    useEffect(() => {\n      if (parentWidth === 0) return;\n\n      const measure = () => {\n        const temp = document.createElement(\"div\");\n        temp.style.display = \"inline-flex\";\n        temp.style.visibility = \"hidden\";\n        temp.style.position = \"absolute\";\n        temp.style.whiteSpace = \"nowrap\";\n        temp.style.pointerEvents = \"none\";\n        document.body.appendChild(temp);\n\n        options.forEach((option) => {\n          const button = document.createElement(\"button\");\n          button.textContent = option.name;\n          button.style.padding = \"6px 12px\";\n          button.style.border = \"1px solid transparent\";\n          button.style.marginRight = \"4px\";\n          temp.appendChild(button);\n        });\n\n        const totalWidth = temp.offsetWidth + 8;\n        document.body.removeChild(temp);\n\n        setUseVerticalLayout(totalWidth > parentWidth);\n        setIsReady(true);\n      };\n\n      requestAnimationFrame(measure);\n    }, [parentWidth, options, flexWidth]);\n\n    const handleSelect = (id: string | number) => {\n      if (multiple) {\n        const newSelected = selected.includes(id)\n          ? selected.filter((s) => s !== id)\n          : [...selected, id];\n        if (required && newSelected.length === 0) return;\n        onChange(newSelected);\n      } else {\n        const newSelected = selected.includes(id) ? [] : [id];\n        if (required && newSelected.length === 0) return;\n        onChange(newSelected);\n      }\n    };\n\n    const handleRadioChange = (id: string | number) => {\n      if (multiple) handleSelect(id);\n      else onChange([id]);\n    };\n\n    if (!isReady) {\n      return (\n        <div ref={handleRef} style={{ width: \"100%\", minHeight: \"32px\" }} />\n      );\n    }\n\n    return (\n      <div ref={handleRef} {...rest} style={{ display: \"flex\", width: \"100%\" }}>\n        {useVerticalLayout ? (\n          <StyledVerticalContainer>\n            {options.map((option) => (\n              <StyledRadioOption\n                key={option.id}\n                data-disabled={option.disabled}\n                onClick={() => !option.disabled && handleRadioChange(option.id)}\n              >\n                <RadioButton\n                  checked={selected.includes(option.id)}\n                  disabled={option.disabled}\n                  onChange={() =>\n                    !option.disabled && handleRadioChange(option.id)\n                  }\n                  name={multiple ? `choose-v2-${option.id}` : \"choose-v2-group\"}\n                />\n                <Body2>{option.name}</Body2>\n              </StyledRadioOption>\n            ))}\n          </StyledVerticalContainer>\n        ) : (\n          <StyledFlexContainer ref={flexContainerRef}>\n            <ButtonGroup invalid={invalid}>\n              {options.map((option) => (\n                <StyledChoose\n                  key={option.id}\n                  active={selected.includes(option.id)}\n                  disabled={option.disabled}\n                  onClick={() => handleSelect(option.id)}\n                >\n                  {option.name}\n                </StyledChoose>\n              ))}\n            </ButtonGroup>\n          </StyledFlexContainer>\n        )}\n      </div>\n    );\n  }\n);\n\nChooseV2.displayName = \"ChooseV2\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAE1D,SACEC,YAAY,EACZC,mBAAmB,EACnBC,iBAAiB,EACjBC,uBAAuB,QAClB,UAAU;AACjB,SAASC,iBAAiB,EAAEC,UAAU,QAAQ,aAAa;AAC3D,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,KAAK,QAAQ,eAAe;AAiBrC,OAAO,MAAMC,QAAQ,gBAAGb,KAAK,CAACc,UAAU,CAKtC,CAAAC,IAAA,EAUEC,GAAG,KACA;EAAA,IAAAC,iBAAA,EAAAC,eAAA;EAAA,IAVH;IACEC,QAAQ,GAAG,KAAK;IAChBC,QAAQ,GAAG,KAAK;IAChBC,OAAO,GAAG,KAAK;IACfC,OAAO;IACPC,QAAQ;IACRC,QAAQ;IACR,GAAGC;EACL,CAAC,GAAAV,IAAA;EAGD,MAAMW,WAAW,GAAGzB,MAAM,CAAwB,IAAI,CAAC;EACvD,MAAM0B,gBAAgB,GAAG1B,MAAM,CAAwB,IAAI,CAAC;EAC5D,MAAM2B,SAAS,GAAGnB,UAAU,CAACO,GAAG,EAAEU,WAAW,CAAC;EAE9C,MAAM,CAACG,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG5B,QAAQ,CAAC,KAAK,CAAC;EACjE,MAAM,CAAC6B,OAAO,EAAEC,UAAU,CAAC,GAAG9B,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAM+B,UAAU,GAAGzB,iBAAiB,CAACkB,WAAW,CAAC;EACjD,MAAMQ,QAAQ,GAAG1B,iBAAiB,CAACmB,gBAAgB,CAAC;EAEpD,MAAMQ,WAAW,IAAAlB,iBAAA,GAAGgB,UAAU,oBAAVA,UAAU,CAAEG,KAAK,YAAAnB,iBAAA,GAAI,CAAC;EAC1C,MAAMoB,SAAS,IAAAnB,eAAA,GAAGgB,QAAQ,oBAARA,QAAQ,CAAEE,KAAK,YAAAlB,eAAA,GAAI,CAAC;EAEtCf,SAAS,CAAC,MAAM;IACd,IAAIgC,WAAW,KAAK,CAAC,EAAE;IAEvB,MAAMG,OAAO,GAAGA,CAAA,KAAM;MACpB,MAAMC,IAAI,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;MAC1CF,IAAI,CAACG,KAAK,CAACC,OAAO,GAAG,aAAa;MAClCJ,IAAI,CAACG,KAAK,CAACE,UAAU,GAAG,QAAQ;MAChCL,IAAI,CAACG,KAAK,CAACG,QAAQ,GAAG,UAAU;MAChCN,IAAI,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;MAChCP,IAAI,CAACG,KAAK,CAACK,aAAa,GAAG,MAAM;MACjCP,QAAQ,CAACQ,IAAI,CAACC,WAAW,CAACV,IAAI,CAAC;MAE/BjB,OAAO,CAAC4B,OAAO,CAAEC,MAAM,IAAK;QAC1B,MAAMC,MAAM,GAAGZ,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;QAC/CW,MAAM,CAACC,WAAW,GAAGF,MAAM,CAACG,IAAI;QAChCF,MAAM,CAACV,KAAK,CAACa,OAAO,GAAG,UAAU;QACjCH,MAAM,CAACV,KAAK,CAACc,MAAM,GAAG,uBAAuB;QAC7CJ,MAAM,CAACV,KAAK,CAACe,WAAW,GAAG,KAAK;QAChClB,IAAI,CAACU,WAAW,CAACG,MAAM,CAAC;MAC1B,CAAC,CAAC;MAEF,MAAMM,UAAU,GAAGnB,IAAI,CAACoB,WAAW,GAAG,CAAC;MACvCnB,QAAQ,CAACQ,IAAI,CAACY,WAAW,CAACrB,IAAI,CAAC;MAE/BT,oBAAoB,CAAC4B,UAAU,GAAGvB,WAAW,CAAC;MAC9CH,UAAU,CAAC,IAAI,CAAC;IAClB,CAAC;IAED6B,qBAAqB,CAACvB,OAAO,CAAC;EAChC,CAAC,EAAE,CAACH,WAAW,EAAEb,OAAO,EAAEe,SAAS,CAAC,CAAC;EAErC,MAAMyB,YAAY,GAAIC,EAAmB,IAAK;IAC5C,IAAI3C,QAAQ,EAAE;MACZ,MAAM4C,WAAW,GAAGzC,QAAQ,CAAC0C,QAAQ,CAACF,EAAE,CAAC,GACrCxC,QAAQ,CAAC2C,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKJ,EAAE,CAAC,GAChC,CAAC,GAAGxC,QAAQ,EAAEwC,EAAE,CAAC;MACrB,IAAI5C,QAAQ,IAAI6C,WAAW,CAACI,MAAM,KAAK,CAAC,EAAE;MAC1C5C,QAAQ,CAACwC,WAAW,CAAC;IACvB,CAAC,MAAM;MACL,MAAMA,WAAW,GAAGzC,QAAQ,CAAC0C,QAAQ,CAACF,EAAE,CAAC,GAAG,EAAE,GAAG,CAACA,EAAE,CAAC;MACrD,IAAI5C,QAAQ,IAAI6C,WAAW,CAACI,MAAM,KAAK,CAAC,EAAE;MAC1C5C,QAAQ,CAACwC,WAAW,CAAC;IACvB;EACF,CAAC;EAED,MAAMK,iBAAiB,GAAIN,EAAmB,IAAK;IACjD,IAAI3C,QAAQ,EAAE0C,YAAY,CAACC,EAAE,CAAC,CAAC,KAC1BvC,QAAQ,CAAC,CAACuC,EAAE,CAAC,CAAC;EACrB,CAAC;EAED,IAAI,CAAChC,OAAO,EAAE;IACZ,oBACE/B,KAAA,CAAAyC,aAAA;MAAKzB,GAAG,EAAEY,SAAU;MAACc,KAAK,EAAE;QAAEN,KAAK,EAAE,MAAM;QAAEkC,SAAS,EAAE;MAAO;IAAE,CAAE,CAAC;EAExE;EAEA,oBACEtE,KAAA,CAAAyC,aAAA,QAAA8B,QAAA;IAAKvD,GAAG,EAAEY;EAAU,GAAKH,IAAI;IAAEiB,KAAK,EAAE;MAAEC,OAAO,EAAE,MAAM;MAAEP,KAAK,EAAE;IAAO;EAAE,IACtEP,iBAAiB,gBAChB7B,KAAA,CAAAyC,aAAA,CAAClC,uBAAuB,QACrBe,OAAO,CAACkD,GAAG,CAAErB,MAAM,iBAClBnD,KAAA,CAAAyC,aAAA,CAACnC,iBAAiB;IAChBmE,GAAG,EAAEtB,MAAM,CAACY,EAAG;IACf,iBAAeZ,MAAM,CAACuB,QAAS;IAC/BC,OAAO,EAAEA,CAAA,KAAM,CAACxB,MAAM,CAACuB,QAAQ,IAAIL,iBAAiB,CAAClB,MAAM,CAACY,EAAE;EAAE,gBAEhE/D,KAAA,CAAAyC,aAAA,CAAC9B,WAAW;IACViE,OAAO,EAAErD,QAAQ,CAAC0C,QAAQ,CAACd,MAAM,CAACY,EAAE,CAAE;IACtCW,QAAQ,EAAEvB,MAAM,CAACuB,QAAS;IAC1BlD,QAAQ,EAAEA,CAAA,KACR,CAAC2B,MAAM,CAACuB,QAAQ,IAAIL,iBAAiB,CAAClB,MAAM,CAACY,EAAE,CAChD;IACDT,IAAI,EAAElC,QAAQ,kBAAgB+B,MAAM,CAACY,EAAE,GAAK;EAAkB,CAC/D,CAAC,eACF/D,KAAA,CAAAyC,aAAA,CAAC7B,KAAK,QAAEuC,MAAM,CAACG,IAAY,CACV,CACpB,CACsB,CAAC,gBAE1BtD,KAAA,CAAAyC,aAAA,CAACpC,mBAAmB;IAACW,GAAG,EAAEW;EAAiB,gBACzC3B,KAAA,CAAAyC,aAAA,CAAC/B,WAAW;IAACW,OAAO,EAAEA;EAAQ,GAC3BC,OAAO,CAACkD,GAAG,CAAErB,MAAM,iBAClBnD,KAAA,CAAAyC,aAAA,CAACrC,YAAY;IACXqE,GAAG,EAAEtB,MAAM,CAACY,EAAG;IACfc,MAAM,EAAEtD,QAAQ,CAAC0C,QAAQ,CAACd,MAAM,CAACY,EAAE,CAAE;IACrCW,QAAQ,EAAEvB,MAAM,CAACuB,QAAS;IAC1BC,OAAO,EAAEA,CAAA,KAAMb,YAAY,CAACX,MAAM,CAACY,EAAE;EAAE,GAEtCZ,MAAM,CAACG,IACI,CACf,CACU,CACM,CAEpB,CAAC;AAEV,CACF,CAAC;AAEDzC,QAAQ,CAACiE,WAAW,GAAG,UAAU"}

package/dist/esm/components/ChooseV2/Styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledChoose: import("styled-components").StyledComponent<import("react").FC<import("../Choose/Choose").IChooseProps>, any, {}, never>;
+export declare const StyledVerticalContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledRadioOption: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFlexContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+//# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/ChooseV2/Styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ChooseV2/Styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,YAAY,0HASxB,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEAKnC,CAAC;AAIF,eAAO,MAAM,iBAAiB,oEAc7B,CAAC;AAIF,eAAO,MAAM,mBAAmB,oEAG/B,CAAC"}