@pingux/astro 2.150.0-alpha.0 → 2.150.0-alpha.2

package/lib/cjs/styles/themes/next-gen/colors/colors.js

@@ -113,13 +113,12 @@ var overrides = {
   focus: colorsObject.active,
   disabled: _colorTokens.nextGenColors['gray-100']
 };
-var background = {
-  base: 'white',
-  secondary: _colorTokens.nextGenColors['gray-100'],
-  card: _colorTokens.nextGenColors['blue-100'],
-  suggestion: '#ecf0f5',
-  hover: _colorTokens.nextGenColors['gray-100']
-};
+var background = _colorTokens.nextGenColors['blue-100'];
+var backgroundBase = 'white';
+var backgroundSecondary = _colorTokens.nextGenColors['gray-100'];
+var backgroundCard = _colorTokens.nextGenColors['blue-100'];
+var backgroundSuggestion = '#ecf0f5';
+var backgroundHover = _colorTokens.nextGenColors['gray-100'];
 var card = {
   blue: _colorTokens.nextGenColors['blue-100'],
   gray: _colorTokens.nextGenColors['gray-100']
@@ -141,6 +140,11 @@ var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColo
   active: colorsObject.blue,
   primary: colorsObject.blue,
   background: background,
+  backgroundBase: backgroundBase,
+  backgroundSecondary: backgroundSecondary,
+  backgroundCard: backgroundCard,
+  backgroundSuggestion: backgroundSuggestion,
+  backgroundHover: backgroundHover,
   iconWrapper: _iconWrapper.iconWrapper,
   tooltip: tooltip,
   twoTone: _twoTone["default"]

package/lib/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],
@@ -28,7 +28,7 @@ var astroBlacklistStory = {
   Loader: ['Circular', 'Custom Circular']
 };
 exports.astroBlacklistStory = astroBlacklistStory;
-var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];
+var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];
 exports.nextGenOnlyComponents = nextGenOnlyComponents;
 var _default = nextGenConvertedComponents;
 exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -44,13 +44,12 @@ declare const _default: {
         };
         active: string;
         primary: string;
-        background: {
-            base: string;
-            secondary: string;
-            card: string;
-            suggestion: string;
-            hover: string;
-        };
+        background: string;
+        backgroundBase: string;
+        backgroundSecondary: string;
+        backgroundCard: string;
+        backgroundSuggestion: string;
+        backgroundHover: string;
         iconWrapper: {
             wrapper: {
                 orange: string;
@@ -432,8 +431,20 @@ declare const _default: {
             backgroundColor: string;
             borderColor: string;
             color: string;
+            '&.is-focused': {
+                outlineColor: string;
+                backgroundColor: string;
+                outline: string;
+                outlineOffset: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                color: string;
+            };
             '&.is-hovered': {
                 boxShadow: string;
+                backgroundColor: string;
+                color: string;
             };
             alignItems: string;
             justifyContent: string;
@@ -457,11 +468,6 @@ declare const _default: {
             '&.is-disabled': {
                 opacity: number;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
             transition: string;
         };
         inverse: {
@@ -1477,6 +1483,47 @@ declare const _default: {
                     outlineOffset: string;
                 };
             };
+            passwordVisibilityIcon: {
+                right: number;
+                padding: string;
+                border: string;
+                '&:hover, &.is-pressed': {
+                    background: string;
+                    boxShadow: string;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineOffset: string;
+                    outlineColor: string;
+                };
+                position: string;
+                top: string;
+                transform: string;
+                height: string;
+                width: string;
+                justifyContent: string;
+                path: {
+                    fill: string;
+                };
+                '&.is-hovered': {
+                    backgroundColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-pressed': {
+                    backgroundColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                p: string;
+                transition: string;
+                outline: string;
+                borderRadius: string;
+                cursor: string;
+                boxShadow: string;
+            };
         };
         modalCloseButton: {
             position: string;
@@ -1576,6 +1623,59 @@ declare const _default: {
                 outline: string;
             };
         };
+        ButtonInputGroupContentRight: {
+            right: number;
+            padding: string;
+            borderRadius: string;
+            borderWidth: string;
+            borderLeftWidth: string;
+            borderRightWidth: string;
+            borderLeftColor: string;
+            position: string;
+            top: string;
+            transform: string;
+            height: string;
+            width: string;
+            justifyContent: string;
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+            '&.is-focused': {
+                outlineColor: string;
+                backgroundColor: string;
+                outline: string;
+                outlineOffset: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                color: string;
+            };
+            '&.is-hovered': {
+                boxShadow: string;
+                backgroundColor: string;
+                color: string;
+            };
+            alignItems: string;
+            flexShrink: number;
+            minWidth: string;
+            cursor: string;
+            display: string;
+            maxWidth: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            textAlign: string;
+            verticalAlign: string;
+            lineHeight: number;
+            border: string;
+            px: string;
+            py: string;
+            maxHeight: string;
+            '&.is-disabled': {
+                opacity: number;
+            };
+            transition: string;
+        };
     };
     forms: {
         input: import("theme-ui").ThemeUICSSObject;
@@ -3563,6 +3663,44 @@ declare const _default: {
                     boxShadow: string;
                 };
             };
+            inputDropDownContentLeft: {
+                left: number;
+                position: string;
+                top: string;
+                transform: string;
+                height: string;
+                width: string;
+                justifyContent: string;
+            };
+            inputGroupContentLeft: {
+                left: number;
+                borderRight: string;
+                position: string;
+                top: string;
+                transform: string;
+                height: string;
+                width: string;
+                justifyContent: string;
+            };
+            inputDropDownContentRight: {
+                right: number;
+                position: string;
+                top: string;
+                transform: string;
+                height: string;
+                width: string;
+                justifyContent: string;
+            };
+            inputGroupContentRight: {
+                right: number;
+                borderLeft: string;
+                position: string;
+                top: string;
+                transform: string;
+                height: string;
+                width: string;
+                justifyContent: string;
+            };
         };
         buttonBar: {
             container: {
@@ -4183,6 +4321,12 @@ declare const _default: {
                     maxWidth: string[];
                 };
             };
+            headingContainer: {
+                borderBottom: string;
+                borderBottomColor: string;
+                bg: string;
+                borderRadius: string;
+            };
             container: {
                 justifyContent: string;
             };

package/lib/cjs/styles/themes/next-gen/stories/OnyxInputPatterns.chromatic.stories.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../../../..").TextFieldProps & React.RefAttributes<HTMLInputElement>>;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const PasswordInput: () => React.JSX.Element;
+export declare const InputGroup: () => React.JSX.Element;
+export declare const ButtonInputGroup: () => React.JSX.Element;
+export declare const DropdownInputGroup: () => React.JSX.Element;

package/lib/cjs/styles/themes/next-gen/stories/OnyxInputPatterns.chromatic.stories.js

@@ -0,0 +1,197 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PasswordInput = exports.InputGroup = exports.DropdownInputGroup = exports.Default = exports.ButtonInputGroup = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _EyeOffOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/EyeOffOutlineIcon"));
+var _EyeOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/EyeOutlineIcon"));
+var _ = require("../../../..");
+var _TextField = _interopRequireDefault(require("../../../../components/TextField"));
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _default = {
+  title: 'Form/Onyx Input Patterns',
+  component: _TextField["default"]
+};
+exports["default"] = _default;
+var items = [{
+  name: 'Aardvark',
+  id: '1'
+}, {
+  name: 'Kangaroo',
+  id: '2'
+}, {
+  name: 'Snake',
+  id: '3'
+}];
+var Default = function Default() {
+  return (0, _react2.jsx)(_TextField["default"], {
+    label: "Label",
+    helperText: "Help text for this field."
+  });
+};
+exports.Default = Default;
+var PasswordInput = function PasswordInput() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  var handleVisible = function handleVisible() {
+    setIsVisible(!isVisible);
+  };
+  return (0, _react2.jsx)(_TextField["default"], {
+    label: "Password",
+    type: "password",
+    containerProps: {
+      sx: {
+        '& input': {
+          paddingRight: '60px'
+        }
+      }
+    },
+    slots: {
+      inContainer: (0, _react2.jsx)(_.IconButtonToggle, {
+        toggledIcon: _EyeOutlineIcon["default"],
+        defaultIcon: _EyeOffOutlineIcon["default"],
+        onToggle: handleVisible,
+        isToggled: isVisible,
+        variant: "passwordVisibilityIcon",
+        buttonProps: {
+          'aria-label': 'eye icon'
+        },
+        iconProps: {
+          size: 'xs'
+        }
+      })
+    }
+  });
+};
+exports.PasswordInput = PasswordInput;
+var InputGroup = function InputGroup() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TextField["default"], {
+    label: "Label",
+    helperText: "Help text for this field.",
+    containerProps: {
+      sx: {
+        '& input': {
+          paddingLeft: '70px'
+        }
+      }
+    },
+    slots: {
+      beforeInput: (0, _react2.jsx)(_.Box, {
+        variant: "box.inputGroupContentLeft",
+        p: "12px 20px"
+      }, (0, _react2.jsx)(_.Text, null, "@"))
+    }
+  }), (0, _react2.jsx)(_TextField["default"], {
+    label: "Label",
+    mt: "xl",
+    helperText: "Help text for this field.",
+    containerProps: {
+      sx: {
+        '& input': {
+          paddingRight: '160px'
+        }
+      }
+    },
+    slots: {
+      inContainer: (0, _react2.jsx)(_.Box, {
+        variant: "box.inputGroupContentRight",
+        p: "12px 20px"
+      }, (0, _react2.jsx)(_.Text, null, "@example.com"))
+    }
+  }));
+};
+exports.InputGroup = InputGroup;
+var ButtonInputGroup = function ButtonInputGroup() {
+  return (0, _react2.jsx)(_TextField["default"], {
+    label: "Label",
+    containerProps: {
+      sx: {
+        '& input': {
+          paddingRight: '100px'
+        }
+      }
+    },
+    slots: {
+      inContainer: (0, _react2.jsx)(_.Button, {
+        variant: "ButtonInputGroupContentRight"
+      }, "Button")
+    }
+  });
+};
+exports.ButtonInputGroup = ButtonInputGroup;
+var DropdownInputGroup = function DropdownInputGroup() {
+  var _useState3 = (0, _react.useState)(items[0].name),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    selectedKey = _useState4[0],
+    setSelectedKey = _useState4[1];
+  var handleSelectionChange = function handleSelectionChange(key) {
+    return setSelectedKey(key);
+  };
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TextField["default"], {
+    label: "Label",
+    containerProps: {
+      sx: {
+        '& > .field-control-wrapper > input': {
+          paddingRight: '160px'
+        }
+      }
+    },
+    slots: {
+      inContainer: (0, _react2.jsx)(_.Box, {
+        variant: "box.inputDropDownContentRight",
+        width: "150px",
+        mt: "-2px"
+      }, (0, _react2.jsx)(_.SelectField, {
+        items: items,
+        selectedKey: selectedKey,
+        onSelectionChange: handleSelectionChange,
+        variant: "forms.input.dropDownContentRight"
+      }, function (item) {
+        return (0, _react2.jsx)(_.Item, {
+          key: item.name,
+          "data-id": item.name
+        }, item.name);
+      }))
+    }
+  }), (0, _react2.jsx)(_TextField["default"], {
+    label: "Label",
+    mt: "xl",
+    containerProps: {
+      sx: {
+        '& > .field-control-wrapper > input': {
+          paddingLeft: '160px'
+        }
+      }
+    },
+    slots: {
+      beforeInput: (0, _react2.jsx)(_.Box, {
+        variant: "box.inputDropDownContentLeft",
+        width: "150px",
+        mt: "-2px"
+      }, (0, _react2.jsx)(_.SelectField, {
+        items: items,
+        selectedKey: selectedKey,
+        onSelectionChange: handleSelectionChange,
+        variant: "forms.input.dropDownContentLeft"
+      }, function (item) {
+        return (0, _react2.jsx)(_.Item, {
+          key: item.name,
+          "data-id": item.name
+        }, item.name);
+      }))
+    }
+  }));
+};
+exports.DropdownInputGroup = DropdownInputGroup;

package/lib/cjs/styles/themes/next-gen/stories/StickerSheetComponent.js

@@ -63,7 +63,7 @@ var iconSizes = ['icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'ic
 var StickerSheetComponent = function StickerSheetComponent() {
   return (0, _react2.jsx)(_index.Box, {
     sx: {
-      backgroundColor: 'background.base'
+      backgroundColor: 'backgroundBase'
     },
     height: "100%",
     p: "lg",

package/lib/cjs/styles/themes/next-gen/variants/box.d.ts

@@ -0,0 +1,61 @@
+export declare const commonContentProps: {
+    position: string;
+    top: string;
+    transform: string;
+    height: string;
+    width: string;
+    justifyContent: string;
+};
+export declare const box: {
+    indeterminateCheckboxIcon: {
+        height: string;
+        width: string;
+        '&.is-disabled': {
+            '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+                fill: string;
+                stroke: string;
+            };
+        };
+        '&.is-focused': {
+            boxShadow: string;
+        };
+    };
+    inputDropDownContentLeft: {
+        left: number;
+        position: string;
+        top: string;
+        transform: string;
+        height: string;
+        width: string;
+        justifyContent: string;
+    };
+    inputGroupContentLeft: {
+        left: number;
+        borderRight: string;
+        position: string;
+        top: string;
+        transform: string;
+        height: string;
+        width: string;
+        justifyContent: string;
+    };
+    inputDropDownContentRight: {
+        right: number;
+        position: string;
+        top: string;
+        transform: string;
+        height: string;
+        width: string;
+        justifyContent: string;
+    };
+    inputGroupContentRight: {
+        right: number;
+        borderLeft: string;
+        position: string;
+        top: string;
+        transform: string;
+        height: string;
+        width: string;
+        justifyContent: string;
+    };
+};

package/lib/cjs/styles/themes/next-gen/variants/box.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.commonContentProps = exports.box = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _colors = _interopRequireDefault(require("../colors/colors"));
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var commonContentProps = {
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  height: '100%',
+  width: 'max-content',
+  justifyContent: 'center'
+};
+exports.commonContentProps = commonContentProps;
+var box = {
+  indeterminateCheckboxIcon: {
+    height: '19.25px',
+    width: '19.25px',
+    '&.is-disabled': {
+      '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+        fill: 'gray-500',
+        stroke: 'gray-500'
+      }
+    },
+    '&.is-focused': {
+      boxShadow: "inset 0px 0px 0px 1px ".concat(_colors["default"].focus)
+    }
+  },
+  inputDropDownContentLeft: _objectSpread(_objectSpread({}, commonContentProps), {}, {
+    left: 0
+  }),
+  inputGroupContentLeft: _objectSpread(_objectSpread({}, commonContentProps), {}, {
+    left: 0,
+    borderRight: "1px solid ".concat(_colors["default"]['gray-500'])
+  }),
+  inputDropDownContentRight: _objectSpread(_objectSpread({}, commonContentProps), {}, {
+    right: 0
+  }),
+  inputGroupContentRight: _objectSpread(_objectSpread({}, commonContentProps), {}, {
+    right: 0,
+    borderLeft: "1px solid ".concat(_colors["default"]['gray-500'])
+  })
+};
+exports.box = box;