@dta-au/civictheme-twig 1.13.1

package/components/02-molecules/video-player/video-player.twig

@@ -0,0 +1,130 @@
+{#
+/**
+ * @file
+ * CivicTheme Video Player component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - title: [string] Button title.
+ * - poster: [string] Optional video poster URL.
+ * - width: [string] Video width.
+ * - height: [string] Video height.
+ * - vertical_spacing: [string] Controls vertical spacing (top, bottom, or both).
+ * - modifier_class: [string] Additional CSS classes.
+ * - sources: [array] Video sources:
+ *   Each item contains:
+ *   - url: [string] URL for the video source.
+ *   - type: [string] Type name like 'video/mp4'.
+ * - embedded_source: [string] Iframe URL.
+ * - raw_source: [string] HTML of raw embedded video player.
+ * - transcript_link: [object,null] Video transcript link.
+ *   Each property contains:
+ *   - text: [string] Button text.
+ *   - title: [string] Button title.
+ *   - url: [string] URL for the link button.
+ *   - is_new_window: [boolean] Whether to open in a new window.
+ *   - is_external: [boolean] Whether the link is external.
+ *   - attributes: [object] Additional HTML attributes.
+ * - transcript_content: [object,null] HTML of transcript content to display in a collapsible.
+ * - transcript_expand_text: [string] Transcript collasible text to open. E.g. "Show transcript".
+ * - transcript_collapse_text: [string] Transcript collasible text to close. E.g. "Hide transcript".
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Blocks:
+ * - video_block
+ * - video_transcript_block
+ */
+#}
+
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing--%s'|format(vertical_spacing) : '' %}
+{% set modifier_class = '%s %s %s'|format(theme_class, vertical_spacing_class, modifier_class|default('')) %}
+{% set attributes = attributes is defined and attributes is not null ? attributes : create_attribute({}) %}
+
+{% if sources is not empty or embedded_source is not empty or raw_source is defined %}
+  <div class="ct-video-player {{ modifier_class -}}">
+    {% block video_block %}
+      <div class="ct-video-player__wrapper">
+        {% if sources is not empty %}
+          {% include '@atoms/video/video.twig' with {
+            sources: sources,
+            poster: poster,
+            width: width,
+            height: height,
+            has_controls: true,
+          } only %}
+        {% elseif embedded_source is not empty %}
+          {% do attributes.setAttribute('allowfullscreen', '').setAttribute('data-chromatic', 'ignore') %}
+          {% if title is not empty %}
+            {% do attributes.setAttribute('title', title) %}
+          {% endif %}
+          {% include '@atoms/iframe/iframe.twig' with {
+            url: embedded_source,
+            attributes: attributes,
+            width: width,
+            height: height,
+          } only %}
+        {% else %}
+          {{ raw_source }}
+        {% endif %}
+      </div>
+    {% endblock %}
+
+    {% block video_transcript_block %}
+      {% if transcript_link is not empty or transcript_content is not empty %}
+        <div class="ct-video-player__transcript-block">
+          {% if transcript_link.url is defined and transcript_link.url is not empty %}
+            <div class="ct-video-player__links">
+              <div class="ct-video-player__links-transcript">
+                {% include '@atoms/link/link.twig' with {
+                  theme: theme,
+                  text: transcript_link.text,
+                  title: transcript_link.title,
+                  url: transcript_link.url,
+                  is_new_window: transcript_link.is_new_window,
+                  is_external: transcript_link.is_external,
+                  attributes: transcript_link.attributes,
+                  icon: 'eye',
+                  icon_placement: 'before',
+                  size: 'small',
+                } only %}
+              </div>
+            </div>
+          {% endif %}
+          {% if transcript_content is not empty %}
+            <div
+              class="ct-video-player__transcript"
+              data-collapsible
+              data-collapsible-collapsed
+              data-collapsible-duration="250"
+            >
+              {% set transcript_toggle_html %}
+                <span class="ct-video-player__transcript-trigger-expand">
+                  {{- transcript_expand_text|default('Show transcript') -}}
+                </span>
+                <span class="ct-video-player__transcript-trigger-collapse">
+                  {{- transcript_collapse_text|default('Hide transcript') -}}
+                </span>
+              {% endset %}
+              {% include '@atoms/button/button.twig' with {
+                theme: theme,
+                type: 'tertiary',
+                text: transcript_toggle_html,
+                attributes: create_attribute({'data-collapsible-trigger': ''}),
+                modifier_class: 'ct-video-player__transcript-toggle',
+              } only %}
+              <div class="ct-video-player__transcript-panel" data-collapsible-panel>
+                <div class="ct-video-player__transcript-panel-inner">
+                  {% include '@molecules/basic-content/basic-content.twig' with {
+                    theme: theme,
+                    content: transcript_content,
+                  } only %}
+                </div>
+              </div>
+            </div>
+          {% endif %}
+        </div>
+      {% endif %}
+    {% endblock %}
+  </div>
+{% endif %}

package/components/03-organisms/alert/__snapshots__/alert.test.js.snap

@@ -0,0 +1,356 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Alert Component does not render when description is empty 1`] = `
+<div>
+  
+
+
+
+</div>
+`;
+
+exports[`Alert Component renders with correct icon for alert type 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-alert ct-theme-light ct-alert--success "
+    data-alert-id=""
+    data-alert-type="success"
+    data-component-name="ct-alert"
+    role="alert"
+  >
+    
+    
+    <div
+      class="container"
+    >
+      
+      
+      <div
+        class="row"
+      >
+        
+        
+        <div
+          class="ct-alert__title col-xxs-12 col-m-3"
+        >
+          
+                      
+          <span
+            class="ct-alert__icon"
+          >
+            
+              
+            <svg
+              aria-hidden="true"
+              class="ct-icon ct-icon--size-regular"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              
+
+              <path
+                d="M19.9912 2.00195C19.8599 2.00188 19.7298 2.02769 19.6084 2.07792C19.4871 2.12815 19.3768 2.20181 19.2839 2.29468C19.1911 2.38755 19.1174 2.49782 19.0672 2.61918C19.017 2.74054 18.9911 2.87061 18.9912 3.00195V3.63867C18.1478 4.68438 17.0819 5.52887 15.871 6.11067C14.66 6.69248 13.3346 6.99696 11.9912 7.00195H5.99121C5.19583 7.00282 4.43327 7.31917 3.87085 7.88159C3.30843 8.44401 2.99208 9.20657 2.99121 10.002V12.002C2.99208 12.7973 3.30843 13.5599 3.87085 14.1223C4.43327 14.6847 5.19583 15.0011 5.99121 15.002H6.475L4.07227 20.6084C4.00698 20.7604 3.98047 20.9263 3.99512 21.0911C4.00978 21.256 4.06514 21.4146 4.15624 21.5528C4.24734 21.6909 4.37133 21.8043 4.51706 21.8827C4.6628 21.9611 4.82572 22.0021 4.99121 22.002H8.99121C9.18696 22.0021 9.37843 21.9446 9.54182 21.8368C9.7052 21.729 9.83329 21.5755 9.91016 21.3955L12.6339 15.04C13.8646 15.1303 15.0636 15.472 16.157 16.0439C17.2505 16.6158 18.215 17.4058 18.9912 18.365V19.002C18.9912 19.2672 19.0966 19.5215 19.2841 19.7091C19.4716 19.8966 19.726 20.002 19.9912 20.002C20.2564 20.002 20.5108 19.8966 20.6983 19.7091C20.8859 19.5215 20.9912 19.2672 20.9912 19.002V3.00195C20.9913 2.87061 20.9655 2.74054 20.9152 2.61918C20.865 2.49782 20.7914 2.38755 20.6985 2.29468C20.6056 2.2018 20.4953 2.12815 20.374 2.07792C20.2526 2.02769 20.1226 2.00188 19.9912 2.00195ZM5.99121 13.002C5.72605 13.0018 5.4718 12.8964 5.2843 12.7089C5.0968 12.5214 4.99139 12.2671 4.99121 12.002V10.002C4.99139 9.73679 5.09681 9.48254 5.2843 9.29505C5.4718 9.10755 5.72605 9.00213 5.99121 9.00195H6.99121V13.002H5.99121ZM8.33203 20.002H6.50781L8.65039 15.002H10.4746L8.33203 20.002ZM18.9912 15.5238C17.0195 13.8994 14.5459 13.0082 11.9912 13.0019H8.99121V9.0019H11.9912C14.5459 8.99537 17.0195 8.10406 18.9912 6.47956V15.5238Z"
+              />
+              
+
+            </svg>
+            
+            
+          </span>
+          
+                    
+        
+        </div>
+        
+
+        
+        <div
+          class="ct-alert__summary col-xxs-12 col-m-9"
+        >
+          
+          This is a success alert.
+          
+
+  
+          <button
+            _keys="id data-alert-dismiss-trigger title"
+            class="ct-button ct-theme-light ct-button--tertiary ct-button--button ct-button--regular   ct-alert__dismiss-button"
+            data-alert-dismiss-trigger=""
+            data-component-name="button"
+            id="dismiss-alert-"
+            title="close success alert"
+          >
+            <svg
+              aria-hidden="true"
+              class="ct-icon ct-button__icon"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              
+
+              <path
+                d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z"
+              />
+              
+
+            </svg>
+            
+
+          </button>
+          
+        
+        </div>
+        
+      
+      </div>
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Alert Component renders with optional attributes 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-alert ct-theme-dark ct-alert--warning custom-class"
+    data-alert-id="alert-1"
+    data-alert-type="warning"
+    data-component-name="ct-alert"
+    data-test="true"
+    role="alert"
+  >
+    
+    
+    <div
+      class="container"
+    >
+      
+      
+      <div
+        class="row"
+      >
+        
+        
+        <div
+          class="ct-alert__title col-xxs-12 col-m-3"
+        >
+          
+                      
+          <span
+            class="ct-alert__icon"
+          >
+            
+              
+            <svg
+              aria-hidden="true"
+              class="ct-icon ct-icon--size-regular"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              
+
+              <path
+                d="M12.0005 16C11.8027 16 11.6093 16.0587 11.4449 16.1686C11.2804 16.2784 11.1523 16.4346 11.0766 16.6173C11.0009 16.8001 10.9811 17.0011 11.0197 17.1951C11.0583 17.3891 11.1535 17.5673 11.2933 17.7071C11.4332 17.847 11.6114 17.9422 11.8054 17.9808C11.9993 18.0194 12.2004 17.9996 12.3831 17.9239C12.5659 17.8482 12.722 17.72 12.8319 17.5556C12.9418 17.3911 13.0005 17.1978 13.0005 17C13.0005 16.7348 12.8951 16.4805 12.7076 16.2929C12.52 16.1054 12.2657 16 12.0005 16ZM22.6705 17.47L14.6205 3.47003C14.3603 3.00354 13.9802 2.61498 13.5196 2.3445C13.0591 2.07401 12.5346 1.9314 12.0005 1.9314C11.4663 1.9314 10.9419 2.07401 10.4813 2.3445C10.0207 2.61498 9.64065 3.00354 9.38046 3.47003L1.38046 17.47C1.11125 17.924 0.966598 18.441 0.9611 18.9688C0.955602 19.4966 1.08945 20.0166 1.34914 20.4761C1.60883 20.9356 1.98516 21.3185 2.44014 21.5861C2.89512 21.8536 3.41264 21.9964 3.94046 22H20.0605C20.5925 22.0053 21.1164 21.8689 21.5784 21.6049C22.0403 21.341 22.4238 20.9589 22.6894 20.4978C22.9551 20.0368 23.0933 19.5134 23.09 18.9814C23.0866 18.4493 22.9418 17.9277 22.6705 17.47ZM20.9405 19.47C20.8528 19.626 20.7249 19.7556 20.5701 19.8453C20.4154 19.935 20.2393 19.9815 20.0605 19.98H3.94046C3.76157 19.9815 3.58556 19.935 3.43077 19.8453C3.27599 19.7556 3.14811 19.626 3.06046 19.47C2.97269 19.318 2.92648 19.1456 2.92648 18.97C2.92648 18.7945 2.97269 18.622 3.06046 18.47L11.0605 4.47003C11.1444 4.30623 11.2719 4.16876 11.4289 4.07277C11.5859 3.97678 11.7664 3.92599 11.9505 3.92599C12.1345 3.92599 12.315 3.97678 12.472 4.07277C12.629 4.16876 12.7565 4.30623 12.8405 4.47003L20.8905 18.47C20.9897 18.6199 21.0467 18.7937 21.0555 18.9732C21.0643 19.1527 21.0245 19.3312 20.9405 19.49V19.47ZM12.0005 8.00003C11.7352 8.00003 11.4809 8.10538 11.2933 8.29292C11.1058 8.48046 11.0005 8.73481 11.0005 9.00003V13C11.0005 13.2652 11.1058 13.5196 11.2933 13.7071C11.4809 13.8947 11.7352 14 12.0005 14C12.2657 14 12.52 13.8947 12.7076 13.7071C12.8951 13.5196 13.0005 13.2652 13.0005 13V9.00003C13.0005 8.73481 12.8951 8.48046 12.7076 8.29292C12.52 8.10538 12.2657 8.00003 12.0005 8.00003Z"
+              />
+              
+
+            </svg>
+            
+            
+          </span>
+          
+                    Warning Alert
+        
+        </div>
+        
+
+        
+        <div
+          class="ct-alert__summary col-xxs-12 col-m-9"
+        >
+          
+          This is a warning alert.
+          
+
+  
+          <button
+            _keys="id data-alert-dismiss-trigger title"
+            class="ct-button ct-theme-dark ct-button--tertiary ct-button--button ct-button--regular   ct-alert__dismiss-button"
+            data-alert-dismiss-trigger=""
+            data-component-name="button"
+            id="dismiss-alert-alert-1"
+            title="close warning alert"
+          >
+            <svg
+              aria-hidden="true"
+              class="ct-icon ct-button__icon"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              
+
+              <path
+                d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z"
+              />
+              
+
+            </svg>
+            
+
+          </button>
+          
+        
+        </div>
+        
+      
+      </div>
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Alert Component renders with required attributes 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-alert ct-theme-light ct-alert--information "
+    data-alert-id=""
+    data-alert-type="information"
+    data-component-name="ct-alert"
+    role="alert"
+  >
+    
+    
+    <div
+      class="container"
+    >
+      
+      
+      <div
+        class="row"
+      >
+        
+        
+        <div
+          class="ct-alert__title col-xxs-12 col-m-3"
+        >
+          
+                      
+          <span
+            class="ct-alert__icon"
+          >
+            
+              
+            <svg
+              aria-hidden="true"
+              class="ct-icon ct-icon--size-regular"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              
+
+              <path
+                d="M12 11C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4804 16.8946 11.7348 17 12 17C12.2652 17 12.5196 16.8946 12.7071 16.7071C12.8946 16.5196 13 16.2652 13 16V12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11ZM12.38 7.08C12.1365 6.97998 11.8635 6.97998 11.62 7.08C11.4973 7.12759 11.3851 7.19896 11.29 7.29C11.2017 7.3872 11.1306 7.49882 11.08 7.62C11.024 7.73868 10.9966 7.86882 11 8C10.9992 8.13161 11.0245 8.26207 11.0742 8.38391C11.124 8.50574 11.1973 8.61656 11.29 8.71C11.3872 8.79833 11.4988 8.86936 11.62 8.92C11.7715 8.98224 11.936 9.00632 12.099 8.99011C12.2619 8.97391 12.4184 8.91792 12.5547 8.82707C12.691 8.73622 12.8029 8.61328 12.8805 8.46907C12.9582 8.32486 12.9992 8.16378 13 8C12.9963 7.73523 12.8927 7.48163 12.71 7.29C12.6149 7.19896 12.5028 7.12759 12.38 7.08ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z"
+              />
+              
+
+            </svg>
+            
+            
+          </span>
+          
+                    
+        
+        </div>
+        
+
+        
+        <div
+          class="ct-alert__summary col-xxs-12 col-m-9"
+        >
+          
+          This is an info alert.
+          
+
+  
+          <button
+            _keys="id data-alert-dismiss-trigger title"
+            class="ct-button ct-theme-light ct-button--tertiary ct-button--button ct-button--regular   ct-alert__dismiss-button"
+            data-alert-dismiss-trigger=""
+            data-component-name="button"
+            id="dismiss-alert-"
+            title="close information alert"
+          >
+            <svg
+              aria-hidden="true"
+              class="ct-icon ct-button__icon"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              
+
+              <path
+                d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z"
+              />
+              
+
+            </svg>
+            
+
+          </button>
+          
+        
+        </div>
+        
+      
+      </div>
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;