glints-aries 4.1.3 → 4.1.5

package/es/@next/Carousel/CarouselStyle.js

@@ -0,0 +1,62 @@
+var _indicatorPositionSty, _indicatorTypeSpaceMa, _indicatorTypeStyleMa;
+import styled from 'styled-components';
+import { borderRadius16, borderRadiusHalf } from '../utilities/borderRadius';
+import { Neutral, Yellow } from '../utilities/colors';
+import { space4, space8 } from '../utilities/spacing';
+export var CarouselContainer = styled.div.withConfig({
+  displayName: "CarouselStyle__CarouselContainer",
+  componentId: "sc-pn0x62-0"
+})(["position:relative;display:flex;flex-direction:column;aspect-ratio:", ";height:", ";width:", ";"], function (props) {
+  return props.aspectRatio;
+}, function (props) {
+  return props.height;
+}, function (props) {
+  return props.width;
+});
+export var SlideContainer = styled.div.withConfig({
+  displayName: "CarouselStyle__SlideContainer",
+  componentId: "sc-pn0x62-1"
+})(["position:relative;display:flex;overflow:hidden;aspect-ratio:", ";height:", ";width:", ";"], function (props) {
+  return props.aspectRatio;
+}, function (props) {
+  return props.height;
+}, function (props) {
+  return props.width;
+});
+export var ItemsContainer = styled.div.withConfig({
+  displayName: "CarouselStyle__ItemsContainer",
+  componentId: "sc-pn0x62-2"
+})(["display:flex;white-space:nowrap;width:100%;height:100%;transition-timing-function:cubic-bezier(0.34,0.69,0.1,1);transition-duration:500ms;transform:", ";"], function (props) {
+  return "translateX(-" + props.activeIndex * 100 + "%)";
+});
+export var ArrowsContainer = styled.div.withConfig({
+  displayName: "CarouselStyle__ArrowsContainer",
+  componentId: "sc-pn0x62-3"
+})(["visibility:visible;opacity:1;transition:opacity 0.75s ease;button{z-index:2;position:absolute;display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:", ";border:none;background:", ";opacity:0.6;cursor:pointer;&:hover{opacity:1;transition:opacity 0.5s ease;}}&[data-hidden='true']{visibility:hidden;opacity:0;}"], borderRadiusHalf, Neutral.B99);
+export var PreviousArrow = styled.button.withConfig({
+  displayName: "CarouselStyle__PreviousArrow",
+  componentId: "sc-pn0x62-4"
+})(["left:0;margin-left:", ";top:50%;transform:translateY(-50%);"], space8);
+export var NextArrow = styled.button.withConfig({
+  displayName: "CarouselStyle__NextArrow",
+  componentId: "sc-pn0x62-5"
+})(["right:0;margin-right:", ";top:50%;transform:translateY(-50%);"], space8);
+
+// use style mapping for indicator type and position
+var indicatorPositionStyleMapping = (_indicatorPositionSty = {}, _indicatorPositionSty['top'] = "", _indicatorPositionSty['bottom'] = "", _indicatorPositionSty['left'] = "", _indicatorPositionSty['right'] = "", _indicatorPositionSty['outer'] = "bottom: -18px", _indicatorPositionSty);
+var indicatorTypeSpaceMapping = (_indicatorTypeSpaceMa = {}, _indicatorTypeSpaceMa['dot'] = "", _indicatorTypeSpaceMa['line'] = "gap: " + space8 + ";", _indicatorTypeSpaceMa['slider'] = "", _indicatorTypeSpaceMa);
+export var IndicatorsContainer = styled.div.withConfig({
+  displayName: "CarouselStyle__IndicatorsContainer",
+  componentId: "sc-pn0x62-6"
+})(["display:flex;justify-content:center;z-index:2;position:absolute;width:100%;div{display:flex;background:rgba(248,250,252,0.6);padding:", " ", ";border-radius:100px;", "}", ""], space4, space8, function (props) {
+  return indicatorTypeSpaceMapping[props.indicatorType];
+}, function (props) {
+  return indicatorPositionStyleMapping[props.indicatorPosition];
+});
+var indicatorTypeStyleMapping = (_indicatorTypeStyleMa = {}, _indicatorTypeStyleMa['dot'] = "", _indicatorTypeStyleMa['line'] = "\n    width: 16px;\n    height: 6px;\n    border-radius: " + borderRadius16 + ";\n    background: " + Neutral.B40 + ";\n    border: none;\n  ", _indicatorTypeStyleMa['slider'] = "", _indicatorTypeStyleMa);
+export var Indicator = styled.button.withConfig({
+  displayName: "CarouselStyle__Indicator",
+  componentId: "sc-pn0x62-7"
+})(["cursor:pointer;opacity:0.5;&.active{background:", ";}", ""], Yellow.Brand, function (props) {
+  return indicatorTypeStyleMapping[props.indicatorType];
+});

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

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

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

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

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

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> {
+    id?: string;
+    label?: ReactNode;
+    hasError?: boolean;
+    indeterminate?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    helpText?: string;
+    onChange?(newChecked: boolean, id: string): void;
+    isPadded?: boolean;
+    isControlled?: boolean;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["label", "id", "checked", "onChange", "disabled", "indeterminate", "hasError", "helpText", "isPadded", "isControlled"];
+import React, { useEffect, useRef, useState } from 'react';
+import { StyledCheckbox, StyledCheckboxContainer, StyledColumn, StyledContainer, StyledLeftColumn, StyledRow } from './CheckboxStyle';
+import { noop } from 'lodash-es';
+import { Icon } from '../Icon';
+import { Typography } from '../Typography';
+import nextId from 'react-id-generator';
+export var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_ref, 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,
+    _ref$isPadded = _ref.isPadded,
+    isPadded = _ref$isPadded === void 0 ? true : _ref$isPadded,
+    _ref$isControlled = _ref.isControlled,
+    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var randomId = nextId('glints-checkbox');
+  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';
+  useEffect(function () {
+    var value = indeterminate ? 'mixed' : checked;
+    setCheckedState(value);
+  }, [checked, indeterminate]);
+  var handleClick = function handleClick() {
+    if (!inputNode.current || disabled) {
+      return;
+    }
+    var checkedValue = !checkedState;
+    setCheckedState(checkedValue);
+    onChange == null ? void 0 : onChange(checkedValue, checkBoxId);
+  };
+  return /*#__PURE__*/React.createElement(StyledContainer, {
+    ref: ref,
+    "aria-disabled": disabled,
+    "data-error": hasError,
+    "data-spacing": isPadded
+  }, /*#__PURE__*/React.createElement(StyledRow, {
+    className: "glints-checkbox-styled-row"
+  }, /*#__PURE__*/React.createElement(StyledLeftColumn, null, /*#__PURE__*/React.createElement(StyledCheckboxContainer, null, /*#__PURE__*/React.createElement(StyledCheckbox, {
+    role: "checkbox",
+    "aria-labelledby": labelId,
+    "aria-checked": isControlled ? 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
+  }))), /*#__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)))), helpText && /*#__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/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 { Blue, 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;gap:8px;color:", ";label{cursor:pointer;margin-top:-1px;}svg{border-radius:4px;position:absolute;height:20px;width:20px;top:0;left:0;opacity:0;pointer-events:none;fill:", ";}&[data-spacing='true']{padding:", " 0px;}&[aria-disabled='true'],&[aria-disabled='true'] .help-text{color:", ";}&[aria-disabled='true'] div[role='checkbox']{border-color:", ";background:", ";cursor:not-allowed;}&[aria-disabled='true'] input{cursor:not-allowed;}&[aria-disabled='true'] svg{background:", ";fill:", ";}&[data-error='true'] svg{fill:", ";}"], Neutral.B18, Blue.S99, space4, Neutral.B68, Neutral.B85, Neutral.B95, Neutral.B68, Neutral.B95, Red.B93);
+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:", ";position:relative;& input{opacity:0;cursor:pointer;width:24px;height:24px;margin:0;padding:0;position:absolute;top:-4px;left:-4px;}&[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/Collapse/Collapse.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CollapseItemProps } from './CollapseItem';
+export interface CollapseProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** If true, there is outer 1px border with 4px border radius, default is true */
+    hasBorder?: boolean;
+    /** The children should all be 'Collapse.Item' components */
+    children?: React.ReactElement<CollapseItemProps>[];
+    /** If this is true, show arrow indication, applies to all children collapse items */
+    showIndicator?: boolean;
+    /** Arrow indicator to be put on the very left or right of the header, applies to all children collapse items */
+    indicatorPosition?: 'left' | 'right';
+}
+export declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<CollapseItemProps & React.RefAttributes<HTMLDivElement>>;
+};

package/es/@next/Collapse/Collapse.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["hasBorder", "children", "showIndicator", "indicatorPosition"];
+import React from 'react';
+import { CollapseItem } from './CollapseItem';
+import { CollapseComponentContainer } from './CollapseStyle';
+var CollapseComponent = /*#__PURE__*/React.forwardRef(function Collapse(_ref, ref) {
+  var _ref$hasBorder = _ref.hasBorder,
+    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
+    children = _ref.children,
+    showIndicator = _ref.showIndicator,
+    indicatorPosition = _ref.indicatorPosition,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CollapseComponentContainer, _extends({
+    ref: ref,
+    "data-border": hasBorder
+  }, props), React.Children.map(children, function (child) {
+    var _child$props, _child$props2;
+    var childShowIndicator = ((_child$props = child.props) == null ? void 0 : _child$props.showIndicator) || showIndicator;
+    var childIndicatorPosition = ((_child$props2 = child.props) == null ? void 0 : _child$props2.indicatorPosition) || indicatorPosition;
+    return /*#__PURE__*/React.cloneElement(child, {
+      showIndicator: childShowIndicator,
+      indicatorPosition: childIndicatorPosition
+    });
+  })));
+});
+export var Collapse = Object.assign(CollapseComponent, {
+  Item: CollapseItem
+});

package/es/@next/Collapse/Collapse.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/Collapse/CollapseItem.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface CollapseItemProps {
+    /** Content to be displayed when the item is not collapsed, 8px padding applied by default */
+    children: React.ReactNode;
+    /** Title for each collapse item on the header, simply can pass in a string */
+    title: React.ReactNode;
+    /** Extra components to be displayed on the left side of heading, on the right of indicator (if it is left-aligned) and header (title), flex row with gap of 4px is applied */
+    headerLeft?: React.ReactNode;
+    /** Extra components to be displayed on the right side of heading, on the left of indicator (if it is right-aligned), flex row with gap of 4px is applied */
+    headerRight?: React.ReactNode;
+    /** If this is false, it is not collapsed at the beginning (you can see children content directly), default is true */
+    defaultCollapsed?: boolean;
+    /** If this is true, you cannot collapse or uncollapsed the item, default is false */
+    disabled?: boolean;
+    /** If this is true, show arrow indication, otherwise it is not shown, default is True or whatever specified in Collapse component */
+    showIndicator?: boolean;
+    /** Arrow indicator to be put on the very left or right of the header, default is left or whatever specified in Collapse component, you can overwrite for a single item here */
+    indicatorPosition?: 'left' | 'right';
+}
+export declare const CollapseItem: React.ForwardRefExoticComponent<CollapseItemProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/Collapse/CollapseItem.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Icon } from '../Icon';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { CollapseContent, CollapseContentWrapper, CollapseItemHeader, CollapseItemContent, IndicatorIconWrapper, RightHeaderSection } from './CollapseItemStyle';
+export var CollapseItem = /*#__PURE__*/React.forwardRef(function CollapseItem(_ref, ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    headerLeft = _ref.headerLeft,
+    headerRight = _ref.headerRight,
+    _ref$defaultCollapsed = _ref.defaultCollapsed,
+    defaultCollapsed = _ref$defaultCollapsed === void 0 ? true : _ref$defaultCollapsed,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$showIndicator = _ref.showIndicator,
+    showIndicator = _ref$showIndicator === void 0 ? true : _ref$showIndicator,
+    _ref$indicatorPositio = _ref.indicatorPosition,
+    indicatorPosition = _ref$indicatorPositio === void 0 ? 'left' : _ref$indicatorPositio;
+  var _useState = useState(defaultCollapsed),
+    isCollapsed = _useState[0],
+    setIsCollapsed = _useState[1];
+  var handleClick = function handleClick() {
+    if (!disabled) {
+      setIsCollapsed(!isCollapsed);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CollapseItemHeader, {
+    onClick: handleClick,
+    "data-disabled": disabled,
+    ref: ref
+  }, showIndicator && indicatorPosition === 'left' && /*#__PURE__*/React.createElement(IndicatorIconWrapper, {
+    isCollapsed: isCollapsed
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-right-fill"
+  })), /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "body1",
+    color: disabled ? Neutral.B85 : Neutral.B18
+  }, title), headerLeft, /*#__PURE__*/React.createElement(RightHeaderSection, null, headerRight, showIndicator && indicatorPosition === 'right' && /*#__PURE__*/React.createElement(IndicatorIconWrapper, {
+    isCollapsed: isCollapsed,
+    "data-anticlockwise": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-left-fill"
+  })))), /*#__PURE__*/React.createElement(CollapseItemContent, {
+    isCollapsed: isCollapsed
+  }, /*#__PURE__*/React.createElement(CollapseContentWrapper, null, /*#__PURE__*/React.createElement(CollapseContent, {
+    className: "collapse-item-content"
+  }, children))));
+});

package/es/@next/Collapse/CollapseItemStyle.d.ts

@@ -0,0 +1,10 @@
+export declare const CollapseItemHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RightHeaderSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollapseItemContent: import("styled-components").StyledComponent<"div", any, {
+    isCollapsed: boolean;
+}, never>;
+export declare const CollapseContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollapseContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IndicatorIconWrapper: import("styled-components").StyledComponent<"div", any, {
+    isCollapsed: boolean;
+}, never>;

package/es/@next/Collapse/CollapseItemStyle.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+import { subtitle2 } from '../Typography/TypographyStyles';
+import { Neutral } from '../utilities/colors';
+import { space4, space8 } from '../utilities/spacing';
+import { Breakpoints } from '..';
+var ANIMATION_DURATION = '200ms';
+export var CollapseItemHeader = styled.div.withConfig({
+  displayName: "CollapseItemStyle__CollapseItemHeader",
+  componentId: "sc-1xlws99-0"
+})(["display:flex;flex-direction:row;align-items:center;gap:", ";padding:", ";cursor:pointer;background-color:", ";border-bottom:1px solid ", ";svg{height:20px;width:20px;fill:", ";}&[data-disabled='true']{cursor:not-allowed;svg{fill:", ";}}@media (max-width:", "){svg{height:18px;width:18px;}}"], space4, space8, Neutral.B100, Neutral.B85, Neutral.B40, Neutral.B85, Breakpoints.large);
+export var RightHeaderSection = styled.div.withConfig({
+  displayName: "CollapseItemStyle__RightHeaderSection",
+  componentId: "sc-1xlws99-1"
+})(["display:flex;flex-direction:row;align-items:center;gap:", ";margin-left:auto;"], space4);
+export var CollapseItemContent = styled.div.withConfig({
+  displayName: "CollapseItemStyle__CollapseItemContent",
+  componentId: "sc-1xlws99-2"
+})(["display:grid;grid-template-rows:", ";transition:all ", " ease-in-out;opacity:", ";width:100%;background-color:", ";"], function (props) {
+  return props.isCollapsed ? '0fr' : '1fr';
+}, ANIMATION_DURATION, function (props) {
+  return props.isCollapsed ? 0 : 1;
+}, Neutral.B99);
+export var CollapseContentWrapper = styled.div.withConfig({
+  displayName: "CollapseItemStyle__CollapseContentWrapper",
+  componentId: "sc-1xlws99-3"
+})(["overflow:hidden;"]);
+export var CollapseContent = styled.div.withConfig({
+  displayName: "CollapseItemStyle__CollapseContent",
+  componentId: "sc-1xlws99-4"
+})(["padding:", ";border-bottom:1px solid ", ";", ""], space8, Neutral.B85, subtitle2);
+export var IndicatorIconWrapper = styled.div.withConfig({
+  displayName: "CollapseItemStyle__IndicatorIconWrapper",
+  componentId: "sc-1xlws99-5"
+})(["display:flex;flex-direction:row;align-items:center;svg{transform:rotate(", ");transition:transform ", " ease-in-out;}&[data-anticlockwise='true']{svg{transform:rotate(", ");}}"], function (props) {
+  return props.isCollapsed ? '0deg' : '90deg';
+}, ANIMATION_DURATION, function (props) {
+  return props.isCollapsed ? '0deg' : '-90deg';
+});

package/es/@next/Collapse/CollapseStyle.d.ts

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

package/es/@next/Collapse/CollapseStyle.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Neutral } from '../utilities/colors';
+import { space4 } from '../utilities/spacing';
+export var CollapseComponentContainer = styled.div.withConfig({
+  displayName: "CollapseStyle__CollapseComponentContainer",
+  componentId: "sc-7p3lny-0"
+})(["display:flex;flex-direction:column;background-color:", ";&[data-border='true']{border:1px solid ", ";border-bottom:none;border-radius:", ";overflow:hidden;}"], Neutral.B85, Neutral.B85, space4);

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

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

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

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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface ComboboxProps {
+    activator: React.ReactElement;
+    allowMultiple?: boolean;
+    children?: React.ReactNode;
+    label?: React.ReactNode;
+    onClose?: () => void;
+    /** Margin Top = 8 ; Option height = 48 ; optionListHeight = (n options * option height) + margin top; */
+    listHeight?: number;
+    /** true = Allow vertical scroll, default by 6 options. */
+    scrollable?: boolean;
+}
+export declare const Combobox: {
+    ({ activator, allowMultiple, children, onClose, listHeight, scrollable, }: ComboboxProps): JSX.Element;
+    Label: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
+    TextInput: ({ onChange, value, ...props }: import("./components/TextInput/TextInput").ComboboxTextInputProps) => JSX.Element;
+    OptionList: ({ children, isEmpty, noOptionsMessage, onSelect, }: import("./components/OptionList/OptionList").OptionListProps) => JSX.Element;
+    Option: ({ label, value, selected }: import("./components/OptionList/Option").OptionProps) => JSX.Element;
+};

package/es/@next/Combobox/Combobox.js

@@ -0,0 +1,84 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Popover } from '../Popover';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { TextInput, OptionList, Option } from './components';
+import { ComboboxOptionContext } from './components/OptionList/OptionListContext';
+import { ComboboxTextInputContext } from './components/TextInput/TextInputContext';
+export var Combobox = function Combobox(_ref) {
+  var activator = _ref.activator,
+    _ref$allowMultiple = _ref.allowMultiple,
+    allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
+    children = _ref.children,
+    onClose = _ref.onClose,
+    listHeight = _ref.listHeight,
+    scrollable = _ref.scrollable;
+  var _useState = useState(false),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = useState(),
+    textInputWidth = _useState2[0],
+    setTextInputWidth = _useState2[1];
+  var _useState3 = useState(''),
+    optionListHeight = _useState3[0],
+    setOptionListHeight = _useState3[1];
+  useEffect(function () {
+    if (listHeight) {
+      setOptionListHeight(listHeight + 24 + "px");
+      return;
+    }
+    if (scrollable) {
+      setOptionListHeight(296 + 24 + "px");
+      return;
+    }
+  }, [listHeight, scrollable]);
+  var handleClose = useCallback(function () {
+    setPopoverActive(false);
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  var handleFocus = function handleFocus() {
+    setPopoverActive(true);
+  };
+  var handleBlur = function handleBlur() {
+    if (popoverActive) {
+      handleClose();
+    }
+  };
+  var textInputContextValue = {
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    textInputWidth: textInputWidth,
+    setTextInputWidth: setTextInputWidth
+  };
+  var optionContextValue = {
+    allowMultiple: allowMultiple
+  };
+  return /*#__PURE__*/React.createElement(Popover, {
+    active: popoverActive,
+    activator: /*#__PURE__*/React.createElement(ComboboxTextInputContext.Provider, {
+      value: textInputContextValue
+    }, activator),
+    onClose: handleClose,
+    autofocusTarget: "none",
+    preventFocusOnClose: true,
+    fullWidth: true
+  }, /*#__PURE__*/React.createElement(Popover.Pane, {
+    height: optionListHeight
+  }, /*#__PURE__*/React.createElement(ComboboxOptionContext.Provider, {
+    value: optionContextValue
+  }, /*#__PURE__*/React.createElement(ComboboxTextInputContext.Provider, {
+    value: textInputContextValue
+  }, children))));
+};
+var Label = function Label(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle2",
+    color: Neutral.B18
+  }, children);
+};
+Combobox.Label = Label;
+Combobox.TextInput = TextInput;
+Combobox.OptionList = OptionList;
+Combobox.Option = Option;

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

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

package/es/@next/Combobox/comboboxStoryHelper/ComboboxMultuSelect.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { OptionType } from '../components/OptionList/Option';
+interface ComboboxMultiSelectProps {
+    countries: OptionType[];
+}
+export declare const ComboboxMultiSelect: ({ countries, ...args }: ComboboxMultiSelectProps) => JSX.Element;
+export {};