@pingux/astro 2.84.0 → 2.85.0-alpha.15

package/lib/cjs/styles/themes/next-gen/sizes.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var avatar = {
+  sm: '24px',
+  md: '34px',
+  lg: '72px',
+  xl: '104px'
+};
+var container = {
+  xs: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+  sm: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+  md: ['100%', '100%', '720px', '960px', '1140px', '1540px'],
+  lg: ['100%', '100%', '100%', '960px', '1140px', '1540px'],
+  xl: ['100%', '100%', '100%', '100%', '1140px', '1540px'],
+  xx: ['100%', '100%', '100%', '100%', '100%', '1540px'],
+  fluid: ['100%', '100%', '100%', '100%', '100%', '100%']
+};
+var _default = {
+  avatar: avatar,
+  container: container
+};
+exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/text.d.ts

@@ -1,4 +1,10 @@
 export declare const fontSizes: {
+    avatar: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
     xs: string;
     sm: string;
     md: string;

package/lib/cjs/styles/themes/next-gen/text.js

@@ -7,15 +7,23 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.fontWeights = exports.fontSizes = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _sizes = _interopRequireDefault(require("./sizes"));
 var _fontWeights;
+var fontSizeBase = 0.9375;
 var fontSizes = {
-  'xs': '0.75rem',
+  avatar: {
+    'sm': "calc(".concat(_sizes["default"].avatar.sm, " * .4)"),
+    'md': "calc(".concat(_sizes["default"].avatar.md, " * .4)"),
+    'lg': "calc(".concat(_sizes["default"].avatar.lg, " * .4)"),
+    'xl': "calc(".concat(_sizes["default"].avatar.xl, " * .4)")
+  },
+  'xs': "".concat(fontSizeBase * 0.8, "rem"),
   'sm': '0.875rem',
-  'md': '.9375rem',
-  'lg': '1.171875rem',
-  'xl': '1.40625rem',
-  'xx': '1.640625rem',
-  'xxx': '2.109375rem'
+  'md': "".concat(fontSizeBase * 1, "rem"),
+  'lg': "".concat(fontSizeBase * 1.25, "rem"),
+  'xl': "".concat(fontSizeBase * 1.5, "rem"),
+  'xx': "".concat(fontSizeBase * 1.75, "rem"),
+  'xxx': "".concat(fontSizeBase * 2.25, "rem")
 };
 exports.fontSizes = fontSizes;
 var fontWeights = (_fontWeights = {}, (0, _defineProperty2["default"])(_fontWeights, -1, 300), (0, _defineProperty2["default"])(_fontWeights, 0, 400), (0, _defineProperty2["default"])(_fontWeights, 1, 400), (0, _defineProperty2["default"])(_fontWeights, 2, 600), (0, _defineProperty2["default"])(_fontWeights, 3, 600), _fontWeights);

package/lib/cjs/styles/themes/next-gen/variants/cards.js

@@ -7,7 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var interactive = {
   boxShadow: 'none',
-  borderRadius: '24px',
+  borderRadius: '1rem',
   border: '1px solid',
   borderColor: 'gray-300',
   transition: 'border-color .15s ease-in',

package/lib/cjs/styles/themes/next-gen/variants/images.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    avatar: {};
+};
+export default _default;

package/lib/cjs/styles/themes/next-gen/variants/images.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var avatar = {};
+var _default = {
+  avatar: avatar
+};
+exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/variants/links.js

@@ -23,14 +23,14 @@ var nextGen = {
   px: 'md',
   textDecoration: 'none',
   borderRadius: '4px',
-  lineHeight: '22.5px',
+  lineHeight: '1.5',
   minHeight: '22.5px',
   fontFamily: 'standard',
   '&.is-hovered': {
-    color: '#155cba'
+    color: 'blue-600'
   },
   '&.is-pressed': {
-    color: '#155cba'
+    color: 'blue-600'
   }
 };
 var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
@@ -49,7 +49,7 @@ var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
     transition: 'background-color .15s ease'
   },
   '&.is-selected': {
-    color: '#155cba',
+    color: 'blue-600',
     '&:before': {
       backgroundColor: 'active_light'
     }

package/lib/cjs/styles/themes/next-gen/variants/text.js

@@ -78,7 +78,7 @@ var text = _objectSpread({
     fontSize: 'sm',
     color: 'gray-500',
     fontFamily: 'standard',
-    lineHeight: '1.75rem'
+    lineHeight: 'md'
   }
 }, hTags);
 exports.text = text;

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -454,38 +454,47 @@ declare const _default: {
         };
     };
     avatar: {
-        xl: {
-            borderRadius: string;
-            textAlign: string;
-            justifyContent: string;
-            fontFamily: string;
-            size: string;
-            fontSize: string;
+        backgroundColor: string;
+        color: string;
+        cursor: string;
+        '&.is-orange': {
+            backgroundColor: string;
+            color: string;
         };
-        lg: {
-            fontSize: string;
-            borderRadius: string;
-            textAlign: string;
-            justifyContent: string;
-            fontFamily: string;
-            size: string;
+        '&.is-green': {
+            backgroundColor: string;
+            color: string;
         };
-        md: {
-            fontSize: string;
-            borderRadius: string;
-            textAlign: string;
-            justifyContent: string;
-            fontFamily: string;
-            size: string;
+        '&.is-purple': {
+            backgroundColor: string;
+            color: string;
         };
-        sm: {
-            fontSize: string;
-            borderRadius: string;
-            textAlign: string;
-            justifyContent: string;
-            fontFamily: string;
-            size: string;
+        '&.is-pink': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-red': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-yellow': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-cyan': {
+            backgroundColor: string;
+            color: string;
         };
+        '&.is-teal': {
+            backgroundColor: string;
+            color: string;
+        };
+        display: string;
+        borderRadius: string;
+        textAlign: string;
+        alignItems: string;
+        justifyContent: string;
+        fontFamily: string;
     };
     listViewItem: {
         rightOfData: {
@@ -554,8 +563,17 @@ declare const _default: {
             borderRadius: string;
             border: string;
             borderColor: string;
-            '& > div': {
-                borderRadius: string;
+            '& > div > div': {
+                '& > div:first-of-type': {
+                    '& > div > div': {
+                        borderRadius: string;
+                    };
+                };
+                '& > div:last-of-type': {
+                    '& > div > div': {
+                        borderRadius: string;
+                    };
+                };
             };
         };
     };

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -248,33 +248,49 @@ var separator = {
     bg: 'gray-300'
   }
 };
-var avatarBase = {
+var avatar = {
+  backgroundColor: 'lightcyan',
+  color: 'darkcyan',
+  cursor: 'pointer',
+  '&.is-orange': {
+    backgroundColor: 'lightorange',
+    color: 'darkorange'
+  },
+  '&.is-green': {
+    backgroundColor: 'lightgreen',
+    color: 'darkgreen'
+  },
+  '&.is-purple': {
+    backgroundColor: 'lightpurple',
+    color: 'darkpurple'
+  },
+  '&.is-pink': {
+    backgroundColor: 'lightpink',
+    color: 'darkpink'
+  },
+  '&.is-red': {
+    backgroundColor: 'lightred',
+    color: 'darkred'
+  },
+  '&.is-yellow': {
+    backgroundColor: 'lightyellow',
+    color: 'darkyellow'
+  },
+  '&.is-cyan': {
+    backgroundColor: 'lightcyan',
+    color: 'darkcyan'
+  },
+  '&.is-teal': {
+    backgroundColor: 'lightteal',
+    color: 'darkteal'
+  },
+  display: 'flex',
   borderRadius: '50%',
   textAlign: 'center',
+  alignItems: 'center',
   justifyContent: 'center',
   fontFamily: 'standard'
 };
-var avatar = {
-  xl: _objectSpread({
-    size: '104px',
-    fontSize: 'calc(104px * .4)'
-  }, avatarBase),
-  lg: _objectSpread(_objectSpread({
-    size: '72px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(72px * .4)'
-  }),
-  md: _objectSpread(_objectSpread({
-    size: '34px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(34px * .4)'
-  }),
-  sm: _objectSpread(_objectSpread({
-    size: '24px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(24px * .4)'
-  })
-};
 var progressBarContainer = {
   backgroundColor: 'gray-200',
   borderRadius: '.5rem',
@@ -314,8 +330,8 @@ var listViewItem = {
     }
   },
   styledContainer: {
-    py: '1rem',
-    px: '1.5rem',
+    py: 'md',
+    px: 'lg',
     bg: 'transparent',
     '&.is-hovered': {
       bg: 'transparent',
@@ -437,8 +453,17 @@ var listView = {
     borderRadius: '16px',
     border: '1px solid',
     borderColor: '#e7eef4',
-    '& > div': {
-      borderRadius: '16px'
+    '& > div > div': {
+      '& > div:first-of-type': {
+        '& > div > div': {
+          borderRadius: '16px 16px 0 0'
+        }
+      },
+      '& > div:last-of-type': {
+        '& > div > div': {
+          borderRadius: ' 0 0 16px 16px'
+        }
+      }
     }
   }
 };

package/lib/cjs/types/avatar.d.ts

@@ -1,9 +1,13 @@
 import { AvatarProps as ThemeUIAvatarProps, ThemeUICSSObject } from 'theme-ui';
 export interface AvatarProps extends ThemeUIAvatarProps {
     /**  Source of avatar. */
-    src: string;
+    src?: string;
     /** Alternative text for avatar. */
     alt?: string;
     /** Inline styling prop */
     sx?: ThemeUICSSObject;
+    /** If no image src is supplied, this text will render inside of a styled div */
+    defaultText?: string;
+    size?: string;
+    color?: string;
 }

package/lib/cjs/types/checkboxField.d.ts

@@ -1,7 +1,9 @@
 import { UseFieldProps } from '../hooks/useField/useField';
-export interface CheckboxFieldProps extends UseFieldProps<HTMLInputElement> {
+export interface CheckboxFieldProps extends Omit<UseFieldProps<HTMLInputElement>, 'onChange'> {
     /** Handler that is called when a key is pressed. */
     onKeyDown?: () => void;
     /** Handler that is called when a key is released. */
     onKeyUp?: () => void;
+    /** Handler that is called when the element's selection state changes. */
+    onChange?: (isSelected: boolean) => void;
 }

package/lib/cjs/types/index.d.ts

@@ -44,6 +44,7 @@ export * from './rockerButtonGroup';
 export * from './scrollBox';
 export * from './separator';
 export * from './shared';
+export * from './switchField';
 export * from './tab';
 export * from './table';
 export * from './tabs';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -513,8 +513,19 @@ _forEachInstanceProperty(_context46 = _Object$keys(_shared)).call(_context46, fu
     }
   });
 });
+var _switchField = require("./switchField");
+_forEachInstanceProperty(_context47 = _Object$keys(_switchField)).call(_context47, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _switchField[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _switchField[key];
+    }
+  });
+});
 var _tab = require("./tab");
-_forEachInstanceProperty(_context47 = _Object$keys(_tab)).call(_context47, function (key) {
+_forEachInstanceProperty(_context48 = _Object$keys(_tab)).call(_context48, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tab[key]) return;
   _Object$defineProperty(exports, key, {
@@ -525,7 +536,7 @@ _forEachInstanceProperty(_context47 = _Object$keys(_tab)).call(_context47, funct
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context48 = _Object$keys(_table)).call(_context48, function (key) {
+_forEachInstanceProperty(_context49 = _Object$keys(_table)).call(_context49, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -536,7 +547,7 @@ _forEachInstanceProperty(_context48 = _Object$keys(_table)).call(_context48, fun
   });
 });
 var _tabs = require("./tabs");
-_forEachInstanceProperty(_context49 = _Object$keys(_tabs)).call(_context49, function (key) {
+_forEachInstanceProperty(_context50 = _Object$keys(_tabs)).call(_context50, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tabs[key]) return;
   _Object$defineProperty(exports, key, {
@@ -547,7 +558,7 @@ _forEachInstanceProperty(_context49 = _Object$keys(_tabs)).call(_context49, func
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context50 = _Object$keys(_text)).call(_context50, function (key) {
+_forEachInstanceProperty(_context51 = _Object$keys(_text)).call(_context51, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -558,7 +569,7 @@ _forEachInstanceProperty(_context50 = _Object$keys(_text)).call(_context50, func
   });
 });
 var _textField = require("./textField");
-_forEachInstanceProperty(_context51 = _Object$keys(_textField)).call(_context51, function (key) {
+_forEachInstanceProperty(_context52 = _Object$keys(_textField)).call(_context52, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _textField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -569,7 +580,7 @@ _forEachInstanceProperty(_context51 = _Object$keys(_textField)).call(_context51,
   });
 });
 var _timefield = require("./timefield");
-_forEachInstanceProperty(_context52 = _Object$keys(_timefield)).call(_context52, function (key) {
+_forEachInstanceProperty(_context53 = _Object$keys(_timefield)).call(_context53, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _timefield[key]) return;
   _Object$defineProperty(exports, key, {
@@ -580,7 +591,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_timefield)).call(_context52,
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context53 = _Object$keys(_tooltipTrigger)).call(_context53, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_tooltipTrigger)).call(_context54, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/switchField.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { ControlProps } from '../hooks/useField/useField';
+import { Status } from './item';
+import { LabelProps } from './label';
+import { DOMAttributes } from './shared';
+export interface SwitchFieldProps extends DOMAttributes {
+    className?: string;
+    label?: React.ReactNode;
+    helperText?: string;
+    isDefaultSelected?: boolean;
+    isDisabled?: boolean;
+    status?: Status;
+    controlProps?: ControlProps;
+    isSelected?: boolean;
+    onChange?: () => void;
+    value?: string;
+    isRequired?: boolean;
+    hintText?: string;
+    labelProps?: LabelProps;
+    hasAutoFocus?: boolean;
+    id?: string;
+    isReadOnly?: boolean;
+    name?: string;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    onFocusChange?: () => void;
+    onKeyDown?: () => void;
+    onKeyUp?: () => void;
+}

package/lib/cjs/types/switchField.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Avatar/Avatar.js

@@ -1,14 +1,51 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["alt", "defaultText", "color", "className", "size", "src", "sx"];
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef } from 'react';
-import { Avatar as ThemeUIAvatar } from 'theme-ui';
+import { Avatar as ThemeUIAvatar, Box } from 'theme-ui';
+import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
-  return ___EmotionJSX(ThemeUIAvatar, _extends({
-    ref: ref
-  }, props));
+  var _props$alt = props.alt,
+    alt = _props$alt === void 0 ? 'Avatar' : _props$alt,
+    defaultText = props.defaultText,
+    color = props.color,
+    className = props.className,
+    size = props.size,
+    src = props.src,
+    sx = props.sx,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useStatusClasses = useStatusClasses(className, _defineProperty({}, "is-".concat(color), true)),
+    classNames = _useStatusClasses.classNames;
+  if (src) {
+    return ___EmotionJSX(ThemeUIAvatar, _extends({
+      ref: ref,
+      alt: alt,
+      src: src,
+      sx: _objectSpread({
+        size: size
+      }, sx)
+    }, others));
+  }
+  return ___EmotionJSX(Box, _extends({
+    variant: "avatar",
+    className: classNames,
+    sx: _objectSpread({
+      size: size,
+      fontSize: size
+    }, sx)
+  }, others), defaultText);
 });
-Avatar.defaultProps = {
-  alt: 'Avatar'
-};
 Avatar.displayName = 'Avatar';
 export default Avatar;

package/lib/components/Avatar/Avatar.test.js

@@ -5,8 +5,9 @@ import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Avatar from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var src = faker.image.lorempicsum.imageUrl(150, 150, false, undefined, '1');
 var defaultProps = {
-  src: faker.image.lorempicsum.imageUrl(150, 150, false, undefined, '1')
+  src: src
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -31,4 +32,12 @@ test('an avatar is rendered with custom alt', function () {
   });
   var img = screen.getByRole('img');
   expect(img).toHaveAttribute('alt', 'Custom Alt');
+});
+test('an avatar is rendered with custom alt', function () {
+  getComponent({
+    src: undefined,
+    defaultText: 'KL'
+  });
+  var avatar = screen.getByText('KL');
+  expect(avatar).toBeInTheDocument();
 });

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -87,8 +87,8 @@ export var Controlled = function Controlled() {
     setSelected = _React$useState2[1];
   return ___EmotionJSX(CheckboxField, {
     isSelected: isSelected,
-    onChange: function onChange(e) {
-      return setSelected;
+    onChange: function onChange(selected) {
+      return setSelected(selected);
     },
     label: "Click me"
   });
@@ -183,7 +183,9 @@ export var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleab
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SwitchField, {
     isSelected: isReadOnly,
     label: "Is Read Only",
-    onChange: setIsReadOnly,
+    onChange: function onChange() {
+      return setIsReadOnly(!isReadOnly);
+    },
     value: "my-switch"
   }), ___EmotionJSX("br", null), ___EmotionJSX(Box, {
     isRow: true,