@abstraks-dev/ui-library 1.1.26 → 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

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;

package/dist/icons/ArrowRight.js

@@ -3,31 +3,42 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArrowRight = void 0;
+exports.default = exports.ArrowRight = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ArrowRight = ({
-  className = '',
-  size = 24,
-  color = 'currentColor'
+  componentName = 'arrow-right',
+  additionalClassName = '',
+  dimensions = 24,
+  viewBox = '0 0 24 24',
+  fill = 'currentColor'
 }) => /*#__PURE__*/_react.default.createElement("svg", {
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
+  className: `icon ${componentName} ${additionalClassName}`,
+  width: dimensions,
+  height: dimensions,
+  viewBox: viewBox,
   fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  className: className
+  xmlns: "http://www.w3.org/2000/svg"
 }, /*#__PURE__*/_react.default.createElement("path", {
   d: "M5 12H19",
-  stroke: color,
+  stroke: fill,
   strokeWidth: "2",
   strokeLinecap: "round",
   strokeLinejoin: "round"
 }), /*#__PURE__*/_react.default.createElement("path", {
   d: "M12 5L19 12L12 19",
-  stroke: color,
+  stroke: fill,
   strokeWidth: "2",
   strokeLinecap: "round",
   strokeLinejoin: "round"
 }));
-exports.ArrowRight = ArrowRight;
+exports.ArrowRight = ArrowRight;
+ArrowRight.propTypes = {
+  componentName: _propTypes.string,
+  additionalClassName: _propTypes.string,
+  dimensions: _propTypes.number,
+  viewBox: _propTypes.string,
+  fill: _propTypes.string
+};
+var _default = exports.default = ArrowRight;

package/dist/icons/BookOpen.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BookOpen = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BookOpen = ({
+  componentName = 'book-open',
+  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: "M560-564v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-600q-38 0-73 9.5T560-564Zm0 220v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-380q-38 0-73 9t-67 27Zm0-110v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-490q-38 0-73 9.5T560-454ZM260-320q47 0 91.5 10.5T440-278v-394q-41-24-87-36t-93-12q-36 0-71.5 7T120-692v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700-320q36 0 70.5 6t69.5 18v-396q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740q51-30 106.5-45T700-800q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59ZM280-494Z"
+}));
+exports.BookOpen = BookOpen;
+BookOpen.propTypes = {
+  componentName: _propTypes.string,
+  additionalClassName: _propTypes.string,
+  dimensions: _propTypes.number,
+  viewBox: _propTypes.string,
+  fill: _propTypes.string
+};
+var _default = exports.default = BookOpen;

package/dist/icons/Camera.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CameraIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CameraIcon = ({
+  componentName = 'camera-icon',
+  additionalClassName = '',
+  dimensions = 24,
+  viewBox = '0 0 24 24',
+  fill = '#333333'
+}) => /*#__PURE__*/_react.default.createElement("svg", {
+  className: `icon ${componentName} ${additionalClassName}`,
+  width: dimensions,
+  height: dimensions,
+  viewBox: viewBox,
+  fill: fill
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"
+}));
+exports.CameraIcon = CameraIcon;
+CameraIcon.propTypes = {
+  componentName: _propTypes.string,
+  additionalClassName: _propTypes.string,
+  dimensions: _propTypes.number,
+  viewBox: _propTypes.string,
+  fill: _propTypes.string
+};
+var _default = exports.default = CameraIcon;

package/dist/icons/CaretDown.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CaretDown = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CaretDown = ({
+  componentName = 'caret-down',
+  additionalClassName = '',
+  dimensions = 24,
+  viewBox = '0 96 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: "M480 711 240 471l43-43 197 198 197-197 43 43-240 239Z"
+}));
+exports.CaretDown = CaretDown;
+CaretDown.propTypes = {
+  componentName: _propTypes.string,
+  additionalClassName: _propTypes.string,
+  dimensions: _propTypes.number,
+  viewBox: _propTypes.string,
+  fill: _propTypes.string
+};
+var _default = exports.default = CaretDown;

package/dist/icons/ChevronDown.js

@@ -5,24 +5,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ChevronDown = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ChevronDown = ({
-  className = '',
-  size = 24,
-  color = 'currentColor'
+  componentName = 'chevron-down',
+  additionalClassName = '',
+  dimensions = 24,
+  viewBox = '0 0 24 24',
+  fill = 'currentColor'
 }) => /*#__PURE__*/_react.default.createElement("svg", {
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
+  className: `icon ${componentName} ${additionalClassName}`,
+  width: dimensions,
+  height: dimensions,
+  viewBox: viewBox,
   fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  className: className
+  xmlns: "http://www.w3.org/2000/svg"
 }, /*#__PURE__*/_react.default.createElement("path", {
   d: "M6 9L12 15L18 9",
-  stroke: color,
+  stroke: fill,
   strokeWidth: "2",
   strokeLinecap: "round",
   strokeLinejoin: "round"
 }));
 exports.ChevronDown = ChevronDown;
+ChevronDown.propTypes = {
+  componentName: _propTypes.string,
+  additionalClassName: _propTypes.string,
+  dimensions: _propTypes.number,
+  viewBox: _propTypes.string,
+  fill: _propTypes.string
+};
 var _default = exports.default = ChevronDown;