@votercircle/clay-v2-pane 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/index.d.ts +2 -0
  2. package/index.js +18 -0
  3. package/package.json +11 -0
  4. package/pane.d.ts +52 -0
  5. package/pane.js +95 -0
package/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Pane, Row, Col } from './pane';
2
+ export { PaneProps } from './pane';
package/index.js ADDED
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ exports.__esModule = true;
14
+ exports.Col = exports.Row = exports.Pane = void 0;
15
+ var pane_1 = require("./pane");
16
+ __createBinding(exports, pane_1, "Pane");
17
+ __createBinding(exports, pane_1, "Row");
18
+ __createBinding(exports, pane_1, "Col");
package/package.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "name": "@votercircle/clay-v2-pane",
3
+ "version": "1.0.0",
4
+ "main": "index.js",
5
+ "types": "index.d.ts",
6
+ "peerDependencies": {
7
+ "react": ">=16",
8
+ "react-dom": ">=16",
9
+ "styled-components": ">=5"
10
+ }
11
+ }
package/pane.d.ts ADDED
@@ -0,0 +1,52 @@
1
+ import React from 'react';
2
+ export declare type PaneProps = {
3
+ children?: any;
4
+ className?: string;
5
+ style?: React.CSSProperties;
6
+ onClick?: () => {};
7
+ };
8
+ export declare type RowProps = {
9
+ children?: any;
10
+ className?: string;
11
+ direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
12
+ align?: 'left' | 'center' | 'right' | 'space-between' | 'space-around';
13
+ vertical?: 'start' | 'center' | 'end';
14
+ gutter?: number;
15
+ gutterX?: number;
16
+ gutterY?: number;
17
+ height?: string;
18
+ width?: string;
19
+ wrapCol?: boolean;
20
+ onClick?: () => {};
21
+ };
22
+ export declare type ColProps = {
23
+ children?: any;
24
+ className?: string;
25
+ height?: string;
26
+ width?: string;
27
+ style?: React.CSSProperties;
28
+ span?: number;
29
+ onClick?: () => {};
30
+ sm?: number;
31
+ md?: number;
32
+ lg?: number;
33
+ xl?: number;
34
+ };
35
+ /**
36
+ * A simple wrapper element to wrap any html element.
37
+ * Mainly used to compose a grid layout using Rows and Columns <br/>
38
+ * Use a series of rows, and columns to layout and align content.
39
+ */
40
+ export declare function Pane({ className, children, ...rest }: PaneProps): JSX.Element;
41
+ /**
42
+ * Rows are wrappers for columns. <br/>
43
+ * Rows and Cols can be nested to create complex layouts. <br/>
44
+ */
45
+ export declare function Row({ className, children, direction, align, vertical, gutter, gutterX, gutterY, height, width, wrapCol, ...rest }: RowProps): JSX.Element;
46
+ /**
47
+ * Columns are wrappers for any html element. <br/>
48
+ * Used to layout content in a grid. <br/>
49
+ * Rows and Cols can be nested to create complex layouts. <br/>
50
+ * Use span, sm, md, lg, xl to specify the width of the column according to the width of the viewport. <br/>
51
+ */
52
+ export declare function Col({ className, children, span, sm, md, lg, xl, width, height, ...rest }: ColProps): JSX.Element;
package/pane.js ADDED
@@ -0,0 +1,95 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
17
+ var __rest = (this && this.__rest) || function (s, e) {
18
+ var t = {};
19
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
20
+ t[p] = s[p];
21
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
22
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
23
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
24
+ t[p[i]] = s[p[i]];
25
+ }
26
+ return t;
27
+ };
28
+ var __importDefault = (this && this.__importDefault) || function (mod) {
29
+ return (mod && mod.__esModule) ? mod : { "default": mod };
30
+ };
31
+ exports.__esModule = true;
32
+ exports.Col = exports.Row = exports.Pane = void 0;
33
+ var react_1 = __importDefault(require("react"));
34
+ var styled_components_1 = __importDefault(require("styled-components"));
35
+ var cui_container_1 = require("@clay/cui.container");
36
+ var PaneWrapperBase = styled_components_1["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &.clay-ui-row > .clay-ui-col {\n --gutter-x: ", "px;\n }\n\n &.clay-ui-row {\n display: flex;\n margin-right: ", ";\n margin-left: ", ";\n margin-bottom: ", ";\n }\n\n &.clay-ui-row._col-direction-row {\n flex-direction: row;\n }\n &.clay-ui-row._col-direction-column {\n flex-direction: column;\n }\n &.clay-ui-row._col-direction-row-reverse {\n flex-direction: row-reverse;\n }\n &.clay-ui-row._col-direction-column-reverse {\n flex-direction: column-reverse;\n }\n\n &.clay-ui-row._col-direction-column._col-align-vertical-start,\n &.clay-ui-row._col-direction-column-reverse._col-align-vertical-start,\n &.clay-ui-row._col-direction-row._col-align-left,\n &.clay-ui-row._col-direction-row-reverse._col-align-left {\n justify-content: flex-start;\n }\n\n &.clay-ui-row._col-direction-column._col-align-vertical-center,\n &.clay-ui-row._col-direction-column-reverse._col-align-vertical-center,\n &.clay-ui-row._col-direction-row._col-align-center,\n &.clay-ui-row._col-direction-row-reverse._col-align-center {\n justify-content: center;\n }\n\n &.clay-ui-row._col-direction-column._col-align-vertical-end,\n &.clay-ui-row._col-direction-column-reverse._col-align-vertical-end,\n &.clay-ui-row._col-direction-row._col-align-right,\n &.clay-ui-row._col-direction-row-reverse._col-align-right {\n justify-content: flex-end;\n }\n\n &.clay-ui-row._col-direction-column._col-align-vertical-space-between,\n &.clay-ui-row._col-direction-column-reverse._col-align-vertical-space-between,\n &.clay-ui-row._col-direction-row._col-align-space-between,\n &.clay-ui-row._col-direction-row-reverse._col-align-space-between {\n justify-content: space-between;\n }\n\n &.clay-ui-row._col-direction-column._col-align-vertical-space-around,\n &.clay-ui-row._col-direction-column-reverse._col-align-vertical-space-around,\n &.clay-ui-row._col-direction-row._col-align-space-around,\n &.clay-ui-row._col-direction-row-reverse._col-align-space-around {\n justify-content: space-around;\n }\n\n &.clay-ui-row._col-direction-column._col-align-left,\n &.clay-ui-row._col-direction-column-reverse._col-align-left,\n &.clay-ui-row._col-direction-row._col-align-vertical-start,\n &.clay-ui-row._col-direction-row-reverse._col-align-vertical-start {\n align-content: start;\n }\n\n &.clay-ui-row._col-direction-column._col-align-center,\n &.clay-ui-row._col-direction-column-reverse._col-align-center,\n &.clay-ui-row._col-direction-row._col-align-vertical-center,\n &.clay-ui-row._col-direction-row-reverse._col-align-vertical-center {\n align-content: center;\n align-items: center;\n }\n\n &.clay-ui-row._col-direction-column._col-align-right,\n &.clay-ui-row._col-direction-column-reverse._col-align-right,\n &.clay-ui-row._col-direction-row._col-align-vertical-end,\n &.clay-ui-row._col-direction-row-reverse._col-align-vertical-end {\n align-content: end;\n }\n\n &.clay-ui-row._col-direction-column._col-align-space-between,\n &.clay-ui-row._col-direction-column-reverse._col-align-space-between,\n &.clay-ui-row._col-direction-row._col-align-vertical-space-between,\n &.clay-ui-row._col-direction-row-reverse._col-align-vertical-space-between {\n align-content: space-between;\n }\n\n &.clay-ui-row._col-direction-column._col-align-space-around,\n &.clay-ui-row._col-direction-column-reverse._col-align-space-around,\n &.clay-ui-row._col-direction-row._col-align-vertical-space-around,\n &.clay-ui-row._col-direction-row-reverse._col-align-vertical-space-around {\n align-content: space-around;\n }\n\n &.clay-ui-row > .clay-ui-pane {\n padding-right: ", "px;\n padding-left: ", "px;\n padding-bottom: ", "px;\n }\n\n &.clay-ui-row > ._col-1 {\n width: calc(8.33% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-2 {\n width: calc(16.66% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-3 {\n width: calc(24.99% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-4 {\n width: calc(33.33% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-5 {\n width: calc(41.66% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-6 {\n width: calc(50% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-7 {\n width: calc(58.33% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-8 {\n width: calc(66.66% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-9 {\n width: calc(74.99% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-10 {\n width: calc(83.33% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-11 {\n width: calc(96.66% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-12 {\n width: 100%;\n }\n"], ["\n &.clay-ui-row > .clay-ui-col {\n --gutter-x: ", "px;\n }\n\n &.clay-ui-row {\n display: flex;\n margin-right: ", ";\n margin-left: ", ";\n margin-bottom: ", ";\n }\n\n &.clay-ui-row._col-direction-row {\n flex-direction: row;\n }\n &.clay-ui-row._col-direction-column {\n flex-direction: column;\n }\n &.clay-ui-row._col-direction-row-reverse {\n flex-direction: row-reverse;\n }\n &.clay-ui-row._col-direction-column-reverse {\n flex-direction: column-reverse;\n }\n\n &.clay-ui-row._col-direction-column._col-align-vertical-start,\n &.clay-ui-row._col-direction-column-reverse._col-align-vertical-start,\n &.clay-ui-row._col-direction-row._col-align-left,\n &.clay-ui-row._col-direction-row-reverse._col-align-left {\n justify-content: flex-start;\n }\n\n &.clay-ui-row._col-direction-column._col-align-vertical-center,\n &.clay-ui-row._col-direction-column-reverse._col-align-vertical-center,\n &.clay-ui-row._col-direction-row._col-align-center,\n &.clay-ui-row._col-direction-row-reverse._col-align-center {\n justify-content: center;\n }\n\n &.clay-ui-row._col-direction-column._col-align-vertical-end,\n &.clay-ui-row._col-direction-column-reverse._col-align-vertical-end,\n &.clay-ui-row._col-direction-row._col-align-right,\n &.clay-ui-row._col-direction-row-reverse._col-align-right {\n justify-content: flex-end;\n }\n\n &.clay-ui-row._col-direction-column._col-align-vertical-space-between,\n &.clay-ui-row._col-direction-column-reverse._col-align-vertical-space-between,\n &.clay-ui-row._col-direction-row._col-align-space-between,\n &.clay-ui-row._col-direction-row-reverse._col-align-space-between {\n justify-content: space-between;\n }\n\n &.clay-ui-row._col-direction-column._col-align-vertical-space-around,\n &.clay-ui-row._col-direction-column-reverse._col-align-vertical-space-around,\n &.clay-ui-row._col-direction-row._col-align-space-around,\n &.clay-ui-row._col-direction-row-reverse._col-align-space-around {\n justify-content: space-around;\n }\n\n &.clay-ui-row._col-direction-column._col-align-left,\n &.clay-ui-row._col-direction-column-reverse._col-align-left,\n &.clay-ui-row._col-direction-row._col-align-vertical-start,\n &.clay-ui-row._col-direction-row-reverse._col-align-vertical-start {\n align-content: start;\n }\n\n &.clay-ui-row._col-direction-column._col-align-center,\n &.clay-ui-row._col-direction-column-reverse._col-align-center,\n &.clay-ui-row._col-direction-row._col-align-vertical-center,\n &.clay-ui-row._col-direction-row-reverse._col-align-vertical-center {\n align-content: center;\n align-items: center;\n }\n\n &.clay-ui-row._col-direction-column._col-align-right,\n &.clay-ui-row._col-direction-column-reverse._col-align-right,\n &.clay-ui-row._col-direction-row._col-align-vertical-end,\n &.clay-ui-row._col-direction-row-reverse._col-align-vertical-end {\n align-content: end;\n }\n\n &.clay-ui-row._col-direction-column._col-align-space-between,\n &.clay-ui-row._col-direction-column-reverse._col-align-space-between,\n &.clay-ui-row._col-direction-row._col-align-vertical-space-between,\n &.clay-ui-row._col-direction-row-reverse._col-align-vertical-space-between {\n align-content: space-between;\n }\n\n &.clay-ui-row._col-direction-column._col-align-space-around,\n &.clay-ui-row._col-direction-column-reverse._col-align-space-around,\n &.clay-ui-row._col-direction-row._col-align-vertical-space-around,\n &.clay-ui-row._col-direction-row-reverse._col-align-vertical-space-around {\n align-content: space-around;\n }\n\n &.clay-ui-row > .clay-ui-pane {\n padding-right: ", "px;\n padding-left: ", "px;\n padding-bottom: ", "px;\n }\n\n &.clay-ui-row > ._col-1 {\n width: calc(8.33% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-2 {\n width: calc(16.66% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-3 {\n width: calc(24.99% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-4 {\n width: calc(33.33% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-5 {\n width: calc(41.66% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-6 {\n width: calc(50% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-7 {\n width: calc(58.33% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-8 {\n width: calc(66.66% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-9 {\n width: calc(74.99% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-10 {\n width: calc(83.33% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-11 {\n width: calc(96.66% - var(--gutter-x));\n }\n &.clay-ui-row > ._col-12 {\n width: 100%;\n }\n"])), function (props) { return props.gutterX || props.gutter || 0; }, function (props) { return (props.gutterX || props.gutter || 0) / -2 + 'px'; }, function (props) { return (props.gutterX || props.gutter || 0) / -2 + 'px'; }, function (props) { return -(props.gutterY || props.gutter || 0) + 'px'; }, function (props) { return (props.gutterX || props.gutter || 0) / 2; }, function (props) { return (props.gutterX || props.gutter || 0) / 2; }, function (props) { return props.gutterY || props.gutter || 0; });
37
+ var PaneWrapperMedium = (0, styled_components_1["default"])(PaneWrapperBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &.clay-ui-row > .clay-ui-col {\n --gutter-x-md: ", "px;\n }\n\n &.clay-ui-row > ._col-md-1 {\n @media screen and (min-width: ", ") {\n width: calc(8.33% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-2 {\n @media screen and (min-width: ", ") {\n width: calc(16.66% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-3 {\n @media screen and (min-width: ", ") {\n width: calc(24.99% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-4 {\n @media screen and (min-width: ", ") {\n width: calc(33.33% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-5 {\n @media screen and (min-width: ", ") {\n width: calc(41.66% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-6 {\n @media screen and (min-width: ", ") {\n width: calc(50% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-7 {\n @media screen and (min-width: ", ") {\n width: calc(58.33% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-8 {\n @media screen and (min-width: ", ") {\n width: calc(66.66% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-9 {\n @media screen and (min-width: ", ") {\n width: calc(74.99% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-10 {\n @media screen and (min-width: ", ") {\n width: calc(83.33% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-11 {\n @media screen and (min-width: ", ") {\n width: calc(96.66% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-12 {\n @media screen and (min-width: ", ") {\n width: 100% !important;\n }\n }\n"], ["\n &.clay-ui-row > .clay-ui-col {\n --gutter-x-md: ", "px;\n }\n\n &.clay-ui-row > ._col-md-1 {\n @media screen and (min-width: ", ") {\n width: calc(8.33% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-2 {\n @media screen and (min-width: ", ") {\n width: calc(16.66% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-3 {\n @media screen and (min-width: ", ") {\n width: calc(24.99% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-4 {\n @media screen and (min-width: ", ") {\n width: calc(33.33% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-5 {\n @media screen and (min-width: ", ") {\n width: calc(41.66% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-6 {\n @media screen and (min-width: ", ") {\n width: calc(50% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-7 {\n @media screen and (min-width: ", ") {\n width: calc(58.33% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-8 {\n @media screen and (min-width: ", ") {\n width: calc(66.66% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-9 {\n @media screen and (min-width: ", ") {\n width: calc(74.99% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-10 {\n @media screen and (min-width: ", ") {\n width: calc(83.33% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-11 {\n @media screen and (min-width: ", ") {\n width: calc(96.66% - var(--gutter-x-md)) !important;\n }\n }\n\n &.clay-ui-row > ._col-md-12 {\n @media screen and (min-width: ", ") {\n width: 100% !important;\n }\n }\n"])), function (props) { return props.gutterX || props.gutter || 0; }, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm);
38
+ var PaneWrapperLarge = (0, styled_components_1["default"])(PaneWrapperMedium)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &.clay-ui-row > .clay-ui-col {\n --gutter-x-lg: ", "px;\n }\n\n &.clay-ui-row > ._col-lg-1 {\n @media screen and (min-width: ", ") {\n width: calc(8.33% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-2 {\n @media screen and (min-width: ", ") {\n width: calc(16.66% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-3 {\n @media screen and (min-width: ", ") {\n width: calc(24.99% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-4 {\n @media screen and (min-width: ", ") {\n width: calc(33.33% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-5 {\n @media screen and (min-width: ", ") {\n width: calc(41.66% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-6 {\n @media screen and (min-width: ", ") {\n width: calc(50% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-7 {\n @media screen and (min-width: ", ") {\n width: calc(58.33% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-8 {\n @media screen and (min-width: ", ") {\n width: calc(66.66% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-9 {\n @media screen and (min-width: ", ") {\n width: calc(74.99% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-10 {\n @media screen and (min-width: ", ") {\n width: calc(83.33% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-11 {\n @media screen and (min-width: ", ") {\n width: calc(96.66% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-12 {\n @media screen and (min-width: ", ") {\n width: 100% !important;\n }\n }\n"], ["\n &.clay-ui-row > .clay-ui-col {\n --gutter-x-lg: ", "px;\n }\n\n &.clay-ui-row > ._col-lg-1 {\n @media screen and (min-width: ", ") {\n width: calc(8.33% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-2 {\n @media screen and (min-width: ", ") {\n width: calc(16.66% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-3 {\n @media screen and (min-width: ", ") {\n width: calc(24.99% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-4 {\n @media screen and (min-width: ", ") {\n width: calc(33.33% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-5 {\n @media screen and (min-width: ", ") {\n width: calc(41.66% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-6 {\n @media screen and (min-width: ", ") {\n width: calc(50% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-7 {\n @media screen and (min-width: ", ") {\n width: calc(58.33% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-8 {\n @media screen and (min-width: ", ") {\n width: calc(66.66% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-9 {\n @media screen and (min-width: ", ") {\n width: calc(74.99% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-10 {\n @media screen and (min-width: ", ") {\n width: calc(83.33% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-11 {\n @media screen and (min-width: ", ") {\n width: calc(96.66% - var(--gutter-x-lg)) !important;\n }\n }\n\n &.clay-ui-row > ._col-lg-12 {\n @media screen and (min-width: ", ") {\n width: 100% !important;\n }\n }\n"])), function (props) { return props.gutterX || props.gutter || 0; }, cui_container_1.SCREEN_BREAKPOINT.md, cui_container_1.SCREEN_BREAKPOINT.md, cui_container_1.SCREEN_BREAKPOINT.md, cui_container_1.SCREEN_BREAKPOINT.md, cui_container_1.SCREEN_BREAKPOINT.md, cui_container_1.SCREEN_BREAKPOINT.md, cui_container_1.SCREEN_BREAKPOINT.md, cui_container_1.SCREEN_BREAKPOINT.md, cui_container_1.SCREEN_BREAKPOINT.md, cui_container_1.SCREEN_BREAKPOINT.md, cui_container_1.SCREEN_BREAKPOINT.md, cui_container_1.SCREEN_BREAKPOINT.md);
39
+ var PaneWrapperXLarge = (0, styled_components_1["default"])(PaneWrapperLarge)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n &.clay-ui-row > .clay-ui-col {\n --gutter-x-xl: ", "px;\n }\n\n &.clay-ui-row > ._col-xl-1 {\n @media screen and (min-width: ", ") {\n width: calc(8.33% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-2 {\n @media screen and (min-width: ", ") {\n width: calc(16.66% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-3 {\n @media screen and (min-width: ", ") {\n width: calc(24.99% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-4 {\n @media screen and (min-width: ", ") {\n width: calc(33.33% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-5 {\n @media screen and (min-width: ", ") {\n width: calc(41.66% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-6 {\n @media screen and (min-width: ", ") {\n width: calc(50% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-7 {\n @media screen and (min-width: ", ") {\n width: calc(58.33% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-8 {\n @media screen and (min-width: ", ") {\n width: calc(66.66% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-9 {\n @media screen and (min-width: ", ") {\n width: calc(74.99% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-10 {\n @media screen and (min-width: ", ") {\n width: calc(83.33% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-11 {\n @media screen and (min-width: ", ") {\n width: calc(96.66% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-12 {\n @media screen and (min-width: ", ") {\n width: 100% !important;\n }\n }\n"], ["\n &.clay-ui-row > .clay-ui-col {\n --gutter-x-xl: ", "px;\n }\n\n &.clay-ui-row > ._col-xl-1 {\n @media screen and (min-width: ", ") {\n width: calc(8.33% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-2 {\n @media screen and (min-width: ", ") {\n width: calc(16.66% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-3 {\n @media screen and (min-width: ", ") {\n width: calc(24.99% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-4 {\n @media screen and (min-width: ", ") {\n width: calc(33.33% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-5 {\n @media screen and (min-width: ", ") {\n width: calc(41.66% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-6 {\n @media screen and (min-width: ", ") {\n width: calc(50% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-7 {\n @media screen and (min-width: ", ") {\n width: calc(58.33% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-8 {\n @media screen and (min-width: ", ") {\n width: calc(66.66% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-9 {\n @media screen and (min-width: ", ") {\n width: calc(74.99% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-10 {\n @media screen and (min-width: ", ") {\n width: calc(83.33% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-11 {\n @media screen and (min-width: ", ") {\n width: calc(96.66% - var(--gutter-x-xl)) !important;\n }\n }\n\n &.clay-ui-row > ._col-xl-12 {\n @media screen and (min-width: ", ") {\n width: 100% !important;\n }\n }\n"])), function (props) { return props.gutterX || props.gutter || 0; }, cui_container_1.SCREEN_BREAKPOINT.lg, cui_container_1.SCREEN_BREAKPOINT.lg, cui_container_1.SCREEN_BREAKPOINT.lg, cui_container_1.SCREEN_BREAKPOINT.lg, cui_container_1.SCREEN_BREAKPOINT.lg, cui_container_1.SCREEN_BREAKPOINT.lg, cui_container_1.SCREEN_BREAKPOINT.lg, cui_container_1.SCREEN_BREAKPOINT.lg, cui_container_1.SCREEN_BREAKPOINT.lg, cui_container_1.SCREEN_BREAKPOINT.lg, cui_container_1.SCREEN_BREAKPOINT.lg, cui_container_1.SCREEN_BREAKPOINT.lg);
40
+ var PaneWrapperSmall = (0, styled_components_1["default"])(PaneWrapperXLarge)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &.clay-ui-row > .clay-ui-col {\n --gutter-x-sm: ", "px;\n }\n\n &.clay-ui-row > ._col-1,\n &.clay-ui-row > ._col-2,\n &.clay-ui-row > ._col-3 {\n @media screen and (max-width: ", ") {\n width: calc(25% - var(--gutter-x-sm));\n }\n }\n\n &.clay-ui-row > ._col-sm-1,\n &.clay-ui-row > ._col-sm-2,\n &.clay-ui-row > ._col-sm-3 {\n @media screen and (max-width: ", ") {\n width: calc(25% - var(--gutter-x-sm)) !important;\n }\n }\n\n &.clay-ui-row > ._col-4,\n &.clay-ui-row > ._col-5,\n &.clay-ui-row > ._col-6 {\n @media screen and (max-width: ", ") {\n width: calc(50% - var(--gutter-x-sm));\n }\n }\n\n &.clay-ui-row > ._col-sm-4,\n &.clay-ui-row > ._col-sm-5,\n &.clay-ui-row > ._col-sm-6 {\n @media screen and (max-width: ", ") {\n width: calc(50% - var(--gutter-x-sm)) !important;\n }\n }\n\n &.clay-ui-row > ._col-7,\n &.clay-ui-row > ._col-8,\n &.clay-ui-row > ._col-9 {\n @media screen and (max-width: ", ") {\n width: calc(75% - var(--gutter-x-sm));\n }\n }\n\n &.clay-ui-row > ._col-sm-7,\n &.clay-ui-row > ._col-sm-8,\n &.clay-ui-row > ._col-sm-9 {\n @media screen and (max-width: ", ") {\n width: calc(75% - var(--gutter-x-sm)) !important;\n }\n }\n\n &.clay-ui-row > ._col-10,\n &.clay-ui-row > ._col-11,\n &.clay-ui-row > ._col-12 {\n @media screen and (max-width: ", ") {\n width: 100%;\n }\n }\n\n &.clay-ui-row > ._col-sm-10,\n &.clay-ui-row > ._col-sm-11,\n &.clay-ui-row > ._col-sm-12 {\n @media screen and (max-width: ", ") {\n width: 100% !important;\n }\n }\n"], ["\n &.clay-ui-row > .clay-ui-col {\n --gutter-x-sm: ", "px;\n }\n\n &.clay-ui-row > ._col-1,\n &.clay-ui-row > ._col-2,\n &.clay-ui-row > ._col-3 {\n @media screen and (max-width: ", ") {\n width: calc(25% - var(--gutter-x-sm));\n }\n }\n\n &.clay-ui-row > ._col-sm-1,\n &.clay-ui-row > ._col-sm-2,\n &.clay-ui-row > ._col-sm-3 {\n @media screen and (max-width: ", ") {\n width: calc(25% - var(--gutter-x-sm)) !important;\n }\n }\n\n &.clay-ui-row > ._col-4,\n &.clay-ui-row > ._col-5,\n &.clay-ui-row > ._col-6 {\n @media screen and (max-width: ", ") {\n width: calc(50% - var(--gutter-x-sm));\n }\n }\n\n &.clay-ui-row > ._col-sm-4,\n &.clay-ui-row > ._col-sm-5,\n &.clay-ui-row > ._col-sm-6 {\n @media screen and (max-width: ", ") {\n width: calc(50% - var(--gutter-x-sm)) !important;\n }\n }\n\n &.clay-ui-row > ._col-7,\n &.clay-ui-row > ._col-8,\n &.clay-ui-row > ._col-9 {\n @media screen and (max-width: ", ") {\n width: calc(75% - var(--gutter-x-sm));\n }\n }\n\n &.clay-ui-row > ._col-sm-7,\n &.clay-ui-row > ._col-sm-8,\n &.clay-ui-row > ._col-sm-9 {\n @media screen and (max-width: ", ") {\n width: calc(75% - var(--gutter-x-sm)) !important;\n }\n }\n\n &.clay-ui-row > ._col-10,\n &.clay-ui-row > ._col-11,\n &.clay-ui-row > ._col-12 {\n @media screen and (max-width: ", ") {\n width: 100%;\n }\n }\n\n &.clay-ui-row > ._col-sm-10,\n &.clay-ui-row > ._col-sm-11,\n &.clay-ui-row > ._col-sm-12 {\n @media screen and (max-width: ", ") {\n width: 100% !important;\n }\n }\n"])), function (props) { return props.gutterX || props.gutter || 0; }, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm, cui_container_1.SCREEN_BREAKPOINT.sm);
41
+ var PaneWrapper = (0, styled_components_1["default"])(PaneWrapperSmall)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &.clay-ui-col._custom_width {\n width: ", " !important;\n }\n &.clay-ui-col._custom_height {\n height: ", " !important;\n }\n\n &.clay-ui-row._wrap-col {\n flex-wrap: wrap;\n }\n"], ["\n &.clay-ui-col._custom_width {\n width: ", " !important;\n }\n &.clay-ui-col._custom_height {\n height: ", " !important;\n }\n\n &.clay-ui-row._wrap-col {\n flex-wrap: wrap;\n }\n"])), function (props) { return props.width; }, function (props) { return props.height; });
42
+ /**
43
+ * A simple wrapper element to wrap any html element.
44
+ * Mainly used to compose a grid layout using Rows and Columns <br/>
45
+ * Use a series of rows, and columns to layout and align content.
46
+ */
47
+ function Pane(_a) {
48
+ var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
49
+ return (react_1["default"].createElement("div", __assign({}, rest, { className: className }), children));
50
+ }
51
+ exports.Pane = Pane;
52
+ /**
53
+ * Rows are wrappers for columns. <br/>
54
+ * Rows and Cols can be nested to create complex layouts. <br/>
55
+ */
56
+ function Row(_a) {
57
+ var className = _a.className, children = _a.children, _b = _a.direction, direction = _b === void 0 ? 'row' : _b, align = _a.align, vertical = _a.vertical, gutter = _a.gutter, gutterX = _a.gutterX, gutterY = _a.gutterY, height = _a.height, width = _a.width, _c = _a.wrapCol, wrapCol = _c === void 0 ? true : _c, rest = __rest(_a, ["className", "children", "direction", "align", "vertical", "gutter", "gutterX", "gutterY", "height", "width", "wrapCol"]);
58
+ return (react_1["default"].createElement(PaneWrapper, __assign({ gutter: gutter, gutterX: gutterX, gutterY: gutterY, className: [
59
+ className,
60
+ 'clay-ui-pane',
61
+ 'clay-ui-row',
62
+ align && '_col-align-' + align,
63
+ direction && '_col-direction-' + direction,
64
+ vertical && '_col-align-vertical-' + vertical,
65
+ wrapCol && '_wrap-col',
66
+ ].join(' '), style: { height: height, width: width } }, rest), children));
67
+ }
68
+ exports.Row = Row;
69
+ Row.prototype = {
70
+ height: 'auto',
71
+ width: 'auto'
72
+ };
73
+ /**
74
+ * Columns are wrappers for any html element. <br/>
75
+ * Used to layout content in a grid. <br/>
76
+ * Rows and Cols can be nested to create complex layouts. <br/>
77
+ * Use span, sm, md, lg, xl to specify the width of the column according to the width of the viewport. <br/>
78
+ */
79
+ function Col(_a) {
80
+ var className = _a.className, children = _a.children, span = _a.span, sm = _a.sm, md = _a.md, lg = _a.lg, xl = _a.xl, width = _a.width, height = _a.height, rest = __rest(_a, ["className", "children", "span", "sm", "md", "lg", "xl", "width", "height"]);
81
+ return (react_1["default"].createElement(PaneWrapper, __assign({ className: [
82
+ className,
83
+ 'clay-ui-pane',
84
+ 'clay-ui-col',
85
+ span && '_col-' + span,
86
+ sm && '_col-sm-' + sm,
87
+ md && '_col-md-' + md,
88
+ lg && '_col-lg-' + lg,
89
+ xl && '_col-xl-' + xl,
90
+ width && '_custom_width',
91
+ height && '_custom-height',
92
+ ].join(' ') }, rest, { width: width, height: height }), children));
93
+ }
94
+ exports.Col = Col;
95
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;