@integry/sdk 4.5.2 → 4.5.4

package/src/components/Input/DateInput/index.ts

@@ -0,0 +1,103 @@
+import { html } from 'htm/preact';
+import { ErrorMessage } from '@/components/ErrorMessage';
+import { Label } from '@/components/Label';
+import { Hint } from '@/components/Tooltip';
+import { BaseInput } from '../BaseInput';
+
+import styles from './styles.module.scss';
+
+interface DateInputProps {
+  title: string;
+  description: string;
+  placeholder: string;
+  showStepValidation?: boolean;
+  isRequired?: boolean;
+  value?: string;
+  onChange?: (val: string) => void;
+  isReadOnly?: boolean;
+  isChanged?: boolean;
+}
+
+/**
+ * DateInput component
+ *
+ */
+const DateInput = (props: DateInputProps) => {
+  const {
+    title,
+    description,
+    placeholder,
+    value,
+    showStepValidation = false,
+    isRequired = false,
+    onChange = () => null,
+    isReadOnly = false,
+    isChanged = false,
+  } = props;
+
+  return html`
+  <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+    <div class="${styles.dateGroupWrapper}">
+      <fieldset>
+        <${Label} title=${title} description=${description}
+        isRequired=${isRequired} labelTag=${isReadOnly && isChanged ? 'Changed' : ''} //>
+        ${isReadOnly && html `<span class=${styles.readonlyHint} data-hint=${isReadOnly ? `Cannot modify user selection` : ''}></span>`}
+        <${BaseInput}
+          type="date"
+          placeholder=${placeholder}
+          handleChange=${onChange}
+          value=${value}
+          control=${() => html` <div
+            role="button"
+            class=${`${styles.visibilityToggle} ${isReadOnly ? styles.readonly : ''}`}
+            onclick=${() => {
+              if (!isReadOnly && value) onChange('');
+            }}
+          >
+            ${!value || isReadOnly
+              ? html`
+                  <svg
+                    width="25"
+                    height="26"
+                    viewBox="0 0 25 26"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M16.9543 5.5464H19.335L19.3349 5.54639C20.6491 5.54639 21.7156 6.61204 21.7156 7.92812L21.7147 19.8323C21.7147 21.1466 20.6482 22.2131 19.334 22.2131H5.04866C3.73449 22.2131 2.66797 21.1466 2.66797 19.8323V7.92719C2.66797 6.61296 3.73444 5.54639 5.04866 5.54639L7.42936 5.5473V4.35641C7.42936 3.69791 7.96262 3.16553 8.62019 3.16553C9.27777 3.16553 9.81102 3.69791 9.81102 4.35641V5.5464L14.5717 5.5473V4.35641C14.5717 3.69791 15.105 3.16553 15.7626 3.16553C16.4201 3.16553 16.9534 3.69791 16.9534 4.35641L16.9543 5.5464ZM4.04688 20.8324H20.3369L20.3358 8.7124H4.04688V20.8324Z"
+                      fill="#999999"
+                    />
+                  </svg>
+                `
+              : html`
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 18 18"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M9 0C13.9673 0 18 4.03275 18 9C18 13.9673 13.9673 18 9 18C4.03275 18 0 13.9673 0 9C0 4.03275 4.03275 0 9 0ZM9 0.75C13.5533 0.75 17.25 4.44675 17.25 9C17.25 13.5533 13.5533 17.25 9 17.25C4.44675 17.25 0.75 13.5533 0.75 9C0.75 4.44675 4.44675 0.75 9 0.75ZM9 8.46975L12.9697 4.5L13.5 5.03025L9.53025 9L13.5 12.9697L12.9697 13.5L9 9.53025L5.03025 13.5L4.5 12.9697L8.46975 9L4.5 5.03025L5.03025 4.5L9 8.46975Z"
+                      fill="black"
+                    />
+                  </svg>
+                `}
+          </div>`}
+          isReadOnly=${isReadOnly}
+        ><//>
+      </fieldset>
+      ${showStepValidation &&
+      isRequired &&
+      !value &&
+      html`<${ErrorMessage}>Please enter a date<//>`}
+    </div>
+    <//>
+  `;
+};
+
+export { DateInput, DateInputProps };

package/src/components/Input/DateInput/styles.module.scss

@@ -0,0 +1,50 @@
+.dateGroupWrapper {
+  fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  input[type='date'] {
+    position: relative;
+    cursor: pointer;
+  }
+
+  input[type='date']::-webkit-calendar-picker-indicator {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    color: transparent;
+    background: transparent;
+  }
+  .visibilityToggle {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    right: 10px;
+    bottom: 0;
+    margin: 0 auto;
+    svg {
+      cursor: pointer;
+      width: 20px;
+      &:hover {
+        opacity: 0.5;
+      }
+    }
+    &.readonly {
+      svg {
+      cursor: auto;
+      }
+    }
+  }
+  .readonlyHint {
+    width: 100%;
+    height: -webkit-fill-available;
+    z-index: 99;
+    position: absolute;
+  }
+}

package/src/components/Input/Input/index.ts

@@ -0,0 +1,206 @@
+import { html } from 'htm/preact';
+import { useEffect, useState } from 'preact/hooks';
+import { forwardRef } from 'preact/compat';
+import { ErrorMessage } from '@/components/ErrorMessage';
+import { Label } from '@/components/Label';
+import { Hint } from '@/components/Tooltip';
+
+import { BaseInput } from '../BaseInput';
+import styles from './styles.module.scss';
+
+interface InputProps {
+  id: string;
+  title: string;
+  description: string;
+  placeholder: string;
+  value?: string;
+  regex: string | null;
+  regexErrorMessage: string | null;
+  isRequired?: boolean;
+  showStepValidation?: boolean;
+  onChange?: (
+    val: string | string[],
+    passesRegexTest?: boolean,
+    index?: number,
+  ) => void;
+  isReadOnly?: boolean;
+  isChanged?: boolean;
+  className?: string;
+  handleFocus?: () => void;
+  handleBlur?: () => void;
+  ref?: any;
+  fieldId: string;
+  hideError?: boolean;
+  isArray?: boolean; // New prop to check if the input is an array
+  isButtonEnabled?: boolean;
+  buttonText?: string;
+  onButtonClickScript?: string;
+  buttonScriptRequiresAuthToken?: boolean;
+  apiHandler?: any;
+  showLabel?: boolean;
+  forceShowDeleteIcon?: boolean;
+  handleRemoveInputFromParent?: (index: number) => void;
+}
+
+/**
+ * Input component for handling both single and array inputs
+ */
+const Input = forwardRef((props: InputProps, ref) => {
+  const {
+    id,
+    title,
+    description,
+    placeholder,
+    value,
+    regex,
+    regexErrorMessage,
+    showStepValidation = false,
+    isRequired = false,
+    onChange = () => null,
+    handleFocus = () => null,
+    handleBlur = () => null,
+    isReadOnly = false,
+    isChanged = false,
+    className = '',
+    fieldId = `input-field`,
+    hideError = false,
+    isArray = false, // Default to false
+    isButtonEnabled = false,
+    buttonText = 'Add',
+    onButtonClickScript = '',
+    buttonScriptRequiresAuthToken = false,
+    apiHandler,
+    showLabel = true,
+    forceShowDeleteIcon = false,
+    handleRemoveInputFromParent,
+  } = props;
+
+  const [values, setValues] = useState(value ? [value] : ['']); // Track array of values
+  const [invalidInput, setInvalidInput] = useState(false);
+  const [showErrorOnFocusLoss, setShowErrorOnFocusLoss] = useState(true);
+
+  // validate on first render
+  useEffect(() => {
+    if (regex && values[values.length - 1] !== '') {
+      const invalid = !new RegExp(regex.replace(/^\/|\/$/g, '')).test(
+        `${values[values.length - 1]}`,
+      );
+      setInvalidInput(invalid);
+    }
+  }, [regex, values]);
+
+  const handleAddInput = () => {
+    setValues((prevValues) => {
+      const newValues = [...prevValues, ''];
+      onChange(newValues);
+      return newValues;
+    });
+  };
+
+  const handleChange = (inputValue: string, index: number) => {
+    let isValidInput = true;
+    if (
+      regex &&
+      inputValue !== '' &&
+      !new RegExp(regex.replace(/^\/|\/$/g, '')).test(inputValue)
+    ) {
+      isValidInput = false;
+      setInvalidInput(true);
+    } else {
+      setInvalidInput(false);
+      const newValues = [...values];
+      newValues[index] = inputValue;
+      setValues(newValues);
+      if (isArray) {
+        onChange(newValues, false, index);
+      } else {
+        onChange(newValues[0]);
+      }
+    }
+
+    if (
+      isArray &&
+      index === values.length - 1 &&
+      inputValue !== '' &&
+      isValidInput
+    ) {
+      handleAddInput();
+    }
+  };
+
+  const handleRemoveInput = (index: number) => {
+    if (forceShowDeleteIcon && handleRemoveInputFromParent) {
+      handleRemoveInputFromParent(index);
+      return;
+    }
+    setValues((prevValues) => {
+      const newValues = prevValues.filter((_, i) => i !== index);
+      onChange(newValues);
+      return newValues;
+    });
+  };
+
+  const validate = () => {
+    if (handleBlur) handleBlur();
+    setShowErrorOnFocusLoss(true);
+  };
+
+  return html`
+    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+      <div
+        class="${styles.inputGroupWrapper} ${styles[
+          className || ''
+        ]} integry-container__input"
+      >
+        <fieldset>
+          ${showLabel
+            ? html`<${Label} title=${title} description=${description}
+              isRequired=${isRequired}
+              labelTag=${isReadOnly && isChanged ? 'Changed' : ''} //>`
+            : html``}
+          ${isReadOnly &&
+          html`<span
+            class=${styles.readonlyHint}
+            data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
+          ></span>`}
+          ${values.map((inputValue, index) => {
+            const inputId = isArray ? `${id}-${index}` : id;
+            return html`
+              <div key=${index} class="${styles.inputWrapper}">
+                <${BaseInput}
+                  type="text"
+                  placeholder=${placeholder}
+                  handleChange=${(valueReceived: string) =>
+                    handleChange(valueReceived, index)}
+                  handleBlur=${validate}
+                  handleFocus=${handleFocus}
+                  value=${isArray ? inputValue : value}
+                  isReadOnly=${isReadOnly}
+                  className="${className}"
+                  ref=${ref}
+                  fieldId=${fieldId}
+                  id="${inputId}"
+                  showDeleteIcon=${forceShowDeleteIcon ||
+                  (values.length > 1 && index !== values.length - 1)}
+                  handleDeleteIconClick=${() => handleRemoveInput(index)}
+                  isButtonEnabled=${isButtonEnabled}
+                  buttonText=${buttonText}
+                  onButtonClickScript=${onButtonClickScript}
+                  buttonScriptRequiresAuthToken=${buttonScriptRequiresAuthToken}
+                  apiHandler=${apiHandler}
+                />
+              </div>
+            `;
+          })}
+          ${!hideError &&
+          (showStepValidation || showErrorOnFocusLoss || value) &&
+          invalidInput &&
+          value &&
+          html`<${ErrorMessage}>${regexErrorMessage || 'Invalid input'}<//>`}
+        </fieldset>
+      </div>
+    <//>
+  `;
+});
+
+export { Input, InputProps };

package/src/components/Input/Input/styles.module.scss

@@ -0,0 +1,14 @@
+.inputGroupWrapper {
+  fieldset {
+    padding: 0;
+    margin: 0;
+    border: none;
+    margin-bottom: 24px;
+  }
+  .readonlyHint {
+    width: 100%;
+    height: -webkit-fill-available;
+    z-index: 99;
+    position: absolute;
+  }
+}

package/src/components/Input/PasswordInput/index.ts

@@ -0,0 +1,164 @@
+import { html } from 'htm/preact';
+import { useEffect, useState } from 'preact/hooks';
+
+import { ErrorMessage } from '@/components/ErrorMessage';
+import { Hint } from '@/components/Tooltip';
+import { BaseInput } from '../BaseInput';
+import { Label } from '../../Label';
+
+import styles from './styles.module.scss';
+
+interface PasswordInputProps {
+  id: string;
+  title: string;
+  description: string;
+  placeholder: string;
+  showStepValidation?: boolean;
+  isRequired?: boolean;
+  regex: string | null;
+  regexErrorMessage: string | null;
+  value?: string;
+  onChange?: (val: string, passesRegexTest?: boolean) => void;
+  isReadOnly?: boolean;
+  isChanged?: boolean;
+}
+
+/**
+ * Input component
+ *
+ */
+const PasswordInput = (props: PasswordInputProps) => {
+  const {
+    title,
+    description,
+    placeholder,
+    value,
+    regex,
+    regexErrorMessage,
+    showStepValidation = false,
+    isRequired = false,
+    onChange = () => null,
+    isReadOnly = false,
+    isChanged = false,
+  } = props;
+
+  const [initialValue] = useState(value);
+  const [passwordShown, setPasswordShown] = useState(false);
+  const [invalidInput, setInvalidInput] = useState(false);
+  const [showErrorOnFocusLoss, setShowErrorOnFocusLoss] = useState(false);
+
+  // validate on first render
+  useEffect(() => {
+    if (regex) {
+      const invalid = !new RegExp(regex.replace(/^\/|\/$/g, '')).test(
+        `${initialValue}`,
+      );
+      setInvalidInput(invalid);
+    }
+  }, [regex]);
+
+  const handleChange = (inputValue: string) => {
+    if (regex) {
+      if (!new RegExp(regex.replace(/^\/|\/$/g, '')).test(inputValue)) {
+        onChange(inputValue, false);
+        setInvalidInput(true);
+      } else {
+        onChange(inputValue, true);
+        setInvalidInput(false);
+      }
+    } else {
+      onChange(inputValue);
+    }
+  };
+
+  const validate = () => {
+    setShowErrorOnFocusLoss(true);
+  };
+
+  const togglePasswordVisiblity = () => {
+    setPasswordShown((isShown) => !isShown);
+  };
+
+  return html`
+    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+      <div class="${styles.passwordInputWrapper}">
+        <fieldset>
+          <${Label} title=${title} description=${description}
+          isRequired=${isRequired}
+          labelTag=${isReadOnly && isChanged ? 'Changed' : ''} //>
+          ${isReadOnly &&
+          html`<span
+            class=${styles.readonlyHint}
+            data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
+          ></span>`}
+          <${BaseInput}
+            type=${passwordShown ? 'text' : 'password'}
+            placeholder=${placeholder}
+            handleChange=${handleChange}
+            handleBlur=${validate}
+            value=${value}
+            control=${() => html`
+              <div
+                class=${styles.visibilityToggle}
+                onclick=${togglePasswordVisiblity}
+              >
+                ${!passwordShown
+                  ? html` <svg
+                      width="20"
+                      height="12"
+                      viewBox="0 0 20 12"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M0.183387 6.51359C0.35582 6.72918 4.47535 11.6704 9.71968 11.6704V11.6704C14.964 11.6704 19.0836 6.72924 19.256 6.51357C19.5005 6.21515 19.5005 5.78535 19.256 5.48691V5.48615C19.0835 5.27523 14.964 0.330078 9.71968 0.330078C4.47535 0.330078 0.355766 5.27507 0.183387 5.48693C-0.0611291 5.78535 -0.0611291 6.21515 0.183387 6.51359ZM9.71968 10.0499C6.1643 10.0499 3.04855 7.1924 1.90266 6.00018C3.04632 4.80579 6.1643 1.95044 9.71968 1.95044C13.2751 1.95044 16.3908 4.80797 17.5367 6.00018C16.393 7.19458 13.2751 10.0499 9.71968 10.0499Z"
+                        fill="#999999"
+                      />
+                      <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M6.94922 8.29099C7.55668 8.89849 8.3806 9.24021 9.24022 9.24021C10.0998 9.24021 10.9237 8.89845 11.5312 8.29099C12.1387 7.68353 12.4804 6.85956 12.4804 5.99999C12.4804 5.14041 12.1387 4.31648 11.5312 3.70898C10.9238 3.10148 10.0998 2.75977 9.24022 2.75977C8.38064 2.75977 7.55672 3.10152 6.94922 3.70898C6.34172 4.31644 6 5.14041 6 5.99999C6 6.85956 6.34176 7.68349 6.94922 8.29099ZM7.7435 5.3803C7.99408 4.77431 8.58488 4.38021 9.24022 4.38021C9.67002 4.38021 10.0816 4.55031 10.3854 4.85481C10.6899 5.15856 10.86 5.57015 10.86 5.99995C10.86 6.65529 10.4659 7.24607 9.85987 7.49667C9.25464 7.74727 8.5583 7.60905 8.09509 7.14508C7.63111 6.68186 7.49289 5.98552 7.7435 5.3803Z"
+                        fill="#999999"
+                      />
+                    </svg>`
+                  : html` <svg
+                      width="20"
+                      height="12"
+                      viewBox="0 0 20 12"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M0.183387 6.51359C0.35582 6.72918 4.47535 11.6704 9.71968 11.6704V11.6704C14.964 11.6704 19.0836 6.72924 19.256 6.51357C19.5005 6.21515 19.5005 5.78535 19.256 5.48691V5.48615C19.0835 5.27523 14.964 0.330078 9.71968 0.330078C4.47535 0.330078 0.355766 5.27507 0.183387 5.48693C-0.0611291 5.78535 -0.0611291 6.21515 0.183387 6.51359ZM9.71968 10.0499C6.1643 10.0499 3.04855 7.1924 1.90266 6.00018C3.04632 4.80579 6.1643 1.95044 9.71968 1.95044C13.2751 1.95044 16.3908 4.80797 17.5367 6.00018C16.393 7.19458 13.2751 10.0499 9.71968 10.0499Z"
+                        fill="#333333"
+                      />
+                      <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M6.94922 8.29099C7.55668 8.89849 8.3806 9.24021 9.24022 9.24021C10.0998 9.24021 10.9237 8.89845 11.5312 8.29099C12.1387 7.68353 12.4804 6.85956 12.4804 5.99999C12.4804 5.14041 12.1387 4.31648 11.5312 3.70898C10.9238 3.10148 10.0998 2.75977 9.24022 2.75977C8.38064 2.75977 7.55672 3.10152 6.94922 3.70898C6.34172 4.31644 6 5.14041 6 5.99999C6 6.85956 6.34176 7.68349 6.94922 8.29099ZM7.7435 5.3803C7.99408 4.77431 8.58488 4.38021 9.24022 4.38021C9.67002 4.38021 10.0816 4.55031 10.3854 4.85481C10.6899 5.15856 10.86 5.57015 10.86 5.99995C10.86 6.65529 10.4659 7.24607 9.85987 7.49667C9.25464 7.74727 8.5583 7.60905 8.09509 7.14508C7.63111 6.68186 7.49289 5.98552 7.7435 5.3803Z"
+                        fill="#333333"
+                      />
+                    </svg>`}
+              </div>
+            `}
+            isReadOnly=${isReadOnly}
+          ><//>
+          ${showStepValidation &&
+          isRequired &&
+          !value &&
+          html`<${ErrorMessage}>Please enter a value<//>`}
+          ${(showStepValidation || showErrorOnFocusLoss || initialValue) &&
+          invalidInput &&
+          value &&
+          html`<${ErrorMessage}>${regexErrorMessage || 'Invalid input'}<//>`}
+        </fieldset>
+      </div>
+    <//>
+  `;
+};
+
+export { PasswordInput, PasswordInputProps };

package/src/components/Input/PasswordInput/styles.module.scss

@@ -0,0 +1,37 @@
+.passwordInputWrapper {
+  fieldset {
+    padding: 0;
+    margin: 0;
+    border: none;
+  }
+  .innerWrap {
+    position: relative;
+  }
+  input {
+    padding-right: 36px;
+  }
+  .readonlyHint {
+    width: 100%;
+    height: -webkit-fill-available;
+    z-index: 99;
+    position: absolute;
+  }
+}
+
+.visibilityToggle {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  bottom: 0;
+  margin: 0 auto;
+  z-index: 999;
+  svg {
+    cursor: pointer;
+    width: 20px;
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+}

package/src/components/Input/index.ts

@@ -0,0 +1,7 @@
+import { Input, InputProps } from './Input';
+import { DateInput, DateInputProps } from './DateInput';
+import { PasswordInput, PasswordInputProps } from './PasswordInput';
+
+export { Input, InputProps };
+export { DateInput, DateInputProps };
+export { PasswordInput, PasswordInputProps };

package/src/components/Label/index.ts

@@ -0,0 +1,61 @@
+import { html } from 'htm/preact';
+import { Tag } from '@/components/Tag';
+
+import styles from './styles.module.scss';
+
+interface LabelProps {
+  title: string;
+  description?: string;
+  isRequired?: boolean;
+  labelTag?: string;
+  allowRefresh?: boolean;
+  handleRefreshClick?: () => void;
+}
+
+const Label = (props: LabelProps) => {
+  const { title, description, isRequired = false, labelTag = '', allowRefresh = false, handleRefreshClick } = props;
+  
+  const onClickRefresh = (): void => {
+    if (handleRefreshClick) {
+      handleRefreshClick();
+    }
+  }
+  
+  return html`
+    <div class="${styles.label} integry-container__label">
+      <label class="${styles.subLabel}">
+        <div>
+          ${title}
+          ${isRequired && html`<span class=${styles.required}>*</span>`}
+          ${false && labelTag &&
+            html`
+              <span class=${styles.tagSpan}><${Tag}
+                label=${labelTag}
+              /></span>
+            `}
+          ${allowRefresh && 
+            html`
+                <svg class=${styles.refreshIcon} fill="#8c8c8c" height="12px" width="12px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+                  viewBox="0 0 489.698 489.698" xml:space="preserve" onclick=${onClickRefresh}>
+                <g>
+                  <g>
+                    <path d="M468.999,227.774c-11.4,0-20.8,8.3-20.8,19.8c-1,74.9-44.2,142.6-110.3,178.9c-99.6,54.7-216,5.6-260.6-61l62.9,13.1
+                      c10.4,2.1,21.8-4.2,23.9-15.6c2.1-10.4-4.2-21.8-15.6-23.9l-123.7-26c-7.2-1.7-26.1,3.5-23.9,22.9l15.6,124.8
+                      c1,10.4,9.4,17.7,19.8,17.7c15.5,0,21.8-11.4,20.8-22.9l-7.3-60.9c101.1,121.3,229.4,104.4,306.8,69.3
+                      c80.1-42.7,131.1-124.8,132.1-215.4C488.799,237.174,480.399,227.774,468.999,227.774z"/>
+                    <path d="M20.599,261.874c11.4,0,20.8-8.3,20.8-19.8c1-74.9,44.2-142.6,110.3-178.9c99.6-54.7,216-5.6,260.6,61l-62.9-13.1
+                      c-10.4-2.1-21.8,4.2-23.9,15.6c-2.1,10.4,4.2,21.8,15.6,23.9l123.8,26c7.2,1.7,26.1-3.5,23.9-22.9l-15.6-124.8
+                      c-1-10.4-9.4-17.7-19.8-17.7c-15.5,0-21.8,11.4-20.8,22.9l7.2,60.9c-101.1-121.2-229.4-104.4-306.8-69.2
+                      c-80.1,42.6-131.1,124.8-132.2,215.3C0.799,252.574,9.199,261.874,20.599,261.874z"/>
+                  </g>
+                </g>
+                </svg>
+            `}
+        </div>
+        ${description && html`<div>${description}</div>`}
+      </label>
+    </div>
+  `;
+};
+
+export { Label, LabelProps };

package/src/components/Label/styles.module.scss

@@ -0,0 +1,41 @@
+.label {
+  .subLabel {
+    display: block;
+    margin-bottom: 0;
+
+    > div:first-child {
+      color: #000;
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      margin-bottom: 3px;
+      display: flex;
+      flex-direction: row;  
+      align-items: center;
+
+      .tagSpan {
+        margin-left: 10px;
+      }
+      .refreshIcon {
+        margin-left: 8px;
+        cursor: pointer;
+      }
+    }
+    > div:nth-child(2) {
+      color: var(--black-and-grey-draft-and-tooltip-desc, #999);
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      margin-bottom: 8px;
+    }
+  }
+  .required {
+    color: #333;
+    font-size: 16px;
+    margin-left: 2px;
+  }
+}