@gympass/yoga 7.87.1 → 7.88.1

package/cjs/Dropdown/native/index.js

@@ -1 +1,35 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _Dropdown=_interopRequireDefault(require("./Dropdown"));var _default=_Dropdown["default"];exports["default"]=_default;
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var native_exports = {};
+__export(native_exports, {
+  default: () => native_default
+});
+module.exports = __toCommonJS(native_exports);
+var import_Dropdown = __toESM(require("./Dropdown"));
+var native_default = import_Dropdown.default;

package/cjs/Dropdown/web/Dropdown.js

@@ -1,218 +1,405 @@
 "use strict";
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _downshift = _interopRequireDefault(require("downshift"));
-
-var _propTypes = require("prop-types");
-
-var _yogaIcons = require("@gympass/yoga-icons");
-
-var _Helper = _interopRequireDefault(require("../../Input/web/Helper"));
-
-var _Input = _interopRequireDefault(require("../../Input/web/Input"));
-
-var _excluded = ["isOpen", "selected"],
-    _excluded2 = ["error", "label", "disabled", "full", "options", "onChange", "isMaxHeight"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 _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; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var full = _ref.full,
-      dropdown = _ref.theme.yoga.components.dropdown;
-  return "\n    position: relative;\n    display: inline-block;\n    vertical-align: top;\n    \n    width: " + (full ? '100%' : dropdown.width + "px") + ";\n  ";
-});
-
-var labelTransition = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var _ref2$theme$yoga = _ref2.theme.yoga,
-      transition = _ref2$theme$yoga.transition,
-      _ref2$theme$yoga$comp = _ref2$theme$yoga.components,
-      input = _ref2$theme$yoga$comp.input,
-      dropdown = _ref2$theme$yoga$comp.dropdown;
-  return "\n    transform: translateY(-" + (input.height / 2 - 2) + "px);\n    transition-property: transform, font-size, color;\n    transition-duration: " + transition.duration[1] + "ms;\n    transition-timing-function: cubic-bezier(" + transition.timing[0].join() + ");\n\n    font-size: " + input.label.font.size.typed + "px;\n    color: " + dropdown.input.label.color + ";\n  ";
-});
-
-var Selector = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
-  var isOpen = _ref3.isOpen,
-      disabled = _ref3.disabled,
-      selected = _ref3.selected,
-      error = _ref3.error,
-      _ref3$theme$yoga = _ref3.theme.yoga,
-      colors = _ref3$theme$yoga.colors,
-      dropdown = _ref3$theme$yoga.components.dropdown;
-  return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), !disabled ? "\n          fieldset {\n            " + (isOpen || selected ? "border-color: " + dropdown.hover.selector.border.color + ";" : '') + "\n\n            " + (error && !isOpen ? "border-color: " + colors.feedback.attention[1] + ";\n                " : '') + "\n          }\n          &:hover {\n            fieldset {\n              border-color: " + (error && !isOpen ? dropdown.hover.selector.border.error : dropdown.hover.selector.border.color) + ";\n            }\n          }\n        " : '');
-});
-
-var Field = (0, _styledComponents["default"])(_Input["default"])(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  pointer-events: none;\n\n  ", "\n"])), function (_ref4) {
-  var value = _ref4.value,
-      isOpen = _ref4.isOpen,
-      disabled = _ref4.disabled;
-  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    ", "\n\n    ", "\n  "])), isOpen && !disabled ? (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n          & ~ legend {\n            max-width: max-content;\n          }\n\n          & ~ label {\n            ", ";\n          }\n        "])), labelTransition) : '', value && !disabled ? (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n          & ~ label {\n            ", ";\n          }\n        "])), labelTransition) : '');
-});
-
-var Button = _styledComponents["default"].button(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref5) {
-  var disabled = _ref5.disabled,
-      dropdown = _ref5.theme.yoga.components.dropdown;
-  return "\n    display: flex;\n    align-content: center;\n    align-items: center;\n    justify-content: flex-end;\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    padding-right: " + dropdown.button.padding.right + "px;\n    padding-top: " + dropdown.button.padding.top + "px;\n    padding-bottom: " + dropdown.button.padding.bottom + "px;\n\n    border: none;\n    outline: none;\n    background-color: transparent;\n    cursor: " + (disabled ? 'not-allowed' : 'pointer') + ";\n  ";
-});
-
-var OptionsList = _styledComponents["default"].ul(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref6) {
-  var isMaxHeight = _ref6.isMaxHeight,
-      dropdown = _ref6.theme.yoga.components.dropdown;
-  return "\n    position: absolute;\n    top: 46px;\n    z-index: 1;\n    box-sizing: border-box;\n\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    list-style-type: none;\n\n    background: " + dropdown.optionsList.backgroundColor + ";\n    border-width: " + dropdown.optionsList.border.width + "px;\n    border-style: solid;\n    border-color: " + dropdown.optionsList.border.color + ";\n    border-top: none;\n\n    border-radius:\n        " + dropdown.option.border.radius.topLeft + "px\n        " + dropdown.option.border.radius.topRight + "px\n        " + dropdown.option.border.radius.bottomRight + "px\n        " + dropdown.option.border.radius.bottomLeft + "px;\n\n    " + (isMaxHeight && "max-height: " + dropdown.option.height * 3.5 + "px;") + "\n  ";
-});
-
-var Option = _styledComponents["default"].li(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref7) {
-  var isSelected = _ref7.isSelected,
-      highlighted = _ref7.highlighted,
-      _ref7$theme$yoga = _ref7.theme.yoga,
-      baseFont = _ref7$theme$yoga.baseFont,
-      dropdown = _ref7$theme$yoga.components.dropdown;
-  return "\n    display: flex;\n    align-items: center;\n    height: " + dropdown.option.height + "px;\n    padding:\n      " + dropdown.option.padding.top + "px\n      " + dropdown.option.padding.right + "px\n      " + dropdown.option.padding.bottom + "px\n      " + dropdown.option.padding.left + "px;\n    cursor: pointer;\n\n    font-family: " + baseFont.family + ";\n    font-size: " + (isSelected ? dropdown.selected.option.font.size : dropdown.option.font.size) + "px;\n    line-height: " + dropdown.option.font.lineHeight + "px;\n\n    font-weight: " + (isSelected ? "" + dropdown.selected.option.font.weight : "" + dropdown.option.font.weight) + ";\n\n    color: " + (isSelected ? dropdown.selected.option.font.color : dropdown.option.font.color) + ";\n\n    " + (highlighted ? "background-color: " + dropdown.hover.option.backgroundColor + ";" : '') + "\n\n    &:hover {\n      background-color: " + dropdown.hover.option.backgroundColor + ";\n    }\n\n    &:last-child {\n      border-radius:\n        " + dropdown.option.border.radius.topLeft + "px\n        " + dropdown.option.border.radius.topRight + "px\n        " + dropdown.option.border.radius.bottomRight + "px\n        " + dropdown.option.border.radius.bottomLeft + "px;\n    }\n  ";
-});
-
-var ArrowIcon = (0, _styledComponents["default"])(function (_ref8) {
-  var isOpen = _ref8.isOpen,
-      selected = _ref8.selected,
-      props = _objectWithoutPropertiesLoose(_ref8, _excluded);
-
-  return /*#__PURE__*/_react["default"].createElement(_yogaIcons.ChevronDown, _extends({
-    width: 20,
-    height: 20
-  }, props));
-})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref9) {
-  var isOpen = _ref9.isOpen,
-      selected = _ref9.selected,
-      disabled = _ref9.disabled,
-      dropdown = _ref9.theme.yoga.components.dropdown;
-  return "\n    fill: " + dropdown.arrow.fill + ";\n    " + (disabled ? "fill: " + dropdown.disabled.arrow.fill + ";" : '') + ";\n    " + (selected && !disabled ? "fill: " + dropdown.selected.arrow.fill + ";" : '') + ";\n    transform: rotate(" + (isOpen ? '180deg' : '0') + ");\n  ";
-});
-/** Gympass Dropdown is a multiple choice type of menu. */
-
-var Dropdown = /*#__PURE__*/_react["default"].forwardRef(function (_ref10, ref) {
-  var error = _ref10.error,
-      label = _ref10.label,
-      disabled = _ref10.disabled,
-      full = _ref10.full,
-      options = _ref10.options,
-      onChange = _ref10.onChange,
-      isMaxHeight = _ref10.isMaxHeight,
-      rest = _objectWithoutPropertiesLoose(_ref10, _excluded2);
-
-  var inputRef = ref || _react["default"].useRef(null);
-
-  var selectedOption = options.find(function (item) {
-    return item.selected === true;
-  });
-
-  var _useState = (0, _react.useState)(selectedOption),
-      localSelectedItem = _useState[0],
-      setLocalSelectedItem = _useState[1];
-
-  (0, _react.useEffect)(function () {
-    setLocalSelectedItem(selectedOption);
-  }, [options]);
-  var onLocalChange = (0, _react.useCallback)(function (opt) {
-    setLocalSelectedItem(opt);
-    onChange(opt);
-  }, [onChange]);
-  return /*#__PURE__*/_react["default"].createElement(_downshift["default"], {
-    initialSelectedItem: selectedOption,
-    selectedItemChanged: function selectedItemChanged(prevItem, item) {
-      return prevItem !== item;
-    },
-    itemToString: function itemToString(item) {
-      return item ? item.label : '';
-    },
-    onChange: onLocalChange,
-    selectedItem: localSelectedItem
-  }, function (_ref11) {
-    var getInputProps = _ref11.getInputProps,
-        getItemProps = _ref11.getItemProps,
-        getRootProps = _ref11.getRootProps,
-        getMenuProps = _ref11.getMenuProps,
-        getToggleButtonProps = _ref11.getToggleButtonProps,
-        selectedItem = _ref11.selectedItem,
-        highlightedIndex = _ref11.highlightedIndex,
-        isOpen = _ref11.isOpen;
-    return /*#__PURE__*/_react["default"].createElement(Wrapper, _extends({
-      full: full
-    }, getRootProps(), rest), /*#__PURE__*/_react["default"].createElement(Selector, {
-      isOpen: isOpen,
-      disabled: disabled,
-      error: error,
-      selected: selectedItem !== null
-    }, /*#__PURE__*/_react["default"].createElement(Field, _extends({
-      readOnly: true,
-      disabled: disabled,
-      selected: selectedItem !== null,
-      isOpen: isOpen,
-      label: label,
-      full: full,
-      ref: inputRef,
-      includeAriaAttributes: false
-    }, getInputProps())), /*#__PURE__*/_react["default"].createElement(Button, _extends({
-      isOpen: isOpen,
-      disabled: disabled
-    }, getToggleButtonProps()), /*#__PURE__*/_react["default"].createElement(ArrowIcon, {
-      isOpen: isOpen,
-      selected: selectedItem !== null,
-      disabled: disabled
-    }))), isOpen && /*#__PURE__*/_react["default"].createElement(OptionsList, _extends({
-      isMaxHeight: isMaxHeight,
-      selected: selectedItem !== null
-    }, getMenuProps()), options.map(function (item, index) {
-      return /*#__PURE__*/_react["default"].createElement(Option, getItemProps({
-        key: item.value,
-        item: item,
-        isSelected: selectedItem === item,
-        highlighted: highlightedIndex === index
-      }), item.label);
-    })), error && /*#__PURE__*/_react["default"].createElement(_Helper["default"], {
-      error: error
-    }));
-  });
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
+  default: () => Dropdown_default
 });
-
+module.exports = __toCommonJS(Dropdown_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_downshift = __toESM(require("downshift"));
+var import_prop_types = require("prop-types");
+var import_yoga_icons = require("@gympass/yoga-icons");
+var import_Helper = __toESM(require("../../Input/web/Helper"));
+var import_Input = __toESM(require("../../Input/web/Input"));
+const Wrapper = import_styled_components.default.div`
+  ${({
+  full,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    
+    width: ${full ? "100%" : `${dropdown.width}px`};
+  `}
+`;
+const labelTransition = import_styled_components.css`
+  ${({
+  theme: {
+    yoga: {
+      transition,
+      components: { input, dropdown }
+    }
+  }
+}) => `
+    transform: translateY(-${input.height / 2 - 2}px);
+    transition-property: transform, font-size, color;
+    transition-duration: ${transition.duration[1]}ms;
+    transition-timing-function: cubic-bezier(${transition.timing[0].join()});
+
+    font-size: ${input.label.font.size.typed}px;
+    color: ${dropdown.input.label.color};
+  `}
+`;
+const Selector = import_styled_components.default.div`
+  ${({
+  isOpen,
+  disabled,
+  selected,
+  error,
+  theme: {
+    yoga: {
+      colors,
+      components: { dropdown }
+    }
+  }
+}) => import_styled_components.css`
+    ${!disabled ? `
+          fieldset {
+            ${isOpen || selected ? `border-color: ${dropdown.hover.selector.border.color};` : ""}
+
+            ${error && !isOpen ? `border-color: ${colors.feedback.attention[1]};
+                ` : ""}
+          }
+          &:hover {
+            fieldset {
+              border-color: ${error && !isOpen ? dropdown.hover.selector.border.error : dropdown.hover.selector.border.color};
+            }
+          }
+        ` : ""}
+  `}
+`;
+const Field = (0, import_styled_components.default)(import_Input.default)`
+  pointer-events: none;
+
+  ${({ value, isOpen, disabled }) => import_styled_components.css`
+    ${isOpen && !disabled ? import_styled_components.css`
+          & ~ legend {
+            max-width: max-content;
+          }
+
+          & ~ label {
+            ${labelTransition};
+          }
+        ` : ""}
+
+    ${value && !disabled ? import_styled_components.css`
+          & ~ label {
+            ${labelTransition};
+          }
+        ` : ""}
+  `}
+`;
+const Button = import_styled_components.default.button`
+  ${({
+  disabled,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-end;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    padding-right: ${dropdown.button.padding.right}px;
+    padding-top: ${dropdown.button.padding.top}px;
+    padding-bottom: ${dropdown.button.padding.bottom}px;
+
+    border: none;
+    outline: none;
+    background-color: transparent;
+    cursor: ${disabled ? "not-allowed" : "pointer"};
+  `}
+`;
+const OptionsList = import_styled_components.default.ul`
+  ${({
+  isMaxHeight,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    position: absolute;
+    top: 46px;
+    z-index: 1;
+    box-sizing: border-box;
+
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    list-style-type: none;
+
+    background: ${dropdown.optionsList.backgroundColor};
+    border-width: ${dropdown.optionsList.border.width}px;
+    border-style: solid;
+    border-color: ${dropdown.optionsList.border.color};
+    border-top: none;
+
+    border-radius:
+        ${dropdown.option.border.radius.topLeft}px
+        ${dropdown.option.border.radius.topRight}px
+        ${dropdown.option.border.radius.bottomRight}px
+        ${dropdown.option.border.radius.bottomLeft}px;
+
+    ${isMaxHeight && `max-height: ${dropdown.option.height * 3.5}px;`}
+  `}
+`;
+const Option = import_styled_components.default.li`
+  ${({
+  isSelected,
+  highlighted,
+  theme: {
+    yoga: {
+      baseFont,
+      components: { dropdown }
+    }
+  }
+}) => `
+    display: flex;
+    align-items: center;
+    height: ${dropdown.option.height}px;
+    padding:
+      ${dropdown.option.padding.top}px
+      ${dropdown.option.padding.right}px
+      ${dropdown.option.padding.bottom}px
+      ${dropdown.option.padding.left}px;
+    cursor: pointer;
+
+    font-family: ${baseFont.family};
+    font-size: ${isSelected ? dropdown.selected.option.font.size : dropdown.option.font.size}px;
+    line-height: ${dropdown.option.font.lineHeight}px;
+
+    font-weight: ${isSelected ? `${dropdown.selected.option.font.weight}` : `${dropdown.option.font.weight}`};
+
+    color: ${isSelected ? dropdown.selected.option.font.color : dropdown.option.font.color};
+
+    ${highlighted ? `background-color: ${dropdown.hover.option.backgroundColor};` : ""}
+
+    &:hover {
+      background-color: ${dropdown.hover.option.backgroundColor};
+    }
+
+    &:last-child {
+      border-radius:
+        ${dropdown.option.border.radius.topLeft}px
+        ${dropdown.option.border.radius.topRight}px
+        ${dropdown.option.border.radius.bottomRight}px
+        ${dropdown.option.border.radius.bottomLeft}px;
+    }
+  `}
+`;
+const ArrowIcon = (0, import_styled_components.default)((_a) => {
+  var _b = _a, { isOpen, selected } = _b, props = __objRest(_b, ["isOpen", "selected"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.ChevronDown, __spreadValues({ width: 20, height: 20 }, props));
+})`
+  ${({
+  isOpen,
+  selected,
+  disabled,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    fill: ${dropdown.arrow.fill};
+    ${disabled ? `fill: ${dropdown.disabled.arrow.fill};` : ""};
+    ${selected && !disabled ? `fill: ${dropdown.selected.arrow.fill};` : ""};
+    transform: rotate(${isOpen ? "180deg" : "0"});
+  `}
+`;
+const Dropdown = import_react.default.forwardRef(
+  (_c, ref) => {
+    var _d = _c, { error, label, disabled, full, options, onChange, isMaxHeight } = _d, rest = __objRest(_d, ["error", "label", "disabled", "full", "options", "onChange", "isMaxHeight"]);
+    const inputRef = ref || import_react.default.useRef(null);
+    const selectedOption = options.find((item) => item.selected === true);
+    const [localSelectedItem, setLocalSelectedItem] = (0, import_react.useState)(selectedOption);
+    (0, import_react.useEffect)(() => {
+      setLocalSelectedItem(selectedOption);
+    }, [options]);
+    const onLocalChange = (0, import_react.useCallback)(
+      (opt) => {
+        setLocalSelectedItem(opt);
+        onChange(opt);
+      },
+      [onChange]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_downshift.default,
+      {
+        initialSelectedItem: selectedOption,
+        selectedItemChanged: (prevItem, item) => prevItem !== item,
+        itemToString: (item) => item ? item.label : "",
+        onChange: onLocalChange,
+        selectedItem: localSelectedItem,
+        children: ({
+          getInputProps,
+          getItemProps,
+          getRootProps,
+          getMenuProps,
+          getToggleButtonProps,
+          selectedItem,
+          highlightedIndex,
+          isOpen
+        }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, __spreadProps(__spreadValues(__spreadValues({ full }, getRootProps()), rest), { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            Selector,
+            {
+              isOpen,
+              disabled,
+              error,
+              selected: selectedItem !== null,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  Field,
+                  __spreadValues({
+                    readOnly: true,
+                    disabled,
+                    selected: selectedItem !== null,
+                    isOpen,
+                    label,
+                    full,
+                    ref: inputRef,
+                    includeAriaAttributes: false
+                  }, getInputProps())
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  Button,
+                  __spreadProps(__spreadValues({
+                    isOpen,
+                    disabled
+                  }, getToggleButtonProps()), {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      ArrowIcon,
+                      {
+                        isOpen,
+                        selected: selectedItem !== null,
+                        disabled
+                      }
+                    )
+                  })
+                )
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            OptionsList,
+            __spreadProps(__spreadValues({
+              isMaxHeight,
+              selected: selectedItem !== null
+            }, getMenuProps()), {
+              children: options.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                Option,
+                __spreadProps(__spreadValues({}, getItemProps({
+                  key: item.value,
+                  item,
+                  isSelected: selectedItem === item,
+                  highlighted: highlightedIndex === index
+                })), {
+                  children: item.label
+                })
+              ))
+            })
+          ),
+          error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Helper.default, { error })
+        ] }))
+      }
+    );
+  }
+);
 Dropdown.propTypes = {
-  label: _propTypes.string,
-  disabled: _propTypes.bool,
-  error: _propTypes.string,
-  full: _propTypes.bool,
-
+  label: import_prop_types.string,
+  disabled: import_prop_types.bool,
+  error: import_prop_types.string,
+  full: import_prop_types.bool,
   /** { label (string), value (string or number), selected: (boolean) } */
-  options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    label: _propTypes.string,
-    value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]),
-    selected: _propTypes.bool
-  })).isRequired,
-  onChange: _propTypes.func,
-  isMaxHeight: _propTypes.bool
+  options: (0, import_prop_types.arrayOf)(
+    (0, import_prop_types.shape)({
+      label: import_prop_types.string,
+      value: (0, import_prop_types.oneOfType)([import_prop_types.string, import_prop_types.number]),
+      selected: import_prop_types.bool
+    })
+  ).isRequired,
+  onChange: import_prop_types.func,
+  isMaxHeight: import_prop_types.bool
 };
 Dropdown.defaultProps = {
-  label: '',
-  error: undefined,
+  label: "",
+  error: void 0,
   full: false,
   disabled: false,
-  onChange: function onChange() {},
+  onChange: () => {
+  },
   isMaxHeight: true
 };
-var _default = Dropdown;
-exports["default"] = _default;
+var Dropdown_default = Dropdown;