@assembly-js/design-system 2.4.0

package/dist/esm/components/UserCompanySelector/UserCompanySelector.js

@@ -0,0 +1,374 @@
+// This file is generated by a script. Do not edit this file directly.
+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); }
+var _excluded = ["autoFocus", "grouped", "name", "internalUsers", "clientUsers", "companies", "onChange", "onBlur", "placeholder", "styles", "ignoreCompanies", "ignoreFilterClientsByCompany", "limitSelectedOptions", "initialValue", "customLabels", "listHeading"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import { useCallback, useMemo, useState } from 'react';
+import Select from 'react-select';
+import { ListItem } from "./ListItem";
+import { Heading, Body } from "../Typography";
+import { SelectedValueChip } from "./SelectedValueChip";
+import { LimitedOptionsList } from "./LimitedOptionsList";
+import { colors } from "../../theme/colors";
+var MAX_OPTIONS = {
+  flat: 6,
+  group: 3
+};
+/**
+ * Creates a grouped options for the combo select
+ * @param companies - the companies to group
+ * @param internalUsers - the internal users to group
+ * @param clientUsers - the client users to group
+ * @returns the grouped options
+ */
+var createGroupedOptions = function createGroupedOptions(companies, internalUsers, clientUsers, customLabels) {
+  var _customLabels$groupTe, _customLabels$individ;
+  var companyGroup = {
+    label: (_customLabels$groupTe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.groupTermPlural) !== null && _customLabels$groupTe !== void 0 ? _customLabels$groupTe : 'Companies',
+    options: companies
+  };
+  var internalUserGroup = {
+    label: 'Internal Users',
+    options: internalUsers
+  };
+  var clientUserGroup = {
+    label: (_customLabels$individ = customLabels === null || customLabels === void 0 ? void 0 : customLabels.individualTermPlural) !== null && _customLabels$individ !== void 0 ? _customLabels$individ : 'Client Users',
+    options: clientUsers
+  };
+  return [internalUserGroup, clientUserGroup, companyGroup];
+};
+export var UserCompanySelector = function UserCompanySelector(_ref) {
+  var _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$grouped = _ref.grouped,
+    grouped = _ref$grouped === void 0 ? false : _ref$grouped,
+    name = _ref.name,
+    _ref$internalUsers = _ref.internalUsers,
+    internalUsers = _ref$internalUsers === void 0 ? [] : _ref$internalUsers,
+    clientUsers = _ref.clientUsers,
+    companies = _ref.companies,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    placeholder = _ref.placeholder,
+    styles = _ref.styles,
+    ignoreCompanies = _ref.ignoreCompanies,
+    _ref$ignoreFilterClie = _ref.ignoreFilterClientsByCompany,
+    ignoreFilterClientsByCompany = _ref$ignoreFilterClie === void 0 ? false : _ref$ignoreFilterClie,
+    _ref$limitSelectedOpt = _ref.limitSelectedOptions,
+    limitSelectedOptionsUnvalidated = _ref$limitSelectedOpt === void 0 ? 1000 : _ref$limitSelectedOpt,
+    initialValue = _ref.initialValue,
+    customLabels = _ref.customLabels,
+    listHeading = _ref.listHeading,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var limitSelectedOptions = limitSelectedOptionsUnvalidated === 0 ? 1000 : Math.min(1000, limitSelectedOptionsUnvalidated);
+  var companiesMap = useMemo(function () {
+    return new Map(companies.map(function (company) {
+      return [company.value, company];
+    }));
+  }, [companies]);
+  var clientToCompanyCount = useMemo(function () {
+    var clientToCompanyCount = new Map();
+    return clientUsers.reduce(function (acc, client) {
+      var _client$value, _clientToCompanyCount, _client$value2;
+      clientToCompanyCount.set((_client$value = client.value) !== null && _client$value !== void 0 ? _client$value : '', ((_clientToCompanyCount = clientToCompanyCount.get((_client$value2 = client.value) !== null && _client$value2 !== void 0 ? _client$value2 : '')) !== null && _clientToCompanyCount !== void 0 ? _clientToCompanyCount : 0) + 1);
+      return clientToCompanyCount;
+    }, new Map());
+  }, [clientUsers]);
+  var _useState = useState(initialValue !== null && initialValue !== void 0 ? initialValue : []),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedOptions = _useState2[0],
+    setSelectedOptions = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+
+  /**
+   * Returns a relevance score for an option based on the input value.
+   * Higher scores indicate more relevant matches (direct name matches > company name matches).
+   * @param option - the option to score
+   * @returns 2 for direct name match, 1 for company name match only, 0 for no match
+   */
+  var getOptionRelevanceScore = useCallback(function (option) {
+    if (!inputValue) {
+      return 1; // Show all options when no input
+    }
+    var lowerInput = inputValue.toLowerCase();
+    var nameMatches = option.label.toLowerCase().includes(lowerInput);
+    if (option.type === 'client') {
+      var _option$companyId, _company$label;
+      var company = companiesMap.get((_option$companyId = option.companyId) !== null && _option$companyId !== void 0 ? _option$companyId : '');
+      var companyMatches = company === null || company === void 0 || (_company$label = company.label) === null || _company$label === void 0 ? void 0 : _company$label.toLowerCase().includes(lowerInput);
+      if (nameMatches) return 2; // Direct name match - highest priority
+      if (companyMatches) return 1; // Company name match - lower priority
+      return 0; // No match
+    }
+    return nameMatches ? 1 : 0;
+  }, [inputValue, companiesMap]);
+  var isOptionSelected = useCallback(function (option) {
+    return selectedOptions.some(function (o) {
+      return o.value === option.value;
+    });
+  }, [selectedOptions]);
+  var options = useMemo(function () {
+    var filteredClients = clientUsers.filter(function (c) {
+      return !isOptionSelected(c);
+    });
+    var filteredCompanies = companies.filter(function (c) {
+      return !isOptionSelected(c);
+    });
+    var filteredInternalUsers = internalUsers.filter(function (c) {
+      return !isOptionSelected(c);
+    });
+    var hasSelectedClients = selectedOptions.some(function (option) {
+      return option.type === 'client';
+    });
+    var hasSelectedCompanies = selectedOptions.some(function (option) {
+      return option.type === 'company';
+    });
+    var hasReachedLimit = selectedOptions.length >= limitSelectedOptions;
+    if (hasSelectedCompanies && limitSelectedOptions > 1 || hasReachedLimit) {
+      filteredClients = [];
+      filteredCompanies = [];
+      filteredInternalUsers = [];
+    }
+    if (hasSelectedClients && limitSelectedOptions > 1) {
+      // if the input has selected clients, we need to filter the clients to only show other
+      // clients within the same company.
+      filteredClients = ignoreFilterClientsByCompany ? clientUsers : clientUsers.filter(function (client) {
+        return hasSelectedClients && selectedOptions.map(function (option) {
+          return option.companyId;
+        }).includes(client.companyId);
+      });
+      filteredCompanies = [];
+      filteredInternalUsers = [];
+    }
+    var filteredGroupedOptions = createGroupedOptions(filteredCompanies, filteredInternalUsers, filteredClients, customLabels).map(function (group) {
+      return _objectSpread(_objectSpread({}, group), {}, {
+        options: group.options.map(function (opt) {
+          return {
+            opt: opt,
+            score: getOptionRelevanceScore(opt)
+          };
+        }).filter(function (_ref2) {
+          var score = _ref2.score;
+          return score > 0;
+        }).sort(function (a, b) {
+          return b.score - a.score;
+        }).slice(0, MAX_OPTIONS.group).map(function (_ref3) {
+          var opt = _ref3.opt;
+          return opt;
+        })
+      });
+    });
+    var filteredFlatOptions = [].concat(_toConsumableArray(filteredInternalUsers), _toConsumableArray(filteredClients), _toConsumableArray(filteredCompanies)).map(function (opt) {
+      return {
+        opt: opt,
+        score: getOptionRelevanceScore(opt)
+      };
+    }).filter(function (_ref4) {
+      var score = _ref4.score;
+      return score > 0;
+    }).sort(function (a, b) {
+      return b.score - a.score;
+    }).slice(0, MAX_OPTIONS.flat).map(function (_ref5) {
+      var opt = _ref5.opt;
+      return opt;
+    });
+
+    // when grouped is true then we need to show the options list in a group manner.
+    var opts = grouped ? filteredGroupedOptions : filteredFlatOptions;
+    return opts;
+  }, [internalUsers, clientUsers, companies, grouped, selectedOptions, ignoreFilterClientsByCompany, limitSelectedOptions, getOptionRelevanceScore, isOptionSelected, customLabels]);
+
+  /**
+   * Handles the change of the selected options
+   * @param value - the selected options
+   */
+  var handleChange = function handleChange(value) {
+    var selectedOptionsValue = [];
+    if (value.length > limitSelectedOptions) {
+      if (value.length === 2 && limitSelectedOptions === 1) {
+        var newSelectedOption = value[1];
+        if (newSelectedOption) {
+          var _newSelectedOption$co;
+          setSelectedOptions([newSelectedOption]);
+          selectedOptionsValue = [{
+            id: newSelectedOption.value,
+            companyId: (_newSelectedOption$co = newSelectedOption.companyId) !== null && _newSelectedOption$co !== void 0 ? _newSelectedOption$co : '',
+            object: newSelectedOption.type
+          }];
+        }
+      } else {
+        selectedOptionsValue = value.slice(0, -1).map(function (_ref6) {
+          var id = _ref6.value,
+            object = _ref6.type,
+            companyId = _ref6.companyId;
+          return {
+            id: id,
+            companyId: companyId !== null && companyId !== void 0 ? companyId : '',
+            object: object
+          };
+        });
+      }
+    } else {
+      setSelectedOptions(value);
+      selectedOptionsValue = value.map(function (_ref7) {
+        var id = _ref7.value,
+          object = _ref7.type,
+          companyId = _ref7.companyId;
+        return {
+          id: id,
+          companyId: companyId !== null && companyId !== void 0 ? companyId : '',
+          object: object
+        };
+      });
+    }
+    onChange(selectedOptionsValue);
+    setInputValue('');
+  };
+
+  /**
+   * This function pupulates the company name and avatar for the client options
+   * @param option - the option to get the company data for
+   * @returns the option with the company data
+   */
+  var getCompanyData = useCallback(function (option) {
+    var _option$companyId2, _clientToCompanyCount2, _option$value;
+    var company = option.type === 'client' ? companiesMap.get((_option$companyId2 = option.companyId) !== null && _option$companyId2 !== void 0 ? _option$companyId2 : '') : undefined;
+
+    // only setup the company avatar data if the client is part of more than one company
+    var clientsCount = (_clientToCompanyCount2 = clientToCompanyCount.get((_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : '')) !== null && _clientToCompanyCount2 !== void 0 ? _clientToCompanyCount2 : 0;
+    return _objectSpread(_objectSpread({}, option), option.type === 'client' && clientsCount > 1 ? {
+      companyName: company === null || company === void 0 ? void 0 : company.label,
+      companyAvatarSrc: company === null || company === void 0 ? void 0 : company.avatarSrc,
+      companyAvatarFallbackColor: company === null || company === void 0 ? void 0 : company.avatarFallbackColor
+    } : {});
+  }, [companiesMap, clientToCompanyCount]);
+  var handleFilterOption = useCallback(function (option, inputValue) {
+    var lowerCaseInputValue = inputValue.toLowerCase();
+    if (ignoreCompanies && option.data.type === 'company') {
+      return false;
+    }
+    var optionLabel = option.data.label.toLowerCase();
+    // for clients option, we should filter by company name too
+    // e.g. if a client company is ACME and the input is ACME, the result should
+    // show the client with the company ACME and the client with the company name
+    // ACME
+    if (option.data.type === 'client') {
+      var _option$data$companyI, _clientCompany$label;
+      var clientCompany = companiesMap.get((_option$data$companyI = option.data.companyId) !== null && _option$data$companyI !== void 0 ? _option$data$companyI : '');
+      var companyName = clientCompany === null || clientCompany === void 0 || (_clientCompany$label = clientCompany.label) === null || _clientCompany$label === void 0 ? void 0 : _clientCompany$label.toLowerCase();
+      if (companyName !== null && companyName !== void 0 && companyName.includes(lowerCaseInputValue)) {
+        return true;
+      }
+    }
+    return optionLabel.includes(lowerCaseInputValue);
+  }, [ignoreCompanies, companiesMap]);
+
+  /**
+   * This is a memoized object that defines the custom components for the combo select
+   */
+  var memoizedComponents = useMemo(function () {
+    return {
+      NoOptionsMessage: function NoOptionsMessage() {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "cop-flex cop-h-8 cop-items-center cop-gap-2 cop-px-3"
+        }, /*#__PURE__*/React.createElement(Body, {
+          className: "cop-text-[12px] cop-text-primary"
+        }, "No results found"));
+      },
+      GroupHeading: function GroupHeading(props) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "cop-flex cop-h-8 cop-items-center cop-gap-2 cop-px-3"
+        }, /*#__PURE__*/React.createElement(Heading, {
+          className: "cop-text-secondary",
+          size: "xs"
+        }, props.data.label));
+      },
+      Option: function Option(props) {
+        return /*#__PURE__*/React.createElement(ListItem, _extends({}, props, {
+          data: getCompanyData(props.data)
+        }));
+      },
+      DropdownIndicator: function DropdownIndicator() {
+        return null;
+      },
+      MultiValue: function MultiValue(props) {
+        return /*#__PURE__*/React.createElement(SelectedValueChip, _extends({}, props, {
+          data: getCompanyData(props.data)
+        }));
+      },
+      MenuList: function MenuList(props) {
+        return /*#__PURE__*/React.createElement(LimitedOptionsList, _extends({}, props, {
+          isGroup: false,
+          title: listHeading
+        }));
+      },
+      Group: function Group(props) {
+        return /*#__PURE__*/React.createElement(LimitedOptionsList, _extends({}, props, {
+          isGroup: true
+        }));
+      }
+    };
+  }, [getCompanyData]);
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    autoFocus: autoFocus,
+    isMulti: true,
+    name: name,
+    onInputChange: function onInputChange(inputValue) {
+      return setInputValue(inputValue);
+    },
+    options: options,
+    onChange: handleChange,
+    onBlur: onBlur,
+    placeholder: placeholder,
+    filterOption: handleFilterOption,
+    unstyled: true,
+    styles: _objectSpread({
+      clearIndicator: function clearIndicator() {
+        return {
+          display: 'none' // hide the clear button. Unfortunatelly, the class specificity is not enough to override the default styles.
+        };
+      },
+      placeholder: function placeholder(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          color: colors.gray[500]
+        });
+      }
+    }, styles),
+    classNames: {
+      valueContainer: function valueContainer() {
+        return 'cop-flex cop-gap-1';
+      },
+      input: function input() {
+        return 'cop-text-base cop-text-primary hover:cop-cursor-text';
+      },
+      menuList: function menuList() {
+        return 'cop-relative cop-bg-white cop-shadow-popover-50 cop-rounded cop-border cop-border-solid cop-border-secondary cop-mt-1';
+      },
+      control: function control() {
+        return 'cop-border-solid cop-border-[1px] cop-border-secondary focus-within:cop-border-primary cop-px-3 cop-py-[2px] cop-rounded';
+      }
+    },
+    components: memoizedComponents,
+    value: selectedOptions
+  }, others));
+};

package/dist/esm/components/UserCompanySelector/data.js

@@ -0,0 +1,66 @@
+// This file is generated by a script. Do not edit this file directly.
+/**
+ * This file is used to generate the data for the combo select stories
+ */
+
+function generateRandomSrc() {
+  return "https://i.pravatar.cc/150?img=".concat(Math.floor(Math.random() * 70) + 1);
+}
+var firstNames = ['John', 'Jane', 'Alice', 'Bob', 'Lara', 'Mike', 'Sarah', 'David', 'Emily', 'Daniel', 'Chris', 'Olivia', 'James', 'Sophia', 'Henry', 'Emma', 'Liam', 'Mia', 'Noah', 'Zoe'];
+var lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Miller', 'Davis', 'Garcia', 'Martinez', 'Lopez', 'Clark', 'Lewis', 'Walker', 'Young', 'Allen', 'King', 'Wright', 'Scott', 'Torres', 'Nguyen'];
+
+// Generate unique name combinations
+function generateUniqueNames(count) {
+  var combinations = [];
+  for (var _i = 0, _firstNames = firstNames; _i < _firstNames.length; _i++) {
+    var first = _firstNames[_i];
+    for (var _i2 = 0, _lastNames = lastNames; _i2 < _lastNames.length; _i2++) {
+      var last = _lastNames[_i2];
+      combinations.push("".concat(first, " ").concat(last));
+    }
+  }
+  // Shuffle and slice to the required count
+  var shuffled = combinations.sort(function () {
+    return 0.5 - Math.random();
+  });
+  return shuffled.slice(0, count);
+}
+
+// Get 100 unique names for internal and client users
+var internalUserNames = generateUniqueNames(100);
+var clientUserNames = generateUniqueNames(100);
+
+// Generate companies
+var companies = Array.from({
+  length: 100
+}, function (_, i) {
+  return {
+    value: "company-".concat(i + 1),
+    label: "Company ".concat(i + 1),
+    avatarSrc: generateRandomSrc(),
+    type: 'company'
+  };
+});
+
+// Generate internal users
+var internalUsers = internalUserNames.map(function (name, i) {
+  return {
+    value: "internal-".concat(i + 1),
+    label: name,
+    avatarSrc: generateRandomSrc(),
+    type: 'internalUser'
+  };
+});
+
+// Generate client users (with valid companyIds)
+var clientUsers = clientUserNames.map(function (name, i) {
+  var _companies$Math$floor;
+  return {
+    value: "client-".concat(i + 1),
+    label: name,
+    avatarSrc: generateRandomSrc(),
+    type: 'client',
+    companyId: (_companies$Math$floor = companies[Math.floor(Math.random() * companies.length)]) === null || _companies$Math$floor === void 0 ? void 0 : _companies$Math$floor.value
+  };
+});
+export { companies, internalUsers, clientUsers };

package/dist/esm/components/UserCompanySelector/types.js

@@ -0,0 +1,2 @@
+// This file is generated by a script. Do not edit this file directly.
+export {};

package/dist/esm/icons/AI.js

@@ -0,0 +1,13 @@
+// This file is generated by a script. Do not edit this file directly.
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+export var AI = function AI(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M12.793 3.328a.45.45 0 0 0-.293.422c0 .188.117.355.293.422L15 5l.828 2.207a.45.45 0 0 0 .422.293.45.45 0 0 0 .422-.293L17.5 5l2.207-.828A.45.45 0 0 0 20 3.75a.45.45 0 0 0-.293-.422L17.5 2.5 16.672.293A.45.45 0 0 0 16.25 0a.45.45 0 0 0-.422.293L15 2.5zM.363 9.375a.62.62 0 0 0-.363.57c0 .246.14.465.363.567l.664.308.317.145.023.012 3.45 1.593 1.593 3.446.012.023.144.316.309.668a.622.622 0 0 0 1.133 0l.308-.668.145-.316.012-.023 1.593-3.45 3.45-1.59.023-.011.316-.145.668-.308a.622.622 0 0 0 0-1.133l-.668-.309-.316-.144-.023-.012-3.45-1.594-1.59-3.449-.011-.023-.145-.32-.308-.669a.623.623 0 0 0-1.133 0l-.309.668-.144.317-.012.023-1.594 3.45L1.371 8.91l-.023.012-.317.144zm3.242.566 2-.921c.407-.188.73-.512.918-.918l.922-2 .922 2c.188.406.512.73.918.918l2 .921-2 .922c-.406.188-.73.512-.918.918l-.922 2-.922-2a1.87 1.87 0 0 0-.918-.918l-2-.918zM15 15l-2.207.828a.45.45 0 0 0-.293.422c0 .188.117.355.293.422L15 17.5l.828 2.207a.45.45 0 0 0 .422.293.45.45 0 0 0 .422-.293L17.5 17.5l2.207-.828A.45.45 0 0 0 20 16.25a.45.45 0 0 0-.293-.422L17.5 15l-.828-2.207a.45.45 0 0 0-.422-.293.45.45 0 0 0-.422.293z"
+  }));
+};

package/dist/esm/icons/API.js

@@ -0,0 +1,13 @@
+// This file is generated by a script. Do not edit this file directly.
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+export var API = function API(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M17.5 3.125c.344 0 .625.281.625.625v12.5a.627.627 0 0 1-.625.625h-15a.627.627 0 0 1-.625-.625V3.75c0-.344.281-.625.625-.625zM2.5 1.25A2.5 2.5 0 0 0 0 3.75v12.5c0 1.379 1.121 2.5 2.5 2.5h15c1.379 0 2.5-1.121 2.5-2.5V3.75c0-1.379-1.121-2.5-2.5-2.5zm1.496 4.68a.934.934 0 0 0 .059 1.324L7.05 10l-2.996 2.746A.938.938 0 0 0 5.32 14.13l3.75-3.438a.938.938 0 0 0 0-1.383L5.32 5.872a.934.934 0 0 0-1.324.059m5.692 7.195a.935.935 0 0 0-.938.938c0 .519.418.937.938.937h5.624c.52 0 .938-.418.938-.937a.935.935 0 0 0-.937-.938z"
+  }));
+};

package/dist/esm/icons/Airtable.js

@@ -0,0 +1,13 @@
+// This file is generated by a script. Do not edit this file directly.
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+export var Airtable = function Airtable(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 21 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M8.936 1.688 1.475 4.775a.5.5 0 0 0 .007.927l7.492 2.971a2.78 2.78 0 0 0 2.05 0l7.492-2.971a.5.5 0 0 0 .007-.927l-7.461-3.087a2.78 2.78 0 0 0-2.126 0M10.664 10.296v7.422a.5.5 0 0 0 .684.465l8.349-3.24a.5.5 0 0 0 .316-.466V7.055a.5.5 0 0 0-.685-.465L10.98 9.831a.5.5 0 0 0-.316.465M8.714 10.678l-2.477 1.196-.252.121-5.23 2.507c-.332.16-.755-.082-.755-.45V7.085c0-.133.068-.248.16-.335a.6.6 0 0 1 .127-.095.53.53 0 0 1 .454-.035l7.932 3.143c.403.16.435.725.041.915"
+  }));
+};

package/dist/esm/icons/AppSetup.js

@@ -0,0 +1,13 @@
+// This file is generated by a script. Do not edit this file directly.
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+export var AppSetup = function AppSetup(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M0 16.25c0 .52.418.938.938.938H3.27a3.123 3.123 0 0 0 5.96 0h9.833c.519 0 .937-.418.937-.938a.935.935 0 0 0-.937-.937H9.23a3.123 3.123 0 0 0-5.96 0H.938A.935.935 0 0 0 0 16.25m5 0a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0M12.5 10a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0m1.25-3.125a3.12 3.12 0 0 0-2.98 2.188H.938A.935.935 0 0 0 0 10c0 .52.418.938.938.938h9.832a3.124 3.124 0 0 0 5.96 0h2.332c.52 0 .938-.418.938-.938a.935.935 0 0 0-.937-.937H16.73a3.12 3.12 0 0 0-2.981-2.188M7.5 5a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5m2.98-2.187a3.124 3.124 0 0 0-5.96 0H.938A.935.935 0 0 0 0 3.75c0 .52.418.938.938.938H4.52a3.123 3.123 0 0 0 5.96 0h8.583c.519 0 .937-.418.937-.938a.935.935 0 0 0-.937-.937z"
+  }));
+};

package/dist/esm/icons/Archive.js

@@ -0,0 +1,13 @@
+// This file is generated by a script. Do not edit this file directly.
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+export var Archive = function Archive(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M1.875 3.125V5h16.25V3.125zM1.25 1.25h17.5c.691 0 1.25.559 1.25 1.25v3.125c0 .691-.559 1.25-1.25 1.25H1.25C.559 6.875 0 6.316 0 5.625V2.5c0-.691.559-1.25 1.25-1.25m5 8.438c0-.52.418-.938.938-.938h5.625c.519 0 .937.418.937.938 0 .519-.418.937-.937.937H7.187a.935.935 0 0 1-.937-.937m-5 6.562V8.125h1.875v8.125c0 .344.281.625.625.625h12.5a.627.627 0 0 0 .625-.625V8.125h1.875v8.125c0 1.379-1.121 2.5-2.5 2.5H3.75a2.5 2.5 0 0 1-2.5-2.5"
+  }));
+};

package/dist/esm/icons/ArrowDownSolid.js

@@ -0,0 +1,13 @@
+// This file is generated by a script. Do not edit this file directly.
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+export var ArrowDownSolid = function ArrowDownSolid(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M10.886 18.383a1.25 1.25 0 0 1-1.77 0l-6.25-6.25a1.252 1.252 0 0 1 1.77-1.77l4.117 4.121V2.5c0-.691.559-1.25 1.25-1.25s1.25.559 1.25 1.25v11.98l4.117-4.113a1.252 1.252 0 0 1 1.77 1.77l-6.25 6.25z"
+  }));
+};

package/dist/esm/icons/ArrowLeft.js

@@ -0,0 +1,13 @@
+// This file is generated by a script. Do not edit this file directly.
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+export var ArrowLeft = function ArrowLeft(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M1.54 10.682a.95.95 0 0 1-.29-.68c0-.258.105-.5.29-.68L8.413 2.76a.937.937 0 0 1 1.293 1.355l-5.18 4.95h13.286c.519 0 .937.418.937.937s-.418.938-.937.938H4.527l5.184 4.945a.938.938 0 0 1-1.293 1.356l-6.875-6.563z"
+  }));
+};

package/dist/esm/icons/ArrowNE.js

@@ -0,0 +1,13 @@
+// This file is generated by a script. Do not edit this file directly.
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+export var ArrowNE = function ArrowNE(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M15.882 3.08c.575 0 1.038.463 1.038 1.038v10.378c0 .575-.463 1.038-1.038 1.038a1.036 1.036 0 0 1-1.038-1.038V6.622L4.85 16.615a1.037 1.037 0 0 1-1.467-1.466l9.994-9.989-7.878-.004a1.036 1.036 0 0 1-1.038-1.038c0-.575.463-1.038 1.038-1.038z"
+  }));
+};

package/dist/esm/icons/ArrowRight.js

@@ -0,0 +1,13 @@
+// This file is generated by a script. Do not edit this file directly.
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+export var ArrowRight = function ArrowRight(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M18.46 10.682a.94.94 0 0 0 0-1.36L11.587 2.76a.937.937 0 0 0-1.293 1.355l5.18 4.95H2.188a.935.935 0 0 0-.938.937c0 .52.418.938.938.938h13.285l-5.184 4.945a.938.938 0 0 0 1.293 1.356l6.875-6.563z"
+  }));
+};

package/dist/esm/icons/ArrowUpSolid.js

@@ -0,0 +1,13 @@
+// This file is generated by a script. Do not edit this file directly.
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+export var ArrowUpSolid = function ArrowUpSolid(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M10.886 1.616a1.25 1.25 0 0 0-1.77 0l-6.25 6.25a1.252 1.252 0 0 0 1.77 1.77l4.117-4.121v11.984c0 .691.559 1.25 1.25 1.25s1.25-.559 1.25-1.25V5.519l4.117 4.113a1.252 1.252 0 0 0 1.77-1.77l-6.25-6.25z"
+  }));
+};

package/dist/esm/icons/AssemblyLogo.js

@@ -0,0 +1,13 @@
+// This file is generated by a script. Do not edit this file directly.
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+export var AssemblyLogo = function AssemblyLogo(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M19.998 14.435v3.375c0 1.193-.97 2.161-2.167 2.161H.597a.594.594 0 0 1-.421-1.014l4.04-4.029a1.7 1.7 0 0 1 1.194-.493zM19.998 6.813v3.374c0 1.193-.97 2.161-2.167 2.161H6.803l5.056-5.042a1.7 1.7 0 0 1 1.194-.494zM20 .624v1.941c0 1.193-.97 2.161-2.166 2.161h-3.385L18.984.204A.596.596 0 0 1 20 .624"
+  }));
+};

package/dist/esm/icons/At.js

@@ -0,0 +1,13 @@
+// This file is generated by a script. Do not edit this file directly.
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+export var At = function At(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M10 1.875A8.124 8.124 0 0 0 1.875 10 8.124 8.124 0 0 0 10 18.125c.52 0 .938.418.938.938 0 .519-.418.937-.938.937-5.523 0-10-4.477-10-10S4.477 0 10 0s10 4.477 10 10v1.094a3.594 3.594 0 0 1-6.535 2.062A4.686 4.686 0 0 1 5.313 10a4.686 4.686 0 0 1 7.648-3.633.94.94 0 0 1 1.726.508v4.219a1.719 1.719 0 0 0 3.438 0V10A8.124 8.124 0 0 0 10 1.875M12.813 10a2.812 2.812 0 1 0-5.625 0 2.812 2.812 0 0 0 5.625 0"
+  }));
+};

package/dist/esm/icons/Attachment.js

@@ -0,0 +1,13 @@
+// This file is generated by a script. Do not edit this file directly.
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+export var Attachment = function Attachment(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M15.506 3.804a2.267 2.267 0 0 0-3.209 0l-6.543 6.55a3.81 3.81 0 0 0 0 5.39 3.815 3.815 0 0 0 5.39 0l5.18-5.186a.819.819 0 0 1 1.156 1.157l-5.18 5.189a5.444 5.444 0 0 1-7.702 0 5.454 5.454 0 0 1-.004-7.71l6.547-6.55a3.907 3.907 0 0 1 5.524 5.523l-6.267 6.27a2.553 2.553 0 0 1-3.802-.211 2.56 2.56 0 0 1 .187-3.405l5.177-5.175a.819.819 0 0 1 1.156 1.156l-5.173 5.179a.915.915 0 0 0-.068 1.221.915.915 0 0 0 1.364.075l6.267-6.267a2.27 2.27 0 0 0 0-3.21z"
+  }));
+};