@loja-integrada/admin-components 0.9.8 → 0.12.0

package/README.md

@@ -3,6 +3,18 @@
 Components for Loja Integrada admin.
 [https://lojaintegrada.github.io/admin-components/](https://lojaintegrada.github.io/admin-components/)
 
+## Usage
+
+```bash
+yarn add @loja-integrada/admin-components
+```
+
+```js
+import { Button } from '@loja-integrada/admin-components'
+
+<Button></Button>
+```
+
 ## Comamnds
 
 ### Storybook
@@ -45,14 +57,6 @@ Deploy to GitHub Pages is automatic after deploy to NPM
 This project works with both Jest or Cypress Components.
 Use `.spec.` for Cypress and `.test.` for Jest
 
-## Usage
-
-```js
-import { Button } from '@loja-integrada/admin-components'
-
-<Button></Button>
-```
-
 ### Bundle analysis
 
 Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `yarn size` and visulize it with `yarn analyze`.

package/dist/Forms/Checkbox/Checkbox.d.ts

@@ -1,7 +1,27 @@
 import React from 'react';
+import { InputHelpTextProps } from '../InputHelpText';
 export declare const Checkbox: React.MemoExoticComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>>;
-export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface CheckboxProps extends InputHelpTextProps, React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Custom class name
+     * */
+    className?: string;
+    /**
+     * Text label of the checkbox
+     * */
     label?: string | React.ReactNode;
+    /**
+     * Checkbox box isn't selected nwither unselected
+     * @default false
+     * */
     indeterminate?: boolean;
+    /**
+     * Item align
+     * @default 'center'
+     * */
     boxAlign?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    /**
+     * Error message to display
+     * */
+    errorMessage?: string;
 }

package/dist/Forms/Checkbox/Checkbox.stories.d.ts

@@ -5,6 +5,7 @@ export default _default;
 export declare const Default: Story<CheckboxProps>;
 export declare const Indeterminate: Story<CheckboxProps>;
 export declare const Disabled: Story<CheckboxProps>;
+export declare const Error: Story<CheckboxProps>;
 export declare const DisabledChecked: Story<CheckboxProps>;
 export declare const DisabledIndeterminate: Story<CheckboxProps>;
 export declare const WithOnChange: Story<CheckboxProps>;

package/dist/Forms/Input/Input.d.ts

@@ -25,12 +25,12 @@ export interface InputProps extends InputLabelProps, InputHelpTextProps, Omit<Re
     sufix?: React.ReactNode | string | null;
     /**
      * Set visibility of input prefix border
-     * @default 'true'
+     * @default true
      * */
     prefixBorder?: boolean;
     /**
      * Set visibility of input sufix border
-     * @default 'true'
+     * @default true
      * */
     sufixBorder?: boolean;
 }

package/dist/Icons/icons-path/Download.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Download: () => JSX.Element;

package/dist/Icons/icons-path/ExclamationCircle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ExclamationCircle: () => JSX.Element;

package/dist/Icons/icons-path/Link.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Link: () => JSX.Element;

package/dist/Icons/icons-path/index.d.ts

@@ -21,10 +21,12 @@ export declare const icons: {
     close: () => JSX.Element;
     checkCircle: () => JSX.Element;
     creditcard: () => JSX.Element;
+    download: () => JSX.Element;
     product: () => JSX.Element;
     edit: () => JSX.Element;
     exchange: () => JSX.Element;
     eye: () => JSX.Element;
+    exclamationCircle: () => JSX.Element;
     exclamationTriangle: () => JSX.Element;
     externalLink: () => JSX.Element;
     home: () => JSX.Element;
@@ -37,6 +39,7 @@ export declare const icons: {
     plusCircle: () => JSX.Element;
     print: () => JSX.Element;
     infoCircle: () => JSX.Element;
+    link: () => JSX.Element;
     loading: () => JSX.Element;
     pix: () => JSX.Element;
     search: () => JSX.Element;

package/dist/Indicators/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TippyProps } from '@tippyjs/react';
-export declare const Tooltip: React.MemoExoticComponent<import("styled-components").StyledComponent<(props: TooltipProps) => JSX.Element, any, {}, never>>;
+export declare const Tooltip: React.MemoExoticComponent<(props: TooltipProps) => JSX.Element>;
 export interface TooltipProps extends TippyProps {
     /** Tooltip append
      * @default 'parent'
@@ -30,4 +30,8 @@ export interface TooltipProps extends TippyProps {
      * @default false
      * */
     interactive?: TippyProps['interactive'];
+    /** Tooltip theme
+     * @default dark
+     * */
+    theme?: 'light' | 'dark';
 }

package/dist/admin-components.cjs.development.js

@@ -218,6 +218,14 @@ var CreditCard = function CreditCard() {
   });
 };
 
+var Download = function Download() {
+  return React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M14.667 11.556v2.666c0 .246-.2.445-.445.445H1.778a.445.445 0 0 1-.445-.445v-2.666H0v2.666C0 15.204.796 16 1.778 16h12.444c.982 0 1.778-.796 1.778-1.778v-2.666h-1.333ZM3.109 7.607a.668.668 0 0 1 .893-.992l3.331 3V0h1.334v9.614l3.331-2.999a.668.668 0 0 1 .893.992l-4.445 4a.667.667 0 0 1-.892 0l-4.445-4Z",
+    clipRule: "evenodd"
+  });
+};
+
 var Product = function Product() {
   return React__default.createElement("path", {
     fillRule: "evenodd",
@@ -250,6 +258,14 @@ var Eye = function Eye() {
   });
 };
 
+var ExclamationCircle = function ExclamationCircle() {
+  return React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M9 10.5A1.25 1.25 0 1 0 9 13a1.25 1.25 0 0 0 0-2.5Zm-.303-1h.605a.5.5 0 0 0 .497-.445l.328-2.945A1 1 0 0 0 9.132 5h-.266a1 1 0 0 0-.993 1.11L8.2 9.055a.5.5 0 0 0 .497.445Zm.303 7c-4.136 0-7.5-3.364-7.5-7.5S4.864 1.5 9 1.5s7.5 3.364 7.5 7.5-3.364 7.5-7.5 7.5ZM9 0a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9Z",
+    clipRule: "evenodd"
+  });
+};
+
 var ExclamationTriangle = function ExclamationTriangle() {
   return React__default.createElement("path", {
     fillRule: "evenodd",
@@ -350,6 +366,14 @@ var InfoCircle = function InfoCircle() {
   });
 };
 
+var Link = function Link() {
+  return React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.5645 7.44624c-.301-.301-.78701-.301-1.08701 0-.301.301-.301.787 0 1.088l.74501.747c.34.34.526.79196.526 1.27096-.001.482-.189.933-.53 1.271l-3.82701 3.811c-1.106 1.103-2.91 1.102-4.016 0-.54-.539-.838-1.256-.838-2.02 0-.765.298-1.482.838-2.022l2.038-2.03096c.3-.3.302-.786.002-1.088-.299-.301-.786-.301-1.087-.002l-2.038 2.03196c-.833.83-1.29 1.933-1.29 3.111 0 1.177.457 2.281 1.29 3.112.854.849 1.973 1.274 3.093 1.274 1.12-.001 2.24-.425 3.093-1.273l3.82701-3.812c.632-.63.982-1.468.983-2.361.001-.89096-.346-1.72996-.977-2.36196l-.745-.746Zm6.154.057-2.31 2.314c-.301.30096-.787.30096-1.088 0-.3-.301-.3-.788 0-1.089l2.311-2.313c1.111-1.112 1.111-2.922 0-4.033-1.121-1.122-2.926-1.122-4.038-.01l-3.83001 3.835c-.7.701-.7 1.84 0 2.54l.75.752c.301.3.301.78696 0 1.08796-.149.15-.345.225-.543.225-.197 0-.393-.075-.544-.225l-.75-.75196c-1.299-1.3-1.299-3.416 0-4.716l3.83001-3.835c1.71-1.712 4.493-1.712 6.203 0 1.719 1.722 1.719 4.508.009 6.219Z"
+  });
+};
+
 var Loading = function Loading() {
   return React__default.createElement("path", {
     fillRule: "evenodd",
@@ -511,10 +535,12 @@ var icons = {
   close: Close,
   checkCircle: CheckCircle,
   creditcard: CreditCard,
+  download: Download,
   product: Product,
   edit: Edit,
   exchange: Exchange,
   eye: Eye,
+  exclamationCircle: ExclamationCircle,
   exclamationTriangle: ExclamationTriangle,
   externalLink: ExternalLink,
   home: Home,
@@ -527,6 +553,7 @@ var icons = {
   plusCircle: PlusCircle,
   print: Print,
   infoCircle: InfoCircle,
+  link: Link,
   loading: Loading,
   pix: Pix,
   search: Search,
@@ -964,9 +991,9 @@ var formatValuePatterns = {
   },
   onlyText: {
     mask: function mask(rawValue) {
-      var onlyText = rawValue.replace(/[^a-zA-ZÀ-ú'~0-9\s]/g, '').split('');
+      var onlyText = rawValue.replace(/[^a-zA-ZÀ-ú'˜0-9\sü]/g, '').split('');
       return onlyText.map(function () {
-        return /[a-zA-ZÀ-ú'~´`^0-9\s]/g;
+        return /[a-zA-ZÀ-ú'˜`´^0-9\sü]/g;
       });
     }
   },
@@ -1322,6 +1349,8 @@ var ToggleComponent = function ToggleComponent(_ref, ref) {
       isChecked = _React$useState[0],
       setIsChecked = _React$useState[1];
 
+  var toggleStatusText = disabled ? 'disabled' : 'enabled';
+  var toggleCheckText = isChecked ? 'checked' : 'unchecked';
   React__default.useEffect(function () {
     setIsChecked(!!checked);
   }, [checked]);
@@ -1332,9 +1361,31 @@ var ToggleComponent = function ToggleComponent(_ref, ref) {
     onChange && onChange(event);
   };
 
+  var toggleClasses = {
+    background: {
+      checked: {
+        enabled: 'bg-primary border-primary',
+        disabled: 'bg-base-3 border-card-stroke'
+      },
+      unchecked: {
+        enabled: 'bg-base-1 border-card-stroke',
+        disabled: 'bg-base-3 border-card-stroke'
+      }
+    },
+    circle: {
+      checked: {
+        enabled: 'translate-x-full ml-px bg-base-1',
+        disabled: 'translate-x-full ml-px bg-base-1'
+      },
+      unchecked: {
+        enabled: 'translate-x-0 bg-inverted-2',
+        disabled: 'translate-x-0 bg-base-1'
+      }
+    }
+  };
   var toggleContainerDisabledClasses = (disabled ? 'pointer-events-none' : '') + " relative";
-  var toggleBackgroundClasses = "block border border-card-stroke w-[53px] h-8 rounded-full\n  " + (disabled ? ' bg-base-3' : ' bg-base-1') + " ";
-  var toggleCircleClasses = "transform  " + (!isChecked ? 'translate-x-0 bg-inverted-2' : 'translate-x-full ml-px ' + (disabled ? 'bg-base-1' : 'bg-primary')) + " absolute left-[6px] top-[6px] w-5 h-5 rounded-full transition";
+  var toggleBackgroundClasses = "block border w-[53px] h-8 rounded-full " + toggleClasses.background[toggleCheckText][toggleStatusText] + " transition";
+  var toggleCircleClasses = "transform  " + toggleClasses.circle[toggleCheckText][toggleStatusText] + " absolute left-[6px] top-[6px] w-5 h-5 rounded-full transition";
   var toggleLabelClasses = "ml-2 text-inverted-1 text-f6 tracking-4 label";
   return React__default.createElement("label", {
     htmlFor: inputId,
@@ -1357,8 +1408,8 @@ var ToggleComponent = function ToggleComponent(_ref, ref) {
   }, label));
 };
 
-var ToggleWithFowardRef = /*#__PURE__*/React__default.forwardRef(ToggleComponent);
-var Toggle = /*#__PURE__*/React__default.memo(ToggleWithFowardRef);
+var ToggleWithForwardRef = /*#__PURE__*/React__default.forwardRef(ToggleComponent);
+var Toggle = /*#__PURE__*/React__default.memo(ToggleWithForwardRef);
 
 var sizeClasses = {
   "default": 'h-12',
@@ -1447,7 +1498,7 @@ var CustomPlaceholder = function CustomPlaceholder(props) {
 
 var CustomSingleValue = function CustomSingleValue(props, variant) {
   return React__default.createElement(SingleValue, Object.assign({}, props, {
-    className: "text-f6 tracking-4 text-inverted-2 text-sm truncate " + variantValueClasses[variant]
+    className: "text-f6 tracking-4 text-on-base text-sm truncate " + variantValueClasses[variant]
   }));
 };
 
@@ -1594,16 +1645,23 @@ var DropdownWithFowardRef = /*#__PURE__*/React__default.forwardRef(DropdownCompo
 var Dropdown = /*#__PURE__*/React__default.memo(DropdownWithFowardRef);
 
 var CheckboxComponent = function CheckboxComponent(_ref, ref) {
-  var label = _ref.label,
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      label = _ref.label,
       id = _ref.id,
       name = _ref.name,
       onChange = _ref.onChange,
       checked = _ref.checked,
       disabled = _ref.disabled,
-      indeterminate = _ref.indeterminate,
+      _ref$indeterminate = _ref.indeterminate,
+      indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
       _ref$boxAlign = _ref.boxAlign,
       boxAlign = _ref$boxAlign === void 0 ? 'center' : _ref$boxAlign,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "id", "name", "onChange", "checked", "disabled", "indeterminate", "boxAlign"]);
+      helpText = _ref.helpText,
+      _ref$hasError = _ref.hasError,
+      hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+      errorMessage = _ref.errorMessage,
+      props = _objectWithoutPropertiesLoose(_ref, ["className", "label", "id", "name", "onChange", "checked", "disabled", "indeterminate", "boxAlign", "helpText", "hasError", "errorMessage"]);
 
   var inputRef = React__default.useRef(null);
   var inputId = id || name;
@@ -1617,6 +1675,7 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
       setIsIndeterminate = _React$useState2[1];
 
   var isCenterBoxAlign = boxAlign === 'center';
+  var hasErrorState = hasError || !!errorMessage;
   React__default.useEffect(function () {
     setIsChecked(!!checked);
     if (checked) setIsIndeterminate(false);
@@ -1636,7 +1695,7 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
 
   var checkboxIconClasses = "transition duration-200 ease-in-out " + (isChecked || isIndeterminate ? 'scale-100' : 'scale-0');
   var checkboxIconContainerClasses = "border border-card-stroke transition duration-200 ease-in-out\n    " + (disabled ? 'bg-base-4' : isChecked || isIndeterminate ? 'bg-primary border-primary' : 'bg-base-1') + "\n    " + (isCenterBoxAlign ? 'items-center' : '') + "\n    rounded w-4 h-4 flex justify-center m-px\n  ";
-  var checkboxLabelClasses = "ml-1 input-label text-f6 tracking-4 leading-6 " + (disabled ? 'text-inverted-2' : '');
+  var checkboxLabelClasses = "ml-1 input-label text-f6 tracking-4 leading-6 " + (hasErrorState ? 'text-danger' : disabled ? 'text-inverted-2' : '');
   var alignOptions = {
     start: 'items-start',
     end: 'items-end',
@@ -1644,7 +1703,14 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
     baseline: 'items-baseline',
     stretch: 'items-stretch'
   };
-  return React__default.createElement("label", {
+  var HelpTextComponent = React__default.createElement(InputHelpText, {
+    helpText: errorMessage || helpText,
+    hasError: hasErrorState,
+    className: "mt-2"
+  });
+  return React__default.createElement("div", {
+    className: "inline-block " + className
+  }, React__default.createElement("label", {
     htmlFor: inputId,
     className: "inline-flex " + alignOptions[boxAlign] + " cursor-pointer"
   }, React__default.createElement("span", {
@@ -1678,7 +1744,7 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
     fill: "white"
   })))), React__default.createElement("span", {
     className: checkboxLabelClasses
-  }, label));
+  }, label)), HelpTextComponent);
 };
 
 var CheckboxWithFowardRef = /*#__PURE__*/React__default.forwardRef(CheckboxComponent);
@@ -1867,7 +1933,7 @@ var TableComponent = function TableComponent(_ref2) {
     }));
   })), React__default.createElement("tbody", Object.assign({}, getTableBodyProps(), {
     className: "text-sm text-on-base"
-  }), isLoading ? React__default.createElement("tr", null, Array(columnsLength).fill(0).map(function (key) {
+  }), isLoading ? React__default.createElement("tr", null, Array(columnsLength).fill(0).map(function (_, key) {
     return React__default.createElement("td", {
       key: key,
       className: "" + TdClasses
@@ -2403,19 +2469,34 @@ var TooltipComponent = function TooltipComponent(props) {
     computedProps.content = mounted ? props.content : '';
   }
 
-  return React__default.createElement(Tippy, Object.assign({}, computedProps, {
+  return React__default.createElement(StyledTooltipComponent, Object.assign({}, computedProps, {
     appendTo: (props == null ? void 0 : props.appendTo) || 'parent',
     hideOnClick: (props == null ? void 0 : props.hideOnClick) || false,
     trigger: (props == null ? void 0 : props.trigger) || 'mouseenter',
     touch: (props == null ? void 0 : props.touch) || ['hold', 400],
     duration: (props == null ? void 0 : props.duration) || 150,
     placement: ((_window = window) == null ? void 0 : _window.innerWidth) < 1024 ? 'top' : (props == null ? void 0 : props.placement) || 'top',
-    interactive: (props == null ? void 0 : props.interactive) || false
+    interactive: (props == null ? void 0 : props.interactive) || false,
+    theme: (props == null ? void 0 : props.theme) || 'dark'
   }));
 };
 
-var styledTooltipComponent = /*#__PURE__*/styled(TooltipComponent)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  --bg-color: #20221b;\n  position: relative;\n  background-color: var(--bg-color);\n  color: #fff;\n  border-radius: 3px;\n  font-size: 12px;\n  letter-spacing: -0.4px;\n  line-height: 1.4;\n  outline: 0;\n  transition-property: transform, visibility, opacity;\n\n  &[data-animation='fade'][data-state='hidden'] {\n    opacity: 0;\n  }\n\n  [data-tippy-root] {\n    max-width: calc(100vw - 10px);\n  }\n\n  &[data-placement^='top'] > .tippy-arrow {\n    bottom: 0;\n  }\n\n  &[data-placement^='top'] > .tippy-arrow:before {\n    bottom: -7px;\n    left: 0;\n    border-width: 8px 8px 0;\n    border-top-color: initial;\n    transform-origin: center top;\n  }\n\n  &[data-placement^='bottom'] > .tippy-arrow {\n    top: 0;\n  }\n\n  &[data-placement^='bottom'] > .tippy-arrow:before {\n    top: -7px;\n    left: 0;\n    border-width: 0 8px 8px;\n    border-bottom-color: initial;\n    transform-origin: center bottom;\n  }\n\n  &[data-placement^='left'] > .tippy-arrow {\n    right: 0;\n  }\n\n  &[data-placement^='left'] > .tippy-arrow:before {\n    border-width: 8px 0 8px 8px;\n    border-left-color: initial;\n    right: -7px;\n    transform-origin: center left;\n  }\n\n  &[data-placement^='right'] > .tippy-arrow {\n    left: 0;\n  }\n\n  &[data-placement^='right'] > .tippy-arrow:before {\n    left: -7px;\n    border-width: 8px 8px 8px 0;\n    border-right-color: initial;\n    transform-origin: center right;\n  }\n\n  &[data-inertia][data-state='visible'] {\n    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n  }\n\n  .tippy-arrow {\n    width: 15px;\n    height: 15px;\n    color: var(--bg-color);\n  }\n\n  .tippy-arrow:before {\n    content: '';\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  .tippy-content {\n    position: relative;\n    padding: 12px 8px;\n    z-index: 1;\n  }\n"])));
-var Tooltip = /*#__PURE__*/React__default.memo(styledTooltipComponent);
+var theme = {
+  light: {
+    background: '#fff',
+    color: '#371E56'
+  },
+  dark: {
+    background: '#371E56',
+    color: '#fff'
+  }
+};
+var StyledTooltipComponent = /*#__PURE__*/styled(Tippy)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  --bg-color: ", ";\n  position: relative;\n  background-color: var(--bg-color);\n  color: ", ";\n  border-radius: 3px;\n  font-size: 12px;\n  letter-spacing: -0.4px;\n  line-height: 1.4;\n  outline: 0;\n  transition-property: transform, visibility, opacity;\n\n  &[data-animation='fade'][data-state='hidden'] {\n    opacity: 0;\n  }\n\n  [data-tippy-root] {\n    max-width: calc(100vw - 10px);\n  }\n\n  &[data-placement^='top'] > .tippy-arrow {\n    bottom: 0;\n  }\n\n  &[data-placement^='top'] > .tippy-arrow:before {\n    bottom: -7px;\n    left: 0;\n    border-width: 8px 8px 0;\n    border-top-color: initial;\n    transform-origin: center top;\n  }\n\n  &[data-placement^='bottom'] > .tippy-arrow {\n    top: 0;\n  }\n\n  &[data-placement^='bottom'] > .tippy-arrow:before {\n    top: -7px;\n    left: 0;\n    border-width: 0 8px 8px;\n    border-bottom-color: initial;\n    transform-origin: center bottom;\n  }\n\n  &[data-placement^='left'] > .tippy-arrow {\n    right: 0;\n  }\n\n  &[data-placement^='left'] > .tippy-arrow:before {\n    border-width: 8px 0 8px 8px;\n    border-left-color: initial;\n    right: -7px;\n    transform-origin: center left;\n  }\n\n  &[data-placement^='right'] > .tippy-arrow {\n    left: 0;\n  }\n\n  &[data-placement^='right'] > .tippy-arrow:before {\n    left: -7px;\n    border-width: 8px 8px 8px 0;\n    border-right-color: initial;\n    transform-origin: center right;\n  }\n\n  &[data-inertia][data-state='visible'] {\n    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n  }\n\n  .tippy-arrow {\n    width: 15px;\n    height: 15px;\n    color: var(--bg-color);\n  }\n\n  .tippy-arrow:before {\n    content: '';\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  .tippy-content {\n    position: relative;\n    padding: 12px 8px;\n    z-index: 1;\n  }\n"])), function (props) {
+  return theme[props.theme].background;
+}, function (props) {
+  return theme[props.theme].color;
+});
+var Tooltip = /*#__PURE__*/React__default.memo(TooltipComponent);
 
 var SharedContext = /*#__PURE__*/React__default.createContext({
   variant: 'default',