@plasmicpkgs/plasmic-chakra-ui 0.0.3 → 0.0.4

package/dist/plasmic-chakra-ui.esm.js

@@ -1,5 +1,6 @@
-import { AspectRatio, Badge, BreadcrumbItem, BreadcrumbLink, Breadcrumb, BreadcrumbSeparator, ButtonGroup, Button, Checkbox, CheckboxGroup, Code, Divider, Image, Input, Kbd, NumberInput, NumberInputStepper, NumberDecrementStepper, NumberIncrementStepper, NumberInputField, PinInput, PinInputField, Popover, PopoverContent, PopoverArrow, PopoverCloseButton, PopoverHeader, PopoverBody, PopoverTrigger, RadioGroup, Radio, Select, Stat, StatHelpText, StatArrow, StatNumber, StatLabel, Switch, Table, TableCaption, Thead, Tbody, Tr, Td, Th, TableContainer, Tfoot, TabList, Tabs, Tab, TabPanels, TabPanel, Text, Highlight, Heading, Toast, Tooltip, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, AvatarBadge, Avatar, AvatarGroup, FormControl, FormLabel, FormHelperText, FormErrorMessage, Progress } from '@chakra-ui/react';
+import { Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, AspectRatio, AvatarBadge, Avatar, AvatarGroup, Badge, BreadcrumbItem, BreadcrumbLink, Breadcrumb, BreadcrumbSeparator, ButtonGroup, Button, ChakraProvider, Checkbox, CheckboxGroup, Code, Divider, FormControl, FormLabel, FormHelperText, FormErrorMessage, Heading, Highlight, Image, Input, Kbd, NumberInput, NumberInputStepper, NumberDecrementStepper, NumberIncrementStepper, NumberInputField, PinInput, PinInputField, Popover, PopoverContent, PopoverArrow, PopoverCloseButton, PopoverHeader, PopoverBody, PopoverTrigger, Progress, RadioGroup, Radio, Select, Stat, StatHelpText, StatArrow, StatNumber, StatLabel, Switch, Table, TableCaption, Thead, Tbody, Tr, Td, Th, TableContainer, Tfoot, TabList, Tabs, Tab, TabPanels, TabPanel, Text, Toast, Tooltip } from '@chakra-ui/react';
 import registerComponent from '@plasmicapp/host/registerComponent';
+import registerGlobalContext from '@plasmicapp/host/registerGlobalContext';
 import React from 'react';
 
 function _extends() {
@@ -40,405 +41,308 @@ var getComponentNameAndImportMeta = function getComponentNameAndImportMeta(compo
   } : {});
 };
 
-var aspectRatioMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AspectRatio"), {
-  defaultStyles: {
-    width: "320px"
-  },
+var accordionMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Accordion"), {
   props: {
-    ratio: {
+    allowMultiple: {
+      type: "boolean",
+      description: "If true, multiple accordion items can be expanded at the same time."
+    },
+    allowToggle: {
+      type: "boolean",
+      description: "If true, an expanded accordion item can be collapsed again."
+    },
+    defaultIndex: {
       type: "number",
-      defaultValue: 1.333
+      description: "The index of the accordion item that should be expanded by default."
+    },
+    reduceMotion: {
+      type: "boolean",
+      description: "If true, height animation and transitions will be disabled."
     },
     children: {
       type: "slot",
-      defaultValue: {
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("AccordionItem")],
+      defaultValue: [{
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Image")
-      }
-    }
-  }
-});
-function registerAspectRatio(loader, customAspectRatioMeta) {
-  var doRegisterComponent = function doRegisterComponent() {
-    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
-  };
-
-  doRegisterComponent(AspectRatio, customAspectRatioMeta != null ? customAspectRatioMeta : aspectRatioMeta);
-}
-
-var badgeMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Badge"), {
-  importPath: "@chakra-ui/react",
-  props: {
-    colorScheme: {
-      type: "choice",
-      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"],
-      defaultValue: "gray"
-    },
-    variant: {
-      type: "choice",
-      options: ["solid", "subtle", "outline"],
-      defaultValue: "subtle"
+        name: /*#__PURE__*/getPlasmicComponentName("AccordionItem")
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("AccordionItem")
+      }]
     }
   }
 });
-function registerBadge(loader, customBadgeMeta) {
+function registerAccordion(loader, customAccordionMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Badge, customBadgeMeta != null ? customBadgeMeta : badgeMeta);
+  doRegisterComponent(Accordion, customAccordionMeta != null ? customAccordionMeta : accordionMeta);
 }
-
-var breadcrumbItemMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("BreadcrumbItem", "Breadcrumb"), {
+var accordionItemMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AccordionItem", "Accordion"), {
   props: {
-    isCurrentPage: {
-      type: "boolean"
-    },
-    isLastChild: {
-      type: "boolean"
-    },
-    seperator: {
+    id: {
       type: "string",
-      defaultValue: "/"
+      description: "The unique id of the accordion item."
     },
-    spacing: {
-      type: "string",
-      defaultValue: "8px"
+    isDisabled: {
+      type: "boolean",
+      description: "If true, the accordion item will be disabled."
+    },
+    isFocusable: {
+      type: "boolean",
+      description: "If true, the accordion item will be focusable."
     },
     children: {
       type: "slot",
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("AccordionButton"), /*#__PURE__*/getPlasmicComponentName("AccordionPanel")],
       defaultValue: [{
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbLink"),
-        props: {
-          children: {
-            type: "text",
-            value: "BreadcrumbItem"
-          }
-        }
+        name: /*#__PURE__*/getPlasmicComponentName("AccordionButton")
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("AccordionPanel")
       }]
     }
   }
 });
-function registerBreadcrumbItem(loader, customBreadcrumbItemMeta) {
+function registerAccordionItem(loader, customAccordionItemMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(BreadcrumbItem, customBreadcrumbItemMeta != null ? customBreadcrumbItemMeta : breadcrumbItemMeta);
+  doRegisterComponent(AccordionItem, customAccordionItemMeta != null ? customAccordionItemMeta : accordionItemMeta);
 }
-var breadcrumbLinkMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("BreadcrumbLink", "BreadcrumbItem"), {
+var accordionButtonMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AccordionButton", "AccordionItem"), {
   props: {
-    href: {
-      type: "string",
-      defaultValue: "#"
+    _expanded: {
+      type: "object",
+      displayName: "expandedStyle",
+      defaultValueHint: {
+        bg: "orange",
+        color: "white"
+      }
     },
     children: {
       type: "slot",
       defaultValue: [{
         type: "text",
-        value: "Home"
+        value: "Section 1 title",
+        styles: {
+          textAlign: "left"
+        }
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("AccordionIcon")
       }]
     }
   }
 });
-function registerBreadcrumbLink(loader, customBreadcrumbLinkMeta) {
+function registerAccordionButton(loader, customAccordionButtonMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(BreadcrumbLink, customBreadcrumbLinkMeta != null ? customBreadcrumbLinkMeta : breadcrumbLinkMeta);
+  doRegisterComponent(AccordionButton, customAccordionButtonMeta != null ? customAccordionButtonMeta : accordionButtonMeta);
 }
-var breadcrumbMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Breadcrumb"), {
+var accordionPanelMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AccordionPanel", "AccordionItem"), {
   props: {
-    separator: {
-      type: "string",
-      defaultValue: "/"
-    },
-    spacing: {
-      type: "string",
-      defaultValue: "8px"
-    },
     children: {
       type: "slot",
-      defaultValue: [{
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbItem"),
-        props: {
-          children: {
-            type: "component",
-            name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbLink"),
-            props: {
-              children: {
-                type: "text",
-                value: "Home"
-              }
-            }
-          }
-        }
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbItem"),
-        props: {
-          children: {
-            type: "component",
-            name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbLink"),
-            props: {
-              children: {
-                type: "text",
-                value: "Docs"
-              }
-            }
-          }
-        }
-      }, {
+      defaultValue: {
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbItem"),
+        name: /*#__PURE__*/getPlasmicComponentName("Text"),
         props: {
-          isLastChild: true,
-          isCurrentPage: true,
           children: {
-            type: "component",
-            name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbLink"),
-            props: {
-              children: {
-                type: "text",
-                value: "Breadcrumb"
-              }
-            }
+            type: "text",
+            value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
           }
         }
-      }]
+      }
     }
   }
 });
-function registerBreadcrumb(loader, customBreadcrumbMeta) {
+function registerAccordionPanel(loader, customAccordionPanelMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Breadcrumb, customBreadcrumbMeta != null ? customBreadcrumbMeta : breadcrumbMeta);
+  doRegisterComponent(AccordionPanel, customAccordionPanelMeta != null ? customAccordionPanelMeta : accordionPanelMeta);
 }
-var breadcrumbSeparatorMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("BreadcrumbSeparator", "Breadcrumb"), {
-  props: {
-    children: {
-      type: "slot",
-      defaultValue: {
-        type: "text",
-        value: "/"
-      }
-    }
-  }
+var accordionIconMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AccordionIcon", "AccordionButton"), {
+  props: {}
 });
-function registerBreadcrumbSeparator(loader, customBreadcrumbSeparatorMeta) {
+function registerAccordionIcon(loader, customAccordionIconMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(BreadcrumbSeparator, customBreadcrumbSeparatorMeta != null ? customBreadcrumbSeparatorMeta : breadcrumbSeparatorMeta);
+  doRegisterComponent(AccordionIcon, customAccordionIconMeta != null ? customAccordionIconMeta : accordionIconMeta);
 }
 
-var buttonGroupMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("ButtonGroup"), {
+var aspectRatioMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AspectRatio"), {
+  defaultStyles: {
+    width: "320px"
+  },
   props: {
-    colorScheme: {
-      type: "choice",
-      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"]
-    },
-    size: {
-      type: "choice",
-      options: ["xl", "sm", "md", "lg"],
-      defaultValue: "md"
-    },
-    isAttached: {
-      type: "boolean",
-      defaultValue: false
-    },
-    isDisabled: {
-      type: "boolean",
-      defaultValue: false
-    },
-    spacing: {
-      type: "string",
-      defaultValue: "0.5rem"
+    ratio: {
+      type: "number",
+      defaultValue: 1.333
     },
     children: {
       type: "slot",
-      defaultValue: [{
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Button"),
-        props: {
-          children: {
-            type: "text",
-            value: "Button 1"
-          }
-        }
-      }, {
+      defaultValue: {
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Button"),
-        props: {
-          children: {
-            type: "text",
-            value: "Button 2"
-          }
-        }
-      }]
+        name: /*#__PURE__*/getPlasmicComponentName("Image")
+      }
     }
   }
 });
-function registerButtonGroup(loader, customButtonGroupMeta) {
+function registerAspectRatio(loader, customAspectRatioMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(ButtonGroup, customButtonGroupMeta != null ? customButtonGroupMeta : buttonGroupMeta);
+  doRegisterComponent(AspectRatio, customAspectRatioMeta != null ? customAspectRatioMeta : aspectRatioMeta);
 }
-var buttonMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Button", "ButtonGroup"), {
+
+var avatarBadgeMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AvatarBadge", "Avatar"), {
   props: {
-    size: {
-      type: "choice",
-      options: ["xl", "sm", "md", "lg"]
-    },
-    variant: {
-      type: "choice",
-      options: ["ghost", "outline", "solid", "link", "unstyled"],
-      defaultValue: "solid"
-    },
-    colorScheme: {
-      type: "choice",
-      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"]
-    },
-    iconSpacing: "number",
-    isActive: {
-      type: "boolean"
-    },
-    isDisabled: {
-      type: "boolean"
+    boxSize: {
+      type: "string",
+      defaultValue: "1.25em"
     },
-    isLoading: {
-      type: "boolean"
+    bg: {
+      type: "string",
+      defaultValue: "green.500"
     },
-    children: {
-      type: "slot",
-      defaultValue: {
-        type: "text",
-        value: "Button"
-      }
-    }
+    borderColor: "string"
   }
 });
-function registerButton(loader, customButtonMeta) {
+function registerAvatarBadge(loader, customAvatarBadgeMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Button, customButtonMeta != null ? customButtonMeta : buttonMeta);
+  doRegisterComponent(AvatarBadge, customAvatarBadgeMeta != null ? customAvatarBadgeMeta : avatarBadgeMeta);
 }
-
-var checkboxMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Checkbox", "CheckboxGroup"), {
+var avatarMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Avatar", "AvatarGroup"), {
   props: {
-    colorScheme: {
-      type: "choice",
-      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"],
-      defaultValue: "blue"
-    },
-    size: {
-      type: "choice",
-      options: ["xl", "sm", "md", "lg"]
-    },
-    value: {
-      type: "string"
-    },
-    spacing: {
+    name: {
       type: "string",
-      defaultValue: "0.5rem"
-    },
-    isChecked: {
-      type: "boolean"
-    },
-    isIndeterminate: {
-      type: "boolean"
+      defaultValue: "Kola Tioluwani"
     },
-    isDisabled: {
-      type: "boolean"
+    src: {
+      type: "string",
+      defaultValue: "https://bit.ly/dan-abramov"
     },
-    isRequired: {
-      type: "boolean"
+    size: {
+      type: "choice",
+      options: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "full"]
     },
-    isInvalid: {
-      type: "boolean"
+    loading: {
+      type: "choice",
+      options: ["eager", "lazy"]
     },
+    showBorder: "boolean",
     children: {
       type: "slot",
+      hidePlaceholder: true,
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("AvatarBadge")],
       defaultValue: {
-        type: "text",
-        value: "Checkbox"
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("AvatarBadge")
       }
     }
   }
 });
-function registerCheckbox(loader, customCheckboxMeta) {
+function registerAvatar(loader, customAvatarMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Checkbox, customCheckboxMeta != null ? customCheckboxMeta : checkboxMeta);
+  doRegisterComponent(Avatar, customAvatarMeta != null ? customAvatarMeta : avatarMeta);
 }
-var checkboxGroupMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("CheckboxGroup"), {
+var avatarGroupMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AvatarGroup"), {
   props: {
     size: {
       type: "choice",
-      options: ["xl", "sm", "md", "lg"],
-      defaultValue: "md"
+      options: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "full"]
     },
-    isDisabled: {
-      type: "boolean"
+    max: {
+      type: "number",
+      description: "The maximum number of avatars to show before truncating."
+    },
+    spacing: {
+      type: "string",
+      defaultValue: "-0.75rem"
     },
     children: {
       type: "slot",
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Checkbox")],
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Avatar")],
       defaultValue: [{
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Checkbox"),
+        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
         props: {
-          value: "1",
-          children: {
-            type: "text",
-            value: "Checkbox 1"
-          }
+          name: "Dan Abrahmov",
+          src: "https://bit.ly/dan-abramov"
         }
       }, {
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Checkbox"),
+        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
         props: {
-          value: "2",
-          children: {
-            type: "text",
-            value: "Checkbox 2"
-          }
+          name: "Kola Tioluwani",
+          src: "https://bit.ly/tioluwani-kolawole"
         }
       }, {
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Checkbox"),
+        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
         props: {
-          value: "3",
-          children: {
-            type: "text",
-            value: "Checkbox 3"
-          }
+          name: "Kent Dodds",
+          src: "https://bit.ly/kent-c-dodds"
+        }
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
+        props: {
+          name: "Ryan Florence",
+          src: "https://bit.ly/ryan-florence"
+        }
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
+        props: {
+          name: "Prosper Otemuyiwa",
+          src: "https://bit.ly/prosper-baba"
+        }
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
+        props: {
+          name: "Christian Nwamba",
+          src: "https://bit.ly/code-beast"
+        }
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
+        props: {
+          name: "Segun Adebayo",
+          src: "https://bit.ly/sage-adebayo"
         }
       }]
     }
   }
 });
-function registerCheckboxGroup(loader, customCheckboxGroupMeta) {
+function registerAvatarGroup(loader, customAvatarGroupMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(CheckboxGroup, customCheckboxGroupMeta != null ? customCheckboxGroupMeta : checkboxGroupMeta);
+  doRegisterComponent(AvatarGroup, customAvatarGroupMeta != null ? customAvatarGroupMeta : avatarGroupMeta);
 }
 
-var codeMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Code"), {
+var badgeMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Badge"), {
+  importPath: "@chakra-ui/react",
   props: {
     colorScheme: {
       type: "choice",
@@ -449,607 +353,608 @@ var codeMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportM
       type: "choice",
       options: ["solid", "subtle", "outline"],
       defaultValue: "subtle"
-    },
-    children: {
-      type: "slot",
-      defaultValue: [{
-        type: "text",
-        value: "Code"
-      }]
     }
   }
 });
-function registerCode(loader, customCodeMeta) {
+function registerBadge(loader, customBadgeMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Code, customCodeMeta != null ? customCodeMeta : codeMeta);
+  doRegisterComponent(Badge, customBadgeMeta != null ? customBadgeMeta : badgeMeta);
 }
 
-var dividerMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Divider"), {
+var breadcrumbItemMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("BreadcrumbItem", "Breadcrumb"), {
   props: {
-    orientation: {
-      type: "choice",
-      options: ["vertical", "horizontal"]
+    isCurrentPage: {
+      type: "boolean"
     },
-    variant: {
-      type: "choice",
-      options: ["solid", "dashed"]
+    isLastChild: {
+      type: "boolean"
+    },
+    seperator: {
+      type: "string",
+      defaultValue: "/"
+    },
+    spacing: {
+      type: "string",
+      defaultValue: "8px"
+    },
+    children: {
+      type: "slot",
+      defaultValue: [{
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbLink"),
+        props: {
+          children: {
+            type: "text",
+            value: "BreadcrumbItem"
+          }
+        }
+      }]
     }
   }
 });
-function registerDivider(loader, customDividerMeta) {
+function registerBreadcrumbItem(loader, customBreadcrumbItemMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Divider, customDividerMeta != null ? customDividerMeta : dividerMeta);
+  doRegisterComponent(BreadcrumbItem, customBreadcrumbItemMeta != null ? customBreadcrumbItemMeta : breadcrumbItemMeta);
 }
-
-var imageMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Image"), {
+var breadcrumbLinkMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("BreadcrumbLink", "BreadcrumbItem"), {
   props: {
-    src: {
-      type: "string",
-      defaultValue: "https://bit.ly/naruto-sage"
-    },
-    fallbackSrc: {
-      type: "string",
-      defaultValue: "https://via.placeholder.com/150"
-    },
-    alt: {
+    href: {
       type: "string",
-      defaultValueHint: "name of the image"
+      defaultValue: "#"
     },
-    loading: {
-      type: "choice",
-      options: ["lazy", "eager"]
+    children: {
+      type: "slot",
+      defaultValue: [{
+        type: "text",
+        value: "Home"
+      }]
     }
   }
 });
-function registerImage(loader, customImageMeta) {
+function registerBreadcrumbLink(loader, customBreadcrumbLinkMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Image, customImageMeta != null ? customImageMeta : imageMeta);
+  doRegisterComponent(BreadcrumbLink, customBreadcrumbLinkMeta != null ? customBreadcrumbLinkMeta : breadcrumbLinkMeta);
 }
-
-var inputMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Input"), {
+var breadcrumbMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Breadcrumb"), {
   props: {
-    size: {
-      type: "choice",
-      options: ["xl", "sm", "md", "lg"]
-    },
-    variant: {
-      type: "choice",
-      options: ["outline", "filled", "flushed", "unstyled"]
+    separator: {
+      type: "string",
+      defaultValue: "/"
     },
-    isDisabled: {
-      type: "boolean"
-    },
-    isInvalid: {
-      type: "boolean"
-    },
-    isReadOnly: {
-      type: "boolean"
-    },
-    isRequired: {
-      type: "boolean"
-    },
-    errorBorderColor: {
+    spacing: {
       type: "string",
-      defaultValue: "red.500"
+      defaultValue: "8px"
     },
-    focusBorderColor: {
-      type: "string",
-      defaultValue: "blue.500"
+    children: {
+      type: "slot",
+      defaultValue: [{
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbItem"),
+        props: {
+          children: {
+            type: "component",
+            name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbLink"),
+            props: {
+              children: {
+                type: "text",
+                value: "Home"
+              }
+            }
+          }
+        }
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbItem"),
+        props: {
+          children: {
+            type: "component",
+            name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbLink"),
+            props: {
+              children: {
+                type: "text",
+                value: "Docs"
+              }
+            }
+          }
+        }
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbItem"),
+        props: {
+          isLastChild: true,
+          isCurrentPage: true,
+          children: {
+            type: "component",
+            name: /*#__PURE__*/getPlasmicComponentName("BreadcrumbLink"),
+            props: {
+              children: {
+                type: "text",
+                value: "Breadcrumb"
+              }
+            }
+          }
+        }
+      }]
     }
   }
 });
-function registerInput(loader, customInputMeta) {
+function registerBreadcrumb(loader, customBreadcrumbMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Input, customInputMeta != null ? customInputMeta : inputMeta);
+  doRegisterComponent(Breadcrumb, customBreadcrumbMeta != null ? customBreadcrumbMeta : breadcrumbMeta);
 }
-
-var kbdMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Kbd", undefined, {
-  displayName: "Chakra-UI Keyboard Key"
-}), {
+var breadcrumbSeparatorMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("BreadcrumbSeparator", "Breadcrumb"), {
   props: {
     children: {
       type: "slot",
-      defaultValue: [{
+      defaultValue: {
         type: "text",
-        value: "⌘"
-      }]
+        value: "/"
+      }
     }
   }
 });
-function registerKbd(loader, customKbdMeta) {
+function registerBreadcrumbSeparator(loader, customBreadcrumbSeparatorMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Kbd, customKbdMeta != null ? customKbdMeta : kbdMeta);
+  doRegisterComponent(BreadcrumbSeparator, customBreadcrumbSeparatorMeta != null ? customBreadcrumbSeparatorMeta : breadcrumbSeparatorMeta);
 }
 
-var numberInputMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("NumberInput"), {
+var buttonGroupMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("ButtonGroup"), {
   props: {
-    size: {
-      type: "choice",
-      options: ["xl", "sm", "md", "lg"]
-    },
-    variant: {
+    colorScheme: {
       type: "choice",
-      options: ["outline", "filled", "flushed", "unstyled"]
+      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"]
     },
-    inputMode: {
+    size: {
       type: "choice",
-      options: ["text", "search", "none", "tel", "url", "email", "numeric", "decimal"]
-    },
-    format: {
-      type: "string"
-    },
-    step: {
-      type: "number"
-    },
-    precision: {
-      type: "number"
-    },
-    max: {
-      type: "number"
-    },
-    min: {
-      type: "number"
-    },
-    errorBorderColor: {
-      type: "string",
-      defaultValue: "red.500"
-    },
-    focusBorderColor: {
-      type: "string",
-      defaultValue: "blue.500"
+      options: ["xl", "sm", "md", "lg"],
+      defaultValue: "md"
     },
-    allowMouseWheel: {
-      type: "boolean"
+    isAttached: {
+      type: "boolean",
+      defaultValue: false
     },
     isDisabled: {
-      type: "boolean"
-    },
-    isInvalid: {
-      type: "boolean"
-    },
-    isReadOnly: {
-      type: "boolean"
+      type: "boolean",
+      defaultValue: false
     },
-    isRequired: {
-      type: "boolean"
+    spacing: {
+      type: "string",
+      defaultValue: "0.5rem"
     },
     children: {
       type: "slot",
       defaultValue: [{
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("NumberInputField")
+        name: /*#__PURE__*/getPlasmicComponentName("Button"),
+        props: {
+          children: {
+            type: "text",
+            value: "Button 1"
+          }
+        }
       }, {
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("NumberInputStepper")
+        name: /*#__PURE__*/getPlasmicComponentName("Button"),
+        props: {
+          children: {
+            type: "text",
+            value: "Button 2"
+          }
+        }
       }]
     }
   }
 });
-function registerNumberInput(loader, customNumberInputMeta) {
+function registerButtonGroup(loader, customButtonGroupMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(NumberInput, customNumberInputMeta != null ? customNumberInputMeta : numberInputMeta);
+  doRegisterComponent(ButtonGroup, customButtonGroupMeta != null ? customButtonGroupMeta : buttonGroupMeta);
 }
-var numberInputStepperMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("NumberInputStepper", "NumberInput"), {
+var buttonMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Button", "ButtonGroup"), {
   props: {
+    size: {
+      type: "choice",
+      options: ["xl", "sm", "md", "lg"]
+    },
+    variant: {
+      type: "choice",
+      options: ["ghost", "outline", "solid", "link", "unstyled"],
+      defaultValue: "solid"
+    },
+    colorScheme: {
+      type: "choice",
+      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"]
+    },
+    iconSpacing: "number",
+    isActive: {
+      type: "boolean"
+    },
+    isDisabled: {
+      type: "boolean"
+    },
+    isLoading: {
+      type: "boolean"
+    },
     children: {
       type: "slot",
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("NumberIncrementStepper"), /*#__PURE__*/getPlasmicComponentName("NumberDecrementStepper")],
-      defaultValue: [{
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("NumberIncrementStepper")
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("NumberDecrementStepper")
-      }]
+      defaultValue: {
+        type: "text",
+        value: "Button"
+      }
     }
   }
 });
-function registerNumberInputStepper(loader, customNumberInputStepperMeta) {
-  var doRegisterComponent = function doRegisterComponent() {
-    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
-  };
-
-  doRegisterComponent(NumberInputStepper, customNumberInputStepperMeta != null ? customNumberInputStepperMeta : numberInputStepperMeta);
-}
-var numberDecrementStepperMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("NumberDecrementStepper", "NumberInputStepper"), {
-  props: {}
-});
-function registerNumberDecrementStepper(loader, customNumberDecrementStepperMeta) {
+function registerButton(loader, customButtonMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(NumberDecrementStepper, customNumberDecrementStepperMeta != null ? customNumberDecrementStepperMeta : numberDecrementStepperMeta);
+  doRegisterComponent(Button, customButtonMeta != null ? customButtonMeta : buttonMeta);
 }
-var numberIncrementStepperMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("NumberIncrementStepper", "NumberInputStepper"), {
-  props: {}
-});
-function registerNumberIncrementStepper(loader, customNumberIncrementStepperMeta) {
-  var doRegisterComponent = function doRegisterComponent() {
-    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
-  };
 
-  doRegisterComponent(NumberIncrementStepper, customNumberIncrementStepperMeta != null ? customNumberIncrementStepperMeta : numberIncrementStepperMeta);
-}
-var numberInputFieldMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("NumberInputField", "NumberInput"), {
-  props: {}
+var chakraProviderMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("ChakraProvider"), {
+  props: {
+    theme: "object"
+  }
 });
-function registerNumberInputField(loader, customNumberInputFieldMeta) {
+function registerChakraProvider(loader, customChakraProviderMeta) {
   var doRegisterComponent = function doRegisterComponent() {
-    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+    return loader ? loader.registerGlobalContext.apply(loader, arguments) : registerGlobalContext.apply(void 0, arguments);
   };
 
-  doRegisterComponent(NumberInputField, customNumberInputFieldMeta != null ? customNumberInputFieldMeta : numberInputFieldMeta);
+  doRegisterComponent(ChakraProvider, customChakraProviderMeta != null ? customChakraProviderMeta : chakraProviderMeta);
 }
 
-var pinInputMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PinInput"), {
+var checkboxMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Checkbox", "CheckboxGroup"), {
   props: {
+    colorScheme: {
+      type: "choice",
+      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"],
+      defaultValue: "blue"
+    },
     size: {
       type: "choice",
       options: ["xl", "sm", "md", "lg"]
     },
-    type: {
-      type: "choice",
-      options: ["number", "alphanumeric"]
+    value: {
+      type: "string"
     },
-    variant: {
-      type: "choice",
-      options: ["outline", "filled", "flushed", "unstyled"]
+    spacing: {
+      type: "string",
+      defaultValue: "0.5rem"
     },
-    mask: {
-      type: "boolean",
-      description: "Whether the pin input's value should be masked like 'type=password'."
+    isChecked: {
+      type: "boolean"
     },
-    manageFocus: {
-      type: "boolean",
-      defaultValue: true,
-      description: "Whether the pin input should move automatically to the next input once filled."
-    },
-    autoFocus: {
-      type: "boolean",
-      description: "Whether the pin input should be focused on mount."
-    },
-    opt: {
-      type: "boolean",
-      description: "autocomplete='one-time-code'"
-    },
-    errorBorderColor: {
-      type: "string",
-      defaultValue: "red.500"
-    },
-    focusBorderColor: {
-      type: "string",
-      defaultValue: "blue.500"
+    isIndeterminate: {
+      type: "boolean"
     },
     isDisabled: {
       type: "boolean"
     },
+    isRequired: {
+      type: "boolean"
+    },
     isInvalid: {
       type: "boolean"
     },
     children: {
       type: "slot",
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("PinInputField")],
-      defaultValue: [{
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("PinInputField")
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("PinInputField")
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("PinInputField")
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("PinInputField")
-      }]
+      defaultValue: {
+        type: "text",
+        value: "Checkbox"
+      }
     }
   }
 });
-function registerPinInput(loader, customPinInputMeta) {
-  var doRegisterComponent = function doRegisterComponent() {
-    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
-  };
-
-  doRegisterComponent(PinInput, customPinInputMeta != null ? customPinInputMeta : pinInputMeta);
-}
-var pinInputFieldMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PinInputField", "PinInput"), {
-  props: {}
-});
-function registerPinInputField(loader, customPinInputFieldMeta) {
+function registerCheckbox(loader, customCheckboxMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(PinInputField, customPinInputFieldMeta != null ? customPinInputFieldMeta : pinInputFieldMeta);
+  doRegisterComponent(Checkbox, customCheckboxMeta != null ? customCheckboxMeta : checkboxMeta);
 }
-
-var popoverMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Popover"), {
+var checkboxGroupMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("CheckboxGroup"), {
   props: {
-    gutter: {
-      type: "number",
-      defaultValue: 8
-    },
-    arrowPadding: "number",
-    arrowShadowColor: {
-      type: "string",
-      defaultValue: "rgba(0, 0, 0, 0.15)"
-    },
-    arrowSize: {
-      type: "number"
-    },
-    offset: {
-      type: "array",
-      defaultValue: [0, 0]
-    },
-    closeDelay: "number",
-    orientation: {
-      type: "choice",
-      options: ["horizontal", "vertical"]
-    },
-    placement: {
-      type: "choice",
-      options: ["top", "bottom", "left", "right"],
-      defaultValue: "bottom"
-    },
-    direction: {
-      type: "choice",
-      options: ["ltr", "rtl"],
-      defaultValue: "ltr"
-    },
-    trigger: {
+    size: {
       type: "choice",
-      options: ["click", "hover"],
-      defaultValue: "click"
-    },
-    isLazy: {
-      type: "boolean"
+      options: ["xl", "sm", "md", "lg"],
+      defaultValue: "md"
     },
-    isOpen: {
+    isDisabled: {
       type: "boolean"
     },
     children: {
       type: "slot",
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Checkbox")],
       defaultValue: [{
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("PopoverTrigger")
+        name: /*#__PURE__*/getPlasmicComponentName("Checkbox"),
+        props: {
+          value: "1",
+          children: {
+            type: "text",
+            value: "Checkbox 1"
+          }
+        }
       }, {
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("PopoverContent")
+        name: /*#__PURE__*/getPlasmicComponentName("Checkbox"),
+        props: {
+          value: "2",
+          children: {
+            type: "text",
+            value: "Checkbox 2"
+          }
+        }
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("Checkbox"),
+        props: {
+          value: "3",
+          children: {
+            type: "text",
+            value: "Checkbox 3"
+          }
+        }
       }]
     }
   }
 });
-function registerPopover(loader, customPopoverMeta) {
+function registerCheckboxGroup(loader, customCheckboxGroupMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Popover, customPopoverMeta != null ? customPopoverMeta : popoverMeta);
+  doRegisterComponent(CheckboxGroup, customCheckboxGroupMeta != null ? customCheckboxGroupMeta : checkboxGroupMeta);
 }
-var popoverContentMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PopoverContent", "Popover"), {
+
+var codeMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Code"), {
   props: {
+    colorScheme: {
+      type: "choice",
+      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"],
+      defaultValue: "gray"
+    },
+    variant: {
+      type: "choice",
+      options: ["solid", "subtle", "outline"],
+      defaultValue: "subtle"
+    },
     children: {
       type: "slot",
       defaultValue: [{
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("PopoverArrow")
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("PopoverCloseButton")
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("PopoverHeader"),
-        props: {
-          children: {
-            type: "text",
-            value: "Confirmation!"
-          }
-        }
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("PopoverBody"),
-        props: {
-          children: {
-            type: "text",
-            value: "Are you sure you want to have that milkshake?"
-          }
-        }
+        type: "text",
+        value: "Code"
       }]
     }
   }
 });
-function registerPopoverContent(loader, customPopoverContentMeta) {
+function registerCode(loader, customCodeMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(PopoverContent, customPopoverContentMeta != null ? customPopoverContentMeta : popoverContentMeta);
+  doRegisterComponent(Code, customCodeMeta != null ? customCodeMeta : codeMeta);
 }
-var popoverArrowMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PopoverArrow", "PopoverContent"), {
-  props: {}
+
+var dividerMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Divider"), {
+  props: {
+    orientation: {
+      type: "choice",
+      options: ["vertical", "horizontal"]
+    },
+    variant: {
+      type: "choice",
+      options: ["solid", "dashed"]
+    }
+  }
 });
-function registerPopoverArrow(loader, customPopoverArrowMeta) {
+function registerDivider(loader, customDividerMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(PopoverArrow, customPopoverArrowMeta != null ? customPopoverArrowMeta : popoverArrowMeta);
+  doRegisterComponent(Divider, customDividerMeta != null ? customDividerMeta : dividerMeta);
 }
-var popoverCloseButtonMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PopoverCloseButton", "PopoverContent"), {
-  props: {}
+
+var formControlMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("FormControl"), {
+  props: {
+    label: "string",
+    isDisabled: "boolean",
+    isInvalid: "boolean",
+    isRequired: "boolean",
+    isreadOnly: "boolean",
+    children: {
+      type: "slot",
+      defaultValue: [{
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("FormLabel")
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("Input")
+      }]
+    }
+  }
 });
-function registerPopoverCloseButton(loader, customPopoverCloseButtonMeta) {
+function registerFormControl(loader, customFormControlMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(PopoverCloseButton, customPopoverCloseButtonMeta != null ? customPopoverCloseButtonMeta : popoverCloseButtonMeta);
+  doRegisterComponent(FormControl, customFormControlMeta != null ? customFormControlMeta : formControlMeta);
 }
-var popoverHeaderMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PopoverHeader", "PopoverContent"), {
+var formLabelMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("FormLabel", "FormControl"), {
   props: {
     children: {
       type: "slot",
       defaultValue: {
         type: "text",
-        value: "Confirmation!"
+        value: "Label",
+        styles: {
+          display: "inline-block",
+          width: "auto"
+        }
       }
     }
   }
 });
-function registerPopoverHeader(loader, customPopoverHeaderMeta) {
+function registerFormLabel(loader, customFormLabelMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(PopoverHeader, customPopoverHeaderMeta != null ? customPopoverHeaderMeta : popoverHeaderMeta);
+  doRegisterComponent(FormLabel, customFormLabelMeta != null ? customFormLabelMeta : formLabelMeta);
 }
-var popoverBodyMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PopoverBody", "PopoverContent"), {
+var formHelperTextMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("FormHelperText", "FormControl"), {
   props: {
     children: {
       type: "slot",
       defaultValue: {
         type: "text",
-        value: "Are you sure you want to have that milkshake?"
+        value: "We'll never share your email."
       }
     }
   }
 });
-function registerPopoverBody(loader, customPopoverBodyMeta) {
+function registerFormHelperText(loader, customFormHelperTextMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(PopoverBody, customPopoverBodyMeta != null ? customPopoverBodyMeta : popoverBodyMeta);
+  doRegisterComponent(FormHelperText, customFormHelperTextMeta != null ? customFormHelperTextMeta : formHelperTextMeta);
 }
-var popoverTriggerMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PopoverTrigger", "Popover"), {
+var formErrorMessageMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("FormErrorMessage", "FormControl"), {
   props: {
     children: {
       type: "slot",
       defaultValue: {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Button"),
-        props: {
-          children: {
-            type: "text",
-            value: "Trigger"
-          }
-        }
+        type: "text",
+        value: "This is an error message."
       }
     }
   }
 });
-function registerPopoverTrigger(loader, customPopoverTriggerMeta) {
+function registerFormErrorMessage(loader, customFormErrorMessageMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(PopoverTrigger, customPopoverTriggerMeta != null ? customPopoverTriggerMeta : popoverTriggerMeta);
+  doRegisterComponent(FormErrorMessage, customFormErrorMessageMeta != null ? customFormErrorMessageMeta : formErrorMessageMeta);
 }
 
-var radioGroupMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("RadioGroup"), {
+var headingMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Heading"), {
   props: {
-    value: {
-      type: "string"
+    children: {
+      type: "slot",
+      defaultValue: {
+        type: "text",
+        value: "Basic text writing, including headings, body text, lists, and more."
+      }
     },
     size: {
       type: "choice",
-      options: ["xl", "sm", "md", "lg"]
-    },
-    isDisabled: {
-      type: "boolean"
-    },
-    isInvalid: {
-      type: "boolean"
+      options: ["4xl", "3xl", "2xl", "xl", "lg", "md", "sm", "xs"],
+      defaultValue: "xl"
     },
-    isReadOnly: {
-      type: "boolean"
+    noOfLines: {
+      type: "number",
+      defaultValue: 1
+    }
+  }
+});
+function registerHeading(loader, customHeadingMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(Heading, customHeadingMeta != null ? customHeadingMeta : headingMeta);
+}
+
+var highlightMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Highlight"), {
+  props: {
+    children: {
+      displayName: "text",
+      type: "string",
+      defaultValue: "With the Highlight component, you can spotlight words."
     },
-    isRequired: {
-      type: "boolean"
+    query: {
+      type: "array",
+      defaultValue: ["Spotlight", "words"]
     },
-    children: {
-      type: "slot",
+    styles: {
+      type: "object",
       defaultValue: {
-        type: "hbox",
-        styles: {
-          gap: "12px"
-        },
-        children: [{
-          type: "component",
-          name: /*#__PURE__*/getPlasmicComponentName("Radio"),
-          props: {
-            value: "1",
-            children: {
-              type: "text",
-              value: "Radio 1"
-            }
-          }
-        }, {
-          type: "component",
-          name: /*#__PURE__*/getPlasmicComponentName("Radio"),
-          props: {
-            value: "2",
-            children: {
-              type: "text",
-              value: "Radio 2"
-            }
-          }
-        }, {
-          type: "component",
-          name: /*#__PURE__*/getPlasmicComponentName("Radio"),
-          props: {
-            value: "3",
-            children: {
-              type: "text",
-              value: "Radio 3"
-            }
-          }
-        }]
+        backgroundColor: "orange.100",
+        px: "0.3em",
+        py: "0.1em",
+        borderRadius: "0.3em"
       }
     }
   }
 });
-function registerRadioGroup(loader, customRadioGroupMeta) {
+function registerHighlight(loader, customHighlightMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(RadioGroup, customRadioGroupMeta != null ? customRadioGroupMeta : radioGroupMeta);
+  doRegisterComponent(Highlight, customHighlightMeta != null ? customHighlightMeta : highlightMeta);
 }
-var radioMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Radio", "RadioGroup"), {
+
+var imageMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Image"), {
   props: {
-    value: {
-      type: "string"
+    src: {
+      type: "string",
+      defaultValue: "https://bit.ly/naruto-sage"
+    },
+    fallbackSrc: {
+      type: "string",
+      defaultValue: "https://via.placeholder.com/150"
     },
+    alt: {
+      type: "string",
+      defaultValueHint: "name of the image"
+    },
+    loading: {
+      type: "choice",
+      options: ["lazy", "eager"]
+    }
+  }
+});
+function registerImage(loader, customImageMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(Image, customImageMeta != null ? customImageMeta : imageMeta);
+}
+
+var inputMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Input"), {
+  props: {
     size: {
       type: "choice",
       options: ["xl", "sm", "md", "lg"]
     },
-    spacing: {
-      type: "string",
-      defaultValue: "0.5rem"
-    },
-    isChecked: {
-      type: "boolean"
+    variant: {
+      type: "choice",
+      options: ["outline", "filled", "flushed", "unstyled"]
     },
     isDisabled: {
       type: "boolean"
@@ -1063,41 +968,84 @@ var radioMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImport
     isRequired: {
       type: "boolean"
     },
+    errorBorderColor: {
+      type: "string",
+      defaultValue: "red.500"
+    },
+    focusBorderColor: {
+      type: "string",
+      defaultValue: "blue.500"
+    }
+  }
+});
+function registerInput(loader, customInputMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(Input, customInputMeta != null ? customInputMeta : inputMeta);
+}
+
+var kbdMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Kbd", undefined, {
+  displayName: "Chakra-UI Keyboard Key"
+}), {
+  props: {
     children: {
       type: "slot",
       defaultValue: [{
         type: "text",
-        value: "Radio"
+        value: "⌘"
       }]
     }
   }
 });
-function registerRadio(loader, customRadioMeta) {
+function registerKbd(loader, customKbdMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Radio, customRadioMeta != null ? customRadioMeta : radioMeta);
+  doRegisterComponent(Kbd, customKbdMeta != null ? customKbdMeta : kbdMeta);
 }
 
-var selectMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Select"), {
+var numberInputMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("NumberInput"), {
   props: {
     size: {
       type: "choice",
-      options: ["lg", "md", "sm", "xs"],
-      defaultValue: "md"
+      options: ["xl", "sm", "md", "lg"]
     },
     variant: {
       type: "choice",
-      options: ["outline", "filled", "flushed", "unstyled"],
-      defaultValue: "outline"
+      options: ["outline", "filled", "flushed", "unstyled"]
     },
-    placeholder: {
+    inputMode: {
+      type: "choice",
+      options: ["text", "search", "none", "tel", "url", "email", "numeric", "decimal"]
+    },
+    format: {
       type: "string"
     },
+    step: {
+      type: "number"
+    },
+    precision: {
+      type: "number"
+    },
+    max: {
+      type: "number"
+    },
+    min: {
+      type: "number"
+    },
     errorBorderColor: {
       type: "string",
-      defaultValueHint: "red.500"
+      defaultValue: "red.500"
+    },
+    focusBorderColor: {
+      type: "string",
+      defaultValue: "blue.500"
+    },
+    allowMouseWheel: {
+      type: "boolean"
     },
     isDisabled: {
       type: "boolean"
@@ -1108,1277 +1056,1351 @@ var selectMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImpor
     isReadOnly: {
       type: "boolean"
     },
-    isRequred: {
+    isRequired: {
       type: "boolean"
     },
     children: {
       type: "slot",
       defaultValue: [{
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Option"),
-        props: {
-          children: {
-            type: "text",
-            value: "Option 01"
-          }
-        }
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Option"),
-        props: {
-          children: {
-            type: "text",
-            value: "Option 02"
-          }
-        }
+        name: /*#__PURE__*/getPlasmicComponentName("NumberInputField")
       }, {
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Option"),
-        props: {
-          children: {
-            type: "text",
-            value: "Option 03"
-          }
-        }
+        name: /*#__PURE__*/getPlasmicComponentName("NumberInputStepper")
       }]
     }
   }
 });
-function registerSelect(loader, customSelectMeta) {
+function registerNumberInput(loader, customNumberInputMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Select, customSelectMeta != null ? customSelectMeta : selectMeta);
-}
-function Option(props) {
-  var value = props.value,
-      className = props.className,
-      children = props.children;
-  return React.createElement("option", {
-    className: className,
-    value: value
-  }, children);
+  doRegisterComponent(NumberInput, customNumberInputMeta != null ? customNumberInputMeta : numberInputMeta);
 }
-var optionMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Option", "Select", {
-  importPath: "@plasmicpkgs/plasmic-chakra-ui"
-}), {
+var numberInputStepperMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("NumberInputStepper", "NumberInput"), {
   props: {
-    value: "string",
     children: {
       type: "slot",
-      defaultValue: {
-        type: "text",
-        value: "Option"
-      }
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("NumberIncrementStepper"), /*#__PURE__*/getPlasmicComponentName("NumberDecrementStepper")],
+      defaultValue: [{
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("NumberIncrementStepper")
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("NumberDecrementStepper")
+      }]
     }
   }
 });
-function registerOption(loader, customOptionMeta) {
+function registerNumberInputStepper(loader, customNumberInputStepperMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Option, customOptionMeta != null ? customOptionMeta : optionMeta);
+  doRegisterComponent(NumberInputStepper, customNumberInputStepperMeta != null ? customNumberInputStepperMeta : numberInputStepperMeta);
 }
-
-var statMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Stat"), {
-  props: {
-    children: {
-      type: "slot",
-      defaultValue: [{
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("StatLabel"),
-        props: {
-          children: {
-            type: "text",
-            value: "Collected Fees"
-          }
-        }
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("StatNumber"),
-        props: {
-          children: {
-            type: "text",
-            value: "£345,670"
-          }
-        }
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("StatHelpText"),
-        props: {
-          children: {
-            type: "hbox",
-            styles: {
-              alignItems: "center",
-              padding: "0px"
-            },
-            children: [{
-              type: "component",
-              name: /*#__PURE__*/getPlasmicComponentName("StatArrow"),
-              props: {
-                type: "increase"
-              }
-            }, {
-              type: "text",
-              value: "Last 7 days"
-            }]
-          }
-        }
-      }]
-    }
-  }
+var numberDecrementStepperMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("NumberDecrementStepper", "NumberInputStepper"), {
+  props: {}
 });
-function registerStat(loader, customStatMeta) {
+function registerNumberDecrementStepper(loader, customNumberDecrementStepperMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Stat, customStatMeta != null ? customStatMeta : statMeta);
+  doRegisterComponent(NumberDecrementStepper, customNumberDecrementStepperMeta != null ? customNumberDecrementStepperMeta : numberDecrementStepperMeta);
 }
-var statHelpTextMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("StatHelpText", "Stat"), {
-  props: {
-    children: {
-      type: "slot",
-      defaultValue: [{
-        type: "text",
-        value: "StatHelpText"
-      }]
-    }
-  }
+var numberIncrementStepperMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("NumberIncrementStepper", "NumberInputStepper"), {
+  props: {}
 });
-function registerStatHelpText(loader, customStatHelpTextMeta) {
+function registerNumberIncrementStepper(loader, customNumberIncrementStepperMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(StatHelpText, customStatHelpTextMeta != null ? customStatHelpTextMeta : statHelpTextMeta);
+  doRegisterComponent(NumberIncrementStepper, customNumberIncrementStepperMeta != null ? customNumberIncrementStepperMeta : numberIncrementStepperMeta);
 }
-var statArrowMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("StatArrow", "Stat"), {
-  props: {
-    type: {
-      type: "choice",
-      options: ["increase", "decrease"]
-    }
-  }
+var numberInputFieldMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("NumberInputField", "NumberInput"), {
+  props: {}
 });
-function registerStatArrow(loader, customStatArrowMeta) {
+function registerNumberInputField(loader, customNumberInputFieldMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(StatArrow, customStatArrowMeta != null ? customStatArrowMeta : statArrowMeta);
+  doRegisterComponent(NumberInputField, customNumberInputFieldMeta != null ? customNumberInputFieldMeta : numberInputFieldMeta);
 }
-var statNumberMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("StatNumber", "Stat"), {
+
+var pinInputMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PinInput"), {
   props: {
+    size: {
+      type: "choice",
+      options: ["xl", "sm", "md", "lg"]
+    },
+    type: {
+      type: "choice",
+      options: ["number", "alphanumeric"]
+    },
+    variant: {
+      type: "choice",
+      options: ["outline", "filled", "flushed", "unstyled"]
+    },
+    mask: {
+      type: "boolean",
+      description: "Whether the pin input's value should be masked like 'type=password'."
+    },
+    manageFocus: {
+      type: "boolean",
+      defaultValue: true,
+      description: "Whether the pin input should move automatically to the next input once filled."
+    },
+    autoFocus: {
+      type: "boolean",
+      description: "Whether the pin input should be focused on mount."
+    },
+    opt: {
+      type: "boolean",
+      description: "autocomplete='one-time-code'"
+    },
+    errorBorderColor: {
+      type: "string",
+      defaultValue: "red.500"
+    },
+    focusBorderColor: {
+      type: "string",
+      defaultValue: "blue.500"
+    },
+    isDisabled: {
+      type: "boolean"
+    },
+    isInvalid: {
+      type: "boolean"
+    },
     children: {
       type: "slot",
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("PinInputField")],
       defaultValue: [{
-        type: "text",
-        value: "£345,670"
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("PinInputField")
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("PinInputField")
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("PinInputField")
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("PinInputField")
       }]
     }
   }
 });
-function registerStatNumber(loader, customStatNumberMeta) {
+function registerPinInput(loader, customPinInputMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(StatNumber, customStatNumberMeta != null ? customStatNumberMeta : statNumberMeta);
+  doRegisterComponent(PinInput, customPinInputMeta != null ? customPinInputMeta : pinInputMeta);
 }
-var statLabelMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("StatLabel", "Stat"), {
-  props: {
-    children: {
-      type: "slot",
-      defaultValue: [{
-        type: "text",
-        value: "StatLabel"
-      }]
-    }
-  }
+var pinInputFieldMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PinInputField", "PinInput"), {
+  props: {}
 });
-function registerStatLabel(loader, customStatLabelMeta) {
+function registerPinInputField(loader, customPinInputFieldMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(StatLabel, customStatLabelMeta != null ? customStatLabelMeta : statLabelMeta);
+  doRegisterComponent(PinInputField, customPinInputFieldMeta != null ? customPinInputFieldMeta : pinInputFieldMeta);
 }
 
-var switchMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Switch"), {
+var popoverMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Popover"), {
   props: {
-    isChecked: "boolean",
-    colorScheme: {
-      type: "choice",
-      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"],
-      defaultValue: "blue"
-    },
-    size: {
-      type: "choice",
-      options: ["sm", "md", "lg"],
-      defaultValue: "md"
+    gutter: {
+      type: "number",
+      defaultValue: 8
     },
-    spacing: {
+    arrowPadding: "number",
+    arrowShadowColor: {
       type: "string",
-      defaultValue: "0.5rem"
+      defaultValue: "rgba(0, 0, 0, 0.15)"
     },
-    id: "string",
-    isDisabled: "boolean",
-    isInvalid: "boolean",
-    isReadOnly: "boolean",
-    isRequired: "boolean"
-  }
-});
-function registerSwitch(loader, customSwitchMeta) {
-  var doRegisterComponent = function doRegisterComponent() {
-    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
-  };
-
-  doRegisterComponent(Switch, customSwitchMeta != null ? customSwitchMeta : switchMeta);
-}
-
-var tableMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Table", "TableContainer"), {
-  props: {
-    colorScheme: {
+    arrowSize: {
+      type: "number"
+    },
+    offset: {
+      type: "array",
+      defaultValue: [0, 0]
+    },
+    closeDelay: "number",
+    orientation: {
       type: "choice",
-      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"],
-      defaultValue: "gray"
+      options: ["horizontal", "vertical"]
     },
-    size: {
+    placement: {
       type: "choice",
-      options: ["sm", "md", "lg"],
-      defaultValue: "md"
+      options: ["top", "bottom", "left", "right"],
+      defaultValue: "bottom"
     },
-    variant: {
+    direction: {
       type: "choice",
-      options: ["simple", "striped", "unstyled"],
-      defaultValue: "simple"
+      options: ["ltr", "rtl"],
+      defaultValue: "ltr"
+    },
+    trigger: {
+      type: "choice",
+      options: ["click", "hover"],
+      defaultValue: "click"
+    },
+    isLazy: {
+      type: "boolean"
+    },
+    isOpen: {
+      type: "boolean"
     },
     children: {
-      type: "slot"
+      type: "slot",
+      defaultValue: [{
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("PopoverTrigger")
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("PopoverContent")
+      }]
     }
   }
 });
-function registerTable(loader, customTableMeta) {
+function registerPopover(loader, customPopoverMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Table, customTableMeta != null ? customTableMeta : tableMeta);
+  doRegisterComponent(Popover, customPopoverMeta != null ? customPopoverMeta : popoverMeta);
 }
-var tableCaptionMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("TableCaption", "Table"), {
+var popoverContentMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PopoverContent", "Popover"), {
   props: {
-    placement: {
-      type: "choice",
-      options: ["top", "bottom"],
-      defaultValue: "bottom"
-    },
     children: {
       type: "slot",
-      defaultValue: {
-        type: "text",
-        value: "Imperial to metric conversion factors"
-      }
+      defaultValue: [{
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("PopoverArrow")
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("PopoverCloseButton")
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("PopoverHeader"),
+        props: {
+          children: {
+            type: "text",
+            value: "Confirmation!"
+          }
+        }
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("PopoverBody"),
+        props: {
+          children: {
+            type: "text",
+            value: "Are you sure you want to have that milkshake?"
+          }
+        }
+      }]
     }
   }
 });
-function registerTableCaption(loader, customTableCaptionMeta) {
+function registerPopoverContent(loader, customPopoverContentMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(TableCaption, customTableCaptionMeta != null ? customTableCaptionMeta : tableCaptionMeta);
+  doRegisterComponent(PopoverContent, customPopoverContentMeta != null ? customPopoverContentMeta : popoverContentMeta);
 }
-var theadMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Thead", "Table"), {
-  props: {
-    children: {
-      type: "slot",
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Th"), /*#__PURE__*/getPlasmicComponentName("Tr")]
-    }
-  }
+var popoverArrowMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PopoverArrow", "PopoverContent"), {
+  props: {}
 });
-function registerThead(loader, customTheadMeta) {
+function registerPopoverArrow(loader, customPopoverArrowMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Thead, customTheadMeta != null ? customTheadMeta : theadMeta);
+  doRegisterComponent(PopoverArrow, customPopoverArrowMeta != null ? customPopoverArrowMeta : popoverArrowMeta);
 }
-var tbodyMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Tbody", "Table"), {
-  props: {
-    children: {
-      type: "slot",
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Td"), /*#__PURE__*/getPlasmicComponentName("Tr")]
-    }
-  }
+var popoverCloseButtonMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PopoverCloseButton", "PopoverContent"), {
+  props: {}
 });
-function registerTbody(loader, customTbodyMeta) {
+function registerPopoverCloseButton(loader, customPopoverCloseButtonMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Tbody, customTbodyMeta != null ? customTbodyMeta : tbodyMeta);
+  doRegisterComponent(PopoverCloseButton, customPopoverCloseButtonMeta != null ? customPopoverCloseButtonMeta : popoverCloseButtonMeta);
 }
-var trMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Tr", "Table"), {
+var popoverHeaderMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PopoverHeader", "PopoverContent"), {
   props: {
     children: {
       type: "slot",
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Td"), /*#__PURE__*/getPlasmicComponentName("Th")]
+      defaultValue: {
+        type: "text",
+        value: "Confirmation!"
+      }
     }
   }
 });
-function registerTr(loader, customTrMeta) {
+function registerPopoverHeader(loader, customPopoverHeaderMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Tr, customTrMeta != null ? customTrMeta : trMeta);
+  doRegisterComponent(PopoverHeader, customPopoverHeaderMeta != null ? customPopoverHeaderMeta : popoverHeaderMeta);
 }
-var tdMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Td", "Tr"), {
+var popoverBodyMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PopoverBody", "PopoverContent"), {
   props: {
-    isNumeric: "boolean",
     children: {
       type: "slot",
       defaultValue: {
         type: "text",
-        value: "Table Cell"
+        value: "Are you sure you want to have that milkshake?"
       }
     }
   }
 });
-function registerTd(loader, customTdMeta) {
+function registerPopoverBody(loader, customPopoverBodyMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Td, customTdMeta != null ? customTdMeta : tdMeta);
+  doRegisterComponent(PopoverBody, customPopoverBodyMeta != null ? customPopoverBodyMeta : popoverBodyMeta);
 }
-var thMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Th", "Tr"), {
+var popoverTriggerMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("PopoverTrigger", "Popover"), {
   props: {
-    isNumeric: "boolean",
     children: {
       type: "slot",
       defaultValue: {
-        type: "text",
-        value: "Table Cell"
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("Button"),
+        props: {
+          children: {
+            type: "text",
+            value: "Trigger"
+          }
+        }
       }
     }
   }
 });
-function registerTh(loader, customThMeta) {
+function registerPopoverTrigger(loader, customPopoverTriggerMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Th, customThMeta != null ? customThMeta : thMeta);
+  doRegisterComponent(PopoverTrigger, customPopoverTriggerMeta != null ? customPopoverTriggerMeta : popoverTriggerMeta);
 }
-var tableContainerMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("TableContainer"), {
+
+var progressMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Progress"), {
   props: {
-    overflowX: {
+    colorScheme: {
       type: "choice",
-      options: ["auto", "scroll", "hidden", "visible"]
+      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"],
+      defaultValue: "blue"
     },
-    overflowY: {
+    size: {
       type: "choice",
-      options: ["auto", "scroll", "hidden", "visible"]
+      options: ["xs", "sm", "md", "lg"],
+      defaultValue: "md"
     },
-    whiteSpace: {
-      type: "choice",
-      options: ["normal", "nowrap", "pre", "pre-line", "pre-wrap"]
+    max: {
+      type: "number",
+      defaultValue: 100
     },
-    children: {
-      type: "slot",
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Table")],
-      defaultValue: {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Table"),
-        props: {
-          children: [{
-            type: "component",
-            name: /*#__PURE__*/getPlasmicComponentName("Thead"),
-            props: {
-              children: {
-                type: "component",
-                name: /*#__PURE__*/getPlasmicComponentName("Tr"),
-                props: {
-                  children: [{
-                    type: "component",
-                    name: /*#__PURE__*/getPlasmicComponentName("Th"),
-                    props: {
-                      children: {
-                        type: "text",
-                        value: "TO CONVERT"
-                      }
-                    }
-                  }, {
-                    type: "component",
-                    name: /*#__PURE__*/getPlasmicComponentName("Th"),
-                    props: {
-                      children: {
-                        type: "text",
-                        value: "INTO"
-                      }
-                    }
-                  }, {
-                    type: "component",
-                    name: /*#__PURE__*/getPlasmicComponentName("Th"),
-                    props: {
-                      children: {
-                        type: "text",
-                        value: "MULTIPLY BY"
-                      }
-                    }
-                  }]
-                }
-              }
-            }
-          }, {
-            type: "component",
-            name: /*#__PURE__*/getPlasmicComponentName("Tbody"),
-            props: {
-              children: [{
-                type: "component",
-                name: /*#__PURE__*/getPlasmicComponentName("Tr"),
-                props: {
-                  children: [{
-                    type: "component",
-                    name: /*#__PURE__*/getPlasmicComponentName("Td"),
-                    props: {
-                      children: {
-                        type: "text",
-                        value: "inches"
-                      }
-                    }
-                  }, {
-                    type: "component",
-                    name: /*#__PURE__*/getPlasmicComponentName("Td"),
-                    props: {
-                      children: {
-                        type: "text",
-                        value: "millimetres (mm)"
-                      }
-                    }
-                  }, {
-                    type: "component",
-                    name: /*#__PURE__*/getPlasmicComponentName("Td"),
-                    props: {
-                      children: {
-                        type: "text",
-                        value: "25.4"
-                      }
-                    }
-                  }]
-                }
-              }]
-            }
-          }]
-        }
+    min: {
+      type: "number",
+      defaultValue: 0
+    },
+    value: "number",
+    isIndeterminate: {
+      type: "boolean"
+    },
+    hasStripe: {
+      type: "boolean"
+    },
+    isAnimated: {
+      type: "boolean",
+      hidden: function hidden(props) {
+        return !props.hasStripe;
       }
     }
   }
 });
-function registerTableContainer(loader, customTableContainerMeta) {
+function registerProgress(loader, customProgressMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(TableContainer, customTableContainerMeta != null ? customTableContainerMeta : tableContainerMeta);
+  doRegisterComponent(Progress, customProgressMeta != null ? customProgressMeta : progressMeta);
 }
-var tfootMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Tfoot", "Table"), {
+
+var radioGroupMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("RadioGroup"), {
   props: {
+    value: {
+      type: "string"
+    },
+    size: {
+      type: "choice",
+      options: ["xl", "sm", "md", "lg"]
+    },
+    isDisabled: {
+      type: "boolean"
+    },
+    isInvalid: {
+      type: "boolean"
+    },
+    isReadOnly: {
+      type: "boolean"
+    },
+    isRequired: {
+      type: "boolean"
+    },
     children: {
       type: "slot",
-      defaultValue: [{
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Tr"),
-        props: {
-          children: [{
-            type: "component",
-            name: /*#__PURE__*/getPlasmicComponentName("Th"),
-            props: {
-              children: {
-                type: "text",
-                value: "Name"
-              }
+      defaultValue: {
+        type: "hbox",
+        styles: {
+          gap: "12px"
+        },
+        children: [{
+          type: "component",
+          name: /*#__PURE__*/getPlasmicComponentName("Radio"),
+          props: {
+            value: "1",
+            children: {
+              type: "text",
+              value: "Radio 1"
             }
-          }]
-        }
-      }]
+          }
+        }, {
+          type: "component",
+          name: /*#__PURE__*/getPlasmicComponentName("Radio"),
+          props: {
+            value: "2",
+            children: {
+              type: "text",
+              value: "Radio 2"
+            }
+          }
+        }, {
+          type: "component",
+          name: /*#__PURE__*/getPlasmicComponentName("Radio"),
+          props: {
+            value: "3",
+            children: {
+              type: "text",
+              value: "Radio 3"
+            }
+          }
+        }]
+      }
     }
   }
 });
-function registerTfoot(loader, customTfootMeta) {
+function registerRadioGroup(loader, customRadioGroupMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Tfoot, customTfootMeta != null ? customTfootMeta : tfootMeta);
+  doRegisterComponent(RadioGroup, customRadioGroupMeta != null ? customRadioGroupMeta : radioGroupMeta);
 }
-
-var tabListMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("TabList", "Tabs"), {
+var radioMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Radio", "RadioGroup"), {
   props: {
+    value: {
+      type: "string"
+    },
+    size: {
+      type: "choice",
+      options: ["xl", "sm", "md", "lg"]
+    },
+    spacing: {
+      type: "string",
+      defaultValue: "0.5rem"
+    },
+    isChecked: {
+      type: "boolean"
+    },
+    isDisabled: {
+      type: "boolean"
+    },
+    isInvalid: {
+      type: "boolean"
+    },
+    isReadOnly: {
+      type: "boolean"
+    },
+    isRequired: {
+      type: "boolean"
+    },
     children: {
       type: "slot",
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Tab")]
+      defaultValue: [{
+        type: "text",
+        value: "Radio"
+      }]
     }
   }
 });
-function registerTabList(loader, customTabListMeta) {
+function registerRadio(loader, customRadioMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(TabList, customTabListMeta != null ? customTabListMeta : tabListMeta);
+  doRegisterComponent(Radio, customRadioMeta != null ? customRadioMeta : radioMeta);
 }
-var tabsMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Tabs"), {
+
+var selectMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Select"), {
   props: {
-    align: {
+    size: {
       type: "choice",
-      options: ["start", "center", "end"]
+      options: ["lg", "md", "sm", "xs"],
+      defaultValue: "md"
     },
-    colorScheme: {
+    variant: {
       type: "choice",
-      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"]
+      options: ["outline", "filled", "flushed", "unstyled"],
+      defaultValue: "outline"
     },
-    orientation: {
-      type: "choice",
-      options: ["horizontal", "vertical"]
+    placeholder: {
+      type: "string"
     },
-    size: {
-      type: "choice",
-      options: ["sm", "md", "lg"]
+    errorBorderColor: {
+      type: "string",
+      defaultValueHint: "red.500"
     },
-    variant: {
-      type: "choice",
-      options: ["line", "enclosed", "enclosed-colored", "soft-rounded", "solid-rounded", "unstyled"],
-      defaultValue: "line"
+    isDisabled: {
+      type: "boolean"
     },
-    direction: {
-      type: "choice",
-      options: ["ltr", "rtl"]
+    isInvalid: {
+      type: "boolean"
     },
-    index: {
-      type: "number"
+    isReadOnly: {
+      type: "boolean"
+    },
+    isRequred: {
+      type: "boolean"
     },
-    isFitted: "boolean",
-    isLazy: "boolean",
-    isManual: "boolean",
     children: {
       type: "slot",
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("TabList"), /*#__PURE__*/getPlasmicComponentName("TabPanels")],
       defaultValue: [{
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("TabList"),
+        name: /*#__PURE__*/getPlasmicComponentName("Option"),
         props: {
-          children: [{
-            type: "component",
-            name: /*#__PURE__*/getPlasmicComponentName("Tab"),
-            props: {
-              children: {
-                type: "text",
-                value: "Tab 1"
-              }
-            }
-          }, {
-            type: "component",
-            name: /*#__PURE__*/getPlasmicComponentName("Tab"),
-            props: {
-              children: {
-                type: "text",
-                value: "Tab 2"
-              }
-            }
-          }, {
-            type: "component",
-            name: /*#__PURE__*/getPlasmicComponentName("Tab"),
-            props: {
-              children: {
-                type: "text",
-                value: "Tab 3"
-              }
-            }
-          }]
+          children: {
+            type: "text",
+            value: "Option 01"
+          }
         }
       }, {
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("TabPanels"),
+        name: /*#__PURE__*/getPlasmicComponentName("Option"),
         props: {
-          children: [{
-            type: "component",
-            name: /*#__PURE__*/getPlasmicComponentName("TabPanel"),
-            props: {
-              children: {
-                type: "text",
-                value: "Tab 1's Panel Content"
-              }
-            }
-          }, {
-            type: "component",
-            name: /*#__PURE__*/getPlasmicComponentName("TabPanel"),
-            props: {
-              children: {
-                type: "text",
-                value: "Tab 2's Panel Content"
-              }
-            }
-          }, {
-            type: "component",
-            name: /*#__PURE__*/getPlasmicComponentName("TabPanel"),
-            props: {
-              children: {
-                type: "text",
-                value: "Tab 3's Panel Content"
-              }
-            }
-          }]
+          children: {
+            type: "text",
+            value: "Option 02"
+          }
+        }
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("Option"),
+        props: {
+          children: {
+            type: "text",
+            value: "Option 03"
+          }
         }
       }]
     }
   }
 });
-function registerTabs(loader, customTabsMeta) {
+function registerSelect(loader, customSelectMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Tabs, customTabsMeta != null ? customTabsMeta : tabsMeta);
+  doRegisterComponent(Select, customSelectMeta != null ? customSelectMeta : selectMeta);
 }
-var tabMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Tab", "TabList"), {
+function Option(props) {
+  var value = props.value,
+      className = props.className,
+      children = props.children;
+  return React.createElement("option", {
+    className: className,
+    value: value
+  }, children);
+}
+var optionMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Option", "Select", {
+  importPath: "@plasmicpkgs/plasmic-chakra-ui"
+}), {
   props: {
-    id: "string",
-    isDisabled: "boolean",
-    panelId: "string",
+    value: "string",
     children: {
       type: "slot",
       defaultValue: {
         type: "text",
-        value: "Tab"
+        value: "Option"
       }
     }
   }
 });
-function registerTab(loader, customTabMeta) {
+function registerOption(loader, customOptionMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Tab, customTabMeta != null ? customTabMeta : tabMeta);
+  doRegisterComponent(Option, customOptionMeta != null ? customOptionMeta : optionMeta);
 }
-var tabPanelsMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("TabPanels", "Tabs"), {
-  props: {
-    children: {
-      type: "slot",
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("TabPanel")]
-    }
-  }
-});
-function registerTabPanels(loader, customTabPanelsMeta) {
-  var doRegisterComponent = function doRegisterComponent() {
-    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
-  };
 
-  doRegisterComponent(TabPanels, customTabPanelsMeta != null ? customTabPanelsMeta : tabPanelsMeta);
-}
-var tabPanelMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("TabPanel", "TabPanels"), {
+var statMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Stat"), {
   props: {
     children: {
       type: "slot",
-      defaultValue: {
-        type: "text",
-        value: "Tab Panel Content"
-      }
-    }
-  }
-});
-function registerTabPanel(loader, customTabPanelMeta) {
-  var doRegisterComponent = function doRegisterComponent() {
+      defaultValue: [{
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("StatLabel"),
+        props: {
+          children: {
+            type: "text",
+            value: "Collected Fees"
+          }
+        }
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("StatNumber"),
+        props: {
+          children: {
+            type: "text",
+            value: "£345,670"
+          }
+        }
+      }, {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("StatHelpText"),
+        props: {
+          children: {
+            type: "hbox",
+            styles: {
+              alignItems: "center",
+              padding: "0px"
+            },
+            children: [{
+              type: "component",
+              name: /*#__PURE__*/getPlasmicComponentName("StatArrow"),
+              props: {
+                type: "increase"
+              }
+            }, {
+              type: "text",
+              value: "Last 7 days"
+            }]
+          }
+        }
+      }]
+    }
+  }
+});
+function registerStat(loader, customStatMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(TabPanel, customTabPanelMeta != null ? customTabPanelMeta : tabPanelMeta);
+  doRegisterComponent(Stat, customStatMeta != null ? customStatMeta : statMeta);
 }
-
-var textMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Text"), {
+var statHelpTextMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("StatHelpText", "Stat"), {
   props: {
     children: {
       type: "slot",
       defaultValue: [{
         type: "text",
-        value: "Some Text"
+        value: "StatHelpText"
       }]
     }
   }
 });
-function registerText(loader, customTextMeta) {
+function registerStatHelpText(loader, customStatHelpTextMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Text, customTextMeta != null ? customTextMeta : textMeta);
+  doRegisterComponent(StatHelpText, customStatHelpTextMeta != null ? customStatHelpTextMeta : statHelpTextMeta);
 }
-
-var highlightMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Highlight"), {
+var statArrowMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("StatArrow", "Stat"), {
   props: {
-    children: {
-      displayName: "text",
-      type: "string",
-      defaultValue: "With the Highlight component, you can spotlight words."
-    },
-    query: {
-      type: "array",
-      defaultValue: ["Spotlight", "words"]
-    },
-    styles: {
-      type: "object",
-      defaultValue: {
-        backgroundColor: "orange.100",
-        px: "0.3em",
-        py: "0.1em",
-        borderRadius: "0.3em"
-      }
+    type: {
+      type: "choice",
+      options: ["increase", "decrease"]
     }
   }
 });
-function registerHighlight(loader, customHighlightMeta) {
+function registerStatArrow(loader, customStatArrowMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Highlight, customHighlightMeta != null ? customHighlightMeta : highlightMeta);
+  doRegisterComponent(StatArrow, customStatArrowMeta != null ? customStatArrowMeta : statArrowMeta);
 }
-
-var headingMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Heading"), {
+var statNumberMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("StatNumber", "Stat"), {
   props: {
     children: {
       type: "slot",
-      defaultValue: {
+      defaultValue: [{
         type: "text",
-        value: "Basic text writing, including headings, body text, lists, and more."
-      }
-    },
-    size: {
-      type: "choice",
-      options: ["4xl", "3xl", "2xl", "xl", "lg", "md", "sm", "xs"],
-      defaultValue: "xl"
-    },
-    noOfLines: {
-      type: "number",
-      defaultValue: 1
+        value: "£345,670"
+      }]
     }
   }
 });
-function registerHeading(loader, customHeadingMeta) {
+function registerStatNumber(loader, customStatNumberMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Heading, customHeadingMeta != null ? customHeadingMeta : headingMeta);
+  doRegisterComponent(StatNumber, customStatNumberMeta != null ? customStatNumberMeta : statNumberMeta);
 }
-
-var toastMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Toast"), {
+var statLabelMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("StatLabel", "Stat"), {
   props: {
-    title: {
-      type: "string",
-      defaultValue: "Toast Title"
-    },
-    description: {
-      type: "string",
-      defaultValue: "Toast description"
-    },
-    variant: {
-      type: "choice",
-      options: ["solid", "subtle", "left-accent", "top-accent"]
-    },
-    duration: {
-      type: "number",
-      defaultValue: 5000
-    },
-    isClosable: {
-      type: "boolean"
-    },
-    position: {
-      type: "choice",
-      options: ["top", "top-right", "top-left", "bottom", "bottom-right", "bottom-left"]
-    },
-    status: {
-      type: "choice",
-      options: ["info", "success", "warning", "error", "loading"]
+    children: {
+      type: "slot",
+      defaultValue: [{
+        type: "text",
+        value: "StatLabel"
+      }]
     }
   }
 });
-function registerToast(loader, customToastMeta) {
+function registerStatLabel(loader, customStatLabelMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Toast, customToastMeta != null ? customToastMeta : toastMeta);
+  doRegisterComponent(StatLabel, customStatLabelMeta != null ? customStatLabelMeta : statLabelMeta);
 }
 
-var tooltipMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Tooltip"), {
+var switchMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Switch"), {
   props: {
-    children: {
-      type: "slot",
-      defaultValue: {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Button"),
-        props: {
-          children: {
-            type: "text",
-            value: "Hover me"
-          }
-        }
-      }
-    },
-    label: {
-      type: "string",
-      defaultValue: "Hi! I am a tooltip"
-    },
-    placement: {
+    isChecked: "boolean",
+    colorScheme: {
       type: "choice",
-      options: ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"],
-      defaultValue: "bottom"
-    },
-    hasArrow: "boolean",
-    arrowSize: {
-      type: "number",
-      defaultValue: 10
+      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"],
+      defaultValue: "blue"
     },
-    arrowShadowColor: {
-      type: "string"
+    size: {
+      type: "choice",
+      options: ["sm", "md", "lg"],
+      defaultValue: "md"
     },
-    arrowPadding: {
-      type: "number",
-      defaultValue: 8
+    spacing: {
+      type: "string",
+      defaultValue: "0.5rem"
     },
-    defaultIsOpen: "boolean",
+    id: "string",
     isDisabled: "boolean",
-    offset: {
-      type: "array",
-      defaultValue: [0, 0]
-    },
-    closeOnClick: {
-      type: "boolean",
-      defaultValue: true
-    },
-    closeDelay: {
-      type: "number",
-      defaultValue: 0
-    }
+    isInvalid: "boolean",
+    isReadOnly: "boolean",
+    isRequired: "boolean"
   }
 });
-function registerTooltip(loader, customTooltipMeta) {
+function registerSwitch(loader, customSwitchMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Tooltip, customTooltipMeta != null ? customTooltipMeta : tooltipMeta);
+  doRegisterComponent(Switch, customSwitchMeta != null ? customSwitchMeta : switchMeta);
 }
 
-var accordionMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Accordion"), {
+var tableMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Table", "TableContainer"), {
   props: {
-    allowMultiple: {
-      type: "boolean",
-      description: "If true, multiple accordion items can be expanded at the same time."
-    },
-    allowToggle: {
-      type: "boolean",
-      description: "If true, an expanded accordion item can be collapsed again."
+    colorScheme: {
+      type: "choice",
+      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"],
+      defaultValue: "gray"
     },
-    defaultIndex: {
-      type: "number",
-      description: "The index of the accordion item that should be expanded by default."
+    size: {
+      type: "choice",
+      options: ["sm", "md", "lg"],
+      defaultValue: "md"
     },
-    reduceMotion: {
-      type: "boolean",
-      description: "If true, height animation and transitions will be disabled."
+    variant: {
+      type: "choice",
+      options: ["simple", "striped", "unstyled"],
+      defaultValue: "simple"
     },
     children: {
-      type: "slot",
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("AccordionItem")],
-      defaultValue: [{
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("AccordionItem")
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("AccordionItem")
-      }]
+      type: "slot"
     }
   }
 });
-function registerAccordion(loader, customAccordionMeta) {
+function registerTable(loader, customTableMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Accordion, customAccordionMeta != null ? customAccordionMeta : accordionMeta);
+  doRegisterComponent(Table, customTableMeta != null ? customTableMeta : tableMeta);
 }
-var accordionItemMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AccordionItem", "Accordion"), {
+var tableCaptionMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("TableCaption", "Table"), {
   props: {
-    id: {
-      type: "string",
-      description: "The unique id of the accordion item."
-    },
-    isDisabled: {
-      type: "boolean",
-      description: "If true, the accordion item will be disabled."
-    },
-    isFocusable: {
-      type: "boolean",
-      description: "If true, the accordion item will be focusable."
+    placement: {
+      type: "choice",
+      options: ["top", "bottom"],
+      defaultValue: "bottom"
     },
     children: {
       type: "slot",
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("AccordionButton"), /*#__PURE__*/getPlasmicComponentName("AccordionPanel")],
-      defaultValue: [{
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("AccordionButton")
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("AccordionPanel")
-      }]
+      defaultValue: {
+        type: "text",
+        value: "Imperial to metric conversion factors"
+      }
     }
   }
 });
-function registerAccordionItem(loader, customAccordionItemMeta) {
+function registerTableCaption(loader, customTableCaptionMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(AccordionItem, customAccordionItemMeta != null ? customAccordionItemMeta : accordionItemMeta);
+  doRegisterComponent(TableCaption, customTableCaptionMeta != null ? customTableCaptionMeta : tableCaptionMeta);
 }
-var accordionButtonMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AccordionButton", "AccordionItem"), {
+var theadMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Thead", "Table"), {
   props: {
-    _expanded: {
-      type: "object",
-      displayName: "expandedStyle",
-      defaultValueHint: {
-        bg: "orange",
-        color: "white"
-      }
-    },
     children: {
       type: "slot",
-      defaultValue: [{
-        type: "text",
-        value: "Section 1 title",
-        styles: {
-          textAlign: "left"
-        }
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("AccordionIcon")
-      }]
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Th"), /*#__PURE__*/getPlasmicComponentName("Tr")]
     }
   }
 });
-function registerAccordionButton(loader, customAccordionButtonMeta) {
+function registerThead(loader, customTheadMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(AccordionButton, customAccordionButtonMeta != null ? customAccordionButtonMeta : accordionButtonMeta);
+  doRegisterComponent(Thead, customTheadMeta != null ? customTheadMeta : theadMeta);
 }
-var accordionPanelMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AccordionPanel", "AccordionItem"), {
+var tbodyMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Tbody", "Table"), {
   props: {
     children: {
       type: "slot",
-      defaultValue: {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Text"),
-        props: {
-          children: {
-            type: "text",
-            value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-          }
-        }
-      }
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Td"), /*#__PURE__*/getPlasmicComponentName("Tr")]
     }
   }
 });
-function registerAccordionPanel(loader, customAccordionPanelMeta) {
+function registerTbody(loader, customTbodyMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(AccordionPanel, customAccordionPanelMeta != null ? customAccordionPanelMeta : accordionPanelMeta);
+  doRegisterComponent(Tbody, customTbodyMeta != null ? customTbodyMeta : tbodyMeta);
 }
-var accordionIconMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AccordionIcon", "AccordionButton"), {
-  props: {}
+var trMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Tr", "Table"), {
+  props: {
+    children: {
+      type: "slot",
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Td"), /*#__PURE__*/getPlasmicComponentName("Th")]
+    }
+  }
 });
-function registerAccordionIcon(loader, customAccordionIconMeta) {
+function registerTr(loader, customTrMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(AccordionIcon, customAccordionIconMeta != null ? customAccordionIconMeta : accordionIconMeta);
+  doRegisterComponent(Tr, customTrMeta != null ? customTrMeta : trMeta);
 }
+var tdMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Td", "Tr"), {
+  props: {
+    isNumeric: "boolean",
+    children: {
+      type: "slot",
+      defaultValue: {
+        type: "text",
+        value: "Table Cell"
+      }
+    }
+  }
+});
+function registerTd(loader, customTdMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
 
-var avatarBadgeMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AvatarBadge", "Avatar"), {
+  doRegisterComponent(Td, customTdMeta != null ? customTdMeta : tdMeta);
+}
+var thMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Th", "Tr"), {
   props: {
-    boxSize: {
-      type: "string",
-      defaultValue: "1.25em"
-    },
-    bg: {
-      type: "string",
-      defaultValue: "green.500"
-    },
-    borderColor: "string"
+    isNumeric: "boolean",
+    children: {
+      type: "slot",
+      defaultValue: {
+        type: "text",
+        value: "Table Cell"
+      }
+    }
   }
 });
-function registerAvatarBadge(loader, customAvatarBadgeMeta) {
+function registerTh(loader, customThMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(AvatarBadge, customAvatarBadgeMeta != null ? customAvatarBadgeMeta : avatarBadgeMeta);
+  doRegisterComponent(Th, customThMeta != null ? customThMeta : thMeta);
 }
-var avatarMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Avatar", "AvatarGroup"), {
+var tableContainerMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("TableContainer"), {
   props: {
-    name: {
-      type: "string",
-      defaultValue: "Kola Tioluwani"
-    },
-    src: {
-      type: "string",
-      defaultValue: "https://bit.ly/dan-abramov"
+    overflowX: {
+      type: "choice",
+      options: ["auto", "scroll", "hidden", "visible"]
     },
-    size: {
+    overflowY: {
       type: "choice",
-      options: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "full"]
+      options: ["auto", "scroll", "hidden", "visible"]
     },
-    loading: {
+    whiteSpace: {
       type: "choice",
-      options: ["eager", "lazy"]
+      options: ["normal", "nowrap", "pre", "pre-line", "pre-wrap"]
     },
-    showBorder: "boolean",
     children: {
       type: "slot",
-      hidePlaceholder: true,
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("AvatarBadge")],
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Table")],
       defaultValue: {
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("AvatarBadge")
+        name: /*#__PURE__*/getPlasmicComponentName("Table"),
+        props: {
+          children: [{
+            type: "component",
+            name: /*#__PURE__*/getPlasmicComponentName("Thead"),
+            props: {
+              children: {
+                type: "component",
+                name: /*#__PURE__*/getPlasmicComponentName("Tr"),
+                props: {
+                  children: [{
+                    type: "component",
+                    name: /*#__PURE__*/getPlasmicComponentName("Th"),
+                    props: {
+                      children: {
+                        type: "text",
+                        value: "TO CONVERT"
+                      }
+                    }
+                  }, {
+                    type: "component",
+                    name: /*#__PURE__*/getPlasmicComponentName("Th"),
+                    props: {
+                      children: {
+                        type: "text",
+                        value: "INTO"
+                      }
+                    }
+                  }, {
+                    type: "component",
+                    name: /*#__PURE__*/getPlasmicComponentName("Th"),
+                    props: {
+                      children: {
+                        type: "text",
+                        value: "MULTIPLY BY"
+                      }
+                    }
+                  }]
+                }
+              }
+            }
+          }, {
+            type: "component",
+            name: /*#__PURE__*/getPlasmicComponentName("Tbody"),
+            props: {
+              children: [{
+                type: "component",
+                name: /*#__PURE__*/getPlasmicComponentName("Tr"),
+                props: {
+                  children: [{
+                    type: "component",
+                    name: /*#__PURE__*/getPlasmicComponentName("Td"),
+                    props: {
+                      children: {
+                        type: "text",
+                        value: "inches"
+                      }
+                    }
+                  }, {
+                    type: "component",
+                    name: /*#__PURE__*/getPlasmicComponentName("Td"),
+                    props: {
+                      children: {
+                        type: "text",
+                        value: "millimetres (mm)"
+                      }
+                    }
+                  }, {
+                    type: "component",
+                    name: /*#__PURE__*/getPlasmicComponentName("Td"),
+                    props: {
+                      children: {
+                        type: "text",
+                        value: "25.4"
+                      }
+                    }
+                  }]
+                }
+              }]
+            }
+          }]
+        }
       }
     }
   }
 });
-function registerAvatar(loader, customAvatarMeta) {
+function registerTableContainer(loader, customTableContainerMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Avatar, customAvatarMeta != null ? customAvatarMeta : avatarMeta);
+  doRegisterComponent(TableContainer, customTableContainerMeta != null ? customTableContainerMeta : tableContainerMeta);
 }
-var avatarGroupMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("AvatarGroup"), {
+var tfootMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Tfoot", "Table"), {
   props: {
+    children: {
+      type: "slot",
+      defaultValue: [{
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("Tr"),
+        props: {
+          children: [{
+            type: "component",
+            name: /*#__PURE__*/getPlasmicComponentName("Th"),
+            props: {
+              children: {
+                type: "text",
+                value: "Name"
+              }
+            }
+          }]
+        }
+      }]
+    }
+  }
+});
+function registerTfoot(loader, customTfootMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(Tfoot, customTfootMeta != null ? customTfootMeta : tfootMeta);
+}
+
+var tabListMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("TabList", "Tabs"), {
+  props: {
+    children: {
+      type: "slot",
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Tab")]
+    }
+  }
+});
+function registerTabList(loader, customTabListMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(TabList, customTabListMeta != null ? customTabListMeta : tabListMeta);
+}
+var tabsMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Tabs"), {
+  props: {
+    align: {
+      type: "choice",
+      options: ["start", "center", "end"]
+    },
+    colorScheme: {
+      type: "choice",
+      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"]
+    },
+    orientation: {
+      type: "choice",
+      options: ["horizontal", "vertical"]
+    },
     size: {
       type: "choice",
-      options: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "full"]
+      options: ["sm", "md", "lg"]
     },
-    max: {
-      type: "number",
-      description: "The maximum number of avatars to show before truncating."
+    variant: {
+      type: "choice",
+      options: ["line", "enclosed", "enclosed-colored", "soft-rounded", "solid-rounded", "unstyled"],
+      defaultValue: "line"
     },
-    spacing: {
-      type: "string",
-      defaultValue: "-0.75rem"
+    direction: {
+      type: "choice",
+      options: ["ltr", "rtl"]
+    },
+    index: {
+      type: "number"
     },
+    isFitted: "boolean",
+    isLazy: "boolean",
+    isManual: "boolean",
     children: {
       type: "slot",
-      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("Avatar")],
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("TabList"), /*#__PURE__*/getPlasmicComponentName("TabPanels")],
       defaultValue: [{
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
-        props: {
-          name: "Dan Abrahmov",
-          src: "https://bit.ly/dan-abramov"
-        }
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
-        props: {
-          name: "Kola Tioluwani",
-          src: "https://bit.ly/tioluwani-kolawole"
-        }
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
-        props: {
-          name: "Kent Dodds",
-          src: "https://bit.ly/kent-c-dodds"
-        }
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
-        props: {
-          name: "Ryan Florence",
-          src: "https://bit.ly/ryan-florence"
-        }
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
-        props: {
-          name: "Prosper Otemuyiwa",
-          src: "https://bit.ly/prosper-baba"
-        }
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
+        name: /*#__PURE__*/getPlasmicComponentName("TabList"),
         props: {
-          name: "Christian Nwamba",
-          src: "https://bit.ly/code-beast"
+          children: [{
+            type: "component",
+            name: /*#__PURE__*/getPlasmicComponentName("Tab"),
+            props: {
+              children: {
+                type: "text",
+                value: "Tab 1"
+              }
+            }
+          }, {
+            type: "component",
+            name: /*#__PURE__*/getPlasmicComponentName("Tab"),
+            props: {
+              children: {
+                type: "text",
+                value: "Tab 2"
+              }
+            }
+          }, {
+            type: "component",
+            name: /*#__PURE__*/getPlasmicComponentName("Tab"),
+            props: {
+              children: {
+                type: "text",
+                value: "Tab 3"
+              }
+            }
+          }]
         }
       }, {
         type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Avatar"),
+        name: /*#__PURE__*/getPlasmicComponentName("TabPanels"),
         props: {
-          name: "Segun Adebayo",
-          src: "https://bit.ly/sage-adebayo"
+          children: [{
+            type: "component",
+            name: /*#__PURE__*/getPlasmicComponentName("TabPanel"),
+            props: {
+              children: {
+                type: "text",
+                value: "Tab 1's Panel Content"
+              }
+            }
+          }, {
+            type: "component",
+            name: /*#__PURE__*/getPlasmicComponentName("TabPanel"),
+            props: {
+              children: {
+                type: "text",
+                value: "Tab 2's Panel Content"
+              }
+            }
+          }, {
+            type: "component",
+            name: /*#__PURE__*/getPlasmicComponentName("TabPanel"),
+            props: {
+              children: {
+                type: "text",
+                value: "Tab 3's Panel Content"
+              }
+            }
+          }]
         }
       }]
     }
   }
 });
-function registerAvatarGroup(loader, customAvatarGroupMeta) {
+function registerTabs(loader, customTabsMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(AvatarGroup, customAvatarGroupMeta != null ? customAvatarGroupMeta : avatarGroupMeta);
+  doRegisterComponent(Tabs, customTabsMeta != null ? customTabsMeta : tabsMeta);
 }
-
-var formControlMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("FormControl"), {
+var tabMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Tab", "TabList"), {
   props: {
-    label: "string",
+    id: "string",
     isDisabled: "boolean",
-    isInvalid: "boolean",
-    isRequired: "boolean",
-    isreadOnly: "boolean",
+    panelId: "string",
     children: {
       type: "slot",
-      defaultValue: [{
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("FormLabel")
-      }, {
-        type: "component",
-        name: /*#__PURE__*/getPlasmicComponentName("Input")
-      }]
+      defaultValue: {
+        type: "text",
+        value: "Tab"
+      }
     }
   }
 });
-function registerFormControl(loader, customFormControlMeta) {
+function registerTab(loader, customTabMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(FormControl, customFormControlMeta != null ? customFormControlMeta : formControlMeta);
+  doRegisterComponent(Tab, customTabMeta != null ? customTabMeta : tabMeta);
 }
-var formLabelMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("FormLabel", "FormControl"), {
+var tabPanelsMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("TabPanels", "Tabs"), {
   props: {
     children: {
       type: "slot",
-      defaultValue: {
-        type: "text",
-        value: "Label",
-        styles: {
-          display: "inline-block",
-          width: "auto"
-        }
-      }
+      allowedComponents: [/*#__PURE__*/getPlasmicComponentName("TabPanel")]
     }
   }
 });
-function registerFormLabel(loader, customFormLabelMeta) {
+function registerTabPanels(loader, customTabPanelsMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(FormLabel, customFormLabelMeta != null ? customFormLabelMeta : formLabelMeta);
+  doRegisterComponent(TabPanels, customTabPanelsMeta != null ? customTabPanelsMeta : tabPanelsMeta);
 }
-var formHelperTextMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("FormHelperText", "FormControl"), {
+var tabPanelMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("TabPanel", "TabPanels"), {
   props: {
     children: {
       type: "slot",
       defaultValue: {
         type: "text",
-        value: "We'll never share your email."
+        value: "Tab Panel Content"
       }
     }
   }
 });
-function registerFormHelperText(loader, customFormHelperTextMeta) {
+function registerTabPanel(loader, customTabPanelMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(FormHelperText, customFormHelperTextMeta != null ? customFormHelperTextMeta : formHelperTextMeta);
+  doRegisterComponent(TabPanel, customTabPanelMeta != null ? customTabPanelMeta : tabPanelMeta);
 }
-var formErrorMessageMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("FormErrorMessage", "FormControl"), {
+
+var textMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Text"), {
   props: {
     children: {
       type: "slot",
-      defaultValue: {
+      defaultValue: [{
         type: "text",
-        value: "This is an error message."
-      }
+        value: "Some Text"
+      }]
     }
   }
 });
-function registerFormErrorMessage(loader, customFormErrorMessageMeta) {
+function registerText(loader, customTextMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(FormErrorMessage, customFormErrorMessageMeta != null ? customFormErrorMessageMeta : formErrorMessageMeta);
+  doRegisterComponent(Text, customTextMeta != null ? customTextMeta : textMeta);
 }
 
-var progressMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Progress"), {
+var toastMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Toast"), {
   props: {
-    colorScheme: {
-      type: "choice",
-      options: ["whiteAlpha", "blackAlpha", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"],
-      defaultValue: "blue"
+    title: {
+      type: "string",
+      defaultValue: "Toast Title"
     },
-    size: {
+    description: {
+      type: "string",
+      defaultValue: "Toast description"
+    },
+    variant: {
       type: "choice",
-      options: ["xs", "sm", "md", "lg"],
-      defaultValue: "md"
+      options: ["solid", "subtle", "left-accent", "top-accent"]
     },
-    max: {
+    duration: {
       type: "number",
-      defaultValue: 100
+      defaultValue: 5000
     },
-    min: {
+    isClosable: {
+      type: "boolean"
+    },
+    position: {
+      type: "choice",
+      options: ["top", "top-right", "top-left", "bottom", "bottom-right", "bottom-left"]
+    },
+    status: {
+      type: "choice",
+      options: ["info", "success", "warning", "error", "loading"]
+    }
+  }
+});
+function registerToast(loader, customToastMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(Toast, customToastMeta != null ? customToastMeta : toastMeta);
+}
+
+var tooltipMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/getComponentNameAndImportMeta("Tooltip"), {
+  props: {
+    children: {
+      type: "slot",
+      defaultValue: {
+        type: "component",
+        name: /*#__PURE__*/getPlasmicComponentName("Button"),
+        props: {
+          children: {
+            type: "text",
+            value: "Hover me"
+          }
+        }
+      }
+    },
+    label: {
+      type: "string",
+      defaultValue: "Hi! I am a tooltip"
+    },
+    placement: {
+      type: "choice",
+      options: ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"],
+      defaultValue: "bottom"
+    },
+    hasArrow: "boolean",
+    arrowSize: {
       type: "number",
-      defaultValue: 0
+      defaultValue: 10
     },
-    value: "number",
-    isIndeterminate: {
-      type: "boolean"
+    arrowShadowColor: {
+      type: "string"
     },
-    hasStripe: {
-      type: "boolean"
+    arrowPadding: {
+      type: "number",
+      defaultValue: 8
     },
-    isAnimated: {
+    defaultIsOpen: "boolean",
+    isDisabled: "boolean",
+    offset: {
+      type: "array",
+      defaultValue: [0, 0]
+    },
+    closeOnClick: {
       type: "boolean",
-      hidden: function hidden(props) {
-        return !props.hasStripe;
-      }
+      defaultValue: true
+    },
+    closeDelay: {
+      type: "number",
+      defaultValue: 0
     }
   }
 });
-function registerProgress(loader, customProgressMeta) {
+function registerTooltip(loader, customTooltipMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(Progress, customProgressMeta != null ? customProgressMeta : progressMeta);
+  doRegisterComponent(Tooltip, customTooltipMeta != null ? customTooltipMeta : tooltipMeta);
 }
 
 function registerAll(loader) {
+  registerAccordion(loader);
+  registerAccordionButton(loader);
+  registerAccordionIcon(loader);
+  registerAccordionItem(loader);
+  registerAccordionPanel(loader);
+  registerAvatar(loader);
+  registerAvatarBadge(loader);
+  registerAvatarGroup(loader);
   registerAspectRatio(loader);
   registerBadge(loader);
   registerBreadcrumb(loader);
@@ -2387,70 +2409,63 @@ function registerAll(loader) {
   registerBreadcrumbSeparator(loader);
   registerButton(loader);
   registerButtonGroup(loader);
+  registerChakraProvider(loader);
   registerCheckbox(loader);
   registerCheckboxGroup(loader);
   registerCode(loader);
   registerDivider(loader);
+  registerFormControl(loader);
+  registerFormErrorMessage(loader);
+  registerFormHelperText(loader);
+  registerFormLabel(loader);
+  registerHeading(loader);
+  registerHighlight(loader);
   registerImage(loader);
   registerInput(loader);
   registerKbd(loader);
   registerNumberInput(loader);
-  registerNumberInputStepper(loader);
   registerNumberDecrementStepper(loader);
   registerNumberIncrementStepper(loader);
   registerNumberInputField(loader);
+  registerNumberInputStepper(loader);
+  registerOption(loader);
   registerPinInput(loader);
   registerPinInputField(loader);
   registerPopover(loader);
-  registerPopoverContent(loader);
+  registerPopoverBody(loader);
   registerPopoverArrow(loader);
   registerPopoverCloseButton(loader);
+  registerPopoverContent(loader);
   registerPopoverHeader(loader);
-  registerPopoverBody(loader);
   registerPopoverTrigger(loader);
+  registerProgress(loader);
   registerRadio(loader);
   registerRadioGroup(loader);
   registerSelect(loader);
-  registerOption(loader);
   registerStat(loader);
-  registerStatHelpText(loader);
   registerStatArrow(loader);
-  registerStatNumber(loader);
+  registerStatHelpText(loader);
   registerStatLabel(loader);
+  registerStatNumber(loader);
   registerSwitch(loader);
   registerTable(loader);
   registerTableCaption(loader);
-  registerThead(loader);
   registerTbody(loader);
-  registerTr(loader);
+  registerTfoot(loader);
+  registerThead(loader);
   registerTd(loader);
   registerTh(loader);
+  registerTr(loader);
   registerTableContainer(loader);
   registerTabList(loader);
-  registerTabs(loader);
   registerTab(loader);
-  registerTabPanels(loader);
   registerTabPanel(loader);
+  registerTabPanels(loader);
+  registerTabs(loader);
   registerText(loader);
-  registerTfoot(loader);
-  registerHighlight(loader);
-  registerHeading(loader);
   registerToast(loader);
   registerTooltip(loader);
-  registerAvatarBadge(loader);
-  registerAvatar(loader);
-  registerAvatarGroup(loader);
-  registerAccordion(loader);
-  registerAccordionItem(loader);
-  registerAccordionButton(loader);
-  registerAccordionPanel(loader);
-  registerAccordionIcon(loader);
-  registerFormControl(loader);
-  registerFormLabel(loader);
-  registerFormHelperText(loader);
-  registerFormErrorMessage(loader);
-  registerProgress(loader);
 }
 
-export { Option, accordionButtonMeta, accordionIconMeta, accordionItemMeta, accordionMeta, accordionPanelMeta, aspectRatioMeta, avatarBadgeMeta, avatarGroupMeta, avatarMeta, badgeMeta, breadcrumbItemMeta, breadcrumbLinkMeta, breadcrumbMeta, breadcrumbSeparatorMeta, buttonGroupMeta, buttonMeta, checkboxGroupMeta, checkboxMeta, codeMeta, dividerMeta, formControlMeta, formErrorMessageMeta, formHelperTextMeta, formLabelMeta, headingMeta, highlightMeta, imageMeta, inputMeta, kbdMeta, numberDecrementStepperMeta, numberIncrementStepperMeta, numberInputFieldMeta, numberInputMeta, numberInputStepperMeta, optionMeta, pinInputFieldMeta, pinInputMeta, popoverArrowMeta, popoverBodyMeta, popoverCloseButtonMeta, popoverContentMeta, popoverHeaderMeta, popoverMeta, popoverTriggerMeta, progressMeta, radioGroupMeta, radioMeta, registerAccordion, registerAccordionButton, registerAccordionIcon, registerAccordionItem, registerAccordionPanel, registerAll, registerAspectRatio, registerAvatar, registerAvatarBadge, registerAvatarGroup, registerBadge, registerBreadcrumb, registerBreadcrumbItem, registerBreadcrumbLink, registerBreadcrumbSeparator, registerButton, registerButtonGroup, registerCheckbox, registerCheckboxGroup, registerCode, registerDivider, registerFormControl, registerFormErrorMessage, registerFormHelperText, registerFormLabel, registerHeading, registerHighlight, registerImage, registerInput, registerKbd, registerNumberDecrementStepper, registerNumberIncrementStepper, registerNumberInput, registerNumberInputField, registerNumberInputStepper, registerOption, registerPinInput, registerPinInputField, registerPopover, registerPopoverArrow, registerPopoverBody, registerPopoverCloseButton, registerPopoverContent, registerPopoverHeader, registerPopoverTrigger, registerProgress, registerRadio, registerRadioGroup, registerSelect, registerStat, registerStatArrow, registerStatHelpText, registerStatLabel, registerStatNumber, registerSwitch, registerTab, registerTabList, registerTabPanel, registerTabPanels, registerTable, registerTableCaption, registerTableContainer, registerTabs, registerTbody, registerTd, registerText, registerTfoot, registerTh, registerThead, registerToast, registerTooltip, registerTr, selectMeta, statArrowMeta, statHelpTextMeta, statLabelMeta, statMeta, statNumberMeta, switchMeta, tabListMeta, tabMeta, tabPanelMeta, tabPanelsMeta, tableCaptionMeta, tableContainerMeta, tableMeta, tabsMeta, tbodyMeta, tdMeta, textMeta, tfootMeta, thMeta, theadMeta, toastMeta, tooltipMeta, trMeta };
+export { Option, accordionButtonMeta, accordionIconMeta, accordionItemMeta, accordionMeta, accordionPanelMeta, aspectRatioMeta, avatarBadgeMeta, avatarGroupMeta, avatarMeta, badgeMeta, breadcrumbItemMeta, breadcrumbLinkMeta, breadcrumbMeta, breadcrumbSeparatorMeta, buttonGroupMeta, buttonMeta, chakraProviderMeta, checkboxGroupMeta, checkboxMeta, codeMeta, dividerMeta, formControlMeta, formErrorMessageMeta, formHelperTextMeta, formLabelMeta, headingMeta, highlightMeta, imageMeta, inputMeta, kbdMeta, numberDecrementStepperMeta, numberIncrementStepperMeta, numberInputFieldMeta, numberInputMeta, numberInputStepperMeta, optionMeta, pinInputFieldMeta, pinInputMeta, popoverArrowMeta, popoverBodyMeta, popoverCloseButtonMeta, popoverContentMeta, popoverHeaderMeta, popoverMeta, popoverTriggerMeta, progressMeta, radioGroupMeta, radioMeta, registerAccordion, registerAccordionButton, registerAccordionIcon, registerAccordionItem, registerAccordionPanel, registerAll, registerAspectRatio, registerAvatar, registerAvatarBadge, registerAvatarGroup, registerBadge, registerBreadcrumb, registerBreadcrumbItem, registerBreadcrumbLink, registerBreadcrumbSeparator, registerButton, registerButtonGroup, registerChakraProvider, registerCheckbox, registerCheckboxGroup, registerCode, registerDivider, registerFormControl, registerFormErrorMessage, registerFormHelperText, registerFormLabel, registerHeading, registerHighlight, registerImage, registerInput, registerKbd, registerNumberDecrementStepper, registerNumberIncrementStepper, registerNumberInput, registerNumberInputField, registerNumberInputStepper, registerOption, registerPinInput, registerPinInputField, registerPopover, registerPopoverArrow, registerPopoverBody, registerPopoverCloseButton, registerPopoverContent, registerPopoverHeader, registerPopoverTrigger, registerProgress, registerRadio, registerRadioGroup, registerSelect, registerStat, registerStatArrow, registerStatHelpText, registerStatLabel, registerStatNumber, registerSwitch, registerTab, registerTabList, registerTabPanel, registerTabPanels, registerTable, registerTableCaption, registerTableContainer, registerTabs, registerTbody, registerTd, registerText, registerTfoot, registerTh, registerThead, registerToast, registerTooltip, registerTr, selectMeta, statArrowMeta, statHelpTextMeta, statLabelMeta, statMeta, statNumberMeta, switchMeta, tabListMeta, tabMeta, tabPanelMeta, tabPanelsMeta, tableCaptionMeta, tableContainerMeta, tableMeta, tabsMeta, tbodyMeta, tdMeta, textMeta, tfootMeta, thMeta, theadMeta, toastMeta, tooltipMeta, trMeta };
 //# sourceMappingURL=plasmic-chakra-ui.esm.js.map