glints-aries 4.0.202 → 4.0.204

package/es/@next/Card/Card.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentAction } from '../../types/componentAction';
 export declare type CardProps = {
-    heading?: string;
-    subheading?: string;
+    heading?: React.ReactNode;
+    subheading?: React.ReactNode;
     children?: React.ReactNode;
     primaryAction?: ComponentAction;
     secondaryAction?: ComponentAction;

package/es/@next/Card/Card.js

@@ -14,7 +14,7 @@ var CardComponent = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
     children = _ref.children;
   var headingMarkup = /*#__PURE__*/React.createElement(Typography, {
     as: "div",
-    variant: "body2"
+    variant: "subtitle1"
   }, heading);
   var subHeadingMarkup = /*#__PURE__*/React.createElement(Typography, {
     as: "div",

package/es/@next/Card/Card.stories.d.ts

@@ -5,3 +5,4 @@ export declare const Interactive: any;
 export declare const NoAction: any;
 export declare const PrimaryActionOnly: any;
 export declare const SecondaryActionOnly: any;
+export declare const CustomHeadingSubHeading: any;

package/es/@next/Card/CardStyle.d.ts

@@ -5,3 +5,4 @@ export declare const StyledCardHeaderSectionHalf: import("styled-components").St
 export declare const StyledCardContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledCardSection: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledCardActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCustomHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Card/CardStyle.js

@@ -6,7 +6,7 @@ import { space12, space16, space24, space4 } from '../utilities/spacing';
 export var StyledCardContainer = styled.div.withConfig({
   displayName: "CardStyle__StyledCardContainer",
   componentId: "sc-tpku8j-0"
-})(["border-radius:", ";box-shadow:0px 0px 5px rgba(0,0,0,0.05),0px 1px 2px rgba(0,0,0,0.15);color:", ";"], borderRadius8, Neutral.B18);
+})(["border-radius:", ";box-shadow:0px 0px 5px 0px rgba(71,71,71,0.1),0px 1px 2px 0px rgba(71,71,71,0.2);color:", ";"], borderRadius8, Neutral.B18);
 export var StyledCardHeaderWrapper = styled.div.withConfig({
   displayName: "CardStyle__StyledCardHeaderWrapper",
   componentId: "sc-tpku8j-1"
@@ -30,4 +30,8 @@ export var StyledCardSection = styled.div.withConfig({
 export var StyledCardActionWrapper = styled.div.withConfig({
   displayName: "CardStyle__StyledCardActionWrapper",
   componentId: "sc-tpku8j-6"
-})(["display:flex;padding:20px ", " ", ";flex-direction:column-reverse;align-items:flex-end;border-top:solid 1px ", ";&[data-align='left']{flex-direction:column;align-items:flex-start;}@media (max-width:", "){padding:10px ", " ", ";}"], space24, space24, Neutral.B85, Breakpoints.large, space16, space12);
+})(["display:flex;padding:20px ", " ", ";flex-direction:column-reverse;align-items:flex-end;border-top:solid 1px ", ";&[data-align='left']{flex-direction:column;align-items:flex-start;}@media (max-width:", "){padding:10px ", " ", ";}"], space24, space24, Neutral.B85, Breakpoints.large, space16, space12);
+export var StyledCustomHeader = styled.div.withConfig({
+  displayName: "CardStyle__StyledCustomHeader",
+  componentId: "sc-tpku8j-7"
+})(["& > *{margin:0;}"]);

package/es/@next/InlineError/InlineError.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface InlineErrorProps extends React.HTMLAttributes<HTMLDivElement> {
+    text: string;
+}
+export declare const InlineError: ({ text, ...props }: InlineErrorProps) => JSX.Element;

package/es/@next/InlineError/InlineError.js

@@ -0,0 +1,19 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["text"];
+import React from 'react';
+import { StyledText, StyledWrapper } from './InlineErrorStyle';
+import { Icon } from '../Icon';
+import { Red } from '../utilities/colors';
+export var InlineError = function InlineError(_ref) {
+  var text = _ref.text,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var error = !!text;
+  return error ? /*#__PURE__*/React.createElement(StyledWrapper, props, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-error-warning-fill",
+    fill: Red.B93,
+    width: 20,
+    height: 20
+  }), /*#__PURE__*/React.createElement(StyledText, {
+    variant: "subtitle2"
+  }, text)) : /*#__PURE__*/React.createElement(React.Fragment, null);
+};

package/es/@next/InlineError/InlineError.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: any;
+export declare const WithInput: any;

package/es/@next/InlineError/InlineErrorStyle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledText: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../Typography").TypographyProps) => JSX.Element, any, {}, never>;

package/es/@next/InlineError/InlineErrorStyle.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { space4 } from '../utilities/spacing';
+import { Typography } from '../Typography';
+import { Red } from '../utilities/colors';
+export var StyledWrapper = styled.div.withConfig({
+  displayName: "InlineErrorStyle__StyledWrapper",
+  componentId: "sc-gvg32i-0"
+})(["display:flex;align-items:center;gap:", ";"], space4);
+export var StyledText = styled(Typography).withConfig({
+  displayName: "InlineErrorStyle__StyledText",
+  componentId: "sc-gvg32i-1"
+})(["margin:0;color:", ";"], Red.B93);

package/es/@next/InlineError/index.d.ts

@@ -0,0 +1 @@
+export * from './InlineError';

package/es/@next/InlineError/index.js

@@ -0,0 +1 @@
+export * from './InlineError';

package/es/@next/Link/LinkStyle.js

@@ -4,4 +4,4 @@ import { space2 } from '../utilities/spacing';
 export var StyledLink = styled.a.withConfig({
   displayName: "LinkStyle__StyledLink",
   componentId: "sc-usx229-0"
-})(["display:flex;align-items:center;color:", ";&[data-underline='false']{text-decoration:none;}&[data-monochrome='true']{color:", ";&:hover,&:active{color:", ";}}&:hover{color:rgba(0,86,140,0.9);svg{fill:rgba(0,86,140,0.9);}}&:active{color:", ";svg{fill:", ";}}svg{fill:", ";margin-left:", ";padding-bottom:", ";height:18px;}"], Blue.S99, Neutral.B18, Neutral.B00, Blue.S100, Blue.S100, Blue.S99, space2, space2);
+})(["display:flex;align-items:center;color:", ";&[data-underline='false']{text-decoration:none;}&[data-monochrome='true']{color:", ";&:hover,&:active{color:", ";svg{fill:", ";}}svg{fill:", ";}}&:hover{color:rgba(0,86,140,0.9);svg{fill:rgba(0,86,140,0.9);}}&:active{color:", ";svg{fill:", ";}}svg{fill:", ";margin-left:", ";padding-bottom:", ";height:18px;}"], Blue.S99, Neutral.B18, Neutral.B00, Neutral.B00, Neutral.B18, Blue.S100, Blue.S100, Blue.S99, space2, space2);

package/es/@next/Spinner/Spinner.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { IconProps } from '../Icon';
-export declare type SpinnerProps = Omit<IconProps, 'name'>;
-export declare const Spinner: (props: SpinnerProps) => JSX.Element;
+export declare type Size = 'small' | 'large';
+export declare type SpinnerProps = Omit<IconProps, 'name'> & {
+    label?: string;
+    size?: Size;
+};
+export declare const Spinner: ({ label, size, ...props }: SpinnerProps) => JSX.Element;

package/es/@next/Spinner/Spinner.js

@@ -1,15 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["label", "size"];
+var _iconSizeMapping, _labelVariantMapping;
 import React from 'react';
-import styled from 'styled-components';
 import { Icon } from '../Icon';
-var StyledWrapper = styled.div.withConfig({
-  displayName: "Spinner__StyledWrapper",
-  componentId: "sc-ynwr5u-0"
-})(["display:flex;justify-content:center;@keyframes p-keyframes-spin{to{transform:rotate(1turn);}}svg{animation:p-keyframes-spin 800ms linear infinite;}"]);
-export var Spinner = function Spinner(props) {
+import { Label, StyledWrapper } from './SpinnerStyle';
+var iconSizeMapping = (_iconSizeMapping = {}, _iconSizeMapping['small'] = '18px', _iconSizeMapping['large'] = '48px', _iconSizeMapping);
+var labelVariantMapping = (_labelVariantMapping = {}, _labelVariantMapping['small'] = 'body1', _labelVariantMapping['large'] = 'subtitle1', _labelVariantMapping);
+export var Spinner = function Spinner(_ref) {
+  var label = _ref.label,
+    size = _ref.size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(StyledWrapper, {
     className: "spinner-container"
   }, /*#__PURE__*/React.createElement(Icon, _extends({
-    name: "ri-loader"
-  }, props)));
+    name: "ri-loader",
+    height: iconSizeMapping[size],
+    width: iconSizeMapping[size]
+  }, props)), label && /*#__PURE__*/React.createElement(Label, {
+    variant: labelVariantMapping[size],
+    "data-size": size
+  }, label));
 };

package/es/@next/Spinner/Spinner.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: any;
+export declare const WithLabel: any;

package/es/@next/Spinner/SpinnerStyle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../Typography").TypographyProps) => JSX.Element, any, {}, never>;

package/es/@next/Spinner/SpinnerStyle.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Typography } from '../Typography';
+import { space16, space4 } from '../utilities/spacing';
+export var StyledWrapper = styled.div.withConfig({
+  displayName: "SpinnerStyle__StyledWrapper",
+  componentId: "sc-1rqoa36-0"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;@keyframes p-keyframes-spin{to{transform:rotate(1turn);}}svg{animation:p-keyframes-spin 800ms linear infinite;}"]);
+export var Label = styled(Typography).withConfig({
+  displayName: "SpinnerStyle__Label",
+  componentId: "sc-1rqoa36-1"
+})(["margin-bottom:0;&[data-size='large']{margin-top:", ";}&[data-size='small']{margin-top:", ";}"], space16, space4);

package/es/@next/Switch/Switch.d.ts

@@ -4,5 +4,6 @@ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     disabled?: boolean;
     onChange: () => void;
     value: string;
+    withIcon?: boolean;
 }
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

package/es/@next/Switch/Switch.js

@@ -1,14 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["checked", "disabled", "onChange", "value"];
+var _excluded = ["checked", "disabled", "onChange", "value", "withIcon"];
 import React from 'react';
+import { Icon } from '../Icon';
+import { Neutral } from '../utilities/colors';
 import { InputStyle, LabelStyle, SwitchStyle } from './SwitchStyle';
 export var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref, ref) {
   var checked = _ref.checked,
     disabled = _ref.disabled,
     onChange = _ref.onChange,
     value = _ref.value,
+    withIcon = _ref.withIcon,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var IconRender = function IconRender() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+      name: "ri-check",
+      fill: disabled ? Neutral.B85 : Neutral.B100
+    }), /*#__PURE__*/React.createElement(Icon, {
+      name: "ri-close",
+      fill: disabled ? Neutral.B85 : Neutral.B100
+    }));
+  };
   return /*#__PURE__*/React.createElement(LabelStyle, null, /*#__PURE__*/React.createElement(InputStyle, _extends({
     value: value
   }, otherProps, {
@@ -16,8 +28,10 @@ export var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref, ref) {
     defaultChecked: checked,
     type: "checkbox",
     onChange: onChange,
-    ref: ref
+    ref: ref,
+    "data-with-icon": withIcon
   })), /*#__PURE__*/React.createElement(SwitchStyle, {
-    "data-disabled": disabled
-  }));
+    "data-disabled": disabled,
+    "data-with-icon": withIcon
+  }, withIcon && /*#__PURE__*/React.createElement(IconRender, null)));
 });

package/es/@next/Switch/Switch.stories.d.ts

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Interactive: any;
+export declare const Default: any;
+export declare const WithIcon: any;

package/es/@next/Switch/SwitchStyle.js

@@ -4,11 +4,11 @@ import { Blue, Neutral } from '../utilities/colors';
 export var SwitchStyle = styled.div.withConfig({
   displayName: "SwitchStyle",
   componentId: "sc-7dlucf-0"
-})(["position:relative;width:", ";height:", ";background-color:", ";&[data-disabled='true']{background-color:", ";}border-radius:", ";padding:0;transition:300ms all;@media (max-width:", "){width:38px;height:22px;}&:before{transition:100ms all;content:'';position:absolute;width:16px;height:16px;border-radius:16px;top:50%;left:4px;background:", ";transform:translate(0,-50%);@media (max-width:", "){width:14px;height:14px;}}"], Spacing.space40, Spacing.space24, Neutral.B40, Neutral.B95, Spacing.space24, Breakpoints.large, Neutral.B100, Breakpoints.large);
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative;width:", ";&[data-with-icon]{width:48px;}&[data-with-icon] svg{height:16px;}height:", ";background-color:", ";&[data-disabled='true']{background-color:", ";cursor:not-allowed;}border-radius:", ";padding:0;padding-left:8px;padding-right:8px;transition:300ms all;@media (max-width:", "){width:38px;&[data-with-icon]{width:44px;}&[data-with-icon] svg{height:14px;}height:22px;}&:before{transition:100ms all;content:'';position:absolute;width:16px;height:16px;border-radius:16px;top:50%;left:4px;background:", ";box-shadow:0px 1px 3px rgba(0,0,0,0.1);transform:translate(0,-50%);@media (max-width:", "){width:14px;height:14px;}}"], Spacing.space40, Spacing.space24, Neutral.B40, Neutral.B95, Spacing.space24, Breakpoints.large, Neutral.B100, Breakpoints.large);
 export var InputStyle = styled.input.withConfig({
   displayName: "SwitchStyle__InputStyle",
   componentId: "sc-7dlucf-1"
-})(["opacity:0;position:absolute;&:checked + ", "{background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{transform:translate(16px,-50%);}}"], SwitchStyle, Blue.S99, Neutral.B95);
+})(["opacity:0;position:absolute;&:checked + ", "{background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{transform:translate(16px,-50%);}&[data-with-icon]{&:before{transform:translate(24px,-50%);}}}& + ", " svg:nth-child(1){visibility:hidden;}& + ", " svg:nth-child(2){visibility:visible;}&:checked + ", " svg:nth-child(1){visibility:visible;}&:checked + ", " svg:nth-child(2){visibility:hidden;}"], SwitchStyle, Blue.S99, Neutral.B95, SwitchStyle, SwitchStyle, SwitchStyle, SwitchStyle);
 export var LabelStyle = styled.label.withConfig({
   displayName: "SwitchStyle__LabelStyle",
   componentId: "sc-7dlucf-2"

package/es/@next/index.d.ts

@@ -32,3 +32,4 @@ export { Tooltip, TooltipPosition, TooltipProps } from './Tooltip';
 export { Typography, TypographyProps } from './Typography';
 export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };
 export { Switch } from './Switch';
+export { InlineError, InlineErrorProps } from './InlineError';

package/es/@next/index.js

@@ -32,4 +32,5 @@ export { TextInput, TextInputProps } from './TextInput';
 export { Tooltip, TooltipPosition, TooltipProps } from './Tooltip';
 export { Typography, TypographyProps } from './Typography';
 export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };
-export { Switch } from './Switch';
+export { Switch } from './Switch';
+export { InlineError, InlineErrorProps } from './InlineError';

package/lib/@next/Card/Card.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentAction } from '../../types/componentAction';
 export declare type CardProps = {
-    heading?: string;
-    subheading?: string;
+    heading?: React.ReactNode;
+    subheading?: React.ReactNode;
     children?: React.ReactNode;
     primaryAction?: ComponentAction;
     secondaryAction?: ComponentAction;

package/lib/@next/Card/Card.js

@@ -19,7 +19,7 @@ var CardComponent = /*#__PURE__*/_react["default"].forwardRef(function Card(_ref
     children = _ref.children;
   var headingMarkup = /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "div",
-    variant: "body2"
+    variant: "subtitle1"
   }, heading);
   var subHeadingMarkup = /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "div",

package/lib/@next/Card/Card.stories.d.ts

@@ -5,3 +5,4 @@ export declare const Interactive: any;
 export declare const NoAction: any;
 export declare const PrimaryActionOnly: any;
 export declare const SecondaryActionOnly: any;
+export declare const CustomHeadingSubHeading: any;

package/lib/@next/Card/CardStyle.d.ts

@@ -5,3 +5,4 @@ export declare const StyledCardHeaderSectionHalf: import("styled-components").St
 export declare const StyledCardContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledCardSection: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledCardActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCustomHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/@next/Card/CardStyle.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.StyledCardSection = exports.StyledCardHeaderWrapper = exports.StyledCardHeaderSectionHalf = exports.StyledCardHeaderSection = exports.StyledCardContentWrapper = exports.StyledCardContainer = exports.StyledCardActionWrapper = void 0;
+exports.StyledCustomHeader = exports.StyledCardSection = exports.StyledCardHeaderWrapper = exports.StyledCardHeaderSectionHalf = exports.StyledCardHeaderSection = exports.StyledCardContentWrapper = exports.StyledCardContainer = exports.StyledCardActionWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
 var _borderRadius = require("../utilities/borderRadius");
@@ -13,7 +13,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledCardContainer = _styledComponents["default"].div.withConfig({
   displayName: "CardStyle__StyledCardContainer",
   componentId: "sc-tpku8j-0"
-})(["border-radius:", ";box-shadow:0px 0px 5px rgba(0,0,0,0.05),0px 1px 2px rgba(0,0,0,0.15);color:", ";"], _borderRadius.borderRadius8, _colors.Neutral.B18);
+})(["border-radius:", ";box-shadow:0px 0px 5px 0px rgba(71,71,71,0.1),0px 1px 2px 0px rgba(71,71,71,0.2);color:", ";"], _borderRadius.borderRadius8, _colors.Neutral.B18);
 exports.StyledCardContainer = StyledCardContainer;
 var StyledCardHeaderWrapper = _styledComponents["default"].div.withConfig({
   displayName: "CardStyle__StyledCardHeaderWrapper",
@@ -44,4 +44,9 @@ var StyledCardActionWrapper = _styledComponents["default"].div.withConfig({
   displayName: "CardStyle__StyledCardActionWrapper",
   componentId: "sc-tpku8j-6"
 })(["display:flex;padding:20px ", " ", ";flex-direction:column-reverse;align-items:flex-end;border-top:solid 1px ", ";&[data-align='left']{flex-direction:column;align-items:flex-start;}@media (max-width:", "){padding:10px ", " ", ";}"], _spacing.space24, _spacing.space24, _colors.Neutral.B85, Breakpoints.large, _spacing.space16, _spacing.space12);
-exports.StyledCardActionWrapper = StyledCardActionWrapper;
+exports.StyledCardActionWrapper = StyledCardActionWrapper;
+var StyledCustomHeader = _styledComponents["default"].div.withConfig({
+  displayName: "CardStyle__StyledCustomHeader",
+  componentId: "sc-tpku8j-7"
+})(["& > *{margin:0;}"]);
+exports.StyledCustomHeader = StyledCustomHeader;

package/lib/@next/InlineError/InlineError.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface InlineErrorProps extends React.HTMLAttributes<HTMLDivElement> {
+    text: string;
+}
+export declare const InlineError: ({ text, ...props }: InlineErrorProps) => JSX.Element;

package/lib/@next/InlineError/InlineError.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.InlineError = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _InlineErrorStyle = require("./InlineErrorStyle");
+var _Icon = require("../Icon");
+var _colors = require("../utilities/colors");
+var _excluded = ["text"];
+var InlineError = function InlineError(_ref) {
+  var text = _ref.text,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var error = !!text;
+  return error ? /*#__PURE__*/_react["default"].createElement(_InlineErrorStyle.StyledWrapper, props, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-error-warning-fill",
+    fill: _colors.Red.B93,
+    width: 20,
+    height: 20
+  }), /*#__PURE__*/_react["default"].createElement(_InlineErrorStyle.StyledText, {
+    variant: "subtitle2"
+  }, text)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);
+};
+exports.InlineError = InlineError;

package/lib/@next/InlineError/InlineError.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: any;
+export declare const WithInput: any;

package/lib/@next/InlineError/InlineErrorStyle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledText: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../Typography").TypographyProps) => JSX.Element, any, {}, never>;

package/lib/@next/InlineError/InlineErrorStyle.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledWrapper = exports.StyledText = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _spacing = require("../utilities/spacing");
+var _Typography = require("../Typography");
+var _colors = require("../utilities/colors");
+var StyledWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "InlineErrorStyle__StyledWrapper",
+  componentId: "sc-gvg32i-0"
+})(["display:flex;align-items:center;gap:", ";"], _spacing.space4);
+exports.StyledWrapper = StyledWrapper;
+var StyledText = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+  displayName: "InlineErrorStyle__StyledText",
+  componentId: "sc-gvg32i-1"
+})(["margin:0;color:", ";"], _colors.Red.B93);
+exports.StyledText = StyledText;

package/lib/@next/InlineError/index.d.ts

@@ -0,0 +1 @@
+export * from './InlineError';

package/lib/@next/InlineError/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+var _InlineError = require("./InlineError");
+Object.keys(_InlineError).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InlineError[key]) return;
+  exports[key] = _InlineError[key];
+});

package/lib/@next/Link/LinkStyle.js

@@ -9,5 +9,5 @@ var _spacing = require("../utilities/spacing");
 var StyledLink = _styledComponents["default"].a.withConfig({
   displayName: "LinkStyle__StyledLink",
   componentId: "sc-usx229-0"
-})(["display:flex;align-items:center;color:", ";&[data-underline='false']{text-decoration:none;}&[data-monochrome='true']{color:", ";&:hover,&:active{color:", ";}}&:hover{color:rgba(0,86,140,0.9);svg{fill:rgba(0,86,140,0.9);}}&:active{color:", ";svg{fill:", ";}}svg{fill:", ";margin-left:", ";padding-bottom:", ";height:18px;}"], _colors.Blue.S99, _colors.Neutral.B18, _colors.Neutral.B00, _colors.Blue.S100, _colors.Blue.S100, _colors.Blue.S99, _spacing.space2, _spacing.space2);
+})(["display:flex;align-items:center;color:", ";&[data-underline='false']{text-decoration:none;}&[data-monochrome='true']{color:", ";&:hover,&:active{color:", ";svg{fill:", ";}}svg{fill:", ";}}&:hover{color:rgba(0,86,140,0.9);svg{fill:rgba(0,86,140,0.9);}}&:active{color:", ";svg{fill:", ";}}svg{fill:", ";margin-left:", ";padding-bottom:", ";height:18px;}"], _colors.Blue.S99, _colors.Neutral.B18, _colors.Neutral.B00, _colors.Neutral.B00, _colors.Neutral.B18, _colors.Blue.S100, _colors.Blue.S100, _colors.Blue.S99, _spacing.space2, _spacing.space2);
 exports.StyledLink = StyledLink;

package/lib/@next/Spinner/Spinner.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { IconProps } from '../Icon';
-export declare type SpinnerProps = Omit<IconProps, 'name'>;
-export declare const Spinner: (props: SpinnerProps) => JSX.Element;
+export declare type Size = 'small' | 'large';
+export declare type SpinnerProps = Omit<IconProps, 'name'> & {
+    label?: string;
+    size?: Size;
+};
+export declare const Spinner: ({ label, size, ...props }: SpinnerProps) => JSX.Element;

package/lib/@next/Spinner/Spinner.js

@@ -4,18 +4,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.Spinner = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Icon = require("../Icon");
-var StyledWrapper = _styledComponents["default"].div.withConfig({
-  displayName: "Spinner__StyledWrapper",
-  componentId: "sc-ynwr5u-0"
-})(["display:flex;justify-content:center;@keyframes p-keyframes-spin{to{transform:rotate(1turn);}}svg{animation:p-keyframes-spin 800ms linear infinite;}"]);
-var Spinner = function Spinner(props) {
-  return /*#__PURE__*/_react["default"].createElement(StyledWrapper, {
+var _SpinnerStyle = require("./SpinnerStyle");
+var _excluded = ["label", "size"];
+var _iconSizeMapping, _labelVariantMapping;
+var iconSizeMapping = (_iconSizeMapping = {}, _iconSizeMapping['small'] = '18px', _iconSizeMapping['large'] = '48px', _iconSizeMapping);
+var labelVariantMapping = (_labelVariantMapping = {}, _labelVariantMapping['small'] = 'body1', _labelVariantMapping['large'] = 'subtitle1', _labelVariantMapping);
+var Spinner = function Spinner(_ref) {
+  var label = _ref.label,
+    size = _ref.size,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_SpinnerStyle.StyledWrapper, {
     className: "spinner-container"
   }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, (0, _extends2["default"])({
-    name: "ri-loader"
-  }, props)));
+    name: "ri-loader",
+    height: iconSizeMapping[size],
+    width: iconSizeMapping[size]
+  }, props)), label && /*#__PURE__*/_react["default"].createElement(_SpinnerStyle.Label, {
+    variant: labelVariantMapping[size],
+    "data-size": size
+  }, label));
 };
 exports.Spinner = Spinner;

package/lib/@next/Spinner/Spinner.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: any;
+export declare const WithLabel: any;

package/lib/@next/Spinner/SpinnerStyle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../Typography").TypographyProps) => JSX.Element, any, {}, never>;

package/lib/@next/Spinner/SpinnerStyle.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledWrapper = exports.Label = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = require("../Typography");
+var _spacing = require("../utilities/spacing");
+var StyledWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "SpinnerStyle__StyledWrapper",
+  componentId: "sc-1rqoa36-0"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;@keyframes p-keyframes-spin{to{transform:rotate(1turn);}}svg{animation:p-keyframes-spin 800ms linear infinite;}"]);
+exports.StyledWrapper = StyledWrapper;
+var Label = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+  displayName: "SpinnerStyle__Label",
+  componentId: "sc-1rqoa36-1"
+})(["margin-bottom:0;&[data-size='large']{margin-top:", ";}&[data-size='small']{margin-top:", ";}"], _spacing.space16, _spacing.space4);
+exports.Label = Label;

package/lib/@next/Switch/Switch.d.ts

@@ -4,5 +4,6 @@ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     disabled?: boolean;
     onChange: () => void;
     value: string;
+    withIcon?: boolean;
 }
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

package/lib/@next/Switch/Switch.js

@@ -6,14 +6,26 @@ exports.Switch = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
+var _Icon = require("../Icon");
+var _colors = require("../utilities/colors");
 var _SwitchStyle = require("./SwitchStyle");
-var _excluded = ["checked", "disabled", "onChange", "value"];
+var _excluded = ["checked", "disabled", "onChange", "value", "withIcon"];
 var Switch = /*#__PURE__*/_react["default"].forwardRef(function Switch(_ref, ref) {
   var checked = _ref.checked,
     disabled = _ref.disabled,
     onChange = _ref.onChange,
     value = _ref.value,
+    withIcon = _ref.withIcon,
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var IconRender = function IconRender() {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+      name: "ri-check",
+      fill: disabled ? _colors.Neutral.B85 : _colors.Neutral.B100
+    }), /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+      name: "ri-close",
+      fill: disabled ? _colors.Neutral.B85 : _colors.Neutral.B100
+    }));
+  };
   return /*#__PURE__*/_react["default"].createElement(_SwitchStyle.LabelStyle, null, /*#__PURE__*/_react["default"].createElement(_SwitchStyle.InputStyle, (0, _extends2["default"])({
     value: value
   }, otherProps, {
@@ -21,9 +33,11 @@ var Switch = /*#__PURE__*/_react["default"].forwardRef(function Switch(_ref, ref
     defaultChecked: checked,
     type: "checkbox",
     onChange: onChange,
-    ref: ref
+    ref: ref,
+    "data-with-icon": withIcon
   })), /*#__PURE__*/_react["default"].createElement(_SwitchStyle.SwitchStyle, {
-    "data-disabled": disabled
-  }));
+    "data-disabled": disabled,
+    "data-with-icon": withIcon
+  }, withIcon && /*#__PURE__*/_react["default"].createElement(IconRender, null)));
 });
 exports.Switch = Switch;

package/lib/@next/Switch/Switch.stories.d.ts

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Interactive: any;
+export declare const Default: any;
+export declare const WithIcon: any;

package/lib/@next/Switch/SwitchStyle.js

@@ -9,12 +9,12 @@ var _colors = require("../utilities/colors");
 var SwitchStyle = _styledComponents["default"].div.withConfig({
   displayName: "SwitchStyle",
   componentId: "sc-7dlucf-0"
-})(["position:relative;width:", ";height:", ";background-color:", ";&[data-disabled='true']{background-color:", ";}border-radius:", ";padding:0;transition:300ms all;@media (max-width:", "){width:38px;height:22px;}&:before{transition:100ms all;content:'';position:absolute;width:16px;height:16px;border-radius:16px;top:50%;left:4px;background:", ";transform:translate(0,-50%);@media (max-width:", "){width:14px;height:14px;}}"], _.Spacing.space40, _.Spacing.space24, _colors.Neutral.B40, _colors.Neutral.B95, _.Spacing.space24, _.Breakpoints.large, _colors.Neutral.B100, _.Breakpoints.large);
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative;width:", ";&[data-with-icon]{width:48px;}&[data-with-icon] svg{height:16px;}height:", ";background-color:", ";&[data-disabled='true']{background-color:", ";cursor:not-allowed;}border-radius:", ";padding:0;padding-left:8px;padding-right:8px;transition:300ms all;@media (max-width:", "){width:38px;&[data-with-icon]{width:44px;}&[data-with-icon] svg{height:14px;}height:22px;}&:before{transition:100ms all;content:'';position:absolute;width:16px;height:16px;border-radius:16px;top:50%;left:4px;background:", ";box-shadow:0px 1px 3px rgba(0,0,0,0.1);transform:translate(0,-50%);@media (max-width:", "){width:14px;height:14px;}}"], _.Spacing.space40, _.Spacing.space24, _colors.Neutral.B40, _colors.Neutral.B95, _.Spacing.space24, _.Breakpoints.large, _colors.Neutral.B100, _.Breakpoints.large);
 exports.SwitchStyle = SwitchStyle;
 var InputStyle = _styledComponents["default"].input.withConfig({
   displayName: "SwitchStyle__InputStyle",
   componentId: "sc-7dlucf-1"
-})(["opacity:0;position:absolute;&:checked + ", "{background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{transform:translate(16px,-50%);}}"], SwitchStyle, _colors.Blue.S99, _colors.Neutral.B95);
+})(["opacity:0;position:absolute;&:checked + ", "{background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{transform:translate(16px,-50%);}&[data-with-icon]{&:before{transform:translate(24px,-50%);}}}& + ", " svg:nth-child(1){visibility:hidden;}& + ", " svg:nth-child(2){visibility:visible;}&:checked + ", " svg:nth-child(1){visibility:visible;}&:checked + ", " svg:nth-child(2){visibility:hidden;}"], SwitchStyle, _colors.Blue.S99, _colors.Neutral.B95, SwitchStyle, SwitchStyle, SwitchStyle, SwitchStyle);
 exports.InputStyle = InputStyle;
 var LabelStyle = _styledComponents["default"].label.withConfig({
   displayName: "SwitchStyle__LabelStyle",

package/lib/@next/index.d.ts

@@ -32,3 +32,4 @@ export { Tooltip, TooltipPosition, TooltipProps } from './Tooltip';
 export { Typography, TypographyProps } from './Typography';
 export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };
 export { Switch } from './Switch';
+export { InlineError, InlineErrorProps } from './InlineError';

package/lib/@next/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.LinkProps = exports.Link = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
+exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.LinkProps = exports.Link = exports.InlineErrorProps = exports.InlineError = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
 var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
 exports.BorderRadius = BorderRadius;
 var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
@@ -113,5 +113,8 @@ exports.Typography = _Typography.Typography;
 exports.TypographyProps = _Typography.TypographyProps;
 var _Switch = require("./Switch");
 exports.Switch = _Switch.Switch;
+var _InlineError = require("./InlineError");
+exports.InlineError = _InlineError.InlineError;
+exports.InlineErrorProps = _InlineError.InlineErrorProps;
 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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.202",
+  "version": "4.0.204",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",
@@ -27,7 +27,8 @@
     "storybook:build": "rm -rf .out && npm run storybook:build:assets && npm run build:icon && npm run build:next:icon && build-storybook -o .out -s dist/public",
     "storybook:build:test": "rm -rf storybook-static && npm run storybook:build:assets && npm run build:icon && npm run build:next:icon && build-storybook -o storybook-static -s dist/public",
     "storybook:build:assets": "webpack",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "check-definition-files": "node checkDefinitionFiles.js"
   },
   "author": "Glints",
   "license": "MIT",