@usecapsule/core-components 1.0.0

package/dist/esm/cpsl-col.entry.js

@@ -0,0 +1,121 @@
+import { r as registerInstance, f as forceUpdate, h, H as Host } from './index-7c2f5cb9.js';
+
+const SIZE_TO_MEDIA = {
+    xs: '(min-width: 0px)',
+    sm: '(min-width: 576px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 992px)',
+    xl: '(min-width: 1200px)',
+};
+const matchBreakpoint = (breakpoint) => {
+    if (breakpoint === undefined || breakpoint === '') {
+        return true;
+    }
+    if (window.matchMedia) {
+        const mediaQuery = SIZE_TO_MEDIA[breakpoint];
+        return window.matchMedia(mediaQuery).matches;
+    }
+    return false;
+};
+
+const cpslColCss = ":host{-webkit-padding-start:var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));padding-inline-start:var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));-webkit-padding-end:var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));padding-inline-end:var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));padding-top:var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));padding-bottom:var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;box-sizing:border-box;position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px}@media (min-width: 576px){:host{-webkit-padding-start:var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));padding-inline-start:var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));-webkit-padding-end:var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));padding-inline-end:var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));padding-top:var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));padding-bottom:var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));padding-inline-start:var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));-webkit-padding-end:var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));padding-inline-end:var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));padding-top:var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));padding-bottom:var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));padding-inline-start:var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));-webkit-padding-end:var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));padding-inline-end:var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));padding-top:var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));padding-bottom:var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));padding-inline-start:var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));-webkit-padding-end:var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));padding-inline-end:var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));padding-top:var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));padding-bottom:var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px))}}";
+const CpslColStyle0 = cpslColCss;
+
+const win = typeof window !== 'undefined' ? window : undefined;
+const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
+const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
+const CpslCol = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.offset = undefined;
+        this.offsetXs = undefined;
+        this.offsetSm = undefined;
+        this.offsetMd = undefined;
+        this.offsetLg = undefined;
+        this.offsetXl = undefined;
+        this.pull = undefined;
+        this.pullXs = undefined;
+        this.pullSm = undefined;
+        this.pullMd = undefined;
+        this.pullLg = undefined;
+        this.pullXl = undefined;
+        this.push = undefined;
+        this.pushXs = undefined;
+        this.pushSm = undefined;
+        this.pushMd = undefined;
+        this.pushLg = undefined;
+        this.pushXl = undefined;
+        this.size = undefined;
+        this.sizeXs = undefined;
+        this.sizeSm = undefined;
+        this.sizeMd = undefined;
+        this.sizeLg = undefined;
+        this.sizeXl = undefined;
+    }
+    onResize() {
+        forceUpdate(this);
+    }
+    getColumns(property) {
+        let matched;
+        for (const breakpoint of BREAKPOINTS) {
+            const matches = matchBreakpoint(breakpoint);
+            const columns = this[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];
+            if (matches && columns !== undefined) {
+                matched = columns;
+            }
+        }
+        return matched;
+    }
+    calculateSize() {
+        const columns = this.getColumns('size');
+        if (!columns || columns === '') {
+            return;
+        }
+        const colSize = columns === 'auto'
+            ? 'auto'
+            :
+                SUPPORTS_VARS
+                    ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+                    :
+                        (columns / 12) * 100 + '%';
+        return {
+            'flex': `0 0 ${colSize}`,
+            'width': `${colSize}`,
+            'max-width': `${colSize}`,
+        };
+    }
+    calculatePosition(property, modifier) {
+        const columns = this.getColumns(property);
+        if (!columns) {
+            return;
+        }
+        const amount = SUPPORTS_VARS
+            ?
+                `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+            :
+                columns > 0 && columns < 12
+                    ? (columns / 12) * 100 + '%'
+                    : 'auto';
+        return {
+            [modifier]: amount,
+        };
+    }
+    calculateOffset(isRTL) {
+        return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');
+    }
+    calculatePull(isRTL) {
+        return this.calculatePosition('pull', isRTL ? 'left' : 'right');
+    }
+    calculatePush(isRTL) {
+        return this.calculatePosition('push', isRTL ? 'right' : 'left');
+    }
+    render() {
+        const isRTL = document.dir === 'rtl';
+        return (h(Host, { key: 'd139326f078622312b5d8113d621049ad15ac522', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '7dc68151a908d12d6fc2f62935e7d029539a1caf' })));
+    }
+};
+CpslCol.style = CpslColStyle0;
+
+export { CpslCol as cpsl_col };
+
+//# sourceMappingURL=cpsl-col.entry.js.map

package/dist/esm/cpsl-col.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-col.entry.js","mappings":"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","names":[],"sources":["src/utils/media.ts","src/components/cpsl-col/cpsl-col.scss?tag=cpsl-col&encapsulation=shadow","src/components/cpsl-col/cpsl-col.tsx"],"sourcesContent":["export const SIZE_TO_MEDIA: any = {\n  xs: '(min-width: 0px)',\n  sm: '(min-width: 576px)',\n  md: '(min-width: 768px)',\n  lg: '(min-width: 992px)',\n  xl: '(min-width: 1200px)',\n};\n\n// Check if the window matches the media query\n// at the breakpoint passed\n// e.g. matchBreakpoint('sm') => true if screen width exceeds 576px\nexport const matchBreakpoint = (breakpoint: string | undefined) => {\n  if (breakpoint === undefined || breakpoint === '') {\n    return true;\n  }\n  if ((window as any).matchMedia) {\n    const mediaQuery = SIZE_TO_MEDIA[breakpoint];\n    return window.matchMedia(mediaQuery).matches;\n  }\n  return false;\n};\n","@import './cpsl-col.vars';\n\n// Column\n// --------------------------------------------------\n\n:host {\n  /**\n   * @prop --cpsl-grid-columns: The number of total Columns in the Grid\n   * @prop --cpsl-grid-column-padding: Padding for the Column\n   * @prop --cpsl-grid-column-padding-xs: Padding for the Column on xs screens and up\n   * @prop --cpsl-grid-column-padding-sm: Padding for the Column on sm screens and up\n   * @prop --cpsl-grid-column-padding-md: Padding for the Column on md screens and up\n   * @prop --cpsl-grid-column-padding-lg: Padding for the Column on lg screens and up\n   * @prop --cpsl-grid-column-padding-xl: Padding for the Column on xl screens and up\n   */\n  @include make-breakpoint-padding($grid-column-paddings);\n  @include margin(0);\n\n  box-sizing: border-box;\n\n  position: relative;\n\n  flex-basis: 0;\n  flex-grow: 1;\n\n  width: 100%;\n  max-width: 100%;\n  min-height: 1px; // Prevent columns from collapsing when empty\n}\n","import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\nimport { matchBreakpoint } from '../../utils/media';\n\nconst win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;\nconst SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\n\n@Component({\n  tag: 'cpsl-col',\n  styleUrl: 'cpsl-col.scss',\n  shadow: true,\n})\nexport class CpslCol {\n  /**\n   * The amount to offset the column, in terms of how many columns it should shift to the end\n   * of the total available.\n   */\n  @Prop() offset?: string;\n\n  /**\n   * The amount to offset the column for xs screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetXs?: string;\n\n  /**\n   * The amount to offset the column for sm screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetSm?: string;\n\n  /**\n   * The amount to offset the column for md screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetMd?: string;\n\n  /**\n   * The amount to offset the column for lg screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetLg?: string;\n\n  /**\n   * The amount to offset the column for xl screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetXl?: string;\n\n  /**\n   * The amount to pull the column, in terms of how many columns it should shift to the start of\n   * the total available.\n   */\n  @Prop() pull?: string;\n\n  /**\n   * The amount to pull the column for xs screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullXs?: string;\n  /**\n   * The amount to pull the column for sm screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullSm?: string;\n  /**\n   * The amount to pull the column for md screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullMd?: string;\n  /**\n   * The amount to pull the column for lg screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullLg?: string;\n  /**\n   * The amount to pull the column for xl screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullXl?: string;\n\n  /**\n   * The amount to push the column, in terms of how many columns it should shift to the end\n   * of the total available.\n   */\n  @Prop() push?: string;\n\n  /**\n   * The amount to push the column for xs screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushXs?: string;\n\n  /**\n   * The amount to push the column for sm screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushSm?: string;\n\n  /**\n   * The amount to push the column for md screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushMd?: string;\n\n  /**\n   * The amount to push the column for lg screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushLg?: string;\n\n  /**\n   * The amount to push the column for xl screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushXl?: string;\n\n  /**\n   * The size of the column, in terms of how many columns it should take up out of the total\n   * available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() size?: string;\n\n  /**\n   * The size of the column for xs screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeXs?: string;\n\n  /**\n   * The size of the column for sm screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeSm?: string;\n\n  /**\n   * The size of the column for md screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeMd?: string;\n\n  /**\n   * The size of the column for lg screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeLg?: string;\n\n  /**\n   * The size of the column for xl screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeXl?: string;\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    forceUpdate(this);\n  }\n\n  // Loop through all of the breakpoints to see if the media query\n  // matches and grab the column value from the relevant prop if so\n  private getColumns(property: string) {\n    let matched;\n\n    for (const breakpoint of BREAKPOINTS) {\n      const matches = matchBreakpoint(breakpoint);\n\n      // Grab the value of the property, if it exists and our\n      // media query matches we return the value\n      const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n\n      if (matches && columns !== undefined) {\n        matched = columns;\n      }\n    }\n\n    // Return the last matched columns since the breakpoints\n    // increase in size and we want to return the largest match\n    return matched;\n  }\n\n  private calculateSize() {\n    const columns = this.getColumns('size');\n\n    // If size wasn't set for any breakpoint\n    // or if the user set the size without a value\n    // it means we need to stick with the default and return\n    // e.g. <ion-col size-md>\n    if (!columns || columns === '') {\n      return;\n    }\n\n    // If the size is set to auto then don't calculate a size\n    const colSize =\n      columns === 'auto'\n        ? 'auto'\n        : // If CSS supports variables we should use the grid columns var\n        SUPPORTS_VARS\n        ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n        : // Convert the columns to a percentage by dividing by the total number\n          // of columns (12) and then multiplying by 100\n          (columns / 12) * 100 + '%';\n\n    return {\n      'flex': `0 0 ${colSize}`,\n      'width': `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  // Called by push, pull, and offset since they use the same calculations\n  private calculatePosition(property: string, modifier: string) {\n    const columns = this.getColumns(property);\n\n    if (!columns) {\n      return;\n    }\n\n    // If the number of columns passed are greater than 0 and less than\n    // 12 we can position the column, else default to auto\n    const amount = SUPPORTS_VARS\n      ? // If CSS supports variables we should use the grid columns var\n        `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n      : // Convert the columns to a percentage by dividing by the total number\n      // of columns (12) and then multiplying by 100\n      columns > 0 && columns < 12\n      ? (columns / 12) * 100 + '%'\n      : 'auto';\n\n    return {\n      [modifier]: amount,\n    };\n  }\n\n  private calculateOffset(isRTL: boolean) {\n    return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');\n  }\n\n  private calculatePull(isRTL: boolean) {\n    return this.calculatePosition('pull', isRTL ? 'left' : 'right');\n  }\n\n  private calculatePush(isRTL: boolean) {\n    return this.calculatePosition('push', isRTL ? 'right' : 'left');\n  }\n\n  render() {\n    const isRTL = document.dir === 'rtl';\n    return (\n      <Host\n        style={{\n          ...this.calculateOffset(isRTL),\n          ...this.calculatePull(isRTL),\n          ...this.calculatePush(isRTL),\n          ...this.calculateSize(),\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/cpsl-grid.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, H as Host } from './index-7c2f5cb9.js';
+
+const cpslGridCss = ":host{-webkit-padding-start:var(--cpsl-grid-padding-xs, var(--cpsl-grid-padding, 0px));padding-inline-start:var(--cpsl-grid-padding-xs, var(--cpsl-grid-padding, 0px));-webkit-padding-end:var(--cpsl-grid-padding-xs, var(--cpsl-grid-padding, 0px));padding-inline-end:var(--cpsl-grid-padding-xs, var(--cpsl-grid-padding, 0px));padding-top:var(--cpsl-grid-padding-xs, var(--cpsl-grid-padding, 0px));padding-bottom:var(--cpsl-grid-padding-xs, var(--cpsl-grid-padding, 0px));-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;display:block;flex:1}@media (min-width: 576px){:host{-webkit-padding-start:var(--cpsl-grid-padding-sm, var(--cpsl-grid-padding, 0px));padding-inline-start:var(--cpsl-grid-padding-sm, var(--cpsl-grid-padding, 0px));-webkit-padding-end:var(--cpsl-grid-padding-sm, var(--cpsl-grid-padding, 0px));padding-inline-end:var(--cpsl-grid-padding-sm, var(--cpsl-grid-padding, 0px));padding-top:var(--cpsl-grid-padding-sm, var(--cpsl-grid-padding, 0px));padding-bottom:var(--cpsl-grid-padding-sm, var(--cpsl-grid-padding, 0px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--cpsl-grid-padding-md, var(--cpsl-grid-padding, 0px));padding-inline-start:var(--cpsl-grid-padding-md, var(--cpsl-grid-padding, 0px));-webkit-padding-end:var(--cpsl-grid-padding-md, var(--cpsl-grid-padding, 0px));padding-inline-end:var(--cpsl-grid-padding-md, var(--cpsl-grid-padding, 0px));padding-top:var(--cpsl-grid-padding-md, var(--cpsl-grid-padding, 0px));padding-bottom:var(--cpsl-grid-padding-md, var(--cpsl-grid-padding, 0px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--cpsl-grid-padding-lg, var(--cpsl-grid-padding, 0px));padding-inline-start:var(--cpsl-grid-padding-lg, var(--cpsl-grid-padding, 0px));-webkit-padding-end:var(--cpsl-grid-padding-lg, var(--cpsl-grid-padding, 0px));padding-inline-end:var(--cpsl-grid-padding-lg, var(--cpsl-grid-padding, 0px));padding-top:var(--cpsl-grid-padding-lg, var(--cpsl-grid-padding, 0px));padding-bottom:var(--cpsl-grid-padding-lg, var(--cpsl-grid-padding, 0px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--cpsl-grid-padding-xl, var(--cpsl-grid-padding, 0px));padding-inline-start:var(--cpsl-grid-padding-xl, var(--cpsl-grid-padding, 0px));-webkit-padding-end:var(--cpsl-grid-padding-xl, var(--cpsl-grid-padding, 0px));padding-inline-end:var(--cpsl-grid-padding-xl, var(--cpsl-grid-padding, 0px));padding-top:var(--cpsl-grid-padding-xl, var(--cpsl-grid-padding, 0px));padding-bottom:var(--cpsl-grid-padding-xl, var(--cpsl-grid-padding, 0px))}}:host(.grid-fixed){width:var(--cpsl-grid-width-xs, var(--cpsl-grid-width, 100%));max-width:100%}@media (min-width: 576px){:host(.grid-fixed){width:var(--cpsl-grid-width-sm, var(--cpsl-grid-width, 540px))}}@media (min-width: 768px){:host(.grid-fixed){width:var(--cpsl-grid-width-md, var(--cpsl-grid-width, 720px))}}@media (min-width: 992px){:host(.grid-fixed){width:var(--cpsl-grid-width-lg, var(--cpsl-grid-width, 960px))}}@media (min-width: 1200px){:host(.grid-fixed){width:var(--cpsl-grid-width-xl, var(--cpsl-grid-width, 1140px))}}:host(.cpsl-no-padding){--cpsl-grid-column-padding:0;--cpsl-grid-column-padding-xs:0;--cpsl-grid-column-padding-sm:0;--cpsl-grid-column-padding-md:0;--cpsl-grid-column-padding-lg:0;--cpsl-grid-column-padding-xl:0}";
+const CpslGridStyle0 = cpslGridCss;
+
+const CpslGrid = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.fixed = false;
+    }
+    render() {
+        return (h(Host, { key: 'b0a1f06f9b42d8221691fbebca0af4fd18c5961d', class: {
+                'grid-fixed': this.fixed,
+            } }, h("slot", { key: '7d7ed9333ccf1fcd93d6327e7ba1d430054b1230' })));
+    }
+};
+CpslGrid.style = CpslGridStyle0;
+
+export { CpslGrid as cpsl_grid };
+
+//# sourceMappingURL=cpsl-grid.entry.js.map

package/dist/esm/cpsl-grid.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-grid.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0vGAA0vG,CAAC;AAC/wG,uBAAe,WAAW;;MCMb,QAAQ;;;qBAIH,KAAK;;IAErB,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,KAAK;aACzB,IAED,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/cpsl-grid/cpsl-grid.scss?tag=cpsl-grid&encapsulation=shadow","src/components/cpsl-grid/cpsl-grid.tsx"],"sourcesContent":["@import './cpsl-grid.vars';\n\n// Grid\n// --------------------------------------------------\n\n:host {\n  /**\n   * @prop --cpsl-grid-padding: Padding for the Grid\n   * @prop --cpsl-grid-padding-xs: Padding for the Grid on xs screens\n   * @prop --cpsl-grid-padding-sm: Padding for the Grid on sm screens\n   * @prop --cpsl-grid-padding-md: Padding for the Grid on md screens\n   * @prop --cpsl-grid-padding-lg: Padding for the Grid on lg screens\n   * @prop --cpsl-grid-padding-xl: Padding for the Grid on xl screens\n   *\n   * @prop --cpsl-grid-width: Width of the fixed Grid\n   * @prop --cpsl-grid-width-xs: Width of the fixed Grid on xs screens\n   * @prop --cpsl-grid-width-sm: Width of the fixed Grid on sm screens\n   * @prop --cpsl-grid-width-md: Width of the fixed Grid on md screens\n   * @prop --cpsl-grid-width-lg: Width of the fixed Grid on lg screens\n   * @prop --cpsl-grid-width-xl: Width of the fixed Grid on xl screens\n   */\n\n  @include make-breakpoint-padding($grid-paddings);\n  @include margin-horizontal(auto);\n\n  display: block;\n\n  flex: 1;\n}\n\n// Fixed Grid\n// --------------------------------------------------\n\n:host(.grid-fixed) {\n  @include make-grid-widths();\n}\n\n// Grid Padding\n// --------------------------------------------------\n\n// Remove the padding from grid and all immediate children columns\n:host(.cpsl-no-padding) {\n  --cpsl-grid-column-padding: 0;\n  --cpsl-grid-column-padding-xs: 0;\n  --cpsl-grid-column-padding-sm: 0;\n  --cpsl-grid-column-padding-md: 0;\n  --cpsl-grid-column-padding-lg: 0;\n  --cpsl-grid-column-padding-xl: 0;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-grid',\n  styleUrl: 'cpsl-grid.scss',\n  shadow: true,\n})\nexport class CpslGrid {\n  /**\n   * If `true`, the grid will have a fixed width based on the screen size.\n   */\n  @Prop() fixed = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'grid-fixed': this.fixed,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/cpsl-info-box.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host } from './index-7c2f5cb9.js';
+
+const cpslInfoBoxCss = ":host{--box-border-radius:var(--cpsl-border-radius-info-box);--box-padding-top:16px;--box-padding-bottom:16px;--box-padding-start:16px;--box-padding-end:16px;--box-border-width:1px;border-radius:var(--input-border-radius);-webkit-padding-start:var(--box-padding-start);padding-inline-start:var(--box-padding-start);-webkit-padding-end:var(--box-padding-end);padding-inline-end:var(--box-padding-end);padding-top:var(--box-padding-top);padding-bottom:var(--box-padding-bottom);display:flex;background-color:var(--cpsl-color-background-subtle);border:var(--box-border-width) solid var(--cpsl-color-input-border-placeholder);border-radius:var(--box-border-radius)}";
+const CpslInfoBoxStyle0 = cpslInfoBoxCss;
+
+const CpslInfoBox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '17a3490640f95a341c0942188979b2cb82f37da1' }, h("slot", { key: 'c1d89e758c856d6edd1ec559b4f3da145a33837b' })));
+    }
+};
+CpslInfoBox.style = CpslInfoBoxStyle0;
+
+export { CpslInfoBox as cpsl_info_box };
+
+//# sourceMappingURL=cpsl-info-box.entry.js.map

package/dist/esm/cpsl-info-box.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-info-box.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,upBAAupB,CAAC;AAC/qB,0BAAe,cAAc;;MCMhB,WAAW;;;;IACtB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/cpsl-info-box/cpsl-info-box.scss?tag=cpsl-info-box&encapsulation=shadow","src/components/cpsl-info-box/cpsl-info-box.tsx"],"sourcesContent":["@import '../../themes/capsule.globals';\n\n:host {\n  --box-border-radius: var(--cpsl-border-radius-info-box);\n  --box-padding-top: 16px;\n  --box-padding-bottom: 16px;\n  --box-padding-start: 16px;\n  --box-padding-end: 16px;\n  --box-border-width: 1px;\n\n  @include border-radius(var(--input-border-radius));\n  @include padding(var(--box-padding-top), var(--box-padding-end), var(--box-padding-bottom), var(--box-padding-start));\n\n  display: flex;\n  background-color: var(--cpsl-color-background-subtle);\n  border: var(--box-border-width) solid var(--cpsl-color-input-border-placeholder);\n  border-radius: var(--box-border-radius);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-info-box',\n  styleUrl: 'cpsl-info-box.scss',\n  shadow: true,\n})\nexport class CpslInfoBox {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/cpsl-row.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host } from './index-7c2f5cb9.js';
+
+const cpslRowCss = ":host{display:flex;flex-wrap:wrap}";
+const CpslRowStyle0 = cpslRowCss;
+
+const CpslRow = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: 'cfa6b37775e3d61610a3467c2656b13e88b5f989' }, h("slot", { key: '064bc1a3eb128c8b871e68eeadb78aac74914976' })));
+    }
+};
+CpslRow.style = CpslRowStyle0;
+
+export { CpslRow as cpsl_row };
+
+//# sourceMappingURL=cpsl-row.entry.js.map

package/dist/esm/cpsl-row.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-row.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,oCAAoC,CAAC;AACxD,sBAAe,UAAU;;MCMZ,OAAO;;;;IAClB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/cpsl-row/cpsl-row.scss?tag=cpsl-row&encapsulation=shadow","src/components/cpsl-row/cpsl-row.tsx"],"sourcesContent":["@import './cpsl-row.vars';\n\n// Row\n// --------------------------------------------------\n\n:host {\n  display: flex;\n\n  flex-wrap: wrap;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-row',\n  styleUrl: 'cpsl-row.scss',\n  shadow: true,\n})\nexport class CpslRow {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}