@databricks/design-system 1.6.0 → 1.6.1

package/dist/index.js

@@ -4,7 +4,7 @@ import AntDIcon from '@ant-design/icons';
 import { useTheme, ThemeProvider, css, ClassNames, keyframes } from '@emotion/react';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import chroma from 'chroma-js';
-import { notification, ConfigProvider, Alert as Alert$1, AutoComplete as AutoComplete$1, Breadcrumb as Breadcrumb$1, Button as Button$1, Checkbox as Checkbox$1, Collapse as Collapse$1, DatePicker, Dropdown as Dropdown$1, Form as Form$1, Col as Col$1, Row as Row$1, Space as Space$1, Typography as Typography$1, Input as Input$1, Layout as Layout$1, Menu as Menu$1, Modal as Modal$1, Pagination as Pagination$1, Popover as Popover$1, Radio as Radio$1, Select as Select$1, Skeleton as Skeleton$1, Switch as Switch$1, Table as Table$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Tree as Tree$1 } from 'antd';
+import { notification, ConfigProvider, Collapse, Alert as Alert$1, AutoComplete as AutoComplete$1, Breadcrumb as Breadcrumb$1, Button as Button$1, Checkbox as Checkbox$1, DatePicker, Dropdown as Dropdown$1, Form as Form$1, Col as Col$1, Row as Row$1, Space as Space$1, Typography as Typography$1, Input as Input$1, Layout as Layout$1, Menu as Menu$1, Modal as Modal$1, Pagination as Pagination$1, Popover as Popover$1, Radio as Radio$1, Select as Select$1, Skeleton as Skeleton$1, Switch as Switch$1, Table as Table$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Tree as Tree$1 } from 'antd';
 import classnames from 'classnames';
 import _isNil from 'lodash/isNil';
 import _endsWith from 'lodash/endsWith';
@@ -545,11 +545,35 @@ const DesignSystemAntDConfigProvider = _ref3 => {
   let {
     children
   } = _ref3;
-  const antdContext = useContext(AntDConfigProviderPropsContext);
+  const antdContext = useAntDConfigProviderContext();
   return jsx(ConfigProvider, { ...antdContext,
     children: children
   });
 };
+const useAntDConfigProviderContext = () => {
+  var _useContext;
+
+  return (_useContext = useContext(AntDConfigProviderPropsContext)) !== null && _useContext !== void 0 ? _useContext : {
+    prefixCls: undefined
+  };
+};
+/**
+ * When using AntD components inside Design System wrapper components (e.g. Modal, Collapse etc),
+ * we don't want Design System's prefix class to override them.
+ *
+ * Since all Design System's components have are wrapped with DesignSystemAntDConfigProvider,
+ * this won't affect their own prefixCls, but just allow nested antd components to keep their ant prefix.
+ */
+
+const RestoreAntDDefaultClsPrefix = _ref4 => {
+  let {
+    children
+  } = _ref4;
+  return jsx(ConfigProvider, {
+    prefixCls: "ant",
+    children: children
+  });
+};
 
 function useDesignSystemContext() {
   return useContext(DesignSystemContext);
@@ -8545,6 +8569,115 @@ function WorkspacesIcon(props) {
   });
 }
 
+function getAccordionEmotionStyles(clsPrefix, theme) {
+  const classItem = ".".concat(clsPrefix, "-item");
+  const classItemActive = "".concat(classItem, "-active");
+  const classHeader = ".".concat(clsPrefix, "-header");
+  const classContent = ".".concat(clsPrefix, "-content");
+  const classContentBox = ".".concat(clsPrefix, "-content-box");
+  const classArrow = ".".concat(clsPrefix, "-arrow");
+  const styles = {
+    border: '0 none',
+    background: 'none',
+    [classItem]: {
+      border: '0 none',
+      ["&:hover"]: {
+        [classHeader]: {
+          color: theme.colors.actionPrimaryBackgroundHover
+        },
+        [classArrow]: {
+          color: theme.colors.actionPrimaryBackgroundHover
+        }
+      },
+      ["&:active"]: {
+        [classHeader]: {
+          color: theme.colors.actionPrimaryBackgroundPress
+        },
+        [classArrow]: {
+          color: theme.colors.actionPrimaryBackgroundPress
+        }
+      }
+    },
+    [classHeader]: {
+      color: theme.colors.textPrimary,
+      fontWeight: 600,
+      '&:focus-visible': {
+        outlineColor: "".concat(theme.colors.primary, " !important"),
+        outlineStyle: 'auto !important'
+      }
+    },
+    ["& > ".concat(classItem, " > ").concat(classHeader, " > ").concat(classArrow)]: {
+      fontSize: theme.general.iconSize,
+      right: 12
+    },
+    [classArrow]: {
+      color: theme.colors.textSecondary
+    },
+    ["& > ".concat(classItemActive, " > ").concat(classHeader, " > ").concat(classArrow)]: {
+      transform: 'translateY(-50%) rotate(180deg)'
+    },
+    [classContent]: {
+      border: '0 none'
+    },
+    [classContentBox]: {
+      padding: '8px 16px 16px'
+    },
+    ["& > ".concat(classItem, " > ").concat(classHeader)]: {
+      padding: '6px 44px 6px 0',
+      lineHeight: theme.typography.lineHeightBase
+    },
+    ...getAnimationCss(theme.options.enableAnimation)
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getAccordionEmotionStyles;");
+}
+
+const AccordionPanel = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    dangerouslyAppendEmotionCSS,
+    children,
+    ...props
+  } = _ref;
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Collapse.Panel, { ...props,
+      ...dangerouslySetAntdProps,
+      css: dangerouslyAppendEmotionCSS,
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
+    })
+  });
+};
+const Accordion = /* #__PURE__ */(() => {
+  const Accordion = _ref2 => {
+    let {
+      dangerouslySetAntdProps,
+      dangerouslyAppendEmotionCSS,
+      displayMode = 'multiple',
+      ...props
+    } = _ref2;
+    const {
+      theme,
+      getPrefixedClassName
+    } = useDesignSystemTheme(); // While this component is called `Accordion` for correctness, in AntD it is called `Collapse`.
+
+    const clsPrefix = getPrefixedClassName('collapse');
+    return jsx(DesignSystemAntDConfigProvider, {
+      children: jsx(Collapse, {
+        expandIcon: () => jsx(ChevronDownIcon, {}),
+        expandIconPosition: "right",
+        accordion: displayMode === 'single',
+        ...props,
+        ...dangerouslySetAntdProps,
+        css: [getAccordionEmotionStyles(clsPrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Accordion;"]
+      })
+    });
+  };
+
+  Accordion.Panel = AccordionPanel;
+  return Accordion;
+})();
+
 // TODO: Replace with custom icons
 // TODO: Reuse in Alert
 const filledIconsMap = {
@@ -9394,18 +9527,20 @@ function getCheckboxEmotionStyles(clsPrefix, theme) {
 
 const getWrapperStyle = _ref => {
   let {
-    clsPrefix,
-    theme,
+    // TODO(FEINF-1497): Uncomment
+    // clsPrefix,
+    // theme,
     wrapperStyle = {}
   } = _ref;
-  const styles = {
-    ["&& + .".concat(clsPrefix, "-hint, && + .").concat(clsPrefix, "-form-message")]: {
-      paddingLeft: theme.spacing.lg,
-      marginTop: 0
-    },
-    ["&& + .".concat(clsPrefix, "-checkbox-container")]: {
-      marginTop: theme.spacing.sm
-    },
+  const styles = { // TODO(FEINF-1497): Uncomment and make changes to support horizontal layout too
+    // [`&& + .${clsPrefix}-hint, && + .${clsPrefix}-form-message`]: {
+    //   paddingLeft: theme.spacing.lg,
+    //   marginTop: 0,
+    // },
+    //
+    // [`&& + .${clsPrefix}-checkbox-container`]: {
+    //   marginTop: theme.spacing.sm,
+    // },
     ...wrapperStyle
   };
   return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getWrapperStyle;");
@@ -9477,108 +9612,6 @@ const Checkbox = CheckboxNamespace; // TODO: I'm doing this to support storybook
 
 const __INTERNAL_DO_NOT_USE__Group = CheckboxGroup;
 
-function getCollapseEmotionStyles(clsPrefix, theme) {
-  const classItem = ".".concat(clsPrefix, "-item");
-  const classItemActive = "".concat(classItem, "-active");
-  const classHeader = ".".concat(clsPrefix, "-header");
-  const classContent = ".".concat(clsPrefix, "-content");
-  const classContentBox = ".".concat(clsPrefix, "-content-box");
-  const classArrow = ".".concat(clsPrefix, "-arrow");
-  const styles = {
-    border: '0 none',
-    background: 'none',
-    [classItem]: {
-      border: '0 none',
-      ["&:hover"]: {
-        [classHeader]: {
-          color: theme.colors.actionPrimaryBackgroundHover
-        },
-        [classArrow]: {
-          color: theme.colors.actionPrimaryBackgroundHover
-        }
-      },
-      ["&:active"]: {
-        [classHeader]: {
-          color: theme.colors.actionPrimaryBackgroundPress
-        },
-        [classArrow]: {
-          color: theme.colors.actionPrimaryBackgroundPress
-        }
-      }
-    },
-    [classHeader]: {
-      color: theme.colors.textPrimary,
-      fontWeight: 600,
-      '&:focus-visible': {
-        outlineColor: "".concat(theme.colors.primary, " !important"),
-        outlineStyle: 'auto !important'
-      }
-    },
-    ["& > ".concat(classItem, " > ").concat(classHeader, " > ").concat(classArrow)]: {
-      fontSize: theme.general.iconSize,
-      right: 12
-    },
-    [classArrow]: {
-      color: theme.colors.textSecondary
-    },
-    ["& > ".concat(classItemActive, " > ").concat(classHeader, " > ").concat(classArrow)]: {
-      transform: 'translateY(-50%) rotate(180deg)'
-    },
-    [classContent]: {
-      border: '0 none'
-    },
-    [classContentBox]: {
-      padding: '8px 16px 16px'
-    },
-    ["& > ".concat(classItem, " > ").concat(classHeader)]: {
-      padding: '6px 44px 6px 0',
-      lineHeight: theme.typography.lineHeightBase
-    },
-    ...getAnimationCss(theme.options.enableAnimation)
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getCollapseEmotionStyles;");
-}
-
-const CollapsePanel = _ref => {
-  let {
-    dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    ...props
-  } = _ref;
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Collapse$1.Panel, { ...props,
-      ...dangerouslySetAntdProps,
-      css: dangerouslyAppendEmotionCSS
-    })
-  });
-};
-const Collapse = /* #__PURE__ */(() => {
-  const Collapse = _ref2 => {
-    let {
-      dangerouslySetAntdProps,
-      dangerouslyAppendEmotionCSS,
-      ...props
-    } = _ref2;
-    const {
-      theme,
-      getPrefixedClassName
-    } = useDesignSystemTheme();
-    const clsPrefix = getPrefixedClassName('collapse');
-    return jsx(DesignSystemAntDConfigProvider, {
-      children: jsx(Collapse$1, {
-        expandIcon: () => jsx(ChevronDownIcon, {}),
-        expandIconPosition: "right",
-        ...props,
-        ...dangerouslySetAntdProps,
-        css: [getCollapseEmotionStyles(clsPrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Collapse;"]
-      })
-    });
-  };
-
-  Collapse.Panel = Collapse$1.Panel;
-  return Collapse;
-})();
-
 function getEmotionStyles(clsPrefix, theme) {
   const classFocused = ".".concat(clsPrefix, "-focused");
   const classActiveBar = ".".concat(clsPrefix, "-active-bar");
@@ -9819,6 +9852,7 @@ const Content$2 = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
         minWidth
       }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
       sideOffset: 4,
+      align: "start",
       ...props,
       children: children
     })
@@ -10142,6 +10176,9 @@ const itemStyles = theme => ({
   flexWrap: 'wrap',
   alignItems: 'center',
   outline: 'unset',
+  '&:hover': {
+    cursor: 'pointer'
+  },
   '&:focus': {
     backgroundColor: theme.colors.actionTertiaryBackgroundHover
   },
@@ -10230,6 +10267,7 @@ const getFormItemEmotionStyles = _ref => {
 const FormDubois = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
   let {
     dangerouslySetAntdProps,
+    children,
     ...props
   } = _ref2;
   const mergedProps = { ...props,
@@ -10240,7 +10278,10 @@ const FormDubois = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
     children: jsx(Form$1, { ...mergedProps,
       colon: false,
       ref: ref,
-      ...dangerouslySetAntdProps
+      ...dangerouslySetAntdProps,
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
     })
   });
 });
@@ -10248,6 +10289,7 @@ const FormDubois = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
 const FormItem = _ref3 => {
   let {
     dangerouslySetAntdProps,
+    children,
     ...props
   } = _ref3;
   const {
@@ -10260,7 +10302,8 @@ const FormItem = _ref3 => {
         theme,
         clsPrefix: classNamePrefix
       }),
-      ...dangerouslySetAntdProps
+      ...dangerouslySetAntdProps,
+      children: children
     })
   });
 };
@@ -10656,19 +10699,76 @@ const {
 } = Layout$1;
 const Layout = _ref => {
   let {
+    children,
     dangerouslySetAntdProps,
     ...props
   } = _ref;
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(Layout$1, { ...props,
-      ...dangerouslySetAntdProps
+      ...dangerouslySetAntdProps,
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
+    })
+  });
+};
+
+Layout.Header = _ref2 => {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Header, { ...props,
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
+    })
+  });
+};
+
+Layout.Footer = _ref3 => {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Footer, { ...props,
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
+    })
+  });
+};
+
+Layout.Sider = /*#__PURE__*/React__default.forwardRef((_ref4, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref4;
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Sider, { ...props,
+      ref: ref,
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
+    })
+  });
+});
+
+Layout.Content = _ref5 => {
+  let {
+    children,
+    ...props
+  } = _ref5;
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Content$1, { ...props,
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
     })
   });
 };
-Layout.Header = Header;
-Layout.Footer = Footer;
-Layout.Sider = Sider;
-Layout.Content = Content$1;
 
 /**
  * @deprecated Use `DropdownMenu` instead.
@@ -10841,6 +10941,9 @@ function Modal(_ref) {
     okButtonProps,
     cancelButtonProps,
     dangerouslySetAntdProps,
+    children,
+    title,
+    footer,
     ...props
   } = _ref;
   const {
@@ -10890,16 +10993,24 @@ function Modal(_ref) {
       css: getModalEmotionStyles({
         theme,
         clsPrefix: classNamePrefix,
-        hasFooter: props.footer !== null,
+        hasFooter: footer !== null,
         maxedOutHeight: props.verticalSizing === 'maxed_out'
       }),
-      footer: props.footer === undefined ? renderDefaultFooter() : props.footer,
+      title: jsx(RestoreAntDDefaultClsPrefix, {
+        children: title
+      }),
+      footer: jsx(RestoreAntDDefaultClsPrefix, {
+        children: footer === undefined ? renderDefaultFooter() : footer
+      }),
       width: props.size ? SIZE_PRESETS[props.size] : undefined,
       closeIcon: jsx(CloseIcon, {}),
       centered: true,
       zIndex: theme.options.zIndexBase,
       ...props,
-      ...dangerouslySetAntdProps
+      ...dangerouslySetAntdProps,
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
     })
   });
 }
@@ -11234,6 +11345,7 @@ const Pagination = function Pagination(_ref) {
 
 const Popover = _ref => {
   let {
+    content,
     dangerouslySetAntdProps,
     ...props
   } = _ref;
@@ -11243,7 +11355,10 @@ const Popover = _ref => {
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(Popover$1, {
       zIndex: theme.options.zIndexBase + 30,
-      ...props
+      ...props,
+      content: jsx(RestoreAntDDefaultClsPrefix, {
+        children: content
+      })
     })
   });
 };
@@ -12552,7 +12667,9 @@ const DropdownButton = props => {
         disabled: disabled,
         asChild: true,
         children: rightButtonToRender
-      }), menu]
+      }), menu && /*#__PURE__*/React.cloneElement(menu, {
+        align: 'end'
+      })]
     })]
   });
 };
@@ -12673,9 +12790,11 @@ const SplitButton = props => {
           }),
           ...loadingButtonStyles
         },
-        children: jsx(LoadingIcon, {
-          spin: true
-        })
+        loading: true,
+        htmlType: props.htmlType,
+        title: props.title,
+        className: props.className,
+        children: children
       }) : jsxs(DropdownButton, { ...dropdownButtonProps,
         overlay: deprecatedMenu,
         trigger: ['click'],
@@ -12741,18 +12860,82 @@ const getSwitchWithLabelStyles = _ref => {
   // Default value
   const SWITCH_WIDTH = 28;
   const styles = {
-    '&': {
-      display: 'flex',
-      alignItems: 'center'
+    display: 'flex',
+    alignItems: 'center',
+    // Switch is Off
+    ["&.".concat(clsPrefix, "-switch")]: {
+      backgroundColor: theme.colors.backgroundPrimary,
+      border: "1px solid ".concat(theme.colors.actionDefaultBorderDefault),
+      [".".concat(clsPrefix, "-switch-handle:before")]: {
+        boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionDefaultBorderDefault),
+        transition: 'none'
+      },
+      ["&:hover:not(.".concat(clsPrefix, "-switch-disabled)")]: {
+        backgroundColor: theme.colors.actionDefaultBackgroundHover,
+        border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundHover),
+        [".".concat(clsPrefix, "-switch-handle:before")]: {
+          boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionPrimaryBackgroundHover)
+        }
+      },
+      ["&:active:not(.".concat(clsPrefix, "-switch-disabled)")]: {
+        backgroundColor: theme.colors.actionDefaultBackgroundPress,
+        border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundPress),
+        [".".concat(clsPrefix, "-switch-handle:before")]: {
+          boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionPrimaryBackgroundHover)
+        }
+      },
+      ["&:focus-visible"]: {
+        border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundDefault),
+        boxShadow: 'none',
+        outlineStyle: 'solid',
+        outlineWidth: '1px',
+        outlineOffset: '1px',
+        outlineColor: theme.colors.actionDefaultBorderFocus,
+        [".".concat(clsPrefix, "-switch-handle:before")]: {
+          boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionPrimaryBackgroundDefault)
+        }
+      },
+      ["&:focus"]: {
+        boxShadow: 'none'
+      }
+    },
+    // Switch is On
+    ["&.".concat(clsPrefix, "-switch-checked")]: {
+      backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
+      border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundDefault),
+      ["&:hover:not(.".concat(clsPrefix, "-switch-disabled)")]: {
+        backgroundColor: theme.colors.actionPrimaryBackgroundHover,
+        border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundDefault)
+      },
+      ["&:active:not(.".concat(clsPrefix, "-switch-disabled)")]: {
+        backgroundColor: theme.colors.actionPrimaryBackgroundPress
+      },
+      [".".concat(clsPrefix, "-switch-handle:before")]: {
+        boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionPrimaryBackgroundDefault)
+      },
+      ["&.".concat(clsPrefix, "-switch-disabled")]: {
+        backgroundColor: theme.colors.actionDisabledBackground,
+        border: "1px solid ".concat(theme.colors.actionDisabledBackground),
+        [".".concat(clsPrefix, "-switch-handle:before")]: {
+          boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionDisabledBackground)
+        }
+      }
+    },
+    [".".concat(clsPrefix, "-switch-handle:before")]: {
+      backgroundColor: theme.colors.backgroundPrimary
     },
     ["&& + .".concat(clsPrefix, "-hint, && + .").concat(clsPrefix, "-form-message")]: {
       paddingLeft: theme.spacing.sm + SWITCH_WIDTH
     },
     ["&& + .".concat(clsPrefix, "-form-message")]: {
       marginTop: 0
+    },
+    [".".concat(clsPrefix, "-click-animating-node")]: {
+      animation: 'none'
     }
   };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getSwitchWithLabelStyles;");
+  const importantStyles = importantify(styles);
+  return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getSwitchWithLabelStyles;");
 };
 
 const Switch = _ref2 => {
@@ -12774,7 +12957,12 @@ const Switch = _ref2 => {
       }),
       children: [jsx(Switch$1, { ...props,
         ...dangerouslySetAntdProps,
-        css: /*#__PURE__*/css(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:Switch;")
+        css: /*#__PURE__*/css({ ... /*#__PURE__*/css(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:Switch;"),
+          ...getSwitchWithLabelStyles({
+            clsPrefix: classNamePrefix,
+            theme
+          })
+        }, process.env.NODE_ENV === "production" ? "" : ";label:Switch;")
       }), jsx(Label, {
         inline: true,
         ...labelProps,
@@ -12784,7 +12972,12 @@ const Switch = _ref2 => {
   }) : jsx(DesignSystemAntDConfigProvider, {
     children: jsx(Switch$1, { ...props,
       ...dangerouslySetAntdProps,
-      css: /*#__PURE__*/css(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:Switch;")
+      css: /*#__PURE__*/css({ ... /*#__PURE__*/css(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:Switch;"),
+        ...getSwitchWithLabelStyles({
+          clsPrefix: classNamePrefix,
+          theme
+        })
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Switch;")
     })
   });
 };
@@ -12843,6 +13036,7 @@ const Table = props => {
   const {
     loading,
     scrollableInFlexibleContainer,
+    children,
     ...tableProps
   } = props;
   return jsx(DesignSystemAntDConfigProvider, {
@@ -12855,7 +13049,10 @@ const Table = props => {
         y: 'auto'
       } : undefined,
       ...tableProps,
-      css: getTableEmotionStyles(classNamePrefix, theme, Boolean(scrollableInFlexibleContainer))
+      css: getTableEmotionStyles(classNamePrefix, theme, Boolean(scrollableInFlexibleContainer)),
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
     })
   });
 };
@@ -12993,7 +13190,11 @@ const getTabEmotionStyles = (clsPrefix, theme) => {
   const importantStyles = importantify(styles);
   return importantStyles;
 };
-const TabPane = props => {
+const TabPane = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
@@ -13008,12 +13209,15 @@ const TabPane = props => {
       // However, we use a restricted TS interface to still discourage consumers of the library from passing in these props.
       ,
       ...props,
-      ...props.dangerouslySetAntdProps
+      ...props.dangerouslySetAntdProps,
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
     })
   });
 };
 const Tabs = /* #__PURE__ */(() => {
-  const Tabs = _ref => {
+  const Tabs = _ref2 => {
     let {
       editable = false,
       activeKey,
@@ -13025,7 +13229,7 @@ const Tabs = /* #__PURE__ */(() => {
       dangerouslySetAntdProps = {},
       dangerouslyAppendEmotionCSS = {},
       ...props
-    } = _ref;
+    } = _ref2;
     const {
       theme,
       classNamePrefix
@@ -13763,5 +13967,5 @@ const Typography = /* #__PURE__ */(() => {
   return Typography;
 })();
 
-export { Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, ApplyDesignSystemFlags, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BoldIcon, BookIcon, BookmarkBorderIcon, BookmarkFillIcon, BracketsIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CatalogIcon, ChartLineIcon, CheckCircleBorderIcon, CheckCircleFillIcon, CheckIcon, CheckLineIcon, Checkbox, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudKeyIcon, CloudOffIcon, CloudUploadIcon, ClusterIcon, ClustersIcon, CodeIcon, Col, Collapse, CollapsePanel, ColorFillIcon, ConnectIcon, Content, CopyIcon, DIcon, DU_BOIS_ENABLE_ANIMATION_CLASSNAME, DangerModal, DashIcon, DashboardIcon, DataIcon, DataMarketplace, DatabaseIcon, DesignSystemAntDConfigProvider, DesignSystemContext, DesignSystemProvider, DownloadIcon, DragIcon, Dropdown, DropdownMenu, DuboisDatePicker, ErrorBorderIcon, ErrorFillIcon, ExpandLessIcon, ExpandMoreIcon, ExperimentIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, Folder1Icon, FolderIcon, FontIcon, ForkIcon, Form, FormDubois, FullscreenExitIcon, FullscreenIcon, Gear1Icon, GearIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoBorderIcon, InfoFillIcon, Input, ItalicIcon, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LifesaverIcon, LightningIcon, LinkIcon, LinkRemoveIcon, ListBorderIcon, ListIcon, LoadingIcon, LockBorderIcon, LockFillIcon, LockUnlockedIcon, MIcon, Menu, MinusBoxIcon, MinusCircleBorderIcon, MinusCircleFillIcon, Modal, ModelsIcon, Nav, NavButton, NewWindowIcon, NoIcon, NotebookIcon, NotificationIcon, OfficeIcon, OptGroup, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, Panel, PanelBody, PanelHeader, PanelHeaderButtons, PanelHeaderTitle, PencilIcon, PinBorderIcon, PinCancelIcon, PinFillIcon, PlayCircleBorderIcon, PlayCircleFillIcon, PlayIcon, PlugIcon, PlusCircleBorderIcon, PlusCircleFillIcon, PlusIcon, PlusSquareIcon, Popover, QueryEditorIcon, QueryIcon, QueryListViewIcon, QueryNavIcon, QuestionMarkBorderIcon, QuestionMarkFillIcon, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, ReposIcon, Row, SaveIcon, SchoolIcon, Search1Icon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, Sidebar, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, SlidersIcon, SortAscendingIcon, SortDescendingIcon, SortUnsortedIcon, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarBorderIcon, StarFillIcon, StopCircleBorderIcon, StopCricleFillIcon, StopIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableIcon, Tabs, Tag, Tooltip, TrashIcon, Tree, TreeIcon, Typography, UnderlineIcon, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, Visible, VisibleOff, WarningBorderIcon, WarningFillIcon, WithDesignSystemThemeHoc, WorkspacesIcon, XCircleBorderIcon, XCircleFillIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__Group, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__Password, __INTERNAL_DO_NOT_USE__TextArea, __INTERNAL_DO_NOT_USE__VerticalGroup, getAnimationCss, getButtonEmotionStyles, getPaginationEmotionStyles, getRadioStyles, getTabEmotionStyles, getWrapperStyle, useDesignSystemFlags, useDesignSystemTheme, useNotification, useThemedStyles, withNotifications };
+export { Accordion, AccordionPanel, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, ApplyDesignSystemFlags, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BoldIcon, BookIcon, BookmarkBorderIcon, BookmarkFillIcon, BracketsIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CatalogIcon, ChartLineIcon, CheckCircleBorderIcon, CheckCircleFillIcon, CheckIcon, CheckLineIcon, Checkbox, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudKeyIcon, CloudOffIcon, CloudUploadIcon, ClusterIcon, ClustersIcon, CodeIcon, Col, ColorFillIcon, ConnectIcon, Content, CopyIcon, DIcon, DU_BOIS_ENABLE_ANIMATION_CLASSNAME, DangerModal, DashIcon, DashboardIcon, DataIcon, DataMarketplace, DatabaseIcon, DesignSystemAntDConfigProvider, DesignSystemContext, DesignSystemProvider, DownloadIcon, DragIcon, Dropdown, DropdownMenu, DuboisDatePicker, ErrorBorderIcon, ErrorFillIcon, ExpandLessIcon, ExpandMoreIcon, ExperimentIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, Folder1Icon, FolderIcon, FontIcon, ForkIcon, Form, FormDubois, FullscreenExitIcon, FullscreenIcon, Gear1Icon, GearIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoBorderIcon, InfoFillIcon, Input, ItalicIcon, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LifesaverIcon, LightningIcon, LinkIcon, LinkRemoveIcon, ListBorderIcon, ListIcon, LoadingIcon, LockBorderIcon, LockFillIcon, LockUnlockedIcon, MIcon, Menu, MinusBoxIcon, MinusCircleBorderIcon, MinusCircleFillIcon, Modal, ModelsIcon, Nav, NavButton, NewWindowIcon, NoIcon, NotebookIcon, NotificationIcon, OfficeIcon, OptGroup, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, Panel, PanelBody, PanelHeader, PanelHeaderButtons, PanelHeaderTitle, PencilIcon, PinBorderIcon, PinCancelIcon, PinFillIcon, PlayCircleBorderIcon, PlayCircleFillIcon, PlayIcon, PlugIcon, PlusCircleBorderIcon, PlusCircleFillIcon, PlusIcon, PlusSquareIcon, Popover, QueryEditorIcon, QueryIcon, QueryListViewIcon, QueryNavIcon, QuestionMarkBorderIcon, QuestionMarkFillIcon, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, ReposIcon, RestoreAntDDefaultClsPrefix, Row, SaveIcon, SchoolIcon, Search1Icon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, Sidebar, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, SlidersIcon, SortAscendingIcon, SortDescendingIcon, SortUnsortedIcon, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarBorderIcon, StarFillIcon, StopCircleBorderIcon, StopCricleFillIcon, StopIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableIcon, Tabs, Tag, Tooltip, TrashIcon, Tree, TreeIcon, Typography, UnderlineIcon, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, Visible, VisibleOff, WarningBorderIcon, WarningFillIcon, WithDesignSystemThemeHoc, WorkspacesIcon, XCircleBorderIcon, XCircleFillIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__Group, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__Password, __INTERNAL_DO_NOT_USE__TextArea, __INTERNAL_DO_NOT_USE__VerticalGroup, getAnimationCss, getButtonEmotionStyles, getPaginationEmotionStyles, getRadioStyles, getTabEmotionStyles, getWrapperStyle, useAntDConfigProviderContext, useDesignSystemFlags, useDesignSystemTheme, useNotification, useThemedStyles, withNotifications };
 //# sourceMappingURL=index.js.map