@smg-automotive/components 25.10.0-migrate-discrete-slider.1 → 25.10.0-migrate-topListingBadge-component.2

package/dist/cjs/index.js

@@ -805,56 +805,6 @@ var switchRecipe = react$1.defineSlotRecipe({
     },
 });
 
-var sliderSlotRecipe = react$1.defineSlotRecipe({
-    className: 'chakra-slider',
-    slots: ['root', 'control', 'track', 'range', 'markerGroup', 'thumb'],
-    base: {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            fontSize: 'base',
-            '--slider-marker-inset': '4px',
-            '--slider-marker-track': '5px',
-            '--slider-thumb-border': '1px',
-            '--slider-thumb-boxShadow': '0 0 0 8px #2988E14D',
-        },
-        control: {
-            display: 'inline-flex',
-        },
-        track: {
-            flex: '1',
-            height: 'var(--slider-marker-track)',
-            bg: 'gray.300',
-            borderRadius: 'full',
-        },
-        range: {
-            height: 'var(--slider-marker-inset)',
-            bg: 'gray.800',
-            borderRadius: 'full',
-        },
-        markerGroup: {
-            position: 'absolute!',
-            top: '2xl',
-            insetInline: 'var(--slider-marker-inset)',
-        },
-        thumb: {
-            width: 'sm',
-            height: 'sm',
-            borderRadius: 'full',
-            borderWidth: 'var(--slider-thumb-border)',
-            borderColor: 'gray.400',
-            backgroundColor: 'white',
-            translate: '0 -40%',
-            _hover: {
-                cursor: 'pointer',
-            },
-            _active: {
-                boxShadow: 'var(--slider-thumb-boxShadow)',
-            },
-        },
-    },
-});
-
 var simpleHeaderRecipe = react$1.defineSlotRecipe({
     className: 'chakra-simple-header',
     slots: ['header', 'mainContainer', 'title', 'iconWrapper'],
@@ -1433,66 +1383,6 @@ var numberInputRecipe = react$1.defineSlotRecipe({
     },
 });
 
-var maximumScrollbarWidth = 20;
-var content = react$1.defineStyle({
-    '--max-width': "calc(100vw - ".concat(maximumScrollbarWidth, "px)"),
-    bg: 'white',
-    boxShadow: 'sm',
-    color: 'inherit',
-    minW: '4xl',
-    maxW: 'var(--max-width)',
-    py: 'xxs',
-    zIndex: 'dropdown',
-    borderRadius: 'sm',
-    border: '1px',
-    borderColor: 'gray.200',
-    cursor: 'pointer',
-    _focusVisible: {
-        outline: 'none',
-    },
-});
-var item = react$1.defineStyle({
-    paddingY: 'md',
-    paddingX: 'lg',
-    cursor: 'pointer',
-    _focus: {
-        bg: 'gray.100',
-    },
-    _focusVisible: {
-        outline: 'none',
-    },
-    _active: {
-        bg: 'blue.100',
-    },
-    _expanded: {
-        bg: 'gray.100',
-    },
-    _hover: {
-        bg: 'gray.100',
-    },
-    _disabled: {
-        opacity: '40',
-        cursor: 'notAllowed',
-    },
-});
-var trigger = react$1.defineStyle({
-    display: 'inline-flex',
-    padding: '0',
-    cursor: 'pointer',
-    _focusVisible: {
-        outline: 'none',
-    },
-});
-var menuRecipe = react$1.defineSlotRecipe({
-    slots: ['content', 'item', 'trigger'],
-    className: 'chakra-menu',
-    base: {
-        content: content,
-        item: item,
-        trigger: trigger,
-    },
-});
-
 var markedTextRecipe = react$1.defineSlotRecipe({
     className: 'chakra-marked-text',
     slots: ['container', 'text', 'mark'],
@@ -2324,9 +2214,7 @@ var slotRecipes = {
     popoverFilter: popoverFilterRecipe,
     numberInput: numberInputRecipe,
     radio: radioRecipe,
-    slider: sliderSlotRecipe,
     pagination: paginationRecipe,
-    menu: menuRecipe,
 };
 
 var textareaRecipe = react$1.defineRecipe({
@@ -6601,27 +6489,6 @@ var Chip = function (_a) {
 };
 Chip.displayName = 'Chip';
 
-var Menu = function (_a) {
-    var title = _a.title, items = _a.items, _b = _a.fontWeightTitle, fontWeightTitle = _b === void 0 ? 'regular' : _b, _c = _a.offset, offset = _c === void 0 ? [8, 0] : _c, menuColor = _a.menuColor, _d = _a.showChevron, showChevron = _d === void 0 ? true : _d, icon = _a.icon, _e = _a.iconSpacing, iconSpacing = _e === void 0 ? 'sm' : _e, placement = _a.placement;
-    var recipe = react$1.useSlotRecipe({ key: 'menu' });
-    var styles = recipe();
-    var _f = offset[0], mainAxis = _f === void 0 ? 0 : _f, _g = offset[1], crossAxis = _g === void 0 ? 0 : _g;
-    return (React.createElement(react$1.Menu.Root, { positioning: { placement: placement, offset: { mainAxis: mainAxis, crossAxis: crossAxis } } },
-        React.createElement(react$1.Menu.Context, null, function (_a) {
-            var open = _a.open;
-            return (React.createElement(react$1.Menu.Trigger, { css: styles.trigger, gap: iconSpacing, fontWeight: fontWeightTitle, color: open ? 'blue.700' : menuColor },
-                icon,
-                title,
-                showChevron ? (React.createElement(ChevronDownSmallIcon, { transition: "transform", transform: open ? 'rotate(180deg)' : 'rotate(0deg)' })) : null));
-        }),
-        React.createElement(react$1.Portal, null,
-            React.createElement(react$1.Menu.Positioner, null,
-                React.createElement(react$1.Menu.Content, { css: styles.content }, items.map(function (_a) {
-                    var onClick = _a.onClick, text = _a.text, value = _a.value;
-                    return (React.createElement(react$1.Menu.Item, __assign({ key: "menuItem-".concat(value), value: value, onSelect: onClick, css: styles.item }, (menuColor && { color: menuColor })), text));
-                }))))));
-};
-
 var MobileOnlyAccordion = function (props) {
     var children = props.children, restProps = __rest(props, ["children"]);
     return React.createElement(Accordion, __assign({}, restProps), children);
@@ -7913,82 +7780,6 @@ var TopVehicleSharedBadge = function (_a) {
         aspectRatio ? (React.createElement(AspectRatio, { ratio: aspectRatio }, children)) : (children)));
 };
 
-var emptyItemOffset = 0;
-var firstItemOffset = 1;
-var getItemOffset = function (applyIndentation) {
-    return applyIndentation ? firstItemOffset : emptyItemOffset;
-};
-var getSliderStepValue = function (marks, applyIndentation, value) {
-    var selectedMarkIndex = marks.findIndex(function (mark) { return mark.value === value; });
-    if (selectedMarkIndex < emptyItemOffset) {
-        return getItemOffset(applyIndentation);
-    }
-    return selectedMarkIndex + getItemOffset(applyIndentation);
-};
-var getSliderMarks = function (marks, applyIndentation) {
-    return marks.map(function (mark, index) { return (__assign(__assign({}, mark), { stepValue: index + getItemOffset(applyIndentation) })); });
-};
-var DiscreteSlider = function (_a) {
-    var marks = _a.marks, _b = _a.applyIndentation, applyIndentation = _b === void 0 ? true : _b, onValueChanged = _a.onValueChanged, value = _a.value;
-    var sliderStepValue = getSliderStepValue(marks, applyIndentation, value);
-    var sliderMarks = getSliderMarks(marks, applyIndentation);
-    var handleOnChange = function (newStepValue) {
-        var _a;
-        if (applyIndentation && newStepValue < firstItemOffset)
-            return;
-        var newSliderMark = (_a = sliderMarks.find(function (mark) { return mark.stepValue === newStepValue; })) === null || _a === void 0 ? void 0 : _a.value;
-        onValueChanged(newSliderMark);
-    };
-    return (React.createElement(react$1.Slider.Root, { step: 1, max: sliderMarks.length - 1 + getItemOffset(applyIndentation), value: [sliderStepValue], onValueChange: function (details) { var _a; return handleOnChange((_a = details.value[0]) !== null && _a !== void 0 ? _a : sliderStepValue); } },
-        React.createElement(react$1.Slider.Control, null,
-            React.createElement(react$1.Slider.Track, null,
-                React.createElement(react$1.Slider.Range, null)),
-            React.createElement(react$1.Slider.Thumbs, null),
-            React.createElement(react$1.Slider.MarkerGroup, null, sliderMarks.map(function (_a, index) {
-                var stepValue = _a.stepValue, label = _a.label;
-                return (React.createElement(react$1.Slider.Marker, { key: index, value: stepValue, style: {
-                        pointerEvents: 'all',
-                        fontWeight: sliderStepValue === stepValue ? 'bold' : 'normal',
-                    } }, label));
-            })))));
-};
-
-var Tooltip = function (_a) {
-    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'bottom' : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? '6xl' : _c, label = _a.label;
-    var _d = React.useState(false), isOpen = _d[0], setIsOpen = _d[1];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var childrenWithProps = React.cloneElement(children, {
-        onMouseEnter: function () { return setIsOpen(true); },
-        onMouseLeave: function () { return setIsOpen(false); },
-        onClick: function () { return setIsOpen(true); },
-    });
-    return (React.createElement(react$1.TooltipRoot, { positioning: {
-            placement: placement,
-        }, open: isOpen },
-        React.createElement(react$1.TooltipTrigger, { asChild: true }, childrenWithProps),
-        React.createElement(react$1.TooltipPositioner, null,
-            React.createElement(react$1.TooltipContent, { maxWidth: maxWidth },
-                React.createElement(react$1.TooltipArrow, null,
-                    React.createElement(react$1.TooltipArrowTip, null)),
-                label))));
-};
-
-var FormControlSection = function (_a) {
-    var children = _a.children, errorMessage = _a.errorMessage, id = _a.id, label = _a.label, hint = _a.hint, tooltip = _a.tooltip;
-    var isInvalid = !!errorMessage;
-    return (React.createElement(react$1.Field.Root, { id: id, invalid: isInvalid },
-        React.createElement(react$1.Box, { border: "1px", borderRadius: "sm", borderColor: isInvalid ? 'red.500' : 'gray.400', padding: "2xl" },
-            React.createElement(Flex, { flexDirection: "column" },
-                React.createElement(react$1.Box, { mb: "lg" },
-                    React.createElement(Flex, { alignItems: "center" },
-                        label ? (React.createElement(Text, { color: "gray.900", textStyle: "heading4" }, label)) : null,
-                        tooltip ? (React.createElement(Tooltip, { label: tooltip },
-                            React.createElement(InformationIcon, { ml: "md" }))) : null),
-                    hint ? (React.createElement(Text, { color: "gray.900", textStyle: "body" }, hint)) : null),
-                children)),
-        React.createElement(react$1.Field.ErrorText, null, errorMessage)));
-};
-
 Object.defineProperty(exports, "Box", {
     enumerable: true,
     get: function () { return react$1.Box; }
@@ -8091,7 +7882,6 @@ exports.DeleteIcon = DeleteIcon;
 exports.DevOverlay = DevOverlay;
 exports.Dialog = Dialog;
 exports.DigitalContractIcon = DigitalContractIcon;
-exports.DiscreteSlider = DiscreteSlider;
 exports.DocumentCheckIcon = DocumentCheckIcon;
 exports.DocumentIcon = DocumentIcon;
 exports.DoubleChevronDownIcon = DoubleChevronDownIcon;
@@ -8116,7 +7906,6 @@ exports.FlameIcon = FlameIcon;
 exports.FlashIcon = FlashIcon;
 exports.Flex = Flex;
 exports.Footer = Footer$1;
-exports.FormControlSection = FormControlSection;
 exports.ForwardIcon = ForwardIcon;
 exports.FullHeight = FullHeight;
 exports.GarageIcon = GarageIcon;
@@ -8158,7 +7947,6 @@ exports.LogoutIcon = LogoutIcon;
 exports.MagnifierIcon = MagnifierIcon;
 exports.MagnifierLargeIcon = MagnifierLargeIcon;
 exports.MarkedText = MarkedText;
-exports.Menu = Menu;
 exports.MessageIcon = MessageIcon;
 exports.MiniVanIcon = MiniVanIcon;
 exports.MinusIcon = MinusIcon;