@getpara/core-components 2.0.0-alpha.5 → 2.0.0-alpha.50

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

@@ -9,12 +9,15 @@ export declare const Icons: {
     arbitrumBrand: string;
     arrowCircleBrokenDownLeft: string;
     arrowCircleDownFilled: string;
+    arrowCircleDown: string;
     arrowNarrow: string;
     arrow: string;
     asterisk: string;
+    backpack: string;
     backupKit: string;
     bank: string;
     baseBrand: string;
+    beraBrand: string;
     brush: string;
     celoBrand: string;
     checkCircleFilled: string;
@@ -30,9 +33,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;
@@ -45,6 +51,7 @@ export declare const Icons: {
     discordBrand: string;
     discord: string;
     dot: string;
+    dotsSquare: string;
     dots: string;
     downloadCloud: string;
     download: string;
@@ -53,6 +60,7 @@ export declare const Icons: {
     earth: string;
     edit02: string;
     emptyCircle: string;
+    ethCircle: string;
     ethereum: string;
     eyeOff: string;
     eye: string;
@@ -67,9 +75,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 +98,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,12 +113,15 @@ 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;
+    paraArrow: string;
     paraBlackBg: string;
     paraBrand: string;
     paraIconBrand: string;
@@ -117,6 +132,7 @@ export declare const Icons: {
     paraRings: string;
     para: string;
     passcode: string;
+    phantom: string;
     phone: string;
     pintrestBrand: string;
     pintrest: string;
@@ -127,11 +143,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,9 +162,12 @@ 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;
@@ -162,12 +184,18 @@ export declare const Icons: {
     twitterBrand: string;
     twitter: string;
     usdcBrand: string;
+    user01: string;
     userCircle: string;
+    userPlus: string;
     user: string;
+    valora: string;
+    wallet02: string;
+    walletConnect: string;
     wallet: string;
     x: string;
     youtubeBrand: string;
     youtube: string;
+    zerion: string;
     AD: string;
     AE: string;
     AF: string;

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

@@ -20,5 +20,21 @@ export declare class CpslIcon {
      * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
      */
     icon?: IconType;
+    /**
+     * Whether the icon should be rounded.
+     */
+    radius?: 'none' | 'theme' | 'full';
+    /**
+     * The background CSS property of the icon.
+     */
+    background?: string;
+    /**
+     * The color of the icon.
+     */
+    color?: string;
+    /**
+     * The border CSS property of the icon.
+     */
+    border?: string;
     render(): any;
 }

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-popover/cpsl-popover.d.ts

@@ -50,6 +50,11 @@ export declare class CpslPopover {
      * Default is: `"bottom"`.
      */
     transformOriginVertical?: 'top' | 'center' | 'bottom';
+    /**
+     * If `true`, the popover will be aligned to the center of the trigger element.
+     * Default is `false`.
+     */
+    alignCenter: boolean;
     /**
      * Which trigger causes the popover to open.
      * Options are: `"click"`, `"hover"`.

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

@@ -17,6 +17,11 @@ export declare class CpslSelect {
      * Default is `false`
      */
     autoWidth?: boolean;
+    /**
+     * If `true`, the popover will be aligned to the center of the trigger element.
+     * Default is `false`.
+     */
+    alignCenter: boolean;
     /**
      * If `true`, the user cannot interact with the input.
      */
@@ -45,7 +50,7 @@ export declare class CpslSelect {
      * The name of the icon to use for the end icon.
      * Default: `chevronUp`
      */
-    icon?: IconType;
+    icon?: IconType | null;
     /**
      * The label for the input.
      */

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".
@@ -17,6 +17,12 @@ export declare class CpslText {
      * Default is: `"regular"`.
      */
     weight?: 'regular' | 'medium' | 'semiBold' | 'bold';
+    /**
+     * The text-align CSS property to apply.
+     * Options are: `"left"`, `"center", `"right".
+     * Default is: `"left"`.
+     */
+    align?: 'left' | 'center' | 'right';
     private getContent;
     render(): any;
 }

package/dist/types/components/cpsl-tile-button/cpsl-tile-button.d.ts

@@ -1,5 +1,10 @@
 import { IconType } from '../../interface.js';
 export declare class CpslTileButton {
+    /**
+     * If the button is disabled.
+     * Default is: false.
+     */
+    disabled?: boolean;
     /**
      * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.
      */

package/dist/types/components.d.ts

@@ -388,6 +388,18 @@ export namespace Components {
         "withDefaultTheme"?: boolean;
     }
     interface CpslIcon {
+        /**
+          * The background CSS property of the icon.
+         */
+        "background"?: string;
+        /**
+          * The border CSS property of the icon.
+         */
+        "border"?: string;
+        /**
+          * The color of the icon.
+         */
+        "color"?: string;
         /**
           * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
          */
@@ -400,6 +412,10 @@ export namespace Components {
           * Whether to invert the icon's colors.
          */
         "invert"?: boolean;
+        /**
+          * Whether the icon should be rounded.
+         */
+        "radius"?: 'none' | 'theme' | 'full';
         /**
           * The CSS size of the icon.
          */
@@ -424,6 +440,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.
@@ -668,6 +685,10 @@ export namespace Components {
         "text": string;
     }
     interface CpslPopover {
+        /**
+          * If `true`, the popover will be aligned to the center of the trigger element. Default is `false`.
+         */
+        "alignCenter": boolean;
         /**
           * ID for the element that the popover anchors to.
          */
@@ -758,6 +779,10 @@ export namespace Components {
         "justify"?: React.CSSProperties['justifyContent'];
     }
     interface CpslSelect {
+        /**
+          * If `true`, the popover will be aligned to the center of the trigger element. Default is `false`.
+         */
+        "alignCenter": boolean;
         /**
           * ID of element to anchor popover to.
          */
@@ -789,7 +814,7 @@ export namespace Components {
         /**
           * The name of the icon to use for the end icon. Default: `chevronUp`
          */
-        "icon"?: IconType;
+        "icon"?: IconType | null;
         /**
           * ID of the element, must be unique for the popover trigger.
          */
@@ -893,9 +918,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 {
         /**
@@ -926,10 +951,14 @@ export namespace Components {
         "selectedTab"?: string;
     }
     interface CpslText {
+        /**
+          * The text-align CSS property to apply. Options are: `"left"`, `"center", `"right". Default is: `"left"`.
+         */
+        "align"?: 'left' | 'center' | 'right';
         /**
           * 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"`.
          */
@@ -940,6 +969,10 @@ export namespace Components {
         "weight"?: 'regular' | 'medium' | 'semiBold' | 'bold';
     }
     interface CpslTileButton {
+        /**
+          * If the button is disabled. Default is: false.
+         */
+        "disabled"?: boolean;
         /**
           * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
          */
@@ -1948,6 +1981,18 @@ declare namespace LocalJSX {
         "withDefaultTheme"?: boolean;
     }
     interface CpslIcon {
+        /**
+          * The background CSS property of the icon.
+         */
+        "background"?: string;
+        /**
+          * The border CSS property of the icon.
+         */
+        "border"?: string;
+        /**
+          * The color of the icon.
+         */
+        "color"?: string;
         /**
           * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
          */
@@ -1960,6 +2005,10 @@ declare namespace LocalJSX {
           * Whether to invert the icon's colors.
          */
         "invert"?: boolean;
+        /**
+          * Whether the icon should be rounded.
+         */
+        "radius"?: 'none' | 'theme' | 'full';
         /**
           * The CSS size of the icon.
          */
@@ -1984,6 +2033,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.
@@ -2276,6 +2326,10 @@ declare namespace LocalJSX {
         "text"?: string;
     }
     interface CpslPopover {
+        /**
+          * If `true`, the popover will be aligned to the center of the trigger element. Default is `false`.
+         */
+        "alignCenter"?: boolean;
         /**
           * ID for the element that the popover anchors to.
          */
@@ -2374,6 +2428,10 @@ declare namespace LocalJSX {
         "justify"?: React.CSSProperties['justifyContent'];
     }
     interface CpslSelect {
+        /**
+          * If `true`, the popover will be aligned to the center of the trigger element. Default is `false`.
+         */
+        "alignCenter"?: boolean;
         /**
           * ID of element to anchor popover to.
          */
@@ -2405,7 +2463,7 @@ declare namespace LocalJSX {
         /**
           * The name of the icon to use for the end icon. Default: `chevronUp`
          */
-        "icon"?: IconType;
+        "icon"?: IconType | null;
         /**
           * ID of the element, must be unique for the popover trigger.
          */
@@ -2529,9 +2587,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 {
         /**
@@ -2570,10 +2628,14 @@ declare namespace LocalJSX {
         "selectedTab"?: string;
     }
     interface CpslText {
+        /**
+          * The text-align CSS property to apply. Options are: `"left"`, `"center", `"right". Default is: `"left"`.
+         */
+        "align"?: 'left' | 'center' | 'right';
         /**
           * 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"`.
          */
@@ -2584,6 +2646,10 @@ declare namespace LocalJSX {
         "weight"?: 'regular' | 'medium' | 'semiBold' | 'bold';
     }
     interface CpslTileButton {
+        /**
+          * If the button is disabled. Default is: false.
+         */
+        "disabled"?: boolean;
         /**
           * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
          */

package/dist/types/interface.d.ts

@@ -20,6 +20,7 @@ export type Theme = {
     mode?: 'light' | 'dark';
     borderRadius?: BorderRadius;
     font?: string;
+    overlayBackground?: string;
     customPalette?: CustomPalette;
     customFontSizes?: CustomFontSizes;
     customBorderRadii?: CustomBorderRadii;

package/dist/types/utils/theme/generatePalette.d.ts

@@ -4,6 +4,6 @@ export type Palette = {
     backgroundColors: string[];
     accentColors: string[];
 };
-export declare const generatePalette: ({ foregroundColor, backgroundColor, accentColor, isDarkTheme, customPalette, }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'accentColor' | 'customPalette'> & {
+export declare const generatePalette: ({ foregroundColor, backgroundColor, accentColor, isDarkTheme, customPalette, overlayBackground, }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'accentColor' | 'customPalette' | 'overlayBackground'> & {
     isDarkTheme: boolean;
 }) => void;

package/dist/types/utils/theme/generateTheme.d.ts

@@ -3,4 +3,4 @@ import { Theme } from '../../interface.js';
  * Generates css theme variables.
  * @returns @boolean Whether background is dark or not.
  */
-export declare const generateTheme: ({ foregroundColor, backgroundColor, accentColor, darkForegroundColor, darkBackgroundColor, darkAccentColor, mode, font, customPalette, borderRadius, customFontSizes, customBorderRadii, }: Theme) => void;
+export declare const generateTheme: ({ foregroundColor, backgroundColor, accentColor, darkForegroundColor, darkBackgroundColor, darkAccentColor, mode, font, customPalette, borderRadius, customFontSizes, customBorderRadii, overlayBackground, }: Theme) => void;

package/package.json

@@ -1,39 +1,9 @@
 {
   "name": "@getpara/core-components",
-  "version": "2.0.0-alpha.5",
   "description": "Capsule Core Components",
-  "main": "dist/index.js",
-  "type": "module",
-  "types": "dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs.js"
-    }
-  },
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
+  "version": "2.0.0-alpha.50",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
-  "files": [
-    "dist/",
-    "css/"
-  ],
-  "scripts": {
-    "build": "yarn build:assets && yarn build:css && stencil build && yarn appendLoaderExports",
-    "start": "yarn build:assets && yarn build:css && stencil build --dev --watch --serve",
-    "test": "stencil test --spec --clearCache",
-    "test.watch": "stencil test --spec --watchAll --clearCache",
-    "generate": "stencil generate",
-    "build:css": "sass --embed-sources src/css:./css",
-    "build:assets": "ts-node -T ./scripts/buildAssets.ts",
-    "appendLoaderExports": "ts-node -T ./scripts/appendLoaderExports.ts",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
   "dependencies": {
     "@stencil/core": "^4.7.0",
     "color-blend": "^4.0.0",
@@ -47,9 +17,9 @@
     "@chromatic-com/storybook": "^1.6.0",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.10",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
     "@storybook/addon-notes": "^5.3.21",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
     "@storybook/blocks": "^8.1.11",
@@ -64,9 +34,39 @@
     "rollup-plugin-dotenv": "^0.5.0",
     "sass": "^1.71.1",
     "stencil-inline-svg": "^1.1.0",
-    "storybook": "^8.1.11",
+    "storybook": "^8.6.4",
     "storybook-addon-stencil": "^0.2.1",
     "ts-node": "^10.9.2"
   },
-  "gitHead": "3ecfca088f24489f2e8fa5493d0f4459b08880e1"
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "files": [
+    "dist/",
+    "css/"
+  ],
+  "main": "dist/index.js",
+  "scripts": {
+    "appendLoaderExports": "ts-node -T ./scripts/appendLoaderExports.ts",
+    "build": "yarn build:assets && yarn build:css && stencil build && yarn appendLoaderExports",
+    "build-storybook": "storybook build",
+    "build:assets": "ts-node -T ./scripts/buildAssets.ts",
+    "build:css": "sass --embed-sources src/css:./css",
+    "generate": "stencil generate",
+    "start": "yarn build:assets && yarn build:css && stencil build --dev --watch --serve",
+    "storybook": "storybook dev -p 6006",
+    "test": "stencil test --spec --clearCache",
+    "test.watch": "stencil test --spec --watchAll --clearCache"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "type": "module",
+  "types": "dist/types/index.d.ts",
+  "gitHead": "688b92a7ca207593a4a3be09cb5cc580092614fc"
 }

package/dist/capsule/p-438442c7.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o,H as e}from"./p-fa6b7678.js";import{C as r,P as n}from"./p-497acb43.js";const i=":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 d=i;const a=t=>o("svg",{class:{rotate90:t===1,rotate180:t===2,rotate270:t===3},viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},o("g",{"clip-path":"url(#clip0_674_66)"},o("path",{"fill-rule":"evenodd","clip-rule":"evenodd",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"})),o("defs",null,o("clipPath",{id:"clip0_674_66"},o("rect",{width:"12",height:"12"}))));const l=t=>o("svg",{class:{rotate90:t===1,rotate180:t===2,rotate270:t===3},viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},o("g",{"clip-path":"url(#clip0_674_255)"},o("path",{"fill-rule":"evenodd","clip-rule":"evenodd",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"}),o("path",{"fill-rule":"evenodd","clip-rule":"evenodd",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"})),o("defs",null,o("clipPath",{id:"clip0_674_255"},o("rect",{width:"12",height:"12"}))));const s=[[[0,0,0,0],[0,1,3,2]],[[1,1,0,0],[0,1,3,2]],[[0,1,0,1],[0,1,3,2]],[[0,0,1,1],[0,1,3,2]],[[1,0,1,0],[0,1,3,2]],[[1,1,1,1],[0,1,3,2]],[[0,0,0,0],[2,3,1,0]],[[1,1,1,1],[2,3,1,0]],[[1,1,1,1],[0,1,2,3]]];const c=class{constructor(o){t(this,o);this.hash=undefined;this.size="40px";this.variant="default"}render(){let t;const r=!this.hash;if(!r)t=u(this.hash);return o(e,{key:"55072485ad5993ad8eb075a9d7d83e7e137ec9cd",class:{red:(t===null||t===void 0?void 0:t.color)==="red",orange:(t===null||t===void 0?void 0:t.color)==="orange",yellow:(t===null||t===void 0?void 0:t.color)==="yellow",green:(t===null||t===void 0?void 0:t.color)==="green",blue:(t===null||t===void 0?void 0:t.color)==="blue",purple:(t===null||t===void 0?void 0:t.color)==="purple",empty:!(t===null||t===void 0?void 0:t.color)&&!this.hash,avatar:this.variant==="avatar"},style:{width:this.size,height:this.size}},(t===null||t===void 0?void 0:t.shapes)&&(t===null||t===void 0?void 0:t.rotations)&&t.shapes.map(((o,e)=>o?l(t.rotations[e]):a(t.rotations[e]))))}};const g=[r.length,s.length,16];function u(t){const o=new n(t);const[e,i,d]=g.map((t=>o.nextInt(0,t-1)));const a=Math.floor(d/4);const[l,c]=[d%2===1,d%4>=2];return{color:r[e],shapes:s[i][0].map(((t,o)=>o===a?l?t===1?false:true:t===1:t===1)),rotations:s[i][1].map(((t,o)=>o===a?c?(t+2)%4:t:t))}}c.style=d;export{c as cpsl_identicon};
-//# sourceMappingURL=p-438442c7.entry.js.map

package/dist/capsule/p-438442c7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cpslIdenticonCss","CpslIdenticonStyle0","SingleArc","rotation","h","class","rotate90","rotate180","rotate270","viewBox","xmlns","d","id","width","height","DoubleArc","BASE_PATTERNS","CpslIdenticon","render","props","isEmpty","this","hash","getIdenticonProps","Host","key","red","color","orange","yellow","green","blue","purple","empty","avatar","variant","style","size","shapes","rotations","map","isDouble","index","PRANDO_INTS","COLORS","length","seed","rng","Prando","iColor","iPattern","iDeviation","len","nextInt","deviationIndex","Math","floor","isDeviateShape","isDeviateFlip","s","i","r"],"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"],"mappings":"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","ignoreList":[]}