glints-aries 4.0.162 → 4.0.164

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare type ButtonSize = 'default' | 'slim' | 'large';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: ButtonSize;
+    children?: React.ReactNode;
+    active?: boolean;
+    fullWidth?: boolean;
+    loading?: boolean;
+}
+export declare const Button: ({ children, ...otherProps }: ButtonProps) => JSX.Element;

package/es/@next/Button/Button.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children"];
+import React from 'react';
+import { Typography } from '../Typography';
+import { BasicButton } from './ButtonStyle';
+export var Button = function Button(_ref) {
+  var children = _ref.children,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption"
+  }, " ", children) : children;
+  return /*#__PURE__*/React.createElement(BasicButton, _extends({}, otherProps, {
+    onMouseUp: function onMouseUp(e) {
+      return e.currentTarget.blur();
+    }
+  }), content);
+};

package/es/@next/Button/Button.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/Button/Button.stories.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Button } from './Button';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+Button.displayName = 'Button';
+var defaultText = 'Label';
+export default {
+  title: '@next/Button',
+  component: Button,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }],
+  argTypes: {
+    disabled: {
+      control: 'boolean'
+    }
+  }
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(Button, _extends({}, args, {
+    type: "button"
+  }), defaultText);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  size: 'default',
+  disabled: false
+};

package/es/@next/Button/ButtonStyle.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+import { ButtonProps } from './Button';
+export declare const BasicButton: import("styled-components").StyledComponent<"button", any, {
+    style: CSSProperties;
+} & ButtonProps, "style">;

package/es/@next/Button/ButtonStyle.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { borderRadius4 } from '../utilities/borderRadius';
+import { Neutral } from '../utilities/colors';
+import { button, buttonFocused, insetButtonPressed } from '../utilities/dropShadow';
+import { space12, space16, space24, space4, space8 } from '../utilities/spacing';
+var defaultButtonSizeStyle = "\n  width: 75px;\n  height: 36px;\n  padding: " + space8 + " " + space16 + ";\n\n  @media (max-width: " + Breakpoints.large + ") {\n    width: 71px;\n  }\n";
+var largeButtonSizeStyle = "\n  width: 91px;\n  height: 44px;\n  padding: " + space12 + " " + space24 + ";\n\n  @media (max-width: " + Breakpoints.large + ") {\n    width: 87px;\n  }\n";
+var slimButtonSizeStyle = "\n  width: 67px;\n  height: 32px;\n  padding: " + space4 + " " + space12 + ";\n\n  @media (max-width: " + Breakpoints.large + ") {\n    width: 63px;\n  }\n";
+var buttonSizeStyleMap = {
+  "default": defaultButtonSizeStyle,
+  slim: slimButtonSizeStyle,
+  large: largeButtonSizeStyle
+};
+export var BasicButton = styled.button.attrs(function (_ref) {
+  var active = _ref.active,
+    fullWidth = _ref.fullWidth;
+  var activeStyle = {
+    color: "" + Neutral.B100,
+    background: "" + Neutral.B40
+  };
+  var widthStyle = {
+    width: '100%'
+  };
+  return {
+    style: _extends({}, active && activeStyle, fullWidth && widthStyle)
+  };
+}).withConfig({
+  displayName: "ButtonStyle__BasicButton",
+  componentId: "sc-8t0676-0"
+})(["display:flex;gap:10px;border-width:1px;border-style:solid;border-radius:", ";flex-direction:row;align-items:center;justify-content:center;flex:none;order:0;flex-grow:0;color:", ";background:", ";border-color:", ";box-shadow:", ";&:hover{cursor:pointer;background:", ";}&:focus{outline:none;border-color:", ";box-shadow:", ";}&:active{background:", ";border:1px solid ", ";box-shadow:", ";}&:disabled{color:", ";background:", ";}", " > svg{width:18px;height:18px;}"], borderRadius4, Neutral.B18, Neutral.B100, Neutral.B68, button, Neutral.B99, Neutral.B100, buttonFocused, Neutral.B95, Neutral.B68, insetButtonPressed, Neutral.B68, Neutral.B95, function (_ref2) {
+  var size = _ref2.size;
+  var sizeStyle = buttonSizeStyleMap[size];
+  if (size && !sizeStyle) {
+    console.warn(size + " is not a valid ButtonSize, default will be used");
+  }
+  return buttonSizeStyleMap[size] || defaultButtonSizeStyle;
+});

package/es/@next/Button/DesctructiveButton.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/Button/DesctructiveButton.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { DestructiveButton } from './DesctructiveButtonStyle';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+DestructiveButton.displayName = 'DestructiveButton';
+var defaultText = 'Label';
+export default {
+  title: '@next/DestructiveButton',
+  component: DestructiveButton,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }]
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(DestructiveButton, args, defaultText);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  size: 'default'
+};

package/es/@next/Button/DesctructiveButtonStyle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DestructiveButton: import("styled-components").StyledComponent<({ children, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;

package/es/@next/Button/DesctructiveButtonStyle.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Neutral, Red } from '../utilities/colors';
+import { insetButtonPressed } from '../utilities/dropShadow';
+import { Button } from './Button';
+export var DestructiveButton = styled(Button).withConfig({
+  displayName: "DesctructiveButtonStyle__DestructiveButton",
+  componentId: "sc-1erj0cn-0"
+})(["color:", ";background:", ";border:none;&:hover{background:", ";box-shadow:0px 1px 0px rgba(0,0,0,0.08),inset 0px -1px 0px rgba(0,0,0,0.2);}&:focus{box-shadow:0px 0px 0px 2px rgba(69,143,255,1);}&:active{background:", ";box-shadow:", ";}"], Neutral.B100, Red.B93, Red.B74, Red.B65, insetButtonPressed);

package/es/@next/Button/OutlineButton.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/Button/OutlineButton.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { OutlineButton } from './OutlineButtonStyle';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+OutlineButton.displayName = 'OutlineButton';
+var defaultText = 'Label';
+export default {
+  title: '@next/OutlineButton',
+  component: OutlineButton,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }]
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(OutlineButton, args, defaultText);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  size: 'default'
+};

package/es/@next/Button/OutlineButtonStyle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const OutlineButton: import("styled-components").StyledComponent<({ children, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;

package/es/@next/Button/OutlineButtonStyle.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { button } from '../utilities/dropShadow';
+import { Button } from './Button';
+export var OutlineButton = styled(Button).withConfig({
+  displayName: "OutlineButtonStyle__OutlineButton",
+  componentId: "sc-q766em-0"
+})(["filter:drop-shadow(", ");"], button);

package/es/@next/Button/OutlineMonochromeButton.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/Button/OutlineMonochromeButton.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { OutlineMonochromeButton } from './OutlineMonochromeStyle';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+OutlineMonochromeButton.displayName = 'OutlineMonochromeButton';
+var defaultText = 'Label';
+export default {
+  title: '@next/OutlineMonochromeButton',
+  component: OutlineMonochromeButton,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }]
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(OutlineMonochromeButton, args, defaultText);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  size: 'default',
+  active: false
+};

package/es/@next/Button/OutlineMonochromeStyle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ButtonProps } from './Button';
+export declare const OutlineMonochromeButton: import("styled-components").StyledComponent<({ children, ...otherProps }: ButtonProps) => JSX.Element, any, {}, never>;

package/es/@next/Button/OutlineMonochromeStyle.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Red } from '../utilities/colors';
+import { B100 } from '../utilities/colors/neutral';
+import { button } from '../utilities/dropShadow';
+import { Button } from './Button';
+export var OutlineMonochromeButton = styled(Button).withConfig({
+  displayName: "OutlineMonochromeStyle__OutlineMonochromeButton",
+  componentId: "sc-2c3b7a-0"
+})(["", " color:", ";border:1px solid ", ";filter:drop-shadow(", ");&:hover{background:", ";opacity:0.9;box-shadow:", ";}&:active{background:", ";opacity:1;border:1px solid ", ";}"], function (_ref) {
+  var active = _ref.active;
+  return active ? "&[style] {\n    color: " + B100 + " !important;\n    background: " + Red.B93 + " !important;\n    }" : "";
+}, Red.B93, Red.B93, button, Red.B100, button, Red.B100, Red.B93);

package/es/@next/Button/PrimaryButton.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/Button/PrimaryButton.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PrimaryButton } from './PrimaryButtonStyle';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+PrimaryButton.displayName = 'PrimaryButton';
+var defaultText = 'Label';
+export default {
+  title: '@next/PrimaryButton',
+  component: PrimaryButton,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }]
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(PrimaryButton, args, defaultText);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  size: 'default'
+};

package/es/@next/Button/PrimaryButtonStyle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PrimaryButton: import("styled-components").StyledComponent<({ children, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;

package/es/@next/Button/PrimaryButtonStyle.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Blue, Neutral } from '../utilities/colors';
+import { Button } from './Button';
+export var PrimaryButton = styled(Button).withConfig({
+  displayName: "PrimaryButtonStyle__PrimaryButton",
+  componentId: "sc-1iczr6c-0"
+})(["color:", ";background:", ";border:none;&:hover{background:", ";opacity:0.9;box-shadow:0px 1px 0px rgba(0,0,0,0.08),inset 0px -1px 0px rgba(0,0,0,0.2);}&:active{background:", ";opacity:1;}"], Neutral.B100, Blue.S99, Blue.S100, Blue.S100);

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

@@ -0,0 +1,6 @@
+import { Button } from './Button';
+import { DestructiveButton } from './DesctructiveButtonStyle';
+import { OutlineButton } from './OutlineButtonStyle';
+import { OutlineMonochromeButton } from './OutlineMonochromeStyle';
+import { PrimaryButton } from './PrimaryButtonStyle';
+export { Button, DestructiveButton, OutlineButton, OutlineMonochromeButton, PrimaryButton, };

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

@@ -0,0 +1,6 @@
+import { Button } from './Button';
+import { DestructiveButton } from './DesctructiveButtonStyle';
+import { OutlineButton } from './OutlineButtonStyle';
+import { OutlineMonochromeButton } from './OutlineMonochromeStyle';
+import { PrimaryButton } from './PrimaryButtonStyle';
+export { Button, DestructiveButton, OutlineButton, OutlineMonochromeButton, PrimaryButton };

package/es/@next/ButtonGroup/ButtonGroup.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/ButtonGroup/ButtonGroup.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ButtonGroup } from './ButtonGroupStyle';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { PrimaryButton } from '../Button/PrimaryButtonStyle';
+import { Button } from '../Button/Button';
+import { OutlineButton } from '../Button/OutlineButtonStyle';
+ButtonGroup.displayName = 'ButtonGroup';
+export default {
+  title: '@next/ButtonGroup',
+  component: ButtonGroup,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, {
+      style: {
+        width: '1000px'
+      }
+    }, Story());
+  }]
+};
+var Template = function Template(args) {
+  var segmented = args.segmented;
+  var children = segmented ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, null, "Label"), /*#__PURE__*/React.createElement(PrimaryButton, null, "Label"));
+  return /*#__PURE__*/React.createElement(ButtonGroup, args, children);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  segmented: false,
+  fullWidth: false
+};

package/es/@next/ButtonGroup/ButtonGroupStyle.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ButtonGroupProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    segmented?: boolean;
+    fullWidth?: boolean;
+}
+export declare const ButtonGroup: import("styled-components").StyledComponent<"div", any, ButtonGroupProps, never>;

package/es/@next/ButtonGroup/ButtonGroupStyle.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { borderRadius4 } from '../utilities/borderRadius';
+import { B68 } from '../utilities/colors/neutral';
+import { space8 } from '../utilities/spacing';
+export var ButtonGroup = styled.div.withConfig({
+  displayName: "ButtonGroupStyle__ButtonGroup",
+  componentId: "sc-7vhxrt-0"
+})(["display:flex;flex-direction:row;align-items:center;padding:0px;> button{z-index:1;}", " ", ""], function (_ref) {
+  var segmented = _ref.segmented;
+  return segmented ? "> button {\n            border-radius: 0;\n            border-right: 0;\n            \n            :nth-child(1) {\n             border-radius: " + borderRadius4 + " 0px 0px " + borderRadius4 + ";  \n            }\n\n            :nth-last-child(1) {\n             border-radius: 0px " + borderRadius4 + " " + borderRadius4 + " 0px;\n             border-right: 1px solid " + B68 + "\n            }\n           }" : "gap: " + space8 + ";";
+}, function (_ref2) {
+  var fullWidth = _ref2.fullWidth;
+  return fullWidth ? "> button {\n             flex: 1;\n             }" : "";
+});

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

@@ -0,0 +1,2 @@
+import { ButtonGroup } from './ButtonGroupStyle';
+export { ButtonGroup };

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

@@ -0,0 +1,2 @@
+import { ButtonGroup } from './ButtonGroupStyle';
+export { ButtonGroup };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface CheckboxProps extends Omit<React.HtmlHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> {
+    id?: string;
+    label?: string;
+    hasError?: boolean;
+    indeterminate?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    helpText?: string;
+    onChange?(newChecked: boolean, id: string): void;
+}
+export declare const Checkbox: ({ label, id, checked, onChange, disabled, indeterminate, hasError, helpText, ...otherProps }: CheckboxProps) => JSX.Element;

package/es/@next/Checkbox/Checkbox.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["label", "id", "checked", "onChange", "disabled", "indeterminate", "hasError", "helpText"];
+import React, { useEffect, useRef, useState } from 'react';
+import { nanoid } from 'nanoid';
+import { StyledCheckbox, StyledCheckboxContainer, StyledColumn, StyledContainer, StyledLeftColumn, StyledRow } from './CheckboxStyle';
+import { noop } from 'lodash-es';
+import { Icon } from '../Icon';
+import { Typography } from '../Typography';
+import { Neutral, Red, Blue } from '../utilities/colors';
+var randomId = nanoid();
+export var Checkbox = function Checkbox(_ref) {
+  var label = _ref.label,
+    id = _ref.id,
+    checked = _ref.checked,
+    onChange = _ref.onChange,
+    disabled = _ref.disabled,
+    indeterminate = _ref.indeterminate,
+    hasError = _ref.hasError,
+    helpText = _ref.helpText,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var checkBoxId = id ? id : randomId;
+  var labelId = "label-" + checkBoxId;
+  var inputNode = useRef(null);
+  var _useState = useState(false),
+    checkedState = _useState[0],
+    setCheckedState = _useState[1];
+  var _useState2 = useState(false),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var checkedIcon = indeterminate ? 'ri-checkbox-indeterminate-fill' : 'ri-checkbox-fill';
+  var iconFill = disabled ? Neutral.B95 : hasError ? Red.B93 : Blue.S99;
+  useEffect(function () {
+    var value = indeterminate ? 'mixed' : checked;
+    setCheckedState(value);
+  }, [checked, indeterminate]);
+  var handleClick = function handleClick() {
+    if (!onChange || !inputNode.current || disabled) {
+      return;
+    }
+    var checkedValue = !checkedState;
+    setCheckedState(checkedValue);
+    onChange(checkedValue, checkBoxId);
+  };
+  return /*#__PURE__*/React.createElement(StyledContainer, {
+    "aria-disabled": disabled
+  }, /*#__PURE__*/React.createElement(StyledRow, null, /*#__PURE__*/React.createElement(StyledLeftColumn, null, /*#__PURE__*/React.createElement(StyledCheckboxContainer, null, /*#__PURE__*/React.createElement(StyledCheckbox, {
+    role: "checkbox",
+    "aria-labelledby": labelId,
+    "aria-checked": checkedState,
+    "data-focus": isFocused,
+    onClick: function onClick() {
+      return handleClick();
+    },
+    onMouseDown: function onMouseDown() {
+      return setIsFocused(false);
+    },
+    onMouseUp: function onMouseUp() {
+      return setIsFocused(false);
+    },
+    hasError: hasError
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    ref: inputNode,
+    disabled: disabled,
+    id: checkBoxId,
+    type: "checkbox",
+    onChange: noop,
+    checked: checked,
+    onFocus: function onFocus() {
+      return setIsFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setIsFocused(false);
+    }
+  }, otherProps))), /*#__PURE__*/React.createElement(Icon, {
+    name: checkedIcon,
+    height: "20px",
+    width: "20px",
+    fill: iconFill
+  }))), /*#__PURE__*/React.createElement(StyledColumn, null, /*#__PURE__*/React.createElement("label", {
+    id: labelId,
+    htmlFor: checkBoxId,
+    onClick: function onClick(e) {
+      e.preventDefault();
+      handleClick();
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    },
+    onMouseUp: function onMouseUp(e) {
+      return e.preventDefault();
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, label)))), /*#__PURE__*/React.createElement(StyledRow, null, /*#__PURE__*/React.createElement(StyledLeftColumn, null), /*#__PURE__*/React.createElement(StyledColumn, {
+    className: "help-text"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle2"
+  }, helpText))));
+};

package/es/@next/Checkbox/Checkbox.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/Checkbox/Checkbox.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Checkbox } from './Checkbox';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+Checkbox.displayName = 'Checkbox';
+export default {
+  title: '@next/Checkbox',
+  component: Checkbox,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }]
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(Checkbox, args);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  label: 'Label'
+};

package/es/@next/Checkbox/CheckboxStyle.d.ts

@@ -0,0 +1,7 @@
+import { CheckboxProps } from './Checkbox';
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCheckboxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCheckbox: import("styled-components").StyledComponent<"div", any, CheckboxProps, never>;
+export declare const StyledRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledColumn: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLeftColumn: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Checkbox/CheckboxStyle.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import { Breakpoints } from '../..';
+import { borderRadius4 } from '../utilities/borderRadius';
+import { Neutral, Red } from '../utilities/colors';
+import { space4 } from '../utilities/spacing';
+export var StyledContainer = styled.div.withConfig({
+  displayName: "CheckboxStyle__StyledContainer",
+  componentId: "sc-a9bf1h-0"
+})(["flex-direction:row;align-items:flex-start;padding:", " 0px;gap:8px;color:", ";label{cursor:pointer;margin-top:-1px;}svg{border-radius:4px;position:absolute;top:0;left:0;opacity:0;pointer-events:none;}&[aria-disabled='true'],&[aria-disabled='true'] .help-text{color:", ";}&[aria-disabled='true'] div[role='checkbox']{border-color:", ";background:", ";}&[aria-disabled='true'] svg{background:", ";}"], space4, Neutral.B18, Neutral.B68, Neutral.B85, Neutral.B95, Neutral.B68);
+export var StyledCheckboxContainer = styled.div.withConfig({
+  displayName: "CheckboxStyle__StyledCheckboxContainer",
+  componentId: "sc-a9bf1h-1"
+})(["position:relative;cursor:pointer;"]);
+export var StyledCheckbox = styled.div.withConfig({
+  displayName: "CheckboxStyle__StyledCheckbox",
+  componentId: "sc-a9bf1h-2"
+})(["width:20px;height:20px;background:", ";border:2px solid;border-color:", ";cursor:pointer;border-radius:", ";> input{opacity:0;cursor:pointer;}&[data-focus='true']{box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}&[aria-checked='true'] + svg,&[aria-checked='mixed'] + svg{opacity:1;}@media (max-width:", "){width:18px;height:18px;}"], Neutral.B100, function (_ref) {
+  var hasError = _ref.hasError;
+  return hasError ? Red.B93 : Neutral.B68;
+}, borderRadius4, Neutral.B100, Breakpoints.large);
+export var StyledRow = styled.div.withConfig({
+  displayName: "CheckboxStyle__StyledRow",
+  componentId: "sc-a9bf1h-3"
+})(["display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;"]);
+export var StyledColumn = styled.div.withConfig({
+  displayName: "CheckboxStyle__StyledColumn",
+  componentId: "sc-a9bf1h-4"
+})(["display:flex;flex-direction:column;&.help-text{color:", ";}"], Neutral.B40);
+export var StyledLeftColumn = styled(StyledColumn).withConfig({
+  displayName: "CheckboxStyle__StyledLeftColumn",
+  componentId: "sc-a9bf1h-5"
+})(["flex-basis:20px;"]);

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { SVGProps } from 'react';
+import { IconNames } from './icons/icons';
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'name'> {
+    name: IconNames;
+}
+export declare const Icon: ({ name, ...props }: IconProps) => JSX.Element;

package/es/@next/Icon/Icon.js

@@ -0,0 +1,10 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["name"];
+import React from 'react';
+import { iconsMappingComponent } from './icons/icons';
+export var Icon = function Icon(_ref) {
+  var name = _ref.name,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var IconComponent = iconsMappingComponent[name];
+  return /*#__PURE__*/React.createElement(IconComponent, props);
+};

package/es/@next/Icon/Icon.test.d.ts

@@ -0,0 +1,2 @@
+import 'jest-styled-components';
+import '@testing-library/jest-dom/extend-expect';

package/es/@next/Icon/IconStoriesStyles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IconProps } from './Icon';
+export declare const StyledUnorderedList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const StyledItemList: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<({ name, ...props }: IconProps) => JSX.Element, any, IconProps, never>;

package/es/@next/Icon/IconStoriesStyles.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { Icon } from './Icon';
+export var StyledUnorderedList = styled.ul.withConfig({
+  displayName: "IconStoriesStyles__StyledUnorderedList",
+  componentId: "sc-7j50pb-0"
+})(["display:flex;list-style-type:none;flex-wrap:wrap;align-items:flex-start;"]);
+export var StyledItemList = styled.li.withConfig({
+  displayName: "IconStoriesStyles__StyledItemList",
+  componentId: "sc-7j50pb-1"
+})(["display:flex;flex-basis:220px;align-items:center;"]);
+export var StyledIcon = styled(Icon).withConfig({
+  displayName: "IconStoriesStyles__StyledIcon",
+  componentId: "sc-7j50pb-2"
+})(["margin-right:1em;"]);

package/es/@next/Icon/components/RiAccountCircleFill.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgRiAccountCircleFill: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgRiAccountCircleFill;

package/es/@next/Icon/components/RiAccountCircleFill.js

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+var SvgRiAccountCircleFill = function SvgRiAccountCircleFill(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2ZM6.023 15.416C7.491 17.606 9.695 19 12.16 19c2.464 0 4.669-1.393 6.136-3.584A8.968 8.968 0 0 0 12.16 13a8.968 8.968 0 0 0-6.137 2.416ZM12 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+  }));
+};
+export default SvgRiAccountCircleFill;

package/es/@next/Icon/components/RiAccountCircleLine.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgRiAccountCircleLine: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgRiAccountCircleLine;