@automattic/vip-design-system 0.27.10 → 0.27.12

package/.storybook/decorators/withColorMode.jsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
 import { makeDecorator } from '@storybook/addons';
 import { useColorMode } from 'theme-ui';
+import { getColor } from '../../src/system/theme/getColor';
 
 // These need to be updated to import VIP design tokens;
-const lightBackground = '#ffffff';
+const lightBackground = getColor( 'background', 'primary' );
 const darkBackground = '#1C1C1B';
 
 export const backgrounds = {

package/build/system/Accordion/Accordion.js

@@ -60,7 +60,7 @@ var Item = function Item(_ref) {
       overflow: 'hidden',
       borderWidth: '0 1px 1px 1px',
       borderStyle: 'solid',
-      borderColor: 'border',
+      borderColor: 'borders.2',
       '&:first-of-type': {
         borderTopWidth: '1px',
         borderTopLeftRadius: 4,
@@ -111,7 +111,6 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
         justifyContent: 'space-between',
         fontSize: 1,
         fontWeight: 600,
-        textTransform: 'uppercase',
         '&[data-state="closed"]': {
           backgroundColor: function backgroundColor(_ref3) {
             var accordion = _ref3.accordion;
@@ -123,17 +122,15 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
             var accordion = _ref4.accordion;
             return accordion.background.open;
           },
-          borderBottom: function borderBottom(_ref5) {
-            var colors = _ref5.colors;
-            return "1px solid " + colors.border;
-          },
+          borderBottom: '1px solid',
+          borderBottomColor: 'borders.2',
           '.vip-accordion-trigger-indicator': {
             transform: 'rotate(270deg)'
           }
         },
         '&:hover': {
-          backgroundColor: function backgroundColor(_ref6) {
-            var accordion = _ref6.accordion;
+          backgroundColor: function backgroundColor(_ref5) {
+            var accordion = _ref5.accordion;
             return accordion.background.hover;
           }
         }
@@ -144,7 +141,7 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
         className: "vip-accordion-trigger-indicator",
         sx: {
           fontSize: 3,
-          color: 'text',
+          color: 'icon.primary',
           transform: 'rotate(90deg)',
           transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)'
         },
@@ -162,15 +159,15 @@ Trigger.propTypes = {
   sx: _propTypes["default"].object
 };
 
-var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref7, forwardedRef) {
-  var children = _ref7.children,
-      icon = _ref7.icon,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref7, _excluded3);
+var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref6, forwardedRef) {
+  var children = _ref6.children,
+      icon = _ref6.icon,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref6, _excluded3);
   return (0, _jsxRuntime.jsxs)(Trigger, (0, _extends2["default"])({}, props, {
     ref: forwardedRef,
     children: [(0, _jsxRuntime.jsx)("span", {
       sx: {
-        color: 'text',
+        color: 'icon.primary',
         fontSize: 3
       },
       children: icon
@@ -193,11 +190,11 @@ TriggerWithIcon.propTypes = {
   icon: _propTypes["default"].node.isRequired
 };
 
-var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, forwardedRef) {
-  var children = _ref8.children,
-      _ref8$sx = _ref8.sx,
-      sx = _ref8$sx === void 0 ? {} : _ref8$sx,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref8, _excluded4);
+var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref7, forwardedRef) {
+  var children = _ref7.children,
+      _ref7$sx = _ref7.sx,
+      sx = _ref7$sx === void 0 ? {} : _ref7$sx,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref7, _excluded4);
   return (0, _jsxRuntime.jsx)(AccordionPrimitive.Content, (0, _extends2["default"])({
     sx: (0, _extends2["default"])({
       backgroundColor: 'transparent',
@@ -226,12 +223,12 @@ Content.propTypes = {
   sx: _propTypes["default"].object
 };
 
-var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref9, forwardRef) {
-  var _ref9$sx = _ref9.sx,
-      sx = _ref9$sx === void 0 ? {} : _ref9$sx,
-      children = _ref9.children,
-      className = _ref9.className,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref9, _excluded5);
+var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, forwardRef) {
+  var _ref8$sx = _ref8.sx,
+      sx = _ref8$sx === void 0 ? {} : _ref8$sx,
+      children = _ref8.children,
+      className = _ref8.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref8, _excluded5);
   return (0, _jsxRuntime.jsx)(AccordionPrimitive.Root, (0, _extends2["default"])({
     className: (0, _classnames["default"])('vip-accordion-component', className),
     collapsible: true,

package/build/system/Badge/Badge.js

@@ -33,14 +33,26 @@ var Badge = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
     sx: (0, _extends2["default"])({
       fontSize: 0,
       padding: 0,
-      bg: variant + ".20",
-      color: variant + ".100",
+      bg: "tag." + variant + ".background",
+      color: "tag." + variant + ".text",
       py: 1,
       verticalAlign: 'middle',
       px: 2,
       display: 'inline-block',
       borderRadius: 1,
-      fontWeight: 'heading'
+      fontWeight: 'heading',
+      '&:hover, &:focus': {
+        backgroundColor: "tag." + variant + ".hover"
+      },
+      a: {
+        color: "tag." + variant + ".text",
+        '&:hover, &:focus, &:active': {
+          textDecoration: 'none'
+        },
+        '&:active': {
+          color: variant + ".active"
+        }
+      }
     }, sx),
     className: (0, _classnames["default"])('vip-badge-component', className),
     ref: forwardRef

package/build/system/Badge/Badge.stories.js

@@ -1,7 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithLinks = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _ = require("..");
 
@@ -16,10 +20,80 @@ var _default = {
 };
 exports["default"] = _default;
 
+var Template = function Template(props) {
+  return (0, _jsxRuntime.jsx)(_.Badge, (0, _extends2["default"])({}, props, {
+    sx: {
+      m: 2
+    }
+  }));
+};
+
+var TemplateLink = function TemplateLink(props) {
+  return (0, _jsxRuntime.jsx)(Template, (0, _extends2["default"])({}, props, {
+    sx: {
+      m: 2
+    },
+    children: (0, _jsxRuntime.jsx)("a", {
+      href: "http://google.com",
+      children: "Google.com"
+    })
+  }));
+};
+
 var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Badge, {
-    children: "Badge"
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(Template, {
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "red",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "yellow",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "green",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "gray",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "orange",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "gold",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "pink",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "salmon",
+      children: "Badge"
+    })]
+  });
+};
+
+exports.Default = Default;
+
+var WithLinks = function WithLinks() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(TemplateLink, {}), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "red"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "yellow"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "green"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "gray"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "orange"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "gold"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "pink"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "salmon"
+    })]
   });
 };
 
-exports.Default = Default;
+exports.WithLinks = WithLinks;

package/build/system/Button/Button.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,11 +19,26 @@ var _themeUi = require("theme-ui");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx"];
+var _excluded = ["disabled", "onClick", "sx"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var sx = _ref.sx,
+  var disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      sx = _ref.sx,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var handleOnClick = (0, _react.useCallback)(function (event) {
+    if (disabled) {
+      return event.preventDefault();
+    }
+
+    if (onClick) {
+      return onClick(event);
+    }
+  }, [disabled, onClick]);
   return (0, _jsxRuntime.jsx)(_themeUi.Button, (0, _extends2["default"])({
     sx: (0, _extends2["default"])({
       verticalAlign: 'middle',
@@ -42,13 +57,15 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
       '&:focus-visible': function focusVisible(theme) {
         return theme.outline;
       },
-      '&:disabled': {
+      '&[aria-disabled="true"]': {
         opacity: 0.7,
         cursor: 'not-allowed',
         pointerEvents: 'all'
       }
     }, sx),
-    className: (0, _classnames["default"])('vip-button-component', props.className)
+    "aria-disabled": disabled,
+    className: (0, _classnames["default"])('vip-button-component', props.className),
+    onClick: handleOnClick
   }, props, {
     ref: forwardRef
   }));
@@ -57,6 +74,8 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
 exports.Button = Button;
 Button.displayName = 'Button';
 Button.propTypes = {
-  sx: _propTypes["default"].object,
-  className: _propTypes["default"].any
+  className: _propTypes["default"].any,
+  disabled: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  sx: _propTypes["default"].object
 };

package/build/system/Button/Button.stories.js

@@ -3,10 +3,16 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithOnClick = exports.Link = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _bi = require("react-icons/bi");
+
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -20,33 +26,100 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  */
 var _default = {
   title: 'Button',
-  component: _.Button
+  component: _.Button,
+  argTypes: {
+    children: {},
+    disabled: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    variant: {
+      type: 'select',
+      options: ['primary', 'secondary', 'text', 'icon', 'tertiary', 'ghost', 'danger', 'display']
+    }
+  }
 };
 exports["default"] = _default;
 
-var Default = function Default() {
+var Template = function Template(args) {
   return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_.Button, {
-      sx: {
-        mr: 2
-      },
+    children: [(0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({}, args, {
       children: "Primary"
-    }), (0, _jsxRuntime.jsx)(_.Button, {
+    })), (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({
       variant: "secondary",
       sx: {
         ml: 2
-      },
+      }
+    }, args, {
       children: "Secondary"
-    }), (0, _jsxRuntime.jsx)(_.Button, {
+    })), (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({
+      variant: "tertiary",
+      sx: {
+        ml: 2
+      }
+    }, args, {
+      children: "Tertiary"
+    })), (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({
+      variant: "ghost",
+      sx: {
+        ml: 2
+      }
+    }, args, {
+      children: "Ghost"
+    })), (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({
+      variant: "display",
+      sx: {
+        ml: 2
+      }
+    }, args, {
+      children: "Display"
+    })), (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({
+      variant: "danger",
+      sx: {
+        ml: 2
+      }
+    }, args, {
+      children: "Danger"
+    })), (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({
       variant: "text",
       sx: {
         ml: 2
       },
       as: "a",
-      href: "https://google/com",
+      href: "https://google/com"
+    }, args, {
       children: "Button link"
-    })]
+    })), (0, _jsxRuntime.jsxs)(_.Button, (0, _extends2["default"])({
+      variant: "icon",
+      sx: {
+        ml: 2
+      },
+      type: "button"
+    }, args, {
+      children: [(0, _jsxRuntime.jsx)(_bi.BiCalendarHeart, {
+        size: 24
+      }), (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+        children: "domain.com"
+      })]
+    }))]
   });
 };
 
-exports.Default = Default;
+var Default = Template.bind({});
+exports.Default = Default;
+var Link = Template.bind({});
+exports.Link = Link;
+Link.args = {
+  variant: 'text',
+  as: 'a',
+  href: 'https://www.google.com'
+};
+var WithOnClick = Template.bind({});
+exports.WithOnClick = WithOnClick;
+Link.args = {
+  onClick: function onClick() {
+    // eslint-disable-next-line no-undef
+    alert('Clicked');
+  }
+};

package/build/system/Button/Button.test.js

@@ -21,33 +21,79 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * Internal dependencies
  */
+var BUTTON_TEXT = 'Button Text';
 describe('<Button />', function () {
   it('renders the Button component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-    var _render, container;
+    var onClick, _render, container, component;
 
     return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
+            onClick = jest.fn(function () {});
             _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Button.Button, {
-              children: "Button text"
+              onClick: onClick,
+              children: BUTTON_TEXT
             })), container = _render.container;
-            expect(_react.screen.getByText('Button text')).toBeInTheDocument(); // Check for accessibility issues
+            component = _react.screen.getByText(BUTTON_TEXT);
+            expect(component).toBeInTheDocument();
+
+            _react.fireEvent.click(component);
+
+            expect(onClick).toHaveBeenCalledTimes(1); // Check for accessibility issues
 
             _context.t0 = expect;
-            _context.next = 5;
+            _context.next = 9;
             return (0, _jestAxe.axe)(container);
 
-          case 5:
+          case 9:
             _context.t1 = _context.sent;
-            _context.next = 8;
+            _context.next = 12;
             return (0, _context.t0)(_context.t1).toHaveNoViolations();
 
-          case 8:
+          case 12:
           case "end":
             return _context.stop();
         }
       }
     }, _callee);
   })));
+  it('renders the Button with disabled prop', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var onClick, _render2, container, component;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            onClick = jest.fn(function () {});
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Button.Button, {
+              disabled: true,
+              onClick: onClick,
+              children: BUTTON_TEXT
+            })), container = _render2.container;
+            component = _react.screen.getByText(BUTTON_TEXT);
+            expect(component).toBeInTheDocument();
+            expect(component).toHaveAttribute('aria-disabled', 'true');
+            expect(component).not.toHaveAttribute('disabled');
+
+            _react.fireEvent.click(component);
+
+            expect(onClick).toHaveBeenCalledTimes(0); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 11;
+            return (0, _jestAxe.axe)(container);
+
+          case 11:
+            _context2.t1 = _context2.sent;
+            _context2.next = 14;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
 });

package/build/system/Code/Code.js

@@ -40,8 +40,8 @@ var Code = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef)
     sx: {
       fontSize: 1,
       display: 'block',
-      bg: 'grey.90',
-      color: 'grey.10',
+      bg: 'layer.inverse',
+      color: 'texts.inverse',
       borderRadius: 1,
       py: 2,
       px: 3,
@@ -72,18 +72,17 @@ var Code = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef)
     children: [codeDom, (0, _jsxRuntime.jsx)("button", {
       "aria-label": "Copy code",
       sx: {
-        bg: 'grey.10',
+        bg: 'notice.background.warning',
         borderTopRightRadius: 1,
         borderWidth: 0,
-        color: 'muted',
-        opacity: 0.8,
+        color: 'notice.text.warning',
         paddingBottom: 1,
         paddingLeft: 2,
         paddingRight: 2,
         paddingTop: 1,
         position: 'absolute',
         right: 0,
-        top: '-1px',
+        top: 0,
         '&:hover': {
           opacity: 1,
           cursor: 'pointer'

package/build/system/Dialog/DialogButton.js

@@ -41,7 +41,7 @@ var DialogButton = function DialogButton(_ref) {
       as: "span",
       sx: {
         mb: 0,
-        color: 'muted',
+        color: 'heading',
         mr: 2,
         flex: '0 0 auto'
       },
@@ -53,7 +53,7 @@ var DialogButton = function DialogButton(_ref) {
         flex: '1 1 auto',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        color: 'heading',
+        color: 'input.text',
         textOverflow: 'ellipsis'
       },
       children: value

package/build/system/Form/Checkbox.js

@@ -15,6 +15,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _md = require("react-icons/md");
 
+var _Input = require("./Input.styles");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["disabled"];
@@ -25,36 +27,31 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledCheckbox = function StyledCheckbox(props) {
   return (0, _jsxRuntime.jsx)(CheckboxPrimitive.Root, (0, _extends2["default"])({
-    sx: {
+    sx: (0, _extends2["default"])({
       all: 'unset',
-      backgroundColor: 'grey.10',
+      backgroundColor: _Input.inputBaseBackground
+    }, _Input.baseControlBorderStyle, _Input.baseControlFocusStyle, {
       width: 16,
       height: 16,
       borderRadius: 1,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      '&:hover': {
-        backgroundColor: 'grey.20'
-      },
-      '&:focus': {
-        boxShadow: '0 0 0 2px black'
-      },
       '&[data-state=checked]': {
-        backgroundColor: 'primary',
-        color: 'brand.0'
+        backgroundColor: 'link',
+        color: 'link'
       },
       svg: {
         display: 'block'
       }
-    }
+    })
   }, props));
 };
 
 var StyledIndicator = function StyledIndicator(props) {
   return (0, _jsxRuntime.jsx)(CheckboxPrimitive.Indicator, (0, _extends2["default"])({
     sx: {
-      color: 'brand.0'
+      color: 'white'
     }
   }, props));
 };
@@ -64,8 +61,7 @@ var Checkbox = function Checkbox(_ref) {
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(StyledCheckbox, (0, _extends2["default"])({
     sx: {
-      opacity: disabled ? 0.4 : 1,
-      border: 'none'
+      opacity: disabled ? 0.4 : 1
     },
     disabled: disabled
   }, props, {

package/build/system/Form/Checkbox.stories.js

@@ -38,8 +38,8 @@ var Default = function Default() {
       setChecked2 = _useState2[1];
 
   return (0, _jsxRuntime.jsx)(_.Form.Root, {
-    children: (0, _jsxRuntime.jsxs)("fieldset", {
-      children: [(0, _jsxRuntime.jsx)("legend", {
+    children: (0, _jsxRuntime.jsxs)(_.Form.Fieldset, {
+      children: [(0, _jsxRuntime.jsx)(_.Form.Legend, {
         children: "Tell me your prefereces"
       }), (0, _jsxRuntime.jsxs)(_Flex.Flex, {
         sx: {