@getpara/core-components 2.0.0-dev.0 → 2.0.0-dev.2

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

@@ -30,6 +30,9 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 const CpslCol = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.align = 'center';
+        this.justify = 'center';
+        this.gap = '8px';
         this.offset = undefined;
         this.offsetXs = undefined;
         this.offsetSm = undefined;
@@ -130,7 +133,7 @@ const CpslCol = class {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        return (h(Host, { key: 'c9d2d0d4c021bc38e672ef6a8db36b1f50f53e2c', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: 'a9f61e679573d1ec7cf26ac9837b0fabf9f885eb' })));
+        return (h(Host, { key: 'f4939676b491eb1d76138f93495ca714338efa34', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '58799b5710715af09184b88c94d46638e78e1f41' })));
     }
 };
 CpslCol.style = CpslColStyle0;

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

@@ -1 +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 (typeof window !== 'undefined' && (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.js';\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}
+{"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 (typeof window !== 'undefined' && (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.js';\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  @Prop() align?: React.CSSProperties['alignItems'] = 'center';\n\n  @Prop() justify?: React.CSSProperties['justifyContent'] = 'center';\n\n  @Prop() gap?: React.CSSProperties['gap'] = '8px';\n\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-identicon.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-91db3414.js';
 import { C as COLORS, P as Prando } from './prand-4c0d6ea7.js';
 
-const cpslIdenticonCss = ":host{--identicon-background-red:linear-gradient(136deg, #ff4270 6.86%, #ff7c7c 93.78%);--identicon-background-orange:linear-gradient(136deg, #f45532 6.86%, #ff9b63 93.78%);--identicon-background-yellow:linear-gradient(136deg, #ffa756 6.86%, #fbff47 93.78%);--identicon-background-green:linear-gradient(136deg, #0cae60 6.86%, #7bffd0 93.78%);--identicon-background-blue:linear-gradient(136deg, #476fff 6.86%, #47c8ff 93.78%);--identicon-background-purple:linear-gradient(136deg, #9747ff 6.86%, #da47ff 93.78%);--identicon-background-empty:linear-gradient(136deg, #aaaaaa 6.86%, #999999 93.78%);display:block;aspect-ratio:1;border-radius:25%;position:relative;border:1px solid var(--cpsl-color-background-8)}:host>svg{fill:rgba(255, 255, 255, 0.6);position:absolute;width:30%}:host>svg.rotate90{transform:rotate(0.25turn)}:host>svg.rotate180{transform:rotate(0.5turn)}:host>svg.rotate270{transform:rotate(0.75turn)}:host>svg:nth-child(1){right:50%;bottom:50%}:host>svg:nth-child(2){left:50%;bottom:50%}:host>svg:nth-child(3){right:50%;top:50%}:host>svg:nth-child(4){left:50%;top:50%}:host(.red){background:var(--identicon-background-red)}:host(.orange){background:var(--identicon-background-orange)}:host(.green){background:var(--identicon-background-green)}:host(.yellow){background:var(--identicon-background-yellow)}:host(.blue){background:var(--identicon-background-blue)}:host(.purple){background:var(--identicon-background-purple)}:host(.empty){background:var(--identicon-background-empty)}:host(.avatar){border-radius:1000px}";
+const cpslIdenticonCss = ":host{--identicon-background-red:linear-gradient(136deg, #ff4270 6.86%, #ff7c7c 93.78%);--identicon-background-orange:linear-gradient(136deg, #f45532 6.86%, #ff9b63 93.78%);--identicon-background-yellow:linear-gradient(136deg, #ffa756 6.86%, #fbff47 93.78%);--identicon-background-green:linear-gradient(136deg, #0cae60 6.86%, #7bffd0 93.78%);--identicon-background-blue:linear-gradient(136deg, #476fff 6.86%, #47c8ff 93.78%);--identicon-background-purple:linear-gradient(136deg, #9747ff 6.86%, #da47ff 93.78%);--identicon-background-empty:linear-gradient(136deg, #aaaaaa 6.86%, #999999 93.78%);--identicon-arc-width:30%;display:block;aspect-ratio:1;border-radius:25%;position:relative;border:1px solid var(--cpsl-color-background-8)}:host>svg{fill:rgba(255, 255, 255, 0.6);position:absolute;width:var(--identicon-arc-width)}:host>svg.rotate90{transform:rotate(0.25turn)}:host>svg.rotate180{transform:rotate(0.5turn)}:host>svg.rotate270{transform:rotate(0.75turn)}:host>svg:nth-child(1){right:50%;bottom:50%}:host>svg:nth-child(2){left:50%;bottom:50%}:host>svg:nth-child(3){right:50%;top:50%}:host>svg:nth-child(4){left:50%;top:50%}:host(.red){background:var(--identicon-background-red)}:host(.orange){background:var(--identicon-background-orange)}:host(.green){background:var(--identicon-background-green)}:host(.yellow){background:var(--identicon-background-yellow)}:host(.blue){background:var(--identicon-background-blue)}:host(.purple){background:var(--identicon-background-purple)}:host(.empty){background:var(--identicon-background-empty)}:host(.avatar){border-radius:1000px}";
 const CpslIdenticonStyle0 = cpslIdenticonCss;
 
 const SingleArc = (rotation) => (h("svg", { class: {
@@ -58,13 +58,14 @@ const CpslIdenticon = class {
         this.hash = undefined;
         this.size = '40px';
         this.variant = 'default';
+        this.arcWidth = '30%';
     }
     render() {
         let props;
         const isEmpty = !this.hash;
         if (!isEmpty)
             props = getIdenticonProps(this.hash);
-        return (h(Host, { key: '55072485ad5993ad8eb075a9d7d83e7e137ec9cd', class: {
+        return (h(Host, { key: '36535b7eb44bb8ca146db1efde320268b78d5ad0', class: {
                 red: (props === null || props === void 0 ? void 0 : props.color) === 'red',
                 orange: (props === null || props === void 0 ? void 0 : props.color) === 'orange',
                 yellow: (props === null || props === void 0 ? void 0 : props.color) === 'yellow',
@@ -76,6 +77,7 @@ const CpslIdenticon = class {
             }, style: {
                 width: this.size,
                 height: this.size,
+                ['--identicon-arc-width']: this.arcWidth,
             } }, (props === null || props === void 0 ? void 0 : props.shapes) &&
             (props === null || props === void 0 ? void 0 : props.rotations) &&
             props.shapes.map((isDouble, index) => {

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

@@ -1 +1 @@
-{"file":"cpsl-identicon.entry.js","mappings":"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","names":[],"sources":["src/components/cpsl-identicon/cpsl-identicon.scss?tag=cpsl-identicon&encapsulation=shadow","src/components/cpsl-identicon/cpsl-identicon.tsx"],"sourcesContent":[":host {\n  --identicon-background-red: linear-gradient(136deg, #ff4270 6.86%, #ff7c7c 93.78%);\n  --identicon-background-orange: linear-gradient(136deg, #f45532 6.86%, #ff9b63 93.78%);\n  --identicon-background-yellow: linear-gradient(136deg, #ffa756 6.86%, #fbff47 93.78%);\n  --identicon-background-green: linear-gradient(136deg, #0cae60 6.86%, #7bffd0 93.78%);\n  --identicon-background-blue: linear-gradient(136deg, #476fff 6.86%, #47c8ff 93.78%);\n  --identicon-background-purple: linear-gradient(136deg, #9747ff 6.86%, #da47ff 93.78%);\n  --identicon-background-empty: linear-gradient(136deg, #aaaaaa 6.86%, #999999 93.78%);\n\n  display: block;\n  aspect-ratio: 1;\n  border-radius: 25%;\n  position: relative;\n  border: 1px solid var(--cpsl-color-background-8);\n\n  & > svg {\n    fill: rgba(255, 255, 255, 0.6);\n    position: absolute;\n    width: 30%;\n  }\n\n  & > svg.rotate90 {\n    transform: rotate(0.25turn);\n  }\n\n  & > svg.rotate180 {\n    transform: rotate(0.5turn);\n  }\n\n  & > svg.rotate270 {\n    transform: rotate(0.75turn);\n  }\n\n  & > svg:nth-child(1) {\n    right: 50%;\n    bottom: 50%;\n  }\n\n  & > svg:nth-child(2) {\n    left: 50%;\n    bottom: 50%;\n  }\n\n  & > svg:nth-child(3) {\n    right: 50%;\n    top: 50%;\n  }\n\n  & > svg:nth-child(4) {\n    left: 50%;\n    top: 50%;\n  }\n}\n\n:host(.red) {\n  background: var(--identicon-background-red);\n}\n\n:host(.orange) {\n  background: var(--identicon-background-orange);\n}\n\n:host(.green) {\n  background: var(--identicon-background-green);\n}\n\n:host(.yellow) {\n  background: var(--identicon-background-yellow);\n}\n\n:host(.blue) {\n  background: var(--identicon-background-blue);\n}\n\n:host(.purple) {\n  background: var(--identicon-background-purple);\n}\n\n:host(.empty) {\n  background: var(--identicon-background-empty);\n}\n\n:host(.avatar) {\n  border-radius: 1000px;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport Prando from '../../lib/prando.js';\nimport { Color, COLORS } from '../../utils/prand.js';\n\nconst SingleArc = (rotation: number) => (\n  <svg\n    class={{\n      rotate90: rotation === 1,\n      rotate180: rotation === 2,\n      rotate270: rotation === 3,\n    }}\n    viewBox=\"0 0 12 12\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g clip-path=\"url(#clip0_674_66)\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_674_66\">\n        <rect width=\"12\" height=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\n\nconst DoubleArc = (rotation: number) => (\n  <svg\n    class={{\n      rotate90: rotation === 1,\n      rotate180: rotation === 2,\n      rotate270: rotation === 3,\n    }}\n    viewBox=\"0 0 12 12\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g clip-path=\"url(#clip0_674_255)\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_674_255\">\n        <rect width=\"12\" height=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\n\nconst BASE_PATTERNS = [\n  [\n    [0, 0, 0, 0],\n    [0, 1, 3, 2],\n  ],\n  [\n    [1, 1, 0, 0],\n    [0, 1, 3, 2],\n  ],\n  [\n    [0, 1, 0, 1],\n    [0, 1, 3, 2],\n  ],\n  [\n    [0, 0, 1, 1],\n    [0, 1, 3, 2],\n  ],\n  [\n    [1, 0, 1, 0],\n    [0, 1, 3, 2],\n  ],\n  [\n    [1, 1, 1, 1],\n    [0, 1, 3, 2],\n  ],\n  [\n    [0, 0, 0, 0],\n    [2, 3, 1, 0],\n  ],\n  [\n    [1, 1, 1, 1],\n    [2, 3, 1, 0],\n  ],\n  [\n    [1, 1, 1, 1],\n    [0, 1, 2, 3],\n  ],\n];\n\n@Component({\n  tag: 'cpsl-identicon',\n  styleUrl: 'cpsl-identicon.scss',\n  shadow: true,\n})\nexport class CpslIdenticon {\n  @Prop() hash?: string | undefined;\n\n  /**\n   *  The CSS width and height of the identicon.\n   *  Default is: 40px.\n   */\n  @Prop() size: string = '40px';\n\n  @Prop() variant: 'default' | 'avatar' = 'default';\n\n  render() {\n    let props;\n    const isEmpty = !this.hash;\n    if (!isEmpty) props = getIdenticonProps(this.hash);\n\n    return (\n      <Host\n        class={{\n          red: props?.color === 'red',\n          orange: props?.color === 'orange',\n          yellow: props?.color === 'yellow',\n          green: props?.color === 'green',\n          blue: props?.color === 'blue',\n          purple: props?.color === 'purple',\n          empty: !props?.color && !this.hash,\n          avatar: this.variant === 'avatar',\n        }}\n        style={{\n          width: this.size,\n          height: this.size,\n        }}\n      >\n        {props?.shapes &&\n          props?.rotations &&\n          props.shapes.map((isDouble, index) => {\n            return isDouble ? DoubleArc(props.rotations[index]) : SingleArc(props.rotations[index]);\n          })}\n      </Host>\n    );\n  }\n}\n\nconst PRANDO_INTS = [COLORS.length, BASE_PATTERNS.length, 16];\n\nfunction getIdenticonProps(seed: string): { color: Color; shapes: boolean[]; rotations: number[] } {\n  const rng = new Prando(seed);\n\n  const [iColor, iPattern, iDeviation] = PRANDO_INTS.map(len => rng.nextInt(0, len - 1));\n\n  const deviationIndex = Math.floor(iDeviation / 4);\n  const [isDeviateShape, isDeviateFlip] = [iDeviation % 2 === 1, iDeviation % 4 >= 2];\n\n  return {\n    color: COLORS[iColor],\n    shapes: BASE_PATTERNS[iPattern][0].map((s, i) => {\n      return i === deviationIndex ? (isDeviateShape ? (s === 1 ? false : true) : s === 1) : s === 1;\n    }),\n    rotations: BASE_PATTERNS[iPattern][1].map((r, i) => (i === deviationIndex ? (isDeviateFlip ? (r + 2) % 4 : r) : r)),\n  };\n}\n"],"version":3}
+{"file":"cpsl-identicon.entry.js","mappings":"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","names":[],"sources":["src/components/cpsl-identicon/cpsl-identicon.scss?tag=cpsl-identicon&encapsulation=shadow","src/components/cpsl-identicon/cpsl-identicon.tsx"],"sourcesContent":[":host {\n  --identicon-background-red: linear-gradient(136deg, #ff4270 6.86%, #ff7c7c 93.78%);\n  --identicon-background-orange: linear-gradient(136deg, #f45532 6.86%, #ff9b63 93.78%);\n  --identicon-background-yellow: linear-gradient(136deg, #ffa756 6.86%, #fbff47 93.78%);\n  --identicon-background-green: linear-gradient(136deg, #0cae60 6.86%, #7bffd0 93.78%);\n  --identicon-background-blue: linear-gradient(136deg, #476fff 6.86%, #47c8ff 93.78%);\n  --identicon-background-purple: linear-gradient(136deg, #9747ff 6.86%, #da47ff 93.78%);\n  --identicon-background-empty: linear-gradient(136deg, #aaaaaa 6.86%, #999999 93.78%);\n  --identicon-arc-width: 30%;\n\n  display: block;\n  aspect-ratio: 1;\n  border-radius: 25%;\n  position: relative;\n  border: 1px solid var(--cpsl-color-background-8);\n\n  & > svg {\n    fill: rgba(255, 255, 255, 0.6);\n    position: absolute;\n    width: var(--identicon-arc-width);\n  }\n\n  & > svg.rotate90 {\n    transform: rotate(0.25turn);\n  }\n\n  & > svg.rotate180 {\n    transform: rotate(0.5turn);\n  }\n\n  & > svg.rotate270 {\n    transform: rotate(0.75turn);\n  }\n\n  & > svg:nth-child(1) {\n    right: 50%;\n    bottom: 50%;\n  }\n\n  & > svg:nth-child(2) {\n    left: 50%;\n    bottom: 50%;\n  }\n\n  & > svg:nth-child(3) {\n    right: 50%;\n    top: 50%;\n  }\n\n  & > svg:nth-child(4) {\n    left: 50%;\n    top: 50%;\n  }\n}\n\n:host(.red) {\n  background: var(--identicon-background-red);\n}\n\n:host(.orange) {\n  background: var(--identicon-background-orange);\n}\n\n:host(.green) {\n  background: var(--identicon-background-green);\n}\n\n:host(.yellow) {\n  background: var(--identicon-background-yellow);\n}\n\n:host(.blue) {\n  background: var(--identicon-background-blue);\n}\n\n:host(.purple) {\n  background: var(--identicon-background-purple);\n}\n\n:host(.empty) {\n  background: var(--identicon-background-empty);\n}\n\n:host(.avatar) {\n  border-radius: 1000px;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport Prando from '../../lib/prando.js';\nimport { Color, COLORS } from '../../utils/prand.js';\n\nconst SingleArc = (rotation: number) => (\n  <svg\n    class={{\n      rotate90: rotation === 1,\n      rotate180: rotation === 2,\n      rotate270: rotation === 3,\n    }}\n    viewBox=\"0 0 12 12\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g clip-path=\"url(#clip0_674_66)\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_674_66\">\n        <rect width=\"12\" height=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\n\nconst DoubleArc = (rotation: number) => (\n  <svg\n    class={{\n      rotate90: rotation === 1,\n      rotate180: rotation === 2,\n      rotate270: rotation === 3,\n    }}\n    viewBox=\"0 0 12 12\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g clip-path=\"url(#clip0_674_255)\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_674_255\">\n        <rect width=\"12\" height=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\n\nconst BASE_PATTERNS = [\n  [\n    [0, 0, 0, 0],\n    [0, 1, 3, 2],\n  ],\n  [\n    [1, 1, 0, 0],\n    [0, 1, 3, 2],\n  ],\n  [\n    [0, 1, 0, 1],\n    [0, 1, 3, 2],\n  ],\n  [\n    [0, 0, 1, 1],\n    [0, 1, 3, 2],\n  ],\n  [\n    [1, 0, 1, 0],\n    [0, 1, 3, 2],\n  ],\n  [\n    [1, 1, 1, 1],\n    [0, 1, 3, 2],\n  ],\n  [\n    [0, 0, 0, 0],\n    [2, 3, 1, 0],\n  ],\n  [\n    [1, 1, 1, 1],\n    [2, 3, 1, 0],\n  ],\n  [\n    [1, 1, 1, 1],\n    [0, 1, 2, 3],\n  ],\n];\n\n@Component({\n  tag: 'cpsl-identicon',\n  styleUrl: 'cpsl-identicon.scss',\n  shadow: true,\n})\nexport class CpslIdenticon {\n  @Prop() hash?: string | undefined;\n\n  /**\n   *  The CSS width and height of the identicon.\n   *  Default is: 40px.\n   */\n  @Prop() size: string = '40px';\n\n  @Prop() variant: 'default' | 'avatar' = 'default';\n\n  @Prop() arcWidth: string = '30%';\n\n  render() {\n    let props;\n    const isEmpty = !this.hash;\n    if (!isEmpty) props = getIdenticonProps(this.hash);\n\n    return (\n      <Host\n        class={{\n          red: props?.color === 'red',\n          orange: props?.color === 'orange',\n          yellow: props?.color === 'yellow',\n          green: props?.color === 'green',\n          blue: props?.color === 'blue',\n          purple: props?.color === 'purple',\n          empty: !props?.color && !this.hash,\n          avatar: this.variant === 'avatar',\n        }}\n        style={{\n          width: this.size,\n          height: this.size,\n          ['--identicon-arc-width']: this.arcWidth,\n        }}\n      >\n        {props?.shapes &&\n          props?.rotations &&\n          props.shapes.map((isDouble, index) => {\n            return isDouble ? DoubleArc(props.rotations[index]) : SingleArc(props.rotations[index]);\n          })}\n      </Host>\n    );\n  }\n}\n\nconst PRANDO_INTS = [COLORS.length, BASE_PATTERNS.length, 16];\n\nfunction getIdenticonProps(seed: string): { color: Color; shapes: boolean[]; rotations: number[] } {\n  const rng = new Prando(seed);\n\n  const [iColor, iPattern, iDeviation] = PRANDO_INTS.map(len => rng.nextInt(0, len - 1));\n\n  const deviationIndex = Math.floor(iDeviation / 4);\n  const [isDeviateShape, isDeviateFlip] = [iDeviation % 2 === 1, iDeviation % 4 >= 2];\n\n  return {\n    color: COLORS[iColor],\n    shapes: BASE_PATTERNS[iPattern][0].map((s, i) => {\n      return i === deviationIndex ? (isDeviateShape ? (s === 1 ? false : true) : s === 1) : s === 1;\n    }),\n    rotations: BASE_PATTERNS[iPattern][1].map((r, i) => (i === deviationIndex ? (isDeviateFlip ? (r + 2) % 4 : r) : r)),\n  };\n}\n"],"version":3}

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

@@ -1,14 +1,18 @@
 import { r as registerInstance, h, H as Host } from './index-91db3414.js';
 
-const cpslRowCss = ":host{display:flex;flex-wrap:wrap}";
+const cpslRowCss = ":host{display:flex;flex-direction:var(--direction, row);align-items:var(--align);justify-content:var(--justify);gap:var(--gap);flex-wrap:wrap}";
 const CpslRowStyle0 = cpslRowCss;
 
 const CpslRow = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.col = false;
+        this.align = 'center';
+        this.justify = 'center';
+        this.gap = '8px';
     }
     render() {
-        return (h(Host, { key: '29ed5413502c575ff74a496ae6ee83ce375635b0' }, h("slot", { key: '864af3ce3db31f98f7effb837fabec43f5a0a6ac' })));
+        return (h(Host, { key: '355dfc5748c22b4569db7835e8f2f82e45fdff2e', style: { ['--align']: this.align, ['--justify']: this.justify, ['--gap']: this.gap.toString(), ['--direction']: this.col ? 'column' : 'row' } }, h("slot", { key: '1025e7cc78b6a9faee3c7154a14f3218959dabe6' })));
     }
 };
 CpslRow.style = CpslRowStyle0;

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

@@ -1 +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}
+{"file":"cpsl-row.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,gJAAgJ,CAAC;AACpK,sBAAe,UAAU;;MCMZ,OAAO;;;mBACJ,KAAK;qBAEiC,QAAQ;uBAEF,QAAQ;mBAEvB,KAAK;;IAEhD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,GAAG,QAAQ,GAAG,KAAK,EAAE,IACjJ,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  flex-direction: var(--direction, row);\n  align-items: var(--align);\n  justify-content: var(--justify);\n  gap: var(--gap);\n  flex-wrap: wrap;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-row',\n  styleUrl: 'cpsl-row.scss',\n  shadow: true,\n})\nexport class CpslRow {\n  @Prop() col = false;\n\n  @Prop() align?: React.CSSProperties['alignItems'] = 'center';\n\n  @Prop() justify?: React.CSSProperties['justifyContent'] = 'center';\n\n  @Prop() gap?: React.CSSProperties['gap'] = '8px';\n\n  render() {\n    return (\n      <Host style={{ ['--align']: this.align, ['--justify']: this.justify, ['--gap']: this.gap.toString(), ['--direction']: this.col ? 'column' : 'row' }}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["cpsl-hero",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-nav-button",[[1,"cpsl-nav-button",{"disabled":[516],"exactMainRouteMatch":[4,"exact-main-route-match"],"exactSubRouteMatch":[4,"exact-sub-route-match"],"route":[1],"subRoutes":[16],"path":[1]}]]],["cpsl-col",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-identicon",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_34",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-select",{"anchorElId":[1,"anchor-el-id"],"autoWidth":[4,"auto-width"],"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"icon":[1],"label":[1],"multiple":[4],"noIconAnimation":[4,"no-icon-animation"],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"selectedItemColor":[1,"selected-item-color"],"selectedItemVariant":[1,"selected-item-variant"],"selectedItemWeight":[1,"selected-item-weight"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-file-upload",{"disabled":[516],"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-auth-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32],"isMobile":[32]},null,{"open":["toggleModal"]}],[1,"cpsl-alert",{"icon":[1],"noIcon":[4,"no-icon"],"variant":[1],"filled":[4]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-icon-group",{"expandFrom":[1,"expand-from"],"disabled":[4],"icons":[16],"isHovered":[32]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"size":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-nav-button-group"],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2],"icon":[1]}],[1,"cpsl-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},[[8,"cpslTabButtonSizeChange","onTabSizeChange"]],{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-input",{"as":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"autoselect":[4],"disabled":[4],"contrastText":[4,"contrast-text"],"enterkeyhint":[1],"errorText":[1,"error-text"],"mask":[1],"isPhone":[4,"is-phone"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"],"mask":["handleSetupMask"],"value":["handleValueChange"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"hasSetInitialPosition":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"variant":[1],"size":[2],"barWidth":[2,"bar-width"],"speed":[2]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"type":[1],"variant":[513]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-icon",{"src":[1],"size":[1],"icon":[1]}]]]], options);
+  return bootstrapLazy([["cpsl-hero",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-nav-button",[[1,"cpsl-nav-button",{"disabled":[516],"exactMainRouteMatch":[4,"exact-main-route-match"],"exactSubRouteMatch":[4,"exact-sub-route-match"],"route":[1],"subRoutes":[16],"path":[1]}]]],["cpsl-col",[[1,"cpsl-col",{"align":[1],"justify":[1],"gap":[8],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-identicon",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1],"arcWidth":[1,"arc-width"]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row",{"col":[4],"align":[1],"justify":[1],"gap":[8]}]]],["cpsl-alert_34",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-select",{"anchorElId":[1,"anchor-el-id"],"autoWidth":[4,"auto-width"],"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"icon":[1],"label":[1],"multiple":[4],"noIconAnimation":[4,"no-icon-animation"],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"selectedItemColor":[1,"selected-item-color"],"selectedItemVariant":[1,"selected-item-variant"],"selectedItemWeight":[1,"selected-item-weight"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-file-upload",{"disabled":[516],"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-auth-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32],"isMobile":[32]},null,{"open":["toggleModal"]}],[1,"cpsl-alert",{"icon":[1],"noIcon":[4,"no-icon"],"variant":[1],"filled":[4]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-icon-group",{"expandFrom":[1,"expand-from"],"disabled":[4],"icons":[16],"isHovered":[32]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"size":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-nav-button-group"],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2],"icon":[1]}],[1,"cpsl-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},[[8,"cpslTabButtonSizeChange","onTabSizeChange"]],{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-input",{"as":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"autoselect":[4],"disabled":[4],"contrastText":[4,"contrast-text"],"enterkeyhint":[1],"errorText":[1,"error-text"],"fitContent":[4,"fit-content"],"mask":[1],"isPhone":[4,"is-phone"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"],"mask":["handleSetupMask"],"value":["handleValueChange"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"hasSetInitialPosition":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"variant":[1],"size":[2],"barWidth":[2,"bar-width"],"speed":[2]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"type":[1],"variant":[513]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-icon",{"src":[1],"size":[1],"invert":[4],"inset":[1],"icon":[1]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/types/assets/icons/index.d.ts

@@ -12,9 +12,11 @@ export declare const Icons: {
     arrowNarrow: string;
     arrow: string;
     asterisk: string;
+    backpack: string;
     backupKit: string;
     bank: string;
     baseBrand: string;
+    beraBrand: string;
     brush: string;
     celoBrand: string;
     checkCircleFilled: string;
@@ -30,9 +32,12 @@ export declare const Icons: {
     clubhouseBrand: string;
     clubhouse: string;
     code: string;
+    coinbase: string;
     copy07: string;
     copy: string;
+    cosmosCircle: string;
     cosmos: string;
+    cosmostation: string;
     creditCard02: string;
     creditCard: string;
     cube03: string;
@@ -53,6 +58,7 @@ export declare const Icons: {
     earth: string;
     edit02: string;
     emptyCircle: string;
+    ethCircle: string;
     ethereum: string;
     eyeOff: string;
     eye: string;
@@ -67,9 +73,11 @@ export declare const Icons: {
     githubBrand: string;
     github: string;
     globe: string;
+    glow: string;
     googleBrand: string;
     google: string;
     gridDots: string;
+    haha: string;
     helpCircle: string;
     heroAlertCircle: string;
     heroCheckmarkCapsule: string;
@@ -88,8 +96,10 @@ export declare const Icons: {
     infoCircle: string;
     instagramBrand: string;
     instagram: string;
+    keplr: string;
     key: string;
     laptop: string;
+    leap: string;
     lenovo: string;
     lg: string;
     lightning01: string;
@@ -101,11 +111,13 @@ export declare const Icons: {
     logOut: string;
     mail: string;
     menu: string;
+    metamask: string;
     monitor: string;
     moonpayBrand: string;
     moreLoginOptions: string;
     motorola: string;
     nobleBrand: string;
+    okx: string;
     optimismBrand: string;
     paraBlackBg: string;
     paraBrand: string;
@@ -117,6 +129,7 @@ export declare const Icons: {
     paraRings: string;
     para: string;
     passcode: string;
+    phantom: string;
     phone: string;
     pintrestBrand: string;
     pintrest: string;
@@ -127,11 +140,14 @@ export declare const Icons: {
     puzzlePiece: string;
     qrCode02: string;
     qrCode: string;
+    rabby: string;
+    rainbow: string;
     rampNetworkBrand: string;
     rampNetwork: string;
     redditBrand: string;
     reddit: string;
     refresh: string;
+    safe: string;
     samsung: string;
     search: string;
     send: string;
@@ -143,10 +159,14 @@ export declare const Icons: {
     sliders: string;
     snapchatBrand: string;
     snapchat: string;
+    solanaCircle: string;
     solana: string;
+    solflare: string;
     spacingHeight: string;
     star04Filled: string;
+    star05: string;
     stars01Filled: string;
+    stars02: string;
     stars: string;
     stopSquare: string;
     stripeBrand: string;
@@ -162,11 +182,15 @@ export declare const Icons: {
     twitter: string;
     usdcBrand: string;
     userCircle: string;
+    userPlus: string;
     user: string;
+    valora: string;
+    walletConnect: string;
     wallet: string;
     x: string;
     youtubeBrand: string;
     youtube: string;
+    zerion: string;
     AD: string;
     AE: string;
     AF: string;

package/dist/types/components/cpsl-col/cpsl-col.d.ts

@@ -1,4 +1,8 @@
+/// <reference types="react" />
 export declare class CpslCol {
+    align?: React.CSSProperties['alignItems'];
+    justify?: React.CSSProperties['justifyContent'];
+    gap?: React.CSSProperties['gap'];
     /**
      * The amount to offset the column, in terms of how many columns it should shift to the end
      * of the total available.

package/dist/types/components/cpsl-icon/cpsl-icon.d.ts

@@ -8,6 +8,14 @@ export declare class CpslIcon {
      * The CSS size of the icon.
      */
     size?: string;
+    /**
+     * Whether to invert the icon's colors.
+     */
+    invert?: boolean;
+    /**
+     * The CSS length to inset the icon.
+     */
+    inset: string;
     /**
      * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
      */

package/dist/types/components/cpsl-identicon/cpsl-identicon.d.ts

@@ -6,5 +6,6 @@ export declare class CpslIdenticon {
      */
     size: string;
     variant: 'default' | 'avatar';
+    arcWidth: string;
     render(): any;
 }

package/dist/types/components/cpsl-input/cpsl-input.d.ts

@@ -61,6 +61,10 @@ export declare class CpslInput {
      * Error text to show below the input. If this is provided the input will enter an error state.
      */
     errorText?: string;
+    /**
+     * Update the native input size to match the text content
+     */
+    fitContent: boolean;
     /**
      * Mask string to apply to the input.
      */

package/dist/types/components/cpsl-row/cpsl-row.d.ts

@@ -1,3 +1,8 @@
+/// <reference types="react" />
 export declare class CpslRow {
+    col: boolean;
+    align?: React.CSSProperties['alignItems'];
+    justify?: React.CSSProperties['justifyContent'];
+    gap?: React.CSSProperties['gap'];
     render(): any;
 }

package/dist/types/components/cpsl-spinner/cpsl-spinner.d.ts

@@ -1,9 +1,9 @@
 export declare class CpslSpinner {
     /**
      * Variant of the spinner
-     * Default is 'default'.
+     * Default is 'pending'.
      */
-    variant?: 'default' | 'inactive' | 'error';
+    variant?: 'idle' | 'pending' | 'error' | 'success';
     /**
      * Size of the spinner in pixels.
      * Default is 50.

package/dist/types/components/cpsl-text/cpsl-text.d.ts

@@ -4,7 +4,7 @@ export declare class CpslText {
      * Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error".
      * Default is: `"primary"`.
      */
-    color?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast';
+    color?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast' | 'success';
     /**
      * The variant of text.
      * Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL".

package/dist/types/components.d.ts

@@ -161,6 +161,9 @@ export namespace Components {
         "type"?: 'number' | 'string';
     }
     interface CpslCol {
+        "align"?: React.CSSProperties['alignItems'];
+        "gap"?: React.CSSProperties['gap'];
+        "justify"?: React.CSSProperties['justifyContent'];
         /**
           * The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
          */
@@ -389,6 +392,14 @@ export namespace Components {
           * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
          */
         "icon"?: IconType;
+        /**
+          * The CSS length to inset the icon.
+         */
+        "inset": string;
+        /**
+          * Whether to invert the icon's colors.
+         */
+        "invert"?: boolean;
         /**
           * The CSS size of the icon.
          */
@@ -413,6 +424,7 @@ export namespace Components {
         "icons": (IconType | string)[];
     }
     interface CpslIdenticon {
+        "arcWidth": string;
         "hash"?: string | undefined;
         /**
           * The CSS width and height of the identicon. Default is: 40px.
@@ -463,6 +475,10 @@ export namespace Components {
           * Error text to show below the input. If this is provided the input will enter an error state.
          */
         "errorText"?: string;
+        /**
+          * Update the native input size to match the text content
+         */
+        "fitContent": boolean;
         /**
           * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
          */
@@ -737,6 +753,10 @@ export namespace Components {
         "checked": boolean;
     }
     interface CpslRow {
+        "align"?: React.CSSProperties['alignItems'];
+        "col": boolean;
+        "gap"?: React.CSSProperties['gap'];
+        "justify"?: React.CSSProperties['justifyContent'];
     }
     interface CpslSelect {
         /**
@@ -874,9 +894,9 @@ export namespace Components {
          */
         "speed"?: number;
         /**
-          * Variant of the spinner Default is 'default'.
+          * Variant of the spinner Default is 'pending'.
          */
-        "variant"?: 'default' | 'inactive' | 'error';
+        "variant"?: 'idle' | 'pending' | 'error' | 'success';
     }
     interface CpslSwitch {
         /**
@@ -910,7 +930,7 @@ export namespace Components {
         /**
           * The color of text. Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
          */
-        "color"?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast';
+        "color"?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast' | 'success';
         /**
           * The variant of text. Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL". Default is: `"bodyM"`.
          */
@@ -1678,6 +1698,9 @@ declare namespace LocalJSX {
         "type"?: 'number' | 'string';
     }
     interface CpslCol {
+        "align"?: React.CSSProperties['alignItems'];
+        "gap"?: React.CSSProperties['gap'];
+        "justify"?: React.CSSProperties['justifyContent'];
         /**
           * The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
          */
@@ -1930,6 +1953,14 @@ declare namespace LocalJSX {
           * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
          */
         "icon"?: IconType;
+        /**
+          * The CSS length to inset the icon.
+         */
+        "inset"?: string;
+        /**
+          * Whether to invert the icon's colors.
+         */
+        "invert"?: boolean;
         /**
           * The CSS size of the icon.
          */
@@ -1954,6 +1985,7 @@ declare namespace LocalJSX {
         "icons"?: (IconType | string)[];
     }
     interface CpslIdenticon {
+        "arcWidth"?: string;
         "hash"?: string | undefined;
         /**
           * The CSS width and height of the identicon. Default is: 40px.
@@ -2004,6 +2036,10 @@ declare namespace LocalJSX {
           * Error text to show below the input. If this is provided the input will enter an error state.
          */
         "errorText"?: string;
+        /**
+          * Update the native input size to match the text content
+         */
+        "fitContent"?: boolean;
         /**
           * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
          */
@@ -2334,6 +2370,10 @@ declare namespace LocalJSX {
         "onCpslRadioChanged"?: (event: CpslRadioCustomEvent<boolean>) => void;
     }
     interface CpslRow {
+        "align"?: React.CSSProperties['alignItems'];
+        "col"?: boolean;
+        "gap"?: React.CSSProperties['gap'];
+        "justify"?: React.CSSProperties['justifyContent'];
     }
     interface CpslSelect {
         /**
@@ -2491,9 +2531,9 @@ declare namespace LocalJSX {
          */
         "speed"?: number;
         /**
-          * Variant of the spinner Default is 'default'.
+          * Variant of the spinner Default is 'pending'.
          */
-        "variant"?: 'default' | 'inactive' | 'error';
+        "variant"?: 'idle' | 'pending' | 'error' | 'success';
     }
     interface CpslSwitch {
         /**
@@ -2535,7 +2575,7 @@ declare namespace LocalJSX {
         /**
           * The color of text. Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
          */
-        "color"?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast';
+        "color"?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast' | 'success';
         /**
           * The variant of text. Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL". Default is: `"bodyM"`.
          */