sag_components 2.0.0-beta → 2.0.0-beta2

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "sag_components",
-  "version": "2.0.0-beta",
+  "version": "2.0.0-beta2",
   "description": "",
   "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
+    "build": "tsc && rollup -c",
     "start": "vite dev --open",
     "test": "jest",
     "lint": "eslint . --fix",
-    "build": "cross-env BABEL_ENV=production babel src -d dist  ",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -20,6 +25,8 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
     "@storybook/addon-designs": "^7.0.9",
     "@storybook/addon-essentials": "^7.4.6",
     "@storybook/addon-interactions": "^7.4.6",
@@ -34,6 +41,9 @@
     "@storybook/theming": "^7.5.3",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
+    "@types/node": "^22.13.4",
+    "@types/react": "^18.3.18",
+    "@types/rollup-plugin-peer-deps-external": "^2.2.5",
     "@vitejs/plugin-react": "^4.3.4",
     "babel-plugin-react-css-modules": "^5.2.6",
     "babel-preset-react-app": "^10.0.1",
@@ -49,9 +59,16 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react-dom": "^18.2.0",
+    "rollup": "^2.60.0",
+    "rollup-plugin-peer-deps-external": "^2.2.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.31.2",
+    "rollup-plugin-dts": "4.2.3",
+    "@rollup/plugin-babel": "^6.0.3",
     "sass": "^1.74.1",
     "sass-loader": "^13.3.3",
     "style-loader": "^3.3.4",
+    "typescript": "^4.9.5",
     "vite": "^6.1.0"
   },
   "dependencies": {

package/.eslintrc.js

@@ -1,37 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: ['eslint:recommended', 'google'],
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  plugins: [
-    'react',
-    'jest',
-  ],
-  ignorePatterns: ['storybook-static/', 'node_modules/', 'dist/', 'build/'],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-    'linebreak-style': 0,
-    'require-jsdoc': 0,
-    'import/no-named-as-default': 0,
-    'react/function-component-definition': 'off',
-    'react/jsx-props-no-spreading': 'off',
-  },
-};

package/dist/components/AttachedFile/AttachedFile.js

@@ -1,69 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _AttachedFile = require("./AttachedFile.style");
-var _CloseIcon = _interopRequireDefault(require("../../icons/CloseIcon"));
-var _AttachedIcon = _interopRequireDefault(require("../../icons/AttachedIcon"));
-var _FileIcon = _interopRequireDefault(require("../../icons/FileIcon"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const AttachedFile = props => {
-  const {
-    inputText,
-    inputColor,
-    acceptedFiles,
-    onSelectFile,
-    onRemoveFile
-  } = props;
-  const [selectedFiles, setSelectedFiles] = (0, _react.useState)([]);
-  const handleFileChange = event => {
-    const files = Array.from(event.target.files);
-    setSelectedFiles(prevFiles => [...prevFiles, ...files]);
-    onSelectFile([...selectedFiles, ...files]);
-  };
-  const handleRemoveFile = fileToRemove => {
-    setSelectedFiles(prevFiles => prevFiles.filter(file => file !== fileToRemove));
-    const fileInput = document.getElementById('fileInput');
-    fileInput.value = ''; // Reset input value
-    onRemoveFile(fileToRemove);
-  };
-  return <_AttachedFile.AttachedFileContainer>
-      {selectedFiles.map(file => <_AttachedFile.UploadedFile key={`${file.name}_${file.lastModified}`}>
-          <_FileIcon.default />
-          <span>{file.name}</span>
-          <_AttachedFile.RemoveButton onClick={() => handleRemoveFile(file)}>
-            <_CloseIcon.default />
-          </_AttachedFile.RemoveButton>
-        </_AttachedFile.UploadedFile>)}
-
-      <_AttachedFile.InputLabel htmlFor="fileInput" inputColor={inputColor}>
-        <span>{inputText}</span>
-        <_AttachedIcon.default fill={inputColor} />
-      </_AttachedFile.InputLabel>
-
-      <input type="file" id="fileInput" accept={acceptedFiles} onChange={e => handleFileChange(e)} style={{
-      display: 'none'
-    }} />
-    </_AttachedFile.AttachedFileContainer>;
-};
-var _default = exports.default = AttachedFile;
-AttachedFile.propTypes = {
-  inputText: _propTypes.default.string,
-  inputColor: _propTypes.default.string,
-  acceptedFiles: _propTypes.default.string,
-  onSelectFile: _propTypes.default.func,
-  onRemoveFile: _propTypes.default.func
-};
-AttachedFile.defaultProps = {
-  inputText: 'Attach file',
-  acceptedFiles: 'image/png, image/gif, image/jpeg',
-  inputColor: '#229E38',
-  onSelectFile: () => {},
-  onRemoveFile: () => {}
-};

package/dist/components/AttachedFile/AttachedFile.stories.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _AttachedFile = _interopRequireDefault(require("./AttachedFile"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/* eslint-disable react/jsx-filename-extension */
-var _default = exports.default = {
-  title: 'SAG/AttachedFile',
-  component: _AttachedFile.default,
-  argTypes: {
-    inputText: {
-      name: 'inputText',
-      control: {
-        type: 'text'
-      },
-      description: 'text inside of the button',
-      defaultValue: 'Attach file'
-    },
-    inputColor: {
-      name: 'inputColor',
-      control: {
-        type: 'color'
-      }
-    }
-  }
-};
-const Template = args => <_AttachedFile.default {...args} />;
-const Default = exports.Default = Template.bind({});
-Default.args = {
-  inputText: 'Attach file',
-  inputColor: '#229E38',
-  acceptedFiles: 'image/png, image/gif, image/jpeg'
-};

package/dist/components/AttachedFile/AttachedFile.style.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UploadedFile = exports.RemoveButton = exports.InputLabel = exports.AttachedFileContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AttachedFileContainer = exports.AttachedFileContainer = _styledComponents.default.div`
-    font-family: 'Poppins';
-    font-size: 14px;
-    font-weight: 400;
-`;
-const InputLabel = exports.InputLabel = _styledComponents.default.label`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    cursor: pointer;
-    > span {
-        color: ${props => props.inputColor};
-    }
-`;
-const UploadedFile = exports.UploadedFile = _styledComponents.default.div`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    color: #A4A4A4;
-    max-width: 220px;
-    padding: 2px 8px;
-    margin-bottom: 10px;
-    > span {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    > svg {
-        min-width: 12px;
-    }
-`;
-const RemoveButton = exports.RemoveButton = _styledComponents.default.button`
-    border: none;
-    background: none;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    cursor: pointer;
-`;

package/dist/components/AutocompleteField/AutocompleteField.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _AutocompleteField = require("./AutocompleteField.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const AutocompleteField = props => {
-  const {
-    choices,
-    onSelect
-  } = props;
-  const [inputValue, setInputValue] = (0, _react.useState)('');
-  const [isFocused, setFocused] = (0, _react.useState)(false);
-  const handleInputChange = e => {
-    setInputValue(e.target.value);
-  };
-  const handleOptionClick = option => {
-    onSelect(option);
-    setInputValue('');
-  };
-  return <_AutocompleteField.AutocompleteContainer>
-      <_AutocompleteField.AutocompleteInput type="text" value={inputValue} onChange={handleInputChange} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} placeholder=" " />
-      <_AutocompleteField.AutocompleteLabel>Choose an option</_AutocompleteField.AutocompleteLabel>
-      {(isFocused || inputValue) && <_AutocompleteField.AutocompleteOptions>
-          {choices.filter(option => option.toLowerCase().includes(inputValue.toLowerCase())).map((option, index) => <_AutocompleteField.AutocompleteOption key={index} onClick={() => handleOptionClick(option)}>
-                {option}
-              </_AutocompleteField.AutocompleteOption>)}
-        </_AutocompleteField.AutocompleteOptions>}
-    </_AutocompleteField.AutocompleteContainer>;
-};
-var _default = exports.default = AutocompleteField;
-AutocompleteField.propTypes = {
-  choices: _propTypes.default.arrayOf(_propTypes.default.string),
-  onSelect: _propTypes.default.func
-};
-AutocompleteField.defaultProps = {
-  choices: ['Apple', 'Banana', 'Orange'],
-  onSelect: () => {}
-};

package/dist/components/AutocompleteField/AutocompleteField.stories.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _AutocompleteField = _interopRequireDefault(require("./AutocompleteField"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/* eslint-disable react/jsx-filename-extension */
-var _default = exports.default = {
-  title: "SAG/AutocompleteField",
-  component: _AutocompleteField.default,
-  argTypes: {
-    choices: {
-      control: "array",
-      description: "Array of input options"
-    }
-  }
-};
-const Template = args => <_AutocompleteField.default {...args} />;
-const Default = exports.Default = Template.bind({});
-Default.args = {
-  choices: ["Apple", "Banana", "Orange", "Grapes", "Watermelon"]
-};

package/dist/components/AutocompleteField/AutocompleteField.style.js

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AutocompleteOptions = exports.AutocompleteOption = exports.AutocompleteLabel = exports.AutocompleteInput = exports.AutocompleteContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AutocompleteContainer = exports.AutocompleteContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  position: relative;
-  margin: 20px;
-`;
-const AutocompleteInput = exports.AutocompleteInput = _styledComponents.default.input`
-  width: 100%;
-  padding: 10px;
-  font-size: 16px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-
-  &:focus + label {
-    top: -10px;
-    font-size: 12px;
-    color: #007bff;
-  }
-`;
-const AutocompleteLabel = exports.AutocompleteLabel = _styledComponents.default.label`
-  position: absolute;
-  top: 12px;
-  left: 10px;
-  transition: .2s ease;
-  pointer-events: none;
-  font-size: 16px;
-  color: #555;
-  background-color: white;
-`;
-const AutocompleteOptions = exports.AutocompleteOptions = _styledComponents.default.div`
-  position: absolute;
-  width: 100%;
-  max-height: 150px;
-  overflow-y: auto;
-  border: 1px solid #ccc;
-  border-top: none;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  background-color: #fff;
-  z-index: 1;
-`;
-const AutocompleteOption = exports.AutocompleteOption = _styledComponents.default.div`
-  padding: 10px;
-  cursor: pointer;
-  &:hover {
-    background-color: #f0f0f0;
-  }
-`;

package/dist/components/BannerEventBox/BannerEventBox.js

@@ -1,125 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BannerEventBox = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _BannerEventBox = require("./BannerEventBox.style");
-var _FoodLionNewIcon = require("../../icons/FoodLionNewIcon");
-var _TheGiantCompanyNewIcon = require("../../icons/TheGiantCompanyNewIcon");
-var _StopAndShopNewIcon = require("../../icons/StopAndShopNewIcon");
-var _GiantFoodIcon_new = require("../../icons/GiantFoodIcon_new");
-var _HannafordIcon_new = require("../../icons/HannafordIcon_new");
-var _Button = require("../Button/Button");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const BannerEventBox = props => {
-  const {
-    width,
-    height,
-    banner,
-    description,
-    dates,
-    data,
-    onInfoClick,
-    buttonText,
-    disabled
-  } = props;
-  const formatedBanners = () => {
-    switch (banner) {
-      case "Stop&Shop":
-        return {
-          icon: <_StopAndShopNewIcon.StopAndShopNewIcon />,
-          name: "Stop&Shop"
-        };
-      case "Food Lion":
-        return {
-          icon: <_FoodLionNewIcon.FoodLionNewIcon />,
-          name: "Food Lion"
-        };
-      case "Giant Food":
-        return {
-          icon: <_GiantFoodIcon_new.GiantFoodNewIcon />,
-          name: "Giant Food"
-        };
-      case "The Giant Company":
-        return {
-          icon: <_TheGiantCompanyNewIcon.TheGiantCompanyIcon />,
-          name: "The Giant Company"
-        };
-      case "Hannaford":
-        return {
-          icon: <_HannafordIcon_new.HannafordNewIcon />,
-          name: "Hannaford"
-        };
-      default:
-        return null;
-    }
-  };
-  const onInfoClickHandler = event => {
-    onInfoClick(event);
-  };
-  return <_BannerEventBox.MainContainer height={height} width={width}>
-      <_BannerEventBox.TitleWrapper>
-        {formatedBanners(banner).icon}|
-        <_BannerEventBox.CardTitle>{formatedBanners(banner).name}</_BannerEventBox.CardTitle>
-      </_BannerEventBox.TitleWrapper>
-      <_BannerEventBox.Block>
-        <_BannerEventBox.Headline>Event Description</_BannerEventBox.Headline>
-        <_BannerEventBox.Text>{description}</_BannerEventBox.Text>
-      </_BannerEventBox.Block>
-      <_BannerEventBox.Block>
-        <_BannerEventBox.Headline>Event Dates:</_BannerEventBox.Headline>
-        <_BannerEventBox.Text>{dates.join(" - ")}</_BannerEventBox.Text>
-      </_BannerEventBox.Block>
-      <_BannerEventBox.ButtonWrap>
-        <_Button.Button leftIcon="Eye" onClick={() => onInfoClickHandler(banner)} text={buttonText} type="secondary" disabled={disabled} />
-      </_BannerEventBox.ButtonWrap>
-
-      <_BannerEventBox.DetailsWrapper>
-        {data?.map((item, index) => item && <_react.default.Fragment key={item.name}>
-                <_BannerEventBox.KeyBlock>
-                  <_BannerEventBox.Key>{item.name}</_BannerEventBox.Key>
-                  <br />
-                  <_BannerEventBox.Count>{item.items}</_BannerEventBox.Count>
-                </_BannerEventBox.KeyBlock>
-                {index !== data.length - 1 && <_BannerEventBox.Seperator />}
-              </_react.default.Fragment>)}
-      </_BannerEventBox.DetailsWrapper>
-    </_BannerEventBox.MainContainer>;
-};
-exports.BannerEventBox = BannerEventBox;
-var _default = exports.default = BannerEventBox;
-BannerEventBox.propTypes = {
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  banner: _propTypes.default.string,
-  buttonText: _propTypes.default.string,
-  description: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  dates: _propTypes.default.arrayOf(_propTypes.default.string),
-  data: _propTypes.default.arrayOf(_propTypes.default.shape({})),
-  onInfoClick: _propTypes.default.func
-};
-BannerEventBox.defaultProps = {
-  width: "auto",
-  height: "auto",
-  banner: "Food Lion",
-  description: "Dreft Portable Pretreater Pen",
-  dates: ["2021-06-01", "2021-06-30"],
-  buttonText: "View Creative",
-  data: [{
-    name: "Supplier",
-    items: 7
-  }, {
-    name: "Brands",
-    items: 8
-  }, {
-    name: "Product Lines",
-    items: 9
-  }],
-  onInfoClick: () => {},
-  disabled: false,
-  buttonText: "View creative"
-};

package/dist/components/BannerEventBox/BannerEventBox.stories.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _BannerEventBox = _interopRequireDefault(require("./BannerEventBox"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'SAG BI/BannerEventBox',
-  component: _BannerEventBox.default,
-  argTypes: {
-    width: {
-      control: 'text'
-    },
-    height: {
-      control: 'text'
-    },
-    banner: {
-      control: 'text'
-    },
-    description: {
-      control: 'text'
-    },
-    dates: {
-      control: 'text'
-    },
-    data: {
-      control: {
-        type: 'array'
-      },
-      description: 'array [] of objects { name: string, items: string[] }'
-    },
-    viewBannerTooltip: {
-      control: 'text'
-    }
-  }
-}; // eslint-disable-next-line react/jsx-filename-extension
-const Template = args => <_BannerEventBox.default {...args} />;
-const Default = exports.Default = Template.bind({});
-Default.args = {
-  width: 'auto',
-  height: 'auto',
-  banner: 'Food Lion',
-  description: 'NIC Cycles 24 description here can be up to 3 rows of text and when getting to 3 rows there will be an ellipsis and a tooltip',
-  dates: ['01/01/2024', '14/01/2024'],
-  data: [{
-    name: 'Supplier',
-    items: 7
-  }, {
-    name: 'Brands',
-    items: 8
-  }, {
-    name: 'Product Lines',
-    items: 9
-  }],
-  viewBannerTooltip: 'View Banner'
-};

package/dist/components/BannerEventBox/BannerEventBox.style.js

@@ -1,78 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TitleWrapper = exports.Text = exports.Seperator = exports.MoreInfo = exports.MainContainer = exports.KeyBlock = exports.Key = exports.Headline = exports.DetailsWrapper = exports.Count = exports.CardTitle = exports.ButtonWrap = exports.Block = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const MainContainer = exports.MainContainer = _styledComponents.default.div`
-    width: ${props => props.width};
-    height: ${props => props.height};
-    font-family: 'Poppins', sans-serif;
-    color: #212121;
-    background-color: white;
-    padding: 20px;
-    border-radius: 12px;
-    border: 1px solid #D0D0D0;
-`;
-const TitleWrapper = exports.TitleWrapper = _styledComponents.default.div`
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-    gap: 6px;
-`;
-const CardTitle = exports.CardTitle = _styledComponents.default.h5`
-    font-size: 14px;
-    font-weight: 400;
-    margin: 0;
-`;
-const Headline = exports.Headline = _styledComponents.default.h6`
-    font-size: 12px;
-    font-weight: 500;
-    margin: 0;
-`;
-const Block = exports.Block = _styledComponents.default.div`
-    margin-bottom: 12px;
-`;
-const Text = exports.Text = _styledComponents.default.p`
-    color: #8B8989;
-    font-size: 12px;
-    font-weight: 400;
-    margin: 0;
-`;
-const MoreInfo = exports.MoreInfo = _styledComponents.default.span`
-    color: #229E38;
-    font-size: 12px;
-    font-weight: 400;
-    text-decoration: underline;
-    cursor: pointer;
-`;
-const DetailsWrapper = exports.DetailsWrapper = _styledComponents.default.div`
-    display: flex;
-    gap: 12px;
-    align-items: stretch;
-    margin-top: 12px;
-`;
-const KeyBlock = exports.KeyBlock = _styledComponents.default.div`
-    /* position: relative; */
-`;
-const Key = exports.Key = _styledComponents.default.span`
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 12px;
-    font-weight: 500;
-`;
-const Count = exports.Count = _styledComponents.default.span`
-    color: #8B8989;
-    font-size: 12px;
-    font-weight: 400;
-`;
-const Seperator = exports.Seperator = _styledComponents.default.div`
-    border-right: 1px solid #F2F2F2;
-`;
-const ButtonWrap = exports.ButtonWrap = _styledComponents.default.div`
-    display: flex;
-    justify-content: flex-start;
-`;