@searchcraft/javascript-sdk 0.7.0 → 0.7.1

package/dist/collection/components/searchcraft-input-form/searchcraft-input-form.module.css

@@ -1,293 +0,0 @@
-/** Appearance & Layout */
-:root {
-  /**
-   * Border radius of the input form element.
-   */
-  --sc-input-border-radius: 8px;
-  /**
-   * Icon size of the "magnifying glass" icon rendered in the input form.
-   */
-  --sc-input-search-icon-size: 20px;
-  /**
-   * Icon size of the `x` button rendered in the input form.
-   */
-  --sc-input-clear-icon-size: 20px;
-  /**
-   * Padding on the left side of the input form.
-   */
-  --sc-input-padding-left: 44px;
-  /**
-   * Padding on the right side of the input form.
-   */
-  --sc-input-padding-right: 44px;
-  /**
-   * Border radius applied to result images.
-   */
-  --sc-image-border-radius: 8px;
-  /**
-   * Border radius applied to popover form containers.
-   */
-  --sc-popover-form-border-radius: 8px;
-  /**
-   * Height of the list view/results container portion of the popover form.
-   */
-  --sc-popover-list-view-height: 400px;
-  /**
-   * Size of images of list view items in the popoer list view.
-   */
-  --sc-popover-list-item-image-size: 60px;
-  /**
-   * Horizontal padding of popover list items.
-   */
-  --sc-popover-list-item-padding-horizontal: 8px;
-  /**
-   * Vertical padding of popover list items.
-   */
-  --sc-popover-list-item-padding-vertical: 8px;
-  /**
-   * Maximum width of popover forms of type `modal`.
-   */
-  --sc-popover-modal-max-width: 570px;
-}
-
-:root {
-  --sc-surface-disabled: #D9D9D9;
-  --sc-surface-neutral-primary: #FFFFFF;
-  --sc-surface-neutral-secondary: #F3F3F3;
-  --sc-surface-neutral-light: #FFFFFF;
-  --sc-surface-neutral-primary-hover: #FAFAFA;
-  --sc-surface-neutral-primary-active: #F7F7F7;
-  --sc-surface-neutral-secondary-hover: #EDEDED;
-  --sc-surface-neutral-secondary-active: #E6E6E6;
-  --sc-surface-brand-primary: #000000;
-  --sc-surface-brand-secondary: #E6E6E6;
-  --sc-surface-brand-primary-hover: #2E2E2E;
-  --sc-surface-brand-primary-active: #292929;
-  --sc-surface-brand-secondary-hover: #EBEBEB;
-  --sc-surface-brand-secondary-active: #E0E0E0;
-  --sc-surface-success-primary: #008000;
-  --sc-surface-success-secondary: #CCFFCC;
-  --sc-surface-success-primary-hover: #009900;
-  --sc-surface-success-primary-active: #006600;
-  --sc-surface-success-secondary-hover: #E6FFE6;
-  --sc-surface-success-secondary-active: #E6FFE6;
-  --sc-surface-caution-primary: #CC6600;
-  --sc-surface-caution-secondary: #FFD9B3;
-  --sc-surface-caution-primary-hover: #E57300;
-  --sc-surface-caution-primary-active: #B25A00;
-  --sc-surface-caution-secondary-hover: #FFE5CC;
-  --sc-surface-caution-secondary-active: #FFCC99;
-  --sc-surface-danger-primary: #CC0000;
-  --sc-surface-danger-secondary: #FFCCCC;
-  --sc-surface-danger-primary-hover: #E50000;
-  --sc-surface-danger-primary-active: #B30000;
-  --sc-surface-danger-secondary-hover: #FFE7E7;
-  --sc-surface-danger-secondary-active: #FFB3B3;
-  --sc-content-brand: #000000;
-  --sc-content-success: #008000;
-  --sc-content-caution: #994D00;
-  --sc-content-danger: #990000;
-  --sc-content-disabled: #737373;
-  --sc-content-neutral-primary: #292929;
-  --sc-content-neutral-secondary: #404040;
-  --sc-content-brand-on-primary: #FFFFFF;
-  --sc-content-success-on-primary: #FFFFFF;
-  --sc-content-caution-on-primary: #FFFFFF;
-  --sc-content-danger-on-primary: #FFFFFF;
-  --sc-content-disabled-on-disabled: #737373;
-  --sc-border-neutral: rgba(0,0,0, 0.1);
-  --sc-border-brand: #000000;
-  --sc-border-success: #008000;
-  --sc-border-caution: #CC6600;
-  --sc-border-danger: #CC0000;
-  --sc-border-disabled: #737373;
-}
-
-:root {
-  /** Typography */
-  --sc-font-family: sans-serif;
-  --sc-heading-1-font-size: 32px;
-  --sc-heading-1-line-height: 36px;
-  --sc-heading-1-font-weight: 700;
-  --sc-heading-2-font-size: 29px;
-  --sc-heading-2-line-height: 32px;
-  --sc-heading-2-font-weight: 700;
-  --sc-heading-3-font-size: 26px;
-  --sc-heading-3-line-height: 28px;
-  --sc-heading-3-font-weight: 700;
-  --sc-heading-4-font-size: 23px;
-  --sc-heading-4-line-height: 24px;
-  --sc-heading-4-font-weight: 700;
-  --sc-heading-5-font-size: 20px;
-  --sc-heading-5-line-height: 24px;
-  --sc-heading-5-font-weight: 700;
-  --sc-heading-6-font-size: 10px;
-  --sc-heading-6-line-height: 12px;
-  --sc-heading-6-font-weight: 700;
-  --sc-body-bold-font-size: 16px;
-  --sc-body-bold-line-height: 20px;
-  --sc-body-bold-font-weight: 700;
-  --sc-body-font-size: 16px;
-  --sc-body-line-height: 20px;
-  --sc-body-font-weight:400;
-  --sc-body-small-bold-font-size: 12px;
-  --sc-body-small-bold-line-height: 16px;
-  --sc-body-small-bold-font-weight: 700;
-  --sc-body-small-font-size: 12px;
-  --sc-body-small-line-height: 16px;
-  --sc-body-small-font-weight: 400;
-}
-
-/**
-* Variables that need to be part of the preprocessor can go here.
-*/
-:root {
-  --sc-breakpoint-sm: 576px;
-  --sc-breakpoint-md: 768px;
-  --sc-breakpoint-lg: 992px;
-}
-
-.searchcraft-input-grid {
-  display: grid;
-  gap: 4px 8px;
-}
-
-.searchcraft-input-grid-buttonLeft {
-  grid-template-rows: repeat(3, auto);
-  grid-template-columns: auto 1fr;
-}
-.searchcraft-input-grid-buttonLeft .searchcraft-input-button-wrapper {
-  grid-column: 1/span 1;
-  grid-row: 2/span 1;
-}
-.searchcraft-input-grid-buttonLeft .searchcraft-input-label-wrapper {
-  grid-column: 2/span 1;
-  grid-row: 1/span 1;
-}
-.searchcraft-input-grid-buttonLeft .searchcraft-input-error-wrapper {
-  grid-column: 2/span 1;
-  grid-row: 3/span 1;
-}
-.searchcraft-input-grid-buttonLeft .searchcraft-input-wrapper {
-  grid-column: 2/span 1;
-  grid-row: 2/span 1;
-}
-
-.searchcraft-input-grid-buttonRight {
-  grid-template-rows: repeat(3, auto);
-  grid-template-columns: 1fr auto;
-}
-.searchcraft-input-grid-buttonRight .searchcraft-input-button-wrapper {
-  grid-column: 2/span 1;
-  grid-row: 2/span 1;
-}
-.searchcraft-input-grid-buttonRight .searchcraft-input-label-wrapper {
-  grid-column: 1/span 1;
-  grid-row: 1/span 1;
-}
-.searchcraft-input-grid-buttonRight .searchcraft-input-error-wrapper {
-  grid-column: 1/span 1;
-  grid-row: 3/span 1;
-}
-.searchcraft-input-grid-buttonRight .searchcraft-input-wrapper {
-  grid-column: 1/span 1;
-  grid-row: 2/span 1;
-}
-
-.searchcraft-input-grid-buttonNone {
-  grid-template-rows: repeat(3, auto);
-  grid-template-columns: auto;
-}
-.searchcraft-input-grid-buttonNone .searchcraft-input-button-wrapper {
-  display: none;
-}
-.searchcraft-input-grid-buttonNone .searchcraft-input-label-wrapper {
-  grid-column: 1/span 1;
-  grid-row: 1/span 1;
-}
-.searchcraft-input-grid-buttonNone .searchcraft-input-error-wrapper {
-  grid-column: 1/span 1;
-  grid-row: 3/span 1;
-}
-.searchcraft-input-grid-buttonNone .searchcraft-input-wrapper {
-  grid-column: 1/span 1;
-  grid-row: 2/span 1;
-}
-
-.searchcraft-input-wrapper {
-  position: relative;
-  display: flex;
-}
-
-.searchcraft-input {
-  font-family: var(--sc-font-family);
-  -webkit-font-smoothing: antialiased;
-  font-size: var(--sc-body-font-size);
-  font-weight: var(--sc-body-font-weight);
-  line-height: var(--sc-body-line-height);
-  background-color: var(--sc-surface-neutral-secondary);
-  border-radius: var(--sc-input-border-radius);
-  border: none;
-  color: var(--sc-content-neutral-primary);
-  outline: none;
-  padding-left: var(--sc-input-padding-left);
-  padding-right: var(--sc-input-padding-right);
-  padding-top: 12px;
-  padding-bottom: 12px;
-  flex: 1;
-}
-.searchcraft-input::placeholder {
-  color: var(--sc-content-disabled);
-}
-.searchcraft-input:focus {
-  outline: var(--sc-border-brand) solid 2px;
-}
-.searchcraft-input:focus::placeholder {
-  opacity: 0;
-}
-
-.searchcraft-input.error {
-  color: var(--sc-content-danger);
-  outline: var(--sc-border-danger) solid 2px;
-}
-.searchcraft-input.error:focus {
-  outline: var(--sc-border-danger) solid 2px;
-}
-
-.searchcraft-input-search-icon-wrapper {
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  position: absolute;
-  pointer-events: none;
-  bottom: 0;
-  left: 0;
-  top: 0;
-  width: var(--sc-input-padding-left);
-}
-
-.searchcraft-input-search-icon {
-  pointer-events: none;
-  width: var(--sc-input-search-icon-size);
-  height: var(--sc-input-search-icon-size);
-}
-
-.searchcraft-input-clear-button {
-  all: unset;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  display: flex;
-  position: absolute;
-  border: none;
-  outline: none;
-  bottom: 0;
-  right: 0;
-  top: 0;
-  width: var(--sc-input-padding-right);
-}
-
-.searchcraft-input-clear-icon {
-  width: var(--sc-input-clear-icon-size);
-  height: var(--sc-input-clear-icon-size);
-}

package/dist/collection/components/searchcraft-input-label/searchcraft-input-label.module.css

@@ -1,159 +0,0 @@
-/** Appearance & Layout */
-:root {
-  /**
-   * Border radius of the input form element.
-   */
-  --sc-input-border-radius: 8px;
-  /**
-   * Icon size of the "magnifying glass" icon rendered in the input form.
-   */
-  --sc-input-search-icon-size: 20px;
-  /**
-   * Icon size of the `x` button rendered in the input form.
-   */
-  --sc-input-clear-icon-size: 20px;
-  /**
-   * Padding on the left side of the input form.
-   */
-  --sc-input-padding-left: 44px;
-  /**
-   * Padding on the right side of the input form.
-   */
-  --sc-input-padding-right: 44px;
-  /**
-   * Border radius applied to result images.
-   */
-  --sc-image-border-radius: 8px;
-  /**
-   * Border radius applied to popover form containers.
-   */
-  --sc-popover-form-border-radius: 8px;
-  /**
-   * Height of the list view/results container portion of the popover form.
-   */
-  --sc-popover-list-view-height: 400px;
-  /**
-   * Size of images of list view items in the popoer list view.
-   */
-  --sc-popover-list-item-image-size: 60px;
-  /**
-   * Horizontal padding of popover list items.
-   */
-  --sc-popover-list-item-padding-horizontal: 8px;
-  /**
-   * Vertical padding of popover list items.
-   */
-  --sc-popover-list-item-padding-vertical: 8px;
-  /**
-   * Maximum width of popover forms of type `modal`.
-   */
-  --sc-popover-modal-max-width: 570px;
-}
-
-:root {
-  --sc-surface-disabled: #D9D9D9;
-  --sc-surface-neutral-primary: #FFFFFF;
-  --sc-surface-neutral-secondary: #F3F3F3;
-  --sc-surface-neutral-light: #FFFFFF;
-  --sc-surface-neutral-primary-hover: #FAFAFA;
-  --sc-surface-neutral-primary-active: #F7F7F7;
-  --sc-surface-neutral-secondary-hover: #EDEDED;
-  --sc-surface-neutral-secondary-active: #E6E6E6;
-  --sc-surface-brand-primary: #000000;
-  --sc-surface-brand-secondary: #E6E6E6;
-  --sc-surface-brand-primary-hover: #2E2E2E;
-  --sc-surface-brand-primary-active: #292929;
-  --sc-surface-brand-secondary-hover: #EBEBEB;
-  --sc-surface-brand-secondary-active: #E0E0E0;
-  --sc-surface-success-primary: #008000;
-  --sc-surface-success-secondary: #CCFFCC;
-  --sc-surface-success-primary-hover: #009900;
-  --sc-surface-success-primary-active: #006600;
-  --sc-surface-success-secondary-hover: #E6FFE6;
-  --sc-surface-success-secondary-active: #E6FFE6;
-  --sc-surface-caution-primary: #CC6600;
-  --sc-surface-caution-secondary: #FFD9B3;
-  --sc-surface-caution-primary-hover: #E57300;
-  --sc-surface-caution-primary-active: #B25A00;
-  --sc-surface-caution-secondary-hover: #FFE5CC;
-  --sc-surface-caution-secondary-active: #FFCC99;
-  --sc-surface-danger-primary: #CC0000;
-  --sc-surface-danger-secondary: #FFCCCC;
-  --sc-surface-danger-primary-hover: #E50000;
-  --sc-surface-danger-primary-active: #B30000;
-  --sc-surface-danger-secondary-hover: #FFE7E7;
-  --sc-surface-danger-secondary-active: #FFB3B3;
-  --sc-content-brand: #000000;
-  --sc-content-success: #008000;
-  --sc-content-caution: #994D00;
-  --sc-content-danger: #990000;
-  --sc-content-disabled: #737373;
-  --sc-content-neutral-primary: #292929;
-  --sc-content-neutral-secondary: #404040;
-  --sc-content-brand-on-primary: #FFFFFF;
-  --sc-content-success-on-primary: #FFFFFF;
-  --sc-content-caution-on-primary: #FFFFFF;
-  --sc-content-danger-on-primary: #FFFFFF;
-  --sc-content-disabled-on-disabled: #737373;
-  --sc-border-neutral: rgba(0,0,0, 0.1);
-  --sc-border-brand: #000000;
-  --sc-border-success: #008000;
-  --sc-border-caution: #CC6600;
-  --sc-border-danger: #CC0000;
-  --sc-border-disabled: #737373;
-}
-
-:root {
-  /** Typography */
-  --sc-font-family: sans-serif;
-  --sc-heading-1-font-size: 32px;
-  --sc-heading-1-line-height: 36px;
-  --sc-heading-1-font-weight: 700;
-  --sc-heading-2-font-size: 29px;
-  --sc-heading-2-line-height: 32px;
-  --sc-heading-2-font-weight: 700;
-  --sc-heading-3-font-size: 26px;
-  --sc-heading-3-line-height: 28px;
-  --sc-heading-3-font-weight: 700;
-  --sc-heading-4-font-size: 23px;
-  --sc-heading-4-line-height: 24px;
-  --sc-heading-4-font-weight: 700;
-  --sc-heading-5-font-size: 20px;
-  --sc-heading-5-line-height: 24px;
-  --sc-heading-5-font-weight: 700;
-  --sc-heading-6-font-size: 10px;
-  --sc-heading-6-line-height: 12px;
-  --sc-heading-6-font-weight: 700;
-  --sc-body-bold-font-size: 16px;
-  --sc-body-bold-line-height: 20px;
-  --sc-body-bold-font-weight: 700;
-  --sc-body-font-size: 16px;
-  --sc-body-line-height: 20px;
-  --sc-body-font-weight:400;
-  --sc-body-small-bold-font-size: 12px;
-  --sc-body-small-bold-line-height: 16px;
-  --sc-body-small-bold-font-weight: 700;
-  --sc-body-small-font-size: 12px;
-  --sc-body-small-line-height: 16px;
-  --sc-body-small-font-weight: 400;
-}
-
-/**
-* Variables that need to be part of the preprocessor can go here.
-*/
-:root {
-  --sc-breakpoint-sm: 576px;
-  --sc-breakpoint-md: 768px;
-  --sc-breakpoint-lg: 992px;
-}
-
-.searchcraft-input-label {
-  font-family: var(--sc-font-family);
-  -webkit-font-smoothing: antialiased;
-  font-size: var(--sc-body-small-bold-font-size);
-  font-weight: var(--sc-body-small-bold-font-weight);
-  line-height: var(--sc-body-small-bold-line-height);
-  color: var(--sc-content-neutral-primary);
-  margin-top: 4px;
-  margin-bottom: 4px;
-}