@onesy/ui-react 1.0.0

package/esm/Form/Form.js

@@ -0,0 +1,180 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["accordion", "divider", "name", "description", "size", "start", "end", "footer", "onSubmit", "Component", "ComponentForm", "HeaderProps", "TextProps", "AsideProps", "StartProps", "EndProps", "AccordionProps", "AccordionMainProps", "wrapper", "className", "children"];
+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';
+import { is } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import LineElement from '../Line';
+import AccordionElement from '../Accordion';
+import TypeElement from '../Type';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {},
+  root_accordion: {
+    '&.onesy-Surface-root': {
+      background: 'transparent'
+    }
+  },
+  aside: {
+    flex: '0 0 auto'
+  },
+  divider: {
+    position: 'relative',
+    paddingBottom: theme.methods.space.value(4, 'px'),
+    '&::after': {
+      content: "''",
+      position: 'absolute',
+      bottom: '0px',
+      width: '100%',
+      height: '1px',
+      background: theme.palette.text.default.primary,
+      opacity: theme.palette.light ? '0.07' : '0.1'
+    },
+    '&:last-child': {
+      paddingBottom: 0,
+      '&::after': {
+        display: 'none'
+      }
+    }
+  },
+  size_small_form_accordion: {
+    marginTop: '16px'
+  },
+  size_regular_form_accordion: {
+    marginTop: '24px'
+  },
+  size_large_form_accordion: {
+    marginTop: '32px'
+  }
+}), {
+  name: 'onesy-Form'
+});
+const Form = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyForm?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Accordion = React.useMemo(() => theme?.elements?.Accordion || AccordionElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      accordion,
+      divider,
+      name,
+      description,
+      size = 'regular',
+      start,
+      end,
+      footer,
+      onSubmit: onSubmit_,
+      Component = Line,
+      ComponentForm: ComponentForm_,
+      HeaderProps,
+      TextProps,
+      AsideProps,
+      StartProps,
+      EndProps,
+      AccordionProps,
+      AccordionMainProps,
+      wrapper,
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  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.useCallback(event => {
+    event.preventDefault();
+  }, []) : undefined;
+  const elements = {
+    name: name && (is('string', name) ? /*#__PURE__*/React.createElement(Type, {
+      version: size === 'large' ? 't1' : size === 'regular' ? 't2' : 't3'
+    }, name) : name),
+    description: description && (is('string', description) ? /*#__PURE__*/React.createElement(Type, {
+      version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
+    }, description) : description)
+  };
+  if (accordion) {
+    return /*#__PURE__*/React.createElement(Accordion, _extends({
+      tonal: true,
+      color: "primary",
+      primary: elements.name,
+      secondary: elements.description,
+      expandedMarginVertical: "none",
+      expandedHeaderPaddingVertical: "none",
+      headerPaddingVertical: "none",
+      headerPaddingHorizontal: "none",
+      mainPaddingVertical: "none",
+      mainPaddingHorizontal: "none",
+      start: start,
+      end: end,
+      HeaderProps: {
+        direction: 'column',
+        gap: size === 'large' ? 1 : size === 'regular' ? 0.5 : 0.5
+      }
+    }, AccordionProps, {
+      className: classNames([staticClassName('Form', theme) && ['onesy-Form-root'], AccordionProps?.className, className, classes.root, classes.root_accordion, divider && classes.divider])
+    }, other), /*#__PURE__*/React.createElement(Line, _extends({
+      ref: ref,
+      gap: size === 'large' ? 3 : size === 'regular' ? 2.5 : 2,
+      direction: "column",
+      justify: "unset",
+      align: "flex-start",
+      Component: ComponentForm,
+      onSubmit: onSubmit,
+      fullWidth: true
+    }, AccordionMainProps, {
+      className: classNames([AccordionMainProps?.className, classes[`size_${size}_form_accordion`]])
+    }), children, footer && /*#__PURE__*/React.createElement(Line, {
+      direction: "row",
+      justify: "flex-end",
+      fullWidth: true,
+      className: classes.footer
+    }, footer)));
+  }
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    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: classNames([staticClassName('Form', theme) && ['onesy-Form-root', `onesy-Form-size-${size}`], className, classes.root, divider && classes.divider])
+  }, other), header && /*#__PURE__*/React.createElement(Line, _extends({
+    gap: 1,
+    direction: "row",
+    align: "center",
+    justify: justify,
+    fullWidth: true
+  }, HeaderProps), start && /*#__PURE__*/React.createElement(Line, _extends({}, AsideProps, StartProps, {
+    className: classNames([AsideProps?.className, StartProps?.className, classes.aside])
+  }), start), text && /*#__PURE__*/React.createElement(Line, _extends({
+    gap: size === 'large' ? 1 : size === 'regular' ? 0.5 : 0.5,
+    direction: "column",
+    flex: true
+  }, TextProps), elements.name, elements.description), end && /*#__PURE__*/React.createElement(Line, _extends({
+    gap: 0,
+    direction: "row",
+    align: "center"
+  }, AsideProps, EndProps, {
+    className: classNames([AsideProps?.className, EndProps?.className, classes.aside])
+  }), end)), children, footer && /*#__PURE__*/React.createElement(Line, {
+    direction: "row",
+    justify: "flex-end",
+    fullWidth: true,
+    className: classes.footer
+  }, footer));
+});
+Form.displayName = 'onesy-Form';
+export default Form;

package/esm/Form/index.js

@@ -0,0 +1 @@
+export { default } from './Form';

package/esm/FormRow/FormRow.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["name", "description", "start", "end", "row", "footer", "responsive", "Component", "HeaderProps", "MainProps", "TextProps", "AsideProps", "StartProps", "EndProps", "className", "children"];
+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';
+import { is } from '@onesy/utils';
+import { style as styleMethod, classNames, useOnesyTheme } from '@onesy/style-react';
+import LineElement from '../Line';
+import TypeElement from '../Type';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {},
+  aside: {
+    flex: '0 0 auto'
+  },
+  row: {
+    '& > *': {
+      flex: '1 1 auto'
+    }
+
+    // '& .onesy-TextField-root, & .onesy-TextField-wrapper': {
+    //   width: '100%'
+    // }
+  },
+  footer: {
+    marginTop: '8px'
+  }
+}), {
+  name: 'onesy-FormRow'
+});
+const FormRow = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyFormRow?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      name,
+      description,
+      start,
+      end,
+      row,
+      footer,
+      responsive = true,
+      Component = Line,
+      HeaderProps,
+      MainProps,
+      TextProps,
+      AsideProps,
+      StartProps,
+      EndProps,
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  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.createElement(Component, _extends({
+    ref: ref,
+    gap: 1,
+    direction: "column",
+    justify: "unset",
+    align: "unset",
+    fullWidth: true,
+    className: classNames([staticClassName('FormRow', theme) && ['onesy-FormRow-root'], className, classes.root])
+  }, other), header && /*#__PURE__*/React.createElement(Line, _extends({
+    direction: "row",
+    align: "center",
+    justify: justify,
+    fullWidth: true
+  }, HeaderProps), start && /*#__PURE__*/React.createElement(Line, _extends({}, AsideProps, StartProps, {
+    className: classNames([AsideProps?.className, StartProps?.className, classes.aside])
+  }), start), text && /*#__PURE__*/React.createElement(Line, _extends({
+    gap: 0.5,
+    direction: "column",
+    flex: true
+  }, TextProps), name && (is('string', name) ? /*#__PURE__*/React.createElement(Type, {
+    version: "l2"
+  }, name) : name), description && (is('string', description) ? /*#__PURE__*/React.createElement(Type, {
+    version: "b3"
+  }, description) : description)), end && /*#__PURE__*/React.createElement(Line, _extends({
+    gap: 0,
+    direction: "row",
+    align: "center"
+  }, AsideProps, EndProps, {
+    className: classNames([AsideProps?.className, EndProps?.className, classes.aside])
+  }), end)), /*#__PURE__*/React.createElement(Line, _extends({
+    gap: 2,
+    direction: row ? responsive ? {
+      default: 'row',
+      1400: 'column'
+    } : 'row' : 'column',
+    fullWidth: true,
+    className: classNames([staticClassName('FormRow', theme) && ['onesy-FormRow-main'], MainProps?.className, row && classes.row])
+  }, MainProps), children), footer && /*#__PURE__*/React.createElement(Line, {
+    direction: "row",
+    justify: "flex-end",
+    fullWidth: true,
+    className: classes.footer
+  }, footer));
+});
+FormRow.displayName = 'onesy-FormRow';
+export default FormRow;

package/esm/FormRow/index.js

@@ -0,0 +1 @@
+export { default } from './FormRow';

package/esm/Forms/Forms.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["divider", "Component", "className", "children"];
+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';
+import { style as styleMethod, classNames, useOnesyTheme } from '@onesy/style-react';
+import LineElement from '../Line';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {}
+}), {
+  name: 'onesy-Forms'
+});
+const Forms = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyForms?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const {
+      divider,
+      Component = Line,
+      className,
+      children: children_
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const children = React.Children.toArray(children_);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    gap: 4,
+    direction: "column",
+    justify: "unset",
+    align: "unset",
+    fullWidth: true,
+    className: classNames([staticClassName('Forms', theme) && ['onesy-Forms-root'], className, classes.root])
+  }, other), children.map((form, index) => /*#__PURE__*/React.cloneElement(form, {
+    key: index,
+    divider: index < children.length - 1
+  })));
+});
+Forms.displayName = 'onesy-Forms';
+export default Forms;

package/esm/Forms/index.js

@@ -0,0 +1 @@
+export { default } from './Forms';

package/esm/Frame/Frame.js

@@ -0,0 +1,194 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["url", "src", "value", "startOptions", "endOptions", "IconMobile", "IconTablet", "IconLaptop", "IconDesktop", "iframeProps", "IFrameProps", "OptionProps", "OptionsProps", "OptionsWrapperProps", "WrapperProps", "className", "children"];
+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';
+import { isEnvironment } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialSmartphone from '@amaui/icons-material-rounded-react/IconMaterialSmartphoneW100';
+import IconMaterialTabletMac from '@amaui/icons-material-rounded-react/IconMaterialTabletMacW100';
+import IconMaterialComputer from '@amaui/icons-material-rounded-react/IconMaterialComputerW100';
+import IconMaterialDesktopWindows from '@amaui/icons-material-rounded-react/IconMaterialDesktopWindowsW100';
+import IconButtonElement from '../IconButton';
+import LineElement from '../Line';
+import TooltipElement from '../Tooltip';
+import IFrameElement_ from '../IFrame';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  options: {
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(3, 'px')}`,
+    '& > *': {
+      flex: '0 0 auto'
+    }
+  },
+  wrapper: {
+    margin: '0 4px 24px',
+    minHeight: '15vh',
+    height: 0,
+    border: `0.5px solid ${theme.palette.text.divider}`,
+    borderRadius: theme.methods.shape.radius.value(2),
+    boxShadow: theme.shadows.values.default[1],
+    overflow: 'hidden',
+    '&.onesy-Line-root': {
+      width: 'calc(100% - 8px)'
+    }
+  },
+  IFrame: {
+    position: 'relative'
+  },
+  iframe: {
+    width: '100%',
+    height: '100%'
+  }
+}), {
+  name: 'onesy-Frame'
+});
+const Frame = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyFrame?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
+  const IFrameElement = React.useMemo(() => theme?.elements?.IFrame || IFrameElement_, [theme]);
+  const {
+      url,
+      src,
+      value,
+      startOptions,
+      endOptions,
+      IconMobile = IconMaterialSmartphone,
+      IconTablet = IconMaterialTabletMac,
+      IconLaptop = IconMaterialComputer,
+      IconDesktop = IconMaterialDesktopWindows,
+      iframeProps,
+      IFrameProps,
+      OptionProps,
+      OptionsProps,
+      OptionsWrapperProps,
+      WrapperProps,
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [responsive, setResponsive] = React.useState();
+  const onResponsive = React.useCallback(value_ => {
+    setResponsive(previous => {
+      if (previous === value_) return '';
+      return value_;
+    });
+  }, []);
+  const responsiveOptions = [{
+    name: 'Mobile',
+    icon: IconMobile,
+    disabled: isEnvironment('browser') && window.innerWidth < 375
+  }, {
+    name: 'Tablet',
+    icon: IconTablet,
+    disabled: isEnvironment('browser') && window.innerWidth < 768
+  }, {
+    name: 'Laptop',
+    icon: IconLaptop,
+    disabled: isEnvironment('browser') && window.innerWidth < 1440
+  }, {
+    name: 'Desktop',
+    icon: IconDesktop,
+    disabled: isEnvironment('browser') && window.innerWidth < 1920
+  }];
+  const WrapperStyle = {};
+  if (responsive) {
+    // iphone SE
+    if (responsive === 'Mobile') {
+      WrapperStyle.maxWidth = 375;
+      WrapperStyle.maxHeight = 667;
+    }
+
+    // ipad mini
+    if (responsive === 'Tablet') {
+      WrapperStyle.maxWidth = 768;
+      WrapperStyle.maxHeight = 1024;
+    }
+
+    // laptop
+    if (responsive === 'Laptop') {
+      WrapperStyle.maxWidth = 1440;
+      WrapperStyle.maxHeight = 768;
+    }
+
+    // desktop
+    if (responsive === 'Desktop') {
+      WrapperStyle.maxWidth = 1920;
+      WrapperStyle.maxHeight = 1080;
+    }
+  }
+  const main = React.useMemo(() => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children, value && !children && /*#__PURE__*/React.createElement(IFrameElement, {
+      className: classNames([classes.IFrame]),
+      WrapperProps: {
+        align: 'center',
+        justify: 'center'
+      }
+    }, value || children), (url || src) && !(value || children) && /*#__PURE__*/React.createElement("iframe", _extends({
+      title: "frame",
+      src: url || src
+    }, iframeProps, {
+      className: classNames([iframeProps?.className, classes.iframe])
+    })));
+  }, [url, src, value, children]);
+  return /*#__PURE__*/React.createElement(Line, _extends({
+    ref: ref,
+    gap: 0,
+    align: "center",
+    flex: true,
+    fullWidth: true,
+    className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-root'], className, classes.root])
+  }, other), /*#__PURE__*/React.createElement(Line, _extends({
+    gap: 0.5,
+    direction: "row",
+    align: "center",
+    justify: {
+      default: 'flex-end',
+      700: 'flex-start'
+    },
+    fullWidth: true
+  }, OptionsWrapperProps, {
+    className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-options-wrapper'], OptionsWrapperProps?.className])
+  }), /*#__PURE__*/React.createElement(Line, _extends({
+    gap: 0.4,
+    direction: "row",
+    align: "center",
+    justify: "flex-end"
+  }, OptionsProps, {
+    className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-options'], OptionsProps?.className, classes.options])
+  }), startOptions, responsiveOptions.map((item, index) => /*#__PURE__*/React.createElement(Tooltip, {
+    key: index,
+    label: item.name
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    size: "small",
+    selected: item.name === responsive,
+    onClick: () => onResponsive(item.name),
+    disabled: item.disabled
+  }, OptionProps, {
+    className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-option'], OptionProps?.className])
+  }), /*#__PURE__*/React.createElement(item.icon, null)))), endOptions)), /*#__PURE__*/React.createElement(Line, _extends({
+    gap: 0,
+    align: "center",
+    flex: true,
+    fullWidth: true
+  }, WrapperProps, {
+    className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-wrapper'], WrapperProps?.className, classes.wrapper]),
+    style: _objectSpread(_objectSpread({}, WrapperStyle), WrapperProps?.style)
+  }), main));
+});
+Frame.displayName = 'onesy-Frame';
+export default Frame;

package/esm/Frame/index.js

@@ -0,0 +1 @@
+export { default } from './Frame';