glints-aries 4.0.185 → 4.0.187

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

@@ -1,162 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { IndexTable, useIndexResourceState } from './IndexTable';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-import { Typography } from '..';
-import 'polaris-glints/build/esm/styles.css';
-import { Icon } from '../Icon';
-import { PrimaryButton } from '../Button';
-import { StyledButton, StyledButtonGroup } from './indexTableStoryHelper/ButtonGroupStyle';
-import { Neutral } from '../utilities/colors';
-IndexTable.displayName = 'Table';
-export default {
-  title: '@next/IndexTable',
-  component: IndexTable,
-  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: {
-    disabled: {
-      control: 'boolean'
-    },
-    loading: {
-      control: 'boolean'
-    },
-    loadingLabel: {
-      control: 'text'
-    }
-  }
-};
-var candidates = [{
-  id: '1',
-  url: 'candidate/1',
-  name: 'Dwi Nugraha Putri',
-  location: 'Jakarta, Indonesia',
-  expectedSalary: 'Rp 11,400,000/mo',
-  yearsExperience: '4 years, 3 months',
-  latestWorkExperience: 'Backend Engineer at Google',
-  latestWorkDuration: 'Jan 2021 - Jan 2022'
-}, {
-  id: '2',
-  url: 'candidate/2',
-  name: 'Ahmad Dani',
-  location: 'Jakarta, Indonesia',
-  expectedSalary: 'Rp 11,400,000/mo',
-  yearsExperience: '4 years, 3 months',
-  latestWorkExperience: 'Backend Engineer at Google',
-  latestWorkDuration: 'Jan 2021 - Jan 2022'
-}, {
-  id: '3',
-  url: 'candidate/3',
-  name: 'Syed Ali',
-  location: 'Jakarta, Indonesia',
-  expectedSalary: 'Rp 11,400,000/mo',
-  yearsExperience: '4 years, 3 months',
-  latestWorkExperience: 'Backend Engineer at Google',
-  latestWorkDuration: 'Jan 2021 - Jan 2022'
-}, {
-  id: '4',
-  url: 'candidate/4',
-  name: 'Muhammad Danial',
-  location: 'Jakarta, Indonesia',
-  expectedSalary: 'Rp 11,400,000/mo',
-  yearsExperience: '4 years, 3 months',
-  latestWorkExperience: 'Backend Engineer at Google',
-  latestWorkDuration: 'Jan 2021 - Jan 2022'
-}];
-var resourceName = {
-  singular: 'candidate',
-  plural: 'candidates'
-};
-var Template = function Template(args) {
-  var _useIndexResourceStat = useIndexResourceState(candidates),
-    selectedResources = _useIndexResourceStat.selectedResources,
-    allResourcesSelected = _useIndexResourceStat.allResourcesSelected,
-    handleSelectionChange = _useIndexResourceStat.handleSelectionChange;
-  var promotedBulkActions = [{
-    content: 'Reject',
-    onAction: function onAction() {
-      return console.log('Reject');
-    }
-  }, {
-    title: 'Move to',
-    actions: [{
-      content: 'Assessment',
-      onAction: function onAction() {
-        return console.log('Assessment');
-      }
-    }, {
-      content: 'Interviewing',
-      onAction: function onAction() {
-        return console.log('Interviewing');
-      }
-    }, {
-      content: 'Offered',
-      onAction: function onAction() {
-        return console.log('Offered');
-      }
-    }, {
-      content: 'Hired',
-      onAction: function onAction() {
-        return console.log('Hired');
-      }
-    }]
-  }];
-  var rowMarkup = candidates.map(function (_ref, index) {
-    var id = _ref.id,
-      name = _ref.name,
-      location = _ref.location,
-      expectedSalary = _ref.expectedSalary,
-      yearsExperience = _ref.yearsExperience,
-      latestWorkExperience = _ref.latestWorkExperience,
-      latestWorkDuration = _ref.latestWorkDuration;
-    return /*#__PURE__*/React.createElement(IndexTable.Row, {
-      id: id,
-      key: id,
-      selected: selectedResources.includes(id),
-      position: index,
-      onClick: function onClick() {
-        return console.log("row clicked " + id);
-      }
-    }, /*#__PURE__*/React.createElement(IndexTable.Cell, null, /*#__PURE__*/React.createElement(Icon, {
-      name: "ri-account-circle-fill",
-      height: 40,
-      fill: Neutral.B40
-    })), /*#__PURE__*/React.createElement(IndexTable.Cell, null, /*#__PURE__*/React.createElement(Typography, {
-      variant: "body2"
-    }, name), /*#__PURE__*/React.createElement(Typography, {
-      variant: "body1"
-    }, location)), /*#__PURE__*/React.createElement(IndexTable.Cell, null, expectedSalary), /*#__PURE__*/React.createElement(IndexTable.Cell, null, yearsExperience), /*#__PURE__*/React.createElement(IndexTable.Cell, null, /*#__PURE__*/React.createElement(Typography, {
-      variant: "body1"
-    }, latestWorkExperience), /*#__PURE__*/React.createElement(Typography, {
-      variant: "caption"
-    }, latestWorkDuration)), /*#__PURE__*/React.createElement(IndexTable.Cell, null, /*#__PURE__*/React.createElement(StyledButtonGroup, null, /*#__PURE__*/React.createElement(StyledButton, null, "Reject"), /*#__PURE__*/React.createElement(PrimaryButton, null, "Shortlist"))));
-  });
-  return /*#__PURE__*/React.createElement(IndexTable, _extends({}, args, {
-    resourceName: resourceName,
-    itemCount: candidates.length,
-    selectedItemsCount: allResourcesSelected ? 'All' : selectedResources.length,
-    onSelectionChange: handleSelectionChange,
-    promotedBulkActions: promotedBulkActions,
-    headings: [{
-      title: ''
-    }, {
-      title: 'Name & Location'
-    }, {
-      title: 'Expected Salary'
-    }, {
-      title: 'Years of Experience'
-    }, {
-      title: 'Latest Work Experience'
-    }, {
-      title: 'Actions'
-    }],
-    selectedLabel: "selected candidates"
-  }), rowMarkup);
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  loadingLabel: 'Loading...'
-};

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-import { NumberInput } from './NumberInput';
-NumberInput.displayName = 'Number';
-export default {
-  title: '@next/NumberInput',
-  component: NumberInput,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }],
-  argTypes: {}
-};
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(NumberInput, args);
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  placeholder: '0.0',
-  disabled: false
-};

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

@@ -1,42 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["currentPage"];
-import React, { useEffect, useState } from 'react';
-import { Pagination } from './Pagination';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-Pagination.displayName = 'Pagination';
-export default {
-  title: '@next/Pagination',
-  component: Pagination,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }]
-};
-var Template = function Template(args) {
-  var _useState = useState(1),
-    page = _useState[0],
-    setPage = _useState[1];
-  var currentPage = args.currentPage,
-    rest = _objectWithoutPropertiesLoose(args, _excluded);
-  useEffect(function () {
-    setPage(currentPage);
-  }, [currentPage]);
-  return /*#__PURE__*/React.createElement(Pagination, _extends({}, rest, {
-    currentPage: page,
-    onPageChanged: setPage
-  }));
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  totalItems: 200,
-  pageSize: 10
-};
-Interactive.parameters = {
-  docs: {
-    source: {
-      code: "  const [currentPage, setCurrentPage] = useState(1);\n\n      return (\n        <Pagination\n          {...args}\n          currentPage={currentPage}\n          onPageChanged={setCurrentPage}\n        />\n      );",
-      language: 'javascript',
-      type: 'auto'
-    }
-  }
-};

package/es/@next/Pagination/SimplePagination.stories.js

@@ -1,42 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["currentPage"];
-import React, { useEffect, useState } from 'react';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-import { SimplePagination } from './SimplePagination';
-SimplePagination.displayName = 'Pagination';
-export default {
-  title: '@next/SimplePagination',
-  component: SimplePagination,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }]
-};
-var Template = function Template(args) {
-  var _useState = useState(1),
-    page = _useState[0],
-    setPage = _useState[1];
-  var currentPage = args.currentPage,
-    rest = _objectWithoutPropertiesLoose(args, _excluded);
-  useEffect(function () {
-    setPage(currentPage);
-  }, [currentPage]);
-  return /*#__PURE__*/React.createElement(SimplePagination, _extends({}, rest, {
-    currentPage: page,
-    onPageChanged: setPage
-  }));
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  totalItems: 200,
-  pageSize: 10
-};
-Interactive.parameters = {
-  docs: {
-    source: {
-      code: "  const [currentPage, setCurrentPage] = useState(1);\n\n      return (\n        <SimplePagination\n          {...args}\n          currentPage={currentPage}\n          onPageChanged={setCurrentPage}\n        />\n      );",
-      language: 'javascript',
-      type: 'auto'
-    }
-  }
-};

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

@@ -1,132 +0,0 @@
-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.js

@@ -1,145 +0,0 @@
-/* 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/RadioButton/RadioButton.stories.js

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