@madgex/design-system 13.6.2 → 13.6.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "13.6.2",
+  "version": "13.6.4",
   "main": "dist/js/index.js",
   "exports": {
     ".": "./dist/js/index.js",

package/src/components/_macro-index.njk

@@ -8,6 +8,7 @@
 {% from 'src/components/image-cropper/_macro.njk' import MdsImageCropper %}
 {% from 'src/components/inputs/_checkbox-elem/_macro.njk' import MdsCheckboxElem %}
 {% from 'src/components/inputs/_message/_macro.njk' import MdsInputMessages %}
+{% from 'src/components/inputs/button-checkbox/_macro.njk' import MdsButtonCheckbox %}
 {% from 'src/components/inputs/category-picker/_macro.njk' import MdsCategoryPicker %}
 {% from 'src/components/inputs/checkbox-list/_macro.njk' import MdsCheckboxList %}
 {% from 'src/components/inputs/combobox/_macro.njk' import MdsCombobox %}

package/src/components/inputs/_checkbox-elem/_template.njk

@@ -1,15 +1,17 @@
 {% from "../../icons/_macro.njk" import MdsIcon %}
 <input
   type="checkbox"
-  class="mds-form-check__input"
+  class="{{ params.inputClass | default('mds-form-check__input') }}"
   name="{{ params.name }}"
   id="{{ params.id }}"
   {% if params.disabled %}disabled="disabled"{% endif %}
   {% if params.describedBy %}aria-describedby="{{params.describedBy}}"{% endif %}
+  {% if params.labelledBy %}aria-labelledby="{{params.labelledBy}}"{% endif %}
   {% if params.isSelected == true %}checked="checked"{% endif %}
   value="{{ params.value }}"
   {% if params.dataPath %}data-path="{{ params.dataPath }}"{% endif %}
-/>{#
+  {% if params.controls %}aria-controls="{{ params.controls }}"{% endif %}
+/>{%- if not params.inputOnly -%}{#
 #}<label class="mds-form-check__label" for="{{ params.id }}">{#
   #}{{- params.labelText | safe -}}{#
   #}{%- if not params.optional -%}
@@ -19,4 +21,5 @@
         visuallyHiddenLabel: params.i18n.requiredIcon | default('required')
       }) -}}
   {%- endif -%}{#
-#}</label>
+#}</label>
+{%- endif -%}

package/src/components/inputs/button-checkbox/README.md

@@ -0,0 +1,38 @@
+## Parameters
+
+- `id`: The id attribute of the field. Uses `name` if not specified. **optional**
+- `name`: The name attribute of the input field. Uses `id` if not specified. **optional**
+  - NOTE: id or name are optional but one must be included
+- `value`: The value of the checkbox input. **required**
+- `isSelected`: Whether the checkbox is pre-checked. **optional**
+- `disabled`: Should the input be disabled. **optional**
+- `controls`: The `id` of the element this checkbox controls. Rendered as `aria-controls` on the input. **optional**
+- `helpText`: Helper text to display above the checkbox button. **optional**
+- `validationError`: The error message provided by validation. **optional**
+- `i18n`: Text to translate/customise (object). **required**
+
+```
+i18n: {
+  title: 'Featured Job',
+  description: 'Highlight your job in search results and reach up to twice as many candidates.',
+  price: '£500',
+}
+```
+
+## Example
+
+```
+{
+  name: 'job-boost',
+  value: 'job-boost',
+  i18n: {
+    title: 'Job boost',
+    description: 'Boost your job the best way with job boost. 100% more boosts',
+    price: '£300',
+  },
+}
+```
+
+## Accessibility
+
+The checkbox input uses `aria-labelledby` to associate the title and price elements as its label, and `aria-describedby` to associate any validation error, help text, and description elements. When `controls` is provided it is rendered as an `aria-controls` attribute on the input.

package/src/components/inputs/button-checkbox/_macro.njk

@@ -0,0 +1,3 @@
+{% macro MdsButtonCheckbox(params) %}
+    {%- include "./_template.njk" -%}
+{% endmacro %}

package/src/components/inputs/button-checkbox/_template.njk

@@ -0,0 +1,51 @@
+{% from "../_message/_macro.njk" import MdsInputMessages %}
+{% from "../_checkbox-elem/_macro.njk" import MdsCheckboxElem %}
+{% from "../../icons/_macro.njk" import MdsIcon %}
+
+{%- set name = params.name or params.id -%}
+{%- set id = params.id or params.name -%}
+{%- set descriptionId = id + '-description' -%}
+{%- set titleId = id + '-title' -%}
+{%- set priceId = id + '-price' -%}
+
+{%- if params.helpText -%}
+  {%- set helpTextId = id + '-help-text' -%}
+{%- endif -%}
+
+{%- if params.validationError -%}
+  {%- set validationErrorId = id + '-validation-error' -%}
+{%- endif -%}
+
+{%- set ariaDescribedBy = [validationErrorId, helpTextId, descriptionId] | select | join(' ') | trim -%}
+
+<div class="mds-button-checkbox{% if params.validationError %} mds-button-checkbox--error{% endif %}">
+  {{- MdsInputMessages({
+    id: id,
+    helpTextId: helpTextId,
+    helpText: params.helpText,
+    validationErrorId: validationErrorId,
+    validationError: params.validationError
+  }) -}}
+  <label class="mds-button-checkbox__label">
+    {{- MdsCheckboxElem({
+      inputOnly: true,
+      inputClass: 'mds-visually-hidden',
+      name: name,
+      id: id,
+      disabled: params.disabled,
+      isSelected: params.isSelected,
+      value: params.value,
+      labelledBy: titleId + ' ' + priceId,
+      describedBy: ariaDescribedBy,
+      controls: params.controls
+    }) -}}
+    <span class="mds-button-checkbox__icon--add">{{- MdsIcon({ iconName: "add", classes: "mds-font-s2" }) -}}</span>
+    <span class="mds-button-checkbox__icon--remove">{{- MdsIcon({ iconName: "remove", classes: "mds-font-s2" }) -}}</span>
+    <span>
+      <span class="mds-button-checkbox__title mds-font-s2" id="{{ titleId }}">{{ params.i18n.title }}</span>
+      <span class="mds-button-checkbox__description" id="{{ descriptionId }}">{{ params.i18n.description }}</span>
+    </span>
+    <span class="mds-button-checkbox__price mds-font-s2" id="{{ priceId }}">{{ params.i18n.price }}</span>
+  </label>
+</div>
+

package/src/components/inputs/button-checkbox/button-checkbox.config.js

@@ -0,0 +1,41 @@
+module.exports = {
+  title: 'Button checkbox',
+  name: 'Button checkbox',
+  status: 'ready',
+  context: {
+    name: 'job-boost',
+    value: 'job-boost',
+    i18n: {
+      title: 'Job Boost',
+      description: "Increase your job's visibility to be seen by more relevant candidates.",
+      price: '£300',
+    },
+  },
+  variants: [
+    {
+      name: 'Featured Job',
+      context: {
+        name: 'featured-job',
+        value: 'featured-job',
+        i18n: {
+          title: 'Featured Job',
+          description: 'Highlight your job in search results and reach up to twice as many candidates.',
+          price: '£500',
+        },
+      },
+    },
+    {
+      name: 'Something wrong',
+      context: {
+        name: 'something-wrong',
+        value: 'something-wrong',
+        validationError: 'There was an error',
+        i18n: {
+          title: 'Unable to add upgrade',
+          description: "We couldn't apply this upgrade right now. Please try again or contact support.",
+          price: '£0',
+        },
+      },
+    },
+  ],
+};

package/src/components/inputs/button-checkbox/button-checkbox.njk

@@ -0,0 +1,15 @@
+{% from "./inputs/button-checkbox/_macro.njk" import MdsButtonCheckbox %}
+
+<div class="mds-form-field">
+  {{- MdsButtonCheckbox({
+    id: id,
+    name: name,
+    controls: controls,
+    isSelected: isSelected,
+    validationError: validationError,
+    helpText: helpText,
+    value: value,
+    i18n: i18n,
+    disabled: disabled
+  }) -}}
+</div>

package/src/components/inputs/button-checkbox/button-checkbox.scss

@@ -0,0 +1,86 @@
+.mds-button-checkbox {
+  .mds-button-checkbox__label {
+    display: flex;
+    max-width: 500px;
+    gap: ($constant-size-baseline * 4);
+    cursor: pointer;
+    border: #{$regular-border};
+    border-radius: $border-radius;
+    justify-content: space-around;
+    padding-left: ($constant-size-baseline * 4);
+
+    & > * {
+      display: block;
+      padding: ($constant-size-baseline * 6) 0;
+    }
+
+    .mds-button-checkbox__icon--remove {
+      display: none;
+    }
+  }
+
+  .mds-button-checkbox__title {
+    display: block;
+    font-weight: bold;
+    margin-bottom: ($constant-size-baseline * 2);
+  }
+
+  .mds-button-checkbox__price {
+    align-content: center;
+    background: $constant-color-neutral-lightest;
+    padding-left: ($constant-size-baseline * 4);
+    flex: 0 0 auto;
+    width: 100px;
+    max-width: 30%;
+    white-space: nowrap;
+  }
+
+  // Selected (checked) state
+  .mds-button-checkbox__label:has(:checked) {
+    outline: 2.5px solid $constant-color-neutral-darker;
+
+    .mds-button-checkbox__price {
+      background: none;
+    }
+
+    .mds-button-checkbox__icon--remove {
+      display: inline;
+    }
+    .mds-button-checkbox__icon--add {
+      display: none;
+    }
+  }
+
+  // Focus state
+  .mds-button-checkbox__label:has(:focus-visible) {
+    outline: 2px solid var(--mds-color-link-base, #1b75bb);
+    outline-offset: 2px;
+
+    .mds-button-checkbox__price {
+      background: none;
+    }
+  }
+
+  // Hover
+  .mds-button-checkbox__label:hover .mds-button-checkbox__price {
+    background: none;
+  }
+
+  // Error
+  &.mds-button-checkbox--error {
+    .mds-button-checkbox__label {
+      border-color: $constant-color-status-error-dark;
+    }
+  }
+
+  // Mobile
+  @media only screen and (max-width: $constant-size-breakpoint-sm) {
+    .mds-button-checkbox__label:has(:checked),
+    .mds-button-checkbox__label {
+      .mds-button-checkbox__icon--remove,
+      .mds-button-checkbox__icon--add {
+        display: none;
+      }
+    }
+  }
+}

package/src/components/inputs/single-checkbox/_template.njk

@@ -36,7 +36,7 @@
 {% endif %}
 
 <div class="mds-form-element mds-form-element--checkbox{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" data-test="checkbox{% if params.id %}-{{params.id}}{% endif %}">
-{{- MdsInputMessages({
+  {{- MdsInputMessages({
     id: params.id,
     helpTextId: helpTextId,
     helpText: params.helpText,

package/src/components/inputs/text-editor/README.md

@@ -2,7 +2,8 @@
 
 - `id`: the id of the editor **required**
 - `menuButtons`: Array of objects to customise the toolbar of the editor. The objects should contain the id of the button and its label. If no array is passed, the editor will get all the buttons by default with their label in english **optional**,
-Example:
+  Example:
+
 ```
 menuButtons: [
   {
@@ -15,7 +16,9 @@ menuButtons: [
   },
 ],
 ```
+
 Buttons currently available:
+
 - `bold`
 - `italic`
 - `strike`
@@ -24,9 +27,10 @@ Buttons currently available:
 - `undo`
 - `redo`
 
-
+- `noMenu`: Boolean. If true, disables and hides the menu entirely. Useful for preserving existing text styling without providing editing controls.
 - `value`: default value for the editor **optional**
 - `i18n`: Text to translate/customise (object) **optional**
+
 ```
 i18n: {
   requiredIcon: 'required', // visually hidden text for the required icon
@@ -35,7 +39,8 @@ i18n: {
 }
 ```
 
-Parameters used for `MdsInputLabel` and `MdsInputMessages` macros: 
+Parameters used for `MdsInputLabel` and `MdsInputMessages` macros:
+
 - `labelText`: the text used in the label **required**
 - `tooltipMessage`: Toggles a tooltip with this message to appear alongside the label **optional**
 - `optional`: Is the input optional, otherwise required **optional**,
@@ -56,13 +61,13 @@ Avoid using `hideLabel`. Only hide the label when there can be no mistake as to
 
 The editor is using a `toolbar` role for its menu.
 The keyboard interation is as followed:
-* Tab and Shift + Tab: Move focus into and out of the toolbar. When focus moves into a toolbar:
-- If focus is moving into the toolbar for the first time, focus is set on the first control that is not disabled.
-- If the toolbar has previously contained focus, focus is optionally set on the control that last had focus. Otherwise, it is set on the first control that is not disabled.
 
-* Left Arrow and Up Arrow: Moves focus to the previous control.
-* Right Arrow and Down Arrow: Moves focus to the next control.
+- Tab and Shift + Tab: Move focus into and out of the toolbar. When focus moves into a toolbar:
+  - If focus is moving into the toolbar for the first time, focus is set on the first control that is not disabled.
+  - If the toolbar has previously contained focus, focus is optionally set on the control that last had focus. Otherwise, it is set on the first control that is not disabled.
+- Left Arrow and Up Arrow: Moves focus to the previous control.
+- Right Arrow and Down Arrow: Moves focus to the next control.
 
 Reference: https://w3c.github.io/aria-practices/#toolbar
 
-The editable part of the editor has an `aria-labelledby` referencing the label.
+The editable part of the editor has an `aria-labelledby` referencing the label.

package/src/components/inputs/text-editor/_template.njk

@@ -48,6 +48,7 @@
     <mds-text-editor 
       editorid="{{ params.id }}" 
       iconpath="{{ defaultIconPath }}"
+      {% if params.noMenu %} no-menu{% endif %}
       {%- if params.menuButtons %} menu-buttons="{{ params.menuButtons | dump }}"{% endif -%}
       {%- if params.i18n %} i18n="{{ params.i18n | dump }}"{% endif -%}
       {%- if params.value %} value="{{ params.value }}"{% endif -%}

package/src/components/inputs/text-editor/text-editor.config.js

@@ -52,5 +52,15 @@ module.exports = {
         state: 'error',
       },
     },
+    {
+      name: 'No menu',
+      context: {
+        variantTitle: 'No menu',
+        menuButtons: null,
+        id: 'editor-no-menu',
+        labelText: 'Add a job description',
+        noMenu: true,
+      },
+    },
   ],
 };

package/src/components/inputs/text-editor/text-editor.njk

@@ -9,7 +9,8 @@
   i18n: i18n,
   value: value,
   state: state,
-  validationError: validationError
+  validationError: validationError,
+  noMenu: noMenu
 }) }}
 
 <div class="mds-margin-top-b10"></div>

package/src/icons/add.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <g clip-path="url(#clip0_7441_4029)">
+    <path
+      d="M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519943 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.8071 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0866C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C24 8.8174 22.7357 5.76515 20.4853 3.51472C18.2348 1.26428 15.1826 0 12 0ZM12 21C10.22 21 8.47992 20.4722 6.99987 19.4832C5.51983 18.4943 4.36628 17.0887 3.68509 15.4442C3.0039 13.7996 2.82567 11.99 3.17294 10.2442C3.5202 8.49836 4.37737 6.89471 5.63604 5.63604C6.89472 4.37737 8.49836 3.5202 10.2442 3.17293C11.99 2.82567 13.7996 3.0039 15.4442 3.68508C17.0887 4.36627 18.4943 5.51983 19.4832 6.99987C20.4722 8.47991 21 10.22 21 12C21 14.3869 20.0518 16.6761 18.364 18.364C16.6761 20.0518 14.387 21 12 21Z"
+      fill="currentColor" />
+    <path
+      d="M17.25 10.57H13.68C13.6137 10.57 13.5501 10.5437 13.5032 10.4968C13.4563 10.4499 13.43 10.3863 13.43 10.32V6.75C13.4303 6.49322 13.3319 6.24616 13.155 6.06C12.9781 5.87384 12.7365 5.76284 12.48 5.75H11.48C11.2235 5.76284 10.9819 5.87384 10.805 6.06C10.6281 6.24616 10.5297 6.49322 10.53 6.75V10.32C10.53 10.3863 10.5037 10.4499 10.4568 10.4968C10.4099 10.5437 10.3463 10.57 10.28 10.57H6.75C6.49322 10.5697 6.24616 10.6681 6.06 10.845C5.87384 11.0219 5.76284 11.2635 5.75 11.52V12.52C5.76284 12.7765 5.87384 13.0181 6.06 13.195C6.24616 13.3719 6.49322 13.4703 6.75 13.47H10.32C10.3863 13.47 10.4499 13.4963 10.4968 13.5432C10.5437 13.5901 10.57 13.6537 10.57 13.72V17.29C10.5821 17.538 10.6861 17.7727 10.8617 17.9483C11.0373 18.1239 11.272 18.2279 11.52 18.24H12.52C12.768 18.2279 13.0027 18.1239 13.1783 17.9483C13.3539 17.7727 13.4579 17.538 13.47 17.29V13.68C13.47 13.6137 13.4963 13.5501 13.5432 13.5032C13.5901 13.4563 13.6537 13.43 13.72 13.43H17.29C17.538 13.4179 17.7727 13.3139 17.9483 13.1383C18.1239 12.9627 18.2279 12.728 18.24 12.48V11.48C18.2176 11.2324 18.1038 11.002 17.9208 10.8338C17.7378 10.6655 17.4986 10.5715 17.25 10.57Z"
+      fill="currentColor" />
+  </g>
+  <defs>
+    <clipPath id="clip0_7441_4029">
+      <rect width="24" height="24" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

package/src/icons/arrow-left.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <g clip-path="url(#clip0_7495_1339)">
+    <path d="M13.144 6.14002H3.16257C3.13304 6.13973 3.10429 6.13053 3.08009 6.11361C3.05589 6.09669 3.03737 6.07285 3.02696 6.04522C3.01655 6.01759 3.01474 5.98746 3.02176 5.95878C3.02879 5.9301 3.04432 5.90421 3.06632 5.88452L8.10457 1.45118C8.26296 1.30184 8.35719 1.09685 8.3674 0.879393C8.37761 0.66194 8.303 0.449016 8.15929 0.285496C8.01559 0.121975 7.81402 0.0206296 7.59705 0.00281822C7.38009 -0.0149932 7.16469 0.0521206 6.99624 0.190015L0.473987 5.92943C0.325018 6.06081 0.205709 6.22238 0.123987 6.40342C0.0422649 6.58445 0 6.78081 0 6.97943C0 7.17806 0.0422649 7.37441 0.123987 7.55544C0.205709 7.73648 0.325018 7.89805 0.473987 8.02943L6.99507 13.7677C7.16365 13.9038 7.37834 13.9696 7.59426 13.9512C7.81018 13.9328 8.01063 13.8316 8.15372 13.6689C8.29681 13.5061 8.37147 13.2944 8.36209 13.0779C8.35272 12.8614 8.26003 12.6569 8.1034 12.5071L3.06515 8.07377C3.04315 8.05407 3.02762 8.02818 3.0206 7.9995C3.01357 7.97082 3.01539 7.94069 3.0258 7.91306C3.0362 7.88543 3.05473 7.86159 3.07893 7.84467C3.10313 7.82775 3.13188 7.81855 3.1614 7.81827H13.144C13.3629 7.8125 13.5708 7.7215 13.7236 7.56465C13.8764 7.4078 13.9619 7.19751 13.9619 6.97856C13.9619 6.75961 13.8764 6.54931 13.7236 6.39246C13.5708 6.23562 13.3629 6.14462 13.144 6.13885V6.14002Z" fill="currentColor"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_7495_1339">
+      <rect width="14" height="14" fill="currentColor"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/icons/arrow-right.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <g clip-path="url(#clip0_7495_4915)">
+    <path d="M13.9854 6.97943C13.9849 6.78081 13.9423 6.58455 13.8605 6.40357C13.7786 6.22259 13.6594 6.061 13.5106 5.92943L6.9895 0.190015C6.82105 0.0521206 6.60565 -0.0149932 6.38868 0.00281822C6.17172 0.0206296 5.97015 0.121975 5.82644 0.285496C5.68274 0.449016 5.60813 0.66194 5.61834 0.879393C5.62854 1.09685 5.72277 1.30184 5.88117 1.45118L10.9194 5.88452C10.9415 5.90412 10.9571 5.92997 10.9642 5.95865C10.9713 5.98733 10.9695 6.01748 10.9591 6.04511C10.9486 6.07275 10.93 6.09656 10.9058 6.1134C10.8815 6.13025 10.8527 6.13932 10.8232 6.13943H0.84C0.617218 6.13943 0.403561 6.22793 0.24603 6.38546C0.0884998 6.54299 0 6.75665 0 6.97943C0 7.20221 0.0884998 7.41587 0.24603 7.5734C0.403561 7.73093 0.617218 7.81943 0.84 7.81943H10.8214C10.8509 7.81972 10.8797 7.82892 10.9039 7.84584C10.9281 7.86276 10.9466 7.88659 10.957 7.91423C10.9674 7.94186 10.9692 7.97199 10.9622 8.00067C10.9552 8.02935 10.9397 8.05524 10.9177 8.07493L5.87942 12.5083C5.7913 12.5794 5.71849 12.6677 5.66537 12.7677C5.61224 12.8678 5.57989 12.9775 5.57026 13.0904C5.56064 13.2032 5.57394 13.3168 5.60936 13.4244C5.64478 13.532 5.70159 13.6313 5.77638 13.7164C5.85117 13.8014 5.94239 13.8705 6.04456 13.9194C6.14672 13.9683 6.25772 13.996 6.37088 14.0009C6.48404 14.0058 6.59702 13.9878 6.70303 13.9479C6.80904 13.908 6.90589 13.8471 6.98775 13.7688L13.51 8.02943C13.659 7.89797 13.7784 7.73641 13.8603 7.55542C13.9423 7.37442 13.9849 7.17811 13.9854 6.97943V6.97943Z" fill="currentColor"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_7495_4915">
+      <rect width="14" height="14" fill="currentColor"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/icons/remove.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <g clip-path="url(#clip0_7448_4095)">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M12.0001 0C15.1827 0 18.235 1.26421 20.4854 3.51465C22.7359 5.76509 24.0001 8.8174 24.0001 12C24.0001 14.3734 23.2962 16.6936 21.9776 18.667C20.6591 20.6403 18.7845 22.1787 16.5919 23.0869C14.3994 23.995 11.9868 24.2324 9.65927 23.7695C7.33149 23.3065 5.19297 22.1636 3.51474 20.4854C1.83651 18.8071 0.693578 16.6686 0.230556 14.3408C-0.23236 12.0133 0.00511932 9.6007 0.913173 7.4082C1.8214 5.21555 3.35978 3.34103 5.3331 2.02246C7.30648 0.703885 9.62671 1.13119e-06 12.0001 0ZM6.75009 10.5703C5.81161 10.5703 5.80003 11.497 5.79989 11.5195V12.4795C5.79989 13.4295 6.75009 13.4297 6.75009 13.4297H17.2599C18.2099 13.4297 18.21 12.4795 18.21 12.4795V11.5195C18.2098 10.5699 17.2599 10.5703 17.2599 10.5703H6.75009Z"
+      fill="currentColor" />
+  </g>
+  <defs>
+    <clipPath id="clip0_7448_4095">
+      <rect width="24" height="24" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

package/src/scss/components/__index.scss

@@ -14,6 +14,7 @@
 @import '../../components/inputs/file-upload/file-upload';
 @import '../../components/inputs/textarea/textarea';
 @import '../../components/inputs/text-editor/text-editor';
+@import '../../components/inputs/button-checkbox/button-checkbox';
 @import '../../components/modal/modal';
 @import '../../components/skip-link/skip-link';
 @import '../../components/media-block/media-block';