oolib 3.0.0 → 3.1.1

package/dist/components/DatePicker/styled.js

@@ -41,13 +41,11 @@ exports.StyledBodyWrapper = exports.StyledWeekdays = exports.StyledWeekDaysWrapp
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
 var globalVariables_1 = require("../../globalStyles/globalVariables");
+var globalStyles_1 = require("../../v2/themes/globalStyles");
 var mixins_1 = require("../../themes/mixins");
 var greyColor80 = themes_1.colors.greyColor80, greyColor5 = themes_1.colors.greyColor5, greyColor70 = themes_1.colors.greyColor70, greyColor10 = themes_1.colors.greyColor10, primaryColor100 = themes_1.colors.primaryColor100, greyColor40 = themes_1.colors.greyColor40, white = themes_1.colors.white, primaryColor10 = themes_1.colors.primaryColor10, greyColor15 = themes_1.colors.greyColor15, greyColor3 = themes_1.colors.greyColor3, greyColor100 = themes_1.colors.greyColor100;
 exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n"], ["\n  position: relative;\n  width: fit-content;\n"])));
-exports.StyledInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  background: ", ";\n  outline: none;\n  border: none;\n  width: 13rem;\n  height: 4rem;\n  color: ", ";\n\n  ", "\n  &:focus {\n    background-color: ", ";\n  }\n\n  ", "\n\n  &::placeholder {\n    color: ", ";\n  }\n"], ["\n  ", "\n  background: ", ";\n  outline: none;\n  border: none;\n  width: 13rem;\n  height: 4rem;\n  color: ", ";\n\n  ", "\n  &:focus {\n    background-color: ", ";\n  }\n\n  ", "\n\n  &::placeholder {\n    color: ", ";\n  }\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
-    var invert = _a.invert;
-    return (invert ? greyColor80 : greyColor5);
-}, function (_a) {
+exports.StyledInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  background: transparent;\n  outline: none;\n  border: none;\n  width: 13rem;\n  height: 4rem;\n  color: ", ";\n\n  ", "\n\n  &::placeholder {\n    color: ", ";\n  }\n"], ["\n  ", "\n  background: transparent;\n  outline: none;\n  border: none;\n  width: 13rem;\n  height: 4rem;\n  color: ", ";\n\n  ", "\n\n  &::placeholder {\n    color: ", ";\n  }\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
     var invert = _a.invert, disabled = _a.disabled;
     return invert
         ? disabled
@@ -58,15 +56,9 @@ exports.StyledInput = styled_components_1.default.input(templateObject_3 || (tem
             : themes_1.colors.greyColor100;
 }, function (_a) {
     var disabled = _a.disabled;
-    return (disabled ? "" : globalVariables_1.globalInputElemHover);
-}, function (_a) {
-    var invert = _a.invert, disabled = _a.disabled;
-    return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            color: ", "\n            background-color: ", ";\n            cursor: not-allowed;\n            &:hover{\n                background-color: none !important;\n            }\n    "], ["\n            color: ", "\n            background-color: ", ";\n            cursor: not-allowed;\n            &:hover{\n                background-color: none !important;\n            }\n    "])), greyColor40, greyColor15);
+    return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n      cursor: not-allowed;\n    "], ["\n      color: ", ";\n      cursor: not-allowed;\n    "])), greyColor40);
 }, greyColor40);
-exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), globalVariables_1.globalInputElemFocused);
+exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /* v2 select-box look (matches DropdownSingle): a ::before bordered box behind\n     the input \u2014 grey30 border on hover, grey80 + shadow on focus-within. The\n     border lives on THIS wrapper (input only), NOT the container, so the\n     absolutely-positioned calendar (z-index:10000) isn't trapped in this\n     stacking context. z-index:0 so the ::before's z-index:-1 sits behind the\n     input rather than the page. */\n  position: relative;\n  z-index: 0;\n  width: fit-content;\n  border-radius: 6px;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  /* v2 select-box look (matches DropdownSingle): a ::before bordered box behind\n     the input \u2014 grey30 border on hover, grey80 + shadow on focus-within. The\n     border lives on THIS wrapper (input only), NOT the container, so the\n     absolutely-positioned calendar (z-index:10000) isn't trapped in this\n     stacking context. z-index:0 so the ::before's z-index:-1 sits behind the\n     input rather than the page. */\n  position: relative;\n  z-index: 0;\n  width: fit-content;\n  border-radius: 6px;\n  ", ";\n  ", ";\n  ", ";\n"])), globalStyles_1.globalInputElemBaseBorderStyling_v2, globalStyles_1.globalInputElemHover_v2, globalStyles_1.globalInputElemFocused_v2);
 exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  z-index: 10000;\n  height: 40rem;\n  visibility: ", ";\n  \n  ", "{\n      position: absolute;\n      height: unset;\n      width: 30rem;\n      ", "\n  }\n\n"], ["\n  z-index: 10000;\n  height: 40rem;\n  visibility: ", ";\n  \n  ", "{\n      position: absolute;\n      height: unset;\n      width: 30rem;\n      ", "\n  }\n\n"])), function (_a) {
     var showCalendar = _a.showCalendar, debug = _a.debug;
     return debug ? "" : showCalendar ? "visible" : "hidden";

package/dist/components/DateTimePicker/index.js

@@ -54,7 +54,6 @@ var BlockLabel_1 = require("../../v2/components/BlockLabel");
 var TimePicker_1 = require("../TimePicker");
 var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
 var DatePicker_1 = __importDefault(require("../DatePicker"));
-var convertTo12Hour_1 = require("../TimePicker/utils/convertTo12Hour");
 /**
  * Parses an ISO string into internal { date, time } format.
  * @param {string} value - ISO string (e.g. "2025-02-24T14:30:00.000Z")
@@ -73,7 +72,13 @@ var parseISOValue = function (value) {
 var DateTimePicker = function (props) {
     var parentOnChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, passChangeHandlerOps = props.passChangeHandlerOps, invert = props.invert, disabled = props.disabled, _a = props.debug, debug = _a === void 0 ? false : _a;
     var normalized = (0, react_1.useMemo)(function () { return parseISOValue(value); }, [value]);
-    var _b = (0, react_1.useState)({ date: normalized.date, time: normalized.time && (0, convertTo12Hour_1.convertTo12Hour)(normalized.time) }), _value = _b[0], _setValue = _b[1];
+    // _value.time is kept in 24h "HH:MM:SS" (as parseISOValue emits) — the same
+    // shape TimePicker accepts (it converts to 12h for display itself) and the
+    // same shape the date-change recompute below splits. Storing 12h here (an
+    // earlier bug) made a DATE change parse "5:44 PM" as 24h → Invalid Date →
+    // toISOString() threw → the change never reached onChange (didn't save or
+    // sync to other users); it also double-converted through TimePicker.
+    var _b = (0, react_1.useState)({ date: normalized.date, time: normalized.time }), _value = _b[0], _setValue = _b[1];
     var handleOnChange = function (k, v) {
         var _a;
         var newVal = __assign(__assign({}, _value), (_a = {}, _a[k] = v, _a));
@@ -94,7 +99,7 @@ var DateTimePicker = function (props) {
     (0, react_1.useEffect)(function () {
         var n = parseISOValue(value);
         if (n.date !== _value.date || n.time !== _value.time) {
-            _setValue({ date: n.date, time: n.time && (0, convertTo12Hour_1.convertTo12Hour)(n.time) });
+            _setValue({ date: n.date, time: n.time });
         }
     }, [value]);
     return (react_1.default.createElement(react_1.default.Fragment, null,

package/dist/components/Modals/Modal/index.d.ts

@@ -27,6 +27,7 @@ export interface ModalProps {
     fitToContentHeight?: boolean;
     invert?: boolean;
     overflowVisible?: boolean;
+    hideBackdrop?: boolean;
     showActionPanel?: boolean;
     onCloseText?: string;
     onConfirm?: React.MouseEventHandler<HTMLButtonElement> | React.ReactNode;
@@ -51,6 +52,7 @@ export interface ModalProps {
  * @prop {boolean} [fitToContentHeight]: A boolean indicating whether the modal height should be adjusted based on its content. Defaults to false.
  * @prop {boolean} [invert]: A boolean indicating whether to invert the background color of the modal. Defaults to false.
  * @prop {boolean} [overflowVisible]: A boolean indicating whether the modal should render its overflow as visible. Defaults to false.
+ * @prop {boolean} [hideBackdrop]: A boolean indicating whether to make the modal's own backdrop transparent (the click-to-close layer is kept). Use when the caller renders its own backdrop behind the modal. Defaults to false.
  * @prop {boolean} [showActionPanel]: A boolean indicating whether to render the action panel. Defaults to false.
  * @prop {string} [onCloseText]: The text to be displayed in the close button. Defaults to "Close".
  * @prop {React.MouseEventHandler<HTMLButtonElement> | React.ReactNode} [onConfirm]: A callback function or node to be rendered instead of the confirm button.

package/dist/components/Modals/Modal/index.js

@@ -69,6 +69,7 @@ var Divider_1 = require("../../Divider");
  * @prop {boolean} [fitToContentHeight]: A boolean indicating whether the modal height should be adjusted based on its content. Defaults to false.
  * @prop {boolean} [invert]: A boolean indicating whether to invert the background color of the modal. Defaults to false.
  * @prop {boolean} [overflowVisible]: A boolean indicating whether the modal should render its overflow as visible. Defaults to false.
+ * @prop {boolean} [hideBackdrop]: A boolean indicating whether to make the modal's own backdrop transparent (the click-to-close layer is kept). Use when the caller renders its own backdrop behind the modal. Defaults to false.
  * @prop {boolean} [showActionPanel]: A boolean indicating whether to render the action panel. Defaults to false.
  * @prop {string} [onCloseText]: The text to be displayed in the close button. Defaults to "Close".
  * @prop {React.MouseEventHandler<HTMLButtonElement> | React.ReactNode} [onConfirm]: A callback function or node to be rendered instead of the confirm button.
@@ -81,12 +82,12 @@ var Divider_1 = require("../../Divider");
  * @return {ReactElement} The rendered modal component.
  */
 var Modal = function (_a) {
-    var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle, _d = _a.fitToContentHeight, fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.showActionPanel, showActionPanel = _e === void 0 ? false : _e, _f = _a.onCloseText, onCloseText = _f === void 0 ? "Close" : _f, onConfirm = _a.onConfirm, _g = _a.showCloseBtn, showCloseBtn = _g === void 0 ? true : _g, _h = _a.onConfirmText, onConfirmText = _h === void 0 ? "Confirm" : _h, _j = _a.showConfirmBtn, showConfirmBtn = _j === void 0 ? true : _j, _k = _a.alignActions, alignActions = _k === void 0 ? "right" : _k, _l = _a.disableHeader, disableHeader = _l === void 0 ? false : _l, _m = _a.dynamicHeaderHeight, dynamicHeaderHeight = _m === void 0 ? false : _m;
+    var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle, _d = _a.fitToContentHeight, fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.hideBackdrop, hideBackdrop = _e === void 0 ? false : _e, _f = _a.showActionPanel, showActionPanel = _f === void 0 ? false : _f, _g = _a.onCloseText, onCloseText = _g === void 0 ? "Close" : _g, onConfirm = _a.onConfirm, _h = _a.showCloseBtn, showCloseBtn = _h === void 0 ? true : _h, _j = _a.onConfirmText, onConfirmText = _j === void 0 ? "Confirm" : _j, _k = _a.showConfirmBtn, showConfirmBtn = _k === void 0 ? true : _k, _l = _a.alignActions, alignActions = _l === void 0 ? "right" : _l, _m = _a.disableHeader, disableHeader = _m === void 0 ? false : _m, _o = _a.dynamicHeaderHeight, dynamicHeaderHeight = _o === void 0 ? false : _o;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var handleClose = function () { return onClose(); };
     var initAnimPos = { marginTop: "100dvh", opacity: 0 };
     var endAnimPos = { marginTop: 0, opacity: 1 };
-    var _o = (0, react_1.useState)(endAnimPos), animPos = _o[0], setAnimPos = _o[1];
+    var _p = (0, react_1.useState)(endAnimPos), animPos = _p[0], setAnimPos = _p[1];
     (0, react_1.useEffect)(function () {
         document.body.style.overflow = "hidden";
         return function () { document.body.style.overflow = "unset"; };
@@ -116,7 +117,7 @@ var Modal = function (_a) {
                             : onConfirm,
                         showCloseBtn && react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose }, onCloseText)))))); };
     return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalLargeBg, null,
-        react_1.default.createElement(styled_1.StyledModalLargeBgColor, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
+        react_1.default.createElement(styled_1.StyledModalLargeBgColor, { "$hideBackdrop": hideBackdrop, initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
                 type: "tween",
                 ease: "easeOut",
             }, onClick: function () { return handleClose(); } }),

package/dist/components/Modals/Modal/styled.d.ts

@@ -14,7 +14,9 @@ interface StyledActionButtonsWrapperProps {
     alignActions: alignActionsType;
 }
 export declare const StyledModalLargeBg: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
-export declare const StyledModalLargeBgColor: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const StyledModalLargeBgColor: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {
+    $hideBackdrop?: boolean;
+}, never>;
 export declare const StyledModalLargeContentWrapper: import("styled-components").StyledComponent<"div", any, StyledModalLargeContentWrapperProps, never>;
 export declare const StyledModalLargeHeader: import("styled-components").StyledComponent<"header", any, {
     invert?: boolean;

package/dist/components/Modals/Modal/styled.js

@@ -45,7 +45,10 @@ var framer_motion_1 = require("framer-motion");
 var styled_components_1 = __importStar(require("styled-components"));
 var black_opacity80 = themes_1.colors.black_opacity80, white = themes_1.colors.white;
 exports.StyledModalLargeBg = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 999999999;\n  overflow-y: auto;\n  overflow-x: hidden;\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"], ["\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 999999999;\n  overflow-y: auto;\n  overflow-x: hidden;\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
-exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100dvh;\n"], ["\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100dvh;\n"])), black_opacity80);
+exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // $hideBackdrop keeps this layer (so click-outside-to-close still works) but\n  // makes it transparent \u2014 for callers that render their own backdrop behind\n  // the Modal and don't want a second tint stacked on top.\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100dvh;\n"], ["\n  // $hideBackdrop keeps this layer (so click-outside-to-close still works) but\n  // makes it transparent \u2014 for callers that render their own backdrop behind\n  // the Modal and don't want a second tint stacked on top.\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100dvh;\n"])), function (_a) {
+    var $hideBackdrop = _a.$hideBackdrop;
+    return ($hideBackdrop ? "transparent" : black_opacity80);
+});
 exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50dvh; */\n    max-height: 90dvh;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border-radius: 16px;\n    margin: 0 auto;\n  }\n"], ["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50dvh; */\n    max-height: 90dvh;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border-radius: 16px;\n    margin: 0 auto;\n  }\n"])), white, function (_a) {
     var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
     return takeFullScreenOnScroll

package/dist/components/TimePicker/index.js

@@ -104,11 +104,14 @@ var TimePicker = function (props) {
         };
         scrollTimeElementToTop();
     }, [inputValue, timeStripRef]);
-    // useEffect(() => {
-    //   if(value){
-    //     setInputValue(convertTo12Hour(value))
-    //   }
-    // }, [])
+    // Reflect external value changes — a remote collaborator's edit, or our own
+    // committed value round-tripping back. Without this, inputValue is seeded
+    // once on mount (line above) and goes stale. Typing doesn't fire here: the
+    // value only changes on blur (handleOnBlur → onParentChange), so a focused
+    // user's input is never clobbered mid-edit.
+    (0, react_1.useEffect)(function () {
+        setInputValue(value ? (0, convertTo12Hour_1.convertTo12Hour)(value) : null);
+    }, [value]);
     var handleTimeClick = function (e, item) {
         setInputValue(item);
     };

package/dist/components/TimePicker/styled.js

@@ -41,28 +41,26 @@ exports.StyledListItem = exports.StyledDropDownList = exports.StyledMotionDiv =
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
 var globalVariables_1 = require("../../globalStyles/globalVariables");
+var globalStyles_1 = require("../../v2/themes/globalStyles");
 var mixins_1 = require("../../themes/mixins");
 var framer_motion_1 = require("framer-motion");
 var greyColor80 = themes_1.colors.greyColor80, greyColor10 = themes_1.colors.greyColor10, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15, greyColor70 = themes_1.colors.greyColor70, greyColor40 = themes_1.colors.greyColor40;
-exports.StyledTimeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  ", "\n  &:focus-within {\n    background-color: ", ";\n\n    &::after {\n      width: 100%;\n    }\n\n    &:focus-within .drop-down {\n      display: block;\n    }\n  }\n\n  \n"], ["\n  position: relative;\n  ", "\n  &:focus-within {\n    background-color: ", ";\n\n    &::after {\n      width: 100%;\n    }\n\n    &:focus-within .drop-down {\n      display: block;\n    }\n  }\n\n  \n"])), globalVariables_1.globalInputElemFocused, greyColor10);
-exports.StyledTimeInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n    /* padding: 0rem 3rem; */\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 10rem;\n    height: 4rem;\n    color: ", ";\n\n    ", "\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    ", "\n\n    &:placeholder-shown {\n        width: 11.5rem;\n    }\n"], ["\n    ", "\n    /* padding: 0rem 3rem; */\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 10rem;\n    height: 4rem;\n    color: ", ";\n\n    ", "\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    ", "\n\n    &:placeholder-shown {\n        width: 11.5rem;\n    }\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
-    var invert = _a.invert;
-    return (invert ? greyColor80 : greyColor5);
+exports.StyledTimeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  /* v2 select-box look (matches DropdownSingle) \u2014 see DatePicker styled note. */\n  z-index: 0;\n  border-radius: 6px;\n  ", ";\n  ", ";\n  ", ";\n  /* preserve: focusing the input reveals the time-options dropdown */\n  &:focus-within .drop-down {\n    display: block;\n  }\n"], ["\n  position: relative;\n  /* v2 select-box look (matches DropdownSingle) \u2014 see DatePicker styled note. */\n  z-index: 0;\n  border-radius: 6px;\n  ", ";\n  ", ";\n  ", ";\n  /* preserve: focusing the input reveals the time-options dropdown */\n  &:focus-within .drop-down {\n    display: block;\n  }\n"])), globalStyles_1.globalInputElemBaseBorderStyling_v2, function (_a) {
+    var disabled = _a.disabled;
+    return !disabled && globalStyles_1.globalInputElemHover_v2;
 }, function (_a) {
+    var disabled = _a.disabled;
+    return !disabled && globalStyles_1.globalInputElemFocused_v2;
+});
+exports.StyledTimeInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n    /* padding: 0rem 3rem; */\n    background: transparent;\n    outline: none;\n    border: none;\n    width: 10rem;\n    height: 4rem;\n    color: ", ";\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    ", "\n\n    &:placeholder-shown {\n        width: 11.5rem;\n    }\n"], ["\n    ", "\n    /* padding: 0rem 3rem; */\n    background: transparent;\n    outline: none;\n    border: none;\n    width: 10rem;\n    height: 4rem;\n    color: ", ";\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    ", "\n\n    &:placeholder-shown {\n        width: 11.5rem;\n    }\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
     var invert = _a.invert, disabled = _a.disabled;
     return invert
         ? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
         : disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
 }, function (_a) {
     var disabled = _a.disabled;
-    return (disabled ? '' : globalVariables_1.globalInputElemHover);
-}, function (_a) {
-    var invert = _a.invert, disabled = _a.disabled;
-    return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            color: ", "\n            background-color: ", ";\n            cursor: not-allowed;\n            &:hover{\n                background-color: none !important;\n            }\n    "], ["\n            color: ", "\n            background-color: ", ";\n            cursor: not-allowed;\n            &:hover{\n                background-color: none !important;\n            }\n    "])), greyColor40, greyColor15);
-}, greyColor40, (0, mixins_1.transition)('background-color', 'width'));
+    return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            color: ", ";\n            cursor: not-allowed;\n    "], ["\n            color: ", ";\n            cursor: not-allowed;\n    "])), greyColor40);
+}, greyColor40, (0, mixins_1.transition)('width'));
 exports.StyledDropDown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", "\n    position: absolute;\n    display: none;\n    left: 0;\n    overflow-y: scroll;\n    /* scroll-behavior: smooth; */\n    height: 20rem;\n    width: 15rem;\n    z-index: 1;\n"], ["\n    ", "\n    position: absolute;\n    display: none;\n    left: 0;\n    overflow-y: scroll;\n    /* scroll-behavior: smooth; */\n    height: 20rem;\n    width: 15rem;\n    z-index: 1;\n"])), globalVariables_1.globalLightboxStyle);
 exports.StyledMotionDiv = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\n"], ["\n\n"])));
 exports.StyledDropDownList = styled_components_1.default.ul(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    list-style: none;\n    padding-left: 0;\n\n    &:hover{\n        .drop-list{\n            background-color: inherit;\n        }\n    }\n"], ["\n    list-style: none;\n    padding-left: 0;\n\n    &:hover{\n        .drop-list{\n            background-color: inherit;\n        }\n    }\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",