willba-component-library 0.0.27 → 0.0.31

package/lib/index.umd.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
 	typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
-	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MyComponentLibrary = {}, global.React));
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.WillbaComponentLibrary = {}, global.React));
 })(this, (function (exports, React) { 'use strict';
 
 	function getDefaultExportFromCjs (x) {
@@ -97,8 +97,8 @@
 	  }
 	}
 
-	var css_248z = ".storybook-button {\n  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  font-weight: 700;\n  border: 0;\n  border-radius: 3em;\n  cursor: pointer;\n  display: inline-block;\n  line-height: 1;\n}\n.storybook-button--primary {\n  color: white;\n  background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n  color: #333;\n  background-color: transparent;\n  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n  font-size: 12px;\n  padding: 10px 16px;\n}\n.storybook-button--medium {\n  font-size: 14px;\n  padding: 11px 20px;\n}\n.storybook-button--large {\n  font-size: 16px;\n  padding: 12px 24px;\n}";
-	styleInject(css_248z);
+	var css_248z$1 = ".storybook-button {\r\n  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n  font-weight: 700;\r\n  border: 0;\r\n  border-radius: 3em;\r\n  cursor: pointer;\r\n  display: inline-block;\r\n  line-height: 1;\r\n}\r\n.storybook-button--primary {\r\n  color: white;\r\n  background-color: #1ea7fd;\r\n}\r\n.storybook-button--secondary {\r\n  color: #333;\r\n  background-color: transparent;\r\n  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\r\n}\r\n.storybook-button--small {\r\n  font-size: 12px;\r\n  padding: 10px 16px;\r\n}\r\n.storybook-button--medium {\r\n  font-size: 14px;\r\n  padding: 11px 20px;\r\n}\r\n.storybook-button--large {\r\n  font-size: 16px;\r\n  padding: 12px 24px;\r\n}";
+	styleInject(css_248z$1);
 
 	/**
 	 * Primary UI component for user interaction
@@ -109,7 +109,115 @@
 	    return (React.createElement("button", { type: "button", className: classNames("storybook-button", "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
 	};
 
+	function Divider() {
+	    return React.createElement("div", { className: "search-widget-divider" });
+	}
+
+	function SelectButton(_a) {
+	    var label = _a.label, onClick = _a.onClick;
+	    return (React.createElement("button", { className: "search-widget-select-button", onClick: onClick }, label));
+	}
+
+	function SubmitButton(_a) {
+	    var onClick = _a.onClick;
+	    return (React.createElement("button", { className: "search-widget-submit-button", onClick: onClick }, "Apply filters"));
+	}
+
+	var css_248z = "/* Structure ---------------------------- */\r\n\r\n.root {\r\n  width: 100%;\r\n}\r\n\r\n.search-widget {\r\n  box-sizing: border-box;\r\n  max-width: 1100px;\r\n  position: relative;\r\n}\r\n\r\n.search-widget-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: 10px 20px;\r\n  position: relative;\r\n  z-index: 222;\r\n  \r\n  border-radius: 40px;\r\n  background-color: #fff;\r\n  box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n}\r\n\r\n.search-widget-container {\r\n  background-color: #fff;\r\n  min-height: 100px;\r\n \r\n  padding: 90px 40px 30px 40px;\r\n  position: absolute;\r\n  top: 0;\r\n  z-index: 111;\r\n  border-radius: 40px;\r\n  width: -webkit-fill-available;\r\n  box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n}\r\n\r\n.search-widget-divider {\r\n  width: 1px;\r\n  margin: 0 10px;\r\n  height: 35px;\r\n  background-color: #384265;\r\n}\r\n\r\n.search-widget-submit-button {\r\n  width: auto;\r\n  height: auto;\r\n  background-color: #384265;\r\n  color: #fff;\r\n  padding: 10px 20px;\r\n  border-radius: 20px;\r\n  cursor: pointer;\r\n  border: none;\r\n}\r\n\r\n.search-widget-select-button {\r\n  width: auto;\r\n  height: auto;\r\n  background-color: transparent;\r\n  border: none;\r\n  padding: 10px 20px;\r\n  border-radius: 20px;\r\n  cursor: pointer;\r\n}\r\n\r\n/* Filters - Guests ---------------------------- */\r\n\r\n.search-widget-guests {\r\n  text-align: initial;\r\n}\r\n\r\n.guests-filter-container {\r\n  display: flex;\r\n  margin-top: 30px;\r\n}\r\n\r\n.guests-filter-inner {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.guests-filter-inner:not(:last-child) {\r\n  margin-right: 50px;\r\n}\r\n\r\n.guests-filter-inner > span {\r\n  display: block;\r\n  margin-right: 20px;\r\n  font-weight: bold;\r\n}\r\n\r\n.guests-filter-inner > div {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.guests-filter-inner > div > span {\r\n  margin: 0 10px;\r\n}\r\n\r\n.guests-filter-inner > div button {\r\n  border-radius: 50%;\r\n  border: none;\r\n  background-color: #CDEEFF;\r\n  width: 25px;\r\n  height: 25px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  font-size: 20px;\r\n}\r\n\r\n/* Filters - Categories ---------------------------- */\r\n\r\n.search-widget-categories {\r\n  text-align: center;\r\n}\r\n\r\n.categories-filter-inner {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 20px;\r\n}\r\n\r\n.categories-filter-inner input {\r\n  cursor: pointer;\r\n  margin-right: 10px;\r\n}\r\n\r\n";
+	styleInject(css_248z);
+
+	function FilterBar() {
+	    var _a = React.useState(false), selectedFilter = _a[0], setSelectedFilter = _a[1];
+	    // const [startDate, setStartDate] = useState(0);
+	    // const [endDate, setEndDate] = useState(0);
+	    var _b = React.useState(1), guestsAdults = _b[0], setGuestsAdults = _b[1];
+	    var _c = React.useState(0), guestsKids = _c[0], setGuestsKids = _c[1];
+	    var _d = React.useState(0), categories = _d[0], setCategories = _d[1];
+	    var handleSelectedFilter = function (id) {
+	        setSelectedFilter(id);
+	    };
+	    var handleSubmit = function () {
+	        var queryParams = new URLSearchParams();
+	        var params = {
+	            // startDate,
+	            // endDate,
+	            guestsAdults: guestsAdults,
+	            guestsKids: guestsKids,
+	            categories: categories,
+	        };
+	        for (var _i = 0, _a = Object.entries(params); _i < _a.length; _i++) {
+	            var _b = _a[_i], key = _b[0], value = _b[1];
+	            if (value) {
+	                queryParams.append(key, value.toString());
+	            }
+	        }
+	        var url = "http://localhost:4000/en/events/?".concat(queryParams.toString());
+	        window.location.href = url;
+	        handleSelectedFilter(false);
+	    };
+	    return (React.createElement("div", { className: "search-widget" },
+	        React.createElement("div", { className: "search-widget-header" },
+	            React.createElement(SelectButton, { label: "Start date", onClick: function () { return handleSelectedFilter(1); } }),
+	            React.createElement(Divider, null),
+	            React.createElement(SelectButton, { label: "End date", onClick: function () { return handleSelectedFilter(2); } }),
+	            React.createElement(Divider, null),
+	            React.createElement(SelectButton, { label: "Guests", onClick: function () { return handleSelectedFilter(3); } }),
+	            React.createElement(Divider, null),
+	            React.createElement(SelectButton, { label: "Categories", onClick: function () { return handleSelectedFilter(4); } }),
+	            React.createElement(SubmitButton, { onClick: handleSubmit })),
+	        selectedFilter && (React.createElement("div", { className: "search-widget-container" },
+	            selectedFilter === 1 && React.createElement(StartDate, null),
+	            selectedFilter === 2 && React.createElement(EndDate, null),
+	            selectedFilter === 3 && (React.createElement(Guests, { guestsAdults: guestsAdults, guestsKids: guestsKids, decrementAdults: function () { return setGuestsAdults(guestsAdults - 1); }, incrementAdults: function () { return setGuestsAdults(guestsAdults + 1); }, decrementKids: function () { return setGuestsKids(guestsKids - 1); }, incrementKids: function () { return setGuestsKids(guestsKids + 1); } })),
+	            selectedFilter === 4 && (React.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
+	}
+	var StartDate = function () {
+	    return React.createElement("div", null, "Start date");
+	};
+	var EndDate = function () {
+	    return React.createElement("div", null, "End date");
+	};
+	var Guests = function (_a) {
+	    var guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, decrementAdults = _a.decrementAdults, incrementAdults = _a.incrementAdults, decrementKids = _a.decrementKids, incrementKids = _a.incrementKids;
+	    return (React.createElement("div", { className: "search-widget-guests" },
+	        React.createElement("h3", null, "Guests"),
+	        React.createElement("p", null, "Who's coming?"),
+	        React.createElement("div", { className: "guests-filter-container" },
+	            React.createElement("div", { className: "guests-filter-inner" },
+	                React.createElement("span", null, "Adults"),
+	                React.createElement("div", null,
+	                    React.createElement("button", { onClick: decrementAdults, disabled: guestsAdults < 1 }, "-"),
+	                    React.createElement("span", null, guestsAdults),
+	                    React.createElement("button", { onClick: incrementAdults }, "+"))),
+	            React.createElement("div", { className: "guests-filter-inner" },
+	                React.createElement("span", null, "Kids"),
+	                React.createElement("div", null,
+	                    React.createElement("button", { onClick: decrementKids, disabled: guestsKids < 1 }, "-"),
+	                    React.createElement("span", null, guestsKids),
+	                    React.createElement("button", { onClick: incrementKids }, "+"))))));
+	};
+	var Categories = function (_a) {
+	    _a.categories; var setCategories = _a.setCategories;
+	    var categoriesPlaceholder = [
+	        "Weekend",
+	        "Week",
+	        "Summer camp",
+	        "Winter camp",
+	    ];
+	    var _b = React.useState(""), selectedCategory = _b[0], setSelectedCategory = _b[1];
+	    var handleCategoryChange = function (selectedCategory) {
+	        setSelectedCategory(selectedCategory);
+	        setCategories(selectedCategory); // Update the parent component's state with the selected category
+	    };
+	    return (React.createElement("div", { className: "search-widget-categories" },
+	        React.createElement("h3", null, "CATEGORY"),
+	        React.createElement("div", { className: "categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React.createElement("div", { key: idx },
+	            React.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
+	            React.createElement("span", null, itm))); }))));
+	};
+
 	exports.Button = Button;
+	exports.FilterBar = FilterBar;
 
 }));
 //# sourceMappingURL=index.umd.js.map

package/lib/index.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","sources":["../node_modules/classnames/index.js","../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React, { useState } from \"react\";\nimport classNames from \"classnames\";\nimport \"./button.css\";\n\nexport interface ButtonProps {\n  /**\n   * Is this the principal call to action on the page?\n   */\n  type?: \"primary\" | \"secondary\";\n  /**\n   * What background color to use\n   */\n  textColor?: string;\n  /**\n   * How large should the button be?\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Button contents\n   */\n  label: string;\n  /**\n   * Optional click handler\n   */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n}\n\n/**\n * Primary UI component for user interaction\n */\nconst Button = ({\n  type = \"primary\",\n  textColor,\n  size = \"medium\",\n  onClick,\n  label,\n}: ButtonProps) => {\n  const [theState, setTheState] = useState(4);\n\n  return (\n    <button\n      type=\"button\"\n      className={classNames(\n        \"storybook-button\",\n        `storybook-button--${size}`,\n        `storybook-button--${type}`\n      )}\n      style={textColor ? { color: textColor } : {}}\n      onClick={onClick}\n    >\n      {`${label} ${theState}`}\n    </button>\n  );\n};\n\nexport default Button;\n"],"names":["useState"],"mappings":"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","x_google_ignoreList":[0,1]}
+{"version":3,"file":"index.umd.js","sources":["../node_modules/classnames/index.js","../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/FilterBar/components/Divider.tsx","../src/components/FilterBar/components/SelectButton.tsx","../src/components/FilterBar/components/SubmitButton.tsx","../src/components/FilterBar/FilterBar.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React, { useState } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport \"./button.css\";\r\n\r\nexport interface ButtonProps {\r\n  /**\r\n   * Is this the principal call to action on the page?\r\n   */\r\n  type?: \"primary\" | \"secondary\";\r\n  /**\r\n   * What background color to use\r\n   */\r\n  textColor?: string;\r\n  /**\r\n   * How large should the button be?\r\n   */\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n  /**\r\n   * Button contents\r\n   */\r\n  label: string;\r\n  /**\r\n   * Optional click handler\r\n   */\r\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\r\n}\r\n\r\n/**\r\n * Primary UI component for user interaction\r\n */\r\nconst Button = ({\r\n  type = \"primary\",\r\n  textColor,\r\n  size = \"medium\",\r\n  onClick,\r\n  label,\r\n}: ButtonProps) => {\r\n  const [theState, setTheState] = useState(4);\r\n\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      className={classNames(\r\n        \"storybook-button\",\r\n        `storybook-button--${size}`,\r\n        `storybook-button--${type}`\r\n      )}\r\n      style={textColor ? { color: textColor } : {}}\r\n      onClick={onClick}\r\n    >\r\n      {`${label} ${theState}`}\r\n    </button>\r\n  );\r\n};\r\n\r\nexport default Button;\r\n","import React from \"react\";\n\nexport default function Divider() {\n  return <div className=\"search-widget-divider\" />;\n}\n","import React from \"react\";\n\nexport default function SelectButton({ label, onClick }: any) {\n  return (\n    <button className=\"search-widget-select-button\" onClick={onClick}>\n      {label}\n    </button>\n  );\n}\n","import React from \"react\";\n\nexport default function SubmitButton({ onClick }: any) {\n  return (\n    <button className=\"search-widget-submit-button\" onClick={onClick}>\n      Apply filters\n    </button>\n  );\n}\n","import React, { useState } from \"react\";\r\n\r\nimport Divider from \"./components/Divider\";\r\nimport SelectButton from \"./components/SelectButton\";\r\nimport SubmitButton from \"./components/SubmitButton\";\r\n\r\nimport \"./FilterBar.css\";\r\n\r\nexport default function FilterBar() {\r\n  const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false);\r\n  // const [startDate, setStartDate] = useState(0);\r\n  // const [endDate, setEndDate] = useState(0);\r\n  const [guestsAdults, setGuestsAdults] = useState(1);\r\n  const [guestsKids, setGuestsKids] = useState(0);\r\n  const [categories, setCategories] = useState(0);\r\n\r\n  const handleSelectedFilter = (id: any) => {\r\n    setSelectedFilter(id);\r\n  };\r\n\r\n  const handleSubmit = () => {\r\n    const queryParams = new URLSearchParams();\r\n\r\n    const params = {\r\n      // startDate,\r\n      // endDate,\r\n      guestsAdults,\r\n      guestsKids,\r\n      categories,\r\n    };\r\n\r\n    for (const [key, value] of Object.entries(params)) {\r\n      if (value) {\r\n        queryParams.append(key, value.toString());\r\n      }\r\n    }\r\n\r\n    const url = `http://localhost:4000/en/events/?${queryParams.toString()}`;\r\n    window.location.href = url;\r\n    handleSelectedFilter(false);\r\n  };\r\n\r\n  return (\r\n    <div className=\"search-widget\">\r\n      <div className=\"search-widget-header\">\r\n        <SelectButton\r\n          label=\"Start date\"\r\n          onClick={() => handleSelectedFilter(1)}\r\n        />\r\n        <Divider />\r\n        <SelectButton\r\n          label=\"End date\"\r\n          onClick={() => handleSelectedFilter(2)}\r\n        />\r\n        <Divider />\r\n        <SelectButton label=\"Guests\" onClick={() => handleSelectedFilter(3)} />\r\n        <Divider />\r\n        <SelectButton\r\n          label=\"Categories\"\r\n          onClick={() => handleSelectedFilter(4)}\r\n        />\r\n        <SubmitButton onClick={handleSubmit} />\r\n      </div>\r\n\r\n      {selectedFilter && (\r\n        <div className=\"search-widget-container\">\r\n          {selectedFilter === 1 && <StartDate />}\r\n          {selectedFilter === 2 && <EndDate />}\r\n          {selectedFilter === 3 && (\r\n            <Guests\r\n              guestsAdults={guestsAdults}\r\n              guestsKids={guestsKids}\r\n              decrementAdults={() => setGuestsAdults(guestsAdults - 1)}\r\n              incrementAdults={() => setGuestsAdults(guestsAdults + 1)}\r\n              decrementKids={() => setGuestsKids(guestsKids - 1)}\r\n              incrementKids={() => setGuestsKids(guestsKids + 1)}\r\n            />\r\n          )}\r\n          {selectedFilter === 4 && (\r\n            <Categories categories={categories} setCategories={setCategories} />\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nconst StartDate = () => {\r\n  return <div>Start date</div>;\r\n};\r\n\r\nconst EndDate = () => {\r\n  return <div>End date</div>;\r\n};\r\n\r\nconst Guests = ({\r\n  guestsAdults,\r\n  guestsKids,\r\n  decrementAdults,\r\n  incrementAdults,\r\n  decrementKids,\r\n  incrementKids,\r\n}: any) => {\r\n  return (\r\n    <div className=\"search-widget-guests\">\r\n      <h3>Guests</h3>\r\n      <p>Who's coming?</p>\r\n\r\n      <div className=\"guests-filter-container\">\r\n        <div className=\"guests-filter-inner\">\r\n          <span>Adults</span>\r\n          <div>\r\n            <button onClick={decrementAdults} disabled={guestsAdults < 1}>\r\n              -\r\n            </button>\r\n            <span>{guestsAdults}</span>\r\n            <button onClick={incrementAdults}>+</button>\r\n          </div>\r\n        </div>\r\n        <div className=\"guests-filter-inner\">\r\n          <span>Kids</span>\r\n          <div>\r\n            <button onClick={decrementKids} disabled={guestsKids < 1}>\r\n              -\r\n            </button>\r\n            <span>{guestsKids}</span>\r\n            <button onClick={incrementKids}>+</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nconst Categories = ({ categories, setCategories }: any) => {\r\n  const categoriesPlaceholder = [\r\n    \"Weekend\",\r\n    \"Week\",\r\n    \"Summer camp\",\r\n    \"Winter camp\",\r\n  ];\r\n\r\n  const [selectedCategory, setSelectedCategory] = useState(\"\");\r\n\r\n  const handleCategoryChange = (selectedCategory: any) => {\r\n    setSelectedCategory(selectedCategory);\r\n    setCategories(selectedCategory); // Update the parent component's state with the selected category\r\n  };\r\n\r\n  return (\r\n    <div className=\"search-widget-categories\">\r\n      <h3>CATEGORY</h3>\r\n      <div className=\"categories-filter-inner\">\r\n        {categoriesPlaceholder.map((itm, idx) => (\r\n          <div key={idx}>\r\n            <input\r\n              type=\"radio\"\r\n              value={itm}\r\n              checked={selectedCategory === itm}\r\n              onChange={() => handleCategoryChange(itm)}\r\n            />\r\n            <span>{itm}</span>\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["useState"],"mappings":";;;;;;;;;;;;;;;;;;;CAKA;AACA;CACA,CAAA,CAAC,YAAY;AAEb;CACA,EAAC,IAAI,MAAM,GAAG,EAAE,CAAC,cAAc,CAAC;AAEhC;GACC,SAAS,UAAU,GAAG;CACvB,GAAE,IAAI,OAAO,GAAG,EAAE,CAAC;AACnB;CACA,GAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;CAC7C,IAAG,IAAI,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;CAC1B,IAAG,IAAI,CAAC,GAAG,EAAE,SAAS;AACtB;CACA,IAAG,IAAI,OAAO,GAAG,OAAO,GAAG,CAAC;AAC5B;KACG,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,QAAQ,EAAE;CACrD,KAAI,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;MAClB,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;CAClC,KAAI,IAAI,GAAG,CAAC,MAAM,EAAE;OACf,IAAI,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;OACxC,IAAI,KAAK,EAAE;CAChB,OAAM,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpB;OACD;CACL,KAAI,MAAM,IAAI,OAAO,KAAK,QAAQ,EAAE;MAChC,IAAI,GAAG,CAAC,QAAQ,KAAK,MAAM,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;OACrG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;CAClC,MAAK,SAAS;OACT;AACL;CACA,KAAI,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;CACzB,MAAK,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE;CAC5C,OAAM,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAClB;OACD;MACD;KACD;AACH;CACA,GAAE,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzB;AACF;GACC,IAAqC,MAAM,CAAC,OAAO,EAAE;CACtD,GAAE,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC;IAChC,MAAA,CAAA,OAAA,GAAiB,UAAU,CAAC;CAC9B,GAAE,MAKM;CACR,GAAE,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B;CACF,EAAC,EAAE,EAAA;;;;;;CC3DH,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;CAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;CACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;CACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;CACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;CACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;CAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;CACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;CAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;CACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;CAChD,KAAK,MAAM;CACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;CAC9B,KAAK;CACL,GAAG,MAAM;CACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;CAC5B,GAAG;AACH;CACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;CACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;CACnC,GAAG,MAAM;CACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;CACpD,GAAG;CACH;;;;;CCEA;;CAEG;AACG,KAAA,MAAM,GAAG,UAAC,EAMF,EAAA;SALZ,EAAgB,GAAA,EAAA,CAAA,IAAA,EAAhB,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,KAAA,EAChB,SAAS,eAAA,EACT,EAAA,GAAA,EAAA,CAAA,IAAe,EAAf,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAQ,GAAA,EAAA,EACf,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,KAAK,GAAA,EAAA,CAAA,KAAA,CAAA;KAEC,IAAA,EAAA,GAA0BA,cAAQ,CAAC,CAAC,CAAC,CAApC,CAAA,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAa,EAAA,CAAA,CAAA,EAAgB;KAE5C,QACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CACnB,kBAAkB,EAClB,oBAAqB,CAAA,MAAA,CAAA,IAAI,CAAE,EAC3B,oBAAA,CAAA,MAAA,CAAqB,IAAI,CAAE,CAC5B,EACD,KAAK,EAAE,SAAS,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,EAC5C,OAAO,EAAE,OAAO,IAEf,EAAG,CAAA,MAAA,CAAA,KAAK,cAAI,QAAQ,CAAE,CAChB,EACT;CACJ;;CCnDc,SAAU,OAAO,GAAA;CAC7B,IAAA,OAAO,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,GAAG,CAAC;CACnD;;CCFwB,SAAA,YAAY,CAAC,EAAuB,EAAA;SAArB,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,CAAA;CACnD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAE,OAAO,EAAA,EAC7D,KAAK,CACC,EACT;CACJ;;CCNwB,SAAA,YAAY,CAAC,EAAgB,EAAA;CAAd,IAAA,IAAA,OAAO,GAAA,EAAA,CAAA,OAAA,CAAA;KAC5C,QACE,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAE,OAAO,EAEvD,EAAA,eAAA,CAAA,EACT;CACJ;;;;;CCAc,SAAU,SAAS,GAAA;KACzB,IAAA,EAAA,GAAsCA,cAAQ,CAAmB,KAAK,CAAC,EAAtE,cAAc,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAqC,CAAC;;;KAGxE,IAAA,EAAA,GAAkCA,cAAQ,CAAC,CAAC,CAAC,EAA5C,YAAY,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,eAAe,GAAA,EAAA,CAAA,CAAA,CAAe,CAAC;KAC9C,IAAA,EAAA,GAA8BA,cAAQ,CAAC,CAAC,CAAC,EAAxC,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAe,CAAC;KAC1C,IAAA,EAAA,GAA8BA,cAAQ,CAAC,CAAC,CAAC,EAAxC,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAe,CAAC;KAEhD,IAAM,oBAAoB,GAAG,UAAC,EAAO,EAAA;SACnC,iBAAiB,CAAC,EAAE,CAAC,CAAC;CACxB,KAAC,CAAC;CAEF,IAAA,IAAM,YAAY,GAAG,YAAA;CACnB,QAAA,IAAM,WAAW,GAAG,IAAI,eAAe,EAAE,CAAC;CAE1C,QAAA,IAAM,MAAM,GAAG;;;CAGb,YAAA,YAAY,EAAA,YAAA;CACZ,YAAA,UAAU,EAAA,UAAA;CACV,YAAA,UAAU,EAAA,UAAA;UACX,CAAC;CAEF,QAAA,KAA2B,IAAsB,EAAA,GAAA,CAAA,EAAtB,EAAA,GAAA,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAtB,EAAsB,GAAA,EAAA,CAAA,MAAA,EAAtB,IAAsB,EAAE;CAAxC,YAAA,IAAA,WAAY,EAAX,GAAG,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,CAAA;CACpB,YAAA,IAAI,KAAK,EAAE;iBACT,WAAW,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;CAC3C,aAAA;CACF,SAAA;SAED,IAAM,GAAG,GAAG,mCAAoC,CAAA,MAAA,CAAA,WAAW,CAAC,QAAQ,EAAE,CAAE,CAAC;CACzE,QAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC;SAC3B,oBAAoB,CAAC,KAAK,CAAC,CAAC;CAC9B,KAAC,CAAC;CAEF,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,EAAA;SAC5B,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA;CACnC,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,YAAM,EAAA,OAAA,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAA,EACtC,CAAA;CACF,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAG,IAAA,CAAA;CACX,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,YAAM,EAAA,OAAA,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAA,EACtC,CAAA;CACF,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAG,IAAA,CAAA;CACX,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAC,EAAA,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAM,EAAA,OAAA,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAA,EAAI,CAAA;CACvE,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAG,IAAA,CAAA;CACX,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,YAAM,EAAA,OAAA,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAA,EACtC,CAAA;CACF,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAC,EAAA,OAAO,EAAE,YAAY,GAAI,CACnC;CAEL,QAAA,cAAc,KACb,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,yBAAyB,EAAA;CACrC,YAAA,cAAc,KAAK,CAAC,IAAI,KAAA,CAAA,aAAA,CAAC,SAAS,EAAG,IAAA,CAAA;CACrC,YAAA,cAAc,KAAK,CAAC,IAAI,KAAA,CAAA,aAAA,CAAC,OAAO,EAAG,IAAA,CAAA;CACnC,YAAA,cAAc,KAAK,CAAC,KACnB,KAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,YAAM,EAAA,OAAA,eAAe,CAAC,YAAY,GAAG,CAAC,CAAC,CAAA,EAAA,EACxD,eAAe,EAAE,cAAM,OAAA,eAAe,CAAC,YAAY,GAAG,CAAC,CAAC,CAAA,EAAA,EACxD,aAAa,EAAE,YAAA,EAAM,OAAA,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAA7B,EAA6B,EAClD,aAAa,EAAE,YAAA,EAAM,OAAA,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAA7B,EAA6B,GAClD,CACH;aACA,cAAc,KAAK,CAAC,KACnB,oBAAC,UAAU,EAAA,EAAC,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAI,CAAA,CACrE,CACG,CACP,CACG,EACN;CACJ,CAAC;CAED,IAAM,SAAS,GAAG,YAAA;CAChB,IAAA,OAAO,8CAAqB,CAAC;CAC/B,CAAC,CAAC;CAEF,IAAM,OAAO,GAAG,YAAA;CACd,IAAA,OAAO,4CAAmB,CAAC;CAC7B,CAAC,CAAC;CAEF,IAAM,MAAM,GAAG,UAAC,EAOV,EAAA;CANJ,IAAA,IAAA,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,eAAe,qBAAA,EACf,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,aAAa,GAAA,EAAA,CAAA,aAAA,CAAA;CAEb,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA;SACnC,KAAe,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,QAAA,CAAA;SACf,KAAoB,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,eAAA,CAAA;SAEpB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,yBAAyB,EAAA;aACtC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qBAAqB,EAAA;iBAClC,KAAmB,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,QAAA,CAAA;CACnB,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;qBACE,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,GAAG,CAAC,EAEnD,EAAA,GAAA,CAAA;CACT,oBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,YAAY,CAAQ;CAC3B,oBAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,OAAO,EAAE,eAAe,EAAA,EAAA,GAAA,CAAY,CACxC,CACF;aACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qBAAqB,EAAA;iBAClC,KAAiB,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA;CACjB,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;qBACE,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,GAAG,CAAC,EAE/C,EAAA,GAAA,CAAA;CACT,oBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,UAAU,CAAQ;qBACzB,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,aAAa,EAAA,EAAA,GAAA,CAAY,CACtC,CACF,CACF,CACF,EACN;CACJ,CAAC,CAAC;CAEF,IAAM,UAAU,GAAG,UAAC,EAAkC,EAAA;KAAtB,EAAA,CAAA,UAAA,CAAE,KAAA,aAAa,GAAA,EAAA,CAAA,cAAA;CAC7C,IAAA,IAAM,qBAAqB,GAAG;SAC5B,SAAS;SACT,MAAM;SACN,aAAa;SACb,aAAa;MACd,CAAC;KAEI,IAAA,EAAA,GAA0CA,cAAQ,CAAC,EAAE,CAAC,EAArD,gBAAgB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,mBAAmB,GAAA,EAAA,CAAA,CAAA,CAAgB,CAAC;KAE7D,IAAM,oBAAoB,GAAG,UAAC,gBAAqB,EAAA;SACjD,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;CACtC,QAAA,aAAa,CAAC,gBAAgB,CAAC,CAAC;CAClC,KAAC,CAAC;CAEF,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA;SACvC,KAAiB,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,UAAA,CAAA;CACjB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,IACrC,qBAAqB,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,GAAG,EAAK,EAAA,QACvC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EAAA;aACX,KACE,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,gBAAgB,KAAK,GAAG,EACjC,QAAQ,EAAE,YAAA,EAAM,OAAA,oBAAoB,CAAC,GAAG,CAAC,CAAzB,EAAyB,EACzC,CAAA;aACF,KAAO,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,GAAG,CAAQ,CACd,EACP,EAAA,CAAC,CACE,CACF,EACN;CACJ,CAAC;;;;;;;;;","x_google_ignoreList":[0,1]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.0.27",
+  "version": "0.0.31",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
@@ -17,8 +17,8 @@
     "classnames": "^2.3.2"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.3",
@@ -34,8 +34,8 @@
     "@storybook/testing-library": "^0.2.0",
     "@types/react": "^18.2.19",
     "postcss": "^8.4.27",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "^3.28.0",
     "rollup-plugin-dts": "^5.3.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",

package/rollup.config.mjs

@@ -1,59 +1,59 @@
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "@rollup/plugin-typescript";
-import postcss from "rollup-plugin-postcss";
-import dts from "rollup-plugin-dts";
-
-// This is required to read package.json file when
-// using Native ES modules in Node.js
-// https://rollupjs.org/command-line-interface/#importing-package-json
-import { createRequire } from "node:module";
-const requireFile = createRequire(import.meta.url);
-const packageJson = requireFile("./package.json");
-
-const globals = {
-  react: "React",
-  "react-dom": "ReactDOM",
-  "react-query": "ReactQuery",
-};
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: packageJson.main,
-        format: "cjs",
-        sourcemap: true,
-      },
-      {
-        file: packageJson.module,
-        format: "esm",
-        sourcemap: true,
-      },
-      {
-        name: "MyComponentLibrary",
-        file: `lib/index.umd.js`,
-        format: "umd",
-        sourcemap: true,
-        globals,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript(),
-      postcss({
-        extensions: [".css"],
-      }),
-    ],
-  },
-  {
-    input: "lib/index.d.ts",
-    output: [{ file: "lib/index.d.ts", format: "es" }],
-    plugins: [dts()],
-    external: [/\.css$/],
-  },
-];
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import postcss from "rollup-plugin-postcss";
+import dts from "rollup-plugin-dts";
+
+// This is required to read package.json file when
+// using Native ES modules in Node.js
+// https://rollupjs.org/command-line-interface/#importing-package-json
+import { createRequire } from "node:module";
+const requireFile = createRequire(import.meta.url);
+const packageJson = requireFile("./package.json");
+
+const globals = {
+  react: "React",
+  "react-dom": "ReactDOM",
+  "react-query": "ReactQuery",
+};
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+      {
+        name: "WillbaComponentLibrary",
+        file: `lib/index.umd.js`,
+        format: "umd",
+        sourcemap: true,
+        globals,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript(),
+      postcss({
+        extensions: [".css"],
+      }),
+    ],
+  },
+  {
+    input: "lib/index.d.ts",
+    output: [{ file: "lib/index.d.ts", format: "es" }],
+    plugins: [dts()],
+    external: [/\.css$/],
+  },
+];

package/src/components/Button/Button.stories.tsx

@@ -1,34 +1,34 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import Button from "./Button";
-
-// Default metadata of the story https://storybook.js.org/docs/react/api/csf#default-export
-const meta: Meta<typeof Button> = {
-  title: "Components/Button",
-  component: Button,
-  argTypes: {
-    textColor: { control: "color" },
-    onClick: { action: "clicked" },
-  },
-};
-
-export default meta;
-
-// The story type for the component https://storybook.js.org/docs/react/api/csf#named-story-exports
-type Story = StoryObj<typeof Button>;
-
-export const Primary: Story = {
-  args: {
-    label: "Primary 😃",
-    size: "large",
-    type: "primary",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    ...Primary.args,
-    type: "secondary",
-    label: "Secondary 😇",
-  },
-};
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Button from "./Button";
+
+// Default metadata of the story https://storybook.js.org/docs/react/api/csf#default-export
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  argTypes: {
+    textColor: { control: "color" },
+    onClick: { action: "clicked" },
+  },
+};
+
+export default meta;
+
+// The story type for the component https://storybook.js.org/docs/react/api/csf#named-story-exports
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    label: "Primary 😃",
+    size: "large",
+    type: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    type: "secondary",
+    label: "Secondary 😇",
+  },
+};

package/src/components/Button/Button.tsx

@@ -1,56 +1,56 @@
-import React, { useState } from "react";
-import classNames from "classnames";
-import "./button.css";
-
-export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  type?: "primary" | "secondary";
-  /**
-   * What background color to use
-   */
-  textColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: "small" | "medium" | "large";
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-const Button = ({
-  type = "primary",
-  textColor,
-  size = "medium",
-  onClick,
-  label,
-}: ButtonProps) => {
-  const [theState, setTheState] = useState(4);
-
-  return (
-    <button
-      type="button"
-      className={classNames(
-        "storybook-button",
-        `storybook-button--${size}`,
-        `storybook-button--${type}`
-      )}
-      style={textColor ? { color: textColor } : {}}
-      onClick={onClick}
-    >
-      {`${label} ${theState}`}
-    </button>
-  );
-};
-
-export default Button;
+import React, { useState } from "react";
+import classNames from "classnames";
+import "./button.css";
+
+export interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  type?: "primary" | "secondary";
+  /**
+   * What background color to use
+   */
+  textColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: "small" | "medium" | "large";
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+const Button = ({
+  type = "primary",
+  textColor,
+  size = "medium",
+  onClick,
+  label,
+}: ButtonProps) => {
+  const [theState, setTheState] = useState(4);
+
+  return (
+    <button
+      type="button"
+      className={classNames(
+        "storybook-button",
+        `storybook-button--${size}`,
+        `storybook-button--${type}`
+      )}
+      style={textColor ? { color: textColor } : {}}
+      onClick={onClick}
+    >
+      {`${label} ${theState}`}
+    </button>
+  );
+};
+
+export default Button;

package/src/components/Button/button.css

@@ -1,30 +1,30 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
 }

package/src/components/Button/index.ts

@@ -1 +1 @@
-export { default } from "./Button";
+export { default } from "./Button";

package/src/components/FilterBar/FilterBar.css

@@ -19,12 +19,12 @@
   z-index: 222;
   
   border-radius: 40px;
-  background-color: #ecf1f4;
+  background-color: #fff;
   box-shadow: 0px 6px 11px 0px #a7a4a480;
 }
 
 .search-widget-container {
-  background-color: #ecf1f4;
+  background-color: #fff;
   min-height: 100px;
  
   padding: 90px 40px 30px 40px;