@votercircle/clay-v2-container 1.0.0

package/container.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare type ContainerProps = {
+    children?: any;
+    style?: React.CSSProperties;
+};
+export declare const SCREEN_BREAKPOINT: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export declare function Container({ children, ...rest }: ContainerProps): JSX.Element;

package/container.js

@@ -0,0 +1,73 @@
+"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 __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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+exports.__esModule = true;
+exports.Container = exports.SCREEN_BREAKPOINT = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var cui_theme_provider_1 = require("@clay/cui.theme-provider");
+exports.SCREEN_BREAKPOINT = {
+    sm: '428px',
+    md: '836px',
+    lg: '1281px',
+    xl: '1920px'
+};
+var fadeIn = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n      opacity: 0;\n  }\n  to {\n      opacity: 1;\n  }"], ["\n  from {\n      opacity: 0;\n  }\n  to {\n      opacity: 1;\n  }"])));
+var PageWrapper = styled_components_1["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: var(--pdi-clay-theme-black-main, ", ");\n  max-width: ", ";\n  margin-left: auto;\n  margin-right: auto;\n  animation: ", " 0.1s 0.1s both;\n"], ["\n  color: var(--pdi-clay-theme-black-main, ", ");\n  max-width: ", ";\n  margin-left: auto;\n  margin-right: auto;\n  animation: ", " 0.1s 0.1s both;\n"])), (_a = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.black) === null || _a === void 0 ? void 0 : _a.main, exports.SCREEN_BREAKPOINT.xl, fadeIn);
+function Container(_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return react_1["default"].createElement(PageWrapper, __assign({}, rest), children);
+}
+exports.Container = Container;
+var templateObject_1, templateObject_2;

package/index.d.ts

@@ -0,0 +1,2 @@
+export { Container, SCREEN_BREAKPOINT } from './container';
+export { ContainerProps } from './container';

package/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+exports.__esModule = true;
+exports.SCREEN_BREAKPOINT = exports.Container = void 0;
+var container_1 = require("./container");
+__createBinding(exports, container_1, "Container");
+__createBinding(exports, container_1, "SCREEN_BREAKPOINT");

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@votercircle/clay-v2-container",
+  "version": "1.0.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16",
+    "styled-components": ">=5"
+  }
+}