glints-aries 4.0.170 → 4.0.172

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

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const avatarBackgroundColorVariant: readonly ["supplementary", "warning", "danger", "success", "outstanding"];
+declare const avatarSizeVariant: readonly ["large", "medium"];
+export declare type AvatarBackgroundColorVariant = typeof avatarBackgroundColorVariant[number];
+export declare type AvatarSizeVariant = typeof avatarSizeVariant[number];
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: AvatarBackgroundColorVariant;
+    size?: AvatarSizeVariant;
+    initials?: string;
+}
+export declare const Avatar: ({ variant, size, initials, ...props }: AvatarProps) => JSX.Element;
+export {};

package/es/@next/Avatar/Avatar.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["variant", "size", "initials"];
+import React from 'react';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { AvatarStyle } from './AvatarStyle';
+var avatarBackgroundColorVariant = ['supplementary', 'warning', 'danger', 'success', 'outstanding'];
+var avatarSizeVariant = ['large', 'medium'];
+export var Avatar = function Avatar(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'supplementary' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    initials = _ref.initials,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(AvatarStyle, _extends({
+    variant: variant,
+    size: size
+  }, props), /*#__PURE__*/React.createElement(Typography, {
+    variant: size === 'medium' ? 'body1' : 'headline6',
+    color: Neutral.B18,
+    as: 'span'
+  }, initials.slice(0, 2)));
+};

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

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

package/es/@next/Avatar/AvatarStyle.d.ts

@@ -0,0 +1,2 @@
+import { AvatarProps } from './Avatar';
+export declare const AvatarStyle: import("styled-components").StyledComponent<"div", any, AvatarProps, never>;

package/es/@next/Avatar/AvatarStyle.js

@@ -0,0 +1,34 @@
+var _avatarBackgroundColo, _avatarSizeVariant;
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { Blue, Green, Neutral, Orange, Red } from '../utilities/colors';
+var mediumAvatarSizeStyle = "\n  width: 40px;\n  height: 40px;\n  \n  @media (max-width: " + Breakpoints.large + ") {\n    width: 32px;\n    height: 32px;\n  }\n";
+var largeAvatarSizeStyle = "\n  width: 60px;\n  height: 60px;\n\n  @media (max-width: " + Breakpoints.large + ") {\n    width: 40px;\n    height: 40px;\n  }\n";
+var avatarBackgroundColor = (_avatarBackgroundColo = {}, _avatarBackgroundColo['supplementary'] = Neutral.B99, _avatarBackgroundColo['warning'] = Orange.S42, _avatarBackgroundColo['danger'] = Red.B100, _avatarBackgroundColo['success'] = Green.B89, _avatarBackgroundColo['outstanding'] = Blue.S08, _avatarBackgroundColo);
+var avatarSizeVariant = (_avatarSizeVariant = {}, _avatarSizeVariant['large'] = largeAvatarSizeStyle, _avatarSizeVariant['medium'] = mediumAvatarSizeStyle, _avatarSizeVariant);
+var getAvatarBackgroundColor = function getAvatarBackgroundColor(variant) {
+  if (!(variant in avatarBackgroundColor)) {
+    console.warn(variant + " is not a valid variant for the background color, default will be used");
+    return avatarBackgroundColor['supplementary'];
+  }
+  return avatarBackgroundColor[variant];
+};
+var getAvatarSizeStyle = function getAvatarSizeStyle(sizeVariant) {
+  if (!(sizeVariant in avatarSizeVariant)) {
+    console.warn(sizeVariant + " is not a valid variant for the size, default will be used");
+    return avatarSizeVariant['medium'];
+  }
+  return avatarSizeVariant[sizeVariant];
+};
+export var AvatarStyle = styled.div.withConfig({
+  displayName: "AvatarStyle",
+  componentId: "sc-1ys0vpf-0"
+})(["", "}", "}display:flex;align-items:center;justify-content:center;border-radius:50%;"], function (_ref) {
+  var size = _ref.size;
+  return getAvatarSizeStyle(size);
+}, function (_ref2) {
+  var variant = _ref2.variant;
+  return {
+    'background-color': getAvatarBackgroundColor(variant)
+  };
+});

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

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

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ButtonGroupProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    segmented?: boolean;
+    fullWidth?: boolean;
+    /** Set this true when buttons are wrapped by another element (e.g as an activator for Popover) */
+    isButtonWrapped?: boolean;
+}
+export declare const ButtonGroup: ({ segmented, fullWidth, isButtonWrapped, ...props }: ButtonGroupProps) => JSX.Element;

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

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["segmented", "fullWidth", "isButtonWrapped"];
+import React from 'react';
+import { StyledButtonGroup } from './ButtonGroupStyle';
+export var ButtonGroup = function ButtonGroup(_ref) {
+  var segmented = _ref.segmented,
+    fullWidth = _ref.fullWidth,
+    isButtonWrapped = _ref.isButtonWrapped,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledButtonGroup, _extends({
+    "data-segmented": segmented,
+    "data-full-width": fullWidth,
+    "data-button-wrapped": isButtonWrapped
+  }, props));
+};

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

@@ -1,9 +1,9 @@
 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';
+import { ButtonGroup } from './ButtonGroup';
 ButtonGroup.displayName = 'ButtonGroup';
 export default {
   title: '@next/ButtonGroup',

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

@@ -1,6 +1 @@
-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>;
+export declare const StyledButtonGroup: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -2,13 +2,7 @@ import styled from 'styled-components';
 import { borderRadius4 } from '../utilities/borderRadius';
 import { Neutral } from '../utilities/colors';
 import { space8 } from '../utilities/spacing';
-export var ButtonGroup = styled.div.withConfig({
-  displayName: "ButtonGroupStyle__ButtonGroup",
+export var StyledButtonGroup = styled.div.withConfig({
+  displayName: "ButtonGroupStyle__StyledButtonGroup",
   componentId: "sc-7vhxrt-0"
-})(["display:flex;flex-direction:row;align-items:center;padding:0px;", " ", ""], 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 " + Neutral.B68 + "\n            }\n           }\n           > button:focus {\n            z-index: 1;\n            border: 1px solid " + Neutral.B68 + "\n           }\n\n           button[data-active='true'] {\n            border: 1px solid " + Neutral.B40 + "\n           }\n           " : "gap: " + space8 + ";";
-}, function (_ref2) {
-  var fullWidth = _ref2.fullWidth;
-  return fullWidth ? "> button {\n             flex: 1;\n             }" : "";
-});
+})(["display:flex;flex-direction:row;align-items:center;padding:0px;gap:", ";&[data-segmented='true']{gap:0;}&[data-segmented='true'] button[data-active='true']{border:1px solid ", ";}&[data-segmented='true'] button{border-radius:0;border-right:0;:nth-child(1){border-radius:", " 0px 0px ", ";}:nth-last-child(1){border-radius:0px ", " ", " 0px;border-right:1px solid ", ";}}&[data-segmented='true'] button:focus{z-index:1;border:1px solid ", ";}&[data-full-width='true'] button{flex:1;}&[data-segmented='true']&[data-button-wrapped='true'] > *{button{border-radius:0;border-right:0;}:nth-child(1) button{border-radius:", " 0px 0px ", ";}:nth-last-child(1) button{border-radius:0px ", " ", " 0px;border-right:1px solid ", ";}}"], space8, Neutral.B40, borderRadius4, borderRadius4, borderRadius4, borderRadius4, Neutral.B68, Neutral.B68, borderRadius4, borderRadius4, borderRadius4, borderRadius4, Neutral.B68);

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

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

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

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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { PopoverProps as PolarisPopoverProps } from 'polaris-glints';
+export declare type PopoverProps = PolarisPopoverProps;
+/** Using Popover from polaris-glints repository internally
+ * Please add `<div id="glints-portal-container"></div>` as a sibling element of where your React app is rendered.
+ * This is a temporary workaround, as React Portal need this as the anchor */
+export declare const Popover: ((props: PopoverProps) => JSX.Element) & {
+    Pane: typeof import("polaris-glints/build/ts/latest/src/components/Popover/components").Pane;
+    Section: typeof import("polaris-glints/build/ts/latest/src/components/Popover/components").Section;
+};

package/es/@next/Popover/Popover.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Popover as PolarisPopover } from 'polaris-glints';
+import { StyledPopover } from './PopoverStyle';
+var PopoverComponent = function PopoverComponent(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPopover, null), /*#__PURE__*/React.createElement(PolarisPopover, props));
+};
+
+/** Using Popover from polaris-glints repository internally
+ * Please add `<div id="glints-portal-container"></div>` as a sibling element of where your React app is rendered.
+ * This is a temporary workaround, as React Portal need this as the anchor */
+export var Popover = Object.assign(PopoverComponent, {
+  Pane: PolarisPopover.Pane,
+  Section: PolarisPopover.Section
+});

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

@@ -0,0 +1,132 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { Button, PrimaryButton } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { Icon } from '../Icon';
+import { Typography } from '../Typography';
+import { Popover } from './Popover';
+Popover.displayName = 'Popover';
+export default {
+  title: '@next/Popover',
+  component: Popover,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseContainer, null, Story()), /*#__PURE__*/React.createElement("div", {
+      id: "glints-portal-container"
+    }));
+  }],
+  argTypes: {
+    preferredPosition: {
+      control: 'select',
+      options: ['above', 'below', 'mostSpace']
+    },
+    preferredAlignment: {
+      control: 'select',
+      options: ['left', 'center', 'right']
+    }
+  }
+};
+var PopoverExample = function PopoverExample(props) {
+  var _useState = useState(false),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = useState(false),
+    popoverActive2 = _useState2[0],
+    setPopoverActive2 = _useState2[1];
+  var _useState3 = useState(false),
+    popoverActive3 = _useState3[0],
+    setPopoverActive3 = _useState3[1];
+  var Suffix = /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-up-fill"
+  });
+  var togglePopoverActive = useCallback(function () {
+    return setPopoverActive(function (popoverActive) {
+      return !popoverActive;
+    });
+  }, []);
+  var togglePopoverActive2 = useCallback(function () {
+    return setPopoverActive2(function (popoverActive) {
+      return !popoverActive;
+    });
+  }, []);
+  var togglePopoverActive3 = useCallback(function () {
+    return setPopoverActive3(function (popoverActive) {
+      return !popoverActive;
+    });
+  }, []);
+  var example1Activator = /*#__PURE__*/React.createElement(Button, {
+    onClick: togglePopoverActive
+  }, "Show");
+  var example2Activator = /*#__PURE__*/React.createElement(Button, {
+    onClick: togglePopoverActive2
+  }, "Show");
+  var example3Activator = /*#__PURE__*/React.createElement(Button, {
+    onClick: togglePopoverActive3
+  }, "Show");
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginLeft: '100px',
+      paddingTop: '150px',
+      display: 'flex',
+      gap: '50px'
+    }
+  }, /*#__PURE__*/React.createElement(Popover, _extends({}, props, {
+    active: popoverActive,
+    activator: example1Activator,
+    onClose: togglePopoverActive
+  }), /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '10px'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle1"
+  }, "Title")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1"
+  }, "Description")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, null, "Label"), " ", /*#__PURE__*/React.createElement(PrimaryButton, null, "Label")))))), /*#__PURE__*/React.createElement(Popover, _extends({}, props, {
+    active: popoverActive2,
+    activator: example2Activator,
+    onClose: togglePopoverActive2
+  }), /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement(Popover.Section, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle2"
+  }, "AVAILABLE SALES CHANNEL"))), /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '0px 16px'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1"
+  }, "Online")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1"
+  }, "Facebook")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1"
+  }, "Shopify POS"))))), /*#__PURE__*/React.createElement(Popover, _extends({}, props, {
+    active: popoverActive3,
+    activator: example3Activator,
+    onClose: togglePopoverActive3
+  }), /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, null, "Action"), /*#__PURE__*/React.createElement(Button, null, "Action"), /*#__PURE__*/React.createElement(Button, {
+    icon: Suffix,
+    iconPosition: "right"
+  }, "Move to"))))));
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(PopoverExample, args);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  preferredPosition: 'mostSpace',
+  preferredAlignment: 'center'
+};
+Interactive.parameters = {
+  docs: {
+    source: {
+      code: "const [popoverActive, setPopoverActive] = useState(false);\n      const [popoverActive2, setPopoverActive2] = useState(false);\n      const [popoverActive3, setPopoverActive3] = useState(false);\n      const Suffix = <Icon name=\"ri-arrow-m-up-fill\" />;\n    \n      const togglePopoverActive = useCallback(\n        () => setPopoverActive(popoverActive => !popoverActive),\n        []\n      );\n    \n      const togglePopoverActive2 = useCallback(\n        () => setPopoverActive2(popoverActive => !popoverActive),\n        []\n      );\n    \n      const togglePopoverActive3 = useCallback(\n        () => setPopoverActive3(popoverActive => !popoverActive),\n        []\n      );\n    \n      const example1Activator = <Button onClick={togglePopoverActive}>Show</Button>;\n      const example2Activator = (\n        <Button onClick={togglePopoverActive2}>Show</Button>\n      );\n      const example3Activator = (\n        <Button onClick={togglePopoverActive3}>Show</Button>\n      );\n      return (\n        <div\n          style={{\n            marginLeft: '100px',\n            paddingTop: '200px',\n            display: 'flex',\n            gap: '50px',\n          }}\n        >\n          <Popover\n            {...props}\n            active={popoverActive}\n            activator={example1Activator}\n            onClose={togglePopoverActive}\n          >\n            <Popover.Pane>\n              <div style={{ padding: '10px' }}>\n                <div>\n                  <Typography as=\"span\" variant=\"subtitle1\">\n                    Title\n                  </Typography>\n                </div>\n                <div>\n                  <Typography variant=\"body1\">Description</Typography>\n                </div>\n                <div>\n                  <ButtonGroup>\n                    <Button>Label</Button> <PrimaryButton>Label</PrimaryButton>\n                  </ButtonGroup>\n                </div>\n              </div>\n            </Popover.Pane>\n          </Popover>\n          <Popover\n            {...props}\n            active={popoverActive2}\n            activator={example2Activator}\n            onClose={togglePopoverActive2}\n          >\n            <Popover.Pane>\n              <Popover.Section>\n                <Typography variant=\"subtitle2\">AVAILABLE SALES CHANNEL</Typography>\n              </Popover.Section>\n            </Popover.Pane>\n            <Popover.Pane>\n              <div>\n                <Typography variant=\"body1\">Online</Typography>\n              </div>\n              <div>\n                <Typography variant=\"body1\">Facebook</Typography>\n              </div>\n              <div>\n                <Typography variant=\"body1\">Shopify POS</Typography>\n              </div>\n            </Popover.Pane>\n          </Popover>\n          <Popover\n            {...props}\n            active={popoverActive3}\n            activator={example3Activator}\n            onClose={togglePopoverActive3}\n          >\n            <Popover.Pane>\n              <div style={{ padding: '10px' }}>\n                <ButtonGroup>\n                  <Button>Action</Button>\n                  <Button>Action</Button>\n                  <Button icon={Suffix} iconPosition=\"right\">\n                    Move to\n                  </Button>\n                </ButtonGroup>\n              </div>\n            </Popover.Pane>\n          </Popover>\n        </div>\n      );"
+    },
+    language: 'javascript',
+    type: 'auto'
+  }
+};

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

@@ -0,0 +1,145 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React, { useCallback, useState } from 'react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { Popover } from './Popover';
+import { OutlineButton } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { CheckboxGroup } from './popoverStoryHelper/CheckboxGroup';
+import { Typography } from '../Typography';
+import { SalarySelector } from './popoverStoryHelper/SalarySelector';
+import { Icon } from '../Icon';
+Popover.displayName = 'Popover';
+export default {
+  title: '@next/Popover as Filter',
+  component: Popover,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story(), /*#__PURE__*/React.createElement("div", {
+      id: "glints-portal-container"
+    }));
+  }],
+  argTypes: {}
+};
+var cities = {
+  Indonesia: ['Jakarta', 'Bandung', 'Bali'],
+  Malaysia: ['Kuala Lumpur', 'Ipoh', 'Penang'],
+  Singapore: ['Singapore']
+};
+var PopoverAsFilterExample = function PopoverAsFilterExample() {
+  var _useState = useState(false),
+    popoverCityActive = _useState[0],
+    setPopoverCityActive = _useState[1];
+  var _useState2 = useState(false),
+    popoverSalaryActive = _useState2[0],
+    setPopoverSalaryActive = _useState2[1];
+  var _useState3 = useState([]),
+    selectedCities = _useState3[0],
+    setSelectedCities = _useState3[1];
+  var _useState4 = useState(0),
+    salaryFrom = _useState4[0],
+    setSalaryFrom = _useState4[1];
+  var _useState5 = useState(0),
+    salaryTo = _useState5[0],
+    setSalaryTo = _useState5[1];
+  var Suffix = /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-down-fill"
+  });
+  var togglePopoverCityActive = useCallback(function () {
+    return setPopoverCityActive(function (popoverActive) {
+      return !popoverActive;
+    });
+  }, []);
+  var toggleSalaryActive = useCallback(function () {
+    return setPopoverSalaryActive(function (popoverActive) {
+      return !popoverActive;
+    });
+  }, []);
+  var cityActivator = /*#__PURE__*/React.createElement(OutlineButton, {
+    onClick: togglePopoverCityActive,
+    icon: Suffix,
+    iconPosition: "right"
+  }, "City");
+  var salaryActivator = /*#__PURE__*/React.createElement(OutlineButton, {
+    onClick: toggleSalaryActive,
+    icon: Suffix,
+    iconPosition: "right"
+  }, "Salary");
+  var handleCityChanged = function handleCityChanged(action, cities) {
+    if (action === 'Add') {
+      var selected = new Set([].concat(selectedCities, cities));
+      setSelectedCities(Array.from(selected));
+      return;
+    }
+    setSelectedCities(selectedCities.filter(function (sc) {
+      return !cities.includes(sc);
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginLeft: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(ButtonGroup, {
+    segmented: true,
+    isButtonWrapped: true
+  }, /*#__PURE__*/React.createElement(Popover, {
+    active: popoverCityActive,
+    activator: cityActivator,
+    autofocusTarget: "first-node",
+    onClose: togglePopoverCityActive
+  }, /*#__PURE__*/React.createElement(Popover.Pane, {
+    fixed: true
+  }, /*#__PURE__*/React.createElement(Popover.Section, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle2"
+  }, "Select Cities"))), /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '10px'
+    }
+  }, Object.keys(cities).map(function (country) {
+    return /*#__PURE__*/React.createElement(CheckboxGroup, {
+      key: country,
+      country: country
+      // @ts-ignore
+      ,
+      cities: cities[country],
+      onChanged: handleCityChanged
+    });
+  })))), /*#__PURE__*/React.createElement(Popover, {
+    active: popoverSalaryActive,
+    activator: salaryActivator,
+    autofocusTarget: "first-node",
+    onClose: toggleSalaryActive,
+    fullWidth: true
+  }, /*#__PURE__*/React.createElement(Popover.Pane, {
+    fixed: true
+  }, /*#__PURE__*/React.createElement(Popover.Section, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "caption"
+  }, "Salary"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SalarySelector, {
+    onFromChanged: setSalaryFrom,
+    onToChanged: setSalaryTo
+  })))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "caption"
+  }, "Selected cities: ", selectedCities.join(','))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "caption"
+  }, "Selected salary range: ", new Intl.NumberFormat().format(salaryFrom), " to", ' ', new Intl.NumberFormat().format(salaryTo))));
+};
+var Template = function Template() {
+  return /*#__PURE__*/React.createElement(PopoverAsFilterExample, null);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {};
+Interactive.parameters = {
+  docs: {
+    source: {
+      code: "\n      import { Popover } from 'Popover';\n      import { OutlineButton } from '../Button';\n      import { ButtonGroup } from '../ButtonGroup';\n      import { CheckboxGroup } from './popoverStoryHelper/CheckboxGroup';\n      import { Typography } from '../Typography';\n      import { SalarySelector } from './popoverStoryHelper/SalarySelector';\n      import { Icon } from '../Icon';\n\n      const cities = {\n        Indonesia: ['Jakarta', 'Bandung', 'Bali'],\n        Malaysia: ['Kuala Lumpur', 'Ipoh', 'Penang'],\n        Singapore: ['Singapore'],\n      };\n      \n      const [popoverCityActive, setPopoverCityActive] = useState(false);\n      const [popoverSalaryActive, setPopoverSalaryActive] = useState(false);\n      const [selectedCities, setSelectedCities] = useState([]);\n      const [salaryFrom, setSalaryFrom] = useState(0);\n      const [salaryTo, setSalaryTo] = useState(0);\n    \n      const Suffix = <Icon name=\"ri-arrow-m-down-fill\" />;\n      const togglePopoverCityActive = useCallback(\n        () => setPopoverCityActive(popoverActive => !popoverActive),\n        []\n      );\n    \n      const toggleSalaryActive = useCallback(\n        () => setPopoverSalaryActive(popoverActive => !popoverActive),\n        []\n      );\n    \n      const cityActivator = (\n        <OutlineButton\n          onClick={togglePopoverCityActive}\n          icon={Suffix}\n          iconPosition=\"right\"\n        >\n          City\n        </OutlineButton>\n      );\n      const salaryActivator = (\n        <OutlineButton\n          onClick={toggleSalaryActive}\n          icon={Suffix}\n          iconPosition=\"right\"\n        >\n          Salary\n        </OutlineButton>\n      );\n    \n      const handleCityChanged = (action: 'Add' | 'Remove', cities: string[]) => {\n        if (action === 'Add') {\n          const selected = new Set([...selectedCities, ...cities]);\n          setSelectedCities(Array.from(selected));\n          return;\n        }\n        setSelectedCities(selectedCities.filter(sc => !cities.includes(sc)));\n      };\n    \n      return (\n        <div style={{ marginLeft: '10px' }}>\n          <ButtonGroup segmented isButtonWrapped>\n            <Popover\n              active={popoverCityActive}\n              activator={cityActivator}\n              autofocusTarget=\"first-node\"\n              onClose={togglePopoverCityActive}\n            >\n              <Popover.Pane fixed>\n                <Popover.Section>\n                  <Typography as=\"span\" variant=\"subtitle2\">\n                    Select Cities\n                  </Typography>\n                </Popover.Section>\n              </Popover.Pane>\n              <Popover.Pane>\n                <div style={{ padding: '10px' }}>\n                  {Object.keys(cities).map((country: string) => {\n                    return (\n                      <CheckboxGroup\n                        key={country}\n                        country={country}\n                        cities={cities[country]}\n                        onChanged={handleCityChanged}\n                      />\n                    );\n                  })}\n                </div>\n              </Popover.Pane>\n            </Popover>\n            <Popover\n              active={popoverSalaryActive}\n              activator={salaryActivator}\n              autofocusTarget=\"first-node\"\n              onClose={toggleSalaryActive}\n              fullWidth\n            >\n              <Popover.Pane fixed>\n                <Popover.Section>\n                  <Typography as=\"span\" variant=\"caption\">\n                    Salary\n                  </Typography>\n                </Popover.Section>\n              </Popover.Pane>\n              <div>\n                <SalarySelector\n                  onFromChanged={setSalaryFrom}\n                  onToChanged={setSalaryTo}\n                />\n              </div>\n            </Popover>\n          </ButtonGroup>\n          <div style={{ marginTop: '10px' }}>\n            <Typography as=\"span\" variant=\"caption\">\n              Selected cities: {selectedCities.join(',')}\n            </Typography>\n          </div>\n          <div>\n            <Typography as=\"span\" variant=\"caption\">\n              Selected salary range: {new Intl.NumberFormat().format(salaryFrom)} to{' '}\n              {new Intl.NumberFormat().format(salaryTo)}\n            </Typography>\n          </div>\n        </div>\n      );"
+    },
+    language: 'javascript',
+    type: 'auto'
+  }
+};

package/es/@next/Popover/PopoverStyle.d.ts

@@ -0,0 +1 @@
+export declare const StyledPopover: any;

package/es/@next/Popover/PopoverStyle.js

@@ -0,0 +1,7 @@
+import { createGlobalStyle } from 'styled-components';
+import { borderRadius8 } from '../utilities/borderRadius';
+import { Neutral } from '../utilities/colors';
+import { space16, space4, space8 } from '../utilities/spacing';
+
+// we need to use global style here because popover is created outside the root element for react app
+export var StyledPopover = createGlobalStyle([".Polaris-Popover{max-width:calc(100vw - ", ");margin:0.3125rem 2px ", ";box-shadow:0px ", " 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);border-radius:", ";backface-visibility:hidden;will-change:left,top;}.Polaris-Popover__PopoverOverlay{opacity:0;transition:opacity 100ms ease,transform 100ms ease;transform:translateY(-0.3125rem);}.Polaris-Popover__PopoverOverlay--entering{opacity:1;transform:translateY(0);}.Polaris-Popover__PopoverOverlay--open{opacity:1;transform:none;}.Polaris-Popover__PopoverOverlay--exiting{opacity:1;transform:translateY(0);transition-duration:0ms;}.Polaris-Popover--measuring:not(.Polaris-Popover__PopoverOverlay--exiting){opacity:0;transform:translateY(-0.3125rem);}.Polaris-Popover--fullWidth{margin:0.3125rem auto 0 auto;width:fit-content;}.Polaris-Popover--fullWidth .Polaris-Popover__Content{max-width:none;}.Polaris-Popover--positionedAbove{margin:", " 2px 0.3125rem;}.Polaris-Popover--positionedAbove.Polaris-Popover--fullWidth{margin:0 auto 0.3125rem auto;}.Polaris-Popover__Wrapper{position:relative;overflow:hidden;background-color:", ";border-radius:", ";outline:1px solid transparent;}.Polaris-Popover__Content{position:relative;display:flex;flex-direction:column;border-radius:1px;max-width:25rem;max-height:31.25rem;}.Polaris-Popover__Content:focus{outline:none;}.Polaris-Popover__Content--fullHeight{max-height:none;}.Polaris-Popover__Content--fluidContent{max-height:none;max-width:none;}.Polaris-Popover__Pane{flex:1 1;max-width:100%;}.Polaris-Popover__Pane + .Polaris-Popover__Pane{border-top:1px solid ", ";}.Polaris-Popover__Pane:focus{outline:none;}.Polaris-Popover__Pane--fixed{overflow:visible;flex:0 0 auto;}.Polaris-Popover__Pane--captureOverscroll{overscroll-behavior:contain;}.Polaris-Popover__Section{padding:", ";color:", ";}.Polaris-Popover__Section + .Polaris-Popover__Section{border-top:1px solid #e1e3e5;}.Polaris-Popover__FocusTracker{position:absolute !important;top:0;width:0.0625rem !important;height:0.0625rem !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important;}@media print{.Polaris-Popover__PopoverOverlay--hideOnPrint{display:none !important;}}.Polaris-PositionedOverlay{position:absolute;z-index:400;}.Polaris-PositionedOverlay--fixed{position:fixed;}.Polaris-PositionedOverlay--calculating{visibility:hidden;}.Polaris-PositionedOverlay--preventInteraction{pointer-events:none;}"], space8, space4, space8, borderRadius8, space4, Neutral.B100, borderRadius8, Neutral.B85, space16, Neutral.B40);

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

@@ -0,0 +1 @@
+export { Popover, PopoverProps } from './Popover';

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

@@ -0,0 +1 @@
+export { Popover, PopoverProps } from './Popover';

package/es/@next/Popover/popoverStoryHelper/CheckboxGroup.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    country: string;
+    cities: string[];
+    onChanged: (action: 'Add' | 'Remove', cities: string[]) => void;
+};
+export declare const CheckboxGroup: ({ country, cities, onChanged }: Props) => JSX.Element;
+export {};

package/es/@next/Popover/popoverStoryHelper/CheckboxGroup.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { Checkbox } from '../../Checkbox';
+export var CheckboxGroup = function CheckboxGroup(_ref) {
+  var country = _ref.country,
+    cities = _ref.cities,
+    onChanged = _ref.onChanged;
+  var _useState = useState(false),
+    isCountrySelected = _useState[0],
+    setIsCountrySelected = _useState[1];
+  var _useState2 = useState([]),
+    selectedCities = _useState2[0],
+    setSelectedCities = _useState2[1];
+  var handleCountryChanged = function handleCountryChanged(checked) {
+    setIsCountrySelected(checked);
+    if (checked) {
+      setSelectedCities(cities);
+    } else {
+      setSelectedCities([]);
+    }
+    onChanged(checked ? 'Add' : 'Remove', cities);
+  };
+  var handleCityChanged = function handleCityChanged(checked, id) {
+    if (checked && !selectedCities.includes(id)) {
+      var selected = [].concat(selectedCities, [id]);
+      setSelectedCities(selected);
+      onChanged('Add', [id]);
+      return;
+    }
+    if (!checked) {
+      var _selected = selectedCities.filter(function (s) {
+        return s !== id;
+      });
+      setSelectedCities(_selected);
+      onChanged('Remove', [id]);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    key: country
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: country,
+    label: country,
+    checked: isCountrySelected,
+    onChange: function onChange(newChecked) {
+      return handleCountryChanged(newChecked);
+    }
+  }), cities.map(function (city) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "div-" + city,
+      style: {
+        marginLeft: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      id: city,
+      label: city,
+      key: city,
+      checked: selectedCities.includes(city) || isCountrySelected,
+      onChange: handleCityChanged
+    }));
+  }));
+};

package/es/@next/Popover/popoverStoryHelper/SalarySelector.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    onFromChanged: (amount: number) => void;
+    onToChanged: (amount: number) => void;
+};
+export declare const SalarySelector: ({ onFromChanged, onToChanged }: Props) => JSX.Element;
+export {};