@roadtrip/components 2.27.1 → 2.28.0

package/dist/collection/components/toggle/toggle.js

@@ -0,0 +1,402 @@
+import { Component, Event, Host, Prop, Watch, h } from '@stencil/core';
+import '../../utils/polyfill';
+export class toggle {
+  constructor() {
+    /**
+     * The id of toggle
+     */
+    this.toggleId = `road-toggle-${toggleIds++}`;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.toggleId;
+    /**
+     * If `true`, the toggle is checked.
+     */
+    this.checked = false;
+    /**
+     * If `true`, the user cannot interact with the toggle.
+     */
+    this.disabled = false;
+    /**
+     * Label for the field
+     */
+    this.label = `${this.toggleId}-label`;
+    /**
+     * Set the color of alert. e.g. info, success, warning, danger
+     */
+    this.color = 'secondary';
+    /**
+     * If `true`, the label is at left of the toggle
+     */
+    this.hasLeftLabel = false;
+    /**
+     * Add space between label and toggle element
+     */
+    this.isSpaced = false;
+    /**
+     * Value the form will get
+     */
+    this.value = 'on';
+    /**
+     * Text display for "`on`" state in the toggle lever
+     */
+    this.on = "yes";
+    /**
+     * Text display for "`off`" state in the toggle lever
+     */
+    this.off = "no";
+    this.onClick = () => {
+      this.checked = !this.checked;
+    };
+    this.onFocus = () => {
+      this.roadfocus.emit();
+      this.roadFocus.emit();
+    };
+    this.onBlur = () => {
+      this.roadBlur.emit();
+      this.roadblur.emit();
+    };
+  }
+  checkedChanged(isChecked) {
+    this.roadchange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
+    this.roadChange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
+  }
+  render() {
+    const labelId = this.toggleId + '-label';
+    const textLabel = h("label", { class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+    const colorClass = this.color !== undefined ? 'form-toggle-' + this.color : '';
+    const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
+    const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
+    return (h(Host, null,
+      h("input", { class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }),
+      h("label", { class: `form-toggle-label ${isSpacedClass} ${colorClass}`, htmlFor: this.toggleId },
+        this.hasLeftLabel && textLabel,
+        h("div", { class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }),
+        this.hasLeftLabel ? '' : textLabel)));
+  }
+  static get is() { return "road-toggle"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["toggle.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["toggle.css"]
+  }; }
+  static get properties() { return {
+    "toggleId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The id of toggle"
+      },
+      "attribute": "toggle-id",
+      "reflect": false,
+      "defaultValue": "`road-toggle-${toggleIds++}`"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the control, which is submitted with the form data."
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "this.toggleId"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the toggle is checked."
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the user cannot interact with the toggle."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label for the field"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "`${this.toggleId}-label`"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'secondary' | FeedbackColors",
+        "resolved": "\"danger\" | \"info\" | \"secondary\" | \"success\" | \"warning\" | undefined",
+        "references": {
+          "FeedbackColors": {
+            "location": "import",
+            "path": "../../interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Set the color of alert. e.g. info, success, warning, danger"
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "'secondary'"
+    },
+    "hasLeftLabel": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the label is at left of the toggle"
+      },
+      "attribute": "has-left-label",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "isSpaced": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Add space between label and toggle element"
+      },
+      "attribute": "is-spaced",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Value the form will get"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "'on'"
+    },
+    "on": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text display for \"`on`\" state in the toggle lever"
+      },
+      "attribute": "on",
+      "reflect": false,
+      "defaultValue": "\"yes\""
+    },
+    "off": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text display for \"`off`\" state in the toggle lever"
+      },
+      "attribute": "off",
+      "reflect": false,
+      "defaultValue": "\"no\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "roadchange",
+      "name": "roadchange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the checked property has changed."
+      },
+      "complexType": {
+        "original": "{\n    checked: boolean;\n    value: string | undefined | null\n  }",
+        "resolved": "{ checked: boolean; value: string | null | undefined; }",
+        "references": {}
+      }
+    }, {
+      "method": "roadChange",
+      "name": "roadChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    checked: boolean;\n    value: string | undefined | null\n  }",
+        "resolved": "{ checked: boolean; value: string | null | undefined; }",
+        "references": {}
+      }
+    }, {
+      "method": "roadfocus",
+      "name": "roadfocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the toggle has focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadFocus",
+      "name": "roadFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadblur",
+      "name": "roadblur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the toggle loses focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadBlur",
+      "name": "roadBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "checked",
+      "methodName": "checkedChanged"
+    }]; }
+}
+let toggleIds = 0;

package/dist/collection/components/{switch/switch.stories.js → toggle/toggle.stories.js}

@@ -2,8 +2,8 @@ import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
-  title: 'Forms/Switch',
-  component: 'road-switch',
+  title: 'Forms/Toggle',
+  component: 'road-toggle',
   parameters: {
     actions: {
       handles: ['roadblur', 'roadfocus'],
@@ -22,7 +22,7 @@ export default {
     name: {
       control: 'text',
     },
-    'switch-id': {
+    'toggle-id': {
       control: 'text',
     },
     value: {
@@ -62,7 +62,7 @@ export default {
         type: null,
       },
     },
-    '--switch-lever-width': {
+    '--toggle-lever-width': {
       table: {
         defaultValue: { summary: '4.5rem' },
       },
@@ -85,7 +85,7 @@ export default {
 };
 
 const Template = (args) => html`
-  <road-switch 
+  <road-toggle 
     checked="${ifDefined(args.checked)}"
     disabled="${ifDefined(args.disabled)}"
     color="${ifDefined(args.color)}"
@@ -96,9 +96,9 @@ const Template = (args) => html`
     on="${ifDefined(args.on)}"
     has-left-label="${ifDefined(args['has-left-label'])}"
     is-spaced="${ifDefined(args['is-spaced'])}"
-    switch-id="${ifDefined(args['switch-id'])}"
+    toggle-id="${ifDefined(args['toggle-id'])}"
     @roadchange=${event => args.roadchange(event.detail)}
-  ></road-switch>
+  ></road-toggle>
 `;
 
 export const Playground = Template.bind({});

package/dist/collection/components/toolbar/toolbar.css

@@ -14,9 +14,9 @@
   display: block;
   width: 100%;
   contain: content;
-  color: var(--text);
-  background: var(--white);
-  border-bottom: 1px solid var(--border);
+  color: var(--road-grey-900);
+  background: var(--road-grey-000);
+  border-bottom: 1px solid var(--road-grey-300);
 }
 
 /* CONTAINER
@@ -61,11 +61,11 @@
  -------------------- */
 
 :host(.toolbar-primary) {
-  color: var(--primary-contrast);
-  background: var(--primary);
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-900);
 }
 
 :host(.toolbar-secondary) {
-  color: var(--primary-contrast);
-  background: var(--secondary);
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-500);
 }

package/dist/collection/components/tooltip/tooltip.css

@@ -32,13 +32,13 @@
   width: var(--width);
   max-width: var(--max-width);
   padding: 0.5rem;
-  font-family: var(--font);
+  font-family: var(--road-font);
   font-size: 0.75rem;
-  color: var(--text);
+  color: var(--road-grey-900);
   text-align: center;
   pointer-events: none;
-  background: var(--white);
-  border: 1px solid var(--border);
+  background: var(--road-grey-000);
+  border: 1px solid var(--road-grey-300);
   border-radius: 0.25rem;
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
   opacity: 0;

package/dist/collection/components/utilities/border.stories.js

@@ -6,34 +6,34 @@ export default {
 
 export const Additive = () => html`
   <div class="border" 
-    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);"></div>
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--road-grey-100);"></div>
 
   <div class="border-left" 
-    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);"></div>
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--road-grey-100);"></div>
 
   <div class="border-top" 
-    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);"></div>
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--road-grey-100);"></div>
 
   <div class="border-right" 
-    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);"></div>
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--road-grey-100);"></div>
 
   <div class="border-bottom" 
-    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);"></div>
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--road-grey-100);"></div>
 `;
 
 export const Subtractive = () => html`
   <div class="border-0" 
-    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);border: 1px solid var(--border);"></div>
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--road-grey-100);border: 1px solid var(--road-grey-300);"></div>
 
   <div class="border-left-0" 
-    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);border: 1px solid var(--border);"></div>
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--road-grey-100);border: 1px solid var(--road-grey-300);"></div>
 
   <div class="border-top-0" 
-    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);border: 1px solid var(--border);"></div>
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--road-grey-100);border: 1px solid var(--road-grey-300);"></div>
 
   <div class="border-right-0" 
-    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);border: 1px solid var(--border);"></div>
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--road-grey-100);border: 1px solid var(--road-grey-300);"></div>
 
   <div class="border-bottom-0" 
-    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);border: 1px solid var(--border);"></div>
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--road-grey-100);border: 1px solid var(--road-grey-300);"></div>
 `;

package/dist/collection/components/utilities/color.stories.js

@@ -5,23 +5,45 @@ export default {
 };
 
 export const TextColors = () => html`
+<div style="font-size: 1.125rem">
+
   <p class="text-primary">.text-primary</p>
+
   <p class="text-secondary">.text-secondary</p>
+
   <p class="text-success">.text-success</p>
+
   <p class="text-warning">.text-warning</p>
+
   <p class="text-danger">.text-danger</p>
+
   <p class="text-gray">.text-gray</p>
+
   <p class="text-gray-second">.text-gray-second</p>
+
   <p class="text-disabled">.text-disabled</p>
+
   <p class="text-white bg-dark">.text-white</p>
+
+</div>
 `;
 
 export const BackgroundColors = () => html`
+<div style="font-size: 1.125rem">
+
   <p class="bg-primary text-white pl-16 pt-16 pb-16">.bg-primary</p>
+
   <p class="bg-secondary text-white pl-16 pt-16 pb-16">.bg-secondary</p>
+
   <p class="bg-success text-white pl-16 pt-16 pb-16">.bg-success</p>
+
   <p class="bg-warning text-dark pl-16 pt-16 pb-16">.bg-warning</p>
+
   <p class="bg-danger text-white pl-16 pt-16 pb-16">.bg-danger</p>
+
   <p class="bg-light pl-16 pt-16 pb-16">.bg-light</p>
+
   <p class="bg-white pl-16 pt-16 pb-16">.bg-white</p>
+
+</div>
 `;

package/dist/esm/{index-1ea26b25.js → index-d612e910.js}

@@ -6,10 +6,12 @@ const alertSuccessOutline = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><g
 const alertSuccess = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M32,8.75A23.25,23.25,0,1,0,55.25,32,23.276,23.276,0,0,0,32,8.75ZM29.279,40.529l-6.963-6.962L24.083,31.8l5.2,5.195L41.916,24.355l1.768,1.767Z" transform="translate(0.25 0.25)"/></svg>';
 const alertWarningOutline = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><g transform="translate(143.368 0.037)"><rect width="3" height="14.003" transform="translate(-112.073 23.118)"/><rect width="3" height="3.329" transform="translate(-112.073 41.553)"/><path d="M-90.034,53.037h-41.078a4.206,4.206,0,0,1-3.68-2.125,4.21,4.21,0,0,1,0-4.25l20.539-35.574a4.208,4.208,0,0,1,3.68-2.125h0a4.208,4.208,0,0,1,3.681,2.125l20.539,35.574a4.21,4.21,0,0,1,0,4.25A4.208,4.208,0,0,1-90.034,53.037Zm-20.539-41.574a1.73,1.73,0,0,0-1.515.875l-20.539,35.574a1.734,1.734,0,0,0,0,1.75,1.733,1.733,0,0,0,1.515.875h41.078a1.733,1.733,0,0,0,1.516-.875,1.734,1.734,0,0,0,0-1.75l-20.539-35.574A1.733,1.733,0,0,0-110.573,11.463Z"/></g></svg>';
 const alertWarning = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M56.22,46.662,35.68,11.088A4.205,4.205,0,0,0,32,8.963h0a4.208,4.208,0,0,0-3.68,2.125L7.78,46.662a4.251,4.251,0,0,0,3.681,6.375H52.539a4.25,4.25,0,0,0,3.681-6.375ZM33.5,44.882h-3V41.553h3Zm0-7.761h-3v-14h3Z" transform="translate(0.796 0.037)"/></svg>';
+const checkWide = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><g transform="translate(-1728)"><path d="M1753.59,39.75l-8.34-8.34-2.84,2.82,11.18,11.18,24-24-2.82-2.82Z"/></g></svg>';
 const licensePlateStarEu = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M22.457,49.187l-.774-2.406-.773,2.406H18.387L20.4,50.676l-.774,2.406L21.664,51.6l2.046,1.474-.773-2.407,2.042-1.481Z"/><path d="M19.66,17.173l2.058-1.493,2.042,1.481-.773-2.406,2.042-1.482H22.507l-.774-2.406-.773,2.406-2.569.012,2.043,1.482Z"/><path d="M14,18.163l-.774,2.406H10.7l2.023,1.482-.774,2.406L14,22.975l2.027,1.466-.774-2.406L17.3,20.569H14.771Z"/><path d="M32.743,52.1l-.774-2.406L31.195,52.1H28.65l2.043,1.482-.774,2.406L31.961,54.5,34,55.984l-.774-2.406L35.273,52.1Z"/><path d="M30.008,14.31l2.042-1.481,2.043,1.481-.774-2.41,2.043-1.481H32.839l-.773-2.407-.774,2.407H28.739L30.781,11.9Z"/><path d="M14.647,41.644l-.774-2.406L13.1,41.644H10.577l2.043,1.481-.774,2.406,2.043-1.481,2.042,1.481-.8-2.406,2.043-1.481Z"/><path d="M11.034,33.505l2.042,1.481L12.3,32.58l2.045-1.48H11.831l-.774-2.406L10.283,31.1H7.761l2,1.481-.774,2.406Z"/><path d="M48.038,24.523l2.039-1.49,2.042,1.482-.774-2.406,2.043-1.482H50.866l-.774-2.406-.774,2.406-2.549.008,2.043,1.481Z"/><path d="M50.866,41.717l-.774-2.406-.774,2.406H46.8L48.839,43.2l-.774,2.4,2.043-1.482L52.15,45.6l-.785-2.4,2.042-1.482Z"/><path d="M56.239,31.188H53.717l-.774-2.406-.774,2.406H49.647l2.043,1.481-.774,2.406,2.043-1.481L55,35.075l-.8-2.406Z"/><path d="M42.367,10.9l-.774,2.407H39.071L41.118,14.8l-.774,2.4,2.042-1.482L44.429,17.2l-.774-2.406,2.062-1.489H43.141Z"/><path d="M43.009,49.229l-.773-2.406-.774,2.406h-2.5L41,50.711l-.774,2.406,2.042-1.481,2.043,1.481-.824-2.406,2.042-1.482Z"/></svg>';
+const navigationAddLess = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><g transform="translate(32.384 -13.14) rotate(45)"><rect width="35.355" height="2.5" transform="translate(18.807 43.807) rotate(-45)"/></g></svg>';
 const navigationChevron = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M26.654,45.751,24.533,43.63,35.973,32.19,24.533,20.751l2.121-2.121L40.215,32.19Z" transform="translate(1.467 0.37)"/></svg>';
 const navigationClose = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><g transform="translate(0.193 0.193)"><rect width="2.5" height="35.355" transform="translate(18.807 20.574) rotate(-45)"/><rect width="35.355" height="2.5" transform="translate(18.807 43.807) rotate(-45)"/></g></svg>';
 const starHalfColor = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M800,143.425V102.5l7.514,17.755,19.17,1.637L812.152,134.61l4.384,18.89Z" transform="translate(-768 -96)"/><path d="M800,143.425,783.461,153.5l4.387-18.89-14.532-12.718,19.165-1.637L800,102.5Z" transform="translate(-768 -96)" fill="var(--warning, rgb(252, 183, 49))"/></svg>';
 const star = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M800,143.425V102.5l7.514,17.755,19.17,1.637L812.152,134.61l4.384,18.89Z" transform="translate(-768 -96)"/><path d="M800,143.425,783.461,153.5l4.387-18.89-14.532-12.718,19.165-1.637L800,102.5Z" transform="translate(-768 -96)"/></svg>';
 
-export { navigationClose as a, alertInfoOutline as b, alertDangerOutline as c, alertWarningOutline as d, alertSuccessOutline as e, starHalfColor as f, alertInfo as g, alertDanger as h, alertWarning as i, alertSuccess as j, licensePlateStarEu as l, navigationChevron as n, star as s };
+export { navigationClose as a, navigationAddLess as b, checkWide as c, alertInfoOutline as d, alertDangerOutline as e, alertWarningOutline as f, alertSuccessOutline as g, starHalfColor as h, alertInfo as i, alertDanger as j, alertWarning as k, licensePlateStarEu as l, alertSuccess as m, navigationChevron as n, star as s };