glints-aries 4.0.197 → 4.0.199

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { IndexTableProps } from 'polaris-glints';
+import { IndexTableProps as PolarisIndexTableProps } from 'polaris-glints';
+declare type IndexTableProps = Omit<PolarisIndexTableProps, 'emptySearchTitle'>;
 declare const IndexTable: {
-    ({ bulkActions, children, itemCount, selectedItemsCount, ...props }: IndexTableProps): JSX.Element;
+    ({ bulkActions, children, itemCount, selectedItemsCount, loading, emptyState, ...props }: IndexTableProps): JSX.Element;
     Cell: React.NamedExoticComponent<import("polaris-glints/build/ts/latest/src/components/IndexTable").CellProps>;
     Row: ({ children, ...props }: import("polaris-glints").RowProps) => JSX.Element;
 };

package/es/@next/IndexTable/IndexTable.js

@@ -1,17 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount"],
+var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount", "loading", "emptyState"],
   _excluded2 = ["checked", "onChange"];
 import React from 'react';
-import { Cell, IndexTable as PolarisIndexTable, IndexTableProps } from 'polaris-glints';
+import { Cell, IndexTable as PolarisIndexTable } from 'polaris-glints';
 import { Checkbox } from '../Checkbox';
 import { Row } from './components/Row/Row';
 import { StyledIndexTable } from './IndexTableStyle';
+import { LoadingState } from './components/LoadingState';
 var IndexTable = function IndexTable(_ref) {
   var bulkActions = _ref.bulkActions,
     children = _ref.children,
     itemCount = _ref.itemCount,
     selectedItemsCount = _ref.selectedItemsCount,
+    loading = _ref.loading,
+    emptyState = _ref.emptyState,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var renderCheckboxHeader = function renderCheckboxHeader(_ref2) {
     var checked = _ref2.checked,
@@ -26,11 +29,17 @@ var IndexTable = function IndexTable(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledIndexTable, null), /*#__PURE__*/React.createElement(PolarisIndexTable, _extends({
     bulkActions: bulkActions,
     checkbox: renderCheckboxHeader,
-    itemCount: itemCount,
-    selectedItemsCount: selectedItemsCount
+    itemCount: loading ? 0 : itemCount,
+    selectedItemsCount: selectedItemsCount,
+    emptySearchTitle: null,
+    loading: false,
+    emptyState: loading ? /*#__PURE__*/React.createElement(LoadingState, {
+      label: props.loadingLabel,
+      colSpan: props.headings.length
+    }) : emptyState
   }, props), children));
 };
 IndexTable.Cell = Cell;
 IndexTable.Row = Row;
 export { useIndexResourceState } from 'polaris-glints';
-export { IndexTable, IndexTableProps };
+export { IndexTable };

package/es/@next/IndexTable/components/LoadingState/LoadingState.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface LoadingStateProps {
+    colSpan: number;
+    label?: string;
+}
+export declare const LoadingState: ({ colSpan, label }: LoadingStateProps) => JSX.Element;
+export {};

package/es/@next/IndexTable/components/LoadingState/LoadingState.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Spinner } from '../../../Spinner';
+import { Blue, Neutral } from '../../../utilities/colors';
+import { LoadingStateContainer, SpinnerContainer } from './LoadingStateStyle';
+import { Typography } from '../../../Typography';
+export var LoadingState = function LoadingState(_ref) {
+  var colSpan = _ref.colSpan,
+    label = _ref.label;
+  return /*#__PURE__*/React.createElement(LoadingStateContainer, {
+    colSpan: colSpan + 1
+  }, /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
+    height: 48,
+    width: 48,
+    fill: Blue.S99
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle1",
+    color: Neutral.B18
+  }, label)));
+};

package/es/@next/IndexTable/components/LoadingState/LoadingStateStyle.d.ts

@@ -0,0 +1,2 @@
+export declare const LoadingStateContainer: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const SpinnerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/IndexTable/components/LoadingState/LoadingStateStyle.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Breakpoints } from '../../..';
+export var LoadingStateContainer = styled.td.withConfig({
+  displayName: "LoadingStateStyle__LoadingStateContainer",
+  componentId: "sc-1pvfz22-0"
+})(["height:480px;"]);
+export var SpinnerContainer = styled.div.withConfig({
+  displayName: "LoadingStateStyle__SpinnerContainer",
+  componentId: "sc-1pvfz22-1"
+})(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex-direction:column;gap:16px;p{margin:0;}@media (max-width:", "){position:absolute;top:0;left:0;}"], Breakpoints.large);

package/es/@next/IndexTable/components/LoadingState/index.d.ts

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

package/es/@next/IndexTable/components/LoadingState/index.js

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    checked?: boolean;
+    disabled?: boolean;
+    onChange: () => void;
+    value: string;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["checked", "disabled", "onChange", "value"];
+import React from 'react';
+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,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(LabelStyle, null, /*#__PURE__*/React.createElement(InputStyle, _extends({
+    value: value
+  }, otherProps, {
+    disabled: disabled,
+    defaultChecked: checked,
+    type: "checkbox",
+    onChange: onChange,
+    ref: ref
+  })), /*#__PURE__*/React.createElement(SwitchStyle, {
+    "data-disabled": disabled
+  }));
+});

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

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

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

@@ -0,0 +1,3 @@
+export declare const SwitchStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputStyle: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;

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

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Breakpoints, Spacing } from '..';
+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);
+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);
+export var LabelStyle = styled.label.withConfig({
+  displayName: "SwitchStyle__LabelStyle",
+  componentId: "sc-7dlucf-2"
+})(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);

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

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

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

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

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

@@ -4,6 +4,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     value?: string;
     onRemove?: (() => void) | null;
     textColor?: string;
+    disabled?: boolean;
 }
 export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
 export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;

package/es/@next/Tag/Tag.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "onRemove", "value", "textColor"];
+var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled"];
 import React from 'react';
 import { Icon } from '../Icon';
 import { Typography } from '../Typography';
@@ -11,10 +11,21 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
     onRemove = _ref.onRemove,
     value = _ref.value,
     textColor = _ref.textColor,
+    onClick = _ref.onClick,
+    disabled = _ref.disabled,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var handleTextColor = function handleTextColor() {
+    if (disabled) {
+      return Neutral.B85;
+    }
+    if (textColor) {
+      return textColor;
+    }
+    return Neutral.B18;
+  };
   var content = typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/React.createElement(Typography, {
     variant: "caption",
-    color: textColor != null ? textColor : Neutral.B18,
+    color: handleTextColor(),
     as: 'span'
   }, children) : children;
   var removeButton = onRemove && /*#__PURE__*/React.createElement(TagRemoveContainerStyle, null, /*#__PURE__*/React.createElement(TagIconWrapper, {
@@ -29,7 +40,12 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
   return /*#__PURE__*/React.createElement(TagStyle, _extends({
     ref: ref
   }, props, {
-    value: value
+    value: value,
+    onClick: !disabled && onClick,
+    "data-clickable": !!onClick,
+    role: !!onClick ? 'button' : undefined,
+    "data-disabled": disabled,
+    as: !!onClick ? 'button' : 'div'
   }), /*#__PURE__*/React.createElement(TagContentStyle, {
     "data-removeable": !!onRemove
   }, content), removeButton);

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

@@ -3,3 +3,5 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Default: any;
 export declare const Removeable: any;
+export declare const Clickable: any;
+export declare const ClickableDisabled: any;

package/es/@next/Tag/TagStyle.js

@@ -6,7 +6,7 @@ import { space4, space8 } from '../utilities/spacing';
 export var TagContentStyle = styled.span.withConfig({
   displayName: "TagStyle__TagContentStyle",
   componentId: "sc-r1wv7a-0"
-})(["padding:", " ", ";&[data-removeable='true']{padding-right:0;}"], space4, space8);
+})(["padding:", " ", ";transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], space4, space8);
 export var TagRemoveContainerStyle = styled.div.withConfig({
   displayName: "TagStyle__TagRemoveContainerStyle",
   componentId: "sc-r1wv7a-1"
@@ -18,4 +18,4 @@ export var TagIconWrapper = styled.div.withConfig({
 export var TagStyle = styled.div.withConfig({
   displayName: "TagStyle",
   componentId: "sc-r1wv7a-3"
-})(["display:inline-flex;align-items:center;background-color:", ";border-radius:", ";width:fit-content;@media (max-width:", "){font-size:12px;}& svg{padding:0;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}"], Blue.S08, borderRadius4, Breakpoints.large, Neutral.B95, borderRadiusHalf, Neutral.B40, Neutral.B100, borderRadiusHalf);
+})(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&[data-clickable='true']{cursor:pointer;&:hover{outline:1px solid ", "E6;}&:active{outline:1px solid ", ";}&:focus-visible{outline:1px solid ", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}&[data-disabled='true']{cursor:not-allowed;outline:none;background-color:", ";&:focus-visible{outline:none;box-shadow:none;}}}@media (max-width:", "){font-size:12px;}& svg{padding:0;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}"], Blue.S08, borderRadius4, Blue.S100, Blue.S100, Blue.S100, Neutral.B100, Blue.S54, Neutral.B95, Breakpoints.large, Neutral.B95, borderRadiusHalf, Neutral.B40, Neutral.B100, borderRadiusHalf);

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

@@ -29,3 +29,4 @@ 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';

package/es/@next/index.js

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

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { IndexTableProps } from 'polaris-glints';
+import { IndexTableProps as PolarisIndexTableProps } from 'polaris-glints';
+declare type IndexTableProps = Omit<PolarisIndexTableProps, 'emptySearchTitle'>;
 declare const IndexTable: {
-    ({ bulkActions, children, itemCount, selectedItemsCount, ...props }: IndexTableProps): JSX.Element;
+    ({ bulkActions, children, itemCount, selectedItemsCount, loading, emptyState, ...props }: IndexTableProps): JSX.Element;
     Cell: React.NamedExoticComponent<import("polaris-glints/build/ts/latest/src/components/IndexTable").CellProps>;
     Row: ({ children, ...props }: import("polaris-glints").RowProps) => JSX.Element;
 };

package/lib/@next/IndexTable/IndexTable.js

@@ -7,18 +7,20 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _polarisGlints = require("polaris-glints");
-exports.IndexTableProps = _polarisGlints.IndexTableProps;
 exports.useIndexResourceState = _polarisGlints.useIndexResourceState;
 var _Checkbox = require("../Checkbox");
 var _Row = require("./components/Row/Row");
 var _IndexTableStyle = require("./IndexTableStyle");
-var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount"],
+var _LoadingState = require("./components/LoadingState");
+var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount", "loading", "emptyState"],
   _excluded2 = ["checked", "onChange"];
 var IndexTable = function IndexTable(_ref) {
   var bulkActions = _ref.bulkActions,
     children = _ref.children,
     itemCount = _ref.itemCount,
     selectedItemsCount = _ref.selectedItemsCount,
+    loading = _ref.loading,
+    emptyState = _ref.emptyState,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var renderCheckboxHeader = function renderCheckboxHeader(_ref2) {
     var checked = _ref2.checked,
@@ -33,8 +35,14 @@ var IndexTable = function IndexTable(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_IndexTableStyle.StyledIndexTable, null), /*#__PURE__*/_react["default"].createElement(_polarisGlints.IndexTable, (0, _extends2["default"])({
     bulkActions: bulkActions,
     checkbox: renderCheckboxHeader,
-    itemCount: itemCount,
-    selectedItemsCount: selectedItemsCount
+    itemCount: loading ? 0 : itemCount,
+    selectedItemsCount: selectedItemsCount,
+    emptySearchTitle: null,
+    loading: false,
+    emptyState: loading ? /*#__PURE__*/_react["default"].createElement(_LoadingState.LoadingState, {
+      label: props.loadingLabel,
+      colSpan: props.headings.length
+    }) : emptyState
   }, props), children));
 };
 exports.IndexTable = IndexTable;

package/lib/@next/IndexTable/components/LoadingState/LoadingState.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface LoadingStateProps {
+    colSpan: number;
+    label?: string;
+}
+export declare const LoadingState: ({ colSpan, label }: LoadingStateProps) => JSX.Element;
+export {};

package/lib/@next/IndexTable/components/LoadingState/LoadingState.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.LoadingState = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Spinner = require("../../../Spinner");
+var _colors = require("../../../utilities/colors");
+var _LoadingStateStyle = require("./LoadingStateStyle");
+var _Typography = require("../../../Typography");
+var LoadingState = function LoadingState(_ref) {
+  var colSpan = _ref.colSpan,
+    label = _ref.label;
+  return /*#__PURE__*/_react["default"].createElement(_LoadingStateStyle.LoadingStateContainer, {
+    colSpan: colSpan + 1
+  }, /*#__PURE__*/_react["default"].createElement(_LoadingStateStyle.SpinnerContainer, null, /*#__PURE__*/_react["default"].createElement(_Spinner.Spinner, {
+    height: 48,
+    width: 48,
+    fill: _colors.Blue.S99
+  }), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "subtitle1",
+    color: _colors.Neutral.B18
+  }, label)));
+};
+exports.LoadingState = LoadingState;

package/lib/@next/IndexTable/components/LoadingState/LoadingStateStyle.d.ts

@@ -0,0 +1,2 @@
+export declare const LoadingStateContainer: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const SpinnerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/@next/IndexTable/components/LoadingState/LoadingStateStyle.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SpinnerContainer = exports.LoadingStateContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("../../..");
+var LoadingStateContainer = _styledComponents["default"].td.withConfig({
+  displayName: "LoadingStateStyle__LoadingStateContainer",
+  componentId: "sc-1pvfz22-0"
+})(["height:480px;"]);
+exports.LoadingStateContainer = LoadingStateContainer;
+var SpinnerContainer = _styledComponents["default"].div.withConfig({
+  displayName: "LoadingStateStyle__SpinnerContainer",
+  componentId: "sc-1pvfz22-1"
+})(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex-direction:column;gap:16px;p{margin:0;}@media (max-width:", "){position:absolute;top:0;left:0;}"], _.Breakpoints.large);
+exports.SpinnerContainer = SpinnerContainer;

package/lib/@next/IndexTable/components/LoadingState/index.d.ts

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

package/lib/@next/IndexTable/components/LoadingState/index.js

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    checked?: boolean;
+    disabled?: boolean;
+    onChange: () => void;
+    value: string;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+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 _SwitchStyle = require("./SwitchStyle");
+var _excluded = ["checked", "disabled", "onChange", "value"];
+var Switch = /*#__PURE__*/_react["default"].forwardRef(function Switch(_ref, ref) {
+  var checked = _ref.checked,
+    disabled = _ref.disabled,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_SwitchStyle.LabelStyle, null, /*#__PURE__*/_react["default"].createElement(_SwitchStyle.InputStyle, (0, _extends2["default"])({
+    value: value
+  }, otherProps, {
+    disabled: disabled,
+    defaultChecked: checked,
+    type: "checkbox",
+    onChange: onChange,
+    ref: ref
+  })), /*#__PURE__*/_react["default"].createElement(_SwitchStyle.SwitchStyle, {
+    "data-disabled": disabled
+  }));
+});
+exports.Switch = Switch;

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

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

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

@@ -0,0 +1,3 @@
+export declare const SwitchStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputStyle: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SwitchStyle = exports.LabelStyle = exports.InputStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("..");
+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);
+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);
+exports.InputStyle = InputStyle;
+var LabelStyle = _styledComponents["default"].label.withConfig({
+  displayName: "SwitchStyle__LabelStyle",
+  componentId: "sc-7dlucf-2"
+})(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);
+exports.LabelStyle = LabelStyle;

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

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

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

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

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

@@ -4,6 +4,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     value?: string;
     onRemove?: (() => void) | null;
     textColor?: string;
+    disabled?: boolean;
 }
 export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
 export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;

package/lib/@next/Tag/Tag.js

@@ -10,16 +10,27 @@ var _Icon = require("../Icon");
 var _Typography = require("../Typography");
 var _colors = require("../utilities/colors");
 var _TagStyle = require("./TagStyle");
-var _excluded = ["children", "onRemove", "value", "textColor"];
+var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled"];
 var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
   var children = _ref.children,
     onRemove = _ref.onRemove,
     value = _ref.value,
     textColor = _ref.textColor,
+    onClick = _ref.onClick,
+    disabled = _ref.disabled,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var handleTextColor = function handleTextColor() {
+    if (disabled) {
+      return _colors.Neutral.B85;
+    }
+    if (textColor) {
+      return textColor;
+    }
+    return _colors.Neutral.B18;
+  };
   var content = typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     variant: "caption",
-    color: textColor != null ? textColor : _colors.Neutral.B18,
+    color: handleTextColor(),
     as: 'span'
   }, children) : children;
   var removeButton = onRemove && /*#__PURE__*/_react["default"].createElement(_TagStyle.TagRemoveContainerStyle, null, /*#__PURE__*/_react["default"].createElement(_TagStyle.TagIconWrapper, {
@@ -34,7 +45,12 @@ var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
   return /*#__PURE__*/_react["default"].createElement(_TagStyle.TagStyle, (0, _extends2["default"])({
     ref: ref
   }, props, {
-    value: value
+    value: value,
+    onClick: !disabled && onClick,
+    "data-clickable": !!onClick,
+    role: !!onClick ? 'button' : undefined,
+    "data-disabled": disabled,
+    as: !!onClick ? 'button' : 'div'
   }), /*#__PURE__*/_react["default"].createElement(_TagStyle.TagContentStyle, {
     "data-removeable": !!onRemove
   }, content), removeButton);

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

@@ -3,3 +3,5 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Default: any;
 export declare const Removeable: any;
+export declare const Clickable: any;
+export declare const ClickableDisabled: any;

package/lib/@next/Tag/TagStyle.js

@@ -11,7 +11,7 @@ var _spacing = require("../utilities/spacing");
 var TagContentStyle = _styledComponents["default"].span.withConfig({
   displayName: "TagStyle__TagContentStyle",
   componentId: "sc-r1wv7a-0"
-})(["padding:", " ", ";&[data-removeable='true']{padding-right:0;}"], _spacing.space4, _spacing.space8);
+})(["padding:", " ", ";transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], _spacing.space4, _spacing.space8);
 exports.TagContentStyle = TagContentStyle;
 var TagRemoveContainerStyle = _styledComponents["default"].div.withConfig({
   displayName: "TagStyle__TagRemoveContainerStyle",
@@ -26,5 +26,5 @@ exports.TagIconWrapper = TagIconWrapper;
 var TagStyle = _styledComponents["default"].div.withConfig({
   displayName: "TagStyle",
   componentId: "sc-r1wv7a-3"
-})(["display:inline-flex;align-items:center;background-color:", ";border-radius:", ";width:fit-content;@media (max-width:", "){font-size:12px;}& svg{padding:0;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}"], _colors.Blue.S08, _borderRadius.borderRadius4, _.Breakpoints.large, _colors.Neutral.B95, _borderRadius.borderRadiusHalf, _colors.Neutral.B40, _colors.Neutral.B100, _borderRadius.borderRadiusHalf);
+})(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&[data-clickable='true']{cursor:pointer;&:hover{outline:1px solid ", "E6;}&:active{outline:1px solid ", ";}&:focus-visible{outline:1px solid ", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}&[data-disabled='true']{cursor:not-allowed;outline:none;background-color:", ";&:focus-visible{outline:none;box-shadow:none;}}}@media (max-width:", "){font-size:12px;}& svg{padding:0;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}"], _colors.Blue.S08, _borderRadius.borderRadius4, _colors.Blue.S100, _colors.Blue.S100, _colors.Blue.S100, _colors.Neutral.B100, _colors.Blue.S54, _colors.Neutral.B95, _.Breakpoints.large, _colors.Neutral.B95, _borderRadius.borderRadiusHalf, _colors.Neutral.B40, _colors.Neutral.B100, _borderRadius.borderRadiusHalf);
 exports.TagStyle = TagStyle;

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

@@ -29,3 +29,4 @@ 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';

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.TabProps = exports.TabModel = exports.Tab = 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.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = 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.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.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = 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"));
@@ -102,5 +102,7 @@ exports.TooltipProps = _Tooltip.TooltipProps;
 var _Typography = require("./Typography");
 exports.Typography = _Typography.Typography;
 exports.TypographyProps = _Typography.TypographyProps;
+var _Switch = require("./Switch");
+exports.Switch = _Switch.Switch;
 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.197",
+  "version": "4.0.199",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",
@@ -26,7 +26,8 @@
     "storybook": "start-storybook -p 6006",
     "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"
+    "storybook:build:assets": "webpack",
+    "prepare": "husky install"
   },
   "author": "Glints",
   "license": "MIT",
@@ -102,9 +103,11 @@
     "fork-ts-checker-webpack-plugin": "^1.3.4",
     "generate-changelog": "^1.7.1",
     "glob": "^7.1.6",
+    "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "jest-styled-components": "^7.0.2",
+    "lint-staged": "^13.1.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "prettier": "^2.8.1",
@@ -162,5 +165,11 @@
     "immer": "^9.0.6",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11"
+  },
+  "lint-staged": {
+    "**/*.{ts,tsx}": [
+      "yarn lint",
+      "prettier --write"
+    ]
   }
 }