@abstraks-dev/ui-library 1.1.24 → 1.1.28

package/dist/components/FileInput.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FileInput = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _ssrSafeId = require("../utils/ssrSafeId");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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); }
+/**
+ * FileInput - A stateless, accessible file input component
+ *
+ * Features:
+ * - Multiple file types support via accept prop
+ * - Custom label content (text, images, or components)
+ * - Accessible with proper ARIA labels
+ * - Multiple file selection support
+ * - Drag and drop styling ready
+ * - Hidden native input with custom styling
+ *
+ * @component
+ * @example
+ * <FileInput
+ *   accept="image/*"
+ *   onChange={(event) => handleFileChange(event)}
+ *   label="📷 Upload Image"
+ *   multiple={false}
+ * />
+ */
+const FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  className = '',
+  // Functionality props
+  accept = '*/*',
+  multiple = false,
+  onChange,
+  disabled = false,
+  // Content props
+  label = 'Choose File',
+  // Accessibility props
+  ariaLabel,
+  ariaDescribedBy,
+  // Additional props
+  ...rest
+}, ref) => {
+  const stableId = (0, _ssrSafeId.useStableId)(id);
+  const inputRef = (0, _react.useRef)(null);
+
+  // Handle click on label to trigger file input
+  const handleLabelClick = () => {
+    if (!disabled && inputRef.current) {
+      inputRef.current.click();
+    }
+  };
+  const combinedClassName = ['ui-file-input', disabled && 'ui-file-input--disabled', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: combinedClassName
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: stableId,
+    className: "ui-file-input__label",
+    onClick: handleLabelClick,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy
+  }, label), /*#__PURE__*/_react.default.createElement("input", _extends({
+    ref: ref || inputRef,
+    id: stableId,
+    type: "file",
+    accept: accept,
+    multiple: multiple,
+    onChange: onChange,
+    disabled: disabled,
+    className: "ui-file-input__input",
+    "aria-label": ariaLabel || 'File input',
+    "aria-describedby": ariaDescribedBy
+  }, rest)));
+});
+FileInput.displayName = 'FileInput';
+FileInput.propTypes = {
+  // Core props
+  id: _propTypes.string,
+  className: _propTypes.string,
+  // Functionality props
+  accept: _propTypes.string,
+  multiple: _propTypes.bool,
+  onChange: _propTypes.func,
+  disabled: _propTypes.bool,
+  // Content props
+  label: _propTypes.node,
+  // Accessibility props
+  ariaLabel: _propTypes.string,
+  ariaDescribedBy: _propTypes.string
+};
+var _default = exports.default = FileInput;

package/dist/components/Form.js

@@ -141,6 +141,28 @@ const Form = exports.Form = /*#__PURE__*/(0, _react.forwardRef)(({
     }
   }, [validationMode, validateField, announceErrors]);
 
+  /**
+   * Extract all field names from form children
+   * @returns {Array} Array of field names
+   */
+  const getAllFieldNames = (0, _react.useCallback)(() => {
+    const fieldNames = [];
+    const extractFieldNames = childrenToExtract => {
+      _react.Children.forEach(childrenToExtract, child => {
+        if (! /*#__PURE__*/(0, _react.isValidElement)(child)) return;
+        const fieldName = child.props?.name || child.props?.setName;
+        if (fieldName && !fieldNames.includes(fieldName)) {
+          fieldNames.push(fieldName);
+        }
+        if (child.props?.children) {
+          extractFieldNames(child.props.children);
+        }
+      });
+    };
+    extractFieldNames(children);
+    return fieldNames;
+  }, [children]);
+
   /**
    * Validates all form fields
    * @returns {Object} Object containing all field errors
@@ -148,14 +170,16 @@ const Form = exports.Form = /*#__PURE__*/(0, _react.forwardRef)(({
   const validateAllFields = (0, _react.useCallback)(() => {
     if (!onValidate) return {};
     const newErrors = {};
-    Object.keys(formData).forEach(fieldName => {
-      const error = validateField(fieldName, formData[fieldName]);
+    const allFieldNames = getAllFieldNames();
+    allFieldNames.forEach(fieldName => {
+      const value = formData[fieldName];
+      const error = validateField(fieldName, value);
       if (error) {
         newErrors[fieldName] = error;
       }
     });
     return newErrors;
-  }, [formData, validateField, onValidate]);
+  }, [getAllFieldNames, formData, validateField, onValidate]);
 
   /**
    * Handles form submission
@@ -219,46 +243,70 @@ const Form = exports.Form = /*#__PURE__*/(0, _react.forwardRef)(({
   // Generate comprehensive class names
   const classNames = [componentName, additionalClassName, disabled && `${componentName}--disabled`, isSubmitting && `${componentName}--submitting`, hasErrors && `${componentName}--has-errors`].filter(Boolean).join(' ');
 
-  // Enhanced children with form context
-  const enhancedChildren = _react.default.Children.map(children, child => {
-    if (/*#__PURE__*/_react.default.isValidElement(child)) {
-      // Check if this is a form field that needs form context
-      const fieldName = child.props?.name || child.props?.setName;
-      if (fieldName) {
-        return /*#__PURE__*/_react.default.cloneElement(child, {
-          error: allErrors[fieldName],
-          errorText: allErrors[fieldName],
-          value: formData[fieldName] || child.props.value || '',
-          inputValue: formData[fieldName] || child.props.inputValue || '',
-          onChangeFunc: event => {
-            const value = event.target?.value !== undefined ? event.target.value : event;
-            updateFormData(fieldName, value);
-            child.props?.onChangeFunc?.(event);
-          },
-          onChange: event => {
-            const value = event.target?.value !== undefined ? event.target.value : event;
-            updateFormData(fieldName, value);
-            child.props?.onChange?.(event);
-          },
-          onBlur: event => {
-            const value = event.target?.value !== undefined ? event.target.value : formData[fieldName];
-            handleFieldBlur(fieldName, value);
-            child.props?.onBlur?.(event);
-          },
-          blur: event => {
-            const value = event.target?.value !== undefined ? event.target.value : formData[fieldName];
-            handleFieldBlur(fieldName, value);
-            child.props?.blur?.(event);
-          },
-          disabled: disabled || child.props?.disabled,
-          'aria-invalid': !!allErrors[fieldName],
-          'aria-describedby': allErrors[fieldName] ? `${fieldName}-error` : child.props?.['aria-describedby'],
-          ...child.props
+  // Recursively enhance children with form context
+  const enhanceChildren = childrenToEnhance => _react.Children.map(childrenToEnhance, child => {
+    if (! /*#__PURE__*/(0, _react.isValidElement)(child)) return child;
+    const fieldName = child.props?.name || child.props?.setName;
+    let enhancedChild = child;
+    if (fieldName) {
+      const childType = child.type?.displayName || child.type?.name;
+      const isCheckbox = childType === 'Checkbox' || child.props?.type === 'checkbox';
+      const isRadio = childType === 'Radio' || child.props?.type === 'radio';
+      const commonProps = {
+        error: allErrors[fieldName],
+        errorText: allErrors[fieldName],
+        onChangeFunc: event => {
+          const target = event.target;
+          const value = target?.type === 'checkbox' ? target.checked : target?.value !== undefined ? target.value : event;
+          updateFormData(fieldName, value);
+          child.props?.onChangeFunc?.(event);
+        },
+        onChange: event => {
+          const target = event.target;
+          const value = target?.type === 'checkbox' ? target.checked : target?.value !== undefined ? target.value : event;
+          updateFormData(fieldName, value);
+          child.props?.onChange?.(event);
+        },
+        onBlur: event => {
+          const target = event.target;
+          const value = target?.type === 'checkbox' ? target.checked : target?.value !== undefined ? target.value : formData[fieldName];
+          handleFieldBlur(fieldName, value);
+          child.props?.onBlur?.(event);
+        },
+        blur: event => {
+          const target = event.target;
+          const value = target?.type === 'checkbox' ? target.checked : target?.value !== undefined ? target.value : formData[fieldName];
+          handleFieldBlur(fieldName, value);
+          child.props?.blur?.(event);
+        },
+        disabled: disabled || child.props?.disabled,
+        'aria-invalid': !!allErrors[fieldName],
+        'aria-describedby': allErrors[fieldName] ? `${fieldName}-error` : child.props?.['aria-describedby']
+      };
+      if (isRadio) {
+        const childValue = child.props.value ?? child.props.inputValue;
+        commonProps.value = childValue;
+        commonProps.inputValue = childValue;
+        commonProps.checked = formData[fieldName] !== undefined ? formData[fieldName] === childValue : child.props.checked;
+      } else if (isCheckbox) {
+        commonProps.checked = formData[fieldName] !== undefined ? formData[fieldName] : child.props.checked ?? false;
+      } else {
+        commonProps.value = formData[fieldName] ?? child.props.value ?? '';
+        commonProps.inputValue = formData[fieldName] ?? child.props.inputValue ?? '';
+      }
+      enhancedChild = /*#__PURE__*/(0, _react.cloneElement)(child, commonProps);
+    }
+    if (child.props?.children) {
+      const nestedChildren = enhanceChildren(child.props.children);
+      if (nestedChildren !== child.props.children) {
+        enhancedChild = /*#__PURE__*/(0, _react.cloneElement)(enhancedChild, {
+          children: nestedChildren
         });
       }
     }
-    return child;
+    return enhancedChild;
   });
+  const enhancedChildren = enhanceChildren(children);
   return /*#__PURE__*/_react.default.createElement("form", _extends({
     ref: ref,
     className: classNames,

package/dist/components/Header.js

@@ -65,6 +65,9 @@ var _accessibility = require("../utils/accessibility");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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); } // components
 // utils
+// Constants
+const SCROLL_THRESHOLD = 100; // Pixels to scroll before hiding header
+
 /**
  * Header Component
  *
@@ -121,6 +124,30 @@ const Header = exports.Header = /*#__PURE__*/(0, _react.forwardRef)(({
   const finalClassName = className || additionalClassName;
   const size = (0, _useWindowSize.useWindowSize)();
   const isMobile = size.width < 768;
+  const [isHidden, setIsHidden] = (0, _react.useState)(false);
+  const lastScrollY = (0, _react.useRef)(0);
+
+  // Memoized scroll handler to prevent recreating on every render
+  const onScroll = (0, _react.useCallback)(() => {
+    const currentScrollY = window.scrollY;
+    if (currentScrollY > lastScrollY.current && currentScrollY > SCROLL_THRESHOLD) {
+      setIsHidden(true);
+    } else if (currentScrollY < lastScrollY.current || currentScrollY <= SCROLL_THRESHOLD) {
+      setIsHidden(false);
+    }
+    lastScrollY.current = currentScrollY;
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!isMobile) {
+      setIsHidden(false);
+      return;
+    }
+
+    // Initialize lastScrollY with current scroll position
+    lastScrollY.current = window.scrollY;
+    window.addEventListener('scroll', onScroll);
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [isMobile, onScroll]);
 
   // Handle keyboard navigation
   const handleKeyDown = event => {
@@ -170,10 +197,11 @@ const Header = exports.Header = /*#__PURE__*/(0, _react.forwardRef)(({
   const handleEllipsesToggle = () => {
     if (onEllipsesToggle) onEllipsesToggle(!isEllipsesOpen);
   };
+  const headerClassName = `${componentName} ${finalClassName} ${isMobile && isHidden ? `${componentName}--hidden` : ''}`;
   return /*#__PURE__*/_react.default.createElement("header", _extends({
     ref: ref,
     id: finalId,
-    className: `${componentName} ${finalClassName}`,
+    className: headerClassName,
     "data-testid": componentName,
     role: "banner",
     "aria-label": ariaLabel,

package/dist/components/Radio.js

@@ -135,9 +135,7 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(({
     "aria-required": required || undefined
   }, restProps)), /*#__PURE__*/_react.default.createElement("span", {
     className: "custom-radio"
-  }), finalLabel && /*#__PURE__*/_react.default.createElement("span", {
-    className: `${componentName}__label-text`
-  }, finalLabel)), error && errorText && /*#__PURE__*/_react.default.createElement(_Error.Error, {
+  })), error && errorText && /*#__PURE__*/_react.default.createElement(_Error.Error, {
     id: errorId,
     className: `${componentName}__error`,
     role: "alert",

package/dist/components/Search.js

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Search = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _TextInput = require("./TextInput");
+var _Button = require("./Button");
+var _icons = require("../icons");
+var _ssrSafeId = require("../utils/ssrSafeId");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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); } // components
+/**
+ * Search Component
+ *
+ * A flexible search component that can filter various types of data with real-time updates.
+ * Supports filtering by multiple fields and customizable result rendering.
+ *
+ * This is a stateless component - state management should be handled externally.
+ *
+ * @component
+ * @example
+ * <Search
+ *   placeholder="Search users..."
+ *   searchValue={searchValue}
+ *   onSearchChange={handleSearchChange}
+ *   data={users}
+ *   searchFields={['name', 'email']}
+ *   renderResult={({ item, highlightMatch }) => (
+ *     <div className="search-result-item">
+ *       <h4>{highlightMatch(item.name)}</h4>
+ *       <p>{item.email}</p>
+ *     </div>
+ *   )}
+ * />
+ */
+const Search = exports.Search = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  className = '',
+  placeholder = 'Search...',
+  searchValue = '',
+  onSearchChange,
+  // Data props
+  data = [],
+  searchFields = [],
+  filterFunction,
+  // Rendering props
+  renderResult,
+  renderEmptyState,
+  renderNoResults,
+  // Appearance props
+  variant = 'default',
+  size = 'medium',
+  disabled = false,
+  hideResultsWhenEmpty = false,
+  maxResults,
+  // Loading state
+  isLoading = false,
+  loadingText = 'Searching...',
+  // Result container props
+  resultContainerClassName = '',
+  resultItemClassName = '',
+  // Advanced props
+  caseSensitive = false,
+  highlightMatches = true,
+  // Icon and button props
+  showIcon = true,
+  iconSize = 20,
+  iconColor = '#6c757d',
+  showButton = false,
+  buttonText = 'Search',
+  buttonVariant = 'primary',
+  onButtonClick,
+  ...rest
+}, ref) => {
+  const stableId = (0, _ssrSafeId.useStableId)(id);
+
+  // Filter data based on search value
+  const getFilteredData = () => {
+    if (!searchValue.trim()) {
+      return [];
+    }
+    if (filterFunction) {
+      return filterFunction(data, searchValue);
+    }
+    if (!searchFields.length) {
+      return data;
+    }
+    const searchTerm = caseSensitive ? searchValue : searchValue.toLowerCase();
+    const filtered = data.filter(item => {
+      return searchFields.some(field => {
+        const fieldValue = getNestedValue(item, field);
+        if (fieldValue == null) return false;
+        const stringValue = String(fieldValue);
+        const compareValue = caseSensitive ? stringValue : stringValue.toLowerCase();
+        return compareValue.includes(searchTerm);
+      });
+    });
+    return maxResults ? filtered.slice(0, maxResults) : filtered;
+  };
+
+  // Helper function to get nested object values
+  const getNestedValue = (obj, path) => {
+    return path.split('.').reduce((current, key) => current?.[key], obj);
+  };
+
+  // Highlight matching text
+  const highlightMatch = (text, field = null) => {
+    if (!highlightMatches || !searchValue.trim() || !text) {
+      return text;
+    }
+    const textStr = String(text);
+    const searchTerm = caseSensitive ? searchValue : searchValue.toLowerCase();
+    const compareText = caseSensitive ? textStr : textStr.toLowerCase();
+    if (!compareText.includes(searchTerm)) {
+      return textStr;
+    }
+    const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, caseSensitive ? 'g' : 'gi');
+    const parts = textStr.split(regex);
+    return parts.map((part, index) => {
+      const isMatch = caseSensitive ? part === searchTerm : part.toLowerCase() === searchTerm.toLowerCase();
+      return isMatch ? /*#__PURE__*/_react.default.createElement("mark", {
+        key: index,
+        className: "search-highlight"
+      }, part) : part;
+    });
+  };
+  const filteredData = getFilteredData();
+  const hasResults = filteredData.length > 0;
+  const showResults = searchValue.trim().length > 0;
+
+  // Default render functions
+  const defaultRenderResult = ({
+    item,
+    index
+  }) => /*#__PURE__*/_react.default.createElement("div", {
+    key: index,
+    className: `search-result-item ${resultItemClassName}`.trim()
+  }, typeof item === 'string' ? item : JSON.stringify(item));
+  const defaultRenderEmptyState = () => /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-empty-state"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Start typing to search..."));
+  const defaultRenderNoResults = () => /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-no-results"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "No results found for \"", searchValue, "\""));
+
+  // Component classes
+  const searchClasses = ['search-component', `search-component--${variant}`, `search-component--${size}`, disabled && 'search-component--disabled', className].filter(Boolean).join(' ');
+  const resultsClasses = ['search-results', `search-results--${variant}`, resultContainerClassName].filter(Boolean).join(' ');
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: searchClasses
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-input-container"
+  }, showIcon && /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-icon"
+  }, /*#__PURE__*/_react.default.createElement(_icons.Magnify, {
+    dimensions: iconSize,
+    fill: iconColor,
+    additionalClassName: "search-magnify-icon"
+  })), /*#__PURE__*/_react.default.createElement(_TextInput.TextInput, {
+    ref: ref,
+    id: stableId,
+    type: "text",
+    placeholder: placeholder,
+    value: searchValue,
+    onChange: onSearchChange,
+    disabled: disabled,
+    size: size,
+    className: `search-input ${showIcon ? 'search-input--with-icon' : ''}`
+  }), showButton && /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    variant: buttonVariant,
+    size: size,
+    onClick: onButtonClick,
+    disabled: disabled,
+    className: "search-button"
+  }, buttonText)), showResults && /*#__PURE__*/_react.default.createElement("div", {
+    className: resultsClasses
+  }, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-loading"
+  }, /*#__PURE__*/_react.default.createElement("p", null, loadingText)) : hasResults ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-results-list"
+  }, filteredData.map((item, index) => {
+    const ResultComponent = renderResult || defaultRenderResult;
+    return /*#__PURE__*/_react.default.createElement(ResultComponent, {
+      key: item.id || item._id || index,
+      item: item,
+      index: index,
+      highlightMatch: highlightMatch,
+      searchValue: searchValue
+    });
+  })) : searchValue.trim() ? renderNoResults ? renderNoResults() : defaultRenderNoResults() : renderEmptyState ? renderEmptyState() : defaultRenderEmptyState()));
+});
+Search.displayName = 'Search';
+Search.propTypes = {
+  // Core props
+  id: _propTypes.string,
+  className: _propTypes.string,
+  placeholder: _propTypes.string,
+  searchValue: _propTypes.string,
+  onSearchChange: _propTypes.func,
+  // Data props
+  data: _propTypes.array,
+  searchFields: _propTypes.array,
+  filterFunction: _propTypes.func,
+  // Rendering props
+  renderResult: _propTypes.func,
+  renderEmptyState: _propTypes.func,
+  renderNoResults: _propTypes.func,
+  // Appearance props
+  variant: (0, _propTypes.oneOf)(['default', 'bordered', 'minimal']),
+  size: (0, _propTypes.oneOf)(['small', 'medium', 'large']),
+  disabled: _propTypes.bool,
+  hideResultsWhenEmpty: _propTypes.bool,
+  maxResults: _propTypes.number,
+  // Loading state
+  isLoading: _propTypes.bool,
+  loadingText: _propTypes.string,
+  // Result container props
+  resultContainerClassName: _propTypes.string,
+  resultItemClassName: _propTypes.string,
+  // Advanced props
+  caseSensitive: _propTypes.bool,
+  highlightMatches: _propTypes.bool,
+  // Icon and button props
+  showIcon: _propTypes.bool,
+  iconSize: _propTypes.number,
+  iconColor: _propTypes.string,
+  showButton: _propTypes.bool,
+  buttonText: _propTypes.string,
+  buttonVariant: (0, _propTypes.oneOf)(['primary', 'secondary', 'success', 'error', 'warning']),
+  onButtonClick: _propTypes.func
+};
+var _default = exports.default = Search;

package/dist/icons/AccountBox.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AccountBox = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const AccountBox = ({
+  componentName = 'account-box',
+  additionalClassName = '',
+  dimensions = 24,
+  viewBox = '0 -960 960 960',
+  fill = '#adb5bd'
+}) => /*#__PURE__*/_react.default.createElement("svg", {
+  className: `icon ${componentName} ${additionalClassName}`,
+  width: dimensions,
+  height: dimensions,
+  viewBox: viewBox,
+  fill: fill
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M200-246q54-53 125.5-83.5T480-360q83 0 154.5 30.5T760-246v-514H200v514Zm280-194q58 0 99-41t41-99q0-58-41-99t-99-41q-58 0-99 41t-41 99q0 58 41 99t99 41ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm69-80h422q-44-39-99.5-59.5T480-280q-56 0-112.5 20.5T269-200Zm211-320q-25 0-42.5-17.5T420-580q0-25 17.5-42.5T480-640q25 0 42.5 17.5T540-580q0 25-17.5 42.5T480-520Zm0 17Z"
+}));
+exports.AccountBox = AccountBox;
+AccountBox.propTypes = {
+  componentName: _propTypes.string,
+  additionalClassName: _propTypes.string,
+  dimensions: _propTypes.number,
+  viewBox: _propTypes.string,
+  fill: _propTypes.string
+};
+var _default = exports.default = AccountBox;

package/dist/icons/AccountCircle.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AccountCircle = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const AccountCircle = ({
+  componentName = 'account-circle',
+  additionalClassName = '',
+  dimensions = 24,
+  viewBox = '0 -960 960 960',
+  fill = '#adb5bd'
+}) => /*#__PURE__*/_react.default.createElement("svg", {
+  className: `icon ${componentName} ${additionalClassName}`,
+  width: dimensions,
+  height: dimensions,
+  viewBox: viewBox,
+  fill: fill
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"
+}));
+exports.AccountCircle = AccountCircle;
+AccountCircle.propTypes = {
+  componentName: _propTypes.string,
+  additionalClassName: _propTypes.string,
+  dimensions: _propTypes.number,
+  viewBox: _propTypes.string,
+  fill: _propTypes.string
+};
+var _default = exports.default = AccountCircle;

package/dist/icons/ArrowIcon.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArrowIcon = void 0;
+exports.default = exports.ArrowIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -29,4 +29,5 @@ ArrowIcon.propTypes = {
   dimensions: _propTypes.number,
   viewBox: _propTypes.string,
   fill: _propTypes.string
-};
+};
+var _default = exports.default = ArrowIcon;