glints-aries 4.0.244 → 4.0.246

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

@@ -7,6 +7,7 @@ export declare const WithErrorNonSearchable: any;
 export declare const NonSearchableDisabled: any;
 export declare const SearchableMultiSelect: any;
 export declare const SearchableSingleSelect: any;
+export declare const SearchableSingleWithInputState: any;
 export declare const MultiSelectScrollable: any;
 export declare const WithInlineError: any;
 export declare const SearchableDisabled: any;

package/es/@next/Select/components/Activator/ActivatorTextInput.js

@@ -71,6 +71,7 @@ export var ActivatorTextInput = function ActivatorTextInput(_ref) {
     prefix: prefix,
     filterOptions: filterOptions,
     onFocus: onFocus,
+    onInputChange: onChange,
     onSelect: onSelect,
     error: hasError,
     disabled: disabled,

package/es/@next/Select/components/SearchableSelectInput/SearchableSelectInput.d.ts

@@ -9,6 +9,7 @@ export interface SearchableSelectState {
 export declare type SearchableSelectInputProps = Omit<InputProps, 'type' | 'onChange' | 'onSelect'> & {
     canClear?: boolean;
     filterOptions?: (str: string) => Option[];
+    onInputChange?(value: string): void;
     onSelect?({ value }: {
         value: string;
     }): void;
@@ -23,6 +24,7 @@ export declare type SearchableSelectInputProps = Omit<InputProps, 'type' | 'onCh
 export declare const SearchableSelectInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "onChange" | "onSelect"> & {
     canClear?: boolean;
     filterOptions?: (str: string) => Option[];
+    onInputChange?(value: string): void;
     onSelect?({ value }: {
         value: string;
     }): void;

package/es/@next/Select/components/SearchableSelectInput/SearchableSelectInput.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["disabled", "error", "filterOptions", "onSelect", "placeholder", "prefix", "selectedValue", "width", "inputValue", "updateInputValue", "onFocus", "searchableSelectState", "updateSearchableSelectState", "options", "updateMenuOptions"];
+var _excluded = ["disabled", "error", "filterOptions", "onSelect", "placeholder", "prefix", "selectedValue", "width", "inputValue", "updateInputValue", "onInputChange", "onFocus", "searchableSelectState", "updateSearchableSelectState", "options", "updateMenuOptions"];
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { StyledInput, StyledPrefixContainer } from '../../../Input/InputStyle';
 import { ClearSelected } from './ClearSelected';
@@ -17,6 +17,7 @@ export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSe
     width = _ref.width,
     inputValue = _ref.inputValue,
     updateInputValue = _ref.updateInputValue,
+    onInputChange = _ref.onInputChange,
     onFocus = _ref.onFocus,
     _ref$searchableSelect = _ref.searchableSelectState,
     showInput = _ref$searchableSelect.showInput,
@@ -49,6 +50,9 @@ export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSe
   };
   var handleInputChange = function handleInputChange(e) {
     var str = e.currentTarget.value;
+    if (onInputChange) {
+      onInputChange(str);
+    }
     updateInputValue(str);
     var filteredOptions = filterOptions(str);
     updateMenuOptions(filteredOptions);

package/es/@next/Select/selectStoryHelper/SearchableSingleSelect.d.ts

@@ -4,4 +4,5 @@ interface SearchableSingleSelectProps {
     data?: Option[];
 }
 export declare const SearchableSingle: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
+export declare const SearchableSingleWithInputState: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
 export {};

package/es/@next/Select/selectStoryHelper/SearchableSingleSelect.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["data"];
+var _excluded = ["data"],
+  _excluded2 = ["data"];
 import React, { useState } from 'react';
 import { Select } from '../Select';
 export var SearchableSingle = function SearchableSingle(_ref) {
@@ -21,4 +22,34 @@ export var SearchableSingle = function SearchableSingle(_ref) {
     searchable: true,
     label: "Label"
   }));
+};
+export var SearchableSingleWithInputState = function SearchableSingleWithInputState(_ref3) {
+  var data = _ref3.data,
+    args = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  var _useState2 = useState(''),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = useState(''),
+    selected = _useState3[0],
+    setSelected = _useState3[1];
+  var handleInputChange = function handleInputChange(value) {
+    setInputValue(value);
+  };
+  var handleSelect = function handleSelect(_ref4) {
+    var value = _ref4.value;
+    setSelected(value);
+  };
+  return /*#__PURE__*/React.createElement(Select, _extends({}, args, {
+    onSelect: handleSelect,
+    options: data,
+    selectedValues: [selected],
+    searchableProps: {
+      inputValue: inputValue,
+      onInputChange: function onInputChange(value) {
+        return handleInputChange(value);
+      }
+    },
+    width: "600px",
+    label: "Label"
+  }));
 };

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

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

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

@@ -1,17 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["checked", "disabled", "onChange", "value", "withIcon"];
+var _excluded = ["checked", "disabled", "onChange", "value", "withIcon", "checkedText", "uncheckedText", "checkedBackgroundColor"];
 import React from 'react';
 import { Icon } from '../Icon';
 import { Neutral } from '../utilities/colors';
-import { InputStyle, LabelStyle, SwitchStyle } from './SwitchStyle';
+import { InputStyle, LabelStyle, SwitchStyle, SwitchTextStyle } 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,
+    checkedText = _ref.checkedText,
+    uncheckedText = _ref.uncheckedText,
+    checkedBackgroundColor = _ref.checkedBackgroundColor,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var withText = Boolean(checkedText) && Boolean(uncheckedText);
+  if (withText && withIcon) {
+    console.warn('Switch component cannot have both text and icon');
+  }
   var IconRender = function IconRender() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
       name: "ri-check",
@@ -21,6 +28,15 @@ export var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref, ref) {
       fill: disabled ? Neutral.B85 : Neutral.B100
     }));
   };
+  var RenderSwitchText = function RenderSwitchText() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SwitchTextStyle, {
+      variant: "overline",
+      color: disabled ? Neutral.B85 : Neutral.B100
+    }, checkedText), /*#__PURE__*/React.createElement(SwitchTextStyle, {
+      variant: "overline",
+      color: disabled ? Neutral.B85 : Neutral.B100
+    }, uncheckedText));
+  };
   return /*#__PURE__*/React.createElement(LabelStyle, null, /*#__PURE__*/React.createElement(InputStyle, _extends({
     value: value
   }, otherProps, {
@@ -29,9 +45,12 @@ export var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref, ref) {
     type: "checkbox",
     onChange: onChange,
     ref: ref,
-    "data-with-icon": withIcon
+    "data-with-icon": !withText && withIcon,
+    "data-with-text": withText,
+    backgroundColor: checkedBackgroundColor
   })), /*#__PURE__*/React.createElement(SwitchStyle, {
     "data-disabled": disabled,
-    "data-with-icon": withIcon
-  }, withIcon && /*#__PURE__*/React.createElement(IconRender, null)));
+    "data-with-icon": !withText && withIcon,
+    "data-with-text": withText
+  }, !withText && withIcon && /*#__PURE__*/React.createElement(IconRender, null), withText && /*#__PURE__*/React.createElement(RenderSwitchText, null)));
 });

package/es/@next/Switch/Switch.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 WithIcon: any;
+export declare const WithText: any;
+export declare const WithTextAndCustomBackgroundColor: any;

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

@@ -1,3 +1,7 @@
+/// <reference types="react" />
+export declare const SwitchTextStyle: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("..").TypographyProps) => JSX.Element, any, {}, never>;
 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 InputStyle: import("styled-components").StyledComponent<"input", any, {
+    backgroundColor: string;
+}, never>;
 export declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;

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

@@ -1,15 +1,22 @@
 import styled from 'styled-components';
-import { Breakpoints, Spacing } from '..';
+import { Breakpoints, Spacing, Typography } from '..';
 import { Blue, Neutral } from '../utilities/colors';
+export var SwitchTextStyle = styled(Typography).withConfig({
+  displayName: "SwitchStyle__SwitchTextStyle",
+  componentId: "sc-7dlucf-0"
+})([""]);
 export var SwitchStyle = styled.div.withConfig({
   displayName: "SwitchStyle",
-  componentId: "sc-7dlucf-0"
-})(["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);
+  componentId: "sc-7dlucf-1"
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative;width:", ";&[data-with-icon='true']{width:48px;}&[data-with-text='true']{width:max-content;}&[data-with-icon='true'] 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='true']{width:44px;}&[data-with-icon='true'] svg{height:14px;}height:22px;}&:before{transition:100ms all;content:' ';cursor:pointer;position:absolute;width:16px;height:16px;left:4px;right:0;border-radius:16px;background:", ";box-shadow:0px 1px 3px rgba(0,0,0,0.1);transform:scale(1);@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%);}&[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);
+  componentId: "sc-7dlucf-2"
+})(["opacity:0;position:absolute;& + ", "{", "{padding-inline-start:18px;}}&:checked + ", "{", "{padding-inline-start:unset;padding-inline-end:18px;}background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{right:4px;left:unset;}}& + ", " svg:nth-child(1){visibility:hidden;}& + ", " svg:nth-child(2){visibility:visible;}& + ", " ", ":nth-child(1){visibility:hidden;display:none;}& + ", " ", ":nth-child(2){visibility:visible;display:block;}&:checked + ", " svg:nth-child(1){visibility:visible;}&:checked + ", " svg:nth-child(2){visibility:hidden;}&:checked + ", " ", ":nth-child(1){visibility:visible;display:block;}&:checked + ", " ", ":nth-child(2){visibility:hidden;display:none;}"], SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchTextStyle, function (_ref) {
+  var backgroundColor = _ref.backgroundColor;
+  return backgroundColor || Blue.S99;
+}, Neutral.B95, SwitchStyle, SwitchStyle, SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchStyle, SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchTextStyle);
 export var LabelStyle = styled.label.withConfig({
   displayName: "SwitchStyle__LabelStyle",
-  componentId: "sc-7dlucf-2"
+  componentId: "sc-7dlucf-3"
 })(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);

package/es/@next/Tabs/Tabs.js

@@ -78,7 +78,8 @@ export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(_ref, ref) {
   var renderTabs = tabs.map(function (tab, index) {
     var tabId = tab.id || nextId();
     return /*#__PURE__*/React.createElement(StyledLi, {
-      key: tabId + "-" + index
+      key: tabId + "-" + index,
+      className: "tab-item"
     }, /*#__PURE__*/React.createElement(Tab, {
       id: tabId,
       key: "tab-" + tabId + "-" + index,
@@ -92,6 +93,7 @@ export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(_ref, ref) {
   return /*#__PURE__*/React.createElement(StyledTabsContainer, {
     ref: ref
   }, /*#__PURE__*/React.createElement(StyledTabHeaderContainer, {
+    className: "tabs-header-container",
     ref: tabsHeaderRef,
     onScroll: handleScroll,
     onWheel: handleWheel,
@@ -104,5 +106,7 @@ export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(_ref, ref) {
     "data-grabbing": isDragging
   }, /*#__PURE__*/React.createElement(StyledUl, {
     "data-fitted": fitted
-  }, renderTabs, " ")), /*#__PURE__*/React.createElement("div", null, children));
+  }, renderTabs, " ")), /*#__PURE__*/React.createElement("div", {
+    className: "tab-item-content"
+  }, children));
 });

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

@@ -7,6 +7,7 @@ export declare const WithErrorNonSearchable: any;
 export declare const NonSearchableDisabled: any;
 export declare const SearchableMultiSelect: any;
 export declare const SearchableSingleSelect: any;
+export declare const SearchableSingleWithInputState: any;
 export declare const MultiSelectScrollable: any;
 export declare const WithInlineError: any;
 export declare const SearchableDisabled: any;

package/lib/@next/Select/components/Activator/ActivatorTextInput.js

@@ -78,6 +78,7 @@ var ActivatorTextInput = function ActivatorTextInput(_ref) {
     prefix: prefix,
     filterOptions: filterOptions,
     onFocus: onFocus,
+    onInputChange: onChange,
     onSelect: onSelect,
     error: hasError,
     disabled: disabled,

package/lib/@next/Select/components/SearchableSelectInput/SearchableSelectInput.d.ts

@@ -9,6 +9,7 @@ export interface SearchableSelectState {
 export declare type SearchableSelectInputProps = Omit<InputProps, 'type' | 'onChange' | 'onSelect'> & {
     canClear?: boolean;
     filterOptions?: (str: string) => Option[];
+    onInputChange?(value: string): void;
     onSelect?({ value }: {
         value: string;
     }): void;
@@ -23,6 +24,7 @@ export declare type SearchableSelectInputProps = Omit<InputProps, 'type' | 'onCh
 export declare const SearchableSelectInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "onChange" | "onSelect"> & {
     canClear?: boolean;
     filterOptions?: (str: string) => Option[];
+    onInputChange?(value: string): void;
     onSelect?({ value }: {
         value: string;
     }): void;

package/lib/@next/Select/components/SearchableSelectInput/SearchableSelectInput.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _InputStyle = require("../../../Input/InputStyle");
 var _ClearSelected = require("./ClearSelected");
 var _SearchableSelectInputStyle = require("./SearchableSelectInputStyle");
-var _excluded = ["disabled", "error", "filterOptions", "onSelect", "placeholder", "prefix", "selectedValue", "width", "inputValue", "updateInputValue", "onFocus", "searchableSelectState", "updateSearchableSelectState", "options", "updateMenuOptions"];
+var _excluded = ["disabled", "error", "filterOptions", "onSelect", "placeholder", "prefix", "selectedValue", "width", "inputValue", "updateInputValue", "onInputChange", "onFocus", "searchableSelectState", "updateSearchableSelectState", "options", "updateMenuOptions"];
 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 SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function SearchableSelectInput(_ref, ref) {
@@ -24,6 +24,7 @@ var SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function Searcha
     width = _ref.width,
     inputValue = _ref.inputValue,
     updateInputValue = _ref.updateInputValue,
+    onInputChange = _ref.onInputChange,
     onFocus = _ref.onFocus,
     _ref$searchableSelect = _ref.searchableSelectState,
     showInput = _ref$searchableSelect.showInput,
@@ -56,6 +57,9 @@ var SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function Searcha
   };
   var handleInputChange = function handleInputChange(e) {
     var str = e.currentTarget.value;
+    if (onInputChange) {
+      onInputChange(str);
+    }
     updateInputValue(str);
     var filteredOptions = filterOptions(str);
     updateMenuOptions(filteredOptions);

package/lib/@next/Select/selectStoryHelper/SearchableSingleSelect.d.ts

@@ -4,4 +4,5 @@ interface SearchableSingleSelectProps {
     data?: Option[];
 }
 export declare const SearchableSingle: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
+export declare const SearchableSingleWithInputState: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
 export {};

package/lib/@next/Select/selectStoryHelper/SearchableSingleSelect.js

@@ -2,12 +2,13 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.SearchableSingle = void 0;
+exports.SearchableSingleWithInputState = exports.SearchableSingle = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _Select = require("../Select");
-var _excluded = ["data"];
+var _excluded = ["data"],
+  _excluded2 = ["data"];
 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 SearchableSingle = function SearchableSingle(_ref) {
@@ -29,4 +30,35 @@ var SearchableSingle = function SearchableSingle(_ref) {
     label: "Label"
   }));
 };
-exports.SearchableSingle = SearchableSingle;
+exports.SearchableSingle = SearchableSingle;
+var SearchableSingleWithInputState = function SearchableSingleWithInputState(_ref3) {
+  var data = _ref3.data,
+    args = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded2);
+  var _useState2 = (0, _react.useState)(''),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    selected = _useState3[0],
+    setSelected = _useState3[1];
+  var handleInputChange = function handleInputChange(value) {
+    setInputValue(value);
+  };
+  var handleSelect = function handleSelect(_ref4) {
+    var value = _ref4.value;
+    setSelected(value);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Select.Select, (0, _extends2["default"])({}, args, {
+    onSelect: handleSelect,
+    options: data,
+    selectedValues: [selected],
+    searchableProps: {
+      inputValue: inputValue,
+      onInputChange: function onInputChange(value) {
+        return handleInputChange(value);
+      }
+    },
+    width: "600px",
+    label: "Label"
+  }));
+};
+exports.SearchableSingleWithInputState = SearchableSingleWithInputState;

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

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

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

@@ -9,14 +9,21 @@ var _react = _interopRequireDefault(require("react"));
 var _Icon = require("../Icon");
 var _colors = require("../utilities/colors");
 var _SwitchStyle = require("./SwitchStyle");
-var _excluded = ["checked", "disabled", "onChange", "value", "withIcon"];
+var _excluded = ["checked", "disabled", "onChange", "value", "withIcon", "checkedText", "uncheckedText", "checkedBackgroundColor"];
 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,
+    checkedText = _ref.checkedText,
+    uncheckedText = _ref.uncheckedText,
+    checkedBackgroundColor = _ref.checkedBackgroundColor,
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var withText = Boolean(checkedText) && Boolean(uncheckedText);
+  if (withText && withIcon) {
+    console.warn('Switch component cannot have both text and icon');
+  }
   var IconRender = function IconRender() {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
       name: "ri-check",
@@ -26,6 +33,15 @@ var Switch = /*#__PURE__*/_react["default"].forwardRef(function Switch(_ref, ref
       fill: disabled ? _colors.Neutral.B85 : _colors.Neutral.B100
     }));
   };
+  var RenderSwitchText = function RenderSwitchText() {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SwitchStyle.SwitchTextStyle, {
+      variant: "overline",
+      color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B100
+    }, checkedText), /*#__PURE__*/_react["default"].createElement(_SwitchStyle.SwitchTextStyle, {
+      variant: "overline",
+      color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B100
+    }, uncheckedText));
+  };
   return /*#__PURE__*/_react["default"].createElement(_SwitchStyle.LabelStyle, null, /*#__PURE__*/_react["default"].createElement(_SwitchStyle.InputStyle, (0, _extends2["default"])({
     value: value
   }, otherProps, {
@@ -34,10 +50,13 @@ var Switch = /*#__PURE__*/_react["default"].forwardRef(function Switch(_ref, ref
     type: "checkbox",
     onChange: onChange,
     ref: ref,
-    "data-with-icon": withIcon
+    "data-with-icon": !withText && withIcon,
+    "data-with-text": withText,
+    backgroundColor: checkedBackgroundColor
   })), /*#__PURE__*/_react["default"].createElement(_SwitchStyle.SwitchStyle, {
     "data-disabled": disabled,
-    "data-with-icon": withIcon
-  }, withIcon && /*#__PURE__*/_react["default"].createElement(IconRender, null)));
+    "data-with-icon": !withText && withIcon,
+    "data-with-text": withText
+  }, !withText && withIcon && /*#__PURE__*/_react["default"].createElement(IconRender, null), withText && /*#__PURE__*/_react["default"].createElement(RenderSwitchText, null)));
 });
 exports.Switch = Switch;

package/lib/@next/Switch/Switch.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 WithIcon: any;
+export declare const WithText: any;
+export declare const WithTextAndCustomBackgroundColor: any;

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

@@ -1,3 +1,7 @@
+/// <reference types="react" />
+export declare const SwitchTextStyle: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("..").TypographyProps) => JSX.Element, any, {}, never>;
 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 InputStyle: import("styled-components").StyledComponent<"input", any, {
+    backgroundColor: string;
+}, never>;
 export declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;

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

@@ -2,22 +2,30 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.SwitchStyle = exports.LabelStyle = exports.InputStyle = void 0;
+exports.SwitchTextStyle = exports.SwitchStyle = exports.LabelStyle = exports.InputStyle = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ = require("..");
 var _colors = require("../utilities/colors");
+var SwitchTextStyle = (0, _styledComponents["default"])(_.Typography).withConfig({
+  displayName: "SwitchStyle__SwitchTextStyle",
+  componentId: "sc-7dlucf-0"
+})([""]);
+exports.SwitchTextStyle = SwitchTextStyle;
 var SwitchStyle = _styledComponents["default"].div.withConfig({
   displayName: "SwitchStyle",
-  componentId: "sc-7dlucf-0"
-})(["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);
+  componentId: "sc-7dlucf-1"
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative;width:", ";&[data-with-icon='true']{width:48px;}&[data-with-text='true']{width:max-content;}&[data-with-icon='true'] 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='true']{width:44px;}&[data-with-icon='true'] svg{height:14px;}height:22px;}&:before{transition:100ms all;content:' ';cursor:pointer;position:absolute;width:16px;height:16px;left:4px;right:0;border-radius:16px;background:", ";box-shadow:0px 1px 3px rgba(0,0,0,0.1);transform:scale(1);@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%);}&[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);
+  componentId: "sc-7dlucf-2"
+})(["opacity:0;position:absolute;& + ", "{", "{padding-inline-start:18px;}}&:checked + ", "{", "{padding-inline-start:unset;padding-inline-end:18px;}background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{right:4px;left:unset;}}& + ", " svg:nth-child(1){visibility:hidden;}& + ", " svg:nth-child(2){visibility:visible;}& + ", " ", ":nth-child(1){visibility:hidden;display:none;}& + ", " ", ":nth-child(2){visibility:visible;display:block;}&:checked + ", " svg:nth-child(1){visibility:visible;}&:checked + ", " svg:nth-child(2){visibility:hidden;}&:checked + ", " ", ":nth-child(1){visibility:visible;display:block;}&:checked + ", " ", ":nth-child(2){visibility:hidden;display:none;}"], SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchTextStyle, function (_ref) {
+  var backgroundColor = _ref.backgroundColor;
+  return backgroundColor || _colors.Blue.S99;
+}, _colors.Neutral.B95, SwitchStyle, SwitchStyle, SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchStyle, SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchTextStyle);
 exports.InputStyle = InputStyle;
 var LabelStyle = _styledComponents["default"].label.withConfig({
   displayName: "SwitchStyle__LabelStyle",
-  componentId: "sc-7dlucf-2"
+  componentId: "sc-7dlucf-3"
 })(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);
 exports.LabelStyle = LabelStyle;

package/lib/@next/Tabs/Tabs.js

@@ -85,7 +85,8 @@ var Tabs = /*#__PURE__*/_react["default"].forwardRef(function Tabs(_ref, ref) {
   var renderTabs = tabs.map(function (tab, index) {
     var tabId = tab.id || (0, _reactIdGenerator["default"])();
     return /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledLi, {
-      key: tabId + "-" + index
+      key: tabId + "-" + index,
+      className: "tab-item"
     }, /*#__PURE__*/_react["default"].createElement(_Tab.Tab, {
       id: tabId,
       key: "tab-" + tabId + "-" + index,
@@ -99,6 +100,7 @@ var Tabs = /*#__PURE__*/_react["default"].forwardRef(function Tabs(_ref, ref) {
   return /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledTabsContainer, {
     ref: ref
   }, /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledTabHeaderContainer, {
+    className: "tabs-header-container",
     ref: tabsHeaderRef,
     onScroll: handleScroll,
     onWheel: handleWheel,
@@ -111,6 +113,8 @@ var Tabs = /*#__PURE__*/_react["default"].forwardRef(function Tabs(_ref, ref) {
     "data-grabbing": isDragging
   }, /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledUl, {
     "data-fitted": fitted
-  }, renderTabs, " ")), /*#__PURE__*/_react["default"].createElement("div", null, children));
+  }, renderTabs, " ")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tab-item-content"
+  }, children));
 });
 exports.Tabs = Tabs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.244",
+  "version": "4.0.246",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",