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

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

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

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

@@ -1 +1 @@
-{"file":"cpsl-col.entry.cjs.js","mappings":"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","names":["forceUpdate","h","Host"],"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.cjs.js","mappings":"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","names":["forceUpdate","h","Host"],"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/cjs/cpsl-identicon.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-65f57499.js');
 const prand = require('./prand-76d9999c.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) => (index.h("svg", { class: {
@@ -62,13 +62,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 (index.h(index.Host, { key: '55072485ad5993ad8eb075a9d7d83e7e137ec9cd', class: {
+        return (index.h(index.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',
@@ -80,6 +81,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/cjs/cpsl-identicon.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"cpsl-identicon.entry.cjs.js","mappings":"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","names":["h","Host","COLORS","Prando"],"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.cjs.js","mappings":"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","names":["h","Host","COLORS","Prando"],"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/cjs/cpsl-row.cjs.entry.js

@@ -4,15 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-65f57499.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) {
         index.registerInstance(this, hostRef);
+        this.col = false;
+        this.align = 'center';
+        this.justify = 'center';
+        this.gap = '8px';
     }
     render() {
-        return (index.h(index.Host, { key: '29ed5413502c575ff74a496ae6ee83ce375635b0' }, index.h("slot", { key: '864af3ce3db31f98f7effb837fabec43f5a0a6ac' })));
+        return (index.h(index.Host, { key: '355dfc5748c22b4569db7835e8f2f82e45fdff2e', style: { ['--align']: this.align, ['--justify']: this.justify, ['--gap']: this.gap.toString(), ['--direction']: this.col ? 'column' : 'row' } }, index.h("slot", { key: '1025e7cc78b6a9faee3c7154a14f3218959dabe6' })));
     }
 };
 CpslRow.style = CpslRowStyle0;

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

@@ -1 +1 @@
-{"file":"cpsl-row.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,oCAAoC,CAAC;AACxD,sBAAe,UAAU;;MCMZ,OAAO;;;;IAClB,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"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.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,gJAAgJ,CAAC;AACpK,sBAAe,UAAU;;MCMZ,OAAO;;;mBACJ,KAAK;qBAEiC,QAAQ;uBAEF,QAAQ;mBAEvB,KAAK;;IAEhD,MAAM;QACJ,QACEA,QAACC,UAAI,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,IACjJD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"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/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["cpsl-hero.cjs",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-identicon.cjs",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_34.cjs",[[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 index.bootstrapLazy([["cpsl-hero.cjs",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-identicon.cjs",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1],"arcWidth":[1,"arc-width"]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row",{"col":[4],"align":[1],"justify":[1],"gap":[8]}]]],["cpsl-alert_34.cjs",[[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);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/assets/icons/backpack.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_209_2883" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="4" y="0" width="17" height="24">
+<path d="M20.5 0H4V24H20.5V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_209_2883)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.813 1.88708C14.6853 1.88708 15.5035 2.00402 16.2612 2.22089C15.5195 0.492254 13.9795 0 12.2656 0C10.5483 0 9.00565 0.494188 8.26562 2.23107C9.01765 2.00657 9.83236 1.88708 10.7017 1.88708H13.813ZM10.5022 3.62256C6.36003 3.62256 4 6.88114 4 10.9008V15.03C4 15.432 4.33579 15.75 4.75 15.75H19.75C20.1642 15.75 20.5 15.432 20.5 15.03V10.9008C20.5 6.88114 17.7556 3.62256 13.6135 3.62256H10.5022ZM12.2441 10.9365C13.6939 10.9365 14.8692 9.76123 14.8692 8.31153C14.8692 6.86178 13.6939 5.68653 12.2441 5.68653C10.7944 5.68653 9.61914 6.86178 9.61914 8.31153C9.61914 9.76123 10.7944 10.9365 12.2441 10.9365ZM4 18.1771C4 17.7751 4.33579 17.4492 4.75 17.4492H19.75C20.1642 17.4492 20.5 17.7751 20.5 18.1771V22.544C20.5 23.3479 19.8284 23.9997 19 23.9997H5.5C4.67157 23.9997 4 23.3479 4 22.544V18.1771Z" fill="#E33E3F"/>
+</g>
+</svg>

package/dist/collection/assets/icons/bera-brand.svg

@@ -0,0 +1,7 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="80" height="80" rx="13.4149" fill="black"/>
+<rect width="80" height="80" rx="13.4149" fill="#814625"/>
+<path d="M52.3122 48.3965V45.2188C54.1532 44.548 55.4937 42.4648 55.4937 39.9992C55.4937 37.5335 54.1532 35.4445 52.3122 34.7795V31.6018C54.046 30.9722 55.3388 29.0832 55.4818 26.8H53.3727V27.7709C53.3727 28.5183 52.9438 29.1774 52.3122 29.5069V29.0538C52.3122 28.3888 51.7641 27.8474 51.0909 27.8474H50.9837C50.3104 27.8474 49.7623 28.3888 49.7623 29.0538V29.5069C49.1308 29.1774 48.7018 28.5242 48.7018 27.7709V26.8H46.5928C46.7357 29.0832 48.0286 30.9722 49.7623 31.6018V34.7795C47.9273 35.4445 46.5808 37.5276 46.5808 39.9992C46.5808 42.4707 47.9213 44.5538 49.7623 45.2188V48.3965C48.0286 49.0261 46.7357 50.9151 46.5928 53.1983H48.7018V52.2274C48.7018 51.48 49.1308 50.821 49.7623 50.4914V50.9445C49.7623 51.6095 50.3104 52.1509 50.9837 52.1509H51.0909C51.7641 52.1509 52.3122 51.6095 52.3122 50.9445V50.4914C52.9438 50.821 53.3727 51.4741 53.3727 52.2274V53.1983H55.4818C55.3388 50.9151 54.046 49.0261 52.3122 48.3965ZM48.7018 41.3879V38.6045C48.7018 37.8572 49.1308 37.1981 49.7623 36.8685V37.3217C49.7623 37.9866 50.3104 38.528 50.9837 38.528H51.0909C51.7641 38.528 52.3122 37.9866 52.3122 37.3217V36.8685C52.9438 37.1981 53.3727 37.8513 53.3727 38.6045V41.3879C53.3727 42.1353 52.9438 42.7943 52.3122 43.1239V42.6708C52.3122 42.0058 51.7641 41.4644 51.0909 41.4644H50.9837C50.3104 41.4644 49.7623 42.0058 49.7623 42.6708V43.1239C49.1367 42.7943 48.7018 42.1412 48.7018 41.3879Z" fill="white"/>
+<path d="M65.2526 41.688V38.3044C67.0935 37.6335 68.434 35.5504 68.434 33.0847C68.434 30.6191 67.0935 28.53 65.2526 27.8651V26.8H62.7086V27.8651C60.8676 28.5359 59.5271 30.6191 59.5271 33.0847C59.5271 35.5504 60.8676 37.6394 62.7086 38.3044V41.688C60.8676 42.3589 59.5271 44.442 59.5271 46.9077C59.5271 49.3733 60.8676 51.4623 62.7086 52.1273V53.1924H65.2526V52.1273C67.0935 51.4565 68.434 49.3733 68.434 46.9077C68.434 44.442 67.0935 42.3589 65.2526 41.688ZM61.6421 34.4735V31.6901C61.6421 30.9427 62.0711 30.2836 62.7026 29.9541V30.4072C62.7026 31.0722 63.2508 31.6136 63.924 31.6136H64.0253C64.6985 31.6136 65.2466 31.0722 65.2466 30.4072V29.9541C65.8781 30.2836 66.3071 30.9368 66.3071 31.6901V34.4735C66.3071 35.2208 65.8781 35.8799 65.2466 36.2094V35.7563C65.2466 35.0914 64.6985 34.55 64.0253 34.55H63.918C63.2448 34.55 62.6967 35.0914 62.6967 35.7563V36.2094C62.0771 35.8799 61.6421 35.2267 61.6421 34.4735ZM66.3131 48.3023C66.3131 49.0497 65.8841 49.7087 65.2526 50.0383V49.3733C65.2526 48.7084 64.7045 48.167 64.0312 48.167H63.9299C63.2567 48.167 62.7086 48.7084 62.7086 49.3733V50.0383C62.0771 49.7087 61.6481 49.0555 61.6481 48.3023V45.5189C61.6481 44.7715 62.0771 44.1125 62.7086 43.7829V44.0242C62.7086 44.6892 63.2567 45.2306 63.9299 45.2306H64.0372C64.7104 45.2306 65.2585 44.6892 65.2585 44.0242V43.7829C65.8901 44.1125 66.319 44.7657 66.319 45.5189V48.3023H66.3131Z" fill="white"/>
+<path d="M37.6059 37.3048C37.5821 37.1695 37.5523 37.04 37.5046 36.9164C37.5225 36.887 41.4785 31.4437 37.8144 28.0777C34.1563 24.7117 29.8846 29.1017 29.8608 29.1252C29.1816 28.9133 28.4964 28.7839 27.8172 28.725C27.8172 28.725 27.8172 28.725 27.8113 28.725C26.4172 28.4955 24.463 28.725 24.463 28.725C23.7898 28.7839 23.1106 28.9133 22.4373 29.1193C22.4135 29.0958 18.1418 24.7059 14.4837 28.0718C10.8256 31.4378 14.7756 36.887 14.7935 36.9105C14.7518 37.04 14.716 37.1695 14.6922 37.2989C14.299 39.6292 11.6001 40.3471 11.6001 44.4075C11.6001 48.5444 14.4182 51.8045 20.1734 51.8045H22.5327C22.5446 51.8162 23.4561 53.0991 25.3388 53.1756C25.3388 53.1756 25.7737 53.2227 26.7746 53.1874C28.7705 53.1874 29.7416 51.828 29.7476 51.8104H32.1069C37.8621 51.8104 40.6801 48.5503 40.6801 44.4134C40.698 40.3589 37.9991 39.6351 37.6059 37.3048Z" fill="white"/>
+</svg>

package/dist/collection/assets/icons/coinbase.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_144_3118)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM7.48479 6.73468C7.07058 6.73468 6.73479 7.07047 6.73479 7.48468V12.5153C6.73479 12.9295 7.07058 13.2653 7.48479 13.2653H12.5154C12.9296 13.2653 13.2654 12.9295 13.2654 12.5153V7.48468C13.2654 7.07047 12.9296 6.73468 12.5154 6.73468H7.48479Z" fill="#2C5FF6"/>
+</g>
+<defs>
+<clipPath id="clip0_144_3118">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/assets/icons/cosmos-circle.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path 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 24Z" fill="black"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4626 9.5356L9.58638 13.412C9.53639 13.315 9.49129 13.2139 9.45085 13.1091C9.31548 12.7569 9.2478 12.3832 9.2478 11.9886C9.2478 11.5936 9.31548 11.22 9.45085 10.8678C9.58638 10.5155 9.77409 10.2098 10.0141 9.95031C10.2541 9.69103 10.5426 9.48593 10.8793 9.3349C11.2161 9.18401 11.5857 9.10849 11.9882 9.10849C12.3909 9.10849 12.7626 9.18589 13.103 9.34085C13.2296 9.39835 13.3495 9.46321 13.4626 9.5356ZM13.1205 14.6652C12.7837 14.8163 12.4141 14.8917 12.0116 14.8917C11.6089 14.8917 11.2373 14.8143 10.8967 14.6595C10.7702 14.6018 10.6504 14.5369 10.5374 14.4644L14.4135 10.5883C14.4634 10.6852 14.5086 10.786 14.549 10.891C14.6844 11.2432 14.7521 11.6169 14.7521 12.0117C14.7521 12.4066 14.6844 12.7801 14.549 13.1325C14.4135 13.4847 14.2258 13.7904 13.9857 14.0497C13.7457 14.309 13.4574 14.5142 13.1205 14.6652ZM13.707 15.8671C14.2258 15.6426 14.6748 15.3388 15.0541 14.9554C15.4334 14.5723 15.7275 14.1252 15.9366 13.6143C16.1457 13.1033 16.2502 12.5614 16.2502 11.9886C16.2502 11.4156 16.1457 10.8736 15.9366 10.3626C15.8126 10.0596 15.66 9.77971 15.4789 9.52291L18 7.0018L16.9982 6L14.4694 8.52879C14.2424 8.37399 13.9959 8.24019 13.7302 8.12722C13.2114 7.90662 12.6386 7.79616 12.0116 7.79616C11.3844 7.79616 10.8116 7.9085 10.2928 8.13302C9.77409 8.35754 9.32504 8.66134 8.94572 9.04457C8.5664 9.42781 8.27215 9.87498 8.06315 10.3859C7.85415 10.8968 7.74963 11.4388 7.74963 12.0117C7.74963 12.5846 7.85415 13.1263 8.06315 13.6375C8.18724 13.9406 8.33983 14.2204 8.52097 14.4774L6 16.9982L7.0018 18L9.53043 15.4713C9.75746 15.6262 10.0039 15.76 10.2696 15.8729C10.7884 16.0936 11.3612 16.2038 11.9882 16.2038C12.6154 16.2038 13.1882 16.0915 13.707 15.8671Z" fill="white"/>
+</svg>

package/dist/collection/assets/icons/cosmostation.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_305_2)">
+<path d="M17.3429 2.71582H9.6477C9.45598 2.716 9.26767 2.76654 9.10162 2.86238C8.93556 2.95822 8.7976 3.09599 8.70153 3.26191L4.85389 9.92566C4.75769 10.0916 4.70703 10.28 4.70703 10.4718C4.70703 10.6635 4.75769 10.8519 4.85389 11.0179L8.70153 17.6816L10.5936 16.5895L7.06318 10.4718L10.2792 4.9002H16.7141L20.2473 11.0178L22.1394 9.92562L18.2889 3.26191C18.1931 3.09579 18.0552 2.95785 17.8892 2.86198C17.7231 2.76611 17.5347 2.7157 17.3429 2.71582Z" fill="#9C6CFF"/>
+<path d="M15.2749 6.33691L13.3828 7.4291L16.916 13.5468L13.7 19.1183H7.26516L3.73195 13.0006L1.83984 14.0929L5.68748 20.7566C5.78336 20.9227 5.92127 21.0606 6.08734 21.1564C6.25341 21.2523 6.44179 21.3028 6.63354 21.3027H14.3288C14.5205 21.3025 14.7088 21.252 14.8749 21.1561C15.0409 21.0603 15.1788 20.9225 15.2749 20.7566L19.1225 14.0929C19.2187 13.927 19.2694 13.7386 19.2694 13.5468C19.2694 13.355 19.2187 13.1666 19.1225 13.0007L15.2749 6.33691Z" fill="#05D2DD"/>
+</g>
+<defs>
+<clipPath id="clip0_305_2">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/assets/icons/eth-circle.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path 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 24Z" fill="#627EEA"/>
+  <path d="M12.3735 3V9.6525L17.9963 12.165L12.3735 3Z" fill="white" fill-opacity="0.602"/>
+  <path d="M12.3735 3L6.75 12.165L12.3735 9.6525V3Z" fill="white"/>
+  <path d="M12.3735 16.4762V20.9964L18 13.2122L12.3735 16.4762Z" fill="white" fill-opacity="0.602"/>
+  <path d="M12.3735 20.9964V16.4754L6.75 13.2122L12.3735 20.9964Z" fill="white"/>
+  <path d="M12.3735 15.4298L17.9963 12.1651L12.3735 9.65405V15.4298Z" fill="white" fill-opacity="0.2"/>
+  <path d="M6.75 12.1651L12.3735 15.4298V9.65405L6.75 12.1651Z" fill="white" fill-opacity="0.602"/>
+</svg>

package/dist/collection/assets/icons/glow.svg

@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_209_2889)">
+<mask id="mask0_209_2889" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<path d="M24 0H0V24H24V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_209_2889)">
+<path d="M20.4162 20.5541C18.1738 22.7658 15.1496 24.004 12 24C8.85757 24.0047 5.83965 22.7719 3.59924 20.5684C8.51329 16.6979 15.4966 16.6934 20.4162 20.5541ZM20.5541 20.4162C22.7658 18.1738 24.004 15.1496 24 12C24 8.72948 22.6918 5.76561 20.5706 3.60034C16.6979 8.52873 16.6934 15.4977 20.5541 20.4162ZM20.4339 3.46356C15.5077 7.34406 8.50226 7.33855 3.58048 3.44922C5.82306 1.23529 8.84871 -0.00422474 12 1.08194e-05C15.2871 1.08194e-05 18.2664 1.32256 20.4339 3.46356ZM3.44922 3.58048C1.23529 5.82306 -0.00422474 8.84871 1.08194e-05 12C1.08194e-05 15.2882 1.32256 18.2664 3.46356 20.4339C7.34406 15.5077 7.33855 8.50226 3.44922 3.58048Z" fill="#CC62D5"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_209_2889">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/assets/icons/haha.svg

@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19505_27)">
+<path d="M20.4 0H3.6C1.61177 0 0 1.61177 0 3.6V20.4C0 22.3882 1.61177 24 3.6 24H20.4C22.3882 24 24 22.3882 24 20.4V3.6C24 1.61177 22.3882 0 20.4 0Z" fill="url(#paint0_linear_19505_27)"/>
+<path d="M9.2002 10.7179L14.7998 9.21794V5.19938H18.7998V12.2912L24 10.8976V15.0392L18.7998 16.4318V18.799H14.7998V13.3595L9.2002 14.8595V18.799H5.2002V15.9308L5.19922 15.9318V11.7912L5.2002 11.7902V11.7882L0 13.1818V9.0402L5.2002 7.64762V5.19938H9.2002V10.7179Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_19505_27" x1="0" y1="24" x2="24" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#11A9FF"/>
+<stop offset="1" stop-color="#FC65FF"/>
+</linearGradient>
+<clipPath id="clip0_19505_27">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>