@onesy/ui-react 1.0.164 → 1.0.165

package/Form/Form.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -60,34 +61,24 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Form'
 });
 const Form = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
+  const $ = (0, _compilerRuntime.c)(17);
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyForm) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Accordion = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Accordion) || _Accordion.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyForm) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Accordion = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Accordion) || _Accordion.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
   const {
       accordion,
       divider,
       name,
       description,
-      size = 'regular',
+      size: t0,
       start,
       end,
       footer,
       onSubmit: onSubmit_,
-      Component = Line,
+      Component: t1,
       ComponentForm: ComponentForm_,
       HeaderProps,
       TextProps,
@@ -101,28 +92,44 @@ const Form = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const size = t0 === undefined ? "regular" : t0;
+  const Component = t1 === undefined ? Line : t1;
   const {
     classes
   } = useStyle();
-  const ComponentForm = ComponentForm_ !== undefined ? ComponentForm_ : wrapper ? 'div' : 'form';
+  const ComponentForm = ComponentForm_ !== undefined ? ComponentForm_ : wrapper ? "div" : "form";
   const text = name || description;
   const actions = start || end;
   const header = text || actions;
-  let justify = 'unset';
-  if (start && end && !text) justify = 'space-between';
-  if (!start && !text && end) justify = 'flex-end';
-  const onSubmit = ComponentForm === 'form' ? onSubmit_ || _react.default.useCallback(event => {
-    event.preventDefault();
-  }, []) : undefined;
+  let justify = "unset";
+  if (start && end && !text) {
+    justify = "space-between";
+  }
+  if (!start && !text && end) {
+    justify = "flex-end";
+  }
+  const onSubmit = ComponentForm === "form" ? onSubmit_ || _temp : undefined;
   const elements = {
-    name: name && ((0, _utils.is)('string', name) ? /*#__PURE__*/_react.default.createElement(Type, {
-      version: size === 'large' ? 't1' : size === 'regular' ? 't2' : 't3'
+    name: name && ((0, _utils.is)("string", name) ? /*#__PURE__*/_react.default.createElement(Type, {
+      version: size === "large" ? "t1" : size === "regular" ? "t2" : "t3"
     }, name) : name),
-    description: description && ((0, _utils.is)('string', description) ? /*#__PURE__*/_react.default.createElement(Type, {
-      version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
+    description: description && ((0, _utils.is)("string", description) ? /*#__PURE__*/_react.default.createElement(Type, {
+      version: size === "large" ? "b1" : size === "regular" ? "b2" : "b3"
     }, description) : description)
   };
   if (accordion) {
+    const t2 = size === "large" ? 1 : size === "regular" ? 0.5 : 0.5;
+    let t3;
+    if ($[0] !== t2) {
+      t3 = {
+        direction: "column",
+        gap: t2
+      };
+      $[0] = t2;
+      $[1] = t3;
+    } else {
+      t3 = $[1];
+    }
     return /*#__PURE__*/_react.default.createElement(Accordion, (0, _extends2.default)({
       tonal: true,
       color: "primary",
@@ -136,15 +143,12 @@ const Form = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       mainPaddingHorizontal: "none",
       start: start,
       end: end,
-      HeaderProps: {
-        direction: 'column',
-        gap: size === 'large' ? 1 : size === 'regular' ? 0.5 : 0.5
-      }
+      HeaderProps: t3
     }, AccordionProps, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Form', theme) && ['onesy-Form-root'], AccordionProps === null || AccordionProps === void 0 ? void 0 : AccordionProps.className, className, classes.root, classes.root_accordion, divider && classes.divider])
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Form", theme) && ["onesy-Form-root"], AccordionProps === null || AccordionProps === void 0 ? void 0 : AccordionProps.className, className, classes.root, classes.root_accordion, divider && classes.divider])
     }, other), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
       ref: ref,
-      gap: size === 'large' ? 3 : size === 'regular' ? 2.5 : 2,
+      gap: size === "large" ? 3 : size === "regular" ? 2.5 : 2,
       direction: "column",
       justify: "unset",
       align: "flex-start",
@@ -160,17 +164,13 @@ const Form = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       className: classes.footer
     }, footer)));
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: ref,
-    gap: size === 'large' ? 3 : size === 'regular' ? 2.5 : 2,
-    direction: "column",
-    justify: "unset",
-    align: "flex-start",
-    Component: ComponentForm,
-    onSubmit: onSubmit,
-    fullWidth: true,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Form', theme) && ['onesy-Form-root', `onesy-Form-size-${size}`], className, classes.root, divider && classes.divider])
-  }, other), header && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  const t2 = size === "large" ? 3 : size === "regular" ? 2.5 : 2;
+  const t3 = "column";
+  const t4 = "unset";
+  const t5 = "flex-start";
+  const t6 = true;
+  const t7 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Form", theme) && ["onesy-Form-root", `onesy-Form-size-${size}`], className, classes.root, divider && classes.divider]);
+  const t8 = header && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
     gap: 1,
     direction: "row",
     align: "center",
@@ -179,7 +179,7 @@ const Form = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, HeaderProps), start && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({}, AsideProps, StartProps, {
     className: (0, _styleReact.classNames)([AsideProps === null || AsideProps === void 0 ? void 0 : AsideProps.className, StartProps === null || StartProps === void 0 ? void 0 : StartProps.className, classes.aside])
   }), start), text && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: size === 'large' ? 1 : size === 'regular' ? 0.5 : 0.5,
+    gap: size === "large" ? 1 : size === "regular" ? 0.5 : 0.5,
     direction: "column",
     flex: true
   }, TextProps), elements.name, elements.description), end && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
@@ -188,12 +188,53 @@ const Form = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     align: "center"
   }, AsideProps, EndProps, {
     className: (0, _styleReact.classNames)([AsideProps === null || AsideProps === void 0 ? void 0 : AsideProps.className, EndProps === null || EndProps === void 0 ? void 0 : EndProps.className, classes.aside])
-  }), end)), children, footer && /*#__PURE__*/_react.default.createElement(Line, {
-    direction: "row",
-    justify: "flex-end",
-    fullWidth: true,
-    className: classes.footer
-  }, footer));
+  }), end));
+  let t9;
+  if ($[2] !== Line || $[3] !== classes.footer || $[4] !== footer) {
+    t9 = footer && /*#__PURE__*/_react.default.createElement(Line, {
+      direction: "row",
+      justify: "flex-end",
+      fullWidth: true,
+      className: classes.footer
+    }, footer);
+    $[2] = Line;
+    $[3] = classes.footer;
+    $[4] = footer;
+    $[5] = t9;
+  } else {
+    t9 = $[5];
+  }
+  let t10;
+  if ($[6] !== Component || $[7] !== ComponentForm || $[8] !== children || $[9] !== onSubmit || $[10] !== other || $[11] !== ref || $[12] !== t2 || $[13] !== t7 || $[14] !== t8 || $[15] !== t9) {
+    t10 = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+      ref: ref,
+      gap: t2,
+      direction: t3,
+      justify: t4,
+      align: t5,
+      Component: ComponentForm,
+      onSubmit: onSubmit,
+      fullWidth: t6,
+      className: t7
+    }, other), t8, children, t9);
+    $[6] = Component;
+    $[7] = ComponentForm;
+    $[8] = children;
+    $[9] = onSubmit;
+    $[10] = other;
+    $[11] = ref;
+    $[12] = t2;
+    $[13] = t7;
+    $[14] = t8;
+    $[15] = t9;
+    $[16] = t10;
+  } else {
+    t10 = $[16];
+  }
+  return t10;
 });
 Form.displayName = 'onesy-Form';
-var _default = exports.default = Form;
+var _default = exports.default = Form;
+function _temp(event) {
+  event.preventDefault();
+}

package/FormRow/FormRow.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElement } from '../types';
-export type IFormRow = ILine & {
+export declare type IFormRow = ILine & {
     name?: string | IElement;
     description?: string | IElement;
     start?: any;

package/FormRow/FormRow.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -38,19 +39,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-FormRow'
 });
 const FormRow = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
+  const $ = (0, _compilerRuntime.c)(18);
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyFormRow) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyFormRow) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
   const {
       name,
       description,
@@ -58,8 +52,8 @@ const FormRow = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       end,
       row,
       footer,
-      responsive = true,
-      Component = Line,
+      responsive: t0,
+      Component: t1,
       HeaderProps,
       MainProps,
       TextProps,
@@ -70,24 +64,28 @@ const FormRow = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const responsive = t0 === undefined ? true : t0;
+  const Component = t1 === undefined ? Line : t1;
   const {
     classes
   } = useStyle();
   const text = name || description;
   const actions = start || end;
   const header = text || actions;
-  let justify = 'unset';
-  if (start && end && !text) justify = 'space-between';
-  if (!start && !text && end) justify = 'flex-end';
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: ref,
-    gap: 1,
-    direction: "column",
-    justify: "unset",
-    align: "unset",
-    fullWidth: true,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('FormRow', theme) && ['onesy-FormRow-root'], className, classes.root])
-  }, other), header && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  let justify = "unset";
+  if (start && end && !text) {
+    justify = "space-between";
+  }
+  if (!start && !text && end) {
+    justify = "flex-end";
+  }
+  const t2 = 1;
+  const t3 = "column";
+  const t4 = "unset";
+  const t5 = "unset";
+  const t6 = true;
+  const t7 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("FormRow", theme) && ["onesy-FormRow-root"], className, classes.root]);
+  const t8 = header && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
     direction: "row",
     align: "center",
     justify: justify,
@@ -98,9 +96,9 @@ const FormRow = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     gap: 0.5,
     direction: "column",
     flex: true
-  }, TextProps), name && ((0, _utils.is)('string', name) ? /*#__PURE__*/_react.default.createElement(Type, {
+  }, TextProps), name && ((0, _utils.is)("string", name) ? /*#__PURE__*/_react.default.createElement(Type, {
     version: "l2"
-  }, name) : name), description && ((0, _utils.is)('string', description) ? /*#__PURE__*/_react.default.createElement(Type, {
+  }, name) : name), description && ((0, _utils.is)("string", description) ? /*#__PURE__*/_react.default.createElement(Type, {
     version: "b3"
   }, description) : description)), end && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
     gap: 0,
@@ -108,20 +106,69 @@ const FormRow = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     align: "center"
   }, AsideProps, EndProps, {
     className: (0, _styleReact.classNames)([AsideProps === null || AsideProps === void 0 ? void 0 : AsideProps.className, EndProps === null || EndProps === void 0 ? void 0 : EndProps.className, classes.aside])
-  }), end)), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 2,
-    direction: row ? responsive ? {
-      default: 'row',
-      1400: 'column'
-    } : 'row' : 'column',
-    fullWidth: true,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('FormRow', theme) && ['onesy-FormRow-main'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, row && classes.row])
-  }, MainProps), children), footer && /*#__PURE__*/_react.default.createElement(Line, {
-    direction: "row",
-    justify: "flex-end",
-    fullWidth: true,
-    className: classes.footer
-  }, footer));
+  }), end));
+  const t9 = 2;
+  const t10 = row ? responsive ? {
+    default: "row",
+    1400: "column"
+  } : "row" : "column";
+  const t11 = true;
+  const t12 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("FormRow", theme) && ["onesy-FormRow-main"], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, row && classes.row]);
+  let t13;
+  if ($[0] !== Line || $[1] !== MainProps || $[2] !== children || $[3] !== t10 || $[4] !== t12) {
+    t13 = /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      gap: t9,
+      direction: t10,
+      fullWidth: t11,
+      className: t12
+    }, MainProps), children);
+    $[0] = Line;
+    $[1] = MainProps;
+    $[2] = children;
+    $[3] = t10;
+    $[4] = t12;
+    $[5] = t13;
+  } else {
+    t13 = $[5];
+  }
+  let t14;
+  if ($[6] !== Line || $[7] !== classes.footer || $[8] !== footer) {
+    t14 = footer && /*#__PURE__*/_react.default.createElement(Line, {
+      direction: "row",
+      justify: "flex-end",
+      fullWidth: true,
+      className: classes.footer
+    }, footer);
+    $[6] = Line;
+    $[7] = classes.footer;
+    $[8] = footer;
+    $[9] = t14;
+  } else {
+    t14 = $[9];
+  }
+  let t15;
+  if ($[10] !== Component || $[11] !== other || $[12] !== ref || $[13] !== t13 || $[14] !== t14 || $[15] !== t7 || $[16] !== t8) {
+    t15 = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+      ref: ref,
+      gap: t2,
+      direction: t3,
+      justify: t4,
+      align: t5,
+      fullWidth: t6,
+      className: t7
+    }, other), t8, t13, t14);
+    $[10] = Component;
+    $[11] = other;
+    $[12] = ref;
+    $[13] = t13;
+    $[14] = t14;
+    $[15] = t7;
+    $[16] = t8;
+    $[17] = t15;
+  } else {
+    t15 = $[17];
+  }
+  return t15;
 });
 FormRow.displayName = 'onesy-FormRow';
 var _default = exports.default = FormRow;

package/Forms/Forms.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
-export type IForms = ILine & {
+export declare type IForms = ILine & {
     divider?: boolean;
 };
 declare const Forms: React.FC<IForms>;

package/Forms/Forms.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _Line = _interopRequireDefault(require("../Line"));
@@ -21,38 +22,54 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Forms'
 });
 const Forms = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(6);
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyForms) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyForms) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
   const {
       divider,
-      Component = Line,
+      Component: t0,
       className,
       children: children_
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const Component = t0 === undefined ? Line : t0;
   const {
     classes
   } = useStyle();
   const children = _react.default.Children.toArray(children_);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: ref,
-    gap: 4,
-    direction: "column",
-    justify: "unset",
-    align: "unset",
-    fullWidth: true,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Forms', theme) && ['onesy-Forms-root'], className, classes.root])
-  }, other), children.map((form, index) => /*#__PURE__*/_react.default.cloneElement(form, {
+  const t1 = 4;
+  const t2 = "column";
+  const t3 = "unset";
+  const t4 = "unset";
+  const t5 = true;
+  const t6 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("Forms", theme) && ["onesy-Forms-root"], className, classes.root]);
+  const t7 = children.map((form, index) => /*#__PURE__*/_react.default.cloneElement(form, {
     key: index,
     divider: index < children.length - 1
-  })));
+  }));
+  let t8;
+  if ($[0] !== Component || $[1] !== other || $[2] !== ref || $[3] !== t6 || $[4] !== t7) {
+    t8 = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+      ref: ref,
+      gap: t1,
+      direction: t2,
+      justify: t3,
+      align: t4,
+      fullWidth: t5,
+      className: t6
+    }, other), t7);
+    $[0] = Component;
+    $[1] = other;
+    $[2] = ref;
+    $[3] = t6;
+    $[4] = t7;
+    $[5] = t8;
+  } else {
+    t8 = $[5];
+  }
+  return t8;
 });
 Forms.displayName = 'onesy-Forms';
 var _default = exports.default = Forms;

package/Frame/Frame.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
-export type IFrame = ILine & {
+export declare type IFrame = ILine & {
     url?: string;
     src?: string;
     value?: any;

package/Frame/Frame.js

@@ -59,28 +59,14 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Frame'
 });
 const Frame = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyFrame) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const IconButton = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
-  }, [theme]);
-  const Tooltip = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const IFrameElement = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IFrame) || _IFrame.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyFrame) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
+  const IFrameElement = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IFrame) || _IFrame.default;
   const {
       url,
       src,
@@ -105,12 +91,12 @@ const Frame = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const [responsive, setResponsive] = _react.default.useState();
-  const onResponsive = _react.default.useCallback(value_ => {
+  const onResponsive = value_ => {
     setResponsive(previous => {
       if (previous === value_) return '';
       return value_;
     });
-  }, []);
+  };
   const responsiveOptions = [{
     name: l('Mobile'),
     icon: IconMobile,

package/Grid/Grid.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IValueBreakpoints, IPropsAny } from '../types';
-export type IGridValues = Partial<Record<IValueBreakpoints, number>>;
-export type IGrid = ILine & {
+export declare type IGridValues = Partial<Record<IValueBreakpoints, number>>;
+export declare type IGrid = ILine & {
     auto?: boolean;
     columns?: number | IGridValues;
     parentGap?: any;