@applique-ui/layout - npm Package Compare versions

Comparing version 0.0.4 to 0.0.7

dist/layout.cjs.js

@@ -5,10 +5,9 @@ 'use strict';
 
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
 var React = require('react');
+var React__default = _interopDefault(React);
 var uikitUtils = require('@applique-ui/uikit-utils');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-function styleInject$1(css) {
+function styleInject(css) {
   if (!css || typeof document === 'undefined') return
@@ -29,8 +28,8 @@
 
-styleInject$1(".u-layout-stack{display:flex;flex-direction:row}.u-layout-stack.u-layout-small{--u-layout-stack-margin-right:4px}.u-layout-stack.u-layout-medium{--u-layout-stack-margin-right:8px}.u-layout-stack.u-layout-large{--u-layout-stack-margin-right:16px}.u-layout-stack.u-layout-xl{--u-layout-stack-margin-right:24px}.u-layout-stack.u-layout-xxl{--u-layout-stack-margin-right:32px}.u-layout-stack.u-layout-xxxl{--u-layout-stack-margin-right:40px}.u-layout-stack.u-layout-none{--u-layout-stack-margin-right:0}.u-layout-stack>*{max-width:100%}.u-layout-stack>:not(:last-child){margin-right:var(--u-layout-stack-margin-right)}");
+styleInject(".u-layout-stack{display:flex;flex-direction:row}.u-layout-stack.u-layout-small{--u-layout-stack-margin-right:4px}.u-layout-stack.u-layout-medium{--u-layout-stack-margin-right:8px}.u-layout-stack.u-layout-large{--u-layout-stack-margin-right:16px}.u-layout-stack.u-layout-xl{--u-layout-stack-margin-right:24px}.u-layout-stack.u-layout-xxl{--u-layout-stack-margin-right:32px}.u-layout-stack.u-layout-xxxl{--u-layout-stack-margin-right:40px}.u-layout-stack.u-layout-none{--u-layout-stack-margin-right:0}.u-layout-stack>*{max-width:100%}.u-layout-stack>:not(:last-child){margin-right:var(--u-layout-stack-margin-right)}");
 
-const locals$1 = {"stack":"u-layout-stack","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"};
+const locals = {"stack":"u-layout-stack","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"};
 
-function classnames$1() {
-  return uikitUtils.classnames.apply(null, arguments).use(locals$1)
+function classnames() {
+  return uikitUtils.classnames.apply(null, arguments).use(locals)
 }
@@ -57,3 +56,3 @@
 function StackLayout({ type, distribution, alignment, wrap, className, children, gutter, style, space, reference, ...props }) {
-    return (React__default["default"].createElement("div", Object.assign({}, props, { ref: reference, className: classnames$1('stack', className, gutter), style: {
+    return (React__default.createElement("div", Object.assign({}, props, { ref: reference, className: classnames('stack', className, gutter), style: {
             alignItems: alignments[alignment],
@@ -72,3 +71,3 @@ justifyContent: distributions[distribution],
             const { style } = child.props || {};
-            return React__default["default"].cloneElement(child, {
+            return React__default.cloneElement(child, {
                 style: { ...style, ...itemStyle },
@@ -86,3 +85,3 @@ });
 
-function styleInject(css) {
+function styleInject$1(css) {
   if (!css || typeof document === 'undefined') return
@@ -103,8 +102,8 @@
 
-styleInject(".u-layout-row{display:flex;flex-direction:column}.u-layout-row.u-layout-small{--u-layout-row-margin-bottom:4px}.u-layout-row.u-layout-medium{--u-layout-row-margin-bottom:8px}.u-layout-row.u-layout-large{--u-layout-row-margin-bottom:16px}.u-layout-row.u-layout-xl{--u-layout-row-margin-bottom:24px}.u-layout-row.u-layout-xxl{--u-layout-row-margin-bottom:32px}.u-layout-row.u-layout-xxxl{--u-layout-row-margin-bottom:40px}.u-layout-row.u-layout-none{--u-layout-row-margin-bottom:0}.u-layout-row>*{min-width:100%}.u-layout-row>:not(:last-child){margin-bottom:var(--u-layout-row-margin-bottom)}");
+styleInject$1(".u-layout-row{display:flex;flex-direction:column}.u-layout-row.u-layout-small{--u-layout-row-margin-bottom:4px}.u-layout-row.u-layout-medium{--u-layout-row-margin-bottom:8px}.u-layout-row.u-layout-large{--u-layout-row-margin-bottom:16px}.u-layout-row.u-layout-xl{--u-layout-row-margin-bottom:24px}.u-layout-row.u-layout-xxl{--u-layout-row-margin-bottom:32px}.u-layout-row.u-layout-xxxl{--u-layout-row-margin-bottom:40px}.u-layout-row.u-layout-none{--u-layout-row-margin-bottom:0}.u-layout-row>*{min-width:100%}.u-layout-row>:not(:last-child){margin-bottom:var(--u-layout-row-margin-bottom)}");
 
-const locals = {"row":"u-layout-row","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"};
+const locals$1 = {"row":"u-layout-row","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"};
 
-function classnames() {
-  return uikitUtils.classnames.apply(null, arguments).use(locals)
+function classnames$1() {
+  return uikitUtils.classnames.apply(null, arguments).use(locals$1)
 }
@@ -116,3 +115,3 @@
 function RowLayout({ type, className, children, gutter, ...props }) {
-    return (React__default["default"].createElement("div", Object.assign({}, props, { className: classnames('row', className, gutter) }), children));
+    return (React__default.createElement("div", Object.assign({}, props, { className: classnames$1('row', className, gutter) }), children));
 }
@@ -135,6 +134,6 @@ RowLayout.defaultProps = {
     const LayoutComponent = layouts[props.type || 'row'];
-    return LayoutComponent ? React__default["default"].createElement(LayoutComponent, Object.assign({}, props)) : null;
+    return LayoutComponent ? React__default.createElement(LayoutComponent, Object.assign({}, props)) : null;
 }
 
-exports["default"] = Layout;
+exports.default = Layout;
 exports.layouts = layouts;

dist/layout.esm.js

 import React, { Children, isValidElement } from 'react';
 import { classnames as classnames$2 } from '@applique-ui/uikit-utils';
 
-function styleInject$1(css) {
+function styleInject(css) {
   if (!css || typeof document === 'undefined') return
@@ -20,8 +20,8 @@
 
-styleInject$1(".u-layout-stack{display:flex;flex-direction:row}.u-layout-stack.u-layout-small{--u-layout-stack-margin-right:4px}.u-layout-stack.u-layout-medium{--u-layout-stack-margin-right:8px}.u-layout-stack.u-layout-large{--u-layout-stack-margin-right:16px}.u-layout-stack.u-layout-xl{--u-layout-stack-margin-right:24px}.u-layout-stack.u-layout-xxl{--u-layout-stack-margin-right:32px}.u-layout-stack.u-layout-xxxl{--u-layout-stack-margin-right:40px}.u-layout-stack.u-layout-none{--u-layout-stack-margin-right:0}.u-layout-stack>*{max-width:100%}.u-layout-stack>:not(:last-child){margin-right:var(--u-layout-stack-margin-right)}");
+styleInject(".u-layout-stack{display:flex;flex-direction:row}.u-layout-stack.u-layout-small{--u-layout-stack-margin-right:4px}.u-layout-stack.u-layout-medium{--u-layout-stack-margin-right:8px}.u-layout-stack.u-layout-large{--u-layout-stack-margin-right:16px}.u-layout-stack.u-layout-xl{--u-layout-stack-margin-right:24px}.u-layout-stack.u-layout-xxl{--u-layout-stack-margin-right:32px}.u-layout-stack.u-layout-xxxl{--u-layout-stack-margin-right:40px}.u-layout-stack.u-layout-none{--u-layout-stack-margin-right:0}.u-layout-stack>*{max-width:100%}.u-layout-stack>:not(:last-child){margin-right:var(--u-layout-stack-margin-right)}");
 
-const locals$1 = {"stack":"u-layout-stack","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"};
+const locals = {"stack":"u-layout-stack","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"};
 
-function classnames$1() {
-  return classnames$2.apply(null, arguments).use(locals$1)
+function classnames() {
+  return classnames$2.apply(null, arguments).use(locals)
 }
@@ -48,3 +48,3 @@
 function StackLayout({ type, distribution, alignment, wrap, className, children, gutter, style, space, reference, ...props }) {
-    return (React.createElement("div", Object.assign({}, props, { ref: reference, className: classnames$1('stack', className, gutter), style: {
+    return (React.createElement("div", Object.assign({}, props, { ref: reference, className: classnames('stack', className, gutter), style: {
             alignItems: alignments[alignment],
@@ -76,3 +76,3 @@ justifyContent: distributions[distribution],
 
-function styleInject(css) {
+function styleInject$1(css) {
   if (!css || typeof document === 'undefined') return
@@ -93,8 +93,8 @@
 
-styleInject(".u-layout-row{display:flex;flex-direction:column}.u-layout-row.u-layout-small{--u-layout-row-margin-bottom:4px}.u-layout-row.u-layout-medium{--u-layout-row-margin-bottom:8px}.u-layout-row.u-layout-large{--u-layout-row-margin-bottom:16px}.u-layout-row.u-layout-xl{--u-layout-row-margin-bottom:24px}.u-layout-row.u-layout-xxl{--u-layout-row-margin-bottom:32px}.u-layout-row.u-layout-xxxl{--u-layout-row-margin-bottom:40px}.u-layout-row.u-layout-none{--u-layout-row-margin-bottom:0}.u-layout-row>*{min-width:100%}.u-layout-row>:not(:last-child){margin-bottom:var(--u-layout-row-margin-bottom)}");
+styleInject$1(".u-layout-row{display:flex;flex-direction:column}.u-layout-row.u-layout-small{--u-layout-row-margin-bottom:4px}.u-layout-row.u-layout-medium{--u-layout-row-margin-bottom:8px}.u-layout-row.u-layout-large{--u-layout-row-margin-bottom:16px}.u-layout-row.u-layout-xl{--u-layout-row-margin-bottom:24px}.u-layout-row.u-layout-xxl{--u-layout-row-margin-bottom:32px}.u-layout-row.u-layout-xxxl{--u-layout-row-margin-bottom:40px}.u-layout-row.u-layout-none{--u-layout-row-margin-bottom:0}.u-layout-row>*{min-width:100%}.u-layout-row>:not(:last-child){margin-bottom:var(--u-layout-row-margin-bottom)}");
 
-const locals = {"row":"u-layout-row","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"};
+const locals$1 = {"row":"u-layout-row","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"};
 
-function classnames() {
-  return classnames$2.apply(null, arguments).use(locals)
+function classnames$1() {
+  return classnames$2.apply(null, arguments).use(locals$1)
 }
@@ -106,3 +106,3 @@
 function RowLayout({ type, className, children, gutter, ...props }) {
-    return (React.createElement("div", Object.assign({}, props, { className: classnames('row', className, gutter) }), children));
+    return (React.createElement("div", Object.assign({}, props, { className: classnames$1('row', className, gutter) }), children));
 }
@@ -128,2 +128,3 @@ RowLayout.defaultProps = {
 
-export { Layout as default, layouts };
+export default Layout;
+export { layouts };

package.json

 {
   "name": "@applique-ui/layout",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "main": "dist/layout.cjs.js",
@@ -5,0 +5,0 @@ "module": "dist/layout.esm.js",

README.md

@@ -1,1 +0,1 @@
-# @applique/uikit-component-layout
+# @applique-ui/uikit-component-layout

No alert changes

Improved metrics

Lines of code

457

increased by0.22%

Worsened metrics

Total package byte prevSize

19397

decreased by-0.31%

No dependency changes