@getpara/core-components 0.1.0

package/dist/collection/components/cpsl-identicon/cpsl-identicon.css

@@ -0,0 +1,76 @@
+: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;
+}

package/dist/collection/components/cpsl-identicon/cpsl-identicon.js

@@ -0,0 +1,165 @@
+import { Host, h } from "@stencil/core";
+import Prando from "../../lib/prando.js";
+import { COLORS } from "../../utils/prand.js";
+const SingleArc = (rotation) => (h("svg", { class: {
+        rotate90: rotation === 1,
+        rotate180: rotation === 2,
+        rotate270: rotation === 3,
+    }, viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_674_66)" }, h("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" })), h("defs", null, h("clipPath", { id: "clip0_674_66" }, h("rect", { width: "12", height: "12" })))));
+const DoubleArc = (rotation) => (h("svg", { class: {
+        rotate90: rotation === 1,
+        rotate180: rotation === 2,
+        rotate270: rotation === 3,
+    }, viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_674_255)" }, h("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" }), h("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" })), h("defs", null, h("clipPath", { id: "clip0_674_255" }, h("rect", { width: "12", height: "12" })))));
+const BASE_PATTERNS = [
+    [
+        [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],
+    ],
+];
+export class CpslIdenticon {
+    constructor() {
+        this.hash = undefined;
+        this.size = '40px';
+        this.variant = 'default';
+    }
+    render() {
+        let props;
+        const isEmpty = !this.hash;
+        if (!isEmpty)
+            props = getIdenticonProps(this.hash);
+        return (h(Host, { key: '55072485ad5993ad8eb075a9d7d83e7e137ec9cd', 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',
+                green: (props === null || props === void 0 ? void 0 : props.color) === 'green',
+                blue: (props === null || props === void 0 ? void 0 : props.color) === 'blue',
+                purple: (props === null || props === void 0 ? void 0 : props.color) === 'purple',
+                empty: !(props === null || props === void 0 ? void 0 : props.color) && !this.hash,
+                avatar: this.variant === 'avatar',
+            }, style: {
+                width: this.size,
+                height: this.size,
+            } }, (props === null || props === void 0 ? void 0 : props.shapes) &&
+            (props === null || props === void 0 ? void 0 : props.rotations) &&
+            props.shapes.map((isDouble, index) => {
+                return isDouble ? DoubleArc(props.rotations[index]) : SingleArc(props.rotations[index]);
+            })));
+    }
+    static get is() { return "cpsl-identicon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-identicon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-identicon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "hash": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hash",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The CSS width and height of the identicon.\nDefault is: 40px."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'40px'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'avatar'",
+                    "resolved": "\"avatar\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}
+const PRANDO_INTS = [COLORS.length, BASE_PATTERNS.length, 16];
+function getIdenticonProps(seed) {
+    const rng = new Prando(seed);
+    const [iColor, iPattern, iDeviation] = PRANDO_INTS.map(len => rng.nextInt(0, len - 1));
+    const deviationIndex = Math.floor(iDeviation / 4);
+    const [isDeviateShape, isDeviateFlip] = [iDeviation % 2 === 1, iDeviation % 4 >= 2];
+    return {
+        color: COLORS[iColor],
+        shapes: BASE_PATTERNS[iPattern][0].map((s, i) => {
+            return i === deviationIndex ? (isDeviateShape ? (s === 1 ? false : true) : s === 1) : s === 1;
+        }),
+        rotations: BASE_PATTERNS[iPattern][1].map((r, i) => (i === deviationIndex ? (isDeviateFlip ? (r + 2) % 4 : r) : r)),
+    };
+}
+//# sourceMappingURL=cpsl-identicon.js.map

package/dist/collection/components/cpsl-identicon/cpsl-identicon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-identicon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/cpsl-identicon/cpsl-identicon.stories.js

@@ -0,0 +1,12 @@
+const meta = {
+    title: 'Components/CpslIdenticon',
+    args: { hash: 'wruvbwic8932nc4u3cr9394n3cibj3892438cr', size: '40px' },
+    argTypes: {
+        hash: { control: 'text' },
+        size: { control: 'number' },
+    },
+};
+export default meta;
+const Template = args => `<cpsl-identicon hash=${args.hash}/>`;
+export const Primary = Template.bind({});
+//# sourceMappingURL=cpsl-identicon.stories.js.map

package/dist/collection/components/cpsl-identicon/cpsl-identicon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-identicon.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.stories.tsx"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA+C;IACvD,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,EAAE,IAAI,EAAE,wCAAwC,EAAE,IAAI,EAAE,MAAM,EAAE;IACtE,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU,IAAI,CAAC,EAAE,CAAC,wBAAwB,IAAI,CAAC,IAAI,IAAI,CAAC;AAEtE,MAAM,CAAC,MAAM,OAAO,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslIdenticon } from './cpsl-identicon.js';\n\nconst meta: Meta<CpslIdenticon & { content?: string }> = {\n  title: 'Components/CpslIdenticon',\n  args: { hash: 'wruvbwic8932nc4u3cr9394n3cibj3892438cr', size: '40px' },\n  argTypes: {\n    hash: { control: 'text' },\n    size: { control: 'number' },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslIdenticon & { content?: string }>;\n\nconst Template: Story = args => `<cpsl-identicon hash=${args.hash}/>`;\n\nexport const Primary: Story = Template.bind({});\n"]}

package/dist/collection/components/cpsl-info-box/cpsl-info-box.css

@@ -0,0 +1,76 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --box-border-radius: var(--cpsl-border-radius-info-box);
+  --box-padding-top: 16px;
+  --box-padding-bottom: 16px;
+  --box-padding-start: 16px;
+  --box-padding-end: 16px;
+  --box-border-width: 1px;
+}
+
+.info-box-container {
+  border-radius: var(--input-border-radius);
+  -webkit-padding-start: var(--box-padding-start);
+  padding-inline-start: var(--box-padding-start);
+  -webkit-padding-end: var(--box-padding-end);
+  padding-inline-end: var(--box-padding-end);
+  padding-top: var(--box-padding-top);
+  padding-bottom: var(--box-padding-bottom);
+  display: flex;
+  background: var(--cpsl-color-background-4);
+  border-radius: var(--box-border-radius);
+}

package/dist/collection/components/cpsl-info-box/cpsl-info-box.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class CpslInfoBox {
+    render() {
+        return (h(Host, { key: '93726eb6ef05c505f409ec5b313e7db50c0d0a78' }, h("div", { key: '4cfe6525e289eca68319c9651efe20b640da05d3', class: "info-box-container" }, h("slot", { key: '81955b1e2f49839cddd514f00777de3870846929' }))));
+    }
+    static get is() { return "cpsl-info-box"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-info-box.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-info-box.css"]
+        };
+    }
+}
+//# sourceMappingURL=cpsl-info-box.js.map

package/dist/collection/components/cpsl-info-box/cpsl-info-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-info-box.js","sourceRoot":"","sources":["../../../../src/components/cpsl-info-box/cpsl-info-box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;IACtB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-info-box',\n  styleUrl: 'cpsl-info-box.scss',\n  shadow: true,\n})\nexport class CpslInfoBox {\n  render() {\n    return (\n      <Host>\n        <div class=\"info-box-container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-input/cpsl-input.css

@@ -0,0 +1,235 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --container-box-shadow: none;
+  --container-box-shadow-color: none;
+  --container-border-color: var(--cpsl-color-input-border-active);
+  --container-border-error-color: var(--cpsl-color-input-border-error);
+  --container-background-color: var(--cpsl-color-input-surface-default);
+  --container-background-color-disabled: var(--cpsl-color-input-surface-disabled);
+  --container-border-width: 1px;
+  --container-border-radius: var(--cpsl-border-radius-input);
+  --container-padding-top: 0px;
+  --container-padding-bottom: 0px;
+  --container-padding-end: 12px;
+  --container-padding-start: 12px;
+  --container-height: 48px;
+  --container-gap: 8px;
+  --input-background-color: var(--cpsl-color-input-surface-default);
+  --input-background-color-disabled: var(--cpsl-color-input-surface-disabled);
+  --input-color: var(--cpsl-color-text-primary);
+  --input-placeholder-color: var(--cpsl-color-text-secondary);
+  --input-font-size: var(--cpsl-font-size-body-m);
+  --input-font-weight: 400;
+  --optional-label-color: var(--cpsl-color-text-secondary);
+  --label-color: var(--cpsl-color-text-primary);
+  --label-font-size: var(--cpsl-font-size-body-s);
+  --label-margin-bottom: 0px;
+  --helper-text-color: var(--cpsl-color-text-secondary);
+  --helper-text-error-color: var(--cpsl-color-text-error);
+  --helper-text-icon-color: var(--cpsl-color-text-secondary);
+  --helper-text-icon-error-color: var(--cpsl-color-text-error);
+  --helper-text-icon-size: 16px;
+  --helper-text-font-size: var(--cpsl-font-size-body-xs);
+  --helper-text-margin-top: 0px;
+  --button-padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: var(--cpsl-font-family, inherit);
+}
+
+:host(.contrast-text) {
+  --input-color: var(--cpsl-color-contrast);
+}
+
+:host(:not(.has-value)) {
+  --container-border-color: var(--cpsl-color-input-border-placeholder);
+  --input-color: var(--cpsl-color-text-secondary);
+}
+
+:host(.disabled) {
+  --container-background-color: var(--container-background-color-disabled);
+  --input-background-color: var(--input-background-color-disabled);
+  --input-color: var(--cpsl-color-text-disabled);
+  --container-border-color: transparent;
+}
+
+:host(.focused) {
+  --container-box-shadow: 0px 0px 0px 2px var(--container-box-shadow-color);
+  --container-border-color: var(--cpsl-color-input-border-active);
+  --container-background-color: var(--cpsl-color-input-surface-default);
+}
+
+.input-container {
+  -webkit-padding-start: var(--container-padding-start);
+  padding-inline-start: var(--container-padding-start);
+  -webkit-padding-end: var(--container-padding-end);
+  padding-inline-end: var(--container-padding-end);
+  padding-top: var(--container-padding-top);
+  padding-bottom: var(--container-padding-bottom);
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: var(--container-height);
+  gap: var(--container-gap);
+  border-style: solid;
+  border-width: var(--container-border-width);
+  border-color: var(--container-border-color);
+  border-radius: var(--container-border-radius);
+  background: var(--container-background-color);
+  box-shadow: var(--container-box-shadow);
+}
+.input-container.textarea {
+  height: auto;
+  min-height: var(--container-height);
+}
+
+.error-container {
+  border-color: var(--container-border-error-color);
+}
+
+.native-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  height: 100%;
+  box-sizing: border-box;
+  font-size: var(--input-font-size);
+  font-weight: var(--input-font-weight);
+  color: var(--input-color);
+  background: var(--input-background-color);
+  resize: none;
+  font-family: var(--cpsl-font-family, inherit);
+}
+.native-input:focus, .native-input:focus-visible {
+  outline: none;
+}
+.native-input::placeholder {
+  color: var(--input-placeholder-color);
+  opacity: 1; /* Firefox */
+}
+.native-input::-moz-selection {
+  /* Code for Firefox */
+  color: var(--cpsl-color-text-inverted);
+  background: var(--cpsl-color-background-64);
+}
+.native-input::selection {
+  color: var(--cpsl-color-text-inverted);
+  background: var(--cpsl-color-background-64);
+}
+
+.label {
+  display: inline-block;
+  color: var(--label-color);
+  font-size: var(--label-font-size);
+  font-weight: 500;
+  margin-bottom: var(--label-margin-bottom);
+}
+
+.optional-label {
+  display: inline-block;
+  color: var(--optional-label-color);
+  font-size: var(--label-font-size);
+  font-weight: 500;
+}
+
+.helper-text-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--helper-text-color);
+  font-size: var(--helper-text-font-size);
+  font-weight: 500;
+  margin-top: var(--helper-text-margin-top);
+}
+.helper-text-container cpsl-icon {
+  --height: var(--helper-text-icon-size);
+  --width: var(--helper-text-icon-size);
+  --icon-color: var(--helper-text-icon-color);
+}
+
+.error-text {
+  color: var(--helper-text-error-color);
+}
+.error-text cpsl-icon {
+  --icon-color: var(--helper-text-icon-error-color);
+}
+
+:host ::slotted([slot=start]) {
+  flex: 0 0 auto;
+}
+:host ::slotted([slot=end]) {
+  flex: 0 0 auto;
+}
+:host ::slotted(cpsl-icon) {
+  --icon-color: var(--input-color);
+}
+:host ::slotted(cpsl-button) {
+  width: calc(var(--container-height) - var(--button-padding) * 2);
+  height: calc(var(--container-height) - var(--button-padding) * 2);
+  --button-border-radius: calc(var(--container-border-radius) - 4px);
+  --button-padding-top: 4px;
+  --button-padding-start: 4px;
+  --button-padding-end: 4px;
+  --button-padding-bottom: 4px;
+}
+:host slot[name=end]::slotted(cpsl-button) {
+  margin-right: calc((var(--container-padding-end) - var(--button-padding)) * -1);
+}
+:host slot[name=start]::slotted(cpsl-button) {
+  margin-left: calc((var(--container-padding-end) - var(--button-padding)) * -1);
+}