oolib 2.6.1 → 2.7.2

package/dist/components/BlockLabel/index.js

@@ -18,8 +18,8 @@ var BlockLabel = function (props) {
         - deployment._ShowOptionalTag configuration
         - localization (translation)
     */
-    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, error = props.error, //for storybook view purposes
-    isRequired = props.isRequired, readOnly = props.readOnly, style = props.style, errorMsgs = props.errorMsgs;
+    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, error = props.error, //for storybook view purposes
+    errorMsgs = props.errorMsgs;
     var shouldCompRender = (label ||
         !readOnly && (sublabel || inputOnlyLabel || isRequired === false || (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0));
     var optional = readOnly ? false : !isRequired;
@@ -28,7 +28,7 @@ var BlockLabel = function (props) {
     var errLink = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 ? undefined : errorMsgs[0].link;
     var errType = ((errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1) ? 'danger' : (errorMsgs[0].type || 'danger');
     return (shouldCompRender &&
-        react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style },
+        react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className },
             react_1.default.createElement("div", { style: { display: 'flex', gap: '1rem' } },
                 react_1.default.createElement(Typo_1.SANS_3, { invert: invert, bold: true, capitalize: true }, label || inputOnlyLabel),
                 optional && react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, "(optional)"),

package/dist/components/BlockLabel/index.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledBlockLabel = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.StyledBlockLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\ndisplay: flex;\nflex-direction: column;\ngap: 0rem;\n\n"], ["\ndisplay: flex;\nflex-direction: column;\ngap: 0rem;\n\n"])));
+exports.StyledBlockLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 0rem;\n  margin-bottom: 1rem;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 0rem;\n  margin-bottom: 1rem;\n"])));
 var templateObject_1;

package/dist/components/Container/index.d.ts

@@ -0,0 +1,6 @@
+export function Container({ children, className, style, noPadding }: {
+    children: any;
+    className: any;
+    style: any;
+    noPadding: any;
+}): JSX.Element;

package/dist/components/Container/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+var react_1 = __importDefault(require("react"));
+var index_styled_1 = require("./index.styled");
+var Container = function (_a) {
+    var children = _a.children, className = _a.className, style = _a.style, noPadding = _a.noPadding;
+    return (react_1.default.createElement(index_styled_1.StyledContainer, { className: className || '', style: __assign(__assign({}, (noPadding ? { padding: 0 } : {})), style) }, children));
+};
+exports.Container = Container;

package/dist/components/Container/index.styled.d.ts

@@ -0,0 +1 @@
+export const StyledContainer: any;

package/dist/components/Container/index.styled.js

@@ -0,0 +1,14 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var mixins_1 = require("../../themes/mixins");
+exports.StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 2rem;\n  ", "{\n    padding: 0 6rem;\n  }\n"], ["\n  padding: 0 2rem;\n  ", "{\n    padding: 0 6rem;\n  }\n"])), (0, mixins_1.mediaQuery)('sm'));
+var templateObject_1;

package/dist/components/TextInputs/index.js

@@ -116,8 +116,7 @@ var TextInput = function (props) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: className },
-            react_1.default.createElement("div", { style: { marginBottom: '1rem' } },
-                react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, uitls_1.getBlockLabelProps)(props)))),
+            react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, uitls_1.getBlockLabelProps)(props))),
             readOnly ? (react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, type === 'password' ? '********' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(index_styled_1.InputContainerStyled, { invert: invert, type: type, disabled: disabled, status: inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.type, eyeIcon: eyeIcon, composition: composition },
                     icon && (react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20, onClick: iconOnClick || null })),

package/dist/components/Wrappers/index.d.ts

@@ -0,0 +1,8 @@
+export function Wrapper1500(props: any): JSX.Element;
+export function Wrapper1120(props: any): JSX.Element;
+export function Wrapper1000(props: any): JSX.Element;
+export function Wrapper900(props: any): JSX.Element;
+export function Wrapper800(props: any): JSX.Element;
+export function Wrapper820(props: any): JSX.Element;
+export function Wrapper700(props: any): JSX.Element;
+export function Wrapper650(props: any): JSX.Element;

package/dist/components/Wrappers/index.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper650 = exports.Wrapper700 = exports.Wrapper820 = exports.Wrapper800 = exports.Wrapper900 = exports.Wrapper1000 = exports.Wrapper1120 = exports.Wrapper1500 = void 0;
+var react_1 = __importDefault(require("react"));
+var index_styled_1 = require("./index.styled");
+var Wrapper = function (_a) {
+    var style = _a.style, children = _a.children, className = _a.className, maxWidth = _a.maxWidth, left = _a.left;
+    var alignment = left ? 'left' : 'center';
+    return (react_1.default.createElement(index_styled_1.StyledWrapper, __assign({}, { maxWidth: maxWidth, alignment: alignment }, { className: className || "", style: style }), children));
+};
+var Wrapper1500 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 1500 })); };
+exports.Wrapper1500 = Wrapper1500;
+var Wrapper1120 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 1120 })); };
+exports.Wrapper1120 = Wrapper1120;
+var Wrapper1000 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 1000 })); };
+exports.Wrapper1000 = Wrapper1000;
+var Wrapper900 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 900 })); };
+exports.Wrapper900 = Wrapper900;
+var Wrapper800 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 800 })); };
+exports.Wrapper800 = Wrapper800;
+var Wrapper820 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 820 })); };
+exports.Wrapper820 = Wrapper820;
+var Wrapper700 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 700 })); };
+exports.Wrapper700 = Wrapper700;
+var Wrapper650 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 650 })); };
+exports.Wrapper650 = Wrapper650;

package/dist/components/Wrappers/index.styled.d.ts

@@ -0,0 +1 @@
+export const StyledWrapper: any;

package/dist/components/Wrappers/index.styled.js

@@ -0,0 +1,19 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledWrapper = void 0;
+var macro_1 = __importDefault(require("styled-components/macro"));
+exports.StyledWrapper = macro_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: ", ";\n  margin: ", ";\n"], ["\n  max-width: ", ";\n  margin: ", ";\n"])), function (_a) {
+    var maxWidth = _a.maxWidth;
+    return maxWidth + 'px';
+}, function (_a) {
+    var alignment = _a.alignment;
+    return alignment === 'left' ? 'unset' : '0 auto';
+});
+var templateObject_1;

package/dist/icons/LetterH.d.ts

@@ -1,4 +1,5 @@
 export default LetterH;
-declare function LetterH({ role }: {
+declare function LetterH({ role, size }: {
     role: any;
+    size: any;
 }): JSX.Element;

package/dist/icons/LetterH.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var LetterH = function (_a) {
-    var role = _a.role;
-    return (react_1.default.createElement("svg", { role: role, xmlns: "http://www.w3.org/2000/svg", className: "icon icon-tabler icon-tabler-letter-h", width: "14", height: "14", viewBox: "0 0 24 24", strokeWidth: "2.5", stroke: "currentColor", fill: "none", strokeLinejoin: "round" },
+    var role = _a.role, size = _a.size;
+    return (react_1.default.createElement("svg", { role: role, xmlns: "http://www.w3.org/2000/svg", className: "icon icon-tabler icon-tabler-letter-h", width: size, height: size, viewBox: "0 0 256 256", strokeWidth: "24", stroke: "currentColor", fill: "none", strokeLinejoin: "round" },
         react_1.default.createElement("path", { stroke: "none", d: "M0 0h24v24H0z" }),
-        react_1.default.createElement("line", { x1: "17", y1: "4", x2: "17", y2: "21" }),
-        react_1.default.createElement("line", { x1: "7", y1: "12", x2: "17", y2: "12" }),
-        react_1.default.createElement("line", { x1: "7", y1: "4", x2: "7", y2: "21" })));
+        react_1.default.createElement("line", { x1: "40", y1: "56", x2: "40", y2: "176", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        react_1.default.createElement("line", { x1: "144", y1: "116", x2: "40", y2: "116", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        react_1.default.createElement("line", { x1: "144", y1: "56", x2: "144", y2: "176", "stroke-linecap": "round", "stroke-linejoin": "round" })));
 };
 exports.default = LetterH;

package/dist/icons/LetterP.d.ts

@@ -1,6 +1,5 @@
 export default LetterP;
-declare function LetterP({ role, dataStyle, dataStyleScope }: {
+declare function LetterP({ role, size }: {
     role: any;
-    dataStyle: any;
-    dataStyleScope: any;
+    size: any;
 }): JSX.Element;

package/dist/icons/LetterP.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var LetterP = function (_a) {
-    var role = _a.role, dataStyle = _a.dataStyle, dataStyleScope = _a.dataStyleScope;
-    return (react_1.default.createElement("svg", { role: role, "data-style": dataStyle, "data-style-scope": dataStyleScope, xmlns: "http://www.w3.org/2000/svg", className: "icon icon-tabler icon-tabler-letter-p", width: "14", height: "14", viewBox: "0 0 24 24", strokeWidth: "2.5", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" },
+    var role = _a.role, size = _a.size;
+    return (react_1.default.createElement("svg", { role: role, xmlns: "http://www.w3.org/2000/svg", className: "icon icon-tabler icon-tabler-letter-p", width: size, height: size + size * 0.33, viewBox: "0 0 ".concat(size + size * 0.33, " ").concat(size), strokeWidth: "2.5", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" },
         react_1.default.createElement("path", { stroke: "none", d: "M0 0h24v24H0z" }),
         react_1.default.createElement("path", { d: "M7 20v-16h5.5a4 4 0 0 1 0 9h-5.5" })));
 };

package/dist/index.d.ts

@@ -7,6 +7,8 @@ export * from "./components/Breadcrumbs";
 export * from "./components/BlockLabel";
 export * from "./components/InlineAlert";
 export * from "./components/TextInputs";
+export * from "./components/Container";
+export * from "./components/Wrappers";
 export { colors } from "./themes";
 export { phosphorIcons } from "./icons";
 export { mediaQuery, getBreakPoint, transition, transitionWithDuration, transitionWithDelay, multiTransition } from "./themes/mixins";

package/dist/index.js

@@ -25,6 +25,8 @@ __exportStar(require("./components/Breadcrumbs"), exports);
 __exportStar(require("./components/BlockLabel"), exports);
 __exportStar(require("./components/InlineAlert"), exports);
 __exportStar(require("./components/TextInputs"), exports);
+__exportStar(require("./components/Container"), exports);
+__exportStar(require("./components/Wrappers"), exports);
 var mixins_1 = require("./themes/mixins");
 Object.defineProperty(exports, "mediaQuery", { enumerable: true, get: function () { return mixins_1.mediaQuery; } });
 Object.defineProperty(exports, "getBreakPoint", { enumerable: true, get: function () { return mixins_1.getBreakPoint; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.6.1",
+  "version": "2.7.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",