@talixo-ds/options-input 0.0.21 → 0.0.23

package/dist/__snapshots__/options-input.spec.tsx.snap

@@ -0,0 +1,251 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OptionsInput snapshots should match snapshot 1`] = `
+<React.Fragment>
+  <ForwardRef(Box)
+    className="options-input__container test-class"
+    data-testid="options-input-container"
+    id="test-id"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    sx={
+      [
+        {
+          "&:hover": {
+            "borderColor": "#d3d3d3",
+          },
+        },
+        false,
+      ]
+    }
+    tabIndex={0}
+  >
+    <ForwardRef(Box)
+      display="flex"
+      gap={1}
+    >
+      <OptionsInputContentItem
+        disabled={false}
+        displayMinMax={false}
+        item={
+          {
+            "details": "This is your luggage",
+            "icon": "luggage",
+            "id": "luggage",
+            "inputQuantity": 1,
+            "label": "luggage",
+            "max": 9,
+            "min": 0,
+            "quantity": 1,
+          }
+        }
+      />
+      <OptionsInputContentItem
+        disabled={false}
+        displayMinMax={false}
+        item={
+          {
+            "icon": "football",
+            "id": "sport-equipment",
+            "inputQuantity": 1,
+            "label": "sport equipment",
+            "max": 1,
+            "min": 0,
+            "quantity": 1,
+          }
+        }
+      />
+    </ForwardRef(Box)>
+    <Memo
+      sx={
+        {
+          "color": [Function],
+        }
+      }
+    />
+  </ForwardRef(Box)>
+  <ClickAwayListener
+    onClickAway={[Function]}
+  >
+    <ForwardRef(Popper)
+      open={false}
+      placement="bottom-start"
+      sx={[Function]}
+    >
+      <ForwardRef(List)
+        className="options-input__dropdown-items-list"
+        data-testid="options-dropdown-list"
+        disablePadding={true}
+        sx={
+          {
+            "bgcolor": "Background",
+            "border": [Function],
+          }
+        }
+      >
+        <OptionsInputDropdownItem
+          displayMinMax={false}
+          index={0}
+          item={
+            {
+              "details": "This is your luggage",
+              "icon": "luggage",
+              "id": "luggage",
+              "inputQuantity": 1,
+              "label": "luggage",
+              "max": 9,
+              "min": 0,
+              "quantity": 1,
+            }
+          }
+          onBlur={[Function]}
+          onChange={[Function]}
+        />
+        <OptionsInputDropdownItem
+          displayMinMax={false}
+          index={1}
+          item={
+            {
+              "icon": "football",
+              "id": "sport-equipment",
+              "inputQuantity": 1,
+              "label": "sport equipment",
+              "max": 1,
+              "min": 0,
+              "quantity": 1,
+            }
+          }
+          onBlur={[Function]}
+          onChange={[Function]}
+        />
+      </ForwardRef(List)>
+    </ForwardRef(Popper)>
+  </ClickAwayListener>
+</React.Fragment>
+`;
+
+exports[`OptionsInput snapshots should render disabled input properly 1`] = `
+<React.Fragment>
+  <ForwardRef(Box)
+    className="options-input__container options-input__container--disabled test-class"
+    data-testid="options-input-container"
+    id="test-id"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    sx={
+      [
+        {
+          "&:hover": {
+            "borderColor": "#d3d3d3",
+          },
+        },
+        false,
+      ]
+    }
+    tabIndex={0}
+  >
+    <ForwardRef(Box)
+      display="flex"
+      gap={1}
+    >
+      <OptionsInputContentItem
+        disabled={true}
+        displayMinMax={false}
+        item={
+          {
+            "details": "This is your luggage",
+            "icon": "luggage",
+            "id": "luggage",
+            "inputQuantity": 1,
+            "label": "luggage",
+            "max": 9,
+            "min": 0,
+            "quantity": 1,
+          }
+        }
+      />
+      <OptionsInputContentItem
+        disabled={true}
+        displayMinMax={false}
+        item={
+          {
+            "icon": "football",
+            "id": "sport-equipment",
+            "inputQuantity": 1,
+            "label": "sport equipment",
+            "max": 1,
+            "min": 0,
+            "quantity": 1,
+          }
+        }
+      />
+    </ForwardRef(Box)>
+    <Memo
+      sx={
+        {
+          "color": [Function],
+        }
+      }
+    />
+  </ForwardRef(Box)>
+  <ClickAwayListener
+    onClickAway={[Function]}
+  >
+    <ForwardRef(Popper)
+      open={false}
+      placement="bottom-start"
+      sx={[Function]}
+    >
+      <ForwardRef(List)
+        className="options-input__dropdown-items-list"
+        data-testid="options-dropdown-list"
+        disablePadding={true}
+        sx={
+          {
+            "bgcolor": "Background",
+            "border": [Function],
+          }
+        }
+      >
+        <OptionsInputDropdownItem
+          displayMinMax={false}
+          index={0}
+          item={
+            {
+              "details": "This is your luggage",
+              "icon": "luggage",
+              "id": "luggage",
+              "inputQuantity": 1,
+              "label": "luggage",
+              "max": 9,
+              "min": 0,
+              "quantity": 1,
+            }
+          }
+          onBlur={[Function]}
+          onChange={[Function]}
+        />
+        <OptionsInputDropdownItem
+          displayMinMax={false}
+          index={1}
+          item={
+            {
+              "icon": "football",
+              "id": "sport-equipment",
+              "inputQuantity": 1,
+              "label": "sport equipment",
+              "max": 1,
+              "min": 0,
+              "quantity": 1,
+            }
+          }
+          onBlur={[Function]}
+          onChange={[Function]}
+        />
+      </ForwardRef(List)>
+    </ForwardRef(Popper)>
+  </ClickAwayListener>
+</React.Fragment>
+`;

package/dist/components/min-max-value-label.d.ts

@@ -0,0 +1,6 @@
+export type MinMaxValueLabelProps = {
+    min?: number;
+    max?: number;
+    color?: string;
+};
+export declare const MinMaxValueLabel: ({ min, max, color, }: MinMaxValueLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/min-max-value-label.js

@@ -0,0 +1,4 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import Typography from '@mui/material/Typography';
+export const MinMaxValueLabel = ({ min, max, color, }) => (_jsxs(Typography, { variant: "caption", color: color, sx: { my: 0 }, children: [!Number.isNaN(Number(min)) && `min: ${min}`, !Number.isNaN(Number(max)) && !Number.isNaN(Number(min)) && ', ', !Number.isNaN(Number(max)) && `max: ${max}`] }));
+//# sourceMappingURL=min-max-value-label.js.map

package/dist/components/min-max-value-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"min-max-value-label.js","sourceRoot":"","sources":["../../components/min-max-value-label.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAQlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,GAAG,EACH,GAAG,EACH,KAAK,GACiB,EAAE,EAAE,CAAC,CAC3B,MAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,aACtD,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,QAAQ,GAAG,EAAE,EAC3C,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,EAChE,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,QAAQ,GAAG,EAAE,IACjC,CACd,CAAC"}

package/dist/components/options-input-content-item.d.ts

@@ -0,0 +1,8 @@
+import { OptionsInputOption } from '../types';
+export type OptionsInputContentItemProps = {
+    item: OptionsInputOption;
+    disabled?: boolean;
+    displayMinMax?: boolean;
+};
+declare const OptionsInputContentItem: ({ item: { quantity, details, label, max, min, icon }, displayMinMax, disabled, }: OptionsInputContentItemProps) => import("react/jsx-runtime").JSX.Element;
+export default OptionsInputContentItem;

package/dist/components/options-input-content-item.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Tooltip from '@mui/material/Tooltip';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import * as MuiIcons from '@mui/icons-material';
+import * as DesignSystemIcons from '@talixo-ds/icons';
+import { MinMaxValueLabel } from './min-max-value-label';
+const OptionsInputContentItem = ({ item: { quantity, details, label, max, min, icon }, displayMinMax = false, disabled = false, }) => {
+    const Icon = DesignSystemIcons[icon] || MuiIcons[icon];
+    const itemsColor = quantity === 0 || disabled ? '#a4a5b2' : '#000000';
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 0.5, color: itemsColor, "data-testid": "option-item", children: [label ? (_jsx(Tooltip, { title: _jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Typography, { variant: "caption", fontWeight: 600, sx: { my: 0 }, children: label }), details && (_jsx(Typography, { variant: "caption", sx: { my: 0 }, children: details })), displayMinMax && _jsx(MinMaxValueLabel, { min: min, max: max })] }), placement: "top", arrow: true, children: _jsx("span", { children: _jsx(Icon, { fontSize: "medium", color: itemsColor }) }) })) : (_jsx(Icon, { fontSize: "medium", color: itemsColor })), _jsx(Typography, { variant: "h6", color: itemsColor, children: quantity })] }));
+};
+export default OptionsInputContentItem;
+//# sourceMappingURL=options-input-content-item.js.map

package/dist/components/options-input-content-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-input-content-item.js","sourceRoot":"","sources":["../../components/options-input-content-item.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,iBAAiB,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AASzD,MAAM,uBAAuB,GAAG,CAAC,EAC/B,IAAI,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAClD,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,GACa,EAAE,EAAE;IACjC,MAAM,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,QAAQ,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAEtE,OAAO,CACL,MAAC,GAAG,IACF,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,UAAU,iBACL,aAAa,aAExB,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,OAAO,IACN,KAAK,EACH,MAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,aACxC,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,UAAU,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,YACzD,KAAK,GACK,EACZ,OAAO,IAAI,CACV,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,YACxC,OAAO,GACG,CACd,EACA,aAAa,IAAI,KAAC,gBAAgB,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAI,IACtD,EAER,SAAS,EAAC,KAAK,EACf,KAAK,kBAEL,yBACE,KAAC,IAAI,IAAC,QAAQ,EAAC,QAAQ,EAAC,KAAK,EAAE,UAAU,GAAI,GACxC,GACC,CACX,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,QAAQ,EAAC,QAAQ,EAAC,KAAK,EAAE,UAAU,GAAI,CAC9C,EACD,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,KAAK,EAAE,UAAU,YACvC,QAAQ,GACE,IACT,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/options-input-dropdown-item.d.ts

@@ -0,0 +1,10 @@
+import { OptionsInputOption } from '../types';
+export type OptionsInputDropdownItemProps = {
+    item: OptionsInputOption;
+    onBlur: () => void;
+    onChange: (id: string, value: number | string) => void;
+    index: number;
+    displayMinMax?: boolean;
+};
+declare const OptionsInputDropdownItem: ({ item: { id, quantity, label, max, min, icon, details, inputQuantity }, onChange, onBlur, index, displayMinMax, }: OptionsInputDropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+export default OptionsInputDropdownItem;

package/dist/components/options-input-dropdown-item.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import classNames from 'classnames';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Divider from '@mui/material/Divider';
+import TextField from '@mui/material/TextField';
+import ListItem from '@mui/material/ListItem';
+import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+import * as MuiIcons from '@mui/icons-material';
+import * as DesignSystemIcons from '@talixo-ds/icons';
+import { MinMaxValueLabel } from './min-max-value-label';
+const OptionsInputDropdownItem = ({ item: { id, quantity = 0, label, max, min, icon, details, inputQuantity }, onChange, onBlur, index, displayMinMax, }) => {
+    const [shouldDisplayFullDetails, setShouldDisplayFullDetails] = useState(false);
+    const Icon = DesignSystemIcons[icon] || MuiIcons[icon];
+    return (_jsxs(_Fragment, {
+        children: [!!index && (_jsx(Divider, { sx: { color: (theme) => theme.palette.primary.main } })), _jsxs(ListItem, {
+            sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+            }, className: classNames('options-input__dropdown-item', {
+                'options-input__dropdown-item--empty': !quantity,
+            }), children: [_jsxs(Box, {
+                display: "flex", alignItems: "center", children: [_jsx(Icon, { fontSize: "small", color: "black" }), _jsx(TextField, {
+                    onChange: ({ target }) => onChange(id, target.value), onBlur: onBlur, value: inputQuantity, variant: "standard", inputProps: {
+                        inputMode: 'numeric',
+                        pattern: '-?[0-9]*',
+                        style: {
+                            textAlign: 'center',
+                        },
+                        'data-testid': 'dropdown-item-input',
+                    },
+                    // eslint-disable-next-line react/jsx-no-duplicate-props
+                    InputProps: { disableUnderline: true }, className: "options-input__dropdown-item-input"
+                }), _jsxs(Box, {
+                    display: "flex", flexDirection: "column", justifyContent: "center", paddingRight: 2, paddingLeft: 1, minWidth: "5rem", children: [_jsx(Typography, { variant: "caption", fontWeight: 600, fontSize: 13, sx: { my: 0 }, color: "black", children: label || id }), details && (_jsx(Box, {
+                        position: "relative", height: "1rem", "data-testid": "option-details-container", onMouseEnter: () => setShouldDisplayFullDetails(true), onMouseLeave: () => setShouldDisplayFullDetails(false), children: _jsx(Typography, {
+                            variant: "caption", color: "gray", sx: {
+                                my: 0,
+                                zIndex: 10000,
+                                position: 'fixed',
+                                ...(shouldDisplayFullDetails && {
+                                    backgroundColor: quantity ? '#ffffff' : '#eeeeee',
+                                    border: 'thin solid #d3d3d3',
+                                }),
+                            }, "data-testid": "option-details", children: details?.length <= 15 || shouldDisplayFullDetails
+                                ? details
+                                : `${details?.slice(0, 15)}...`
+                        })
+                    })), displayMinMax && (_jsx(MinMaxValueLabel, { min: min, max: max, color: "gray" }))]
+                })]
+            }), _jsxs(ButtonGroup, { variant: "outlined", size: "small", className: "options-input__dropdown-item-buttons", children: [_jsx(Button, { onClick: () => onChange(id, quantity + 1), disabled: quantity === max, className: "options-input__dropdown-item-button", role: "button", color: "primary", children: _jsx(AddIcon, { sx: { color: 'primary' } }) }), _jsx(Button, { onClick: () => onChange(id, quantity - 1), disabled: quantity === min, className: "options-input__dropdown-item-button", role: "button", color: "primary", children: _jsx(RemoveIcon, { sx: { color: 'primary' } }) })] })]
+        })]
+    }));
+};
+export default OptionsInputDropdownItem;
+//# sourceMappingURL=options-input-dropdown-item.js.map

package/dist/components/options-input-dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-input-dropdown-item.js","sourceRoot":"","sources":["../../components/options-input-dropdown-item.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,iBAAiB,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAWzD,MAAM,wBAAwB,GAAG,CAAC,EAChC,IAAI,EAAE,EAAE,EAAE,EAAE,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,EACzE,QAAQ,EACR,MAAM,EACN,KAAK,EACL,aAAa,GACiB,EAAE,EAAE;IAClC,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAC3D,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3B,MAAM,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEvD,OAAO,CACL,8BACG,CAAC,CAAC,KAAK,IAAI,CACV,KAAC,OAAO,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,GAAI,CAClE,EACD,MAAC,QAAQ,IACP,EAAE,EAAE;oBACF,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,eAAe;iBAChC,EACD,SAAS,EAAE,UAAU,CAAC,8BAA8B,EAAE;oBACpD,qCAAqC,EAAE,CAAC,QAAQ;iBACjD,CAAC,aAEF,MAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,aACrC,KAAC,IAAI,IAAC,QAAQ,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG,EACvC,KAAC,SAAS,IACR,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,EACpD,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,aAAa,EACpB,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE;oCACV,SAAS,EAAE,SAAS;oCACpB,OAAO,EAAE,UAAU;oCACnB,KAAK,EAAE;wCACL,SAAS,EAAE,QAAQ;qCACpB;oCACD,aAAa,EAAE,qBAAqB;iCACrC;gCACD,wDAAwD;gCACxD,UAAU,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,EACtC,SAAS,EAAC,oCAAoC,GAC9C,EACF,MAAC,GAAG,IACF,OAAO,EAAC,MAAM,EACd,aAAa,EAAC,QAAQ,EACtB,cAAc,EAAC,QAAQ,EACvB,YAAY,EAAE,CAAC,EACf,WAAW,EAAE,CAAC,EACd,QAAQ,EAAC,MAAM,aAEf,KAAC,UAAU,IACT,OAAO,EAAC,SAAS,EACjB,UAAU,EAAE,GAAG,EACf,QAAQ,EAAE,EAAE,EACZ,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EACb,KAAK,EAAC,OAAO,YAEZ,KAAK,IAAI,EAAE,GACD,EACZ,OAAO,IAAI,CACV,KAAC,GAAG,IACF,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAC,MAAM,iBACD,0BAA0B,EACtC,YAAY,EAAE,GAAG,EAAE,CAAC,2BAA2B,CAAC,IAAI,CAAC,EACrD,YAAY,EAAE,GAAG,EAAE,CAAC,2BAA2B,CAAC,KAAK,CAAC,YAEtD,KAAC,UAAU,IACT,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,MAAM,EACZ,EAAE,EAAE;gDACF,EAAE,EAAE,CAAC;gDACL,MAAM,EAAE,KAAK;gDACb,QAAQ,EAAE,OAAO;gDACjB,GAAG,CAAC,wBAAwB,IAAI;oDAC9B,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;oDACjD,MAAM,EAAE,oBAAoB;iDAC7B,CAAC;6CACH,iBACW,gBAAgB,YAE3B,OAAO,EAAE,MAAM,IAAI,EAAE,IAAI,wBAAwB;gDAChD,CAAC,CAAC,OAAO;gDACT,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,GACtB,GACT,CACP,EACA,aAAa,IAAI,CAChB,KAAC,gBAAgB,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,MAAM,GAAG,CACtD,IACG,IACF,EACN,MAAC,WAAW,IACV,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,sCAAsC,aAEhD,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,QAAQ,GAAG,CAAC,CAAC,EACzC,QAAQ,EAAE,QAAQ,KAAK,GAAG,EAC1B,SAAS,EAAC,qCAAqC,EAC/C,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,YAEf,KAAC,OAAO,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,GAAI,GAC9B,EACT,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,QAAQ,GAAG,CAAC,CAAC,EACzC,QAAQ,EAAE,QAAQ,KAAK,GAAG,EAC1B,SAAS,EAAC,qCAAqC,EAC/C,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,YAEf,KAAC,UAAU,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,GAAI,GACjC,IACG,IACL,IACV,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/components/tests/__snapshots__/min-max-value-label.spec.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MinMaxValueLabel should match snapshot 1`] = `
+<ForwardRef(Typography)
+  color="black"
+  sx={
+    {
+      "my": 0,
+    }
+  }
+  variant="caption"
+>
+  min: 0
+  , 
+  max: 100
+</ForwardRef(Typography)>
+`;

package/dist/components/tests/__snapshots__/options-input-content-item.spec.tsx.snap

@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OptionsInputDropdownItem should match snapshot 1`] = `
+<ForwardRef(Box)
+  alignItems="center"
+  color="#a4a5b2"
+  data-testid="option-item"
+  display="flex"
+  gap={0.5}
+>
+  <ForwardRef(Tooltip)
+    arrow={true}
+    placement="top"
+    title={
+      <ForwardRef(Box)
+        display="flex"
+        flexDirection="column"
+      >
+        <ForwardRef(Typography)
+          fontWeight={600}
+          sx={
+            {
+              "my": 0,
+            }
+          }
+          variant="caption"
+        >
+          luggage
+        </ForwardRef(Typography)>
+        <ForwardRef(Typography)
+          sx={
+            {
+              "my": 0,
+            }
+          }
+          variant="caption"
+        >
+          This is your luggage
+        </ForwardRef(Typography)>
+        <MinMaxValueLabel
+          max={10}
+          min={-10}
+        />
+      </ForwardRef(Box)>
+    }
+  >
+    <span>
+      <div
+        color="#a4a5b2"
+        fontSize="medium"
+      />
+    </span>
+  </ForwardRef(Tooltip)>
+  <ForwardRef(Typography)
+    color="#a4a5b2"
+    variant="h6"
+  >
+    0
+  </ForwardRef(Typography)>
+</ForwardRef(Box)>
+`;
+
+exports[`OptionsInputDropdownItem should not render tooltip when there is no label 1`] = `
+<ForwardRef(Box)
+  alignItems="center"
+  color="#a4a5b2"
+  data-testid="option-item"
+  display="flex"
+  gap={0.5}
+>
+  <div
+    color="#a4a5b2"
+    fontSize="medium"
+  />
+  <ForwardRef(Typography)
+    color="#a4a5b2"
+    variant="h6"
+  >
+    0
+  </ForwardRef(Typography)>
+</ForwardRef(Box)>
+`;
+
+exports[`OptionsInputDropdownItem should render proper alternative styling 1`] = `
+<ForwardRef(Box)
+  alignItems="center"
+  color="#000000"
+  data-testid="option-item"
+  display="flex"
+  gap={0.5}
+>
+  <ForwardRef(Tooltip)
+    arrow={true}
+    placement="top"
+    title={
+      <ForwardRef(Box)
+        display="flex"
+        flexDirection="column"
+      >
+        <ForwardRef(Typography)
+          fontWeight={600}
+          sx={
+            {
+              "my": 0,
+            }
+          }
+          variant="caption"
+        >
+          luggage
+        </ForwardRef(Typography)>
+        <ForwardRef(Typography)
+          sx={
+            {
+              "my": 0,
+            }
+          }
+          variant="caption"
+        >
+          This is your luggage
+        </ForwardRef(Typography)>
+      </ForwardRef(Box)>
+    }
+  >
+    <span>
+      <div
+        color="#000000"
+        fontSize="medium"
+      />
+    </span>
+  </ForwardRef(Tooltip)>
+  <ForwardRef(Typography)
+    color="#000000"
+    variant="h6"
+  >
+    1
+  </ForwardRef(Typography)>
+</ForwardRef(Box)>
+`;

package/dist/components/tests/__snapshots__/options-input-dropdown-item.spec.tsx.snap

@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OptionsInputDropdownItem should match snapshot 1`] = `
+<React.Fragment>
+  <ForwardRef(Divider)
+    sx={
+      {
+        "color": [Function],
+      }
+    }
+  />
+  <ForwardRef(ListItem)
+    className="options-input__dropdown-item options-input__dropdown-item--empty"
+    sx={
+      {
+        "display": "flex",
+        "justifyContent": "space-between",
+      }
+    }
+  >
+    <ForwardRef(Box)
+      alignItems="center"
+      display="flex"
+    >
+      <div
+        color="black"
+        fontSize="small"
+      />
+      <ForwardRef(TextField)
+        InputProps={
+          {
+            "disableUnderline": true,
+          }
+        }
+        className="options-input__dropdown-item-input"
+        inputProps={
+          {
+            "data-testid": "dropdown-item-input",
+            "inputMode": "numeric",
+            "pattern": "-?[0-9]*",
+            "style": {
+              "textAlign": "center",
+            },
+          }
+        }
+        onBlur={[MockFunction]}
+        onChange={[Function]}
+        value={0}
+        variant="standard"
+      />
+      <ForwardRef(Box)
+        display="flex"
+        flexDirection="column"
+        justifyContent="center"
+        minWidth="5rem"
+        paddingLeft={1}
+        paddingRight={2}
+      >
+        <ForwardRef(Typography)
+          color="black"
+          fontSize={13}
+          fontWeight={600}
+          sx={
+            {
+              "my": 0,
+            }
+          }
+          variant="caption"
+        >
+          luggage-id
+        </ForwardRef(Typography)>
+        <ForwardRef(Box)
+          data-testid="option-details-container"
+          height="1rem"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          position="relative"
+        >
+          <ForwardRef(Typography)
+            color="gray"
+            data-testid="option-details"
+            sx={
+              {
+                "my": 0,
+                "position": "fixed",
+                "zIndex": 10000,
+              }
+            }
+            variant="caption"
+          >
+            This is your lu...
+          </ForwardRef(Typography)>
+        </ForwardRef(Box)>
+      </ForwardRef(Box)>
+    </ForwardRef(Box)>
+    <ForwardRef(ButtonGroup)
+      className="options-input__dropdown-item-buttons"
+      size="small"
+      variant="outlined"
+    >
+      <ForwardRef(Button)
+        className="options-input__dropdown-item-button"
+        color="primary"
+        disabled={false}
+        onClick={[Function]}
+        role="button"
+      >
+        <Memo
+          sx={
+            {
+              "color": "primary",
+            }
+          }
+        />
+      </ForwardRef(Button)>
+      <ForwardRef(Button)
+        className="options-input__dropdown-item-button"
+        color="primary"
+        disabled={false}
+        onClick={[Function]}
+        role="button"
+      >
+        <Memo
+          sx={
+            {
+              "color": "primary",
+            }
+          }
+        />
+      </ForwardRef(Button)>
+    </ForwardRef(ButtonGroup)>
+  </ForwardRef(ListItem)>
+</React.Fragment>
+`;

package/dist/components/tests/min-max-value-label.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';