@salutejs/plasma-new-hope 0.340.0-canary.2322.19132961849.0 → 0.340.0-canary.2322.19259276297.0

package/styled-components/es/components/DateTimePicker/ui/DateShortcut/DateShortcutList.js

@@ -0,0 +1,38 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+import React from "react";
+import cls from "classnames";
+import { classes } from "../../DateTimePicker.tokens";
+import { StyledSeparator } from "../Popover/Popover.styles";
+import { ShortcutItem, ShortcutList, ShortcutsWrapper, ShortcutTitle, ShortcutTitleWrapper, StyledCell } from "./DateShortcutList.styles";
+export var DateShortcutList = function(param) {
+    var items = param.items, calendarContainerHeight = param.calendarContainerHeight, dateShortcutsPlacement = param.dateShortcutsPlacement, dateShortcutsWidth = param.dateShortcutsWidth, setShortcutDate = param.setShortcutDate;
+    return /*#__PURE__*/ React.createElement(ShortcutsWrapper, {
+        innerHeight: calendarContainerHeight,
+        dateShortcutsPlacement: dateShortcutsPlacement
+    }, /*#__PURE__*/ React.createElement(StyledSeparator, null), /*#__PURE__*/ React.createElement(ShortcutList, {
+        width: dateShortcutsWidth
+    }, items.map(function(item) {
+        return /*#__PURE__*/ React.createElement(ShortcutItem, {
+            className: cls(_define_property({}, classes.shortcutItemDisabled, item.disabled)),
+            onClick: function() {
+                return setShortcutDate(item.value);
+            }
+        }, /*#__PURE__*/ React.createElement(StyledCell, {
+            contentLeft: item.contentLeft,
+            contentRight: item.contentRight,
+            stretching: "filled"
+        }, /*#__PURE__*/ React.createElement(ShortcutTitleWrapper, null, /*#__PURE__*/ React.createElement(ShortcutTitle, null, item.label))));
+    })));
+};

package/styled-components/es/components/DateTimePicker/ui/DateShortcut/DateShortcutList.styles.js

@@ -0,0 +1,97 @@
+import styled from "styled-components";
+import { addFocus, applyEllipsis } from "../../../../mixins";
+import { cellTokens, cellConfig } from "../../../Cell";
+import { component, mergeConfig } from "../../../../engines";
+import { classes, tokens } from "../../DateTimePicker.tokens";
+var mergedCellConfig = mergeConfig(cellConfig);
+var Cell = component(mergedCellConfig);
+export var ShortcutsWrapper = styled.div.withConfig({
+    displayName: "DateShortcutList.styles__ShortcutsWrapper",
+    componentId: "sc-235f7cb0-0"
+})([
+    "order:",
+    ";display:flex;flex-direction:",
+    ";gap:var(",
+    ");flex-shrink:",
+    ";overflow-y:hidden;height:",
+    ";"
+], function(param) {
+    var dateShortcutsPlacement = param.dateShortcutsPlacement;
+    return dateShortcutsPlacement === 'left' ? 'unset' : '999';
+}, function(param) {
+    var dateShortcutsPlacement = param.dateShortcutsPlacement;
+    return dateShortcutsPlacement === 'left' ? 'row-reverse' : 'row';
+}, tokens.popoverGap, function(param) {
+    var innerWidth = param.innerWidth;
+    return innerWidth && innerWidth !== '0' ? '2' : '0';
+}, function(param) {
+    var innerHeight = param.innerHeight;
+    return innerHeight && innerHeight !== '0' ? "calc(".concat(innerHeight, " - var(").concat(tokens.popoverVerticalPadding, "))") : "var(".concat(tokens.calendarHeight, ")");
+});
+export var ShortcutList = styled.ul.withConfig({
+    displayName: "DateShortcutList.styles__ShortcutList",
+    componentId: "sc-235f7cb0-1"
+})([
+    "width:",
+    ";list-style:none;margin:0;padding:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;::-webkit-scrollbar{display:none;}"
+], function(param) {
+    var width = param.width;
+    return width || 'fit-content';
+});
+export var ShortcutItem = styled.li.withConfig({
+    displayName: "DateShortcutList.styles__ShortcutItem",
+    componentId: "sc-235f7cb0-2"
+})([
+    "padding:var(",
+    ");border-radius:var(",
+    ");&:hover:not(.",
+    "){cursor:pointer;background:var(",
+    ");}&.",
+    "{opacity:",
+    ";cursor:not-allowed;}:focus{outline:none;}",
+    ";"
+], tokens.shortcutPadding, tokens.shortcutBorderRadius, classes.shortcutItemDisabled, tokens.shortcutBackgroundHover, classes.shortcutItemDisabled, tokens.disabledOpacity, addFocus({
+    outlineSize: '0.063rem',
+    outlineOffset: '0.063rem',
+    outlineColor: "var(".concat(tokens.outlineFocusColor, ")"),
+    outlineRadius: "var(".concat(tokens.shortcutBorderRadius, ")"),
+    hasTransition: false,
+    customFocusRules: "\n                &.focus-visible:focus,\n                &[data-focus-visible-added] {\n                    &::before {\n                        z-index: 1;\n                        outline: none;\n                        box-shadow: 0 0 0 0.063rem var(".concat(tokens.outlineFocusColor, ");\n                    }\n                }\n            ")
+}));
+export var StyledCell = styled(Cell).withConfig({
+    displayName: "DateShortcutList.styles__StyledCell",
+    componentId: "sc-235f7cb0-3"
+})([
+    "",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");"
+], cellTokens.cellTitleColor, tokens.shortcutColor, cellTokens.cellPadding, tokens.shortcutPadding, cellTokens.cellPaddingContent, tokens.shortcutPaddingContent, cellTokens.cellPaddingLeftContent, tokens.shortcutPaddingLeftContent, cellTokens.cellPaddingRightContent, tokens.shortcutPaddingRightContent, cellTokens.cellGap, tokens.shortcutGap);
+export var ShortcutTitleWrapper = styled.div.withConfig({
+    displayName: "DateShortcutList.styles__ShortcutTitleWrapper",
+    componentId: "sc-235f7cb0-4"
+})([
+    "display:grid;"
+]);
+export var ShortcutTitle = styled.span.withConfig({
+    displayName: "DateShortcutList.styles__ShortcutTitle",
+    componentId: "sc-235f7cb0-5"
+})([
+    "font-family:var(",
+    ");font-size:var(",
+    ");font-style:var(",
+    ");font-weight:var(",
+    ");letter-spacing:var(",
+    ");line-height:var(",
+    ");",
+    ""
+], tokens.shortcutFontFamily, tokens.shortcutFontSize, tokens.shortcutFontStyle, tokens.shortcutFontWeight, tokens.shortcutLetterSpacing, tokens.shortcutLineHeight, applyEllipsis());

package/styled-components/es/components/DateTimePicker/ui/Input/Input.js

@@ -0,0 +1,111 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import React, { forwardRef } from "react";
+import cls from "classnames";
+import { StyledInput } from "./Input.styles";
+export var Input = /*#__PURE__*/ forwardRef(function(_param, ref) {
+    var value = _param.value, readOnly = _param.readOnly, disabled = _param.disabled, placeholder = _param.placeholder, contentLeft = _param.contentLeft, contentRight = _param.contentRight, textBefore = _param.textBefore, textAfter = _param.textAfter, required = _param.required, requiredPlacement = _param.requiredPlacement, hasRequiredIndicator = _param.hasRequiredIndicator, label = _param.label, labelPlacement = _param.labelPlacement, keepPlaceholder = _param.keepPlaceholder, errorClass = _param.errorClass, successClass = _param.successClass, onChangeValue = _param.onChangeValue, onSearch = _param.onSearch, onFocus = _param.onFocus, onBlur = _param.onBlur, onKeyDown = _param.onKeyDown, rest = _object_without_properties(_param, [
+        "value",
+        "readOnly",
+        "disabled",
+        "placeholder",
+        "contentLeft",
+        "contentRight",
+        "textBefore",
+        "textAfter",
+        "required",
+        "requiredPlacement",
+        "hasRequiredIndicator",
+        "label",
+        "labelPlacement",
+        "keepPlaceholder",
+        "errorClass",
+        "successClass",
+        "onChangeValue",
+        "onSearch",
+        "onFocus",
+        "onBlur",
+        "onKeyDown"
+    ]);
+    var handleSearch = function(searchValue, event) {
+        if (onSearch) {
+            onSearch(event, searchValue);
+        }
+    };
+    return /*#__PURE__*/ React.createElement(StyledInput, _object_spread({
+        ref: ref,
+        className: cls(errorClass, successClass),
+        value: value,
+        readOnly: readOnly,
+        disabled: disabled,
+        placeholder: placeholder,
+        contentLeft: contentLeft,
+        contentRight: contentRight,
+        textBefore: textBefore,
+        textAfter: textAfter,
+        onChange: onChangeValue,
+        onSearch: handleSearch,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onKeyDown: onKeyDown,
+        required: required,
+        requiredPlacement: requiredPlacement,
+        hasRequiredIndicator: hasRequiredIndicator,
+        label: label,
+        labelPlacement: labelPlacement,
+        keepPlaceholder: keepPlaceholder
+    }, rest));
+});

package/styled-components/es/components/DateTimePicker/ui/Input/Input.styles.js

@@ -0,0 +1,162 @@
+import styled from "styled-components";
+import { component, mergeConfig } from "../../../../engines";
+import { textFieldConfig, textFieldTokens } from "../../../TextField";
+import { classes, tokens } from "../../DateTimePicker.tokens";
+var mergedTextFieldConfig = mergeConfig(textFieldConfig);
+var TextField = component(mergedTextFieldConfig);
+// NOTE: переопределение токенов TextField
+export var StyledInput = styled(TextField).withConfig({
+    displayName: "Input.styles__StyledInput",
+    componentId: "sc-566fa015-0"
+})([
+    "width:100%;",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ",var(",
+    "));",
+    ":var(",
+    ",var(",
+    "));",
+    ":var(",
+    ",var(",
+    "));",
+    ":var(",
+    ");&.",
+    "{",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");}&.",
+    "{",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");}"
+], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.placeholderColorFocus, tokens.textFieldPlaceholderColorFocus, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.borderColor, tokens.textFieldBorderColor, textFieldTokens.borderColorHover, tokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.readOnlyOpacity, tokens.textFieldReadOnlyOpacity, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.labelInnerPadding, tokens.labelInnerPadding, textFieldTokens.contentLabelInnerPadding, tokens.contentLabelInnerPadding, textFieldTokens.labelOffset, tokens.labelOffset, textFieldTokens.labelFontFamily, tokens.labelFontFamily, textFieldTokens.labelFontStyle, tokens.labelFontStyle, textFieldTokens.labelFontSize, tokens.labelFontSize, textFieldTokens.labelFontWeight, tokens.labelFontWeight, textFieldTokens.labelLetterSpacing, tokens.labelLetterSpacing, textFieldTokens.labelLineHeight, tokens.labelLineHeight, textFieldTokens.labelInnerFontFamily, tokens.labelInnerFontFamily, textFieldTokens.labelInnerFontSize, tokens.labelInnerFontSize, textFieldTokens.labelInnerFontStyle, tokens.labelInnerFontStyle, textFieldTokens.labelInnerFontWeight, tokens.labelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, tokens.labelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, tokens.labelInnerLineHeight, textFieldTokens.labelColorReadOnly, tokens.labelColorReadOnly, textFieldTokens.indicatorColor, tokens.indicatorColor, textFieldTokens.indicatorSizeInner, tokens.indicatorSize, textFieldTokens.indicatorSizeOuter, tokens.indicatorSizeOuter, textFieldTokens.indicatorLabelPlacementInner, tokens.indicatorPlacement, textFieldTokens.indicatorLabelPlacementOuter, tokens.indicatorOuterPlacement, textFieldTokens.indicatorLabelPlacementInnerRight, tokens.indicatorPlacementRight, textFieldTokens.indicatorLabelPlacementOuterRight, tokens.indicatorOuterPlacementRight, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, textFieldTokens.contentSlotColor, tokens.textFieldContentSlotColor, tokens.textFieldColor, textFieldTokens.contentSlotRightColor, tokens.textFieldContentRightSlotColor, textFieldTokens.contentSlotColor, textFieldTokens.contentSlotRightColorHover, tokens.textFieldContentRightSlotColorHover, textFieldTokens.contentSlotRightColor, textFieldTokens.contentSlotRightOpacityReadOnly, tokens.textFieldContentSlotRightOpacityReadOnly, classes.error, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.success, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);

package/styled-components/es/components/DateTimePicker/ui/Popover/Popover.js

@@ -0,0 +1,102 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import React, { forwardRef } from "react";
+import { getPlacements, getSizeValueFromProp } from "../../../../utils";
+import { StyledPopover } from "./Popover.styles";
+export var Popover = /*#__PURE__*/ forwardRef(function(_param, ref) {
+    var children = _param.children, placement = _param.placement, calendarContainerWidth = _param.calendarContainerWidth, calendarContainerHeight = _param.calendarContainerHeight, rest = _object_without_properties(_param, [
+        "children",
+        "placement",
+        "calendarContainerWidth",
+        "calendarContainerHeight"
+    ]);
+    var calendarContainerWidthValue = calendarContainerWidth ? getSizeValueFromProp(calendarContainerWidth, 'rem') : undefined;
+    var calendarContainerHeightValue = calendarContainerHeight ? getSizeValueFromProp(calendarContainerHeight, 'rem') : undefined;
+    return /*#__PURE__*/ React.createElement(StyledPopover, _object_spread_props(_object_spread({
+        ref: ref
+    }, rest), {
+        innerWidth: calendarContainerWidthValue,
+        innerHeight: calendarContainerHeightValue,
+        placement: getPlacements(placement, false),
+        trigger: "click",
+        isFocusTrapped: false,
+        preventOverflow: false
+    }), children);
+});

package/styled-components/es/components/DateTimePicker/ui/Popover/Popover.styles.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import { component, mergeConfig } from "../../../../engines";
+import { popoverConfig } from "../../../Popover";
+import { classes, tokens } from "../../DateTimePicker.tokens";
+var mergedPopoverConfig = mergeConfig(popoverConfig);
+var Popover = component(mergedPopoverConfig);
+export var StyledPopover = styled(Popover).withConfig({
+    displayName: "Popover.styles__StyledPopover",
+    componentId: "sc-c802b7a0-0"
+})([
+    ".",
+    "{box-sizing:border-box;display:flex;gap:var(",
+    ");border-radius:var(",
+    ");padding:var(",
+    ");background:var(",
+    ");box-shadow:var(",
+    ");overflow:hidden;width:",
+    ";height:",
+    ";}"
+], classes.root, tokens.popoverGap, tokens.popoverBorderRadius, tokens.popoverPadding, tokens.popoverBackgroundColor, tokens.popoverShadow, function(param) {
+    var innerWidth = param.innerWidth;
+    return innerWidth || 'fit-content';
+}, function(param) {
+    var innerHeight = param.innerHeight;
+    return innerHeight || 'fit-content';
+});
+export var StyledSeparator = styled.div.withConfig({
+    displayName: "Popover.styles__StyledSeparator",
+    componentId: "sc-c802b7a0-1"
+})([
+    "background-color:var(",
+    ");min-width:0.063rem;"
+], tokens.popoverSeparatorBackground);

package/styled-components/es/components/DateTimePicker/ui/TimeGrid/TimeGrid.js

@@ -0,0 +1,72 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import React from "react";
+import { getSizeValueFromProp } from "../../../../utils";
+import { StyledTimeGrid } from "./TimeGrid.styles";
+export var TimeGrid = function(_param) {
+    var columns = _param.columns, calendarContainerWidth = _param.calendarContainerWidth, calendarContainerHeight = _param.calendarContainerHeight, rest = _object_without_properties(_param, [
+        "columns",
+        "calendarContainerWidth",
+        "calendarContainerHeight"
+    ]);
+    var calendarContainerWidthValue = calendarContainerWidth ? getSizeValueFromProp(calendarContainerWidth, 'rem') : undefined;
+    var calendarContainerHeightValue = calendarContainerHeight ? getSizeValueFromProp(calendarContainerHeight, 'rem') : undefined;
+    return /*#__PURE__*/ React.createElement(StyledTimeGrid, _object_spread({
+        columns: columns,
+        innerWidth: calendarContainerWidthValue,
+        innerHeight: calendarContainerHeightValue
+    }, rest));
+};

package/styled-components/es/components/DateTimePicker/ui/TimeGrid/TimeGrid.styles.js

@@ -0,0 +1,54 @@
+import styled from "styled-components";
+import { timePickerGridConfig, timePickerGridTokens } from "../../../TimePickerGrid";
+import { component, mergeConfig } from "../../../../engines";
+import { tokens } from "../../DateTimePicker.tokens";
+var mergedTimePickerGrid = mergeConfig(timePickerGridConfig);
+var TimePickerGrid = component(mergedTimePickerGrid);
+export var StyledTimeGrid = styled(TimePickerGrid).withConfig({
+    displayName: "TimeGrid.styles__StyledTimeGrid",
+    componentId: "sc-1a280a0d-0"
+})([
+    "flex-shrink:2;",
+    ":",
+    ";",
+    ":",
+    ";",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");"
+], timePickerGridTokens.timePickerGridWidth, function(param) {
+    var innerWidth = param.innerWidth, columns = param.columns;
+    return innerWidth && innerWidth !== '0' ? '100%' : "calc(var(".concat(tokens.timePickerColumnWidth, ") * ").concat(columns, " + var(").concat(tokens.timePickerColumnGap, ") * ").concat(columns - 1, ")");
+}, timePickerGridTokens.columnHeight, function(param) {
+    var innerHeight = param.innerHeight;
+    return innerHeight && innerHeight !== '0' ? "calc(".concat(innerHeight, " - var(").concat(tokens.popoverVerticalPadding, "))") : "var(".concat(tokens.timePickerColumnHeight, ")");
+}, timePickerGridTokens.itemHeight, tokens.timePickerItemHeight, timePickerGridTokens.itemBorderRadius, tokens.timePickerItemBorderRadius, timePickerGridTokens.itemPadding, tokens.timePickerItemPadding, timePickerGridTokens.itemBackgroundHover, tokens.timePickerItemBackgroundHover, timePickerGridTokens.itemBackgroundActive, tokens.timePickerItemBackgroundActive, timePickerGridTokens.itemFontFamily, tokens.timePickerItemFontFamily, timePickerGridTokens.itemFontSize, tokens.timePickerItemFontSize, timePickerGridTokens.itemFontStyle, tokens.timePickerItemFontStyle, timePickerGridTokens.itemFontWeight, tokens.timePickerItemFontWeight, timePickerGridTokens.itemLetterSpacing, tokens.timePickerItemLetterSpacing, timePickerGridTokens.itemLineHeight, tokens.timePickerItemLineHeight, timePickerGridTokens.scrollbarWidth, tokens.timePickerScrollbarWidth, timePickerGridTokens.scrollbarColor, tokens.timePickerScrollbarColor, timePickerGridTokens.scrollbarTrackColor, tokens.timePickerScrollbarTrackColor, timePickerGridTokens.scrollbarMargin, tokens.timePickerScrollbarMargin, timePickerGridTokens.disabledOpacity, tokens.disabledOpacity);