function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
import _path from "ramda/src/path";
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
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; }
import React, { createElement, useCallback, useMemo, useState } from 'react';
import { action } from '@storybook/addon-actions';
import styled from 'styled-components';
import { Badge, Box, CardWithTitle, Flexbox, OldIcon, Input, Link, Modal, Number as _Number, TrackingContext, Typography } from '../../..';
import { Display } from '../../../common/Display';
import docs from './Select.mdx';
var useSelectMachineFromContext = Input.Select.useSelectMachineFromContext;
var FlexedBox = styled(Box).withConfig({
  displayName: "Selectstories__FlexedBox",
  componentId: "sc-o8p7wl-0"
})(["flex-grow:1;display:flex;align-items:center;"]);
var accountOptions = [{
  label: 'First account',
  value: '1',
  symbol: 'AF',
  accno: '123',
  amount: {
    value: 212,
    currency: 'SEK'
  }
}, {
  label: 'Second acc 2',
  value: '2',
  symbol: '-',
  accno: '123',
  amount: {
    value: 111,
    currency: 'SEK'
  }
}, {
  label: 'Third 3',
  value: '3',
  symbol: 'ISK',
  accno: '123',
  amount: {
    value: 1,
    currency: 'DKK'
  }
}, {
  label: 'Acc 4',
  value: '4',
  symbol: 'ISK',
  accno: '123',
  amount: {
    value: 1,
    currency: 'DKK'
  }
}, {
  label: 'Acc 5',
  value: '5',
  symbol: 'ISK',
  accno: '123',
  amount: {
    value: 1,
    currency: 'DKK'
  }
}, {
  label: 'Acc 6',
  value: '6',
  symbol: 'ISK',
  accno: '123',
  amount: {
    value: 1,
    currency: 'DKK'
  }
}, {
  label: 'Acc 7',
  value: '7',
  symbol: 'ISK',
  accno: '123',
  amount: {
    value: 1,
    currency: 'DKK'
  }
}, {
  label: 'Acc 8',
  value: '8',
  symbol: 'ISK',
  accno: '123',
  amount: {
    value: 1,
    currency: 'DKK'
  }
}, {
  label: 'Acc 9',
  value: '9',
  symbol: 'ISK',
  accno: '123',
  amount: {
    value: 1,
    currency: 'DKK'
  }
}, {
  label: 'Acc 10',
  value: '10',
  symbol: 'ISK',
  accno: '123',
  amount: {
    value: 1,
    currency: 'DKK'
  }
}, {
  label: 'Acc 11',
  value: '11',
  symbol: 'ISK',
  accno: '123',
  amount: {
    value: 1,
    currency: 'DKK'
  }
}, {
  label: 'Acc 12',
  value: '12',
  symbol: 'ISK',
  accno: '123',
  amount: {
    value: 1,
    currency: 'DKK'
  }
}];
var AccountValue = function AccountValue() {
  var _useSelectMachineFrom = useSelectMachineFromContext(),
    _useSelectMachineFrom2 = _slicedToArray(_useSelectMachineFrom, 1),
    state = _useSelectMachineFrom2[0];
  var selectedOption = state.context.selectedItems.length === 0 ? null : state.context.selectedItems[0];
  return React.createElement(FlexedBox, {
    px: 2,
    pr: 8
  }, !selectedOption ? state.context.placeholder : React.createElement(Flexbox, {
    container: true,
    item: true,
    justifyContent: "space-between",
    gap: 2,
    grow: 1
  }, React.createElement(Flexbox, {
    item: true,
    container: true,
    alignItems: "center",
    basis: "32px",
    grow: 0
  }, React.createElement(Badge.Account, {
    badgeSize: "s"
  }, selectedOption.symbol)), React.createElement(Flexbox, {
    item: true,
    container: true,
    alignItems: "center",
    grow: 1
  }, React.createElement(Typography, {
    type: "tertiary",
    weight: "bold",
    color: function color(t) {
      return t.color.text;
    }
  }, selectedOption.label), React.createElement(Typography, {
    type: "tertiary"
  }, React.createElement("span", {
    "aria-hidden": "true"
  }, "\xA0\u2027\xA0"), selectedOption.accno))));
};
var StyledBox = styled(Box).withConfig({
  displayName: "Selectstories__StyledBox",
  componentId: "sc-o8p7wl-1"
})(["cursor:pointer;background:", ";", ""], function (p) {
  return p.focused ? p.theme.color.background : p.theme.color.card;
}, function (p) {
  return !p.isKeyboardNavigation ? "\n  &: hover {\n    background: ".concat(p.theme.color.background, ";\n    }\n  ") : '';
});
var AccountListItem = function AccountListItem(_ref) {
  var index = _ref.index;
  var _useSelectMachineFrom3 = useSelectMachineFromContext(),
    _useSelectMachineFrom4 = _slicedToArray(_useSelectMachineFrom3, 1),
    state = _useSelectMachineFrom4[0];
  var option = state.context.options[index];
  var isKeyboardNavigation = state.matches('interaction.enabled.active.navigation.keyboard');
  var selected = state.context.selectedItems.includes(option);
  var focused = isKeyboardNavigation && state.context.itemFocusIdx === index;
  return React.createElement(StyledBox, {
    px: 2,
    py: 1,
    focused: focused,
    isKeyboardNavigation: isKeyboardNavigation
  }, React.createElement(Flexbox, {
    container: true,
    justifyContent: "space-between",
    alignItems: "center",
    gap: 4
  }, React.createElement(Flexbox, {
    item: true,
    container: true
  }, React.createElement(Badge.Account, {
    badgeSize: "s"
  }, option.symbol)), React.createElement(Flexbox, {
    item: true,
    container: true,
    direction: "column",
    grow: 1
  }, React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, {
    type: "tertiary",
    weight: "bold",
    color: function color(t) {
      return t.color.text;
    }
  }, option.label), React.createElement(Typography, {
    type: "tertiary"
  }, React.createElement("span", {
    "aria-hidden": "true"
  }, "\xA0\u2027\xA0"), option.accno)), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, {
    type: "caption",
    color: function color(t) {
      return t.color.text;
    }
  }, React.createElement(_Number, {
    value: option.amount.value,
    currency: option.amount.currency
  })))), selected && React.createElement(Flexbox, {
    item: true,
    container: true,
    alignItems: "center"
  }, React.createElement(Box, {
    pl: 2
  }, React.createElement(OldIcon.CheckMark, {
    color: function color(t) {
      return t.color.cta;
    },
    size: 4
  })))));
};
var meta = {
  component: Input.Select,
  title: 'Molecules / Input / Select',
  parameters: {
    docs: {
      page: docs
    }
  }
};
export default meta;
export var defaultStory = function defaultStory() {
  return React.createElement("div", {
    style: {
      padding: '10px',
      height: '200px'
    }
  }, React.createElement(Input.Select, {
    id: "input-1",
    options: [{
      value: 1,
      label: '1'
    }, {
      value: 2,
      label: '2'
    }, {
      value: 3,
      label: '3'
    }],
    label: "Label",
    placeholder: "Placeholder"
  }));
};
export var withLabelTooltip = function withLabelTooltip() {
  return React.createElement(Input.Select, {
    id: "input-1",
    options: [{
      value: 1,
      label: '1'
    }, {
      value: 2,
      label: '2'
    }, {
      value: 3,
      label: '3'
    }],
    label: "Label",
    placeholder: "Placeholder",
    labelTooltip: "Tooltip for select field"
  });
};
export var withPlacementTopPositionCenter = function withPlacementTopPositionCenter() {
  return React.createElement(Box, {
    mt: 30
  }, React.createElement(Input.Select, {
    id: "input-1",
    options: [{
      value: 1,
      label: '1'
    }, {
      value: 2,
      label: '2'
    }, {
      value: 3,
      label: '3'
    }],
    label: "Label",
    placeholder: "Placeholder",
    labelTooltip: "Tooltip for select field",
    placement: "top",
    listPosition: "center",
    invertedColors: true,
    noFormField: true
  }));
};
export var withLabelTooltipPositionTop = function withLabelTooltipPositionTop() {
  return React.createElement(React.Fragment, null, React.createElement("br", null), React.createElement("br", null), React.createElement(Input.Select, {
    id: "input-1",
    options: [{
      value: 1,
      label: '1'
    }, {
      value: 2,
      label: '2'
    }, {
      value: 3,
      label: '3'
    }],
    label: "Label",
    placeholder: "Placeholder",
    labelTooltip: "Tooltip for select field",
    labelTooltipPosition: "top"
  }));
};
export var hideLabel = function hideLabel() {
  return React.createElement(Input.Select, {
    id: "input-1",
    options: [{
      value: 1,
      label: '1'
    }, {
      value: 2,
      label: '2'
    }, {
      value: 3,
      label: '3'
    }],
    label: "Label",
    hideLabel: true,
    placeholder: "Placeholder"
  });
};
export var overflowStory = function overflowStory() {
  var _Array$fill;
  return React.createElement(Input.Select, {
    id: "input-1",
    options: (_Array$fill = new Array(100).fill(null)) === null || _Array$fill === void 0 ? void 0 : _Array$fill.map(function (_, i) {
      return {
        value: i,
        label: "".concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i).concat(i)
      };
    }),
    label: "LabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabel",
    placeholder: "PlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholder"
  });
};
export var withModalTitleFullScreenOnMobile = function withModalTitleFullScreenOnMobile() {
  return React.createElement(Input.Select, {
    id: "input-1",
    options: [{
      value: 1,
      label: '1'
    }, {
      value: 2,
      label: '2'
    }, {
      value: 3,
      label: '3'
    }],
    label: "Label",
    placeholder: "Placeholder",
    labelTooltip: "Tooltip for select field",
    fullscreenOnMobile: true
  });
};
export var preselectedOptions = function preselectedOptions() {
  return createElement(function () {
    var CustomSelectedValue = useCallback(function () {
      var _useSelectMachineFrom5 = useSelectMachineFromContext(),
        _useSelectMachineFrom6 = _slicedToArray(_useSelectMachineFrom5, 1),
        machineState = _useSelectMachineFrom6[0];
      var selectedCount = machineState.context.selectedItems.length;
      return React.createElement(FlexedBox, {
        px: 2
      }, React.createElement(Typography, {
        type: "secondary"
      }, selectedCount === 0 ? machineState.context.placeholder : "".concat(selectedCount, " selected")));
    }, []);
    var _useState = useState([_objectSpread({}, accountOptions[1]), _objectSpread({}, accountOptions[2])]),
      _useState2 = _slicedToArray(_useState, 2),
      values = _useState2[0],
      setValues = _useState2[1];
    return React.createElement(Input.Select, {
      id: "input-1",
      options: accountOptions,
      value: values,
      onChange: setValues,
      components: {
        SelectedValue: CustomSelectedValue
      },
      multiselect: true,
      label: "Label",
      placeholder: "Placeholder"
    });
  });
};
var StyledFlexbox = styled(Flexbox).withConfig({
  displayName: "Selectstories__StyledFlexbox",
  componentId: "sc-o8p7wl-2"
})(["width:100%;padding-left:8px;padding-right:20px;"]);
var EllipsizingText = styled(Typography).withConfig({
  displayName: "Selectstories__EllipsizingText",
  componentId: "sc-o8p7wl-3"
})(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
export var passingTruncatedComponents = function passingTruncatedComponents() {
  return createElement(function () {
    var CustomSelectedValue = useCallback(function () {
      var _useSelectMachineFrom7 = useSelectMachineFromContext(),
        _useSelectMachineFrom8 = _slicedToArray(_useSelectMachineFrom7, 1),
        machineState = _useSelectMachineFrom8[0];
      var selectedCount = machineState.context.selectedItems.length;
      return React.createElement(StyledFlexbox, {
        container: true,
        alignItems: "center"
      }, React.createElement(EllipsizingText, {
        type: "secondary"
      }, selectedCount === 0 ? machineState.context.placeholder : "".concat(selectedCount, " selected along with a very long text for reference of truncation")));
    }, []);
    var _useState3 = useState([_objectSpread({}, accountOptions[1]), _objectSpread({}, accountOptions[2])]),
      _useState4 = _slicedToArray(_useState3, 2),
      values = _useState4[0],
      setValues = _useState4[1];
    return React.createElement(Input.Select, {
      id: "input-1",
      options: accountOptions,
      value: values,
      onChange: setValues,
      components: {
        SelectedValue: CustomSelectedValue
      },
      multiselect: true,
      label: "Label",
      placeholder: "Placeholder"
    });
  });
};
export var multiSelectUncontrolled = function multiSelectUncontrolled() {
  return createElement(function () {
    var CustomSelectedValue = useCallback(function () {
      var _useSelectMachineFrom9 = useSelectMachineFromContext(),
        _useSelectMachineFrom10 = _slicedToArray(_useSelectMachineFrom9, 1),
        machineState = _useSelectMachineFrom10[0];
      var selectedCount = machineState.context.selectedItems.length;
      return React.createElement(FlexedBox, {
        px: 2
      }, React.createElement(Typography, {
        type: "secondary"
      }, selectedCount === 0 ? machineState.context.placeholder : "".concat(selectedCount, " selected")));
    }, []);
    return React.createElement(Input.Select, {
      id: "input-1",
      options: accountOptions,
      components: {
        SelectedValue: CustomSelectedValue
      },
      multiselect: true,
      label: "Label",
      placeholder: "Placeholder"
    });
  });
};
export var tracking = function tracking() {
  return React.createElement(TrackingContext.Provider, {
    value: {
      track: function track(componentName, e, props) {
        return action('Tracking')(componentName, e.type, e.payload, props);
      }
    }
  }, React.createElement(Input.Select, {
    id: "input-1",
    options: [{
      value: 1,
      label: '1'
    }, {
      value: 2,
      label: '2'
    }, {
      value: 3,
      label: '3'
    }],
    label: "Label",
    placeholder: "Placeholder"
  }));
};
export var searchStory = function searchStory() {
  return React.createElement(Input.Select, {
    id: "input-1",
    options: [{
      value: 1,
      label: 'Abba'
    }, {
      value: 2,
      label: 'Btoiwent'
    }, {
      value: 3,
      label: 'Crtetyrh'
    }, {
      value: 4,
      label: 'Dositenyoe'
    }, {
      value: 5,
      label: 'Dasitenyoe'
    }, {
      value: 6,
      label: 'Xfoteibnyo'
    }, {
      value: 7,
      label: '3125236'
    }],
    label: "Label",
    placeholder: "Placeholder"
  });
};
export var two = function two() {
  return React.createElement(React.Fragment, null, React.createElement(Input.Select, {
    id: "input-1",
    options: [{
      value: 1,
      label: '1'
    }, {
      value: 2,
      label: '2'
    }, {
      value: 3,
      label: '3'
    }],
    label: "Label",
    placeholder: "Placeholder"
  }), React.createElement(Input.Select, {
    id: "input-2",
    options: [{
      value: 1,
      label: '1'
    }, {
      value: 2,
      label: '2'
    }, {
      value: 3,
      label: '3'
    }],
    label: "Label",
    placeholder: "Placeholder"
  }));
};
export var fullWidth = function fullWidth() {
  return React.createElement(Input.Select, {
    id: "onchange-select",
    fullWidth: true,
    options: accountOptions,
    label: "User account",
    placeholder: "Select account"
  });
};
export var autoFocus = function autoFocus() {
  return React.createElement(Input.Select, {
    id: "onchange-select",
    autoFocus: true,
    options: accountOptions,
    label: "User account",
    placeholder: "Select account"
  });
};
export var disabledItems = function disabledItems() {
  return React.createElement(Input.Select, {
    id: "onchange-select",
    options: accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (acc, i) {
      return i === 1 || i === 2 ? _objectSpread(_objectSpread({}, acc), {}, {
        disabled: true
      }) : acc;
    }),
    label: "User account",
    placeholder: "Select account"
  });
};
export var customRenderers = function customRenderers() {
  return React.createElement(Input.Select, {
    id: "custom-renderers-select",
    options: accountOptions,
    components: {
      ListItem: AccountListItem,
      SelectedValue: AccountValue
    },
    label: "User account",
    placeholder: "Select account"
  });
};
export var actions = function actions() {
  return createElement(function () {
    var _useState5 = useState([]),
      _useState6 = _slicedToArray(_useState5, 2),
      value = _useState6[0],
      setValue = _useState6[1];
    return React.createElement(Input.Select, {
      id: "custom-renderers-select",
      options: accountOptions,
      value: value,
      onChange: setValue,
      actions: [{
        icon: React.createElement(OldIcon.AddWithCircle, {
          size: 4,
          color: "currentColor"
        }),
        label: 'Add more stuff to dropdown',
        onSelect: action('Action triggered!')
      }, {
        icon: React.createElement(OldIcon.Archive, {
          size: 4,
          color: "currentColor"
        }),
        label: 'Archive',
        onSelect: action('Action Archive triggered!')
      }, {
        label: 'No icon action',
        onSelect: action('Action No icon triggered!')
      }, {
        label: 'Disabled action',
        onSelect: action('Should not appear!'),
        disabled: true
      }],
      label: "User account",
      placeholder: "Select account"
    });
  });
};
export var actionsAndEmptyOptionList = function actionsAndEmptyOptionList() {
  return createElement(function () {
    var _useState7 = useState([]),
      _useState8 = _slicedToArray(_useState7, 2),
      value = _useState8[0],
      setValue = _useState8[1];
    return React.createElement(Input.Select, {
      id: "custom-renderers-select",
      options: [],
      value: value,
      onChange: setValue,
      actions: [{
        icon: React.createElement(OldIcon.AddWithCircle, {
          size: 4,
          color: "currentColor"
        }),
        label: 'Add more stuff to dropdown',
        onSelect: action('Action triggered!')
      }, {
        icon: React.createElement(OldIcon.Archive, {
          size: 4,
          color: "currentColor"
        }),
        label: 'Archive',
        onSelect: action('Action Archive triggered!')
      }, {
        label: 'No icon action',
        onSelect: action('Action No icon triggered!')
      }, {
        label: 'Disabled action',
        onSelect: action('Should not appear!'),
        disabled: true
      }],
      label: "User account",
      placeholder: "Select account"
    });
  });
};
export var fullyEmpty = function fullyEmpty() {
  return createElement(function () {
    var _useState9 = useState([]),
      _useState10 = _slicedToArray(_useState9, 2),
      value = _useState10[0],
      setValue = _useState10[1];
    return React.createElement(Input.Select, {
      id: "custom-renderers-select",
      options: [],
      value: value,
      onChange: setValue,
      label: "User account",
      placeholder: "Select account"
    });
  });
};
export var onBlurAndOnFocus = function onBlurAndOnFocus() {
  return React.createElement(Input.Select, {
    id: "custom-renderers-select",
    options: accountOptions,
    label: "User account",
    placeholder: "Select account",
    onBlur: action('blur'),
    onFocus: action('focus')
  });
};
export var multiselect = function multiselect() {
  return createElement(function () {
    var _useState11 = useState([]),
      _useState12 = _slicedToArray(_useState11, 2),
      value = _useState12[0],
      setValue = _useState12[1];
    var CustomSelectedValue = useMemo(function () {
      return function () {
        var _useSelectMachineFrom11 = useSelectMachineFromContext(),
          _useSelectMachineFrom12 = _slicedToArray(_useSelectMachineFrom11, 1),
          machineState = _useSelectMachineFrom12[0];
        var selectedCount = machineState.context.selectedItems.length;
        return React.createElement(FlexedBox, {
          px: 2
        }, React.createElement(Typography, {
          type: "secondary",
          color: selectedCount === 0 ? function (t) {
            return t.color.placeholderText;
          } : undefined
        }, selectedCount === 0 ? machineState.context.placeholder : "".concat(selectedCount, " selected")));
      };
    }, []);
    return React.createElement(Input.Select, {
      id: "custom-renderers-select",
      options: accountOptions,
      value: value,
      onChange: setValue,
      components: {
        SelectedValue: CustomSelectedValue
      },
      multiselect: true,
      label: "User account",
      placeholder: "Select account"
    });
  });
};
var MultiselectColumnsExample = function MultiselectColumnsExample() {
  var _useState13 = useState([]),
    _useState14 = _slicedToArray(_useState13, 2),
    value = _useState14[0],
    setValue = _useState14[1];
  var CustomSelectedValue = function CustomSelectedValue() {
    var _useSelectMachineFrom13 = useSelectMachineFromContext(),
      _useSelectMachineFrom14 = _slicedToArray(_useSelectMachineFrom13, 1),
      machineState = _useSelectMachineFrom14[0];
    var selectedCount = machineState.context.selectedItems.length;
    return React.createElement(FlexedBox, {
      px: 2
    }, React.createElement(Typography, {
      type: "secondary",
      color: selectedCount === 0 ? function (t) {
        return t.color.placeholderText;
      } : undefined
    }, selectedCount === 0 ? machineState.context.placeholder : "".concat(selectedCount, " selected")));
  };
  return React.createElement(Input.Select, {
    id: "custom-renderers-select",
    options: accountOptions,
    value: value,
    onChange: setValue,
    components: {
      SelectedValue: CustomSelectedValue
    },
    multiselect: true,
    label: "User account",
    placeholder: "Select account",
    itemsPerColumn: 4,
    columnWidth: "200px"
  });
};
export var MultiselectColumns = {
  render: function render() {
    return React.createElement(MultiselectColumnsExample, null);
  }
};
export var multiselectActions = function multiselectActions() {
  return createElement(function () {
    var _useState15 = useState([]),
      _useState16 = _slicedToArray(_useState15, 2),
      value = _useState16[0],
      setValue = _useState16[1];
    var CustomSelectedValue = useMemo(function () {
      return function () {
        var _useSelectMachineFrom15 = useSelectMachineFromContext(),
          _useSelectMachineFrom16 = _slicedToArray(_useSelectMachineFrom15, 1),
          machineState = _useSelectMachineFrom16[0];
        var selectedCount = machineState.context.selectedItems.length;
        return React.createElement(FlexedBox, {
          px: 2
        }, React.createElement(Typography, {
          type: "secondary",
          color: selectedCount === 0 ? function (t) {
            return t.color.placeholderText;
          } : undefined
        }, selectedCount === 0 ? machineState.context.placeholder : "".concat(selectedCount, " selected")));
      };
    }, []);
    return React.createElement(Input.Select, {
      id: "custom-renderers-select",
      options: accountOptions,
      value: value,
      onChange: setValue,
      components: {
        SelectedValue: CustomSelectedValue
      },
      actions: [{
        icon: React.createElement(OldIcon.AddWithCircle, {
          size: 4,
          color: "currentColor"
        }),
        label: 'Add more stuff to dropdown',
        onSelect: action('Action add triggered!')
      }, {
        icon: React.createElement(OldIcon.Archive, {
          size: 4,
          color: "currentColor"
        }),
        label: 'Archive',
        onSelect: action('Action archive triggered!')
      }],
      multiselect: true,
      label: "User account",
      placeholder: "Select account"
    });
  });
};
var accountOptionsAndSelectAll = [_defineProperty({
  label: 'Select All',
  value: undefined
}, Input.Select.SYMBOL_ALL, true)].concat(accountOptions, [{
  label: 'Disabled',
  value: 'Doesnt matter',
  disabled: true
}]);
export var multiselectSelectAll = function multiselectSelectAll() {
  return createElement(function () {
    var _useState17 = useState([]),
      _useState18 = _slicedToArray(_useState17, 2),
      value = _useState18[0],
      setValue = _useState18[1];
    var CustomSelectedValue = useCallback(function () {
      var _useSelectMachineFrom17 = useSelectMachineFromContext(),
        _useSelectMachineFrom18 = _slicedToArray(_useSelectMachineFrom17, 1),
        machineState = _useSelectMachineFrom18[0];
      var selectedCount = machineState.context.selectedItems.length;
      var allSelected = machineState.context.selectedItems.some(function (x) {
        return x[Input.Select.SYMBOL_ALL];
      });
      var label;
      if (allSelected) {
        label = 'All selected';
      } else if (selectedCount === 0) {
        label = machineState.context.placeholder;
      } else {
        label = "".concat(selectedCount, " selected");
      }
      return React.createElement(FlexedBox, {
        px: 2
      }, React.createElement(Typography, {
        type: "secondary",
        color: selectedCount === 0 ? function (t) {
          return t.color.placeholderText;
        } : undefined
      }, label));
    }, []);
    return React.createElement(Input.Select, {
      id: "multiwithall-select",
      options: accountOptionsAndSelectAll,
      value: value,
      onChange: setValue,
      components: {
        SelectedValue: CustomSelectedValue
      },
      multiselect: true,
      label: "User account",
      placeholder: "Select account"
    });
  });
};
export var multiselectSelectAllWithFullScreenOnMobile = function multiselectSelectAllWithFullScreenOnMobile() {
  return createElement(function () {
    var _useState19 = useState([]),
      _useState20 = _slicedToArray(_useState19, 2),
      value = _useState20[0],
      setValue = _useState20[1];
    var CustomSelectedValue = useCallback(function () {
      var _useSelectMachineFrom19 = useSelectMachineFromContext(),
        _useSelectMachineFrom20 = _slicedToArray(_useSelectMachineFrom19, 1),
        machineState = _useSelectMachineFrom20[0];
      var selectedCount = machineState.context.selectedItems.length;
      var allSelected = machineState.context.selectedItems.some(function (x) {
        return x[Input.Select.SYMBOL_ALL];
      });
      var label;
      if (allSelected) {
        label = 'All selected';
      } else if (selectedCount === 0) {
        label = machineState.context.placeholder;
      } else {
        label = "".concat(selectedCount, " selected");
      }
      return React.createElement(FlexedBox, {
        px: 2
      }, React.createElement(Typography, {
        type: "secondary",
        color: selectedCount === 0 ? function (t) {
          return t.color.placeholderText;
        } : undefined
      }, label));
    }, []);
    return React.createElement(Input.Select, {
      id: "multiwithall-select",
      options: [].concat(_toConsumableArray(accountOptionsAndSelectAll), [{
        value: 21,
        label: 'Acc21'
      }, {
        value: 22,
        label: 'Acc22'
      }, {
        value: 23,
        label: 'Acc23'
      }]),
      value: value,
      onChange: setValue,
      components: {
        SelectedValue: CustomSelectedValue
      },
      multiselect: true,
      label: "User account",
      placeholder: "Select account",
      fullscreenOnMobile: true
    });
  });
};
export var changesFromProps = function changesFromProps() {
  return createElement(function () {
    var _useState21 = useState(''),
      _useState22 = _slicedToArray(_useState21, 2),
      searchQuery = _useState22[0],
      setSearchQuery = _useState22[1];
    var _useState23 = useState(accountOptions),
      _useState24 = _slicedToArray(_useState23, 2),
      accs = _useState24[0],
      setAccs = _useState24[1];
    var _useState25 = useState([]),
      _useState26 = _slicedToArray(_useState25, 2),
      value = _useState26[0],
      setValue = _useState26[1];
    var _useState27 = useState(false),
      _useState28 = _slicedToArray(_useState27, 2),
      disabled = _useState28[0],
      setDisabled = _useState28[1];
    var removeAcc = function removeAcc() {
      return setAccs(accs.slice(0, -1));
    };
    var selectFirst = function selectFirst() {
      return setValue([accountOptions[0]]);
    };
    return React.createElement(React.Fragment, null, React.createElement("button", {
      type: "button",
      onClick: removeAcc
    }, "Delete"), React.createElement("button", {
      type: "button",
      onClick: selectFirst
    }, "Select first"), React.createElement("button", {
      type: "button",
      onClick: function onClick() {
        return setDisabled(true);
      }
    }, "Disable"), React.createElement("button", {
      type: "button",
      onClick: function onClick() {
        return setDisabled(false);
      }
    }, "Enable"), React.createElement("pre", null, JSON.stringify(value, null, 2)), React.createElement("pre", null, JSON.stringify(accs, null, 2)), React.createElement(Input.Select, {
      id: "onchange-select",
      value: value,
      disabled: disabled,
      onChange: setValue,
      options: accs,
      label: "User account",
      showSearch: true,
      searchQuery: searchQuery,
      onSearchQueryChange: function onSearchQueryChange(_ref3) {
        var payload = _ref3.payload;
        action('search')(payload);
        setSearchQuery(payload);
      },
      placeholder: "Select account"
    }));
  });
};
export var accessibleFromDocumentForms = function accessibleFromDocumentForms() {
  return createElement(function () {
    var FORM_NAME = 'testForm';
    var SELECT_NAME = 'mySelect';
    var _useState29 = useState([]),
      _useState30 = _slicedToArray(_useState29, 2),
      forceUpdate = _useState30[1];
    return React.createElement("form", {
      name: FORM_NAME
    }, React.createElement(React.Fragment, null, React.createElement(Input.Select, {
      id: "forms-input-test",
      options: accountOptions,
      name: SELECT_NAME,
      label: "User account",
      placeholder: "Select account",
      onChange: function onChange() {
        return setTimeout(function () {
          return forceUpdate({});
        }, 10);
      }
    }), React.createElement("br", null), "Value in form: \"", _path(['forms', FORM_NAME, 'elements', SELECT_NAME, 'value'])(document), "\""));
  });
};
export var controlledBehaviour = {
  render: function render() {
    return createElement(function () {
      var _useState31 = useState(function () {
          return [accountOptions[1]];
        }),
        _useState32 = _slicedToArray(_useState31, 2),
        value = _useState32[0],
        setValue = _useState32[1];
      return React.createElement(Input.Select, {
        id: "onchange-select",
        options: accountOptions,
        value: value,
        onChange: setValue,
        label: "User account",
        placeholder: "Select account"
      });
    });
  },
  name: 'Controlled behaviour'
};
export var defaultVariations = {
  render: function render() {
    return React.createElement(Display, {
      items: [{
        title: 'Disabled',
        component: React.createElement(Input.Select, {
          id: "disabled-select",
          options: accountOptions,
          label: "User account",
          disabled: true,
          placeholder: "Select account"
        })
      }, {
        title: 'Error',
        component: React.createElement(Input.Select, {
          options: accountOptions,
          id: "error-select",
          label: "User account",
          error: "Some error",
          placeholder: "Select account"
        })
      }, {
        title: 'Info',
        component: React.createElement(Input.Select, {
          options: accountOptions,
          id: "info-select",
          label: "User account",
          extraInfo: "Some extra info",
          placeholder: "Select account"
        })
      }, {
        title: 'Success',
        component: React.createElement(Input.Select, {
          id: "success-select",
          options: accountOptions,
          label: "User account",
          success: true,
          placeholder: "Select account"
        })
      }]
    });
  },
  name: 'Default variations'
};
export var sizeS = function sizeS() {
  return React.createElement(Display, {
    items: [{
      title: 'Disabled',
      component: React.createElement(Input.Select, {
        size: "s",
        id: "disabled-select",
        options: accountOptions,
        label: "User account",
        disabled: true,
        placeholder: "Select account"
      })
    }, {
      title: 'Error',
      component: React.createElement(Input.Select, {
        size: "s",
        id: "error-select",
        options: accountOptions,
        label: "User account",
        error: "Some error",
        placeholder: "Select account"
      })
    }, {
      title: 'Info',
      component: React.createElement(Input.Select, {
        size: "s",
        id: "info-select",
        options: accountOptions,
        label: "User account",
        extraInfo: "Some extra info",
        placeholder: "Select account"
      })
    }, {
      title: 'Success',
      component: React.createElement(Input.Select, {
        size: "s",
        id: "success-select",
        options: accountOptions,
        label: "User account",
        success: true,
        placeholder: "Select account"
      })
    }]
  });
};
var createCounter = function createCounter() {
  var i = 0;
  return {
    next: function next() {
      return i++;
    }
  };
};
export var linkWithDropdownAndSearchBoxSecondary = function linkWithDropdownAndSearchBoxSecondary() {
  return createElement(function () {
    var counter = createCounter();
    var customComponents = useMemo(function () {
      return {
        SelectedValue: function SelectedValue() {
          var _useSelectMachineFrom21 = useSelectMachineFromContext(),
            _useSelectMachineFrom22 = _slicedToArray(_useSelectMachineFrom21, 1),
            state = _useSelectMachineFrom22[0];
          return React.createElement(Link, {
            as: "div"
          }, React.createElement(Flexbox, {
            container: true,
            alignItems: "center",
            gap: 1
          }, React.createElement(Flexbox, {
            item: true,
            container: true,
            alignItems: "center"
          }, React.createElement(OldIcon.AddWithCircle, {
            inline: true,
            color: function color(t) {
              return t.color.text;
            },
            size: 3.5
          })), React.createElement(Flexbox, {
            item: true
          }, React.createElement(Typography, {
            type: "secondary",
            color: function color(t) {
              return t.color.text;
            }
          }, state.context.placeholder))));
        }
      };
    }, []);
    var _useState33 = useState([]),
      _useState34 = _slicedToArray(_useState33, 2),
      value = _useState34[0],
      setValue = _useState34[1];
    var hugeOptionsList = useMemo(function () {
      return accountOptions.concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      })).concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      })).concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      }));
    }, [accountOptions]);
    var handleChange = function handleChange(newVal) {
      action('change')(newVal);
      setValue(newVal);
    };
    return React.createElement(Flexbox, {
      container: true,
      justifyContent: "flex-start"
    }, React.createElement(Input.Select, {
      options: hugeOptionsList,
      label: "User account",
      id: "input-select-search-inside",
      placeholder: "Select account",
      noFormField: true,
      showSearch: true,
      value: value,
      components: customComponents,
      onChange: handleChange,
      width: "150px"
    }));
  });
};
export var linkWithDropdownAndSearchBoxTertiary = function linkWithDropdownAndSearchBoxTertiary() {
  return createElement(function () {
    var customComponents = useMemo(function () {
      return {
        SelectedValue: function SelectedValue() {
          var _useSelectMachineFrom23 = useSelectMachineFromContext(),
            _useSelectMachineFrom24 = _slicedToArray(_useSelectMachineFrom23, 1),
            state = _useSelectMachineFrom24[0];
          return React.createElement(Link, {
            as: "div"
          }, React.createElement(Flexbox, {
            container: true,
            alignItems: "center",
            gap: 1
          }, React.createElement(Flexbox, {
            item: true,
            container: true,
            alignItems: "center"
          }, React.createElement(OldIcon.AddWithCircle, {
            inline: true,
            color: function color(t) {
              return t.color.text;
            },
            size: 3
          })), React.createElement(Flexbox, {
            item: true
          }, React.createElement(Typography, {
            type: "tertiary",
            color: function color(t) {
              return t.color.text;
            }
          }, state.context.placeholder))));
        }
      };
    }, []);
    var _useState35 = useState([]),
      _useState36 = _slicedToArray(_useState35, 2),
      value = _useState36[0],
      setValue = _useState36[1];
    var counter = createCounter();
    var hugeOptionsList = useMemo(function () {
      return accountOptions.concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      })).concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      })).concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      }));
    }, [accountOptions]);
    var handleChange = function handleChange(newVal) {
      action('change')(newVal);
      setValue(newVal);
    };
    return React.createElement(Flexbox, {
      container: true,
      justifyContent: "flex-start"
    }, React.createElement(Input.Select, {
      options: hugeOptionsList,
      label: "User account",
      id: "input-select-search-inside",
      placeholder: "Select account",
      noFormField: true,
      showSearch: true,
      value: value,
      components: customComponents,
      onChange: handleChange,
      width: "250px"
    }));
  });
};
export var linkWithDropdownAndSearchBoxMultiselect = function linkWithDropdownAndSearchBoxMultiselect() {
  return createElement(function () {
    var customComponents = useMemo(function () {
      return {
        SelectedValue: function SelectedValue() {
          var _useSelectMachineFrom25 = useSelectMachineFromContext(),
            _useSelectMachineFrom26 = _slicedToArray(_useSelectMachineFrom25, 1),
            state = _useSelectMachineFrom26[0];
          return React.createElement(Link, {
            as: "div"
          }, React.createElement(Flexbox, {
            container: true,
            alignItems: "center",
            gap: 1
          }, React.createElement(Flexbox, {
            item: true,
            container: true,
            alignItems: "center"
          }, React.createElement(OldIcon.AddWithCircle, {
            inline: true,
            color: function color(t) {
              return t.color.text;
            },
            size: 3
          })), React.createElement(Flexbox, {
            item: true
          }, React.createElement(Typography, {
            type: "tertiary",
            color: function color(t) {
              return t.color.text;
            }
          }, state.context.placeholder))));
        }
      };
    }, []);
    var _useState37 = useState([]),
      _useState38 = _slicedToArray(_useState37, 2),
      value = _useState38[0],
      setValue = _useState38[1];
    var counter = createCounter();
    var hugeOptionsList = useMemo(function () {
      return accountOptions.concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      })).concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      })).concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      }));
    }, [accountOptions]);
    var handleChange = function handleChange(newVal) {
      action('change')(newVal);
      setValue(newVal);
    };
    return React.createElement(TrackingContext.Provider, {
      value: {
        track: function track(componentName, e, props) {
          return action('Tracking')(componentName, e.type, e.payload, props);
        }
      }
    }, React.createElement(Flexbox, {
      container: true,
      justifyContent: "flex-start"
    }, React.createElement(Input.Select, {
      options: hugeOptionsList,
      label: "User account",
      id: "input-select-search-inside",
      placeholder: "Select account",
      noFormField: true,
      showSearch: true,
      multiselect: true,
      value: value,
      width: "300px",
      listMaxHeight: "400px",
      components: customComponents,
      onChange: handleChange,
      actions: [{
        label: 'Action',
        onSelect: action('Action triggered')
      }]
    })));
  });
};
export var linkWithDropdownAndSearchBoxMultiselectWithFullScreenOnMobile = function linkWithDropdownAndSearchBoxMultiselectWithFullScreenOnMobile() {
  return createElement(function () {
    var customComponents = useMemo(function () {
      return {
        SelectedValue: function SelectedValue() {
          var _useSelectMachineFrom27 = useSelectMachineFromContext(),
            _useSelectMachineFrom28 = _slicedToArray(_useSelectMachineFrom27, 1),
            state = _useSelectMachineFrom28[0];
          return React.createElement(Link, {
            as: "div"
          }, React.createElement(Flexbox, {
            container: true,
            alignItems: "center",
            gap: 1
          }, React.createElement(Flexbox, {
            item: true,
            container: true,
            alignItems: "center"
          }, React.createElement(OldIcon.AddWithCircle, {
            inline: true,
            color: function color(t) {
              return t.color.text;
            },
            size: 3
          })), React.createElement(Flexbox, {
            item: true
          }, React.createElement(Typography, {
            type: "tertiary",
            color: function color(t) {
              return t.color.text;
            }
          }, state.context.placeholder))));
        }
      };
    }, []);
    var _useState39 = useState([]),
      _useState40 = _slicedToArray(_useState39, 2),
      value = _useState40[0],
      setValue = _useState40[1];
    var counter = createCounter();
    var hugeOptionsList = useMemo(function () {
      return accountOptions.concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      })).concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      })).concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      }));
    }, [accountOptions]);
    var handleChange = function handleChange(newVal) {
      action('change')(newVal);
      setValue(newVal);
    };
    return React.createElement(TrackingContext.Provider, {
      value: {
        track: function track(componentName, e, props) {
          return action('Tracking')(componentName, e.type, e.payload, props);
        }
      }
    }, React.createElement(Flexbox, {
      container: true,
      justifyContent: "flex-start"
    }, React.createElement(Input.Select, {
      options: hugeOptionsList,
      label: "User account",
      id: "input-select-search-inside",
      placeholder: "Select account",
      noFormField: true,
      showSearch: true,
      multiselect: true,
      value: value,
      width: "300px",
      listMaxHeight: "400px",
      components: customComponents,
      onChange: handleChange,
      fullscreenOnMobile: true,
      actions: [{
        label: 'Action',
        onSelect: action('Action triggered')
      }]
    })));
  });
};
export var listPositionedToTheLeft = function listPositionedToTheLeft() {
  return createElement(function () {
    var customComponents = useMemo(function () {
      return {
        SelectedValue: function SelectedValue() {
          var _useSelectMachineFrom29 = useSelectMachineFromContext(),
            _useSelectMachineFrom30 = _slicedToArray(_useSelectMachineFrom29, 1),
            state = _useSelectMachineFrom30[0];
          return React.createElement(Link, {
            as: "div"
          }, React.createElement(Flexbox, {
            container: true,
            alignItems: "center",
            gap: 1
          }, React.createElement(Flexbox, {
            item: true,
            container: true,
            alignItems: "center"
          }, React.createElement(OldIcon.AddWithCircle, {
            inline: true,
            color: function color(t) {
              return t.color.text;
            },
            size: 3
          })), React.createElement(Flexbox, {
            item: true
          }, React.createElement(Typography, {
            type: "tertiary",
            color: function color(t) {
              return t.color.text;
            }
          }, state.context.placeholder))));
        }
      };
    }, []);
    var _useState41 = useState([]),
      _useState42 = _slicedToArray(_useState41, 2),
      value = _useState42[0],
      setValue = _useState42[1];
    var counter = createCounter();
    var hugeOptionsList = useMemo(function () {
      return accountOptions.concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      })).concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      })).concat(accountOptions === null || accountOptions === void 0 ? void 0 : accountOptions.map(function (x) {
        return _objectSpread(_objectSpread({}, x), {}, {
          value: x.value + counter.next(),
          label: x.label + counter.next()
        });
      }));
    }, [accountOptions]);
    var handleChange = function handleChange(newVal) {
      action('change')(newVal);
      setValue(newVal);
    };
    return React.createElement(Flexbox, {
      container: true,
      justifyContent: "flex-end"
    }, React.createElement(Input.Select, {
      options: hugeOptionsList,
      label: "User account",
      id: "input-select-search-inside",
      placeholder: "Select account",
      noFormField: true,
      showSearch: true,
      multiselect: true,
      value: value,
      width: "300px",
      listPosition: "left",
      listMaxHeight: "400px",
      components: customComponents,
      onChange: handleChange,
      actions: [{
        label: 'Action',
        onSelect: action('Action triggered')
      }]
    }));
  });
};
export var onSearchQueryChange = function onSearchQueryChange() {
  return React.createElement(Input.Select, {
    id: "success-select",
    options: accountOptions,
    label: "User account",
    success: true,
    showSearch: true,
    onSearchQueryChange: action('search query change'),
    placeholder: "Select account"
  });
};
var placeholder = [{
  label: '',
  value: null,
  disabled: true
}];
export var onSearchQueryChangeWithoutOptions = function onSearchQueryChangeWithoutOptions() {
  return React.createElement(Input.Select, {
    id: "success-select",
    options: placeholder,
    label: "User account",
    success: true,
    showSearch: true,
    hideDisabledOptions: true,
    onSearchQueryChange: action('search query change'),
    placeholder: "Select account"
  });
};
export var focusWithoutScrolling = function focusWithoutScrolling() {
  return React.createElement(React.Fragment, null, React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement(Input.Select, {
    id: "no-scroll-select",
    options: accountOptions,
    label: "User account",
    placeholder: "Select account",
    preventScroll: true
  }), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null));
};
export var insideModal = function insideModal() {
  return React.createElement(Modal, {
    open: true
  }, React.createElement(Input.Select, {
    id: "no-scroll-select",
    options: accountOptions,
    label: "User account",
    placeholder: "Select account",
    fullscreenOnMobile: true,
    withPortal: true
  }));
};
export var placementTop = function placementTop() {
  return React.createElement(Box, {
    pt: 40
  }, React.createElement(Input.Select, {
    id: "no-scroll-select",
    options: accountOptions,
    label: "User account",
    placeholder: "Select account",
    placement: "top"
  }));
};
export var autoPlacement = function autoPlacement() {
  return React.createElement(React.Fragment, null, React.createElement("h1", null, "Open the Select and scroll down"), React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      height: '160vh'
    }
  }, React.createElement(Input.Select, {
    id: "no-scroll-select",
    options: accountOptions,
    label: "User account",
    placeholder: "Select account",
    withPortal: true
  })));
};
export var GroupedOptions = function GroupedOptions() {
  var _Array$fill2, _Array$fill3;
  var _useState43 = useState([]),
    _useState44 = _slicedToArray(_useState43, 2),
    value = _useState44[0],
    setValue = _useState44[1];
  var options = [{
    label: 'Group 1',
    options: (_Array$fill2 = new Array(5).fill(null)) === null || _Array$fill2 === void 0 ? void 0 : _Array$fill2.map(function (_, i) {
      return {
        label: "Child 1 ".concat(i),
        value: "c1-".concat(i)
      };
    })
  }, {
    label: 'Group 2',
    options: (_Array$fill3 = new Array(5).fill(null)) === null || _Array$fill3 === void 0 ? void 0 : _Array$fill3.map(function (_, i) {
      return {
        label: "Child 2 ".concat(i),
        value: "c2-".concat(i)
      };
    })
  }];
  var valueToSelected = function valueToSelected(_value) {
    return options === null || options === void 0 ? void 0 : options.map(function (option) {
      return _objectSpread(_objectSpread({}, option), {}, {
        options: option.options.filter(function (child) {
          return _value.find(function (val) {
            return val.value === child.value;
          });
        })
      });
    }).filter(function (option) {
      return option.options.length;
    });
  };
  var handleChange = function handleChange(newVal) {
    action('change')(newVal);
    setValue(newVal);
  };
  return React.createElement(Input.Select, {
    id: "grouped-options-single",
    options: options,
    label: "Grouped options single",
    placeholder: "Select option",
    value: valueToSelected(value),
    onChange: handleChange
  });
};
export var GroupedOptionsMultiselect = function GroupedOptionsMultiselect() {
  var _Array$fill4, _Array$fill5;
  var options = [{
    label: 'Group 1',
    options: (_Array$fill4 = new Array(5).fill(null)) === null || _Array$fill4 === void 0 ? void 0 : _Array$fill4.map(function (_, i) {
      return {
        label: "Child 1 ".concat(i),
        value: "c1-".concat(i)
      };
    })
  }, {
    label: 'Group 2',
    options: (_Array$fill5 = new Array(5).fill(null)) === null || _Array$fill5 === void 0 ? void 0 : _Array$fill5.map(function (_, i) {
      return {
        label: "Child 2 ".concat(i),
        value: "c2-".concat(i)
      };
    })
  }];
  var CustomSelectedValue = function CustomSelectedValue() {
    var _useSelectMachineFrom31 = useSelectMachineFromContext(),
      _useSelectMachineFrom32 = _slicedToArray(_useSelectMachineFrom31, 1),
      machineState = _useSelectMachineFrom32[0];
    var selectedCount = machineState.context.selectedItems.length;
    return React.createElement(FlexedBox, {
      px: 2
    }, React.createElement(Typography, {
      type: "secondary",
      color: selectedCount === 0 ? function (t) {
        return t.color.placeholderText;
      } : undefined
    }, selectedCount === 0 ? machineState.context.placeholder : "".concat(selectedCount, " selected")));
  };
  return React.createElement(Input.Select, {
    id: "grouped-options-multiselect",
    options: options,
    label: "Grouped options multiselect",
    placeholder: "Select options",
    components: {
      SelectedValue: CustomSelectedValue
    },
    multiselect: true
  });
};
export var GroupedOptionsMultiselectControlled = function GroupedOptionsMultiselectControlled() {
  var _Array$fill6, _Array$fill7;
  var _useState45 = useState([]),
    _useState46 = _slicedToArray(_useState45, 2),
    value = _useState46[0],
    setValue = _useState46[1];
  var options = [_defineProperty({
    label: "Select All",
    value: null
  }, Input.Select.SYMBOL_ALL, true), {
    label: 'Group 1',
    options: (_Array$fill6 = new Array(5).fill(null)) === null || _Array$fill6 === void 0 ? void 0 : _Array$fill6.map(function (_, i) {
      return {
        label: "Child 1 ".concat(i),
        value: "c1-".concat(i)
      };
    })
  }, {
    label: 'Group 2',
    options: (_Array$fill7 = new Array(5).fill(null)) === null || _Array$fill7 === void 0 ? void 0 : _Array$fill7.map(function (_, i) {
      return {
        label: "Child 2 ".concat(i),
        value: "c2-".concat(i)
      };
    })
  }];
  var CustomSelectedValue = function CustomSelectedValue() {
    var _useSelectMachineFrom33 = useSelectMachineFromContext(),
      _useSelectMachineFrom34 = _slicedToArray(_useSelectMachineFrom33, 1),
      machineState = _useSelectMachineFrom34[0];
    var selectedCount = machineState.context.selectedItems.length;
    var allSelected = machineState.context.selectedItems.some(function (x) {
      return x[Input.Select.SYMBOL_ALL];
    });
    var label = function () {
      if (allSelected) {
        return 'All selected';
      }
      if (selectedCount === 0) {
        return machineState.context.placeholder;
      }
      return "".concat(selectedCount, " selected");
    }();
    return React.createElement(FlexedBox, {
      px: 2
    }, React.createElement(Typography, {
      type: "secondary",
      color: selectedCount === 0 ? function (t) {
        return t.color.placeholderText;
      } : undefined
    }, label));
  };
  return React.createElement(Input.Select, {
    id: "grouped-options-multiselect-test",
    options: options,
    value: value,
    onChange: setValue,
    components: {
      SelectedValue: CustomSelectedValue
    },
    multiselect: true,
    label: "User account",
    placeholder: "Select account"
  });
};
export var onAColouredBackground = function onAColouredBackground() {
  return React.createElement(Box, {
    p: 5,
    backgroundColor: function backgroundColor(t) {
      return t.color.disabledBackground;
    }
  }, React.createElement(Input.Select, {
    id: "input-on-coloured-background",
    label: "On a colored background",
    placeholder: "Select an option",
    options: [{
      label: 'foo',
      value: 1
    }, {
      label: 'bar',
      value: 2
    }]
  }));
};
export var withoutSearchComponent = function withoutSearchComponent() {
  return React.createElement(Box, {
    p: 5,
    backgroundColor: function backgroundColor(t) {
      return t.color.disabledBackground;
    }
  }, React.createElement(Input.Select, {
    id: "input-without-a-search-component",
    label: "Without search component",
    placeholder: "Select an option",
    options: [{
      label: 'foo',
      value: 1
    }, {
      label: 'bar',
      value: 2
    }],
    disableSearchComponent: true
  }));
};
export var WithCustomHeight = {
  render: function render() {
    return React.createElement(Box, {
      p: 5,
      backgroundColor: function backgroundColor(t) {
        return t.color.disabledBackground;
      }
    }, React.createElement(CardWithTitle, {
      title: "Setting a custom `height` overwrites the `size` prop"
    }, React.createElement(Input.Select, {
      id: "input-with-custom-height",
      options: [{
        value: 1,
        label: 'Strawberry 🍓'
      }, {
        value: 2,
        label: 'Blueberry 🫐'
      }, {
        value: 3,
        label: 'Banana 🍌'
      }],
      label: "This is a tall input",
      placeholder: "What's your favourite berry?",
      fullWidth: true,
      height: 20
    })));
  }
};
export var withLabelTooltipInsideModal = {
  render: function render() {
    var Example = function Example() {
      var _useState47 = useState(true),
        _useState48 = _slicedToArray(_useState47, 2),
        open = _useState48[0],
        setOpen = _useState48[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Input.Select, {
        id: "input-without-a-search-component",
        label: "Without search component",
        placeholder: "Select an option",
        options: [{
          label: 'foo',
          value: 1
        }, {
          label: 'bar',
          value: 2
        }],
        disableSearchComponent: true,
        labelTooltipInModal: true,
        labelTooltip: "Tooltip content"
      }))));
    };
    return React.createElement(Example, null);
  },
  name: 'With label tooltip inside modal'
};