@cambly/syntax-core 9.0.1 → 9.1.0

package/dist/index.js

@@ -486,7 +486,7 @@ var Badge = ({
 var Badge_default = Badge;
 
 // src/Button/Button.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_classnames4 = __toESM(require_classnames());
 
 // css-module:./colors.module.css#css-module
@@ -575,9 +575,19 @@ var loadingIconSize_default = loadingIconSize;
 // css-module:./Button.module.css#css-module
 var Button_module_default2 = { "button": "_button_1iunh_1", "buttonGap": "_buttonGap_1iunh_9", "fullWidth": "_fullWidth_1iunh_50", "sm": "_sm_1iunh_54", "md": "_md_1iunh_61", "lg": "_lg_1iunh_68", "icon": "_icon_1iunh_75", "smIcon": "_smIcon_1iunh_79", "mdIcon": "_mdIcon_1iunh_86", "lgIcon": "_lgIcon_1iunh_93", "secondaryBorder": "_secondaryBorder_1iunh_100", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_1iunh_104", "loading": "_loading_1iunh_118", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_1iunh_1", "loadingCircle": "_loadingCircle_1iunh_122" };
 
+// src/useIsHydrated.tsx
+var import_react2 = require("react");
+function useIsHydrated() {
+  const [isHydrated, setIsHydrated] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    setIsHydrated(true);
+  }, []);
+  return isHydrated;
+}
+
 // src/Button/Button.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Button = (0, import_react2.forwardRef)(
+var Button = (0, import_react3.forwardRef)(
   ({
     "data-testid": dataTestId,
     text,
@@ -594,6 +604,7 @@ var Button = (0, import_react2.forwardRef)(
     tooltip,
     type = "button"
   }, ref) => {
+    const isHydrated = useIsHydrated();
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "button",
       {
@@ -602,7 +613,7 @@ var Button = (0, import_react2.forwardRef)(
         "aria-label": accessibilityLabel,
         type,
         title: tooltip,
-        disabled: disabled || loading,
+        disabled: !isHydrated || disabled || loading,
         onClick,
         className: (0, import_classnames4.default)(
           Button_module_default2.button,
@@ -707,11 +718,11 @@ function Card({
 }
 
 // src/Checkbox/Checkbox.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_classnames6 = __toESM(require_classnames());
 
 // src/useFocusVisible.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var hasSetupGlobalListeners = false;
 var currentModality = null;
 var changeHandlers = /* @__PURE__ */ new Set();
@@ -787,8 +798,8 @@ function setupGlobalFocusEvents() {
 }
 function useFocusVisible() {
   setupGlobalFocusEvents();
-  const [isFocusVisibleState, setFocusVisible] = (0, import_react3.useState)(isFocusVisible());
-  (0, import_react3.useEffect)(() => {
+  const [isFocusVisibleState, setFocusVisible] = (0, import_react4.useState)(isFocusVisible());
+  (0, import_react4.useEffect)(() => {
     const handler = () => {
       setFocusVisible(isFocusVisible());
     };
@@ -801,7 +812,7 @@ function useFocusVisible() {
 }
 
 // css-module:./Checkbox.module.css#css-module
-var Checkbox_module_default = { "mainContainer": "_mainContainer_1omm6_1", "inputOverlay": "_inputOverlay_1omm6_8", "checkbox": "_checkbox_1omm6_14", "disabled": "_disabled_1omm6_22", "cursorDisabled": "_cursorDisabled_1omm6_26", "cursorEnabled": "_cursorEnabled_1omm6_30", "uncheckedBox": "_uncheckedBox_1omm6_34", "uncheckedBorder": "_uncheckedBorder_1omm6_38", "uncheckedErrorBorder": "_uncheckedErrorBorder_1omm6_42", "checkedBox": "_checkedBox_1omm6_46", "checkedNonError": "_checkedNonError_1omm6_50", "checkedError": "_checkedError_1omm6_54", "sm": "_sm_1omm6_58", "md": "_md_1omm6_64" };
+var Checkbox_module_default = { "mainContainer": "_mainContainer_an7al_1", "inputOverlay": "_inputOverlay_an7al_9", "checkbox": "_checkbox_an7al_17", "disabled": "_disabled_an7al_25", "cursorDisabled": "_cursorDisabled_an7al_29", "cursorEnabled": "_cursorEnabled_an7al_33", "uncheckedBox": "_uncheckedBox_an7al_37", "uncheckedBorder": "_uncheckedBorder_an7al_41", "uncheckedErrorBorder": "_uncheckedErrorBorder_an7al_45", "checkedBox": "_checkedBox_an7al_49", "checkedNonError": "_checkedNonError_an7al_53", "checkedError": "_checkedError_an7al_57", "sm": "_sm_an7al_61", "md": "_md_an7al_67" };
 
 // css-module:../Focus.module.css#css-module
 var Focus_module_default = { "accessibilityOutlineFocus": "_accessibilityOutlineFocus_1h8bq_1" };
@@ -819,13 +830,15 @@ var iconWidth = {
 var Checkbox = ({
   checked = false,
   "data-testid": dataTestId,
-  disabled = false,
+  disabled: disabledProp = false,
   size = "md",
   label,
   error = false,
   onChange
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
+  const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const checkboxStyling = (0, import_classnames6.default)(Checkbox_module_default.checkbox, Checkbox_module_default[size]);
   const uncheckedStyling = (0, import_classnames6.default)(checkboxStyling, Checkbox_module_default.uncheckedBox, {
@@ -892,15 +905,15 @@ var Checkbox = ({
 var Checkbox_default = Checkbox;
 
 // src/Chip/Chip.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_classnames7 = __toESM(require_classnames());
 
 // css-module:./Chip.module.css#css-module
-var Chip_module_default = { "chip": "_chip_1rwvt_1", "selectedChip": "_selectedChip_1rwvt_12", "icon": "_icon_1rwvt_17", "selectedIcon": "_selectedIcon_1rwvt_25", "sm": "_sm_1rwvt_29", "lg": "_lg_1rwvt_35" };
+var Chip_module_default = { "chip": "_chip_nvvgx_1", "disabled": "_disabled_nvvgx_12", "selectedChip": "_selectedChip_nvvgx_17", "icon": "_icon_nvvgx_22", "selectedIcon": "_selectedIcon_nvvgx_30", "sm": "_sm_nvvgx_34", "lg": "_lg_nvvgx_40" };
 
 // src/Chip/Chip.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Chip = (0, import_react5.forwardRef)(
+var Chip = (0, import_react6.forwardRef)(
   ({
     selected = false,
     "data-testid": dataTestId,
@@ -909,8 +922,11 @@ var Chip = (0, import_react5.forwardRef)(
     onChange,
     icon: Icon
   }, ref) => {
+    const isHydrated = useIsHydrated();
+    const disabled = !isHydrated;
     const chipStyles = (0, import_classnames7.default)(Chip_module_default.chip, Chip_module_default[size], {
-      [Chip_module_default.selectedChip]: selected
+      [Chip_module_default.selectedChip]: selected,
+      [Chip_module_default.disabled]: disabled
     });
     const iconStyles = (0, import_classnames7.default)(Chip_module_default.icon, {
       [Chip_module_default.selectedIcon]: selected
@@ -923,6 +939,7 @@ var Chip = (0, import_react5.forwardRef)(
       "button",
       {
         className: chipStyles,
+        disabled,
         "data-testid": dataTestId,
         ref,
         type: "button",
@@ -984,19 +1001,20 @@ var Heading_default = Heading;
 
 // src/IconButton/IconButton.tsx
 var import_classnames8 = __toESM(require_classnames());
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // css-module:./IconButton.module.css#css-module
 var IconButton_module_default = { "iconButton": "_iconButton_4e8qe_1", "sm": "_sm_4e8qe_46", "md": "_md_4e8qe_51", "lg": "_lg_4e8qe_56", "smIcon": "_smIcon_4e8qe_61", "mdIcon": "_mdIcon_4e8qe_68", "lgIcon": "_lgIcon_4e8qe_75", "secondaryBorder": "_secondaryBorder_4e8qe_82", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_4e8qe_86" };
 
 // src/IconButton/IconButton.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+"use client";
 var iconSize2 = {
   ["sm"]: IconButton_module_default.smIcon,
   ["md"]: IconButton_module_default.mdIcon,
   ["lg"]: IconButton_module_default.lgIcon
 };
-var IconButton = (0, import_react6.forwardRef)(
+var IconButton = (0, import_react7.forwardRef)(
   ({
     accessibilityLabel,
     color = "primary",
@@ -1007,6 +1025,7 @@ var IconButton = (0, import_react6.forwardRef)(
     tooltip,
     onClick
   }, ref) => {
+    const isHydrated = useIsHydrated();
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "button",
       {
@@ -1014,7 +1033,7 @@ var IconButton = (0, import_react6.forwardRef)(
         "data-testid": dataTestId,
         type: "button",
         title: tooltip,
-        disabled,
+        disabled: !isHydrated || disabled,
         onClick,
         className: (0, import_classnames8.default)(
           IconButton_module_default.iconButton,
@@ -1036,7 +1055,7 @@ IconButton.displayName = "IconButton";
 var IconButton_default = IconButton;
 
 // src/LinkButton/LinkButton.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_classnames9 = __toESM(require_classnames());
 
 // css-module:../Button/Button.module.css#css-module
@@ -1047,7 +1066,7 @@ var LinkButton_module_default = { "linkButton": "_linkButton_1qjrb_1", "fitConte
 
 // src/LinkButton/LinkButton.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var LinkButton = (0, import_react7.forwardRef)(
+var LinkButton = (0, import_react8.forwardRef)(
   ({
     text,
     href,
@@ -1112,7 +1131,7 @@ var LinkButton_default = LinkButton;
 var import_classnames10 = __toESM(require_classnames());
 
 // src/Modal/FocusTrap.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function queryFocusableAll(el) {
   const selector = [
@@ -1142,9 +1161,9 @@ var focusElement = (el) => {
 function FocusTrap({
   children
 }) {
-  const elRef = (0, import_react8.useRef)(null);
-  const previouslyFocusedElRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const elRef = (0, import_react9.useRef)(null);
+  const previouslyFocusedElRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
     const { current: element } = elRef;
     const focusFirstChild = () => {
       const withinIframe = window !== window.parent;
@@ -1178,9 +1197,9 @@ function FocusTrap({
 }
 
 // src/Modal/StopScroll.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 function StopScroll(props) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const originalStyle = window.getComputedStyle(document.body).overflow;
     document.body.style.overflow = "hidden";
     return () => {
@@ -1301,7 +1320,7 @@ function Modal({
 Modal.displayName = "Modal";
 
 // src/RadioButton/RadioButton.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_classnames11 = __toESM(require_classnames());
 
 // css-module:./RadioButton.module.css#css-module
@@ -1312,7 +1331,7 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 var RadioButton = ({
   checked = false,
   "data-testid": dataTestId,
-  disabled = false,
+  disabled: disabledProp = false,
   error = false,
   id,
   label,
@@ -1321,7 +1340,9 @@ var RadioButton = ({
   size = "md",
   value
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
+  const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const sharedStyles = (0, import_classnames11.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
     [RadioButton_module_default.errorBorderColor]: error,
@@ -1392,7 +1413,7 @@ var RadioButton = ({
 var RadioButton_default = RadioButton;
 
 // src/SelectList/SelectList.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_classnames12 = __toESM(require_classnames());
 
 // ../syntax-design-tokens/dist/js/index.js
@@ -1422,7 +1443,7 @@ var iconSize3 = {
 function SelectList({
   children,
   "data-testid": dataTestId,
-  disabled = false,
+  disabled: disabledProp = false,
   errorText,
   helperText,
   id,
@@ -1433,10 +1454,12 @@ function SelectList({
   selectedValue = "",
   size = "md"
 }) {
-  const reactId = (0, import_react11.useId)();
+  const reactId = (0, import_react12.useId)();
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
   const selectId = id != null ? id : reactId;
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
-  const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react12.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
@@ -1504,7 +1527,7 @@ function SelectList({
 SelectList.Option = SelectOption_default;
 
 // src/TapArea/TapArea.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_classnames13 = __toESM(require_classnames());
 
 // css-module:./TapArea.module.css#css-module
@@ -1512,17 +1535,19 @@ var TapArea_module_default = { "tapArea": "_tapArea_1rlyl_1", "fullWidth": "_ful
 
 // src/TapArea/TapArea.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var TapArea = (0, import_react12.forwardRef)(
+var TapArea = (0, import_react13.forwardRef)(
   ({
     children,
     accessibilityLabel,
     "data-testid": dataTestId,
-    disabled = false,
+    disabled: disabledProp = false,
     fullWidth = true,
     onClick,
     rounding = "none",
     tabIndex = 0
   }, ref) => {
+    const isHydrated = useIsHydrated();
+    const disabled = !isHydrated || disabledProp;
     const handleClick = (event) => !disabled ? onClick(event) : void 0;
     const handleKeyDown = (event) => {
       if (disabled)
@@ -1558,7 +1583,7 @@ TapArea.displayName = "TapArea";
 var TapArea_default = TapArea;
 
 // src/TextField/TextField.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_classnames14 = __toESM(require_classnames());
 
 // css-module:./TextField.module.css#css-module
@@ -1569,7 +1594,7 @@ var import_jsx_runtime21 = require("react/jsx-runtime");
 function TextField({
   autoComplete,
   "data-testid": dataTestId,
-  disabled = false,
+  disabled: disabledProp = false,
   errorText = "",
   helperText = "",
   id,
@@ -1580,7 +1605,9 @@ function TextField({
   type = "text",
   value = ""
 }) {
-  const reactId = (0, import_react13.useId)();
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
+  const reactId = (0, import_react14.useId)();
   const inputId = id != null ? id : reactId;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     Box_default,