@stokr/components-library 2.3.65-beta.2 → 2.3.65-beta.4

package/dist/components/2FA/main-flow.js

@@ -10,7 +10,6 @@ var _AuthContext = require("../../context/AuthContext");
 var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
 var _Switch = _interopRequireDefault(require("../Switch/Switch"));
 var _Text = _interopRequireDefault(require("../Text/Text.styles"));
-var _Button = _interopRequireDefault(require("../Button/Button.styles"));
 var _loginWithOtpFlow = _interopRequireDefault(require("./login-with-otp-flow"));
 var _enable2faFlow = _interopRequireDefault(require("./enable-2fa-flow"));
 var _disable2faFlow = _interopRequireDefault(require("./disable-2fa-flow"));
@@ -18,7 +17,7 @@ var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _InfoIcon = _interopRequireDefault(require("../InfoIcon/InfoIcon"));
 var _Modal = require("../Modal/Modal");
 var _Sucess2FA = _interopRequireDefault(require("./Sucess2FA"));
-const _excluded = ["onRequiresRecentLoginError", "open2faflow", "onLoginAgainClick", "openDisable2faflow"];
+const _excluded = ["onRequiresRecentLoginError", "open2faflow", "onLoginAgainClick", "openDisable2faflow", "title", "subtitle", "showSwitch", "customComponent"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 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; }
@@ -33,7 +32,11 @@ const Main2FAFlow = _ref => {
       onRequiresRecentLoginError,
       open2faflow,
       onLoginAgainClick,
-      openDisable2faflow
+      openDisable2faflow,
+      title = 'SET UP YOUR LOG IN TWO FACTOR AUTHENTICATION',
+      subtitle = 'Protect your account with an additional layer of security to log in',
+      showSwitch = true,
+      customComponent
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -58,6 +61,7 @@ const Main2FAFlow = _ref => {
       checkMfaEnrollment();
       generateTotp();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user, userMfaEnrollment]);
 
   //remove succes message after 5 seconds
@@ -70,7 +74,7 @@ const Main2FAFlow = _ref => {
   }, [successMessage]);
   const generateTotp = async () => {
     try {
-      const response = await generateTotpSecret(user);
+      const response = await generateTotpSecret();
       settotpData(response);
     } catch (error) {
       if (error.code === 'auth/requires-recent-login' || error.code === 'auth/unsupported-first-factor') {
@@ -79,7 +83,7 @@ const Main2FAFlow = _ref => {
     }
   };
   const switchOpenFlow = (prevFlowId, nextFlowId) => {
-    setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, {
+    setIsFlowOpen(prev => _objectSpread(_objectSpread({}, prev), {}, {
       [prevFlowId]: false,
       [nextFlowId]: true
     }));
@@ -102,10 +106,25 @@ const Main2FAFlow = _ref => {
     });
     onRequiresRecentLoginError && onRequiresRecentLoginError();
   };
+
+  // Expose flow control functions for customComponent
+  const flowActions = {
+    openEnable2FA: () => switchOpenFlow('disable2fa', 'enable2fa'),
+    openDisable2FA: () => switchOpenFlow('enable2fa', 'disable2fa'),
+    closeFlows: () => {
+      setIsFlowOpen({
+        enable2fa: false,
+        disable2fa: false,
+        requiresRecentLogin: false
+      });
+    },
+    is2FAEnabled,
+    isFlowOpen: isFlowopen
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     alignVertically: true,
     noPaddingHorizontal: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h5", null, "SET UP YOUR LOG IN TWO FACTOR AUTHENTICATION"))), /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Protect your account with an additional layer of security to log in")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h5", null, title))), /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, subtitle)), showSwitch && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     noPaddingHorizontal: true
   }, /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
     position: 'top',
@@ -146,7 +165,9 @@ const Main2FAFlow = _ref => {
       bottom: 0,
       left: 0
     }
-  }, /*#__PURE__*/_react.default.createElement("p", null, successMessage))), isFlowopen.enable2fa && /*#__PURE__*/_react.default.createElement(_enable2faFlow.default, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, successMessage))), customComponent && (typeof customComponent === 'function' ? customComponent(flowActions) : /*#__PURE__*/_react.default.isValidElement(customComponent) ? /*#__PURE__*/_react.default.cloneElement(customComponent, {
+    flowActions
+  }) : customComponent), isFlowopen.enable2fa && /*#__PURE__*/_react.default.createElement(_enable2faFlow.default, {
     showFlow: isFlowopen.enable2fa,
     setShowFlow: value => setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, {
       enable2fa: value

package/dist/components/2FA/main-flow.stories.js

@@ -3,31 +3,160 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.MainFlow = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.default = exports.WithoutSwitch = exports.WithCustomComponentFunction = exports.WithCustomComponent = exports.PreOpenedEnableFlow = exports.PreOpenedDisableFlow = exports.Default = exports.CustomTitles = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _global = _interopRequireDefault(require("../../styles/global"));
 var _mainFlow = _interopRequireDefault(require("./main-flow"));
 var _AuthContext = require("../../context/AuthContext");
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
 var _default = exports.default = {
-  title: 'Components Library/2FA',
+  title: 'Components Library/2FA/Main2FAFlow',
   component: _mainFlow.default,
   argTypes: {
-    showFlow: {
-      type: 'boolean',
+    title: {
+      control: 'text',
+      description: 'Title text for the 2FA section'
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtitle text for the 2FA section'
+    },
+    showSwitch: {
+      control: 'boolean',
+      description: 'Show/hide the toggle switch',
       defaultValue: true
     },
-    setShowFlow: {},
-    setShowPending: {},
-    withSuccessPage: {
-      type: 'boolean',
-      defaultValue: false
+    open2faflow: {
+      control: 'boolean',
+      description: 'Open enable 2FA flow on mount'
+    },
+    openDisable2faflow: {
+      control: 'boolean',
+      description: 'Open disable 2FA flow on mount'
+    },
+    onRequiresRecentLoginError: {
+      action: 'requiresRecentLogin',
+      description: 'Callback when recent login is required'
+    },
+    onLoginAgainClick: {
+      action: 'loginAgain',
+      description: 'Callback when user clicks login again'
+    }
+  },
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))))]
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_mainFlow.default, args));
+
+// Default example
+const Default = exports.Default = Template.bind({});
+Default.args = {};
+
+// With custom component as React element
+const WithCustomComponent = () => {
+  const CustomButtonGroup = _ref => {
+    var _flowActions$isFlowOp, _flowActions$isFlowOp2;
+    let {
+      flowActions
+    } = _ref;
+    if (!flowActions) return null;
+    return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, {
+      noPaddingHorizontal: true,
+      style: {
+        marginTop: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '12px',
+        flexWrap: 'wrap'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: flowActions.openEnable2FA,
+      disabled: flowActions.is2FAEnabled
+    }, "Enable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: flowActions.openDisable2FA,
+      disabled: !flowActions.is2FAEnabled,
+      secondary: true
+    }, "Disable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: flowActions.closeFlows,
+      outline: true
+    }, "Close All Flows")), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginTop: '12px',
+        fontSize: '12px',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react.default.createElement("p", null, "Status: ", flowActions.is2FAEnabled ? 'Enabled' : 'Disabled', /*#__PURE__*/_react.default.createElement("br", null), "Enable Flow Open: ", (_flowActions$isFlowOp = flowActions.isFlowOpen) !== null && _flowActions$isFlowOp !== void 0 && _flowActions$isFlowOp.enable2fa ? 'Yes' : 'No', /*#__PURE__*/_react.default.createElement("br", null), "Disable Flow Open:", ' ', (_flowActions$isFlowOp2 = flowActions.isFlowOpen) !== null && _flowActions$isFlowOp2 !== void 0 && _flowActions$isFlowOp2.disable2fa ? 'Yes' : 'No')));
+  };
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_mainFlow.default, {
+    customComponent: /*#__PURE__*/_react.default.createElement(CustomButtonGroup, null)
+  }));
+};
+
+// With custom component as render function
+exports.WithCustomComponent = WithCustomComponent;
+const WithCustomComponentFunction = () => {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_mainFlow.default, {
+    customComponent: flowActions => {
+      if (!flowActions) return null;
+      return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, {
+        noPaddingHorizontal: true,
+        style: {
+          marginTop: '16px'
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          gap: '12px',
+          flexWrap: 'wrap'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: flowActions.openEnable2FA,
+        disabled: flowActions.is2FAEnabled
+      }, "Enable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: flowActions.openDisable2FA,
+        disabled: !flowActions.is2FAEnabled,
+        secondary: true
+      }, "Disable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: flowActions.closeFlows,
+        outline: true
+      }, "Close All Flows")), /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          marginTop: '12px',
+          fontSize: '12px',
+          color: '#666'
+        }
+      }, /*#__PURE__*/_react.default.createElement("p", null, "Status: ", flowActions.is2FAEnabled ? 'Enabled' : 'Disabled')));
     }
-  }
+  }));
 };
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_mainFlow.default, args), /*#__PURE__*/_react.default.createElement("p", null, "some text"))));
-const MainFlow = exports.MainFlow = Template.bind({});
-MainFlow.args = {
-  //open2faflow: true,
+
+// Without switch
+exports.WithCustomComponentFunction = WithCustomComponentFunction;
+const WithoutSwitch = exports.WithoutSwitch = Template.bind({});
+WithoutSwitch.args = {
+  showSwitch: false
+};
+
+// Custom titles
+const CustomTitles = exports.CustomTitles = Template.bind({});
+CustomTitles.args = {
+  title: 'Two-Factor Authentication',
+  subtitle: 'Add an extra layer of security to your account'
+};
+
+// Pre-opened enable flow
+const PreOpenedEnableFlow = exports.PreOpenedEnableFlow = Template.bind({});
+PreOpenedEnableFlow.args = {
+  open2faflow: true
+};
+
+// Pre-opened disable flow
+const PreOpenedDisableFlow = exports.PreOpenedDisableFlow = Template.bind({});
+PreOpenedDisableFlow.args = {
+  openDisable2faflow: true
 };

package/dist/components/Input/SearchInput.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SearchInput = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SearchInput = require("./SearchInput.styles");
+var _searchIcon = require("../../static/images/search-icon.svg");
+const _excluded = ["value", "onChange", "placeholder", "icon", "showIcon", "disabled", "onFocus", "onBlur", "className", "containerStyle", "inputStyle", "iconStyle", "id", "name", "aria-label", "aria-describedby"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 _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], -1 === t.indexOf(o) && {}.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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const SearchInput = _ref => {
+  let {
+      value = '',
+      onChange,
+      placeholder = 'Search',
+      icon,
+      showIcon = true,
+      disabled = false,
+      onFocus,
+      onBlur,
+      className,
+      containerStyle,
+      inputStyle,
+      iconStyle,
+      id,
+      name,
+      'aria-label': ariaLabel,
+      'aria-describedby': ariaDescribedBy
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const handleChange = e => {
+    if (onChange) {
+      onChange(e.target.value, e);
+    }
+  };
+  const handleFocus = e => {
+    if (onFocus) {
+      onFocus(e);
+    }
+  };
+  const handleBlur = e => {
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+  const inputId = id || "search-input-".concat(Math.random().toString(36).substr(2, 9));
+  const inputName = name || inputId;
+  return /*#__PURE__*/_react.default.createElement(_SearchInput.SearchInputContainer, {
+    className: className,
+    style: containerStyle
+  }, /*#__PURE__*/_react.default.createElement(_SearchInput.SearchInputWrapper, {
+    disabled: disabled
+  }, showIcon && /*#__PURE__*/_react.default.createElement(_SearchInput.SearchIconWrapper, {
+    style: iconStyle
+  }, icon || /*#__PURE__*/_react.default.createElement(_searchIcon.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_SearchInput.SearchInputField, _extends({
+    id: inputId,
+    name: inputName,
+    type: "search",
+    value: value,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    placeholder: placeholder,
+    disabled: disabled,
+    "aria-label": ariaLabel || placeholder,
+    "aria-describedby": ariaDescribedBy,
+    style: inputStyle
+  }, props))));
+};
+exports.SearchInput = SearchInput;
+var _default = exports.default = SearchInput;

package/dist/components/Input/SearchInput.stories.js

@@ -0,0 +1,304 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutIcon = exports.WithInitialValue = exports.WithCustomIcon = exports.LongText = exports.Disabled = exports.DifferentWidths = exports.Default = exports.CustomStyling = exports.CustomPlaceholder = exports.AllStates = exports.AccessibilityExample = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SearchInput = _interopRequireDefault(require("./SearchInput"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+var _default = exports.default = {
+  title: 'Components Library/Inputs/SearchInput',
+  component: _SearchInput.default,
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'The search input value (controlled)'
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback fired when the value changes'
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+      defaultValue: 'Search'
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'Show/hide the search icon',
+      defaultValue: true
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the input',
+      defaultValue: false
+    },
+    icon: {
+      control: false,
+      description: 'Custom icon component (React node)'
+    },
+    onFocus: {
+      action: 'focused',
+      description: 'Callback fired when input receives focus'
+    },
+    onBlur: {
+      action: 'blurred',
+      description: 'Callback fired when input loses focus'
+    }
+  }
+}; // Controlled component wrapper for stories
+const ControlledSearchInput = args => {
+  const [value, setValue] = (0, _react.useState)(args.value || '');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, _extends({}, args, {
+    value: value,
+    onChange: (newValue, e) => {
+      var _args$onChange;
+      setValue(newValue);
+      (_args$onChange = args.onChange) === null || _args$onChange === void 0 || _args$onChange.call(args, newValue, e);
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: _colors.default.grey2
+    }
+  }, "Current value: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(empty)')));
+};
+
+// Default example
+const Default = exports.Default = ControlledSearchInput.bind({});
+Default.args = {
+  placeholder: 'Search'
+};
+
+// Without icon
+const WithoutIcon = exports.WithoutIcon = ControlledSearchInput.bind({});
+WithoutIcon.args = {
+  placeholder: 'Search',
+  showIcon: false
+};
+
+// With custom placeholder
+const CustomPlaceholder = exports.CustomPlaceholder = ControlledSearchInput.bind({});
+CustomPlaceholder.args = {
+  placeholder: 'Search users, projects, or tags...'
+};
+
+// Disabled state
+const Disabled = exports.Disabled = ControlledSearchInput.bind({});
+Disabled.args = {
+  placeholder: 'Search',
+  value: 'Sample search text',
+  disabled: true
+};
+
+// With initial value
+const WithInitialValue = exports.WithInitialValue = ControlledSearchInput.bind({});
+WithInitialValue.args = {
+  placeholder: 'Search',
+  value: 'Initial search term'
+};
+
+// Custom icon example
+const WithCustomIcon = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  const CustomIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "9",
+    cy: "9",
+    r: "6",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M15 15L12 12",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }));
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value,
+    onChange: setValue,
+    placeholder: "Search with custom icon",
+    icon: /*#__PURE__*/_react.default.createElement(CustomIcon, null)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: _colors.default.grey2
+    }
+  }, "Current value: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(empty)')));
+};
+
+// Different widths
+exports.WithCustomIcon = WithCustomIcon;
+const DifferentWidths = () => {
+  const [value1, setValue1] = (0, _react.useState)('');
+  const [value2, setValue2] = (0, _react.useState)('');
+  const [value3, setValue3] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Full width"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value1,
+    onChange: setValue1,
+    placeholder: "Search (full width)"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px',
+      maxWidth: '400px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Max width 400px"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value2,
+    onChange: setValue2,
+    placeholder: "Search (400px max)"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px',
+      maxWidth: '200px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Max width 200px"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value3,
+    onChange: setValue3,
+    placeholder: "Search (200px max)"
+  })));
+};
+
+// Long text example
+exports.DifferentWidths = DifferentWidths;
+const LongText = exports.LongText = ControlledSearchInput.bind({});
+LongText.args = {
+  placeholder: 'Search',
+  value: 'This is a very long search query that might overflow the input field'
+};
+
+// All states
+const AllStates = () => {
+  const [value1, setValue1] = (0, _react.useState)('');
+  const [value2, setValue2] = (0, _react.useState)('');
+  const [value3, setValue3] = (0, _react.useState)('Sample text');
+  const [value4, setValue4] = (0, _react.useState)('Disabled with text');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Empty (default)"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value1,
+    onChange: setValue1,
+    placeholder: "Search"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Without icon"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value2,
+    onChange: setValue2,
+    placeholder: "Search",
+    showIcon: false
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "With value"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value3,
+    onChange: setValue3,
+    placeholder: "Search"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Disabled"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value4,
+    onChange: setValue4,
+    placeholder: "Search",
+    disabled: true
+  })));
+};
+
+// Accessibility example
+exports.AllStates = AllStates;
+const AccessibilityExample = exports.AccessibilityExample = ControlledSearchInput.bind({});
+AccessibilityExample.args = {
+  placeholder: 'Search',
+  'aria-label': 'Search for products',
+  'aria-describedby': 'search-help-text'
+};
+AccessibilityExample.decorators = [Story => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(Story, null), /*#__PURE__*/_react.default.createElement("div", {
+  id: "search-help-text",
+  style: {
+    marginTop: '8px',
+    fontSize: '12px',
+    color: _colors.default.grey2
+  }
+}, "Use this search to find products by name, category, or description."))];
+
+// Custom styling
+const CustomStyling = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value,
+    onChange: setValue,
+    placeholder: "Search with custom styling",
+    containerStyle: {
+      maxWidth: '500px',
+      margin: '0 auto'
+    },
+    inputStyle: {
+      fontSize: '16px'
+    },
+    iconStyle: {
+      color: _colors.default.blue
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: _colors.default.grey2
+    }
+  }, "Current value: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(empty)')));
+};
+exports.CustomStyling = CustomStyling;

package/dist/components/Input/SearchInput.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchInputWrapper = exports.SearchInputField = exports.SearchInputContainer = exports.SearchIconWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SearchInputContainer = exports.SearchInputContainer = _styledComponents.default.div.withConfig({
+  displayName: "SearchInputstyles__SearchInputContainer",
+  componentId: "sc-dcxztv-0"
+})(["width:100%;display:flex;"]);
+const SearchInputWrapper = exports.SearchInputWrapper = _styledComponents.default.div.withConfig({
+  displayName: "SearchInputstyles__SearchInputWrapper",
+  componentId: "sc-dcxztv-1"
+})(["position:relative;display:flex;align-items:center;width:100%;background-color:", ";border-radius:8px;padding:0 16px;min-height:40px;transition:background-color 0.2s ease;", " &:focus-within{background-color:", ";box-shadow:0 0 0 2px ", ";}"], _colors.default.grey3, props => props.disabled && "\n    opacity: 0.6;\n    cursor: not-allowed;\n  ", _colors.default.white, _colors.default.lightGrey);
+const SearchIconWrapper = exports.SearchIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "SearchInputstyles__SearchIconWrapper",
+  componentId: "sc-dcxztv-2"
+})(["display:flex;align-items:center;justify-content:center;margin-right:12px;color:", ";flex-shrink:0;width:16px;height:16px;svg{width:100%;height:100%;}", ":focus-within &{color:", ";}"], _colors.default.grey2, SearchInputWrapper, _colors.default.black);
+const SearchInputField = exports.SearchInputField = _styledComponents.default.input.withConfig({
+  displayName: "SearchInputstyles__SearchInputField",
+  componentId: "sc-dcxztv-3"
+})(["flex:1;border:none;outline:none;background:transparent;font-size:14px;font-weight:400;line-height:18px;color:", ";width:100%;min-width:0;letter-spacing:0.6px;&::placeholder{color:", ";opacity:1;}&:disabled{cursor:not-allowed;opacity:0.6;}&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none;}"], _colors.default.black, _colors.default.grey2);