glints-aries 4.1.3 → 4.1.5

package/lib/Input/PhoneNumberInput/PhoneNumberInput.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.PhoneNumberInput = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _downshift = require("downshift");
+var _lodash = require("lodash");
+var _react = _interopRequireWildcard(require("react"));
+var _reactIdGenerator = require("react-id-generator");
+var _components = require("../../General/Icon/components");
+var _Flex = require("../../Layout/Flex");
+var _useOutsideAlerter = require("../../Utils/useOutsideAlerter");
+var S = _interopRequireWildcard(require("./PhoneNumberInputStyles"));
+var _excluded = ["value", "onChange", "onFocus", "onBlur", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "error", "addon"];
+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; }
+// Downshift wants a ref to this, but we need one ourselves, and there is no way
+// to share.
+// https://github.com/downshift-js/downshift/issues/604
+// https://github.com/downshift-js/downshift/issues/1167
+var refErrorFix = {
+  suppressRefError: true
+};
+var PhoneNumberInput = function PhoneNumberInput(_ref) {
+  var value = _ref.value,
+    _onChange = _ref.onChange,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    callingCodeOptionsExternal = _ref.callingCodeOptions,
+    onInputChange = _ref.onInputChange,
+    filterValue = _ref.filterValue,
+    isLoadingCallingCodeOptions = _ref.isLoadingCallingCodeOptions,
+    label = _ref.label,
+    featuredOptionsLabel = _ref.featuredOptionsLabel,
+    otherOptionsLabel = _ref.otherOptionsLabel,
+    callingCodeFilterInputPlaceholder = _ref.callingCodeFilterInputPlaceholder,
+    callingCodeNoOptionsLabel = _ref.callingCodeNoOptionsLabel,
+    error = _ref.error,
+    addon = _ref.addon,
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    isCallingCodeInputOpen = _useState[0],
+    setIsCallingCodeInputOpen = _useState[1];
+  var toggleIsCallingCodeOpen = function toggleIsCallingCodeOpen() {
+    return setIsCallingCodeInputOpen(!isCallingCodeInputOpen);
+  };
+  var closeCallingCodeInput = function closeCallingCodeInput() {
+    return setIsCallingCodeInputOpen(false);
+  };
+  var callingCodeOptions = (0, _lodash.orderBy)(callingCodeOptionsExternal, ['isFeatured', 'label'], ['desc', 'asc']);
+  var _useCombobox = (0, _downshift.useCombobox)({
+      items: callingCodeOptions,
+      selectedItem: (0, _lodash.find)(callingCodeOptions, {
+        callingCode: value.callingCode
+      }),
+      onSelectedItemChange: function onSelectedItemChange(_ref2) {
+        var selectedItem = _ref2.selectedItem;
+        _onChange((0, _extends2["default"])({}, value, {
+          callingCode: selectedItem ? selectedItem.callingCode : value.callingCode
+        }));
+        closeCallingCodeInput();
+      },
+      inputValue: filterValue,
+      onInputValueChange: function onInputValueChange(_ref3) {
+        var type = _ref3.type,
+          inputValue = _ref3.inputValue;
+        if (type !== _downshift.useCombobox.stateChangeTypes.InputChange) return;
+        onInputChange(inputValue);
+      },
+      itemToString: function itemToString(option) {
+        return option ? option.label : '';
+      }
+    }),
+    getComboboxProps = _useCombobox.getComboboxProps,
+    getInputProps = _useCombobox.getInputProps,
+    getToggleButtonProps = _useCombobox.getToggleButtonProps,
+    getMenuProps = _useCombobox.getMenuProps,
+    getItemProps = _useCombobox.getItemProps;
+  var callingCodeFilterInputRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function focusCallingCodeFilterInputOnOpen() {
+    if (isCallingCodeInputOpen && callingCodeFilterInputRef.current) {
+      callingCodeFilterInputRef.current.focus();
+    }
+  }, [isCallingCodeInputOpen]);
+  var containerRef = (0, _react.useRef)();
+  (0, _useOutsideAlerter.useOutsideAlerter)(containerRef, closeCallingCodeInput);
+  var _useId = (0, _reactIdGenerator.useId)(1, 'significant-number-input-'),
+    significantNumberInputId = _useId[0];
+  return /*#__PURE__*/_react["default"].createElement(S.PhoneNumberInputContainer, (0, _extends2["default"])({
+    ref: containerRef
+  }, restProps), /*#__PURE__*/_react["default"].createElement(S.TopRow, {
+    "data-invalid": Boolean(error)
+  }, /*#__PURE__*/_react["default"].createElement(S.CallingCodeInputToggle, (0, _extends2["default"])({}, getToggleButtonProps(), {
+    type: "button",
+    onClick: toggleIsCallingCodeOpen,
+    "data-testid": "calling-code-input-toggle"
+  }), "+", value.callingCode, /*#__PURE__*/_react["default"].createElement(S.CallingCodeInputOpenIndicator, null, isCallingCodeInputOpen ? /*#__PURE__*/_react["default"].createElement(_components.ArrowUpIcon, null) : /*#__PURE__*/_react["default"].createElement(_components.ArrowDownIcon, null))), /*#__PURE__*/_react["default"].createElement(S.SignificantNumberInput, {
+    id: significantNumberInputId,
+    "data-testid": "significant-number-input",
+    type: "tel",
+    value: value.significantNumber || '',
+    onChange: function onChange(e) {
+      return _onChange((0, _extends2["default"])({}, value, {
+        significantNumber: e.target.value
+      }));
+    },
+    onFocus: onFocus,
+    onBlur: onBlur,
+    placeholder: label,
+    "data-invalid": Boolean(error),
+    "aria-label": label
+  }), /*#__PURE__*/_react["default"].createElement(S.Label, {
+    htmlFor: significantNumberInputId
+  }, label), /*#__PURE__*/_react["default"].createElement(S.TopRowAddon, {
+    "data-testid": "addon"
+  }, addon)), /*#__PURE__*/_react["default"].createElement(S.CallingCodeInput, (0, _extends2["default"])({
+    isOpen: isCallingCodeInputOpen
+  }, getComboboxProps(), {
+    "data-testid": "calling-code-input"
+  }), /*#__PURE__*/_react["default"].createElement(S.CallingCodeFilterInputGroup, null, /*#__PURE__*/_react["default"].createElement(S.CallingCodeFilterInput, (0, _extends2["default"])({}, getInputProps({
+    placeholder: callingCodeFilterInputPlaceholder
+  }, (0, _extends2["default"])({}, refErrorFix)), {
+    ref: callingCodeFilterInputRef,
+    "data-testid": "calling-code-filter-input",
+    onFocus: onFocus,
+    onBlur: onBlur
+  })), isLoadingCallingCodeOptions && /*#__PURE__*/_react["default"].createElement(S.CallingCodeInputLoading, {
+    "data-testid": "calling-code-options-loading"
+  })), /*#__PURE__*/_react["default"].createElement(S.CallingCodeOptionsList, getMenuProps(), callingCodeOptions.length > 0 ? callingCodeOptions.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(S.CallingCodeOption, (0, _extends2["default"])({
+      key: item.callingCode + "-" + item.label
+    }, getItemProps({
+      item: item,
+      index: index
+    }), {
+      title: item.label,
+      withGroupHeader: item.isFeatured !== (callingCodeOptions[index - 1] || {}).isFeatured && (item.isFeatured ? featuredOptionsLabel : otherOptionsLabel)
+    }), /*#__PURE__*/_react["default"].createElement(_Flex.Flex, null, /*#__PURE__*/_react["default"].createElement(S.CallingCodeOptionCallingCode, null, "+", item.callingCode), /*#__PURE__*/_react["default"].createElement(S.CallingCodeOptionLabel, null, item.label)));
+  }) : /*#__PURE__*/_react["default"].createElement(S.NoOptions, {
+    "data-testid": "no-options"
+  }, callingCodeNoOptionsLabel))), /*#__PURE__*/_react["default"].createElement(S.Error, {
+    "data-testid": "error"
+  }, error || null));
+};
+exports.PhoneNumberInput = PhoneNumberInput;

package/lib/Input/PhoneNumberInput/PhoneNumberInput.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: any;
+export declare const WithError: any;
+export declare const NoCallingCodeOptions: any;
+export declare const Loading: any;
+export declare const WithAddon: any;

package/lib/Input/PhoneNumberInput/PhoneNumberInput.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/lib/Input/PhoneNumberInput/PhoneNumberInputStyles.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare const PhoneNumberInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TopRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CallingCodeInputToggle: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const CallingCodeInputOpenIndicator: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const SignificantNumberInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const TopRowAddon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CallingCodeInput: import("styled-components").StyledComponent<"div", any, {
+    isOpen: boolean;
+}, never>;
+export declare const CallingCodeFilterInputGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CallingCodeFilterInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const CallingCodeInputLoading: import("styled-components").StyledComponent<import("react").FC<import("../../General/Loading/Loading").Props>, any, {}, never>;
+export declare const CallingCodeOptionsList: import("styled-components").StyledComponent<"ol", any, {}, never>;
+interface GroupHeaderProps {
+    withGroupHeader: string;
+}
+export declare const CallingCodeOption: import("styled-components").StyledComponent<"li", any, GroupHeaderProps, never>;
+export declare const CallingCodeOptionCallingCode: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CallingCodeOptionLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GroupHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NoOptions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Error: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/Input/PhoneNumberInput/PhoneNumberInputStyles.js

@@ -0,0 +1,112 @@
+"use strict";
+
+exports.__esModule = true;
+exports.TopRowAddon = exports.TopRow = exports.SignificantNumberInput = exports.PhoneNumberInputContainer = exports.NoOptions = exports.Label = exports.GroupHeader = exports.Error = exports.CallingCodeOptionsList = exports.CallingCodeOptionLabel = exports.CallingCodeOptionCallingCode = exports.CallingCodeOption = exports.CallingCodeInputToggle = exports.CallingCodeInputOpenIndicator = exports.CallingCodeInputLoading = exports.CallingCodeInput = exports.CallingCodeFilterInputGroup = exports.CallingCodeFilterInput = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Colors = require("../../Utils/Colors");
+var _Shadow = require("../../Utils/Shadow");
+var _Loading = require("../../General/Loading");
+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; }
+var PhoneNumberInputContainer = _styledComponents["default"].div.withConfig({
+  displayName: "PhoneNumberInputStyles__PhoneNumberInputContainer",
+  componentId: "sc-80kraj-0"
+})(["position:relative;"]);
+exports.PhoneNumberInputContainer = PhoneNumberInputContainer;
+var TopRow = _styledComponents["default"].div.withConfig({
+  displayName: "PhoneNumberInputStyles__TopRow",
+  componentId: "sc-80kraj-1"
+})(["display:flex;border:2px solid ", ";align-items:center;&:hover{border:2px solid ", ";}&[data-invalid='true']{border:2px solid ", ";}"], _Colors.Greyscale.lightgrey, _Colors.SecondaryColor.actionblue, _Colors.PrimaryColor.glintsred);
+exports.TopRow = TopRow;
+var CallingCodeInputToggle = _styledComponents["default"].button.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeInputToggle",
+  componentId: "sc-80kraj-2"
+})(["border:none;background:none;padding:12px;padding-right:0;cursor:text;font-size:16px;display:flex;align-items:bottom;"]);
+exports.CallingCodeInputToggle = CallingCodeInputToggle;
+var CallingCodeInputOpenIndicator = _styledComponents["default"].span.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeInputOpenIndicator",
+  componentId: "sc-80kraj-3"
+})(["margin-left:8px;padding-right:8px;border-right:1px solid ", ";cursor:pointer;svg{margin-top:-2px;}"], _Colors.Greyscale.lightgrey);
+exports.CallingCodeInputOpenIndicator = CallingCodeInputOpenIndicator;
+var Label = _styledComponents["default"].label.withConfig({
+  displayName: "PhoneNumberInputStyles__Label",
+  componentId: "sc-80kraj-4"
+})(["position:absolute;left:0.5em;top:-0.5em;visibility:hidden;padding:0 0.3em;background:white;color:", ";"], _Colors.Greyscale.devilsgrey);
+exports.Label = Label;
+var visibleLabel = (0, _styledComponents.css)(["+ ", "{visibility:visible;color:#646464;font-size:12px;}"], Label);
+var SignificantNumberInput = _styledComponents["default"].input.withConfig({
+  displayName: "PhoneNumberInputStyles__SignificantNumberInput",
+  componentId: "sc-80kraj-5"
+})(["border:none;width:100%;font-size:16px;padding:12px;&:focus{outline:2px solid ", ";::placeholder{color:transparent;}", "}", " &[data-invalid='true']:focus{outline:2px solid ", ";}"], _Colors.SecondaryColor.actionblue, visibleLabel, function (_ref) {
+  var value = _ref.value;
+  return value && visibleLabel;
+}, _Colors.PrimaryColor.glintsred);
+exports.SignificantNumberInput = SignificantNumberInput;
+var TopRowAddon = _styledComponents["default"].div.withConfig({
+  displayName: "PhoneNumberInputStyles__TopRowAddon",
+  componentId: "sc-80kraj-6"
+})(["position:absolute;right:8px;top:50%;transform:translateY(-50%);"]);
+exports.TopRowAddon = TopRowAddon;
+var CallingCodeInput = _styledComponents["default"].div.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeInput",
+  componentId: "sc-80kraj-7"
+})(["position:absolute;display:none;z-index:2;background:white;margin-top:4px;width:100%;border:1px solid ", ";box-shadow:", ";", ""], _Colors.Greyscale.lightgrey, _Shadow.Shadow.down1, function (_ref2) {
+  var isOpen = _ref2.isOpen;
+  return isOpen && (0, _styledComponents.css)(["display:initial;"]);
+});
+exports.CallingCodeInput = CallingCodeInput;
+var CALLING_CODE_INPUT_MARGIN = '8px';
+var CallingCodeFilterInputGroup = _styledComponents["default"].div.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeFilterInputGroup",
+  componentId: "sc-80kraj-8"
+})(["position:relative;width:90%;width:calc(100% - 2 * ", ");margin:", ";"], CALLING_CODE_INPUT_MARGIN, CALLING_CODE_INPUT_MARGIN);
+exports.CallingCodeFilterInputGroup = CallingCodeFilterInputGroup;
+var CallingCodeFilterInput = _styledComponents["default"].input.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeFilterInput",
+  componentId: "sc-80kraj-9"
+})(["width:100%;border:2px solid ", ";padding:12px;font-size:14px;box-sizing:border-box;&:focus{border:2px solid ", ";outline:none;}"], _Colors.Greyscale.lightgrey, _Colors.SecondaryColor.actionblue);
+exports.CallingCodeFilterInput = CallingCodeFilterInput;
+var CallingCodeInputLoading = (0, _styledComponents["default"])(_Loading.Loading).withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeInputLoading",
+  componentId: "sc-80kraj-10"
+})(["position:absolute;right:8px;top:50%;transform:translateY(-50%);"]);
+exports.CallingCodeInputLoading = CallingCodeInputLoading;
+var CallingCodeOptionsList = _styledComponents["default"].ol.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeOptionsList",
+  componentId: "sc-80kraj-11"
+})(["list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;font-size:16px;"]);
+exports.CallingCodeOptionsList = CallingCodeOptionsList;
+var getGroupHeaderStyles = function getGroupHeaderStyles(_ref3) {
+  var withGroupHeader = _ref3.withGroupHeader;
+  return withGroupHeader && (0, _styledComponents.css)(["content:'", "';display:block;padding:4px 8px;color:", ";font-size:8px;border-bottom:1px solid ", ";text-transform:uppercase;background:white;cursor:default;"], withGroupHeader, _Colors.Greyscale.devilsgrey, _Colors.Greyscale.softgrey);
+};
+var CallingCodeOption = _styledComponents["default"].li.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeOption",
+  componentId: "sc-80kraj-12"
+})(["cursor:pointer;&:hover{color:", ";background:", ";}&[aria-selected='true']{color:", ";background:", ";}::before{", "}"], _Colors.SecondaryColor.actionblue, _Colors.Greyscale.softgrey, _Colors.SecondaryColor.actionblue, _Colors.Greyscale.softgrey, getGroupHeaderStyles);
+exports.CallingCodeOption = CallingCodeOption;
+var CallingCodeOptionCallingCode = _styledComponents["default"].div.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeOptionCallingCode",
+  componentId: "sc-80kraj-13"
+})(["min-width:48px;margin-right:8px;padding:8px;padding-right:0;"]);
+exports.CallingCodeOptionCallingCode = CallingCodeOptionCallingCode;
+var CallingCodeOptionLabel = _styledComponents["default"].div.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeOptionLabel",
+  componentId: "sc-80kraj-14"
+})(["width:100%;padding:8px;padding-left:0;color:", ";&:hover{color:inherit;}"], _Colors.Greyscale.devilsgrey);
+exports.CallingCodeOptionLabel = CallingCodeOptionLabel;
+var GroupHeader = _styledComponents["default"].div.withConfig({
+  displayName: "PhoneNumberInputStyles__GroupHeader",
+  componentId: "sc-80kraj-15"
+})(["padding:4px 8px;color:", ";font-size:8px;border-bottom:1px solid ", ";text-transform:uppercase;"], _Colors.Greyscale.devilsgrey, _Colors.Greyscale.softgrey);
+exports.GroupHeader = GroupHeader;
+var NoOptions = _styledComponents["default"].div.withConfig({
+  displayName: "PhoneNumberInputStyles__NoOptions",
+  componentId: "sc-80kraj-16"
+})(["padding:24px 8px;text-align:center;color:", ";font-size:14px;"], _Colors.Greyscale.devilsgrey);
+exports.NoOptions = NoOptions;
+var Error = _styledComponents["default"].div.withConfig({
+  displayName: "PhoneNumberInputStyles__Error",
+  componentId: "sc-80kraj-17"
+})(["margin-top:8px;color:", ";"], _Colors.PrimaryColor.glintsred);
+exports.Error = Error;

package/lib/Input/RadioButton/RadioButton.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+/** The className will be passed to
+ * the main radio button container. ...inputProps is passed to the
+ * input tag. */
+export declare const RadioButton: React.FunctionComponent<Props>;
+declare type HTMLInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'label'>;
+export interface Props extends HTMLInputProps {
+    /** Displays the error styles */
+    error?: boolean;
+    /** Sets the label of Radio Button. */
+    label?: React.ReactNode;
+    /** Sets the props on the label element. */
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
+    /** Sets theme for Radio Button. */
+    theme?: 'white';
+    /** Sets a border around the radio button. */
+    border?: boolean;
+    /** Sets the radio button to disable state. */
+    disabled?: boolean;
+    /** Sets the size of the radio button. */
+    size?: 'regular' | 'small';
+}
+export default RadioButton;

package/lib/Input/RadioButton/RadioButton.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = exports.RadioButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _RadioButtonStyle = require("./RadioButtonStyle");
+var _excluded = ["className", "children", "error", "label", "labelProps", "theme", "border", "disabled", "size"];
+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; }
+/** The className will be passed to
+ * the main radio button container. ...inputProps is passed to the
+ * input tag. */
+var RadioButton = function RadioButton(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    label = _ref.label,
+    labelProps = _ref.labelProps,
+    theme = _ref.theme,
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? false : _ref$border,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'regular' : _ref$size,
+    inputProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_RadioButtonStyle.RadioIcon, {
+    error: error,
+    theme: theme,
+    border: border,
+    size: size,
+    disabled: disabled,
+    "data-testid": "radio-icon"
+  }), /*#__PURE__*/React.createElement(_RadioButtonStyle.RadioLabel, {
+    className: "radiobtn-content",
+    error: error,
+    theme: theme,
+    tabIndex: -1,
+    border: border,
+    size: size,
+    disabled: disabled
+  }, label || children));
+  return /*#__PURE__*/React.createElement(_RadioButtonStyle.RadioContainer, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('aries-radiobtn', className),
+    error: error,
+    tabIndex: 0,
+    theme: theme,
+    border: border,
+    disabled: disabled
+  }, labelProps), /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
+    type: "radio",
+    disabled: disabled
+  }, inputProps)), border ? /*#__PURE__*/React.createElement(_RadioButtonStyle.Border, {
+    error: error,
+    disabled: disabled,
+    "data-testid": "radio-border"
+  }, content) : content);
+};
+exports.RadioButton = RadioButton;
+var _default = RadioButton;
+exports["default"] = _default;

package/lib/Input/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const RadioButtonWithError: any;
+export declare const RadioButtonWithBorder: any;
+export declare const DisabledRadioButton: any;
+export declare const SmallRadioButton: any;

package/lib/Input/RadioButton/RadioButton.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/lib/Input/RadioButton/RadioButtonStyle.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    error?: boolean;
+    theme?: string;
+    border?: boolean;
+    disabled?: boolean;
+    size?: 'regular' | 'small';
+}
+export declare const RadioIcon: import("styled-components").StyledComponent<"span", any, Props, never>;
+export declare const RadioLabel: import("styled-components").StyledComponent<"span", any, Props, never>;
+export declare const Border: import("styled-components").StyledComponent<"span", any, Props, never>;
+export declare const RadioContainer: import("styled-components").StyledComponent<"label", any, Props, never>;
+export {};

package/lib/Input/RadioButton/RadioButtonStyle.js

@@ -0,0 +1,105 @@
+"use strict";
+
+exports.__esModule = true;
+exports.RadioLabel = exports.RadioIcon = exports.RadioContainer = exports.Border = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Colors = require("../../Utils/Colors");
+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; }
+var getStateColor = function getStateColor(_ref, checked) {
+  var disabled = _ref.disabled,
+    error = _ref.error,
+    border = _ref.border,
+    theme = _ref.theme;
+  if (disabled) {
+    return _Colors.Greyscale.lightgrey;
+  } else if (error) {
+    return _Colors.PrimaryColor.glintsred;
+  } else if (theme === 'white') {
+    return _Colors.Greyscale.white;
+  } else if (!checked) {
+    return _Colors.Greyscale.grey;
+  } else if (border) {
+    return _Colors.SecondaryColor.actionblue;
+  } else {
+    return _Colors.SecondaryColor.darkgreen;
+  }
+};
+var showSolidCircleStyle = (0, _styledComponents.css)(["&:after{opacity:1;transform:scale(1,1);}"]);
+var RadioIcon = _styledComponents["default"].span.withConfig({
+  displayName: "RadioButtonStyle__RadioIcon",
+  componentId: "sc-1dmv219-0"
+})(["display:inline-flex;align-items:center;justify-content:center;height:", ";width:", ";margin-right:10px;border-radius:50%;border-style:solid;border-width:2px;border-color:", ";&:after{content:'';display:inline-block;height:", ";width:", ";border-radius:50%;opacity:0;transform:scale(0,0);transition:all 0.2s cubic-bezier(0.64,0.57,0.67,1.53);background-color:", ";}"], function (_ref2) {
+  var size = _ref2.size;
+  return size === 'regular' ? '18px' : '15px';
+}, function (_ref3) {
+  var size = _ref3.size;
+  return size === 'regular' ? '18px' : '15px';
+}, function (props) {
+  return getStateColor(props, false);
+}, function (_ref4) {
+  var size = _ref4.size;
+  return size === 'regular' ? '8px' : '7px';
+}, function (_ref5) {
+  var size = _ref5.size;
+  return size === 'regular' ? '8px' : '7px';
+}, function (props) {
+  return getStateColor(props, true);
+});
+exports.RadioIcon = RadioIcon;
+var RadioLabel = _styledComponents["default"].span.withConfig({
+  displayName: "RadioButtonStyle__RadioLabel",
+  componentId: "sc-1dmv219-1"
+})(["font-size:", ";outline:none;color:", ";"], function (_ref6) {
+  var size = _ref6.size;
+  return size === 'regular' ? '16px' : '14px';
+}, function (_ref7) {
+  var disabled = _ref7.disabled,
+    theme = _ref7.theme;
+  if (disabled) {
+    return _Colors.Greyscale.lightgrey;
+  } else if (theme === 'white') {
+    return _Colors.Greyscale.white;
+  } else {
+    return _Colors.Greyscale.black;
+  }
+});
+exports.RadioLabel = RadioLabel;
+var Border = _styledComponents["default"].span.withConfig({
+  displayName: "RadioButtonStyle__Border",
+  componentId: "sc-1dmv219-2"
+})(["display:flex;align-items:center;padding:15px 10px;border-style:solid;border-width:1px;border-radius:2px;border-color:", ";", ";"], function (_ref8) {
+  var disabled = _ref8.disabled;
+  return disabled ? _Colors.Greyscale.lightgrey : '#aaa';
+}, function (_ref9) {
+  var disabled = _ref9.disabled,
+    error = _ref9.error;
+  if (disabled) {
+    return null;
+  } else if (error) {
+    return (0, _styledComponents.css)(["background-color:rgba(236,39,43,0.1);border-color:", ";", "{border-color:", ";}"], _Colors.PrimaryColor.glintsred, RadioIcon, _Colors.Greyscale.grey);
+  }
+  return (0, _styledComponents.css)(["&:hover{background-color:rgba(1,126,183,0.1);border-color:", ";}"], _Colors.SecondaryColor.actionblue);
+});
+exports.Border = Border;
+var RadioContainer = _styledComponents["default"].label.withConfig({
+  displayName: "RadioButtonStyle__RadioContainer",
+  componentId: "sc-1dmv219-3"
+})(["position:relative;display:inline-flex;align-items:center;cursor:", ";user-select:none;text-align:left;input{display:none;&:checked + ", "{", " border-color:", ";}&:checked + ", "{background-color:transparent;border-color:", ";", "{", " border-color:", ";}}}&:focus{outline:none;}", ""], function (_ref10) {
+  var disabled = _ref10.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, RadioIcon, showSolidCircleStyle, function (props) {
+  return getStateColor(props, true);
+}, Border, function (props) {
+  return getStateColor(props, true);
+}, RadioIcon, showSolidCircleStyle, function (props) {
+  return getStateColor(props, true);
+}, function (_ref11) {
+  var disabled = _ref11.disabled,
+    error = _ref11.error,
+    border = _ref11.border;
+  if (!disabled && !error && !border) {
+    return (0, _styledComponents.css)(["&:hover{", "{border-color:", ";}}"], RadioIcon, _Colors.SecondaryColor.darkgreen);
+  }
+});
+exports.RadioContainer = RadioContainer;

package/lib/Input/RadioButton/index.d.ts

@@ -0,0 +1,3 @@
+import RadioButton from './RadioButton';
+export { RadioButton };
+export default RadioButton;

package/lib/Input/RadioButton/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _RadioButton = _interopRequireDefault(require("./RadioButton"));
+exports.RadioButton = _RadioButton["default"];
+var _default = _RadioButton["default"];
+exports["default"] = _default;

package/lib/Input/SearchFilter/SearchFilterStyle.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const SearchFilterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchFilterBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchFilterButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../General/Button/Button").Props & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const SearchFilterBodyWrapper: import("styled-components").StyledComponent<"div", any, SearchFilterBodyWrapperProps, never>;
+interface SearchFilterBodyWrapperProps {
+    open?: boolean;
+}
+export declare const SearchFilterResultContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchFilterListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchFilterItemWrapper: import("styled-components").StyledComponent<"li", any, {}, never>;
+export {};

package/lib/Input/SearchFilter/SearchFilterStyle.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SearchFilterResultContainer = exports.SearchFilterListWrapper = exports.SearchFilterItemWrapper = exports.SearchFilterContainer = exports.SearchFilterButton = exports.SearchFilterBodyWrapper = exports.SearchFilterBar = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Button = _interopRequireDefault(require("../../General/Button"));
+var _StyleConfig = require("../../Utils/StyleConfig");
+var _Colors = require("../../Utils/Colors");
+var SearchFilterContainer = _styledComponents["default"].div.withConfig({
+  displayName: "SearchFilterStyle__SearchFilterContainer",
+  componentId: "sc-18veyec-0"
+})(["position:relative;"]);
+exports.SearchFilterContainer = SearchFilterContainer;
+var SearchFilterBar = _styledComponents["default"].div.withConfig({
+  displayName: "SearchFilterStyle__SearchFilterBar",
+  componentId: "sc-18veyec-1"
+})(["display:flex;align-items:center;position:relative;input{padding:25px 6em 25px 30px;background:", ";border:3px solid ", ";font-size:1.4em;line-height:1.5;color:", ";width:100%;@media (max-width:", "px){padding:1em 5em 1em 1em;font-size:1em;}&:focus{outline:none;}&:hover,&:focus{border:3px solid ", ";}}"], _Colors.Greyscale.white, _Colors.Greyscale.grey, _Colors.Greyscale.grey, _StyleConfig.ScreenSize.mobileL, _Colors.SecondaryColor.actionblue);
+exports.SearchFilterBar = SearchFilterBar;
+var SearchFilterButton = (0, _styledComponents["default"])(_Button["default"]).withConfig({
+  displayName: "SearchFilterStyle__SearchFilterButton",
+  componentId: "sc-18veyec-2"
+})(["position:absolute;right:0;top:0;font-size:1.5em;height:100%;button{@media (max-width:", "px){padding:15px 20px;}}"], _StyleConfig.ScreenSize.mobileL);
+exports.SearchFilterButton = SearchFilterButton;
+var SearchFilterBodyWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "SearchFilterStyle__SearchFilterBodyWrapper",
+  componentId: "sc-18veyec-3"
+})(["position:relative;display:", ";z-index:9999;"], function (_ref) {
+  var open = _ref.open;
+  return open ? 'block' : 'none';
+});
+exports.SearchFilterBodyWrapper = SearchFilterBodyWrapper;
+var SearchFilterResultContainer = _styledComponents["default"].div.withConfig({
+  displayName: "SearchFilterStyle__SearchFilterResultContainer",
+  componentId: "sc-18veyec-4"
+})(["position:absolute;width:100%;display:grid;font-size:1.1em;grid-template-columns:repeat(3,1fr);padding:25px 30px;background:", ";border:1px solid ", ";@media (max-width:", "px){grid-template-columns:auto;grid-gap:2em;}"], _Colors.Greyscale.white, _Colors.Greyscale.lightgrey, _StyleConfig.ScreenSize.mobileL);
+exports.SearchFilterResultContainer = SearchFilterResultContainer;
+var SearchFilterListWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "SearchFilterStyle__SearchFilterListWrapper",
+  componentId: "sc-18veyec-5"
+})(["position:relative;label{color:", ";text-transform:uppercase;font-weight:600;letter-spacing:0.3px;}ul{padding:0;margin:0;li{display:flex;align-items:center;margin-bottom:0.6em;cursor:pointer;list-style-type:none;&:first-child{margin-top:0.5em;}&:last-child{margin-bottom:0;}svg,img{margin-right:1em;}img{object-fit:cover;border-radius:50%;}}}"], _Colors.Greyscale.grey);
+exports.SearchFilterListWrapper = SearchFilterListWrapper;
+var SearchFilterItemWrapper = _styledComponents["default"].li.withConfig({
+  displayName: "SearchFilterStyle__SearchFilterItemWrapper",
+  componentId: "sc-18veyec-6"
+})(["position:relative;"]);
+exports.SearchFilterItemWrapper = SearchFilterItemWrapper;