@pingux/astro 2.238.0-alpha.0 → 2.239.0-alpha.0

package/lib/cjs/recipes/ScrollableListView.stories.js

@@ -1,102 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.ScrollableListView = void 0;
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactStately = require("react-stately");
-var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
-var _index = require("../index");
-var _react2 = require("@emotion/react");
-function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var _default = exports["default"] = {
-  title: 'Recipes/Scrollable List View'
-};
-var ScrollableListView = exports.ScrollableListView = function ScrollableListView() {
-  var unfilteredItems = [{
-    key: 'Aardvark',
-    name: 'Aardvark',
-    id: '1'
-  }, {
-    key: 'Kangaroo',
-    name: 'Kangaroo',
-    id: '2'
-  }, {
-    key: 'Snake',
-    name: 'Snake',
-    id: '3'
-  }, {
-    key: 'Dog',
-    name: 'Dog',
-    id: '4'
-  }, {
-    key: 'Cat',
-    name: 'Cat',
-    id: '5'
-  }, {
-    key: 'Mouse',
-    name: 'Mouse',
-    id: '6'
-  }, {
-    key: 'Jaguar',
-    name: 'Jaguar',
-    id: '7'
-  }, {
-    key: 'Elephant',
-    name: 'Elephant',
-    id: '7'
-  }];
-  var _useState = (0, _react.useState)(''),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  var _useState3 = (0, _react.useState)(unfilteredItems),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    scrollableListViewItems = _useState4[0],
-    setScrollableListViewItems = _useState4[1];
-  var filterItems = function filterItems(input) {
-    var filtered = (0, _filter["default"])(unfilteredItems).call(unfilteredItems, function (obj) {
-      var _context;
-      return (0, _includes["default"])(_context = obj.name.toLowerCase()).call(_context, input.toLowerCase());
-    });
-    setScrollableListViewItems(filtered);
-  };
-  var onChangeInput = function onChangeInput(input) {
-    setValue(input);
-    filterItems(input);
-  };
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.SearchField, {
-    label: "Search",
-    value: value,
-    onChange: onChangeInput
-  }), (0, _react2.jsx)(_index.ScrollBox, {
-    maxHeight: 450,
-    hasShadows: true
-  }, (0, _react2.jsx)(_index.ListView, {
-    items: scrollableListViewItems
-  }, function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
-      key: item.name
-    }, (0, _react2.jsx)(_index.ListViewItem, {
-      data: {
-        icon: _FormSelectIcon["default"],
-        text: item.name
-      }
-    }, (0, _react2.jsx)(_index.ListViewItemEditButton, null), (0, _react2.jsx)(_index.ListViewItemMenu, null, (0, _react2.jsx)(_reactStately.Item, {
-      key: "enable"
-    }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
-      key: "disable"
-    }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
-      key: "delete"
-    }, "Delete user"))));
-  })));
-};

package/lib/cjs/recipes/Slider.stories.js

@@ -1,201 +0,0 @@
-"use strict";
-
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-var _react = _interopRequireDefault(require("react"));
-var _reactAria = require("react-aria");
-var _reactStately = require("react-stately");
-var _i18n = require("@react-aria/i18n");
-var _Buttons = require("../components/Button/Buttons.styles");
-var _index = require("../index");
-var _figmaLinks = require("../utils/designUtils/figmaLinks.ts");
-var _react2 = require("@emotion/react");
-function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable no-nested-ternary */
-var _default = exports["default"] = {
-  title: 'Recipes/Slider'
-};
-var sx = {
-  sliderContainer: {
-    position: 'relative',
-    alignItems: 'center',
-    width: '100%',
-    touchAction: 'none'
-  },
-  sliderInnerBox: {
-    flex: '1 0 auto',
-    textAlign: 'end'
-  },
-  sliderOuterBox: {
-    alignSelf: 'stretch'
-  },
-  sliderBox: {
-    position: 'relative',
-    height: 30,
-    width: ' 100%'
-  },
-  slider: {
-    position: 'absolute',
-    height: 10,
-    borderRadius: '5px',
-    top: 13,
-    width: '100%'
-  },
-  rangeSlider: {
-    position: 'absolute',
-    backgroundImage: 'linear-gradient(to right, rgb(169, 215, 50) 10%, rgb(226, 215, 20) 50%, rgb(235, 44, 56) 90%)',
-    height: 10,
-    borderRadius: '5px',
-    top: 13,
-    width: '100%'
-  },
-  thumbContainer: {
-    position: 'absolute',
-    top: 17,
-    transform: 'translateX(-50%)'
-  },
-  thumb: {
-    width: 25,
-    height: 25,
-    borderRadius: '50%',
-    backgroundColor: 'white',
-    border: '1px solid #C1C5C8',
-    boxShadow: '0 2px 2px 0 #CACACA'
-  }
-};
-var setSliderColor = function setSliderColor(thumbPosition) {
-  var _context, _context2, _context3, _context4;
-  return thumbPosition < 25 ? (0, _concat["default"])(_context = "linear-gradient(to right, rgb(169, 215, 50) 0%, rgb(169, 215, 50) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 25 && thumbPosition <= 49 ? (0, _concat["default"])(_context2 = "linear-gradient(to right, rgb(226, 215, 20) 0%, rgb(226, 215, 20) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context2, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 50 && thumbPosition <= 74 ? (0, _concat["default"])(_context3 = "linear-gradient(to right,  rgb(231, 135, 38) 0%,  rgb(231, 135, 38) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context3, thumbPosition, "%, rgb(242, 242, 242) 100%)") : (0, _concat["default"])(_context4 = "linear-gradient(to right, rgb(235, 44, 56) 0%, rgb(235, 44, 56) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context4, thumbPosition, "%, rgb(242, 242, 242) 100%)");
-};
-
-/*
- * The slider value can be formatted by using the `formatOptions` prop.
-`* formatOptions` is compatible with the option parameter of
- * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat)
- * and is applied based on the current locale.
- * https://react-spectrum.adobe.com/react-aria/useSlider.html
- */
-
-var Default = exports.Default = function Default() {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
-    mb: "xl"
-  }, (0, _react2.jsx)(Slider, {
-    label: "Single with solid lower background",
-    maxValue: 100,
-    step: 1
-  })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(RangeSlider, {
-    label: "Multiple with gradient background and custom point values",
-    maxValue: 100,
-    defaultValue: [0, 1],
-    step: 1
-  })));
-};
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.slider["default"]
-  }
-};
-var Slider = function Slider(props) {
-  var trackRef = _react["default"].useRef(null);
-  var numberFormatter = (0, _i18n.useNumberFormatter)(props.formatOptions);
-  var state = (0, _reactStately.useSliderState)(_objectSpread(_objectSpread({}, props), {}, {
-    numberFormatter: numberFormatter
-  }));
-  var _useSlider = (0, _reactAria.useSlider)(props, state, trackRef),
-    groupProps = _useSlider.groupProps,
-    trackProps = _useSlider.trackProps,
-    labelProps = _useSlider.labelProps,
-    outputProps = _useSlider.outputProps;
-  var thumbPosition = state.getThumbPercent(0) * 100;
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, groupProps, {
-    sx: sx.sliderContainer
-  }), (0, _react2.jsx)(_index.Box, {
-    sx: sx.sliderOuterBox
-  }, props.label && (0, _react2.jsx)("label", labelProps, props.label), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, outputProps, {
-    sx: sx.sliderInnerBox
-  }), "(", state.getThumbValueLabel(0), ")")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, trackProps, {
-    ref: trackRef,
-    sx: sx.sliderBox
-  }), (0, _react2.jsx)(_index.Box, {
-    sx: _objectSpread(_objectSpread({}, sx.slider), {}, {
-      backgroundImage: setSliderColor(thumbPosition)
-    })
-  }), (0, _react2.jsx)(Thumb, {
-    index: 0,
-    state: state,
-    trackRef: trackRef
-  })));
-};
-var RangeSlider = function RangeSlider(props) {
-  var _context5;
-  var trackRef = _react["default"].useRef(null);
-  var numberFormatter = (0, _i18n.useNumberFormatter)(props.formatOptions);
-  var state = (0, _reactStately.useSliderState)(_objectSpread(_objectSpread({}, props), {}, {
-    numberFormatter: numberFormatter
-  }));
-  var _useSlider2 = (0, _reactAria.useSlider)(props, state, trackRef),
-    groupProps = _useSlider2.groupProps,
-    trackProps = _useSlider2.trackProps,
-    labelProps = _useSlider2.labelProps,
-    outputProps = _useSlider2.outputProps;
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, groupProps, {
-    sx: sx.sliderContainer
-  }), (0, _react2.jsx)(_index.Box, {
-    sx: sx.sliderOuterBox
-  }, props.label && (0, _react2.jsx)("label", labelProps, props.label), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, outputProps, {
-    sx: sx.sliderInnerBox
-  }), "(", (0, _concat["default"])(_context5 = "".concat(state.getThumbValueLabel(0), ", ")).call(_context5, state.getThumbValueLabel(1)), ")")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, trackProps, {
-    ref: trackRef,
-    sx: sx.sliderBox
-  }), (0, _react2.jsx)(_index.Box, {
-    sx: sx.rangeSlider
-  }), (0, _react2.jsx)(Thumb, {
-    index: 0,
-    state: state,
-    trackRef: trackRef
-  }), (0, _react2.jsx)(Thumb, {
-    index: 1,
-    state: state,
-    trackRef: trackRef
-  })));
-};
-var Thumb = function Thumb(props) {
-  var state = props.state,
-    trackRef = props.trackRef,
-    index = props.index;
-  var inputRef = _react["default"].useRef(null);
-  var _useSliderThumb = (0, _reactAria.useSliderThumb)({
-      index: index,
-      trackRef: trackRef,
-      inputRef: inputRef
-    }, state),
-    thumbProps = _useSliderThumb.thumbProps,
-    inputProps = _useSliderThumb.inputProps;
-  var _useFocusRing = (0, _reactAria.useFocusRing)(),
-    focusProps = _useFocusRing.focusProps,
-    isFocusVisible = _useFocusRing.isFocusVisible;
-  return (0, _react2.jsx)(_index.Box, {
-    sx: _objectSpread(_objectSpread({}, sx.thumbContainer), {}, {
-      left: "".concat(state.getThumbPercent(index) * 100, "%")
-    })
-  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, thumbProps, {
-    sx: _objectSpread(_objectSpread({}, sx.thumb), isFocusVisible && _Buttons.defaultFocus)
-  }), (0, _react2.jsx)(_reactAria.VisuallyHidden, null, (0, _react2.jsx)("input", (0, _extends2["default"])({
-    ref: inputRef
-  }, (0, _reactAria.mergeProps)(inputProps, focusProps))))));
-};

package/lib/cjs/recipes/TrialExperienceIndustryButtons.stories.js

@@ -1,344 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Default = void 0;
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
-var _hooks = require("../hooks");
-var _index = require("../index");
-var _figmaLinks = require("../utils/designUtils/figmaLinks.ts");
-var _react2 = require("@emotion/react");
-var _default = exports["default"] = {
-  title: 'Recipes/Trial Experience Buttons'
-};
-var sx = {
-  contentProps: {
-    maxWidth: '757px',
-    width: '100%',
-    px: '40px',
-    pb: '35px',
-    overflowY: 'scroll'
-  },
-  buttonLabelStyle: {
-    whiteSpace: 'normal',
-    color: 'text.primary',
-    fontWeight: 1,
-    fontSize: 'lg',
-    lineHeight: 'normal',
-    mb: '31px',
-    maxHeight: '115px',
-    overflow: 'hidden'
-  },
-  buttonStyle: {
-    width: '146px',
-    height: '146px',
-    backgroundColor: 'accent.99',
-    borderColor: 'accent.90',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderRadius: '5px',
-    justifyContent: 'center',
-    py: 0,
-    '&:hover': {
-      boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-      borderColor: 'accent.90'
-    },
-    '&.is-pressed > div > svg > span': {
-      color: 'white'
-    },
-    '&.is-pressed > div > span': {
-      color: 'white'
-    }
-  },
-  gridContainerStyle: {
-    display: 'grid !important',
-    'gridTemplateColumns': 'repeat(auto-fit, minmax(0, 146px))',
-    gap: 'md',
-    maxWidth: '862px',
-    'boxSizing': 'border-box',
-    'justifyContent': 'center',
-    overflow: 'hidden',
-    padding: '5px'
-  },
-  headingTextStyle: {
-    fontWeight: '3',
-    fontSize: '30px',
-    lineHeight: 'normal',
-    textAlign: 'center',
-    color: 'text.primary',
-    marginBottom: 'sm',
-    marginTop: 'sm',
-    height: '42px'
-  },
-  iconStyle: {
-    mb: 'sm',
-    mt: '25px'
-  },
-  subheadingTextStyle: {
-    fontWeight: '0',
-    fontSize: 'lg',
-    lineHeight: '115%',
-    textAlign: 'center',
-    alignSelf: 'center',
-    color: 'text.primary',
-    marginBottom: '35px',
-    maxWidth: '491px',
-    height: '37px'
-  }
-};
-var retailSVG = function retailSVG(props) {
-  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    width: "250",
-    height: "250",
-    viewBox: "0 0 250 250",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "retail-icon-title"
-  }, props), (0, _react2.jsx)("title", {
-    id: "retail-icon-title"
-  }, "Retail Icon"), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M250 29.5L217 29.5V20.5L250 20.5V29.5Z",
-    fill: "#B3282D"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M45.5 235H16V226H45.5V235Z",
-    fill: "#051727"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M18 208.5H0V217.5H18V208.5ZM28 217.5L38 217.5V208.5H28V217.5Z",
-    fill: "#B3282D"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M84.7388 202.788C84.7388 197.424 89.0869 193.076 94.4506 193.076C99.8143 193.076 104.162 197.424 104.162 202.788C104.162 208.151 99.8143 212.499 94.4506 212.499C89.0869 212.499 84.7388 208.151 84.7388 202.788ZM94.4506 184.076C84.1164 184.076 75.7388 192.453 75.7388 202.788C75.7388 213.122 84.1164 221.499 94.4506 221.499C104.785 221.499 113.162 213.122 113.162 202.788C113.162 192.453 104.785 184.076 94.4506 184.076ZM170.137 202.788C170.137 197.424 174.485 193.076 179.849 193.076C185.213 193.076 189.561 197.424 189.561 202.788C189.561 208.151 185.213 212.499 179.849 212.499C174.485 212.499 170.137 208.151 170.137 202.788ZM179.849 184.076C169.515 184.076 161.137 192.453 161.137 202.788C161.137 213.122 169.515 221.499 179.849 221.499C190.183 221.499 198.561 213.122 198.561 202.788C198.561 192.453 190.183 184.076 179.849 184.076Z",
-    fill: "#B3282D"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M48.0807 37.501H20V28.501H54.9464L60.9742 50.5H181.336V59.5H168.385L163.173 95.3345H197.176L207.518 59.5H196.517V50.5H219.482L204.274 103.2V104.334H203.946L192.636 143.528H86.4641L94.1287 171.501H188.083V180.501H87.263L48.0807 37.501ZM154.078 95.3345L159.29 59.5H112.029L117.241 95.3345H154.078ZM152.769 104.334L148.377 134.528H122.941L118.55 104.334H152.769ZM157.472 134.528L161.864 104.334H194.579L185.866 134.528H157.472ZM63.4402 59.5H102.934L108.146 95.3345H73.2589L63.4402 59.5ZM75.7249 104.334H109.455L113.847 134.528H83.9981L75.7249 104.334Z",
-    fill: "#051727"
-  }));
-};
-var financialSVG = function financialSVG(props) {
-  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    width: "250",
-    height: "250",
-    viewBox: "0 0 250 250",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "financial-icon-title"
-  }, props), (0, _react2.jsx)("title", {
-    id: "financial-icon-title"
-  }, "Fincancial Icon"), (0, _react2.jsx)("g", {
-    clipPath: "url(#clip0_2_553)"
-  }, (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M245 23L213.804 23L213.804 14L245 14L245 23Z",
-    fill: "#051727"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M26.9999 223.5L7.99951 223.5L7.99951 214.5L26.9999 214.5L26.9999 223.5Z",
-    fill: "#051727"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M27 240.5L-6.99382e-07 240.5L0 231.5L27 231.5L27 240.5Z",
-    fill: "#B3282D"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M47 240.5L37 240.5L37 231.5L47 231.5L47 240.5Z",
-    fill: "#B3282D"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M250 41L240 41L240 32L250 32L250 41Z",
-    fill: "#B3282D"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M229.402 41L199.543 41L199.543 32L229.402 32L229.402 41Z",
-    fill: "#B3282D"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M51.0352 93.5521H200.965V76.2343L126.645 38.0988L51.0352 76.2747V93.5521ZM42.0352 70.7368L126.678 28L209.965 70.7368V102.552H193.271V179.259H210.946V213H166.47V204H201.946V188.259H49.666V204H142.082V213H40.666V179.259H58.3135V102.552H42.0352V70.7368ZM82.8729 179.259H67.3135V102.552H82.8729V179.259ZM91.8729 179.259V102.552H109.013V179.259H91.8729ZM118.013 179.259H133.572V102.552H118.013V179.259ZM142.572 102.552V179.259H159.712V102.552H142.572ZM168.712 102.552V179.259H184.271V102.552H168.712Z",
-    fill: "#051727"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M124.314 48.6641H129.153V53.11C132.496 53.5501 135.696 54.8085 138.46 56.7942L134.638 61.8105C132.968 60.6493 131.108 59.8061 129.153 59.3129V65.6104C135.753 67.2169 139.46 69.4234 139.46 74.634C139.46 80.1015 135.3 83.383 129.153 83.9499V87.3285H124.314V83.896C120.198 83.4282 116.27 81.8343 112.975 79.2636L117.314 74.5537C119.356 76.2221 121.761 77.361 124.314 77.8924V71.1556C118.202 69.619 114.33 67.8642 114.33 62.1653V62.0689C114.33 57.0415 118.372 53.577 124.314 53.0183V48.6641ZM124.314 58.9784C122.552 59.3393 121.637 60.3059 121.637 61.4718V61.5526C121.637 62.8656 122.255 63.5947 124.314 64.3195V58.9784ZM129.153 72.4627V78.0722C131.048 77.7108 132.154 76.7521 132.154 75.3764V75.2795C132.154 74.1205 131.562 73.3112 129.153 72.4627Z",
-    fill: "#B3282D"
-  })), (0, _react2.jsx)("defs", null, (0, _react2.jsx)("clipPath", {
-    id: "clip0_2_553"
-  }, (0, _react2.jsx)("rect", {
-    width: "250",
-    height: "250",
-    fill: "white"
-  }))));
-};
-var healthcareSVG = function healthcareSVG(props) {
-  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    width: "250",
-    height: "251",
-    viewBox: "0 0 250 251",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "healthcare-icon-title"
-  }, props), (0, _react2.jsx)("title", {
-    id: "healthcare-icon-title"
-  }, "Healthcare Icon"), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M41.2134 66.3089C49.3291 54.7665 62.549 46.0127 82.331 46.0127C100.299 46.0127 112.888 54.659 120.845 63.0991C124.11 66.5616 126.625 70.0159 128.457 72.8855C130.441 70.0142 133.139 66.5313 136.556 63.0391C144.697 54.7174 157.27 46.0127 174.197 46.0127C193.992 46.0127 207.213 54.7502 215.327 66.2895C223.292 77.6163 226.214 91.4262 226.214 101.898C226.214 106.567 225.348 112.655 223.303 119.78L214.652 117.298C216.524 110.776 217.214 105.539 217.214 101.898C217.214 92.83 214.632 80.9471 207.965 71.4662C201.448 62.1978 190.911 55.0127 174.197 55.0127C160.58 55.0127 150.182 61.9814 142.989 69.3331C139.408 72.9928 136.708 76.6658 134.906 79.4235C134.007 80.7984 133.339 81.9349 132.902 82.7136C132.684 83.1027 132.524 83.4015 132.423 83.595C132.372 83.6918 132.336 83.7621 132.315 83.8041L132.295 83.8434L132.294 83.8457L132.292 83.8502L127.939 92.7126L124.111 83.6129L124.11 83.6105L124.108 83.6041L124.094 83.573C124.077 83.5338 124.047 83.4663 124.004 83.3725C123.919 83.1848 123.782 82.8922 123.593 82.5095C123.213 81.7436 122.625 80.6213 121.816 79.2616C120.194 76.5341 117.714 72.8976 114.297 69.2731C107.477 62.0398 97.1042 55.0127 82.331 55.0127C65.6378 55.0127 55.0994 62.2073 48.5757 71.4855C41.9031 80.9753 39.3145 92.8596 39.3145 101.898C39.3145 105.912 39.8271 110.177 42.1291 117.57L33.536 120.246C31.0188 112.162 30.3145 106.987 30.3145 101.898C30.3145 91.4482 33.2465 77.6396 41.2134 66.3089ZM125.78 228.311C82.0038 199.465 58.2953 171.053 45.0069 146.688L52.9082 142.379C65.1567 164.837 87.14 191.584 128.255 219.15C167.72 192.671 190.528 165.701 203.142 143.719L210.948 148.198C197.299 171.983 172.77 200.616 130.731 228.311L128.256 229.942L125.78 228.311Z",
-    fill: "#051727"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M94.1555 84.8643L128.687 162.417L148.107 127.782H235.958V136.782H153.379L127.762 182.468L92.9288 104.235L73.5569 136.162H11.98V127.162H68.4906L94.1555 84.8643Z",
-    fill: "#B3282D"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M248.708 42.7827H223.208V33.7827H248.708V42.7827Z",
-    fill: "#B3282D"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M41.2524 223.283H15.7524V214.283H41.2524V223.283Z",
-    fill: "#B3282D"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M62.96 223.283H51.2524V214.283H62.96V223.283Z",
-    fill: "#B3282D"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M25.7075 241.283H0V232.283H25.7075V241.283Z",
-    fill: "#051727"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M235.958 22.7827H210.458V13.7827H235.958V22.7827Z",
-    fill: "#051727"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M202.458 22.7827L191.708 22.7827L191.708 13.7827L202.458 13.7827L202.458 22.7827Z",
-    fill: "#051727"
-  }));
-};
-var otherSVG = function otherSVG(props) {
-  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    width: "47",
-    height: "47",
-    viewBox: "0 0 47 47",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "other-icon-title"
-  }, props), (0, _react2.jsx)("title", {
-    id: "other-icon-title"
-  }, "Other Icon"), (0, _react2.jsx)("circle", {
-    cx: "11.5",
-    cy: "23.5",
-    r: "3.5",
-    stroke: "#051727",
-    "stroke-width": "2"
-  }), (0, _react2.jsx)("circle", {
-    cx: "23.5",
-    cy: "23.5",
-    r: "3.5",
-    stroke: "#051727",
-    "stroke-width": "2"
-  }), (0, _react2.jsx)("circle", {
-    cx: "35.5",
-    cy: "23.5",
-    r: "3.5",
-    stroke: "#051727",
-    "stroke-width": "2"
-  }), (0, _react2.jsx)("circle", {
-    cx: "23.5",
-    cy: "23.5",
-    r: "22.5",
-    stroke: "#B3282D",
-    "stroke-width": "2"
-  }));
-};
-var buttons = [{
-  name: 'Retail',
-  icon: retailSVG
-}, {
-  name: 'Financial Services',
-  icon: financialSVG
-}, {
-  name: 'Healthcare',
-  icon: healthcareSVG
-}, {
-  name: 'Other',
-  icon: otherSVG
-}];
-var Default = exports.Default = function Default() {
-  var state = (0, _hooks.useModalState)();
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Modal, {
-    isOpen: true,
-    onClose: state.close,
-    contentProps: sx.contentProps
-  }, (0, _react2.jsx)(_index.Box, {
-    contentProps: true
-  }, (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "Close modal window",
-    "data-id": "icon-button__close-modal-window",
-    variant: "modalCloseButton",
-    onPress: state.close
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CloseIcon["default"],
-    size: "sm",
-    sx: {
-      path: {
-        fill: 'neutral.40'
-      }
-    },
-    title: {
-      name: 'Close Icon'
-    }
-  })), (0, _react2.jsx)(_index.Text, {
-    sx: sx.headingTextStyle
-  }, "Tailor your experiences"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.subheadingTextStyle
-  }, "Tailor your identity experiences for your industry. If you don`t see your industry, choose \"Other\"."), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.gridContainerStyle
-  }, (0, _map["default"])(buttons).call(buttons, function (button) {
-    return (0, _react2.jsx)(_index.Button, {
-      sx: sx.buttonStyle,
-      key: button.name
-    }, (0, _react2.jsx)(_index.Box, {
-      alignItems: "center"
-    }, (0, _react2.jsx)(_index.Icon, {
-      icon: button.icon,
-      sx: sx.iconStyle,
-      size: 58
-    }), (0, _react2.jsx)(_index.Text, {
-      sx: sx.buttonLabelStyle
-    }, button.name)));
-  })))));
-};
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.trialExperienceButtons["default"]
-  }
-};