@stokr/components-library 2.3.65-beta.9 → 2.3.65

package/dist/components/Input/DatePickerInput.js

@@ -6,68 +6,172 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DatePickerInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _dateFns = require("date-fns");
 var _reactDayPicker = require("react-day-picker");
 var _Input = require("./Input.styles");
 var _DatePickerInput = require("./DatePickerInput.styles");
+var _customHooks = require("../../utils/customHooks");
+const _excluded = ["onChange", "name", "value", "id", "label", "placeholder", "error", "touched", "dashboard", "dateFormat"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const DATE_FORMAT = 'MMM dd, yyyy';
 const DatePickerInput = props => {
   const {
-    id,
-    name,
-    label,
-    placeholder,
-    value,
-    error,
-    touched,
-    dashboard
-  } = props;
+      onChange,
+      name,
+      value,
+      id,
+      label,
+      placeholder,
+      error,
+      touched,
+      dashboard,
+      dateFormat = DATE_FORMAT
+    } = props,
+    dayPickerProps = _objectWithoutProperties(props, _excluded);
   const [labelUp, setLabelUp] = (0, _react.useState)(false);
+  const [inputValue, setInputValue] = (0, _react.useState)('');
+  const [month, setMonth] = (0, _react.useState)(new Date());
+  const [selectedDate, setSelectedDate] = (0, _react.useState)(undefined);
+  const {
+    ref,
+    isComponentVisible,
+    setIsComponentVisible
+  } = (0, _customHooks.useComponentVisible)(false);
+
+  // Sync external value prop with internal state
+  (0, _react.useEffect)(() => {
+    if (value) {
+      const dateValue = value instanceof Date ? value : new Date(value);
+      if ((0, _dateFns.isValid)(dateValue)) {
+        setSelectedDate(dateValue);
+        setMonth(dateValue);
+        setInputValue((0, _dateFns.format)(dateValue, dateFormat));
+      }
+    } else {
+      setSelectedDate(undefined);
+      setInputValue('');
+    }
+  }, [value, dateFormat]);
+
+  // Update label position
   (0, _react.useEffect)(() => {
-    checkLabel(false);
-  }, []);
-  const onChange = value => {
-    props.onChange && props.onChange(null, {
+    setLabelUp(!!inputValue || isComponentVisible);
+  }, [inputValue, isComponentVisible]);
+  const handleInputChange = e => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+
+    // Try to parse the input value
+    const parsedDate = (0, _dateFns.parse)(newValue, dateFormat, new Date());
+    if ((0, _dateFns.isValid)(parsedDate)) {
+      setSelectedDate(parsedDate);
+      setMonth(parsedDate);
+      onChange && onChange(parsedDate, {
+        name,
+        value: parsedDate
+      });
+    } else {
+      setSelectedDate(undefined);
+    }
+  };
+  const handleDaySelect = date => {
+    if (date) {
+      setSelectedDate(date);
+      setMonth(date);
+      setInputValue((0, _dateFns.format)(date, dateFormat));
+      onChange && onChange(date, {
+        name,
+        value: date
+      });
+    } else {
+      setSelectedDate(undefined);
+      setInputValue('');
+      onChange && onChange(undefined, {
+        name,
+        value: undefined
+      });
+    }
+    setIsComponentVisible(false);
+  };
+  const handleClear = e => {
+    e.stopPropagation();
+    setSelectedDate(undefined);
+    setInputValue('');
+    onChange && onChange(undefined, {
       name,
-      value
+      value: undefined
     });
+    setIsComponentVisible(false);
+  };
+  const handleInputClick = () => {
+    setIsComponentVisible(true);
+  };
+  const handleInputFocus = () => {
+    setLabelUp(true);
   };
-  const checkLabel = focus => {
-    setLabelUp(focus || !!value);
+  const handleInputBlur = () => {
+    if (!inputValue) {
+      setLabelUp(false);
+    }
   };
-  return /*#__PURE__*/_react.default.createElement(_Input.Wrapper, null, label && /*#__PURE__*/_react.default.createElement(_Input.Label, {
+  return /*#__PURE__*/_react.default.createElement(_Input.Wrapper, {
+    ref: ref
+  }, label && /*#__PURE__*/_react.default.createElement(_Input.Label, {
     isUp: labelUp,
     error: error && touched,
-    htmlFor: id
+    htmlFor: id,
+    active: isComponentVisible
   }, label), /*#__PURE__*/_react.default.createElement(_DatePickerInput.DatePickerOverlay, {
-    onClick: () => checkLabel(true),
     dashboard: dashboard
-  }, /*#__PURE__*/_react.default.createElement(_reactDayPicker.DayPicker, {
+  }, /*#__PURE__*/_react.default.createElement(_DatePickerInput.InputWrapper, null, /*#__PURE__*/_react.default.createElement(_DatePickerInput.DateInput, {
     id: id,
     name: name,
-    value: value,
+    type: "text",
+    value: inputValue,
     placeholder: placeholder,
-    onDayChange: onChange,
-    error: error
-  })));
+    onChange: handleInputChange,
+    onClick: handleInputClick,
+    onFocus: handleInputFocus,
+    onBlur: handleInputBlur,
+    dashboard: dashboard,
+    autoComplete: "off"
+  }), selectedDate && /*#__PURE__*/_react.default.createElement(_DatePickerInput.ClearButton, {
+    type: "button",
+    onClick: handleClear,
+    dashboard: dashboard,
+    title: "Clear date"
+  }, "\u2715")), isComponentVisible && /*#__PURE__*/_react.default.createElement(_reactDayPicker.DayPicker, _extends({
+    mode: "single",
+    month: month,
+    onMonthChange: setMonth,
+    selected: selectedDate,
+    onSelect: handleDaySelect
+  }, dayPickerProps))));
 };
 exports.DatePickerInput = DatePickerInput;
 DatePickerInput.propTypes = {
-  id: _propTypes.default.string.isRequired,
-  name: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string,
+  name: _propTypes.default.string,
   label: _propTypes.default.string,
   placeholder: _propTypes.default.string,
   error: _propTypes.default.bool,
   touched: _propTypes.default.bool,
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.instanceOf(Date)]).isRequired,
-  onChange: _propTypes.default.func.isRequired,
-  dashboard: _propTypes.default.bool
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.instanceOf(Date)]),
+  onChange: _propTypes.default.func,
+  dashboard: _propTypes.default.bool,
+  dateFormat: _propTypes.default.string
 };
 DatePickerInput.defaultProps = {
   label: '',
   placeholder: '',
   error: false,
   touched: false,
-  dashboard: false
+  dashboard: false,
+  value: undefined,
+  dateFormat: DATE_FORMAT
 };
 var _default = exports.default = DatePickerInput;

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

@@ -3,13 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DatePickerOverlay = void 0;
+exports.default = exports.InputWrapper = exports.DatePickerOverlay = exports.DateInput = exports.ClearButton = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const InputWrapper = exports.InputWrapper = _styledComponents.default.div.withConfig({
+  displayName: "DatePickerInputstyles__InputWrapper",
+  componentId: "sc-102qruz-0"
+})(["position:relative;display:flex;align-items:center;"]);
+const ClearButton = exports.ClearButton = _styledComponents.default.button.withConfig({
+  displayName: "DatePickerInputstyles__ClearButton",
+  componentId: "sc-102qruz-1"
+})(["position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px 8px;font-size:16px;color:", ";line-height:1;display:flex;align-items:center;justify-content:center;&:hover{color:", ";}", ""], _colors.default.lightGrey, _colors.default.black, props => props.dashboard && (0, _styledComponents.css)(["right:0;padding:2px 4px;font-size:14px;"]));
+const DateInput = exports.DateInput = _styledComponents.default.input.withConfig({
+  displayName: "DatePickerInputstyles__DateInput",
+  componentId: "sc-102qruz-2"
+})(["font-family:'Open sans';display:block;width:100%;height:40px;font-weight:600;font-size:12px;line-height:18px;padding:13px 0;padding-bottom:7px;border-radius:0;box-shadow:none;outline:0;border:0;border-top:1px solid transparent;border-bottom:1px solid ", ";color:", ";background-color:transparent;transition:border-color 0.2s;&:focus,&:hover{box-shadow:none;border-top-color:transparent;border-bottom-color:", ";}&::placeholder{color:transparent;opacity:0;}", ""], _theme.default.cGrey, _theme.default.cBlack, _theme.default.cPrimary, props => props.dashboard && (0, _styledComponents.css)(["border:0;padding:0;height:22px;font-family:'Open Sans';font-weight:300;font-size:14px;line-height:22px;letter-spacing:0.53px;text-transform:normal;color:", ";&::placeholder{color:", ";opacity:1;}"], _theme.default.cBlack, _theme.default.cGrey2));
 const DatePickerOverlay = exports.DatePickerOverlay = _styledComponents.default.div.withConfig({
   displayName: "DatePickerInputstyles__DatePickerOverlay",
-  componentId: "sc-102qruz-0"
-})(["&&& > .DayPickerInput{display:block;position:relative;width:100%;}&&& > .DayPickerInput-OverlayWrapper{z-index:100;}&&& > .DayPickerInput > input{font-family:'Open sans';display:block;width:100%;height:40px;font-weight:600;font-size:12px;line-height:18px;padding:13px 0;padding-bottom:7px;border-radius:0;box-shadow:none;outline:0;border:0;border-top:1px solid transparent;border-bottom:1px solid ", ";color:", ";background-color:transparent;transition:border-color 0.2s;&:focus,&:hover{box-shadow:none;border-top-color:transparent;border-bottom-color:", ";}&::placeholder{color:transparent;opacity:0;}}", ""], props => _theme.default.cGrey, props => _theme.default.cBlack, props => _theme.default.cPrimary, props => props.dashboard && (0, _styledComponents.css)(["&&& > .DayPickerInput > input{border:0;padding:0;height:22px;font-family:'Open Sans';font-weight:300;font-size:14px;line-height:22px;letter-spacing:0.53px;text-transform:normal;color:", ";&::placeholder{color:", ";opacity:1;}}"], _theme.default.cBlack, _theme.default.cGrey2));
+  componentId: "sc-102qruz-3"
+})(["position:relative;.rdp{position:absolute;z-index:20;background-color:white;margin:0;box-shadow:0 4px 12px rgba(0,0,0,0.15);padding:12px;border-radius:4px;min-width:fit-content;--rdp-accent-color:", ";--rdp-accent-background-color:", ";--rdp-day-height:32px;--rdp-day-width:32px;--rdp-selected-font:600 13px 'Open Sans',sans-serif;--rdp-weekday-font:600 11px 'Open Sans',sans-serif;--rdp-font-family:'Open Sans',sans-serif;--rdp-selected-border:none;--rdp-outside-opacity:0.4;}.rdp-day{font-size:13px;font-weight:400;}.rdp-selected .rdp-day_button,.rdp-day_button[aria-selected='true']{background-color:", " !important;color:white !important;border:none !important;outline:none !important;}.rdp-today:not(.rdp-selected) .rdp-day_button{font-weight:700;color:", ";}.rdp-weekday{font-size:11px;font-weight:700;text-transform:uppercase;color:", ";}.rdp-month_caption{font-weight:600;}.rdp-chevron{fill:", ";&:hover{fill:", ";background:transparent;}}"], _colors.default.blue, _colors.default.blue, _colors.default.blue, _colors.default.blue, _colors.default.black, _colors.default.grey2, _colors.default.black);
 var _default = exports.default = DatePickerOverlay;

package/dist/components/Input/MultiSelect.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.MultiSelect = void 0;
+exports.default = exports.OptionLabel = exports.MultiSelect = exports.CheckboxWrapperDiv = exports.CheckboxDiv = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactSelect = _interopRequireWildcard(require("react-select"));
@@ -28,15 +28,17 @@ const CountBadge = _styledComponents.default.span.withConfig({
   displayName: "MultiSelect__CountBadge",
   componentId: "sc-1udb3q8-0"
 })(["display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;background-color:", ";color:", ";border-radius:10px;font-size:12px;font-weight:600;margin-left:8px;"], _colors.default.black, _colors.default.white);
-const CheckboxWrapper = _styledComponents.default.div.withConfig({
-  displayName: "MultiSelect__CheckboxWrapper",
+
+// Exported for reuse in TableFilterDropdown
+const CheckboxWrapperDiv = exports.CheckboxWrapperDiv = _styledComponents.default.div.withConfig({
+  displayName: "MultiSelect__CheckboxWrapperDiv",
   componentId: "sc-1udb3q8-1"
 })(["display:flex;align-items:center;padding:16px 12px;cursor:pointer;transition:background-color 0.15s ease;&:hover{background-color:", ";}"], _colors.default.grey);
-const Checkbox = _styledComponents.default.div.withConfig({
-  displayName: "MultiSelect__Checkbox",
+const CheckboxDiv = exports.CheckboxDiv = _styledComponents.default.div.withConfig({
+  displayName: "MultiSelect__CheckboxDiv",
   componentId: "sc-1udb3q8-2"
 })(["width:14px;height:14px;border:1px solid ", ";border-radius:3px;margin-right:12px;display:flex;align-items:center;justify-content:center;background-color:", ";transition:all 0.15s ease;flex-shrink:0;svg{opacity:", ";transition:opacity 0.15s ease;width:8px;height:8px;}svg path{stroke:", ";}"], props => props.isSelected ? _colors.default.black : _colors.default.grey2, props => props.isSelected ? _colors.default.white : _colors.default.white, props => props.isSelected ? 1 : 0, _colors.default.blue);
-const OptionLabel = _styledComponents.default.span.withConfig({
+const OptionLabel = exports.OptionLabel = _styledComponents.default.span.withConfig({
   displayName: "MultiSelect__OptionLabel",
   componentId: "sc-1udb3q8-3"
 })(["font-size:14px;color:", ";font-weight:400;letter-spacing:0.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;"], _colors.default.black);
@@ -53,9 +55,9 @@ const CheckboxOption = props => {
     innerRef,
     innerProps
   } = props;
-  return /*#__PURE__*/_react.default.createElement(CheckboxWrapper, _extends({
+  return /*#__PURE__*/_react.default.createElement(CheckboxWrapperDiv, _extends({
     ref: innerRef
-  }, innerProps), /*#__PURE__*/_react.default.createElement(Checkbox, {
+  }, innerProps), /*#__PURE__*/_react.default.createElement(CheckboxDiv, {
     isSelected: isSelected
   }, /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(OptionLabel, null, label));
 };

package/dist/components/Input/TableFilterDropdown.js

@@ -0,0 +1,228 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TableFilterDropdown = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _checkIcon = require("../../static/images/check-icon.svg");
+var _filterIcon = require("../../static/images/filter-icon.svg");
+var _MultiSelect = require("./MultiSelect");
+const _excluded = ["label", "options", "value", "onChange", "icon", "minWidth", "maxWidth", "menuAlign", "menuTop", "showClearAll", "clearAllText"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+// Trigger container - matches table header styling
+const TriggerContainer = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__TriggerContainer",
+  componentId: "sc-z6x0ne-0"
+})(["display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;user-select:none;white-space:nowrap;"]);
+const IconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__IconWrapper",
+  componentId: "sc-z6x0ne-1"
+})(["display:flex;align-items:center;justify-content:center;width:16px;height:16px;position:relative;svg{width:14px;height:14px;}svg path,svg line,svg circle,svg rect{stroke:currentColor;}"]);
+
+// Active indicator dot
+const ActiveDot = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__ActiveDot",
+  componentId: "sc-z6x0ne-2"
+})(["position:absolute;top:-2px;right:-2px;width:6px;height:6px;background-color:", ";border-radius:50%;"], _colors.default.blue);
+
+// Dropdown container
+const DropdownContainer = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__DropdownContainer",
+  componentId: "sc-z6x0ne-3"
+})(["position:relative;display:inline-block;"]);
+
+// Dropdown menu - now rendered via portal with fixed positioning
+const DropdownMenu = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__DropdownMenu",
+  componentId: "sc-z6x0ne-4"
+})(["position:fixed;z-index:10000;min-width:150px;max-width:300px;background-color:", ";border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);border:1px solid ", ";overflow:hidden;"], _colors.default.white, _colors.default.lightGrey);
+const OptionsList = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__OptionsList",
+  componentId: "sc-z6x0ne-5"
+})(["max-height:300px;overflow-y:auto;"]);
+const ClearAllOption = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__ClearAllOption",
+  componentId: "sc-z6x0ne-6"
+})(["display:flex;align-items:center;padding:16px 12px;cursor:pointer;font-size:14px;font-weight:400;letter-spacing:0.6px;color:", ";border-top:1px solid ", ";transition:background-color 0.15s ease;&:hover{background-color:", ";}"], _colors.default.blue, _colors.default.lightGrey, _colors.default.grey);
+const TableFilterDropdown = _ref => {
+  let {
+      label,
+      options,
+      value = [],
+      onChange,
+      icon: CustomIcon,
+      minWidth,
+      maxWidth,
+      menuAlign = 'left',
+      menuTop = 8,
+      showClearAll = false,
+      clearAllText = 'Clear all'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [menuPosition, setMenuPosition] = (0, _react.useState)({
+    top: 0,
+    left: 0
+  });
+  const containerRef = (0, _react.useRef)(null);
+  const triggerRef = (0, _react.useRef)(null);
+  const menuRef = (0, _react.useRef)(null);
+  const hasActiveFilters = value.length > 0;
+
+  // Calculate menu position based on trigger element
+  const updateMenuPosition = (0, _react.useCallback)(() => {
+    if (!triggerRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const menuWidth = minWidth || 150;
+    let left = triggerRect.left;
+    if (menuAlign === 'right') {
+      left = triggerRect.right - menuWidth;
+    }
+
+    // Ensure menu doesn't go off-screen horizontally
+    const viewportWidth = window.innerWidth;
+    if (left + menuWidth > viewportWidth - 10) {
+      left = viewportWidth - menuWidth - 10;
+    }
+    if (left < 10) {
+      left = 10;
+    }
+    setMenuPosition({
+      top: triggerRect.bottom + menuTop,
+      left: left
+    });
+  }, [menuAlign, menuTop, minWidth]);
+
+  // Update position when menu opens and on scroll/resize
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      updateMenuPosition();
+      const handleScrollOrResize = () => {
+        updateMenuPosition();
+      };
+      window.addEventListener('scroll', handleScrollOrResize, true);
+      window.addEventListener('resize', handleScrollOrResize);
+      return () => {
+        window.removeEventListener('scroll', handleScrollOrResize, true);
+        window.removeEventListener('resize', handleScrollOrResize);
+      };
+    }
+  }, [isOpen, updateMenuPosition]);
+
+  // Close dropdown when clicking outside or pressing Escape
+  (0, _react.useEffect)(() => {
+    if (!isOpen) return;
+    const handleClickOutside = event => {
+      const clickedOutsideContainer = containerRef.current && !containerRef.current.contains(event.target);
+      const clickedOutsideMenu = menuRef.current && !menuRef.current.contains(event.target);
+      if (clickedOutsideContainer && clickedOutsideMenu) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = event => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+  const handleTriggerClick = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    setIsOpen(prev => !prev);
+  }, []);
+  const handleOptionClick = (0, _react.useCallback)((optionValue, e) => {
+    e.stopPropagation();
+    const newValue = value.includes(optionValue) ? value.filter(v => v !== optionValue) : [...value, optionValue];
+    onChange === null || onChange === void 0 || onChange(newValue);
+  }, [value, onChange]);
+  const handleClearAll = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    onChange === null || onChange === void 0 || onChange([]);
+  }, [onChange]);
+  const IconComponent = CustomIcon || _filterIcon.ReactComponent;
+
+  // Render menu in portal
+  const renderMenu = () => {
+    if (!isOpen) return null;
+    const menu = /*#__PURE__*/_react.default.createElement(DropdownMenu, {
+      ref: menuRef,
+      style: {
+        top: menuPosition.top,
+        left: menuPosition.left,
+        minWidth: minWidth || 150,
+        maxWidth: maxWidth || 300
+      }
+    }, /*#__PURE__*/_react.default.createElement(OptionsList, null, options.map(option => {
+      const isSelected = value.includes(option.value);
+      return /*#__PURE__*/_react.default.createElement(_MultiSelect.CheckboxWrapperDiv, {
+        key: option.value,
+        onClick: e => handleOptionClick(option.value, e)
+      }, /*#__PURE__*/_react.default.createElement(_MultiSelect.CheckboxDiv, {
+        isSelected: isSelected
+      }, /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_MultiSelect.OptionLabel, null, option.label));
+    })), showClearAll && hasActiveFilters && /*#__PURE__*/_react.default.createElement(ClearAllOption, {
+      onClick: handleClearAll
+    }, clearAllText));
+    return /*#__PURE__*/(0, _reactDom.createPortal)(menu, document.body);
+  };
+  return /*#__PURE__*/_react.default.createElement(DropdownContainer, _extends({
+    ref: containerRef
+  }, props), /*#__PURE__*/_react.default.createElement(TriggerContainer, {
+    ref: triggerRef,
+    onClick: handleTriggerClick,
+    "data-clickable": "true"
+  }, label && /*#__PURE__*/_react.default.createElement("span", null, label), /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(IconComponent, null), hasActiveFilters && /*#__PURE__*/_react.default.createElement(ActiveDot, null))), renderMenu());
+};
+exports.TableFilterDropdown = TableFilterDropdown;
+TableFilterDropdown.propTypes = {
+  /** Label text displayed next to the filter icon */
+  label: _propTypes.default.string,
+  /** Array of options to display */
+  options: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _propTypes.default.string.isRequired,
+    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired
+  })).isRequired,
+  /** Array of selected values */
+  value: _propTypes.default.arrayOf(_propTypes.default.string),
+  /** Callback when selection changes: (newValues) => void */
+  onChange: _propTypes.default.func,
+  /** Custom icon component (defaults to FilterIcon) */
+  icon: _propTypes.default.elementType,
+  /** Minimum width of the dropdown menu */
+  minWidth: _propTypes.default.number,
+  /** Maximum width of the dropdown menu */
+  maxWidth: _propTypes.default.number,
+  /** Alignment of the dropdown menu */
+  menuAlign: _propTypes.default.oneOf(['left', 'right']),
+  /** Top offset for the dropdown menu in pixels (default: 8) */
+  menuTop: _propTypes.default.number,
+  /** Show "Clear all" option at the bottom of the list */
+  showClearAll: _propTypes.default.bool,
+  /** Custom text for the "Clear all" option */
+  clearAllText: _propTypes.default.string
+};
+TableFilterDropdown.defaultProps = {
+  value: [],
+  onChange: () => {},
+  minWidth: 150,
+  maxWidth: 300,
+  menuAlign: 'left',
+  menuTop: 8,
+  showClearAll: false,
+  clearAllText: 'Clear all'
+};
+var _default = exports.default = TableFilterDropdown;

package/dist/components/Input/Textarea.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Textarea = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Textarea = require("./Textarea.styles");
+const _excluded = ["id", "name", "placeholder", "value", "error", "touched", "readOnly", "disabled", "rows", "minHeight", "wrapperStyle", "onChange", "onBlur", "onFocus"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const Textarea = _ref => {
+  let {
+      id,
+      name,
+      placeholder,
+      value,
+      error,
+      touched,
+      readOnly,
+      disabled,
+      rows,
+      minHeight,
+      wrapperStyle,
+      onChange,
+      onBlur,
+      onFocus
+    } = _ref,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  const handleChange = e => {
+    onChange === null || onChange === void 0 || onChange(e);
+  };
+  const handleBlur = e => {
+    onBlur === null || onBlur === void 0 || onBlur(e);
+  };
+  const handleFocus = e => {
+    onFocus === null || onFocus === void 0 || onFocus(e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Textarea.TextareaWrapper, {
+    style: wrapperStyle
+  }, /*#__PURE__*/_react.default.createElement(_Textarea.StyledTextarea, _extends({
+    id: id,
+    name: name,
+    value: value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    readOnly: readOnly,
+    placeholder: placeholder,
+    disabled: disabled,
+    rows: rows,
+    minHeight: minHeight,
+    error: error && touched
+  }, restProps)));
+};
+exports.Textarea = Textarea;
+var _default = exports.default = Textarea;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextareaWrapper = exports.StyledTextarea = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const TextareaWrapper = exports.TextareaWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Textareastyles__TextareaWrapper",
+  componentId: "sc-xnx9ic-0"
+})(["position:relative;display:block;"]);
+const StyledTextarea = exports.StyledTextarea = _styledComponents.default.textarea.withConfig({
+  displayName: "Textareastyles__StyledTextarea",
+  componentId: "sc-xnx9ic-1"
+})(["font-family:'Open sans';display:block;width:100%;min-height:", ";font-weight:400;font-size:12px;line-height:18px;letter-spacing:0.6px;padding:12px 16px;box-shadow:none;outline:0;border:1px solid ", ";border-radius:4px;color:", ";background-color:transparent;transition:border-color 0.2s;resize:vertical;&:focus,&:hover{border-color:", ";}&::placeholder{color:", ";opacity:1;text-transform:uppercase;font-weight:400;font-size:11px;letter-spacing:2px;}", " ", ""], props => props.minHeight || '100px', _theme.default.cLightGrey, _theme.default.cBlack, _theme.default.cGrey2, _theme.default.cGrey2, props => props.disabled && (0, _styledComponents.css)(["color:", ";cursor:not-allowed;&:focus,&:hover{border-color:", ";}"], _theme.default.cGrey2, _theme.default.cLightGrey), props => props.error && (0, _styledComponents.css)(["border-color:", ";&:focus,&:hover{border-color:", ";}"], _theme.default.cWarning, _theme.default.cWarning));