design-zystem 1.0.186 → 1.0.188

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.js +3 -3
  2. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -92,7 +92,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
92
92
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
93
93
 
94
94
  "use strict";
95
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Button: () => (/* binding */ Button),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _data_colors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../data/colors */ \"./src/data/colors.js\");\n/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon/Icon */ \"./src/Components/Icon/Icon.jsx\");\n/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Text/Text */ \"./src/Components/Text/Text.jsx\");\n/* harmony import */ var _Row_Row__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Row/Row */ \"./src/Components/Row/Row.jsx\");\nvar _excluded = [\"label\", \"children\", \"iconLeft\", \"iconRight\", \"iconColor\", \"variant\", \"outline\", \"size\", \"width\", \"isLoading\", \"fontWeight\", \"onClick\", \"disabled\"];\nvar _templateObject, _templateObject2;\nfunction _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); }\nfunction _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; }\nfunction _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; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\n\n\n\nvar defaultSizes = {\n xs: {\n height: 32,\n paddingX: 16,\n textSize: \"xs\"\n },\n s: {\n height: 36,\n paddingX: 16,\n textSize: \"s\"\n },\n m: {\n height: 40,\n paddingX: 20,\n textSize: \"s\"\n },\n l: {\n height: 44,\n paddingX: 24,\n textSize: \"m\"\n }\n};\nvar darken = function darken(hex) {\n var amt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.12;\n var n = hex.replace(\"#\", \"\");\n var v = n.length === 3 ? n.split(\"\").map(function (c) {\n return c + c;\n }).join(\"\") : n;\n var bi = parseInt(v, 16);\n var r = bi >> 16 & 255,\n g = bi >> 8 & 255,\n b = bi & 255;\n r = Math.max(0, Math.round(r * (1 - amt)));\n g = Math.max(0, Math.round(g * (1 - amt)));\n b = Math.max(0, Math.round(b * (1 - amt)));\n return \"#\".concat([r, g, b].map(function (x) {\n return x.toString(16).padStart(2, \"0\");\n }).join(\"\"));\n};\nvar getColor = function getColor(keyOrHex, fb) {\n return _data_colors__WEBPACK_IMPORTED_MODULE_1__.colors[keyOrHex] || keyOrHex || fb;\n};\nvar shouldForwardProp = function shouldForwardProp(p) {\n return ![\"variant\", \"outline\", \"size\", \"width\", \"isLoading\", \"sizeConfig\", \"iconOnly\"].includes(p);\n};\nvar StyledButton = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].button.withConfig({\n shouldForwardProp: shouldForwardProp\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n position: relative;\\n appearance: none;\\n border: 0;\\n -webkit-tap-highlight-color: transparent;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n cursor: \", \";\\n user-select: none;\\n white-space: nowrap;\\n overflow: hidden;\\n transition: background-color 150ms, color 150ms, border-color 150ms,\\n transform 150ms;\\n will-change: transform;\\n outline: none;\\n\\n height: \", \"px;\\n padding: 0 \", \"px;\\n border-radius: 6px;\\n font-weight: 700;\\n\\n font-family: \\\"Open Sans\\\", sans-serif;\\n\\n width: \", \";\\n\\n \", \"\\n\\n &:focus-visible {\\n outline: 2px solid \", \";\\n outline-offset: 2px;\\n }\\n\\n &::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n background: var(--hover-overlay, transparent);\\n opacity: 0;\\n transform: scale(0.98);\\n transition: opacity 150ms ease, transform 150ms ease;\\n pointer-events: none;\\n }\\n\\n &:hover:not(:disabled) {\\n transform: scale(1.02);\\n }\\n &:hover:not(:disabled)::before {\\n opacity: 1;\\n transform: scale(1);\\n }\\n\\n \", \"\\n\"])), function (p) {\n return p.disabled || p.isLoading ? \"not-allowed\" : \"pointer\";\n}, function (p) {\n return p.sizeConfig.height;\n}, function (p) {\n return p.sizeConfig.paddingX;\n}, function (props) {\n return props.width || \"fit-content\";\n}, function (p) {\n var base = getColor(p.variant, _data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.blue_700);\n var hover = darken(base, 0.12);\n var pressed = darken(base, 0.22);\n if (p.outline) {\n return \"\\n background-color: \".concat(_data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.transparent, \";\\n color: \").concat(base, \";\\n border: 1px solid \").concat(base, \";\\n --hover-overlay: rgba(0,0,0,.06);\\n &:hover:not(:disabled){ color:\").concat(hover, \"; border-color:\").concat(hover, \"; }\\n &:active:not(:disabled){ color:\").concat(pressed, \"; border-color:\").concat(pressed, \"; transform: scale(0.98); }\\n &:disabled{ opacity:.6; cursor:not-allowed; }\\n \");\n }\n return \"\\n background-color: \".concat(base, \";\\n color: \").concat(_data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.white, \";\\n border: 1px solid transparent;\\n --hover-overlay: rgba(255,255,255,.12);\\n &:hover:not(:disabled){ background-color:\").concat(hover, \"; }\\n &:active:not(:disabled){ background-color:\").concat(pressed, \"; transform: scale(0.98); }\\n &:disabled{ background-color:\").concat(_data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.blue_200, \"; opacity:.6; cursor:not-allowed; }\\n \");\n}, _data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.pastel_blue, function (p) {\n return p.iconOnly && \"\\n width: 26px !important;\\n height: 26px !important;\\n padding: 0 !important;\\n border-radius: 6px;\\n \";\n});\nvar Loader = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n border: 3px solid transparent;\\n border-top: 3px solid currentColor;\\n border-radius: 50%;\\n width: 1.25em;\\n height: 1.25em;\\n animation: spin 0.6s linear infinite;\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n transform: translate(-50%, -50%);\\n @keyframes spin {\\n to {\\n transform: translate(-50%, -50%) rotate(360deg);\\n }\\n }\\n\"])));\nvar Button = function Button(_ref) {\n var label = _ref.label,\n children = _ref.children,\n iconLeft = _ref.iconLeft,\n iconRight = _ref.iconRight,\n iconColor = _ref.iconColor,\n _ref$variant = _ref.variant,\n variant = _ref$variant === void 0 ? \"blue_700\" : _ref$variant,\n _ref$outline = _ref.outline,\n outline = _ref$outline === void 0 ? false : _ref$outline,\n _ref$size = _ref.size,\n size = _ref$size === void 0 ? \"m\" : _ref$size,\n width = _ref.width,\n _ref$isLoading = _ref.isLoading,\n isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,\n fontWeight = _ref.fontWeight,\n onClick = _ref.onClick,\n disabled = _ref.disabled,\n rest = _objectWithoutProperties(_ref, _excluded);\n var ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var sizeConfig = defaultSizes[size];\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledButton, _extends({\n ref: ref,\n onClick: onClick,\n variant: variant,\n outline: outline,\n width: width,\n isLoading: isLoading,\n fontWeight: fontWeight,\n sizeConfig: sizeConfig,\n disabled: disabled || isLoading,\n \"aria-busy\": isLoading ? \"true\" : undefined,\n iconOnly: (iconLeft || iconRight) && !label\n }, rest), isLoading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Loader, null), !isLoading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Row_Row__WEBPACK_IMPORTED_MODULE_4__.Row, {\n gap: \"8\",\n fullwidth: true,\n justifyContent: \"center\",\n alignItems: \"center\"\n }, iconLeft && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, {\n name: iconLeft,\n size: size,\n family: \"regular\",\n color: outline ? variant : iconColor\n }), label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_3__.Text, {\n size: sizeConfig.textSize,\n variant: outline ? variant : \"white\",\n align: \"center\"\n }, label), iconRight && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, {\n name: iconRight,\n size: size,\n family: \"regular\",\n color: outline ? variant : iconColor\n }), !label && children));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Button);\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Button/Button.jsx?");
95
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Button: () => (/* binding */ Button),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _data_colors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../data/colors */ \"./src/data/colors.js\");\n/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon/Icon */ \"./src/Components/Icon/Icon.jsx\");\n/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Text/Text */ \"./src/Components/Text/Text.jsx\");\n/* harmony import */ var _Row_Row__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Row/Row */ \"./src/Components/Row/Row.jsx\");\nvar _excluded = [\"label\", \"children\", \"iconLeft\", \"iconRight\", \"iconColor\", \"variant\", \"outline\", \"size\", \"width\", \"isLoading\", \"fontWeight\", \"onClick\", \"disabled\"];\nvar _templateObject, _templateObject2;\nfunction _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); }\nfunction _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; }\nfunction _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; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\n\n\n\nvar defaultSizes = {\n xs: {\n height: 32,\n paddingX: 16,\n textSize: \"xs\"\n },\n s: {\n height: 36,\n paddingX: 16,\n textSize: \"s\"\n },\n m: {\n height: 40,\n paddingX: 20,\n textSize: \"s\"\n },\n l: {\n height: 44,\n paddingX: 24,\n textSize: \"m\"\n }\n};\nvar darken = function darken(hex) {\n var amt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.12;\n var n = hex.replace(\"#\", \"\");\n var v = n.length === 3 ? n.split(\"\").map(function (c) {\n return c + c;\n }).join(\"\") : n;\n var bi = parseInt(v, 16);\n var r = bi >> 16 & 255,\n g = bi >> 8 & 255,\n b = bi & 255;\n r = Math.max(0, Math.round(r * (1 - amt)));\n g = Math.max(0, Math.round(g * (1 - amt)));\n b = Math.max(0, Math.round(b * (1 - amt)));\n return \"#\".concat([r, g, b].map(function (x) {\n return x.toString(16).padStart(2, \"0\");\n }).join(\"\"));\n};\nvar getColor = function getColor(keyOrHex, fb) {\n return _data_colors__WEBPACK_IMPORTED_MODULE_1__.colors[keyOrHex] || keyOrHex || fb;\n};\nvar shouldForwardProp = function shouldForwardProp(p) {\n return ![\"variant\", \"outline\", \"size\", \"width\", \"isLoading\", \"sizeConfig\", \"iconOnly\"].includes(p);\n};\nvar StyledButton = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].button.withConfig({\n shouldForwardProp: shouldForwardProp\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n position: relative;\\n appearance: none;\\n border: 0;\\n -webkit-tap-highlight-color: transparent;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n cursor: \", \";\\n user-select: none;\\n white-space: nowrap;\\n overflow: hidden;\\n transition: background-color 150ms, color 150ms, border-color 150ms,\\n transform 150ms;\\n will-change: transform;\\n outline: none;\\n\\n height: \", \"px;\\n padding: 0 \", \"px;\\n border-radius: 6px;\\n font-weight: 700;\\n\\n font-family: \\\"Open Sans\\\", sans-serif;\\n\\n width: \", \";\\n\\n \", \"\\n\\n &:focus-visible {\\n outline: 2px solid \", \";\\n outline-offset: 2px;\\n }\\n\\n &::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n background: var(--hover-overlay, transparent);\\n opacity: 0;\\n transform: scale(0.98);\\n transition: opacity 150ms ease, transform 150ms ease;\\n pointer-events: none;\\n }\\n\\n &:hover:not(:disabled) {\\n transform: scale(1.02);\\n }\\n &:hover:not(:disabled)::before {\\n opacity: 1;\\n transform: scale(1);\\n }\\n\\n \", \"\\n\"])), function (p) {\n return p.disabled || p.isLoading ? \"not-allowed\" : \"pointer\";\n}, function (p) {\n return p.sizeConfig.height;\n}, function (p) {\n return p.sizeConfig.paddingX;\n}, function (props) {\n return props.width || \"fit-content\";\n}, function (p) {\n var base = getColor(p.variant, _data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.blue_700);\n var hover = darken(base, 0.12);\n var pressed = darken(base, 0.22);\n if (p.outline) {\n return \"\\n background-color: \".concat(_data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.transparent, \";\\n color: \").concat(base, \";\\n border: 1px solid \").concat(base, \";\\n --hover-overlay: rgba(0,0,0,.06);\\n &:hover:not(:disabled){ color:\").concat(hover, \"; border-color:\").concat(hover, \"; }\\n &:active:not(:disabled){ color:\").concat(pressed, \"; border-color:\").concat(pressed, \"; transform: scale(0.98); }\\n &:disabled{ opacity:.6; cursor:not-allowed; }\\n \");\n }\n return \"\\n background-color: \".concat(base, \";\\n color: \").concat(_data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.white, \";\\n border: 1px solid transparent;\\n --hover-overlay: rgba(255,255,255,.12);\\n &:hover:not(:disabled){ background-color:\").concat(hover, \"; }\\n &:active:not(:disabled){ background-color:\").concat(pressed, \"; transform: scale(0.98); }\\n &:disabled{ background-color:\").concat(_data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.blue_200, \"; opacity:.6; cursor:not-allowed; }\\n \");\n}, _data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.pastel_blue, function (p) {\n return p.iconOnly && \"\\n width: 36px !important;\\n height: 36px !important;\\n padding: 0 !important;\\n border-radius: 6px;\\n \";\n});\nvar Loader = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n border: 3px solid transparent;\\n border-top: 3px solid currentColor;\\n border-radius: 50%;\\n width: 1.25em;\\n height: 1.25em;\\n animation: spin 0.6s linear infinite;\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n transform: translate(-50%, -50%);\\n @keyframes spin {\\n to {\\n transform: translate(-50%, -50%) rotate(360deg);\\n }\\n }\\n\"])));\nvar Button = function Button(_ref) {\n var label = _ref.label,\n children = _ref.children,\n iconLeft = _ref.iconLeft,\n iconRight = _ref.iconRight,\n iconColor = _ref.iconColor,\n _ref$variant = _ref.variant,\n variant = _ref$variant === void 0 ? \"blue_700\" : _ref$variant,\n _ref$outline = _ref.outline,\n outline = _ref$outline === void 0 ? false : _ref$outline,\n _ref$size = _ref.size,\n size = _ref$size === void 0 ? \"m\" : _ref$size,\n width = _ref.width,\n _ref$isLoading = _ref.isLoading,\n isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,\n fontWeight = _ref.fontWeight,\n onClick = _ref.onClick,\n disabled = _ref.disabled,\n rest = _objectWithoutProperties(_ref, _excluded);\n var ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var sizeConfig = defaultSizes[size];\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledButton, _extends({\n ref: ref,\n onClick: onClick,\n variant: variant,\n outline: outline,\n width: width,\n isLoading: isLoading,\n fontWeight: fontWeight,\n sizeConfig: sizeConfig,\n disabled: disabled || isLoading,\n \"aria-busy\": isLoading ? \"true\" : undefined,\n iconOnly: (iconLeft || iconRight) && !label\n }, rest), isLoading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Loader, null), !isLoading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Row_Row__WEBPACK_IMPORTED_MODULE_4__.Row, {\n gap: \"8\",\n fullwidth: true,\n justifyContent: \"center\",\n alignItems: \"center\"\n }, iconLeft && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, {\n name: iconLeft,\n size: size,\n family: \"regular\",\n color: outline ? variant : iconColor\n }), label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_3__.Text, {\n size: sizeConfig.textSize,\n variant: outline ? variant : \"white\",\n align: \"center\"\n }, label), iconRight && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, {\n name: iconRight,\n size: size,\n family: \"regular\",\n color: outline ? variant : iconColor\n }), !label && children));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Button);\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Button/Button.jsx?");
96
96
 
97
97
  /***/ }),
98
98
 
@@ -191,7 +191,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
191
191
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
192
192
 
193
193
  "use strict";
194
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Input: () => (/* binding */ Input)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Text/Text */ \"./src/Components/Text/Text.jsx\");\n/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon/Icon */ \"./src/Components/Icon/Icon.jsx\");\n/* harmony import */ var _data_colors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../data/colors */ \"./src/data/colors.js\");\nvar _excluded = [\"label\", \"value\", \"onChange\", \"type\", \"placeholder\", \"disabled\", \"required\", \"inputId\", \"onBlur\", \"onKeyDown\", \"asTextArea\", \"noFlex\"],\n _excluded2 = [\"name\"];\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;\nfunction _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); }\nfunction _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; }\nfunction _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; }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\n\n\nvar shouldForwardProp = function shouldForwardProp(prop) {\n return ![\"width\", \"transparent\", \"textAlign\", \"padding\", \"borderRadius\", \"gap\", \"marginTop\", \"asTextArea\"].includes(prop);\n};\nvar StyledContainer = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div.withConfig({\n shouldForwardProp: shouldForwardProp\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n flex-direction: column;\\n \", \"\\n width: \", \";\\n max-width: \", \";\\n gap: 6px;\\n\"])), function (props) {\n return props.noFlex ? \"\" : \"flex: 1;\";\n}, function (props) {\n return props.width || \"100%\";\n}, function (props) {\n return props.width || \"100%\";\n});\nvar StyledInput = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].input.withConfig({\n shouldForwardProp: shouldForwardProp\n})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n max-width: \", \";\\n width: \", \";\\n height: 36px;\\n padding: \", \";\\n border-radius: \", \";\\n background-color: \", \";\\n border: 1px solid \", \";\\n gap: \", \";\\n margin-top: \", \";\\n text-align: \", \";\\n\\n &:focus {\\n outline: none;\\n border: 1px solid \", \";\\n }\\n\\n &::placeholder {\\n font-family: \\\"Open Sans\\\", sans-serif;\\n font-size: 12px;\\n font-weight: 400;\\n color: \", \";\\n }\\n\\n &.filled {\\n background-color: \", \";\\n }\\n\"])), function (props) {\n return props.width || \"100%\";\n}, function (props) {\n return props.width || \"100%\";\n}, function (props) {\n return props.padding || \"8px\";\n}, function (props) {\n return props.borderRadius || \"5px\";\n}, function (props) {\n return props.disabled ? _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_200 : props.transparent ? \"transparent\" : _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.white;\n}, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_300, function (props) {\n return props.gap || \"5px\";\n}, function (props) {\n return props.marginTop || \"0\";\n}, function (props) {\n return props.textAlign || \"left\";\n}, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.blue_950, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_500, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_100);\nvar StyledTextarea = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].textarea.withConfig({\n shouldForwardProp: shouldForwardProp\n})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n max-width: \", \";\\n width: \", \";\\n padding: \", \";\\n border-radius: \", \";\\n background-color: \", \";\\n border: 1px solid \", \";\\n gap: \", \";\\n margin-top: \", \";\\n text-align: \", \";\\n\\n &:focus {\\n outline: none;\\n border: 1px solid \", \";\\n }\\n\\n &::placeholder {\\n font-family: \\\"Open Sans\\\", sans-serif;\\n font-size: 12px;\\n font-weight: 400;\\n color: \", \";\\n }\\n\\n &.filled {\\n background-color: \", \";\\n }\\n\"])), function (props) {\n return props.width || \"100%\";\n}, function (props) {\n return props.width || \"100%\";\n}, function (props) {\n return props.padding || \"8px\";\n}, function (props) {\n return props.borderRadius || \"5px\";\n}, function (props) {\n return props.disabled ? _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_200 : props.transparent ? \"transparent\" : _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.white;\n}, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_300, function (props) {\n return props.gap || \"5px\";\n}, function (props) {\n return props.marginTop || \"0\";\n}, function (props) {\n return props.textAlign || \"left\";\n}, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.blue_950, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_500, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_100);\nvar EyeButton = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n background: none;\\n border: none;\\n position: absolute;\\n right: 12px;\\n top: 48%;\\n transform: translateY(-50%);\\n cursor: pointer;\\n padding: 0;\\n display: flex;\\n align-items: center;\\n\"])));\nvar InputWrapper = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n\"])));\nvar CalendarButton = (0,styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(EyeButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n color: \", \";\\n\\n &:disabled {\\n cursor: not-allowed;\\n opacity: 0.5;\\n }\\n\"])), _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_500);\nvar HiddenDateInput = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n position: absolute;\\n inset: 0;\\n opacity: 0;\\n pointer-events: none;\\n height: 100%;\\n width: 100%;\\n\"])));\nvar formatIsoToDisplay = function formatIsoToDisplay(isoValue) {\n if (!isoValue) return \"\";\n if (isoValue instanceof Date && !Number.isNaN(isoValue.getTime())) {\n var _day = String(isoValue.getDate()).padStart(2, \"0\");\n var _month = String(isoValue.getMonth() + 1).padStart(2, \"0\");\n var _year = String(isoValue.getFullYear()).padStart(4, \"0\");\n return \"\".concat(_day, \"/\").concat(_month, \"/\").concat(_year);\n }\n if (typeof isoValue !== \"string\") return \"\";\n var isoMatch = isoValue.match(/^(\\d{4})-(\\d{2})-(\\d{2})$/);\n if (!isoMatch) return \"\";\n var _isoMatch = _slicedToArray(isoMatch, 4),\n year = _isoMatch[1],\n month = _isoMatch[2],\n day = _isoMatch[3];\n return \"\".concat(day, \"/\").concat(month, \"/\").concat(year);\n};\nvar normaliseToIso = function normaliseToIso(value) {\n if (!value) return \"\";\n if (value instanceof Date && !Number.isNaN(value.getTime())) {\n var year = String(value.getFullYear()).padStart(4, \"0\");\n var month = String(value.getMonth() + 1).padStart(2, \"0\");\n var day = String(value.getDate()).padStart(2, \"0\");\n return \"\".concat(year, \"-\").concat(month, \"-\").concat(day);\n }\n if (typeof value !== \"string\") return \"\";\n if (/^\\d{4}-\\d{2}-\\d{2}$/.test(value)) {\n return value;\n }\n if (/^\\d{2}\\/\\d{2}\\/\\d{4}$/.test(value)) {\n var _value$split = value.split(\"/\"),\n _value$split2 = _slicedToArray(_value$split, 3),\n _day2 = _value$split2[0],\n _month2 = _value$split2[1],\n _year2 = _value$split2[2];\n return \"\".concat(_year2, \"-\").concat(_month2, \"-\").concat(_day2);\n }\n return \"\";\n};\nvar maskDateInput = function maskDateInput() {\n var rawValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : \"\";\n var digits = rawValue.replace(/\\D/g, \"\").slice(0, 8);\n var parts = [];\n if (digits.length > 0) {\n parts.push(digits.slice(0, Math.min(2, digits.length)));\n }\n if (digits.length > 2) {\n var monthPart = digits.slice(2, Math.min(4, digits.length));\n parts.push(monthPart);\n }\n if (digits.length > 4) {\n var yearPart = digits.slice(4, digits.length);\n parts.push(yearPart);\n }\n return parts.join(\"/\");\n};\nvar displayToIso = function displayToIso(displayValue) {\n if (!displayValue || !/^\\d{2}\\/\\d{2}\\/\\d{4}$/.test(displayValue)) {\n return null;\n }\n var _displayValue$split = displayValue.split(\"/\"),\n _displayValue$split2 = _slicedToArray(_displayValue$split, 3),\n dayStr = _displayValue$split2[0],\n monthStr = _displayValue$split2[1],\n yearStr = _displayValue$split2[2];\n var day = Number(dayStr);\n var month = Number(monthStr);\n var year = Number(yearStr);\n if (Number.isNaN(day) || Number.isNaN(month) || Number.isNaN(year) || month < 1 || month > 12 || day < 1 || day > 31) {\n return null;\n }\n var date = new Date(year, month - 1, day);\n if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {\n return null;\n }\n var isoMonth = String(month).padStart(2, \"0\");\n var isoDay = String(day).padStart(2, \"0\");\n return \"\".concat(yearStr, \"-\").concat(isoMonth, \"-\").concat(isoDay);\n};\nvar Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, ref) {\n var label = props.label,\n value = props.value,\n onChange = props.onChange,\n _props$type = props.type,\n type = _props$type === void 0 ? \"text\" : _props$type,\n placeholder = props.placeholder,\n disabled = props.disabled,\n required = props.required,\n inputId = props.inputId,\n onBlur = props.onBlur,\n onKeyDown = props.onKeyDown,\n asTextArea = props.asTextArea,\n noFlex = props.noFlex,\n otherProps = _objectWithoutProperties(props, _excluded);\n var inputName = otherProps === null || otherProps === void 0 ? void 0 : otherProps.name;\n var _ref = otherProps || {},\n min = _ref.min,\n max = _ref.max,\n step = _ref.step;\n var _ref2 = otherProps || {},\n name = _ref2.name,\n forwardProps = _objectWithoutProperties(_ref2, _excluded2);\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState2 = _slicedToArray(_useState, 2),\n showPassword = _useState2[0],\n setShowPassword = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n _useState4 = _slicedToArray(_useState3, 2),\n displayDateValue = _useState4[0],\n setDisplayDateValue = _useState4[1];\n var nativeDateRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var innerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(ref, function () {\n return innerRef.current;\n });\n var Component = asTextArea ? StyledTextarea : StyledInput;\n var isPassword = type === \"password\";\n var isDate = type === \"date\";\n var isoValue = isDate ? normaliseToIso(value) : null;\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n if (isDate) {\n var formatted = formatIsoToDisplay(isoValue);\n setDisplayDateValue(function (prev) {\n return formatted !== prev ? formatted : prev;\n });\n }\n }, [isDate, isoValue, value]);\n var emitDateChange = function emitDateChange(nextIsoValue) {\n if (!onChange) return;\n onChange({\n target: {\n value: nextIsoValue,\n name: inputName,\n type: \"date\"\n }\n });\n };\n var handleDateInputChange = function handleDateInputChange(event) {\n var masked = maskDateInput(event.target.value);\n setDisplayDateValue(masked);\n if (masked.length === 10) {\n var parsedIso = displayToIso(masked);\n if (parsedIso) {\n emitDateChange(parsedIso);\n }\n } else if (masked.length === 0) {\n emitDateChange(\"\");\n }\n };\n var handleDateInputPaste = function handleDateInputPaste(event) {\n var _event$clipboardData;\n if (!isDate) return;\n event.preventDefault();\n var pasted = ((_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData(\"Text\")) || \"\";\n var masked = maskDateInput(pasted);\n setDisplayDateValue(masked);\n if (masked.length === 10) {\n var parsedIso = displayToIso(masked);\n if (parsedIso) {\n emitDateChange(parsedIso);\n }\n }\n if (typeof (forwardProps === null || forwardProps === void 0 ? void 0 : forwardProps.onPaste) === \"function\") {\n forwardProps.onPaste(event);\n }\n };\n var handleNativeDateChange = function handleNativeDateChange(event) {\n var nextIso = event.target.value;\n var formatted = formatIsoToDisplay(nextIso);\n setDisplayDateValue(formatted);\n emitDateChange(nextIso);\n // Keep focus on the visible input for better UX\n if (innerRef.current) {\n innerRef.current.focus();\n }\n };\n var openNativePicker = function openNativePicker() {\n if (nativeDateRef.current) {\n if (typeof nativeDateRef.current.showPicker === \"function\") {\n nativeDateRef.current.showPicker();\n } else {\n nativeDateRef.current.focus();\n }\n }\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledContainer, _extends({\n noFlex: noFlex\n }, forwardProps), label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n size: \"xs\"\n }, label, \" \", required && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n style: {\n color: \"red\"\n }\n }, \"*\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(InputWrapper, null, isDate ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledInput, _extends({\n id: inputId,\n ref: innerRef,\n type: \"text\",\n inputMode: \"numeric\",\n autoComplete: \"off\",\n value: displayDateValue,\n onChange: handleDateInputChange,\n onPaste: handleDateInputPaste,\n onBlur: onBlur,\n onKeyDown: onKeyDown,\n placeholder: placeholder || \"jj/mm/aaaa\",\n disabled: disabled,\n \"aria-required\": required || undefined,\n className: displayDateValue ? \"filled\" : \"\"\n }, forwardProps, {\n name: undefined,\n min: undefined,\n max: undefined,\n step: undefined\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(HiddenDateInput, {\n ref: nativeDateRef,\n type: \"date\",\n tabIndex: -1,\n \"aria-hidden\": \"true\",\n value: isoValue || \"\",\n onChange: handleNativeDateChange,\n disabled: disabled,\n required: required,\n min: min,\n max: max,\n step: step,\n name: inputName\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CalendarButton, {\n type: \"button\",\n onClick: openNativePicker,\n \"aria-label\": \"Ouvrir le calendrier\",\n disabled: disabled\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n family: \"regular\",\n name: \"calendar\",\n size: \"m\",\n color: \"grey_500\"\n }))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Component, _extends({\n id: inputId,\n ref: innerRef,\n type: isPassword ? showPassword ? \"text\" : \"password\" : type,\n value: value || \"\",\n onChange: onChange,\n onBlur: onBlur,\n onKeyDown: onKeyDown,\n placeholder: placeholder,\n disabled: disabled,\n name: inputName,\n className: value ? \"filled\" : \"\"\n }, forwardProps)), isPassword && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(EyeButton, {\n type: \"button\",\n tabIndex: -1,\n onClick: function onClick() {\n return setShowPassword(function (v) {\n return !v;\n });\n },\n \"aria-label\": showPassword ? \"Masquer le mot de passe\" : \"Afficher le mot de passe\"\n }, showPassword ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n name: \"eye-slash\",\n size: \"m\",\n color: \"grey_500\"\n }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n name: \"eye\",\n size: \"m\",\n color: \"grey_500\"\n }))));\n});\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Input/Input.jsx?");
194
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Input: () => (/* binding */ Input)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Text/Text */ \"./src/Components/Text/Text.jsx\");\n/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon/Icon */ \"./src/Components/Icon/Icon.jsx\");\n/* harmony import */ var _data_colors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../data/colors */ \"./src/data/colors.js\");\nvar _excluded = [\"label\", \"value\", \"onChange\", \"type\", \"placeholder\", \"disabled\", \"required\", \"inputId\", \"onBlur\", \"onKeyDown\", \"asTextArea\", \"noFlex\"],\n _excluded2 = [\"name\"];\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;\nfunction _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); }\nfunction _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; }\nfunction _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; }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\n\n\nvar shouldForwardProp = function shouldForwardProp(prop) {\n return ![\"width\", \"transparent\", \"textAlign\", \"padding\", \"borderRadius\", \"gap\", \"marginTop\", \"asTextArea\"].includes(prop);\n};\nvar StyledContainer = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div.withConfig({\n shouldForwardProp: shouldForwardProp\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n flex-direction: column;\\n \", \"\\n width: \", \";\\n max-width: \", \";\\n gap: 6px;\\n\"])), function (props) {\n return props.noFlex ? \"\" : \"flex: 1;\";\n}, function (props) {\n return props.width || \"100%\";\n}, function (props) {\n return props.width || \"100%\";\n});\nvar StyledInput = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].input.withConfig({\n shouldForwardProp: shouldForwardProp\n})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n max-width: \", \";\\n width: \", \";\\n height: 36px;\\n padding: \", \";\\n border-radius: \", \";\\n background-color: \", \";\\n border: 1px solid \", \";\\n gap: \", \";\\n margin-top: \", \";\\n text-align: \", \";\\n font-family: \\\"Open Sans\\\", sans-serif;\\n\\n &:focus {\\n outline: none;\\n border: 1px solid \", \";\\n }\\n\\n &::placeholder {\\n font-family: \\\"Open Sans\\\", sans-serif;\\n font-size: 12px;\\n font-weight: 400;\\n color: \", \";\\n }\\n\\n &.filled {\\n background-color: \", \";\\n }\\n\"])), function (props) {\n return props.width || \"100%\";\n}, function (props) {\n return props.width || \"100%\";\n}, function (props) {\n return props.padding || \"8px\";\n}, function (props) {\n return props.borderRadius || \"5px\";\n}, function (props) {\n return props.disabled ? _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_200 : props.transparent ? \"transparent\" : _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.white;\n}, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_300, function (props) {\n return props.gap || \"5px\";\n}, function (props) {\n return props.marginTop || \"0\";\n}, function (props) {\n return props.textAlign || \"left\";\n}, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.blue_950, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_500, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_100);\nvar StyledTextarea = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].textarea.withConfig({\n shouldForwardProp: shouldForwardProp\n})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n max-width: \", \";\\n width: \", \";\\n padding: \", \";\\n border-radius: \", \";\\n background-color: \", \";\\n border: 1px solid \", \";\\n gap: \", \";\\n margin-top: \", \";\\n text-align: \", \";\\n font-family: \\\"Open Sans\\\", sans-serif;\\n\\n &:focus {\\n outline: none;\\n border: 1px solid \", \";\\n }\\n\\n &::placeholder {\\n font-family: \\\"Open Sans\\\", sans-serif;\\n font-size: 12px;\\n font-weight: 400;\\n color: \", \";\\n }\\n\\n &.filled {\\n background-color: \", \";\\n }\\n\"])), function (props) {\n return props.width || \"100%\";\n}, function (props) {\n return props.width || \"100%\";\n}, function (props) {\n return props.padding || \"8px\";\n}, function (props) {\n return props.borderRadius || \"5px\";\n}, function (props) {\n return props.disabled ? _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_200 : props.transparent ? \"transparent\" : _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.white;\n}, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_300, function (props) {\n return props.gap || \"5px\";\n}, function (props) {\n return props.marginTop || \"0\";\n}, function (props) {\n return props.textAlign || \"left\";\n}, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.blue_950, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_500, _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_100);\nvar EyeButton = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n background: none;\\n border: none;\\n position: absolute;\\n right: 12px;\\n top: 48%;\\n transform: translateY(-50%);\\n cursor: pointer;\\n padding: 0;\\n display: flex;\\n align-items: center;\\n\"])));\nvar InputWrapper = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n\"])));\nvar CalendarButton = (0,styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(EyeButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n color: \", \";\\n\\n &:disabled {\\n cursor: not-allowed;\\n opacity: 0.5;\\n }\\n\"])), _data_colors__WEBPACK_IMPORTED_MODULE_3__.colors.grey_500);\nvar HiddenDateInput = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n position: absolute;\\n inset: 0;\\n opacity: 0;\\n pointer-events: none;\\n height: 100%;\\n width: 100%;\\n\"])));\nvar formatIsoToDisplay = function formatIsoToDisplay(isoValue) {\n if (!isoValue) return \"\";\n if (isoValue instanceof Date && !Number.isNaN(isoValue.getTime())) {\n var _day = String(isoValue.getDate()).padStart(2, \"0\");\n var _month = String(isoValue.getMonth() + 1).padStart(2, \"0\");\n var _year = String(isoValue.getFullYear()).padStart(4, \"0\");\n return \"\".concat(_day, \"/\").concat(_month, \"/\").concat(_year);\n }\n if (typeof isoValue !== \"string\") return \"\";\n var isoMatch = isoValue.match(/^(\\d{4})-(\\d{2})-(\\d{2})$/);\n if (!isoMatch) return \"\";\n var _isoMatch = _slicedToArray(isoMatch, 4),\n year = _isoMatch[1],\n month = _isoMatch[2],\n day = _isoMatch[3];\n return \"\".concat(day, \"/\").concat(month, \"/\").concat(year);\n};\nvar normaliseToIso = function normaliseToIso(value) {\n if (!value) return \"\";\n if (value instanceof Date && !Number.isNaN(value.getTime())) {\n var year = String(value.getFullYear()).padStart(4, \"0\");\n var month = String(value.getMonth() + 1).padStart(2, \"0\");\n var day = String(value.getDate()).padStart(2, \"0\");\n return \"\".concat(year, \"-\").concat(month, \"-\").concat(day);\n }\n if (typeof value !== \"string\") return \"\";\n if (/^\\d{4}-\\d{2}-\\d{2}$/.test(value)) {\n return value;\n }\n if (/^\\d{2}\\/\\d{2}\\/\\d{4}$/.test(value)) {\n var _value$split = value.split(\"/\"),\n _value$split2 = _slicedToArray(_value$split, 3),\n _day2 = _value$split2[0],\n _month2 = _value$split2[1],\n _year2 = _value$split2[2];\n return \"\".concat(_year2, \"-\").concat(_month2, \"-\").concat(_day2);\n }\n return \"\";\n};\nvar maskDateInput = function maskDateInput() {\n var rawValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : \"\";\n var digits = rawValue.replace(/\\D/g, \"\").slice(0, 8);\n var parts = [];\n if (digits.length > 0) {\n parts.push(digits.slice(0, Math.min(2, digits.length)));\n }\n if (digits.length > 2) {\n var monthPart = digits.slice(2, Math.min(4, digits.length));\n parts.push(monthPart);\n }\n if (digits.length > 4) {\n var yearPart = digits.slice(4, digits.length);\n parts.push(yearPart);\n }\n return parts.join(\"/\");\n};\nvar displayToIso = function displayToIso(displayValue) {\n if (!displayValue || !/^\\d{2}\\/\\d{2}\\/\\d{4}$/.test(displayValue)) {\n return null;\n }\n var _displayValue$split = displayValue.split(\"/\"),\n _displayValue$split2 = _slicedToArray(_displayValue$split, 3),\n dayStr = _displayValue$split2[0],\n monthStr = _displayValue$split2[1],\n yearStr = _displayValue$split2[2];\n var day = Number(dayStr);\n var month = Number(monthStr);\n var year = Number(yearStr);\n if (Number.isNaN(day) || Number.isNaN(month) || Number.isNaN(year) || month < 1 || month > 12 || day < 1 || day > 31) {\n return null;\n }\n var date = new Date(year, month - 1, day);\n if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {\n return null;\n }\n var isoMonth = String(month).padStart(2, \"0\");\n var isoDay = String(day).padStart(2, \"0\");\n return \"\".concat(yearStr, \"-\").concat(isoMonth, \"-\").concat(isoDay);\n};\nvar Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, ref) {\n var label = props.label,\n value = props.value,\n onChange = props.onChange,\n _props$type = props.type,\n type = _props$type === void 0 ? \"text\" : _props$type,\n placeholder = props.placeholder,\n disabled = props.disabled,\n required = props.required,\n inputId = props.inputId,\n onBlur = props.onBlur,\n onKeyDown = props.onKeyDown,\n asTextArea = props.asTextArea,\n noFlex = props.noFlex,\n otherProps = _objectWithoutProperties(props, _excluded);\n var inputName = otherProps === null || otherProps === void 0 ? void 0 : otherProps.name;\n var _ref = otherProps || {},\n min = _ref.min,\n max = _ref.max,\n step = _ref.step;\n var _ref2 = otherProps || {},\n name = _ref2.name,\n forwardProps = _objectWithoutProperties(_ref2, _excluded2);\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState2 = _slicedToArray(_useState, 2),\n showPassword = _useState2[0],\n setShowPassword = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n _useState4 = _slicedToArray(_useState3, 2),\n displayDateValue = _useState4[0],\n setDisplayDateValue = _useState4[1];\n var nativeDateRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var innerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(ref, function () {\n return innerRef.current;\n });\n var Component = asTextArea ? StyledTextarea : StyledInput;\n var isPassword = type === \"password\";\n var isDate = type === \"date\";\n var isoValue = isDate ? normaliseToIso(value) : null;\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n if (isDate) {\n var formatted = formatIsoToDisplay(isoValue);\n setDisplayDateValue(function (prev) {\n return formatted !== prev ? formatted : prev;\n });\n }\n }, [isDate, isoValue, value]);\n var emitDateChange = function emitDateChange(nextIsoValue) {\n if (!onChange) return;\n onChange({\n target: {\n value: nextIsoValue,\n name: inputName,\n type: \"date\"\n }\n });\n };\n var handleDateInputChange = function handleDateInputChange(event) {\n var masked = maskDateInput(event.target.value);\n setDisplayDateValue(masked);\n if (masked.length === 10) {\n var parsedIso = displayToIso(masked);\n if (parsedIso) {\n emitDateChange(parsedIso);\n }\n } else if (masked.length === 0) {\n emitDateChange(\"\");\n }\n };\n var handleDateInputPaste = function handleDateInputPaste(event) {\n var _event$clipboardData;\n if (!isDate) return;\n event.preventDefault();\n var pasted = ((_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData(\"Text\")) || \"\";\n var masked = maskDateInput(pasted);\n setDisplayDateValue(masked);\n if (masked.length === 10) {\n var parsedIso = displayToIso(masked);\n if (parsedIso) {\n emitDateChange(parsedIso);\n }\n }\n if (typeof (forwardProps === null || forwardProps === void 0 ? void 0 : forwardProps.onPaste) === \"function\") {\n forwardProps.onPaste(event);\n }\n };\n var handleNativeDateChange = function handleNativeDateChange(event) {\n var nextIso = event.target.value;\n var formatted = formatIsoToDisplay(nextIso);\n setDisplayDateValue(formatted);\n emitDateChange(nextIso);\n // Keep focus on the visible input for better UX\n if (innerRef.current) {\n innerRef.current.focus();\n }\n };\n var openNativePicker = function openNativePicker() {\n if (nativeDateRef.current) {\n if (typeof nativeDateRef.current.showPicker === \"function\") {\n nativeDateRef.current.showPicker();\n } else {\n nativeDateRef.current.focus();\n }\n }\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledContainer, _extends({\n noFlex: noFlex\n }, forwardProps), label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n size: \"xs\"\n }, label, \" \", required && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n style: {\n color: \"red\"\n }\n }, \"*\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(InputWrapper, null, isDate ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledInput, _extends({\n id: inputId,\n ref: innerRef,\n type: \"text\",\n inputMode: \"numeric\",\n autoComplete: \"off\",\n value: displayDateValue,\n onChange: handleDateInputChange,\n onPaste: handleDateInputPaste,\n onBlur: onBlur,\n onKeyDown: onKeyDown,\n placeholder: placeholder || \"jj/mm/aaaa\",\n disabled: disabled,\n \"aria-required\": required || undefined,\n className: displayDateValue ? \"filled\" : \"\"\n }, forwardProps, {\n name: undefined,\n min: undefined,\n max: undefined,\n step: undefined\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(HiddenDateInput, {\n ref: nativeDateRef,\n type: \"date\",\n tabIndex: -1,\n \"aria-hidden\": \"true\",\n value: isoValue || \"\",\n onChange: handleNativeDateChange,\n disabled: disabled,\n required: required,\n min: min,\n max: max,\n step: step,\n name: inputName\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CalendarButton, {\n type: \"button\",\n onClick: openNativePicker,\n \"aria-label\": \"Ouvrir le calendrier\",\n disabled: disabled\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n family: \"regular\",\n name: \"calendar\",\n size: \"m\",\n color: \"grey_500\"\n }))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Component, _extends({\n id: inputId,\n ref: innerRef,\n type: isPassword ? showPassword ? \"text\" : \"password\" : type,\n value: value || \"\",\n onChange: onChange,\n onBlur: onBlur,\n onKeyDown: onKeyDown,\n placeholder: placeholder,\n disabled: disabled,\n name: inputName,\n className: value ? \"filled\" : \"\"\n }, forwardProps)), isPassword && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(EyeButton, {\n type: \"button\",\n tabIndex: -1,\n onClick: function onClick() {\n return setShowPassword(function (v) {\n return !v;\n });\n },\n \"aria-label\": showPassword ? \"Masquer le mot de passe\" : \"Afficher le mot de passe\"\n }, showPassword ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n name: \"eye-slash\",\n size: \"m\",\n color: \"grey_500\"\n }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n name: \"eye\",\n size: \"m\",\n color: \"grey_500\"\n }))));\n});\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Input/Input.jsx?");
195
195
 
196
196
  /***/ }),
197
197
 
@@ -323,7 +323,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
323
323
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
324
324
 
325
325
  "use strict";
326
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Select: () => (/* binding */ Select)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon/Icon */ \"./src/Components/Icon/Icon.jsx\");\n/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Text/Text */ \"./src/Components/Text/Text.jsx\");\n/* harmony import */ var _data_colors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../data/colors */ \"./src/data/colors.js\");\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\n\n\n\nvar StyledContainer = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].div.withConfig({\n shouldForwardProp: function shouldForwardProp(prop) {\n return ![\"width\", \"noFlex\", \"label\"].includes(prop);\n }\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n flex-direction: column;\\n flex: \", \";\\n width: \", \";\\n overflow-y: visible;\\n min-width: 100px;\\n gap: \", \";\\n\"])), function (props) {\n return props.noFlex ? \"0\" : \"1\";\n}, function (props) {\n return props.width || \"100%\";\n}, function (props) {\n return props.label ? \"6px\" : \"0\";\n});\nvar SelectWrapper = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n\"])));\nvar SelectInput = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n width: 100%;\\n border-radius: 5px;\\n cursor: \", \";\\n background-color: \", \";\\n height: \", \";\\n display: flex;\\n padding: 0 10px;\\n align-items: center;\\n justify-content: space-between;\\n color: \", \";\\n background-color: \", \";\\n border: 1px solid \", \";\\n font-size: 12px;\\n\\n &:focus,\\n &:hover {\\n border-color: \", \";\\n box-shadow: \", \";\\n }\\n\\n span {\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n flex-grow: 1;\\n flex-shrink: 1;\\n margin-right: 10px;\\n }\\n\\n svg {\\n flex-shrink: 0;\\n }\\n\"])), function (props) {\n return props.disabled ? \"not-allowed\" : \"pointer\";\n}, function (props) {\n return props.disabled ? _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.grey_200 : _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.white;\n}, function (props) {\n return props.height || \"45px\";\n}, function (props) {\n return props.color || \"\";\n}, function (props) {\n return props.backgroundColor || \"\";\n}, _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.grey_200, function (props) {\n return props.disabled ? _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.grey_300 : _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.blue_950;\n}, function (props) {\n return props.disabled ? \"none\" : \"0 0 0 1px #b0b0b0 inset, 0 0 10px rgba(24, 49, 75, 0.188)\";\n});\nvar ChevronIcon = (0,styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"])(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon).withConfig({\n shouldForwardProp: function shouldForwardProp(prop) {\n return prop !== \"isOpen\";\n }\n})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n transition: transform 0.3s ease;\\n transform: \", \";\\n\"])), function (props) {\n return props.isOpen ? \"rotate(180deg)\" : \"rotate(0deg)\";\n});\nvar Dropdown = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n position: absolute;\\n border: 1px solid \", \";\\n border-radius: 5px;\\n background: #fff;\\n max-height: 300px;\\n z-index: 9999;\\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\\n display: flex;\\n flex-direction: column;\\n font-size: 12px;\\n\"])), _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.grey_200);\nvar DropdownList = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n overflow-y: scroll;\\n\"])));\nvar SearchInput = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n padding: 8px;\\n border: none;\\n border-bottom: 1px solid #ccc;\\n outline: none;\\n\\n &:focus {\\n border-color: #4382f7;\\n box-shadow: 0 0 0 1px #4382f7 inset, 0 0 10px rgba(24, 49, 75, 0.188);\\n }\\n\"])));\nvar Option = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n padding: 8px;\\n cursor: pointer;\\n background-color: \", \";\\n\\n &:hover {\\n background: \", \";\\n }\\n\"])), function (props) {\n return props.isActive ? _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.grey_100 : \"transparent\";\n}, _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.grey_100);\nvar Select = function Select(_ref) {\n var label = _ref.label,\n value = _ref.value,\n onChange = _ref.onChange,\n options = _ref.options,\n placeholder = _ref.placeholder,\n width = _ref.width,\n height = _ref.height,\n required = _ref.required,\n disabled = _ref.disabled,\n color = _ref.color,\n backgroundColor = _ref.backgroundColor,\n hideSearchBar = _ref.hideSearchBar,\n noFlex = _ref.noFlex;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState2 = _slicedToArray(_useState, 2),\n isOpen = _useState2[0],\n setIsOpen = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n _useState4 = _slicedToArray(_useState3, 2),\n searchTerm = _useState4[0],\n setSearchTerm = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}),\n _useState6 = _slicedToArray(_useState5, 2),\n dropdownPosition = _useState6[0],\n setDropdownPosition = _useState6[1];\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),\n _useState8 = _slicedToArray(_useState7, 2),\n activeIndex = _useState8[0],\n setActiveIndex = _useState8[1];\n var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var dropdownRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var searchInputRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var selectedOption = options.find(function (option) {\n return option.value === value;\n });\n var handleSelect = function handleSelect(option) {\n onChange(option.value);\n setSearchTerm(\"\");\n setIsOpen(false);\n setActiveIndex(0);\n };\n var handleToggle = function handleToggle() {\n if (!disabled) {\n var _dropdownRef$current;\n var containerRect = containerRef.current.getBoundingClientRect();\n var dropdownHeight = ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getBoundingClientRect().height) || 300;\n var isDropdownOverflowing = containerRect.bottom + dropdownHeight > window.innerHeight;\n setDropdownPosition({\n top: isDropdownOverflowing ? containerRect.top - dropdownHeight : containerRect.bottom,\n left: containerRect.left,\n width: containerRect.width\n });\n setIsOpen(function (prevState) {\n var newState = !prevState;\n if (newState) {\n setTimeout(function () {\n var _searchInputRef$curre;\n (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();\n }, 0);\n }\n return newState;\n });\n }\n };\n var handleSearch = function handleSearch(e) {\n setSearchTerm(e.target.value);\n setActiveIndex(0);\n };\n var handleKeyDown = function handleKeyDown(e) {\n if (!isOpen) return;\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setActiveIndex(function (prev) {\n return Math.min(prev + 1, filteredOptions.length - 1);\n });\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActiveIndex(function (prev) {\n return Math.max(prev - 1, 0);\n });\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n if (filteredOptions[activeIndex]) {\n handleSelect(filteredOptions[activeIndex]);\n }\n }\n };\n var filteredOptions = options.filter(function (option) {\n return option.label.toLowerCase().includes(searchTerm.toLowerCase());\n });\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n // Check if click is inside the container or dropdown\n var handleClickOutside = function handleClickOutside(event) {\n if (containerRef.current && !containerRef.current.contains(event.target) && dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setSearchTerm(\"\");\n setIsOpen(false);\n setActiveIndex(0);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n\n // Find position for the dropdown\n if (isOpen) {\n var containerRect = containerRef.current.getBoundingClientRect();\n var dropdownEl = dropdownRef.current;\n var dropdownHeight = 300;\n if (dropdownEl) {\n dropdownHeight = dropdownEl.getBoundingClientRect().height;\n }\n var spaceBelow = window.innerHeight - containerRect.bottom;\n var spaceAbove = containerRect.top;\n var top = containerRect.bottom;\n if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {\n top = containerRect.top - dropdownHeight;\n }\n setDropdownPosition({\n top: top,\n left: containerRect.left,\n width: containerRect.width\n });\n }\n return function () {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpen]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledContainer, {\n width: width,\n noFlex: noFlex\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_3__.Text, {\n size: \"xs\"\n }, label, \" \", required && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_3__.Text, {\n style: {\n color: \"red\"\n }\n }, \"*\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectWrapper, {\n ref: containerRef,\n onKeyDown: handleKeyDown,\n tabIndex: 0\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectInput, {\n height: height,\n color: selectedOption ? color : \"#999\",\n backgroundColor: backgroundColor,\n onClick: handleToggle,\n disabled: disabled\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, selectedOption ? selectedOption.label : placeholder), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ChevronIcon, {\n name: \"chevron-down\",\n isOpen: isOpen\n })), isOpen && /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1___default().createPortal(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Dropdown, {\n ref: dropdownRef,\n style: {\n top: dropdownPosition.top,\n left: dropdownPosition.left,\n width: dropdownPosition.width\n }\n }, !hideSearchBar && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SearchInput, {\n ref: searchInputRef,\n type: \"text\",\n placeholder: \"Rechercher...\",\n value: searchTerm,\n onChange: handleSearch\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(DropdownList, null, filteredOptions.map(function (option, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Option, {\n key: option.value,\n isActive: index === activeIndex,\n onMouseEnter: function onMouseEnter() {\n return setActiveIndex(index);\n },\n onClick: function onClick() {\n return handleSelect(option);\n },\n style: {\n pointerEvents: \"auto\"\n }\n }, option.label);\n }))), document.body)));\n};\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Select/Select.jsx?");
326
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Select: () => (/* binding */ Select)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon/Icon */ \"./src/Components/Icon/Icon.jsx\");\n/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Text/Text */ \"./src/Components/Text/Text.jsx\");\n/* harmony import */ var _data_colors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../data/colors */ \"./src/data/colors.js\");\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\n\n\n\nvar StyledContainer = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].div.withConfig({\n shouldForwardProp: function shouldForwardProp(prop) {\n return ![\"width\", \"noFlex\", \"label\"].includes(prop);\n }\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n flex-direction: column;\\n flex: \", \";\\n width: \", \";\\n overflow-y: visible;\\n min-width: 100px;\\n gap: \", \";\\n\"])), function (props) {\n return props.noFlex ? \"0\" : \"1\";\n}, function (props) {\n return props.width || \"100%\";\n}, function (props) {\n return props.label ? \"6px\" : \"0\";\n});\nvar SelectWrapper = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n\"])));\nvar SelectInput = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n width: 100%;\\n border-radius: 5px;\\n cursor: \", \";\\n background-color: \", \";\\n height: \", \";\\n display: flex;\\n padding: 0 10px;\\n align-items: center;\\n justify-content: space-between;\\n color: \", \";\\n background-color: \", \";\\n border: 1px solid \", \";\\n font-size: 12px;\\n\\n &:focus,\\n &:hover {\\n border-color: \", \";\\n box-shadow: \", \";\\n }\\n\\n span {\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n flex-grow: 1;\\n flex-shrink: 1;\\n margin-right: 10px;\\n }\\n\\n svg {\\n flex-shrink: 0;\\n }\\n\"])), function (props) {\n return props.disabled ? \"not-allowed\" : \"pointer\";\n}, function (props) {\n return props.disabled ? _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.grey_200 : _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.white;\n}, function (props) {\n return props.height || \"45px\";\n}, function (props) {\n return props.color || \"\";\n}, function (props) {\n return props.backgroundColor || \"\";\n}, _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.grey_200, function (props) {\n return props.disabled ? _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.grey_300 : _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.blue_950;\n}, function (props) {\n return props.disabled ? \"none\" : \"0 0 0 1px #b0b0b0 inset, 0 0 10px rgba(24, 49, 75, 0.188)\";\n});\nvar ChevronIcon = (0,styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"])(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon).withConfig({\n shouldForwardProp: function shouldForwardProp(prop) {\n return prop !== \"isOpen\";\n }\n})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n transition: transform 0.3s ease;\\n transform: \", \";\\n\"])), function (props) {\n return props.isOpen ? \"rotate(180deg)\" : \"rotate(0deg)\";\n});\nvar Dropdown = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n position: absolute;\\n border: 1px solid \", \";\\n border-radius: 5px;\\n background: #fff;\\n max-height: 300px;\\n z-index: 9999;\\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\\n display: flex;\\n flex-direction: column;\\n font-size: 12px;\\n\"])), _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.grey_200);\nvar DropdownList = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n overflow-y: scroll;\\n\"])));\nvar SearchInput = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n padding: 8px;\\n border: none;\\n border-bottom: 1px solid #ccc;\\n outline: none;\\n\\n &:focus {\\n border-color: #4382f7;\\n box-shadow: 0 0 0 1px #4382f7 inset, 0 0 10px rgba(24, 49, 75, 0.188);\\n }\\n\"])));\nvar Option = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n padding: 8px;\\n cursor: pointer;\\n background-color: \", \";\\n\\n &:hover {\\n background: \", \";\\n }\\n\"])), function (props) {\n return props.isActive ? _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.grey_100 : \"transparent\";\n}, _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.grey_100);\nvar Select = function Select(_ref) {\n var label = _ref.label,\n value = _ref.value,\n onChange = _ref.onChange,\n options = _ref.options,\n placeholder = _ref.placeholder,\n width = _ref.width,\n height = _ref.height,\n required = _ref.required,\n disabled = _ref.disabled,\n color = _ref.color,\n backgroundColor = _ref.backgroundColor,\n hideSearchBar = _ref.hideSearchBar,\n noFlex = _ref.noFlex;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState2 = _slicedToArray(_useState, 2),\n isOpen = _useState2[0],\n setIsOpen = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n _useState4 = _slicedToArray(_useState3, 2),\n searchTerm = _useState4[0],\n setSearchTerm = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}),\n _useState6 = _slicedToArray(_useState5, 2),\n dropdownPosition = _useState6[0],\n setDropdownPosition = _useState6[1];\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),\n _useState8 = _slicedToArray(_useState7, 2),\n activeIndex = _useState8[0],\n setActiveIndex = _useState8[1];\n var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var dropdownRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var searchInputRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var selectedOption = options.find(function (option) {\n return option.value === value;\n });\n var handleSelect = function handleSelect(option) {\n onChange(option.value);\n setSearchTerm(\"\");\n setIsOpen(false);\n setActiveIndex(0);\n };\n var handleToggle = function handleToggle() {\n if (!disabled) {\n var _dropdownRef$current;\n var containerRect = containerRef.current.getBoundingClientRect();\n var dropdownHeight = ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getBoundingClientRect().height) || 300;\n var isDropdownOverflowing = containerRect.bottom + dropdownHeight > window.innerHeight;\n setDropdownPosition({\n top: isDropdownOverflowing ? containerRect.top - dropdownHeight : containerRect.bottom,\n left: containerRect.left,\n width: containerRect.width\n });\n setIsOpen(function (prevState) {\n var newState = !prevState;\n if (newState) {\n setTimeout(function () {\n var _searchInputRef$curre;\n (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();\n }, 0);\n }\n return newState;\n });\n }\n };\n var handleSearch = function handleSearch(e) {\n setSearchTerm(e.target.value);\n setActiveIndex(0);\n };\n var handleKeyDown = function handleKeyDown(e) {\n if (!isOpen) return;\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setActiveIndex(function (prev) {\n return Math.min(prev + 1, filteredOptions.length - 1);\n });\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActiveIndex(function (prev) {\n return Math.max(prev - 1, 0);\n });\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n if (filteredOptions[activeIndex]) {\n handleSelect(filteredOptions[activeIndex]);\n }\n }\n };\n var filteredOptions = options.filter(function (option) {\n return option.label.toLowerCase().includes(searchTerm.toLowerCase());\n });\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n // Check if click is inside the container or dropdown\n var handleClickOutside = function handleClickOutside(event) {\n if (containerRef.current && !containerRef.current.contains(event.target) && dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setSearchTerm(\"\");\n setIsOpen(false);\n setActiveIndex(0);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n\n // Find position for the dropdown\n if (isOpen) {\n var containerRect = containerRef.current.getBoundingClientRect();\n var dropdownEl = dropdownRef.current;\n var dropdownHeight = 300;\n if (dropdownEl) {\n dropdownHeight = dropdownEl.getBoundingClientRect().height;\n }\n var spaceBelow = window.innerHeight - containerRect.bottom;\n var spaceAbove = containerRect.top;\n var top = containerRect.bottom;\n if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {\n top = containerRect.top - dropdownHeight;\n }\n setDropdownPosition({\n top: top,\n left: containerRect.left,\n width: containerRect.width\n });\n }\n return function () {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpen]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledContainer, {\n width: width,\n noFlex: noFlex\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_3__.Text, {\n size: \"xs\"\n }, label, \" \", required && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_3__.Text, {\n style: {\n color: \"red\"\n }\n }, \"*\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectWrapper, {\n ref: containerRef,\n onKeyDown: handleKeyDown,\n tabIndex: 0\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectInput, {\n height: height,\n color: selectedOption ? color : _data_colors__WEBPACK_IMPORTED_MODULE_4__.colors.grey_500,\n backgroundColor: backgroundColor,\n onClick: handleToggle,\n disabled: disabled\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, selectedOption ? selectedOption.label : placeholder), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ChevronIcon, {\n name: \"chevron-down\",\n isOpen: isOpen\n })), isOpen && /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1___default().createPortal(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Dropdown, {\n ref: dropdownRef,\n style: {\n top: dropdownPosition.top,\n left: dropdownPosition.left,\n width: dropdownPosition.width\n }\n }, !hideSearchBar && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SearchInput, {\n ref: searchInputRef,\n type: \"text\",\n placeholder: \"Rechercher...\",\n value: searchTerm,\n onChange: handleSearch\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(DropdownList, null, filteredOptions.map(function (option, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Option, {\n key: option.value,\n isActive: index === activeIndex,\n onMouseEnter: function onMouseEnter() {\n return setActiveIndex(index);\n },\n onClick: function onClick() {\n return handleSelect(option);\n },\n style: {\n pointerEvents: \"auto\"\n }\n }, option.label);\n }))), document.body)));\n};\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Select/Select.jsx?");
327
327
 
328
328
  /***/ }),
329
329
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "design-zystem",
3
- "version": "1.0.186",
3
+ "version": "1.0.188",
4
4
  "description": "A React design system of importable components",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",