@kws3/ui 1.6.9 → 1.7.2

package/forms/PasswordValidator/validatePassword.js

@@ -7,7 +7,7 @@ export default function (password, options) {
   result.items = (options || []).slice().map((_opt) => {
     const opt = Object.assign({}, _opt);
     if (opt && opt.active) {
-      if (opt.name == "kws_pv_min_length") {
+      if (opt.name === "kws_pv_min_length") {
         if (password && password.length >= opt.value) {
           opt.passed = true;
         }
@@ -24,7 +24,7 @@ export default function (password, options) {
   });
 
   result.overall =
-    result.items.filter((el) => el.passed).length == result.items.length;
+    result.items.filter((el) => el.passed).length === result.items.length;
 
   return result;
 }

package/forms/actions.js

@@ -3,6 +3,7 @@ import flatpickr from "flatpickr";
 function createFlatpickrAction(defaultOpts, hooks) {
   return function (
     node,
+    // eslint-disable-next-line no-unused-vars
     { opts, value, placeholder, klass, style, disabled, color }
   ) {
     const _opts = {};
@@ -49,17 +50,19 @@ function createFlatpickrAction(defaultOpts, hooks) {
 
     function applyColorClass(instance, color) {
       let contains = false;
-      instance.calendarContainer.classList.forEach((c) => {
-        if (c.charAt(3).toLowerCase() == "is-") {
-          contains = c;
+      if (instance && instance.calendarContainer) {
+        instance.calendarContainer.classList.forEach((c) => {
+          if (c.charAt(3).toLowerCase() === "is-") {
+            contains = c;
+          }
+        });
+
+        if (contains) {
+          instance.calendarContainer.classList.remove(contains);
         }
-      });
 
-      if (contains) {
-        instance.calendarContainer.classList.remove(contains);
+        instance.calendarContainer.classList.add("is-" + color);
       }
-
-      instance.calendarContainer.classList.add("is-" + color);
     }
 
     function applyInitialInputAttributes(instance, { style }) {

package/forms/colorpicker/Colorpicker.js

@@ -255,7 +255,9 @@ export default (function (win, doc) {
 
       // get mouse/finger coordinate
       function point(el, e) {
+        // eslint-disable-next-line no-extra-boolean-cast
         var x = !!e.touches ? e.touches[0].pageX : e.pageX,
+          // eslint-disable-next-line no-extra-boolean-cast
           y = !!e.touches ? e.touches[0].pageY : e.pageY,
           left = offset(el).l,
           top = offset(el).t;
@@ -396,18 +398,21 @@ export default (function (win, doc) {
           H_point_H = size(H_point).h,
           SV_point_W = SV_point_size.w,
           SV_point_H = SV_point_size.h;
+
+        function click(e) {
+          var t = e.target,
+            is_target = t === target || closest(t, target) === target;
+          if (is_target) {
+            create();
+          } else {
+            $.exit();
+          }
+          trigger(is_target ? "enter" : "exit", [$]);
+        }
+
         if (first) {
           picker.style.left = picker.style.top = "-9999px";
-          function click(e) {
-            var t = e.target,
-              is_target = t === target || closest(t, target) === target;
-            if (is_target) {
-              create();
-            } else {
-              $.exit();
-            }
-            trigger(is_target ? "enter" : "exit", [$]);
-          }
+
           if (events !== false) {
             on(events, target, click);
           }
@@ -430,7 +435,7 @@ export default (function (win, doc) {
           SV_point.style.right = SV_W - SV_point_W / 2 - SV_W * +HSV[1] + "px";
           SV_point.style.top = SV_H - SV_point_H / 2 - SV_H * +HSV[2] + "px";
         };
-        $.exit = function (e) {
+        $.exit = function () {
           if (visible()) {
             visible().removeChild(picker);
             $.visible = false;
@@ -443,8 +448,8 @@ export default (function (win, doc) {
           return $;
         };
         function color(e) {
-          var a = HSV2RGB(HSV),
-            b = HSV2RGB([HSV[0], 1, 1]);
+          //var a = HSV2RGB(HSV),
+          var b = HSV2RGB([HSV[0], 1, 1]);
           SV.style.backgroundColor = "rgb(" + b.join(",") + ")";
           set_data(HSV);
           prevent(e);

package/forms/colorpicker/Colorpicker.svelte

@@ -116,7 +116,7 @@ This property can be bound to, to fetch the current colour, Default: `"000000"`
     e && e.target && e.target.select();
   }
 
-  function onDragOver(e) {
+  function onDragOver() {
     if (!readonly && !disabled) {
       dragover = true;
     }
@@ -131,7 +131,7 @@ This property can be bound to, to fetch the current colour, Default: `"000000"`
     return false;
   }
 
-  function onDragLeave(e) {
+  function onDragLeave() {
     if (!readonly && !disabled) {
       dragover = false;
     }

package/forms/select/MultiSelect.svelte

@@ -22,9 +22,7 @@ this property of each object will be returned as the value, Default: `"id"`
   @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
   @param {string} [selected_icon="check"] - Icon used to mark selected items in dropdown list, Default: `"check"`
-  @param {boolean} [summary_mode=false] - When activated, it will show the number of selected items.
-
-Instead of listing all the selected items inside the input., Default: `false`
+  @param {boolean} [summary_mode=false] - Shows only the number of items selected, instead of listing all the selected items in the input., Default: `false`
   @param {string} [no_options_msg="No matching options"] - Message to display when no matching options are found, Default: `"No matching options"`
   @param {string} [remove_btn_tip="Remove"] - Tooltip text for Remove Item button. This `string` will precede the selected Item Name in the tooltip., Default: `"Remove"`
   @param {string} [remove_all_tip="Remove all"] - Tooltip text for the Clear All button, Default: `"Remove all"`
@@ -66,7 +64,7 @@ Default value: `<span>{option[search_key] || option}</span>`
         </li>
         <li
           class="tag is-{size} summary-text  is-{color || 'primary'} is-light">
-          Item{selectedOptions.length == 1 ? "" : "s"} selected
+          Item{selectedOptions.length === 1 ? "" : "s"} selected
         </li>
       {:else}
         {#each selectedOptions as tag}
@@ -225,9 +223,7 @@ Default value: `<span>{option[search_key] || option}</span>`
    */
   export let selected_icon = "check";
   /**
-   * When activated, it will show the number of selected items.
-   *
-   * Instead of listing all the selected items inside the input.
+   * Shows only the number of items selected, instead of listing all the selected items in the input.
    */
   export let summary_mode = false;
   /**
@@ -298,9 +294,10 @@ Default value: `<span>{option[search_key] || option}</span>`
   $: _placeholder = hasValue ? "" : placeholder;
 
   //ensure search_key and value_key are no empty strings
-  $: used_search_key = search_key && search_key != "" ? search_key : "name";
-  $: used_value_key = value_key && value_key != "" ? value_key : "id";
+  $: used_search_key = search_key && search_key !== "" ? search_key : "name";
+  $: used_value_key = value_key && value_key !== "" ? value_key : "id";
 
+  // eslint-disable-next-line no-redeclare
   $: shouldShowClearAll = hasValue;
 
   $: options, normaliseOptions();
@@ -322,7 +319,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   //TODO: optimise isSelected function
   $: isSelected = (option) => {
     if (single) return matchesValue(value, option);
-    if (!(value && value.length > 0) || value == "") return false;
+    if (!(value && value.length > 0) || value === "") return false;
     // nothing is selected if `value` is the empty array or string
     else return value.some((v) => matchesValue(v, option));
   };
@@ -384,13 +381,13 @@ Default value: `<span>{option[search_key] || option}</span>`
   function fillSelectedOptions() {
     if (single) {
       selectedOptions = normalisedOptions.filter(
-        (v) => `${v[used_value_key]}` == `${value}`
+        (v) => `${v[used_value_key]}` === `${value}`
       );
       setSingleVisibleValue();
     } else {
       selectedOptions = normalisedOptions
         .filter(
-          (v) => value && value.some((vl) => `${v[used_value_key]}` == `${vl}`)
+          (v) => value && value.some((vl) => `${v[used_value_key]}` === `${vl}`)
         )
         .sort(
           (a, b) =>
@@ -440,7 +437,8 @@ Default value: `<span>{option[search_key] || option}</span>`
     if (!isAlreadySelected && !single && (max === null || value.length < max)) {
       //attach to value array while filtering out invalid values
       value = [...value, token[used_value_key]].filter((v) => {
-        return normalisedOptions.filter((nv) => nv[used_value_key] == v).length;
+        return normalisedOptions.filter((nv) => nv[used_value_key] === v)
+          .length;
       });
       searchText = ""; // reset search string on selection
 

package/helpers/Dialog/Dialog.svelte

@@ -30,15 +30,16 @@ For internal use only - not part of config object, Default: `""`
 <CardModal title={titleToUse} {size} {is_active} closable={false}>
   <div slot="default">
     <div class="columns is-vcentered is-mobile">
-      {#if icon && icon != ""}
+      {#if icon && icon !== ""}
         <div class="column is-narrow">
           <Icon {icon} size={icon_size} color={icon_color} />
         </div>
       {/if}
       <div class="column">
         <div>
+          <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
           <span class="is-block">{@html _text}</span>
-          {#if _type == "prompt"}
+          {#if _type === "prompt"}
             <div class="field" style="margin-top:0.5rem;">
               <div class="control">
                 <input
@@ -50,7 +51,7 @@ For internal use only - not part of config object, Default: `""`
               </div>
             </div>
           {/if}
-          {#if help_text && help_text != ""}
+          {#if help_text && help_text !== ""}
             <span class="help">{help_text}</span>
           {/if}
         </div>
@@ -59,20 +60,24 @@ For internal use only - not part of config object, Default: `""`
   </div>
   <div slot="footer" style="width:100%">
     <div class="field is-grouped is-grouped-right">
-      {#if _type != "alert"}
+      {#if _type !== "alert"}
         <div class="control">
-          <button on:click={cancel} class="button is-{cancel_button_color}"
-            >{#if cancel_button_icon != ""}<Icon
+          <button
+            type="button"
+            on:click={cancel}
+            class="button is-{cancel_button_color}"
+            >{#if cancel_button_icon !== ""}<Icon
                 icon={cancel_button_icon}
                 size="small" />{/if}<span>{cancel_button_text}</span></button>
         </div>
       {/if}
       <div class="control">
         <button
+          type="button"
           bind:this={ok_button}
           on:click={ok}
           class="button is-{ok_button_color}"
-          >{#if ok_button_icon != ""}<Icon
+          >{#if ok_button_icon !== ""}<Icon
               icon={ok_button_icon}
               size="small" />{/if}<span>{ok_button_text}</span></button>
       </div>
@@ -170,7 +175,7 @@ For internal use only - not part of config object, Default: `""`
     input_box,
     ok_button;
 
-  $: titleToUse = title != "" ? title : capitaliseFirstLetter(_type);
+  $: titleToUse = title !== "" ? title : capitaliseFirstLetter(_type);
 
   /**
    * Determines the type of Dialog.
@@ -204,13 +209,10 @@ For internal use only - not part of config object, Default: `""`
     switch (_type) {
       case "alert":
         return;
-        break;
       case "confirm":
         return true;
-        break;
       case "prompt":
         return input_value;
-        break;
     }
   }
 
@@ -218,13 +220,10 @@ For internal use only - not part of config object, Default: `""`
     switch (_type) {
       case "alert":
         return;
-        break;
       case "confirm":
         return false;
-        break;
       case "prompt":
         return null;
-        break;
     }
   }
 

package/helpers/Divider.svelte

@@ -0,0 +1,55 @@
+<!--
+  @component
+
+
+  @param {'' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link' | 'dark' | 'light'} [color=""] - Color of the Divider lines, Default: `""`
+  @param {boolean} [light=false] - Whether to display a lighter variant of the `color`, Default: `false`
+  @param {boolean} [vertical=false] - Whether to orient the Divider vertically. Vertical Divider take up the height of their parent., Default: `false`
+  @param {'center' | 'left' | 'right' | 'top' | 'bottom'} [alignment="center"] - Alignment of the Divider text. `top`/`left` and `bottom`/`right` are analogous for vertical Dividers, Default: `"center"`
+  @param {string} [style=""] - Inline CSS styles for the Divider, Default: `""`
+  @param {string} [class=""] - CSS class for Divider, Default: `""`
+
+  ### Slots
+  - `<slot name="default"  />` - Default slot for text inside Divider
+
+-->
+
+<div
+  class:is-vertical={vertical}
+  class:is-light={light}
+  class="kws-divider is-{alignment} is-{color} {klass}"
+  {style}>
+  <!--Default slot for text inside Divider--><slot />
+</div>
+
+<script>
+  /**
+   * Color of the Divider lines
+   * @type {'' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link' | 'dark' | 'light'}
+   */
+  export let color = "",
+    /**
+     * Whether to display a lighter variant of the `color`
+     */
+    light = false,
+    /**
+     * Whether to orient the Divider vertically. Vertical Divider take up the height of their parent.
+     */
+    vertical = false,
+    /**
+     * Alignment of the Divider text. `top`/`left` and `bottom`/`right` are analogous for vertical Dividers
+     * @type {'center' | 'left' | 'right' | 'top' | 'bottom'}
+     */
+    alignment = "center",
+    /**
+     * Inline CSS styles for the Divider
+     */
+    style = "";
+
+  /**
+   * CSS class for Divider
+   * @type {string}
+   */
+  let klass = "";
+  export { klass as class };
+</script>

package/helpers/FloatingUI/Floatie.svelte

@@ -18,12 +18,13 @@
 
 -->
 
-{#if variant == "snackbar"}
+{#if variant === "snackbar"}
   <div class="snackbar is-{color} {light ? 'is-light' : ''}">
     <div class="text">{message}</div>
     <div class="action">
       {#each buttonsToRender as { text, color: text_color, click }}
         <button
+          type="button"
           class="button is-{color} has-text-{text_color}"
           on:click={click}
           on:click={destroy}>{text}</button>
@@ -33,7 +34,7 @@
       <div class="floatie-progress" style="animation-duration:{duration}ms" />
     {/if}
   </div>
-{:else if variant == "toast"}
+{:else if variant === "toast"}
   <div class="toast is-{color} {light ? 'is-light' : ''}">
     {message}
   </div>
@@ -43,12 +44,13 @@
       <svelte:component this={component} {...$$props} on:destroy={destroy} />
     {:else}
       {#if dismissable}
-        <button class="delete" on:click={destroy} />
+        <button type="button" class="delete" on:click={destroy} />
       {/if}
       {#if title}
         <h4 class="title is-5 is-marginless">{title}</h4>
       {/if}
 
+      <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
       <p>{@html message}</p>
 
       {#if !persistent}
@@ -109,11 +111,15 @@
     /**
      * Callback function call before close event
      */
-    beforeClose = (props) => {},
+    beforeClose = (props) => {
+      props;
+    },
     /**
      * Callback function call after close event
      */
-    afterClose = (props) => {},
+    afterClose = (props) => {
+      props;
+    },
     /**
      * List of buttons to show in snackbar
      */

package/helpers/FloatingUI/index.js

@@ -62,7 +62,7 @@ export const FloatiesStore = (() => {
         newItem.variant = "notification";
       }
 
-      if (!newItem.position || newItem.position == "") {
+      if (!newItem.position || newItem.position === "") {
         newItem.position = DEFAULT_POSITIONS[newItem.variant];
       }
 
@@ -88,7 +88,7 @@ export const FloatiesStore = (() => {
       let _items = items[_position][_variant];
 
       items[_position][_variant] = _items.slice().filter((el) => {
-        return el && el.id && el.id != props.id;
+        return el && el.id && el.id !== props.id;
       });
 
       return items;

package/helpers/Icon.svelte

@@ -99,7 +99,7 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
 
   $: {
     usedFamily =
-      family && family != "" ? family : globalFamily ? globalFamily : "fa";
+      family && family !== "" ? family : globalFamily ? globalFamily : "fa";
 
     switch (usedFamily) {
       case "lar":

package/helpers/Loader.svelte

@@ -5,7 +5,7 @@
   @param {'grey' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'} [spinner_color="grey"] - Color of the Spinner, Default: `"grey"`
   @param {'small'|'medium'|'large'} [spinner_size="medium"] - Size of the Spinner, Default: `"medium"`
   @param {'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'} [background_color="transparent"] - Backgound color of the Spinner container, Default: `"transparent"`
-  @param {string} [background_size="medium"] - Size of the Spinner container.  It can also accept css units
+  @param {string} [background_size="medium"] - Size of the Spinner container. It can also accept css units
 
 **Examples:** `small` | `medium` | `large` | `halfheight` | `fullheight` | `10px` | `5rem` | `100vh`, Default: `"medium"`
   @param {boolean} [is_inline=false] - Determines if the Loader is inline or not, Default: `false`
@@ -48,7 +48,7 @@ The overlay is absolutely positioned. Ensure that the parent container is relati
      */
     background_color = "transparent",
     /**
-     * Size of the Spinner container.  It can also accept css units
+     * Size of the Spinner container. It can also accept css units
      *
      * **Examples:** `small` | `medium` | `large` | `halfheight` | `fullheight` | `10px` | `5rem` | `100vh`
      */
@@ -86,14 +86,14 @@ The overlay is absolutely positioned. Ensure that the parent container is relati
 
   function determineHeightStyles() {
     if (
-      bg_sizes.indexOf(background_size) == -1 &&
+      bg_sizes.indexOf(background_size) === -1 &&
       typeof background_size == "string" &&
       background_size.length
     ) {
       _height = "height: " + background_size + ";";
 
       _style =
-        (style.length && style.charAt(style.length - 1) != ";"
+        (style.length && style.charAt(style.length - 1) !== ";"
           ? style + ";"
           : style) + _height;
       _background_size = "";

package/helpers/Message.svelte

@@ -41,7 +41,10 @@ The parent can then decide what to do with the component
         <slot name="title"><p>{title}</p></slot>
       {/if}
       {#if dismissable}
-        <button class="delete is-pulled-right is-{size}" on:click={dismiss} />
+        <button
+          type="button"
+          class="delete is-pulled-right is-{size}"
+          on:click={dismiss} />
       {/if}
     </div>
     <div class="message-body {inner_class}" style={inner_style}>

package/helpers/Modal.svelte

@@ -13,6 +13,8 @@ Only programmatic closing is possible, Default: `true`
   @param {string} [inner_class=""] - CSS classes for modal content, Default: `""`
   @param {string} [cy=""] - data-cy attribute for cypress, Default: `""`
   @param {string} [class=""] - CSS class for modal container, Default: `""`
+  @method `close()` - Call this method to close modal programmatically
+  @method `open()` - Call this method to open modal programmatically
 
   ### Slots
   - `<slot name="default"  />` - Used for the Modal content
@@ -114,11 +116,17 @@ Only programmatic closing is possible, Default: `true`
     }
   }
 
-  function close() {
+  /**
+   * Call this method to close modal programmatically
+   */
+  export function close() {
     is_active = false;
   }
 
-  function open() {
+  /**
+   * Call this method to open modal programmatically
+   */
+  export function open() {
     is_active = true;
   }
 </script>

package/helpers/Nl2br.svelte

@@ -7,7 +7,7 @@
 -->
 {#if text && text_parts}
   {#each text_parts as part, index}
-    {part}{#if text_parts.length != index + 1}<br />{/if}
+    {part}{#if text_parts.length !== index + 1}<br />{/if}
   {/each}
 {/if}
 

package/helpers/Notification.svelte

@@ -23,7 +23,7 @@ The parent can then decide what to do with the component
     class="notification is-{color} {light ? 'is-light' : ''} {klass}"
     {style}>
     {#if dismissable}
-      <button class="delete" on:click={dismiss} />
+      <button type="button" class="delete" on:click={dismiss} />
     {/if}
     <!--Used for notification content--><slot />
   </div>

package/helpers/Panel.svelte

@@ -43,11 +43,12 @@ This will not work if there is no title area
   class="panel {klass}"
   {style}
   data-cy={cy}>
-  {#if title != "" || has_title}
+  {#if title !== "" || has_title}
     <div class="panel-heading" on:click={toggle}>
       <div class="level is-mobile">
         <div class="level-left">
           <div class="level-item">
+            <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
             <h2 class="subtitle">{@html title}</h2>
           </div>
         </div>
@@ -73,6 +74,7 @@ This will not work if there is no title area
             </div>
           {/if}
           <div class="level-item">
+            <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
             <h2 class="subtitle is-6">{@html subtitle}</h2>
           </div>
           <span class="collapsor level-item">

package/helpers/Popover.svelte

@@ -23,11 +23,11 @@ When set to `null`, it will use the content of the `popover` slot, Default: `nul
 It can be any CSS value associated with `max-width` property, including `"none"`, Default: `"none"`
   @param {string} [style=""] - Inline CSS for Popover trigger, Default: `""`
   @param {string} [class=""] - CSS classes for Popover trigger, Default: `""`
-  @param {function} [open()] - Open function
-  @param {function} [close()] - Close function
-  @param {function} [enable()] - Enable function
-  @param {function} [disable()] - Disable function
-  @param {function} [setProps(props)] - SetProps function
+  @method `open()` - Open method
+  @method `close()` - Close method
+  @method `enable()` - Enable method
+  @method `disable()` - Disable method
+  @method `setProps(props)` - SetProps method
 
   ### Events
   - `opening` - Triggered when popover is opening

package/helpers/Skeleton.svelte

@@ -0,0 +1,66 @@
+<!--
+  @component
+
+
+  @param {number} [lines=1] - Lines property, Default: `1`
+  @param {string} [width="100%"] - CSS string denoting width of the Skeleton
+**Examples:** `10px` | `5rem` | `100vh`, Default: `"100%"`
+  @param {string} [height="auto"] - CSS string denoting height of the Skeleton
+**Examples:** `10px` | `5rem` | `100vh` | `auto`, Default: `"auto"`
+  @param {string} [radius="0px"] - CSS string denoting border-radius of the Skeleton
+**Examples:** `10px` | `5rem`, Default: `"0px"`
+  @param {boolean} [circle=false] - Whether the Skeleton should be rendered as a circle.
+If this is set to `true`, the `radius` property will be ignored., Default: `false`
+  @param {'' | 'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'} [color=""] - Color of the Skeleton lines, Default: `""`
+  @param {string} [class=""] - CSS class for Skeleton, Default: `""`
+
+-->
+<!-- eslint-disable-next-line no-unused-vars -->
+{#each { length: lines } as _, i}
+  <span
+    class="kws-skeleton is-{color} {klass}"
+    style="width:{width};height:{height};border-radius:{border_radius}">
+    &zwnj;
+  </span>
+{/each}
+
+<script>
+  export let /**
+     * Number of lines of text to display.
+     */
+    lines = 1,
+    /**
+     * CSS string denoting width of the Skeleton
+     * **Examples:** `10px` | `5rem` | `100vh`
+     */
+    width = "100%",
+    /**
+     * CSS string denoting height of the Skeleton
+     * **Examples:** `10px` | `5rem` | `100vh` | `auto`
+     */
+    height = "auto",
+    /**
+     * CSS string denoting border-radius of the Skeleton
+     * **Examples:** `10px` | `5rem`
+     */
+    radius = "0px",
+    /**
+     * Whether the Skeleton should be rendered as a circle.
+     * If this is set to `true`, the `radius` property will be ignored.
+     */
+    circle = false,
+    /**
+     * Color of the Skeleton lines
+     * @type {'' | 'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'}
+     */
+    color = "";
+
+  /**
+   * CSS class for Skeleton
+   * @type {string}
+   */
+  let klass = "";
+  export { klass as class };
+
+  $: border_radius = circle ? "50%" : radius;
+</script>

package/index.js

@@ -10,6 +10,8 @@ export { default as Panel } from "./helpers/Panel.svelte";
 export { default as Notification } from "./helpers/Notification.svelte";
 export { default as Loader } from "./helpers/Loader.svelte";
 export { default as ActionSheet } from "./helpers/ActionSheet.svelte";
+export { default as Skeleton } from "./helpers/Skeleton.svelte";
+export { default as Divider } from "./helpers/Divider.svelte";
 export { default as Timeline } from "./helpers/Timeline/Timeline.svelte";
 export { default as TimelineItem } from "./helpers/Timeline/TimelineItem.svelte";
 export { default as TimelineHeader } from "./helpers/Timeline/TimelineHeader.svelte";