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

package/dist/components/Footer/FooterLayout.js

@@ -10,7 +10,7 @@ var _FooterMenu = _interopRequireDefault(require("./FooterMenu"));
 var _Newsletter = _interopRequireDefault(require("../Newsletter/Newsletter"));
 var _Footer = _interopRequireDefault(require("./Footer"));
 var _globalVariables = require("../../constants/globalVariables");
-const _excluded = ["withNewsLetter", "withFooterMenu", "color", "jobOpeningsNumber", "lemonWayLogo", "dropdownCollapsed"];
+const _excluded = ["withNewsLetter", "withFooterMenu", "color", "jobOpeningsNumber", "lemonWayLogo", "dropdownCollapsed", "footnotes", "footnotesTitle"];
 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; }
@@ -22,13 +22,17 @@ function FooterLayout(_ref) {
       color = 'red',
       jobOpeningsNumber = 0,
       lemonWayLogo,
-      dropdownCollapsed
+      dropdownCollapsed,
+      footnotes,
+      footnotesTitle
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, withFooterMenu && /*#__PURE__*/_react.default.createElement(_FooterMenu.default, {
     groups: footerGroups,
     jobOpeningsNumber: jobOpeningsNumber,
-    dropdownCollapsed: dropdownCollapsed
+    dropdownCollapsed: dropdownCollapsed,
+    footnotes: footnotes,
+    footnotesTitle: footnotesTitle
   }), withNewsLetter && /*#__PURE__*/_react.default.createElement(_Newsletter.default, null), /*#__PURE__*/_react.default.createElement(_Footer.default, _extends({
     color: color,
     lemonwayLogo: lemonWayLogo
@@ -40,7 +44,12 @@ FooterLayout.propTypes = {
   color: _propTypes.default.oneOf(['primary', 'red']),
   jobOpeningsNumber: _propTypes.default.number,
   lemonwayLogo: _propTypes.default.string,
-  dropdownCollapsed: _propTypes.default.bool
+  dropdownCollapsed: _propTypes.default.bool,
+  footnotesTitle: _propTypes.default.string,
+  footnotes: _propTypes.default.arrayOf(_propTypes.default.shape({
+    number: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    description: _propTypes.default.string
+  }))
 };
 var _default = exports.default = FooterLayout;
 const footerGroups = exports.footerGroups = [{

package/dist/components/Footer/FooterMenu.js

@@ -78,9 +78,12 @@ const FooterMenu = _ref2 => {
   let {
     groups,
     jobOpeningsNumber = 0,
-    dropdownCollapsed
+    dropdownCollapsed,
+    footnotes,
+    footnotesTitle = 'Disclosures'
   } = _ref2;
   const isMobile = (0, _customHooks.useMobileView)(_rwd.sizes.MLarge);
+  const hasFootnotes = Array.isArray(footnotes) && footnotes.length > 0;
 
   // "New to STOKR" needs to be open by default
   const [activeGroups, setactiveGroups] = _react.default.useState(() => {
@@ -137,10 +140,23 @@ const FooterMenu = _ref2 => {
     style: {
       marginLeft: '4px'
     }
-  }, jobOpeningsNumber))))))))));
+  }, jobOpeningsNumber))))))))), hasFootnotes && /*#__PURE__*/_react.default.createElement(_FooterMenu.Footnotes, null, /*#__PURE__*/_react.default.createElement(_FooterMenu.FootnotesText, null, footnotesTitle), footnotes.map((note, index) => {
+    var _note$number;
+    return /*#__PURE__*/_react.default.createElement(_FooterMenu.FootnotesItem, {
+      key: "".concat(note.number || index, "-").concat(note.description || 'note')
+    }, /*#__PURE__*/_react.default.createElement(_FooterMenu.FootnotesText, {
+      isNumber: true
+    }, (_note$number = note.number) !== null && _note$number !== void 0 ? _note$number : index + 1), /*#__PURE__*/_react.default.createElement(_FooterMenu.FootnotesText, null, note.description));
+  })));
 };
 FooterMenu.propTypes = {
   groups: _propTypes.default.arrayOf(Object).isRequired,
-  jobOpeningsNumber: _propTypes.default.number
+  jobOpeningsNumber: _propTypes.default.number,
+  dropdownCollapsed: _propTypes.default.bool,
+  footnotesTitle: _propTypes.default.string,
+  footnotes: _propTypes.default.arrayOf(_propTypes.default.shape({
+    number: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    description: _propTypes.default.string
+  }))
 };
 var _default = exports.default = FooterMenu;

package/dist/components/Footer/FooterMenu.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleContainer = exports.Title = exports.SocialLink = exports.Link = exports.Items = exports.Item = exports.HiringTotalNumber = exports.Groups = exports.Group = exports.Container = exports.ArrowDown = void 0;
+exports.TitleContainer = exports.Title = exports.SocialLink = exports.Link = exports.Items = exports.Item = exports.HiringTotalNumber = exports.Groups = exports.Group = exports.FootnotesText = exports.FootnotesItem = exports.Footnotes = exports.Container = exports.ArrowDown = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _rwd = _interopRequireDefault(require("../../styles/rwd"));
@@ -54,4 +54,16 @@ const ArrowDown = exports.ArrowDown = _styledComponents.default.i.attrs({
 }).withConfig({
   displayName: "FooterMenustyles__ArrowDown",
   componentId: "sc-40ddqf-10"
-})(["&&&{top:50%;right:0;transition:0.3s transform;transform:rotate(0);text-align:center;font-size:16px;line-height:16px;height:16px;margin-top:-8px;", "}", ""], props => props.isOpened && "\n      transform: rotate(180deg);\n    ", props => !props.displayAlways && "\n  @media screen and (min-width: 992px) {\n    display: none;\n  }\n  ");
+})(["&&&{top:50%;right:0;transition:0.3s transform;transform:rotate(0);text-align:center;font-size:16px;line-height:16px;height:16px;margin-top:-8px;", "}", ""], props => props.isOpened && "\n      transform: rotate(180deg);\n    ", props => !props.displayAlways && "\n  @media screen and (min-width: 992px) {\n    display: none;\n  }\n  ");
+const Footnotes = exports.Footnotes = _styledComponents.default.div.withConfig({
+  displayName: "FooterMenustyles__Footnotes",
+  componentId: "sc-40ddqf-11"
+})(["padding:0px 48px 40px;display:flex;flex-direction:column;gap:6px;@media screen and (min-width:992px){padding:0px 65px 48px;}"]);
+const FootnotesText = exports.FootnotesText = _styledComponents.default.div.withConfig({
+  displayName: "FooterMenustyles__FootnotesText",
+  componentId: "sc-40ddqf-12"
+})(["font-family:'Open Sans';font-weight:300;font-size:11px;line-height:16px;letter-spacing:0.4px;color:", ";", ""], _theme.default.cBlack, props => props.isNumber && "\n      font-size: 9px;\n\n  ");
+const FootnotesItem = exports.FootnotesItem = _styledComponents.default.div.withConfig({
+  displayName: "FooterMenustyles__FootnotesItem",
+  componentId: "sc-40ddqf-13"
+})(["display:flex;gap:6px;"]);

package/dist/components/Header/Header.styles.js

@@ -23,7 +23,7 @@ const StyledSubMenu = exports.StyledSubMenu = _styledComponents.default.div.with
 const StyledHeader = exports.StyledHeader = _styledComponents.default.header.withConfig({
   displayName: "Headerstyles__StyledHeader",
   componentId: "sc-hifrdy-1"
-})(["z-index:1000;position:relative;color:", ";border-bottom:1px solid rgb(237,237,237);", ""], _colors.default.black, _rwd.default.MLarge(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: ", "px;\n    background-color: ", ";\n    box-shadow: inset 0 -1px 0 0 ", ";\n\n    ", "\n  "])), _spacing.default.headerHeight, _colors.default.white, _colors.default.lightGrey, props => props.noFixedPosition && "\n      position:initial;\n    "));
+})(["z-index:1000;position:relative;color:", ";border-bottom:1px solid rgb(237,237,237);", ""], _colors.default.black, _rwd.default.MLarge(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: ", "px;\n    background-color: ", ";\n    box-shadow: inset 0 -1px 0 0 ", ";\n\n    /* Compensate for scrollbar when modal is open */\n    padding-right: var(--scrollbar-compensation, 0px);\n\n    ", "\n  "])), _spacing.default.headerHeight, _colors.default.white, _colors.default.lightGrey, props => props.noFixedPosition && "\n      position:initial;\n    "));
 const HeaderInner = exports.HeaderInner = _styledComponents.default.div.withConfig({
   displayName: "Headerstyles__HeaderInner",
   componentId: "sc-hifrdy-2"

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;