@onesy/ui-react 1.0.172 → 1.0.174

package/esm/TimelineItem/TimelineItem.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["orientation", "start", "end", "DividerProps", "iconProps", "icon", "Divider", "Component", "className", "children"];
@@ -10,6 +9,7 @@ import SurfaceElement from '../Surface';
 import DividerElement from '../Divider';
 import LineElement from '../Line';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     maxWidth: '100%',
@@ -67,7 +67,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-TimelineItem'
 });
-const TimelineItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const TimelineItem = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTimelineItem?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -102,33 +102,38 @@ const TimelineItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   if (!Divider_) {
     DividerProps.orientation = orientation;
   }
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     gap: 0,
     align: "unset",
     justify: "unset",
     direction: direction,
     Component: Component,
     className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-root'], className, classes.root, classes[`orientation_${orientation}`]])
-  }, other), start && /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-aside', 'onesy-TimelineItem-item', 'onesy-TimelineItem-start'], classes.aside, classes.item, classes.start, classes[`aside_orientation_${orientation}`]])
-  }, start), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: lineDirection,
-    align: "center",
-    justify: "flex-start",
-    className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-item', 'onesy-TimelineItem-middle'], classes.item, classes.middle])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-icon-wrapper'], classes.iconWrapper, classes[`iconWrapper_orientation_${orientation}`]])
-  }, icon ? icon : /*#__PURE__*/React.createElement(Surface, _extends({}, iconProps, {
-    tonal: true,
-    className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-icon'], iconProps?.className, classes.icon])
-  }))), Divider_ ? Divider_ : /*#__PURE__*/React.createElement(Divider, _extends({}, DividerProps, {
-    className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-divider'], DividerProps?.className, classes.divider, classes[`divider_orientation_${orientation}`]]),
-    flex: true
-  }))), (end || children) && /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-aside', 'onesy-TimelineItem-item', 'onesy-TimelineItem-end'], classes.aside, classes.item, classes.end, classes[`aside_orientation_${orientation}`]])
-  }, end || children));
-});
+  }, other), {}, {
+    children: [start && /*#__PURE__*/_jsx("div", {
+      className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-aside', 'onesy-TimelineItem-item', 'onesy-TimelineItem-start'], classes.aside, classes.item, classes.start, classes[`aside_orientation_${orientation}`]]),
+      children: start
+    }), /*#__PURE__*/_jsxs(Line, {
+      gap: 0,
+      direction: lineDirection,
+      align: "center",
+      justify: "flex-start",
+      className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-item', 'onesy-TimelineItem-middle'], classes.item, classes.middle]),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-icon-wrapper'], classes.iconWrapper, classes[`iconWrapper_orientation_${orientation}`]]),
+        children: icon ? icon : /*#__PURE__*/_jsx(Surface, _objectSpread(_objectSpread({}, iconProps), {}, {
+          tonal: true,
+          className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-icon'], iconProps?.className, classes.icon])
+        }))
+      }), Divider_ ? Divider_ : /*#__PURE__*/_jsx(Divider, _objectSpread(_objectSpread({}, DividerProps), {}, {
+        className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-divider'], DividerProps?.className, classes.divider, classes[`divider_orientation_${orientation}`]]),
+        flex: true
+      }))]
+    }), (end || children) && /*#__PURE__*/_jsx("div", {
+      className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-aside', 'onesy-TimelineItem-item', 'onesy-TimelineItem-end'], classes.aside, classes.item, classes.end, classes[`aside_orientation_${orientation}`]]),
+      children: end || children
+    })]
+  }));
+};
 TimelineItem.displayName = 'onesy-TimelineItem';
 export default TimelineItem;

package/esm/Timer/Timer.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "renderValue", "icon", "onStart", "onFlag", "onPause", "onStop", "onResume", "Icon", "IconStart", "IconPause", "IconFlag", "IconStop", "TreeProps", "TooltipProps", "IconButtonProps", "IconProps", "Component", "className"];
+const _excluded = ["ref", "tonal", "color", "renderValue", "icon", "onStart", "onFlag", "onPause", "onStop", "onResume", "Icon", "IconStart", "IconPause", "IconFlag", "IconStop", "TreeProps", "TooltipProps", "IconButtonProps", "IconProps", "Component", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -22,6 +21,7 @@ import SurfaceElement from '../Surface';
 import LineElement from '../Line';
 import IconButtonElement from '../IconButton';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     minWidth: '300px',
@@ -50,7 +50,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Timer'
 });
-const Timer = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Timer = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTimer?.props?.default), props_);
@@ -63,6 +63,7 @@ const Timer = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Surface = theme?.elements?.Surface || SurfaceElement;
   const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       renderValue,
@@ -180,7 +181,7 @@ const Timer = /*#__PURE__*/React.forwardRef((props_, ref) => {
     return valueNew;
   };
   const value_ = status === 'initial' ? '00:00.00' : valueFormat(value);
-  return /*#__PURE__*/React.createElement(Surface, _extends({
+  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if (is('function', ref)) ref(item);else if (ref?.current) ref.current = item;
@@ -197,96 +198,138 @@ const Timer = /*#__PURE__*/React.forwardRef((props_, ref) => {
       Component
     },
     className: classNames([staticClassName('Timer', theme) && ['onesy-Timer-root'], className, classes.root])
-  }, other), icon && /*#__PURE__*/React.createElement(Icon_, _extends({
-    size: "medium"
-  }, IconProps, {
-    style: _objectSpread({
-      marginBottom: 4
-    }, IconProps?.style)
-  })), is('function', renderValue) ? renderValue(value_) : /*#__PURE__*/React.createElement(Type, {
-    version: "h1",
-    className: classNames([staticClassName('Timer', theme) && ['onesy-Timer-value'], classes.value])
-  }, value_), /*#__PURE__*/React.createElement(Expand, {
-    in: expand,
-    parent: refs.root.current,
-    onExited: onExited,
-    className: classNames([staticClassName('Timer', theme) && ['onesy-Timer-flags-wrapper'], classes.flags_wrapper])
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Surface, {
-    tonal: tonal,
-    color: color
-  }, ({
-    palette
-  }) => {
-    return /*#__PURE__*/React.createElement(Tree, _extends({
-      openDefault: true,
-      middle: l('Flags'),
-      indicator: true,
-      indicatorPosition: "end",
+  }, other), {}, {
+    children: [icon && /*#__PURE__*/_jsx(Icon_, _objectSpread(_objectSpread({
+      size: "medium"
+    }, IconProps), {}, {
+      style: _objectSpread({
+        marginBottom: 4
+      }, IconProps?.style)
+    })), is('function', renderValue) ? renderValue(value_) : /*#__PURE__*/_jsx(Type, {
+      version: "h1",
+      className: classNames([staticClassName('Timer', theme) && ['onesy-Timer-value'], classes.value]),
+      children: value_
+    }), /*#__PURE__*/_jsx(Expand, {
+      in: expand,
       parent: refs.root.current,
-      TreeProps: {
-        className: classNames([staticClassName('Timer', theme) && ['onesy-Timer-flags'], classes.flags])
-      }
-    }, TreeProps), flags.map((item_0, index) => /*#__PURE__*/React.createElement(Tree, _extends({
-      key: index,
-      icon: /*#__PURE__*/React.createElement(IconFlag, {
-        size: "small",
-        color: palette[40]
-      }),
-      middle: /*#__PURE__*/React.createElement(Line, {
-        direction: "row",
-        align: "center",
-        justify: "space-between",
-        className: classNames([classes.flag])
-      }, /*#__PURE__*/React.createElement(Type, {
-        version: "b2"
-      }, getLeadingZerosNumber(index + 1)), /*#__PURE__*/React.createElement(Type, {
-        version: "b2",
-        style: {
-          opacity: '0.7'
-        }
-      }, "+", valueFormat(item_0 - (flags[index - 1] || 0))), /*#__PURE__*/React.createElement(Type, {
-        version: "b2"
-      }, valueFormat(item_0))),
-      noPadding: true,
-      indicator: true,
-      indicatorPosition: "end"
-    }, TreeProps))));
-  }))), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    className: classNames([staticClassName('Timer', theme) && ['onesy-Timer-actions'], classes.actions])
-  }, status === 'initial' && /*#__PURE__*/React.createElement(Fade, {
-    in: true,
-    add: true
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Start')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onStart
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconStart, null))))), status === 'running' && /*#__PURE__*/React.createElement(Fade, {
-    in: true,
-    add: true
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Flag')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onFlag
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconFlag, null))), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Pause')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onPause
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconPause, null))))), status === 'paused' && /*#__PURE__*/React.createElement(Fade, {
-    in: true,
-    add: true
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Stop')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onStop
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconStop, null))), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Resume')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onResume
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconStart, null)))))));
-});
+      onExited: onExited,
+      className: classNames([staticClassName('Timer', theme) && ['onesy-Timer-flags-wrapper'], classes.flags_wrapper]),
+      children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(Surface, {
+          tonal: tonal,
+          color: color,
+          children: ({
+            palette
+          }) => {
+            return /*#__PURE__*/_jsx(Tree, _objectSpread(_objectSpread({
+              openDefault: true,
+              middle: l('Flags'),
+              indicator: true,
+              indicatorPosition: "end",
+              parent: refs.root.current,
+              TreeProps: {
+                className: classNames([staticClassName('Timer', theme) && ['onesy-Timer-flags'], classes.flags])
+              }
+            }, TreeProps), {}, {
+              children: flags.map((item_0, index) => /*#__PURE__*/_jsx(Tree, _objectSpread({
+                icon: /*#__PURE__*/_jsx(IconFlag, {
+                  size: "small",
+                  color: palette[40]
+                }),
+                middle: /*#__PURE__*/_jsxs(Line, {
+                  direction: "row",
+                  align: "center",
+                  justify: "space-between",
+                  className: classNames([classes.flag]),
+                  children: [/*#__PURE__*/_jsx(Type, {
+                    version: "b2",
+                    children: getLeadingZerosNumber(index + 1)
+                  }), /*#__PURE__*/_jsxs(Type, {
+                    version: "b2",
+                    style: {
+                      opacity: '0.7'
+                    },
+                    children: ["+", valueFormat(item_0 - (flags[index - 1] || 0))]
+                  }), /*#__PURE__*/_jsx(Type, {
+                    version: "b2",
+                    children: valueFormat(item_0)
+                  })]
+                }),
+                noPadding: true,
+                indicator: true,
+                indicatorPosition: "end"
+              }, TreeProps), index))
+            }));
+          }
+        })
+      })
+    }), /*#__PURE__*/_jsxs(Line, {
+      gap: 1,
+      direction: "row",
+      align: "center",
+      justify: "center",
+      className: classNames([staticClassName('Timer', theme) && ['onesy-Timer-actions'], classes.actions]),
+      children: [status === 'initial' && /*#__PURE__*/_jsx(Fade, {
+        in: true,
+        add: true,
+        children: /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+            name: l('Start')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: onStart
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconStart, {})
+            }))
+          }))
+        })
+      }), status === 'running' && /*#__PURE__*/_jsx(Fade, {
+        in: true,
+        add: true,
+        children: /*#__PURE__*/_jsxs("span", {
+          children: [/*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+            name: l('Flag')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: onFlag
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconFlag, {})
+            }))
+          })), /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+            name: l('Pause')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: onPause
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconPause, {})
+            }))
+          }))]
+        })
+      }), status === 'paused' && /*#__PURE__*/_jsx(Fade, {
+        in: true,
+        add: true,
+        children: /*#__PURE__*/_jsxs("span", {
+          children: [/*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+            name: l('Stop')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: onStop
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconStop, {})
+            }))
+          })), /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+            name: l('Resume')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: onResume
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconStart, {})
+            }))
+          }))]
+        })
+      })]
+    })]
+  }));
+};
 Timer.displayName = 'onesy-Timer';
 export default Timer;

package/esm/ToggleButton/ToggleButton.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["size", "icon", "className"];
@@ -9,6 +8,7 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import ChipElement from '../Chip';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     '&.onesy-Chip-root': {
@@ -33,8 +33,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-ToggleButton'
 });
-const ToggleButton = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(7);
+const ToggleButton = props_ => {
+  const $ = _c(6);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyToggleButton?.props?.default), props_);
   const Chip = theme?.elements?.Chip || ChipElement;
@@ -51,9 +51,8 @@ const ToggleButton = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t1 = true;
   const t2 = classNames([staticClassName("ToggleButton", theme) && ["onesy-ToggleButton-root", `onesy-ToggleButton-size-${size}`], className, classes.root, classes[`size_${size}`]]);
   let t3;
-  if ($[0] !== Chip || $[1] !== icon || $[2] !== other || $[3] !== ref || $[4] !== size || $[5] !== t2) {
-    t3 = /*#__PURE__*/React.createElement(Chip, _extends({
-      ref: ref,
+  if ($[0] !== Chip || $[1] !== icon || $[2] !== other || $[3] !== size || $[4] !== t2) {
+    t3 = /*#__PURE__*/_jsx(Chip, _objectSpread({
       size: size,
       icon: icon,
       noCheckIcon: t1,
@@ -62,14 +61,13 @@ const ToggleButton = /*#__PURE__*/React.forwardRef((props_, ref) => {
     $[0] = Chip;
     $[1] = icon;
     $[2] = other;
-    $[3] = ref;
-    $[4] = size;
-    $[5] = t2;
-    $[6] = t3;
+    $[3] = size;
+    $[4] = t2;
+    $[5] = t3;
   } else {
-    t3 = $[6];
+    t3 = $[5];
   }
   return t3;
-});
+};
 ToggleButton.displayName = 'onesy-ToggleButton';
 export default ToggleButton;

package/esm/ToggleButtons/ToggleButtons.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["className"];
@@ -9,13 +8,14 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import ButtonsElement from '../Buttons';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-ToggleButtons'
 });
-const ToggleButtons = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(5);
+const ToggleButtons = props_ => {
+  const $ = _c(4);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyToggleButtons?.props?.default), props_);
   const Buttons = theme?.elements?.Buttons || ButtonsElement;
@@ -28,9 +28,8 @@ const ToggleButtons = /*#__PURE__*/React.forwardRef((props_, ref) => {
   } = useStyle();
   const t0 = classNames([staticClassName("ToggleButtons", theme) && ["onesy-ToggleButtons-root"], className, classes.root]);
   let t1;
-  if ($[0] !== Buttons || $[1] !== other || $[2] !== ref || $[3] !== t0) {
-    t1 = /*#__PURE__*/React.createElement(Buttons, _extends({
-      ref: ref,
+  if ($[0] !== Buttons || $[1] !== other || $[2] !== t0) {
+    t1 = /*#__PURE__*/_jsx(Buttons, _objectSpread({
       className: t0,
       color: "default",
       chip: true,
@@ -38,13 +37,12 @@ const ToggleButtons = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }, other));
     $[0] = Buttons;
     $[1] = other;
-    $[2] = ref;
-    $[3] = t0;
-    $[4] = t1;
+    $[2] = t0;
+    $[3] = t1;
   } else {
-    t1 = $[4];
+    t1 = $[3];
   }
   return t1;
-});
+};
 ToggleButtons.displayName = 'onesy-ToggleButtons';
 export default ToggleButtons;