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

package/lib/cjs/components/Box/Box.js

@@ -26,7 +26,7 @@ var _styledSystem = require("styled-system");
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
 var _react2 = require("@emotion/react");
-var _excluded = ["as", "flexDirection", "gap", "isRow", "isDisabled", "className", "fontSize", "sx"];
+var _excluded = ["as", "flexDirection", "gap", "isRow", "isDisabled", "className", "fontSize", "sx", "variant"];
 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; }
 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; }
@@ -36,7 +36,7 @@ var ExtendedBox = /*#__PURE__*/(0, _base["default"])(_themeUi.Box, process.env.N
 } : {
   target: "ejf9h0h0",
   label: "ExtendedBox"
-})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNvQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Cb3gvQm94LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmLCB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBCb3ggYXMgVGhlbWVVSUJveCB9IGZyb20gJ3RoZW1lLXVpJztcblxuaW1wb3J0IHsgdXNlUHJvcFdhcm5pbmcsIHVzZVN0YXR1c0NsYXNzZXMgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5pbXBvcnQgeyBCb3hQcm9wcyB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuY29uc3QgRXh0ZW5kZWRCb3ggPSBzdHlsZWQoVGhlbWVVSUJveCkoXG4gIGxheW91dCxcbiAgZmxleGJveCxcbiAgdHlwb2dyYXBoeSxcbik7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWY8SFRNTEVsZW1lbnQsIEJveFByb3BzPigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7XG4gICAgYXMgPSAnZGl2JyxcbiAgICBmbGV4RGlyZWN0aW9uLFxuICAgIGdhcCxcbiAgICBpc1JvdyA9IGZhbHNlLFxuICAgIGlzRGlzYWJsZWQgPSBmYWxzZSxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsXG4gICAgLi4ub3RoZXJzXG4gIH0gPSBwcm9wcztcbiAgY29uc3QgZmQgPSBmbGV4RGlyZWN0aW9uIHx8IGlzUm93ID8gJ3JvdycgOiAnY29sdW1uJztcbiAgY29uc3QgY3VzdG9tID0geyAuLi5zeCB9O1xuXG4gIGNvbnN0IHsgY2xhc3NOYW1lcyB9ID0gdXNlU3RhdHVzQ2xhc3NlcyhjbGFzc05hbWUsIHsgaXNEaXNhYmxlZCB9KTtcbiAgdXNlUHJvcFdhcm5pbmcocHJvcHMsICdkaXNhYmxlZCcsICdpc0Rpc2FibGVkJyk7XG5cbiAgaWYgKGdhcCkge1xuICAgIGN1c3RvbVsnJiA+ICogKyAqOm5vdCg6Zmlyc3Qtb2YtdHlwZTpub3Qoc3R5bGUpOm5vdCg6Zmlyc3Qtb2YtdHlwZSB+ICopKSddID0ge1xuICAgICAgW2ZkID09PSAncm93JyA/ICdtYXJnaW5MZWZ0JyA6ICdtYXJnaW5Ub3AnXTogZ2FwLFxuICAgIH07XG4gIH1cblxuICBjb25zdCBjdXN0b21Gb250U2l6ZSA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIGNvbnN0IG51bWVyaWNhbEZvbnRTaXplID0gdG9OdW1iZXIoZm9udFNpemUpO1xuICAgIGlmIChOdW1iZXIuaXNOYU4obnVtZXJpY2FsRm9udFNpemUpKSB7XG4gICAgICByZXR1cm4gZm9udFNpemU7XG4gICAgfVxuICAgIHJldHVybiBudW1lcmljYWxGb250U2l6ZTtcbiAgfSwgW2ZvbnRTaXplXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RXh0ZW5kZWRCb3hcbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lc31cbiAgICAgIHJlZj17cmVmfVxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgZmxleERpcmVjdGlvbj17ZmR9XG4gICAgICB2YXJpYW50PVwiYm94LmJhc2VcIlxuICAgICAgZm9udFNpemU9e2N1c3RvbUZvbnRTaXplfVxuICAgICAgYXM9e2FzfVxuICAgICAgey4uLm90aGVyc31cbiAgICAgIHN4PXtjdXN0b219XG4gICAgLz5cbiAgKTtcbn0pO1xuXG5Cb3guZGlzcGxheU5hbWUgPSAnQm94JztcblxuZXhwb3J0IGRlZmF1bHQgQm94O1xuIl19 */");
+})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNvQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Cb3gvQm94LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmLCB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBCb3ggYXMgVGhlbWVVSUJveCB9IGZyb20gJ3RoZW1lLXVpJztcblxuaW1wb3J0IHsgdXNlUHJvcFdhcm5pbmcsIHVzZVN0YXR1c0NsYXNzZXMgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5pbXBvcnQgeyBCb3hQcm9wcyB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuY29uc3QgRXh0ZW5kZWRCb3ggPSBzdHlsZWQoVGhlbWVVSUJveCkoXG4gIGxheW91dCxcbiAgZmxleGJveCxcbiAgdHlwb2dyYXBoeSxcbik7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWY8SFRNTEVsZW1lbnQsIEJveFByb3BzPigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7XG4gICAgYXMgPSAnZGl2JyxcbiAgICBmbGV4RGlyZWN0aW9uLFxuICAgIGdhcCxcbiAgICBpc1JvdyA9IGZhbHNlLFxuICAgIGlzRGlzYWJsZWQgPSBmYWxzZSxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsXG4gICAgdmFyaWFudCA9ICdib3guYmFzZScsXG4gICAgLi4ub3RoZXJzXG4gIH0gPSBwcm9wcztcbiAgY29uc3QgZmQgPSBmbGV4RGlyZWN0aW9uIHx8IGlzUm93ID8gJ3JvdycgOiAnY29sdW1uJztcbiAgY29uc3QgY3VzdG9tID0geyAuLi5zeCB9O1xuXG4gIGNvbnN0IHsgY2xhc3NOYW1lcyB9ID0gdXNlU3RhdHVzQ2xhc3NlcyhjbGFzc05hbWUsIHsgaXNEaXNhYmxlZCB9KTtcbiAgdXNlUHJvcFdhcm5pbmcocHJvcHMsICdkaXNhYmxlZCcsICdpc0Rpc2FibGVkJyk7XG5cbiAgaWYgKGdhcCkge1xuICAgIGN1c3RvbVsnJiA+ICogKyAqOm5vdCg6Zmlyc3Qtb2YtdHlwZTpub3Qoc3R5bGUpOm5vdCg6Zmlyc3Qtb2YtdHlwZSB+ICopKSddID0ge1xuICAgICAgW2ZkID09PSAncm93JyA/ICdtYXJnaW5MZWZ0JyA6ICdtYXJnaW5Ub3AnXTogZ2FwLFxuICAgIH07XG4gIH1cblxuICBjb25zdCBjdXN0b21Gb250U2l6ZSA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIGNvbnN0IG51bWVyaWNhbEZvbnRTaXplID0gdG9OdW1iZXIoZm9udFNpemUpO1xuICAgIGlmIChOdW1iZXIuaXNOYU4obnVtZXJpY2FsRm9udFNpemUpKSB7XG4gICAgICByZXR1cm4gZm9udFNpemU7XG4gICAgfVxuICAgIHJldHVybiBudW1lcmljYWxGb250U2l6ZTtcbiAgfSwgW2ZvbnRTaXplXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RXh0ZW5kZWRCb3hcbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lc31cbiAgICAgIHJlZj17cmVmfVxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgZmxleERpcmVjdGlvbj17ZmR9XG4gICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgZm9udFNpemU9e2N1c3RvbUZvbnRTaXplfVxuICAgICAgYXM9e2FzfVxuICAgICAgey4uLm90aGVyc31cbiAgICAgIHN4PXtjdXN0b219XG4gICAgLz5cbiAgKTtcbn0pO1xuXG5Cb3guZGlzcGxheU5hbWUgPSAnQm94JztcblxuZXhwb3J0IGRlZmF1bHQgQm94O1xuIl19 */");
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$as = props.as,
     as = _props$as === void 0 ? 'div' : _props$as,
@@ -49,6 +49,8 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className = props.className,
     fontSize = props.fontSize,
     sx = props.sx,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'box.base' : _props$variant,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var fd = flexDirection || isRow ? 'row' : 'column';
   var custom = _objectSpread({}, sx);
@@ -72,7 +74,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     display: "flex",
     flexDirection: fd,
-    variant: "box.base",
+    variant: variant,
     fontSize: customFontSize,
     as: as
   }, others, {

package/lib/cjs/components/IconButtonToggle/IconButtonToggle.js

@@ -24,7 +24,8 @@ var IconButtonToggle = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     iconProps = props.iconProps,
     isToggled = props.isToggled,
     onToggle = props.onToggle,
-    title = props.title;
+    title = props.title,
+    variant = props.variant;
   var conditionalRenderProps = {
     ComponentToRenderIfTrue: toggledIcon,
     ComponentToRenderIfFalse: defaultIcon,
@@ -37,7 +38,8 @@ var IconButtonToggle = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   return (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
     onPress: handleConditionChange,
     ref: ref,
-    title: title
+    title: title,
+    variant: variant
   }, buttonProps), (0, _react2.jsx)(_Icon["default"], (0, _extends2["default"])({
     icon: RenderedComponent
   }, iconProps)));

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

@@ -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

@@ -431,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;
@@ -456,11 +468,6 @@ declare const _default: {
             '&.is-disabled': {
                 opacity: number;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
             transition: string;
         };
         inverse: {
@@ -1476,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;
@@ -1575,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;
@@ -3562,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: {

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/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;