glints-aries 4.0.183 → 4.0.185

package/es/@next/RadioButton/RadioButton.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["label", "helperText", "disabled", "name", "checked", "value", "onChange"];
+import React from 'react';
+import { LabelWrapper, RadioButtonInput, RadioButtonWrapper } from './RadioButtonStyle';
+import { Typography } from '../Typography';
+import { Colors } from '..';
+/**
+ * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
+ */
+export var RadioButton = function RadioButton(_ref) {
+  var label = _ref.label,
+    helperText = _ref.helperText,
+    disabled = _ref.disabled,
+    name = _ref.name,
+    checked = _ref.checked,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(RadioButtonWrapper, null, /*#__PURE__*/React.createElement(RadioButtonInput, _extends({
+    disabled: disabled,
+    name: name,
+    checked: checked,
+    value: value,
+    type: "radio",
+    onChange: onChange,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    }
+  }, props)), /*#__PURE__*/React.createElement(LabelWrapper, {
+    "data-disabled": disabled
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1",
+    as: "span",
+    color: Colors.Neutral.B18
+  }, label), /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle2",
+    as: "span",
+    color: Colors.Neutral.B40
+  }, helperText)));
+};

package/es/@next/RadioButton/RadioButton.stories.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { RadioButton } from './RadioButton';
+import { Typography } from '../Typography';
+RadioButton.displayName = 'RadioButton';
+export default {
+  title: '@next/RadioButton',
+  component: RadioButton,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }]
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(RadioButton, args);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  label: 'Label',
+  helperText: 'Helper Text',
+  disabled: false,
+  name: 'name',
+  checked: false,
+  value: 'value'
+};
+export var ControlledRadioButton = function ControlledRadioButton() {
+  var _useState = useState('1'),
+    value = _useState[0],
+    setValue = _useState[1];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1"
+  }, "Selected value: ", value), /*#__PURE__*/React.createElement(RadioButton, {
+    name: "radio-name",
+    label: "Label 1",
+    value: "1",
+    checked: value === '1',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(RadioButton, {
+    name: "radio-name",
+    label: "Label 2",
+    value: "2",
+    checked: value === '2',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(RadioButton, {
+    name: "radio-name",
+    label: "Label 3",
+    value: "3",
+    checked: value === '3',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }));
+};

package/es/@next/RadioButton/RadioButtonStyle.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { Breakpoints, Colors } from '..';
+import { space4, space8 } from '../utilities/spacing';
+import { borderRadiusHalf } from '../utilities/borderRadius';
+export var RadioButtonWrapper = styled.label.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonWrapper",
+  componentId: "sc-138orlx-0"
+})(["display:flex;align-items:flex-start;gap:", ";padding:", " 0;"], space8, space4);
+export var RadioButtonInput = styled.input.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonInput",
+  componentId: "sc-138orlx-1"
+})(["cursor:pointer;appearance:none;margin:0;width:18px;height:18px;border:2px solid ", ";border-radius:", ";transform:translateY(1.5px);::after{content:'';display:block;border-radius:", ";width:8px;height:8px;margin:3px;}@media (min-width:", "){width:22px;height:22px;transform:none;::after{width:10px;height:10px;margin:", ";}}:hover{border-color:", ";}:focus-visible{box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px ", ";outline:none;}:disabled{cursor:not-allowed;background-color:", ";border-color:", ";}:checked{border-color:", ";::after{background-color:", ";}:disabled{background-color:", ";border-color:", ";::after{background-color:", ";}}}"], Colors.Neutral.B68, borderRadiusHalf, borderRadiusHalf, Breakpoints.large, space4, Colors.Neutral.B68, Colors.Neutral.B100, Colors.Blue.S54, Colors.Neutral.B95, Colors.Neutral.B85, Colors.Blue.S99, Colors.Blue.S99, Colors.Neutral.B95, Colors.Neutral.B85, Colors.Neutral.B85);
+export var LabelWrapper = styled.div.withConfig({
+  displayName: "RadioButtonStyle__LabelWrapper",
+  componentId: "sc-138orlx-2"
+})(["cursor:pointer;display:flex;flex-direction:column;gap:", ";&[data-disabled='true']{span{color:", ";}cursor:not-allowed;}"], space4, Colors.Neutral.B85);

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

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

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

@@ -1,16 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children"];
+var _excluded = ["children", "onRemove", "value"];
 import React from 'react';
+import { Icon } from '../Icon';
 import { Typography } from '../Typography';
 import { Neutral } from '../utilities/colors';
-import { TagStyle } from './TagStyle';
+import { TagContentStyle, TagIconWrapper, TagRemoveContainerStyle, TagStyle } from './TagStyle';
 export var Tag = function Tag(_ref) {
   var children = _ref.children,
+    onRemove = _ref.onRemove,
+    value = _ref.value,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, {
     variant: "caption",
     color: Neutral.B18,
     as: 'span'
   }, children) : children;
-  return /*#__PURE__*/React.createElement(TagStyle, props, content);
+  var removeButton = onRemove && /*#__PURE__*/React.createElement(TagRemoveContainerStyle, null, /*#__PURE__*/React.createElement(TagIconWrapper, {
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close",
+    fill: Neutral.B40,
+    height: 20,
+    onClick: onRemove
+  })));
+  return /*#__PURE__*/React.createElement(TagStyle, _extends({}, props, {
+    value: value
+  }), /*#__PURE__*/React.createElement(TagContentStyle, {
+    "data-removeable": !!onRemove
+  }, content), removeButton);
 };

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

@@ -1,17 +1,63 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
 import { Tag } from './Tag';
 Tag.displayName = 'Tag';
-var defaultText = 'Basic Tag';
 export default {
   title: '@next/Tag',
   component: Tag,
   decorators: [function (Story) {
     return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }]
+  }],
+  argTypes: {
+    value: {
+      description: 'A value to supply, required when onRemove function is supplied',
+      control: {
+        type: null
+      }
+    },
+    onRemove: {
+      description: 'A function callback to pass in to when the remove icon is pressed',
+      control: {
+        type: null
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Tags represent a set of interactive keywords that help label, organize, and categorize objects'
+      }
+    }
+  }
 };
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(Tag, args, defaultText);
+var DefaultTemplate = function DefaultTemplate() {
+  return /*#__PURE__*/React.createElement(Tag, null, "Basic Tag");
 };
-export var Interactive = Template.bind({});
-Interactive.args = {};
+var RemoveableTemplate = function RemoveableTemplate() {
+  var _useState = useState(['Years of Experience: 0 to 3 Years, 3 to 5 Years', 'Expected Salary: $1.000.000 to $3.000.000', 'Current Location: Agats, Indonesia']),
+    selectedTags = _useState[0],
+    setSelectedTags = _useState[1];
+  var removeTag = useCallback(function (tag) {
+    return function () {
+      setSelectedTags(function (previousTags) {
+        return previousTags.filter(function (previousTag) {
+          return previousTag !== tag;
+        });
+      });
+    };
+  }, []);
+  var tagMarkup = selectedTags.map(function (option) {
+    return /*#__PURE__*/React.createElement(Tag, {
+      style: {
+        marginRight: '4px'
+      },
+      key: option,
+      onRemove: removeTag(option)
+    }, option);
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, tagMarkup);
+};
+export var Default = DefaultTemplate.bind({});
+Default.args = {};
+export var Removeable = RemoveableTemplate.bind({});
+Removeable.args = {};

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

@@ -1,9 +1,21 @@
 import styled from 'styled-components';
 import { Breakpoints } from '..';
-import { borderRadius4 } from '../utilities/borderRadius';
-import { Blue } from '../utilities/colors';
+import { borderRadius4, borderRadiusHalf } from '../utilities/borderRadius';
+import { Blue, Neutral } from '../utilities/colors';
 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);
+export var TagRemoveContainerStyle = styled.div.withConfig({
+  displayName: "TagStyle__TagRemoveContainerStyle",
+  componentId: "sc-r1wv7a-1"
+})(["padding:", ";display:flex;"], space4);
+export var TagIconWrapper = styled.div.withConfig({
+  displayName: "TagStyle__TagIconWrapper",
+  componentId: "sc-r1wv7a-2"
+})(["display:flex;justify-content:center;align-items:center;&:focus-visible{margin:-2px;outline:none;border:2px solid ", ";border-radius:", ";}"], Blue.S100, borderRadius4);
 export var TagStyle = styled.div.withConfig({
   displayName: "TagStyle",
-  componentId: "sc-r1wv7a-0"
-})(["display:inline-flex;background-color:", ";width:fit-content;padding:", " ", ";border-radius:", ";@media (max-width:", "){font-size:12px;}"], Blue.S08, space4, space8, borderRadius4, Breakpoints.large);
+  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);

package/es/@next/index.js

@@ -16,6 +16,7 @@ export { Icon, IconProps } from './Icon';
 export { IndexTable, IndexTableProps, useIndexResourceState } from './IndexTable';
 export { Pagination, SimplePagination, PaginationProps } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
+export { RadioButton, RadioButtonProps } from './RadioButton';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';
 export { Typography, TypographyProps } from './Typography';

package/es/src/@next/RadioButton/RadioButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface RadioButtonProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+    label?: string;
+    helperText?: string;
+    disabled?: boolean;
+    name?: string;
+    checked?: boolean;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/**
+ * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
+ */
+export declare const RadioButton: ({ label, helperText, disabled, name, checked, value, onChange, ...props }: RadioButtonProps) => JSX.Element;

package/es/src/@next/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const ControlledRadioButton: () => JSX.Element;

package/es/src/@next/RadioButton/RadioButtonStyle.d.ts

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

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

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

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

@@ -1,5 +1,9 @@
 import React from 'react';
 export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
+    value?: string;
+    onRemove?: (() => void) | null;
 }
-export declare const Tag: ({ children, ...props }: TagProps) => JSX.Element;
+export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
+export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
+export declare const Tag: ({ children, onRemove, value, ...props }: TagProps) => JSX.Element;

package/es/src/@next/Tag/Tag.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 Removeable: any;

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

@@ -1,2 +1,6 @@
-import { TagProps } from './Tag';
+/// <reference types="react" />
+import { TagProps, TagRemoveContainerProps } from './Tag';
+export declare const TagContentStyle: import("styled-components").StyledComponent<"span", any, import("react").HTMLAttributes<HTMLSpanElement> & TagProps, never>;
+export declare const TagRemoveContainerStyle: import("styled-components").StyledComponent<"div", any, TagRemoveContainerProps, never>;
+export declare const TagIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TagStyle: import("styled-components").StyledComponent<"div", any, TagProps, never>;

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

@@ -15,6 +15,7 @@ export { Icon, IconProps } from './Icon';
 export { IndexTable, IndexTableProps, useIndexResourceState, } from './IndexTable';
 export { Pagination, SimplePagination, PaginationProps } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
+export { RadioButton, RadioButtonProps } from './RadioButton';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';
 export { Typography, TypographyProps } from './Typography';

package/lib/@next/RadioButton/RadioButton.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.RadioButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _RadioButtonStyle = require("./RadioButtonStyle");
+var _Typography = require("../Typography");
+var _ = require("..");
+var _excluded = ["label", "helperText", "disabled", "name", "checked", "value", "onChange"];
+/**
+ * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
+ */
+var RadioButton = function RadioButton(_ref) {
+  var label = _ref.label,
+    helperText = _ref.helperText,
+    disabled = _ref.disabled,
+    name = _ref.name,
+    checked = _ref.checked,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_RadioButtonStyle.RadioButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_RadioButtonStyle.RadioButtonInput, (0, _extends2["default"])({
+    disabled: disabled,
+    name: name,
+    checked: checked,
+    value: value,
+    type: "radio",
+    onChange: onChange,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    }
+  }, props)), /*#__PURE__*/_react["default"].createElement(_RadioButtonStyle.LabelWrapper, {
+    "data-disabled": disabled
+  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "body1",
+    as: "span",
+    color: _.Colors.Neutral.B18
+  }, label), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "subtitle2",
+    as: "span",
+    color: _.Colors.Neutral.B40
+  }, helperText)));
+};
+exports.RadioButton = RadioButton;

package/lib/@next/RadioButton/RadioButton.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Interactive = exports.ControlledRadioButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
+var _RadioButton = require("./RadioButton");
+var _Typography = require("../Typography");
+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; }
+_RadioButton.RadioButton.displayName = 'RadioButton';
+var _default = {
+  title: '@next/RadioButton',
+  component: _RadioButton.RadioButton,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react["default"].createElement(_GlintsContainer.BaseContainer, null, Story());
+  }]
+};
+exports["default"] = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_RadioButton.RadioButton, args);
+};
+var Interactive = Template.bind({});
+exports.Interactive = Interactive;
+Interactive.args = {
+  label: 'Label',
+  helperText: 'Helper Text',
+  disabled: false,
+  name: 'name',
+  checked: false,
+  value: 'value'
+};
+var ControlledRadioButton = function ControlledRadioButton() {
+  var _useState = (0, _react.useState)('1'),
+    value = _useState[0],
+    setValue = _useState[1];
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "body1"
+  }, "Selected value: ", value), /*#__PURE__*/_react["default"].createElement(_RadioButton.RadioButton, {
+    name: "radio-name",
+    label: "Label 1",
+    value: "1",
+    checked: value === '1',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_RadioButton.RadioButton, {
+    name: "radio-name",
+    label: "Label 2",
+    value: "2",
+    checked: value === '2',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_RadioButton.RadioButton, {
+    name: "radio-name",
+    label: "Label 3",
+    value: "3",
+    checked: value === '3',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }));
+};
+exports.ControlledRadioButton = ControlledRadioButton;

package/lib/@next/RadioButton/RadioButtonStyle.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.RadioButtonWrapper = exports.RadioButtonInput = exports.LabelWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("..");
+var _spacing = require("../utilities/spacing");
+var _borderRadius = require("../utilities/borderRadius");
+var RadioButtonWrapper = _styledComponents["default"].label.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonWrapper",
+  componentId: "sc-138orlx-0"
+})(["display:flex;align-items:flex-start;gap:", ";padding:", " 0;"], _spacing.space8, _spacing.space4);
+exports.RadioButtonWrapper = RadioButtonWrapper;
+var RadioButtonInput = _styledComponents["default"].input.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonInput",
+  componentId: "sc-138orlx-1"
+})(["cursor:pointer;appearance:none;margin:0;width:18px;height:18px;border:2px solid ", ";border-radius:", ";transform:translateY(1.5px);::after{content:'';display:block;border-radius:", ";width:8px;height:8px;margin:3px;}@media (min-width:", "){width:22px;height:22px;transform:none;::after{width:10px;height:10px;margin:", ";}}:hover{border-color:", ";}:focus-visible{box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px ", ";outline:none;}:disabled{cursor:not-allowed;background-color:", ";border-color:", ";}:checked{border-color:", ";::after{background-color:", ";}:disabled{background-color:", ";border-color:", ";::after{background-color:", ";}}}"], _.Colors.Neutral.B68, _borderRadius.borderRadiusHalf, _borderRadius.borderRadiusHalf, _.Breakpoints.large, _spacing.space4, _.Colors.Neutral.B68, _.Colors.Neutral.B100, _.Colors.Blue.S54, _.Colors.Neutral.B95, _.Colors.Neutral.B85, _.Colors.Blue.S99, _.Colors.Blue.S99, _.Colors.Neutral.B95, _.Colors.Neutral.B85, _.Colors.Neutral.B85);
+exports.RadioButtonInput = RadioButtonInput;
+var LabelWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "RadioButtonStyle__LabelWrapper",
+  componentId: "sc-138orlx-2"
+})(["cursor:pointer;display:flex;flex-direction:column;gap:", ";&[data-disabled='true']{span{color:", ";}cursor:not-allowed;}"], _spacing.space4, _.Colors.Neutral.B85);
+exports.LabelWrapper = LabelWrapper;

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

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

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

@@ -3,20 +3,37 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.Tag = 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 _Typography = require("../Typography");
 var _colors = require("../utilities/colors");
 var _TagStyle = require("./TagStyle");
-var _excluded = ["children"];
+var _excluded = ["children", "onRemove", "value"];
 var Tag = function Tag(_ref) {
   var children = _ref.children,
+    onRemove = _ref.onRemove,
+    value = _ref.value,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var content = typeof children === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     variant: "caption",
     color: _colors.Neutral.B18,
     as: 'span'
   }, children) : children;
-  return /*#__PURE__*/_react["default"].createElement(_TagStyle.TagStyle, props, content);
+  var removeButton = onRemove && /*#__PURE__*/_react["default"].createElement(_TagStyle.TagRemoveContainerStyle, null, /*#__PURE__*/_react["default"].createElement(_TagStyle.TagIconWrapper, {
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-close",
+    fill: _colors.Neutral.B40,
+    height: 20,
+    onClick: onRemove
+  })));
+  return /*#__PURE__*/_react["default"].createElement(_TagStyle.TagStyle, (0, _extends2["default"])({}, props, {
+    value: value
+  }), /*#__PURE__*/_react["default"].createElement(_TagStyle.TagContentStyle, {
+    "data-removeable": !!onRemove
+  }, content), removeButton);
 };
 exports.Tag = Tag;

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

@@ -1,24 +1,72 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports["default"] = exports.Interactive = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Removeable = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
 var _Tag = require("./Tag");
+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; }
 _Tag.Tag.displayName = 'Tag';
-var defaultText = 'Basic Tag';
 var _default = {
   title: '@next/Tag',
   component: _Tag.Tag,
   decorators: [function (Story) {
     return /*#__PURE__*/_react["default"].createElement(_GlintsContainer.BaseContainer, null, Story());
-  }]
+  }],
+  argTypes: {
+    value: {
+      description: 'A value to supply, required when onRemove function is supplied',
+      control: {
+        type: null
+      }
+    },
+    onRemove: {
+      description: 'A function callback to pass in to when the remove icon is pressed',
+      control: {
+        type: null
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Tags represent a set of interactive keywords that help label, organize, and categorize objects'
+      }
+    }
+  }
 };
 exports["default"] = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_Tag.Tag, args, defaultText);
+var DefaultTemplate = function DefaultTemplate() {
+  return /*#__PURE__*/_react["default"].createElement(_Tag.Tag, null, "Basic Tag");
 };
-var Interactive = Template.bind({});
-exports.Interactive = Interactive;
-Interactive.args = {};
+var RemoveableTemplate = function RemoveableTemplate() {
+  var _useState = (0, _react.useState)(['Years of Experience: 0 to 3 Years, 3 to 5 Years', 'Expected Salary: $1.000.000 to $3.000.000', 'Current Location: Agats, Indonesia']),
+    selectedTags = _useState[0],
+    setSelectedTags = _useState[1];
+  var removeTag = (0, _react.useCallback)(function (tag) {
+    return function () {
+      setSelectedTags(function (previousTags) {
+        return previousTags.filter(function (previousTag) {
+          return previousTag !== tag;
+        });
+      });
+    };
+  }, []);
+  var tagMarkup = selectedTags.map(function (option) {
+    return /*#__PURE__*/_react["default"].createElement(_Tag.Tag, {
+      style: {
+        marginRight: '4px'
+      },
+      key: option,
+      onRemove: removeTag(option)
+    }, option);
+  });
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, tagMarkup);
+};
+var Default = DefaultTemplate.bind({});
+exports.Default = Default;
+Default.args = {};
+var Removeable = RemoveableTemplate.bind({});
+exports.Removeable = Removeable;
+Removeable.args = {};

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

@@ -2,14 +2,29 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.TagStyle = void 0;
+exports.TagStyle = exports.TagRemoveContainerStyle = exports.TagIconWrapper = exports.TagContentStyle = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ = require("..");
 var _borderRadius = require("../utilities/borderRadius");
 var _colors = require("../utilities/colors");
 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);
+exports.TagContentStyle = TagContentStyle;
+var TagRemoveContainerStyle = _styledComponents["default"].div.withConfig({
+  displayName: "TagStyle__TagRemoveContainerStyle",
+  componentId: "sc-r1wv7a-1"
+})(["padding:", ";display:flex;"], _spacing.space4);
+exports.TagRemoveContainerStyle = TagRemoveContainerStyle;
+var TagIconWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "TagStyle__TagIconWrapper",
+  componentId: "sc-r1wv7a-2"
+})(["display:flex;justify-content:center;align-items:center;&:focus-visible{margin:-2px;outline:none;border:2px solid ", ";border-radius:", ";}"], _colors.Blue.S100, _borderRadius.borderRadius4);
+exports.TagIconWrapper = TagIconWrapper;
 var TagStyle = _styledComponents["default"].div.withConfig({
   displayName: "TagStyle",
-  componentId: "sc-r1wv7a-0"
-})(["display:inline-flex;background-color:", ";width:fit-content;padding:", " ", ";border-radius:", ";@media (max-width:", "){font-size:12px;}"], _colors.Blue.S08, _spacing.space4, _spacing.space8, _borderRadius.borderRadius4, _.Breakpoints.large);
+  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);
 exports.TagStyle = TagStyle;

package/lib/@next/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.Spacing = exports.SimplePagination = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.Colors = 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.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.Colors = 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"));
@@ -57,6 +57,9 @@ exports.PaginationProps = _Pagination.PaginationProps;
 var _Popover = require("./Popover");
 exports.Popover = _Popover.Popover;
 exports.PopoverProps = _Popover.PopoverProps;
+var _RadioButton = require("./RadioButton");
+exports.RadioButton = _RadioButton.RadioButton;
+exports.RadioButtonProps = _RadioButton.RadioButtonProps;
 var _Tabs = require("./Tabs");
 exports.Tab = _Tabs.Tab;
 exports.TabModel = _Tabs.TabModel;

package/lib/src/@next/RadioButton/RadioButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface RadioButtonProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+    label?: string;
+    helperText?: string;
+    disabled?: boolean;
+    name?: string;
+    checked?: boolean;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/**
+ * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
+ */
+export declare const RadioButton: ({ label, helperText, disabled, name, checked, value, onChange, ...props }: RadioButtonProps) => JSX.Element;

package/lib/src/@next/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const ControlledRadioButton: () => JSX.Element;

package/lib/src/@next/RadioButton/RadioButtonStyle.d.ts

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

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

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

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

@@ -1,5 +1,9 @@
 import React from 'react';
 export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
+    value?: string;
+    onRemove?: (() => void) | null;
 }
-export declare const Tag: ({ children, ...props }: TagProps) => JSX.Element;
+export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
+export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
+export declare const Tag: ({ children, onRemove, value, ...props }: TagProps) => JSX.Element;

package/lib/src/@next/Tag/Tag.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 Removeable: any;

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

@@ -1,2 +1,6 @@
-import { TagProps } from './Tag';
+/// <reference types="react" />
+import { TagProps, TagRemoveContainerProps } from './Tag';
+export declare const TagContentStyle: import("styled-components").StyledComponent<"span", any, import("react").HTMLAttributes<HTMLSpanElement> & TagProps, never>;
+export declare const TagRemoveContainerStyle: import("styled-components").StyledComponent<"div", any, TagRemoveContainerProps, never>;
+export declare const TagIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TagStyle: import("styled-components").StyledComponent<"div", any, TagProps, never>;

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

@@ -15,6 +15,7 @@ export { Icon, IconProps } from './Icon';
 export { IndexTable, IndexTableProps, useIndexResourceState, } from './IndexTable';
 export { Pagination, SimplePagination, PaginationProps } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
+export { RadioButton, RadioButtonProps } from './RadioButton';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';
 export { Typography, TypographyProps } from './Typography';

package/package.json

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