@sme.up/ketchup 4.0.0 → 4.2.0

package/dist/collection/components/kup-box/kup-box.css

@@ -1,520 +1,3 @@
-.f-image--wrapper {
-  display: block;
-  margin: auto;
-  position: relative;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper.kup-fit img {
-  max-width: max-content;
-  object-fit: contain;
-}
-.f-image--wrapper img {
-  display: block;
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .f-image__css {
-  overflow: hidden;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .f-image__icon {
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .css-step.bottom-aligned {
-  bottom: 0;
-  position: absolute;
-}
-
-.f-button--wrapper {
-  --kup_button_border_radius: var(--kup-button-border-radius, 4px);
-  --kup_button_disabled_color: var(
-    --kup-button-disabled-color,
-    var(--kup-disabled-color)
-  );
-  --kup_button_font_family: var(
-    --kup-button-font-family,
-    var(--kup-font-family)
-  );
-  --kup_button_font_size: var(--kup-button-font-size, var(--kup-font-size));
-  --kup_button_font_weight: var(--kup-button-font-weight, 400);
-  --kup_button_height: var(--kup-button-height, 3em);
-  --kup_button_padding: var(--kup-button-padding, 0 1.25em);
-  --kup_button_primary_color: var(
-    --kup-button-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_button_primary_color_h: var(
-    --kup-button-primary-color-h,
-    var(--kup-primary-color-h)
-  );
-  --kup_button_primary_color_s: var(
-    --kup-button-primary-color-s,
-    var(--kup-primary-color-s)
-  );
-  --kup_button_primary_color_l: var(
-    --kup-button-primary-color-l,
-    var(--kup-primary-color-l)
-  );
-  --kup_button_primary_color_rgb: var(
-    --kup-button-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_button_text_on_primary_color: var(
-    --kup-button-text-on-primary-color,
-    var(--kup-text-on-primary-color)
-  );
-  --kup-spinner-color: var(--kup_button_primary_color);
-  font-family: var(--kup_button_font_family);
-  font-size: var(--kup_button_font_size);
-}
-.f-button--wrapper .button {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-appearance: none;
-  -webkit-font-smoothing: antialiased;
-  align-items: center;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--kup_button_border_radius);
-  box-sizing: border-box;
-  color: var(--kup_button_primary_color);
-  cursor: pointer;
-  display: inline-flex;
-  font-size: 0.775em;
-  font-weight: var(--kup_button_font_weight);
-  height: var(--kup_button_height);
-  justify-content: center;
-  letter-spacing: 0.0892857143em;
-  line-height: inherit;
-  min-width: 64px;
-  outline: none;
-  overflow: visible;
-  padding: var(--kup_button_padding);
-  position: relative;
-  text-decoration: none;
-  text-transform: uppercase;
-  transition: background-color 80ms linear, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  user-select: none;
-  vertical-align: middle;
-}
-.f-button--wrapper .button:hover {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.125);
-}
-.f-button--wrapper .button:focus {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.175);
-}
-.f-button--wrapper .button .button__icon {
-  margin-left: -0.25em;
-  margin-right: 0.75em;
-}
-.f-button--wrapper .button .button__label + .button__icon {
-  margin-left: 0.75em;
-  margin-right: -0.25em;
-}
-.f-button--wrapper .button.button--floating, .f-button--wrapper .button.button--raised {
-  --kup-spinner-color: var(--kup_button_text_on_primary_color);
-}
-.f-button--wrapper .button.button--floating:not(.button--disabled), .f-button--wrapper .button.button--raised:not(.button--disabled) {
-  --kup-spinner-border-color: hsl(
-    var(--kup_button_primary_color_h),
-    calc(var(--kup_button_primary_color_s) * 0.75),
-    calc(var(--kup_button_primary_color_l) * 0.85)
-  );
-  background-color: var(--kup_button_primary_color);
-  color: var(--kup_button_text_on_primary_color);
-}
-.f-button--wrapper .button.button--floating:hover, .f-button--wrapper .button.button--raised:hover {
-  background-color: hsl(var(--kup_button_primary_color_h), calc(var(--kup_button_primary_color_s) * 0.93), calc(var(--kup_button_primary_color_l) * 1.07));
-}
-.f-button--wrapper .button.button--floating:focus, .f-button--wrapper .button.button--raised:focus {
-  background-color: hsl(var(--kup_button_primary_color_h), calc(var(--kup_button_primary_color_s) * 0.88), calc(var(--kup_button_primary_color_l) * 1.12));
-}
-.f-button--wrapper .button.button--floating.button--disabled, .f-button--wrapper .button.button--raised.button--disabled {
-  background-color: var(--kup-disabled-background-color);
-  box-shadow: none;
-}
-.f-button--wrapper .button.button--floating {
-  border-radius: 24px;
-  box-shadow: 0 0.215em 0.35em -1px rgba(var(--kup-text-color-rgb), 0.2), 0 0.43em 0.71em 0 rgba(var(--kup-text-color-rgb), 0.14), 0 0.07em 1.285em 0 rgba(var(--kup-text-color-rgb), 0.12);
-  font-weight: 500;
-  font-size: 1em;
-  height: 3.4em;
-  width: auto;
-  padding: 0 1.5em;
-}
-.f-button--wrapper .button.button--floating.button--no-label {
-  border-radius: 50%;
-  height: 4em;
-  padding: 0;
-  width: 4em;
-}
-.f-button--wrapper .button.button--floating:hover, .f-button--wrapper .button.button--floating:focus {
-  box-shadow: 0 0.35em 0.35em -3px rgba(var(--kup-text-color-rgb), 0.2), 0 0.57em 0.71em 0.07em rgba(var(--kup-text-color-rgb), 0.14), 0 0.21em 1em 0.14em rgba(var(--kup-text-color-rgb), 0.12);
-}
-.f-button--wrapper .button.button--floating:active {
-  box-shadow: 0 0.5em 0.57em -4px rgba(var(--kup-text-color-rgb), 0.2), 0 0.85em 1.21em 0.14em rgba(var(--kup-text-color-rgb), 0.14), 0 0.35em 1.57em 0.28em rgba(var(--kup-text-color-rgb), 0.12);
-}
-.f-button--wrapper .button.button--raised {
-  box-shadow: 0px 0.1em 0.1em 0 rgba(var(--kup-text-color-rgb), 0.125), 0px 0.2em 1em 0.1em rgba(var(--kup-text-color-rgb), 0.1), 0px 0.25em 1.5em 0.2em rgba(var(--kup-text-color-rgb), 0.075);
-}
-.f-button--wrapper .button.button--raised:hover {
-  box-shadow: 0 0.25em 0.25em 0 rgba(var(--kup-text-color-rgb), 0.125), 0 0.75em 1em 0.1em rgba(var(--kup-text-color-rgb), 0.1), 0 0.25em 1.5em 0.2em rgba(var(--kup-text-color-rgb), 0.075);
-}
-.f-button--wrapper .button.button--outlined {
-  border-width: 1px;
-  border-style: solid;
-}
-.f-button--wrapper .button.button--outlined:not(.button--disabled) {
-  border-color: var(--kup_button_primary_color);
-  background-color: transparent;
-  color: var(--kup_button_primary_color);
-}
-.f-button--wrapper .button.button--outlined:hover {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.125);
-}
-.f-button--wrapper .button.button--outlined:focus {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.175);
-}
-.f-button--wrapper .button.button--outlined.button--disabled {
-  opacity: 0.75;
-  border-color: var(--kup_button_disabled_color);
-}
-.f-button--wrapper .button.button--no-label {
-  min-width: unset;
-  padding: 0 0.5em;
-}
-.f-button--wrapper .button.button--no-label .button__icon {
-  margin: 0;
-}
-.f-button--wrapper .button.button--disabled {
-  color: var(--kup_button_disabled_color);
-  cursor: auto;
-  opacity: 0.75;
-  pointer-events: none;
-}
-.f-button--wrapper .button .button__spinner-container {
-  width: 100%;
-  height: var(--kup_button_spinner_height);
-  left: 0;
-  position: absolute;
-}
-.f-button--wrapper .icon-button {
-  background-color: transparent;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  border: none;
-  outline: none;
-  font-size: var(--kup_button_font_size);
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  padding: 0.75em;
-  border-radius: 50%;
-}
-.f-button--wrapper .icon-button:hover, .f-button--wrapper .icon-button:focus {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.125);
-}
-.f-button--wrapper .icon-button .icon-button__icon {
-  display: flex;
-  margin: auto;
-}
-.f-button--wrapper .icon-button .icon-button__icon.icon-button__icon--on {
-  display: none;
-}
-.f-button--wrapper .icon-button.button--disabled {
-  opacity: 0.75;
-  pointer-events: none;
-}
-.f-button--wrapper .icon-button .icon-button__spinner-container {
-  width: var(--kup_button_spinner_width);
-  height: var(--kup_button_spinner_height);
-}
-.f-button--wrapper .button--with-spinner {
-  opacity: 0.8;
-  pointer-events: none;
-}
-.f-button--wrapper .content--hidden {
-  visibility: hidden;
-}
-.f-button--wrapper.kup-full-height {
-  height: 100%;
-}
-.f-button--wrapper.kup-full-height .button {
-  height: 100%;
-}
-.f-button--wrapper.kup-full-width {
-  width: 100%;
-}
-.f-button--wrapper.kup-full-width .button {
-  width: 100%;
-}
-.f-button--wrapper.kup-large button {
-  font-size: 1.25em;
-}
-.f-button--wrapper.kup-shaped .button {
-  border-radius: 18px;
-}
-.f-button--wrapper.kup-shaped .button.button--floating {
-  border-radius: 50% 0;
-}
-.f-button--wrapper.kup-slim button {
-  font-size: 0.675em;
-}
-.f-button--wrapper.kup-pulsating .icon-button--on:after {
-  content: "";
-  animation: pulsating 1250ms infinite;
-  position: absolute;
-  height: 2px;
-  width: 2px;
-  top: calc(50% - 1px);
-  left: calc(50% - 1px);
-  border-radius: 50%;
-}
-.f-button--wrapper.kup-danger {
-  --kup-button-primary-color: var(--kup-danger-color);
-  --kup-button-primary-color-h: var(--kup-danger-color-h);
-  --kup-button-primary-color-s: var(--kup-danger-color-s);
-  --kup-button-primary-color-l: var(--kup-danger-color-l);
-  --kup-button-primary-color-rgb: var(--kup-danger-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-.f-button--wrapper.kup-info {
-  --kup-button-primary-color: var(--kup-info-color);
-  --kup-button-primary-color-h: var(--kup-info-color-h);
-  --kup-button-primary-color-s: var(--kup-info-color-s);
-  --kup-button-primary-color-l: var(--kup-info-color-l);
-  --kup-button-primary-color-rgb: var(--kup-info-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-.f-button--wrapper.kup-secondary {
-  --kup-button-primary-color: var(--kup-secondary-color);
-  --kup-button-primary-color-h: var(--kup-secondary-color-h);
-  --kup-button-primary-color-s: var(--kup-secondary-color-s);
-  --kup-button-primary-color-l: var(--kup-secondary-color-l);
-  --kup-button-primary-color-rgb: var(--kup-secondary-color-rgb);
-  --kup-button-text-on-primary-color: var(--kup-text-on-secondary-color);
-}
-.f-button--wrapper.kup-success {
-  --kup-button-primary-color: var(--kup-success-color);
-  --kup-button-primary-color-h: var(--kup-success-color-h);
-  --kup-button-primary-color-s: var(--kup-success-color-s);
-  --kup-button-primary-color-l: var(--kup-success-color-l);
-  --kup-button-primary-color-rgb: var(--kup-success-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-.f-button--wrapper.kup-warning {
-  --kup-button-primary-color: var(--kup-warning-color);
-  --kup-button-primary-color-h: var(--kup-warning-color-h);
-  --kup-button-primary-color-s: var(--kup-warning-color-s);
-  --kup-button-primary-color-l: var(--kup-warning-color-l);
-  --kup-button-primary-color-rgb: var(--kup-warning-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-
-@keyframes pulsating {
-  0% {
-    transform: scale(2);
-    box-shadow: 0 0 0 0 rgba(var(--kup_button_primary_color_rgb), 0.7);
-  }
-  70% {
-    transform: scale(2.75);
-    box-shadow: 0 0 0 10px rgba(var(--kup_button_primary_color_rgb), 0);
-  }
-  100% {
-    transform: scale(2);
-    box-shadow: 0 0 0 0 rgba(var(--kup_button_primary_color_rgb), 0);
-  }
-}
-.f-chip--wrapper {
-  --kup_chip_background_color: var(
-    --kup-chip-background-color,
-    var(--kup-background-color)
-  );
-  --kup_chip_border_radius: var(--kup-chip-border-radius, 16px);
-  --kup_chip_font_family: var(--kup-chip-font-family, var(--kup-font-family));
-  --kup_chip_font_size: var(--kup-chip-font-size, var(--kup-font-size));
-  --kup_chip_font_weight: var(--kup-chip-font-weight, var(--kup-font-weight));
-  --kup_chip_height: var(--kup-chip-height, 32px);
-  --kup_chip_margin: var(--kup-chip-margin, 0 4px);
-  --kup_chip_padding: var(--kup-chip-padding, 0 12px);
-  --kup_chip_primary_color: var(
-    --kup-chip-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_chip_primary_color_rgb: var(
-    --kup-chip-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_chip_text_color: var(--kup-chip-text-color, var(--kup-text-color));
-  --kup_chip_text_color_rgb: var(
-    --kup-chip-text-color-rgb,
-    var(--kup-text-color-rgb)
-  );
-  font-family: var(--kup_chip_font_family);
-  font-size: var(--kup_chip_font_size);
-}
-.f-chip--wrapper .chip-set {
-  padding: 4px;
-  display: flex;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-}
-.f-chip--wrapper .chip-set .chip {
-  align-items: center;
-  display: inline-flex;
-  position: relative;
-  background-color: var(--kup_chip_background_color);
-  background-image: linear-gradient(to right, rgba(var(--kup_chip_text_color_rgb), 0.1) 0%, rgba(var(--kup_chip_text_color_rgb), 0.1) 0.1%, rgba(var(--kup_chip_text_color_rgb), 0.1));
-  color: var(--kup_chip_text_color);
-  border-radius: var(--kup_chip_border_radius);
-  font-size: 0.875em;
-  font-weight: var(--kup_chip_font_weight);
-  letter-spacing: 0.0178571429em;
-  text-decoration: inherit;
-  text-transform: inherit;
-  height: var(--kup_chip_height);
-  box-sizing: border-box;
-  padding: var(--kup_chip_padding);
-  border-width: 0;
-  outline: none;
-  cursor: pointer;
-  will-change: transform, opacity;
-  margin: var(--kup_chip_margin);
-}
-.f-chip--wrapper .chip-set .chip .chip__icon--leading {
-  color: var(--kup_chip_text_color);
-}
-.f-chip--wrapper .chip-set .chip .chip__icon--leading:not(.chip__icon--leading-hidden) {
-  margin-left: -4px;
-  margin-right: 6px;
-}
-.f-chip--wrapper .chip-set .chip .chip__icon--leading .chip__icon--trailing {
-  position: relative;
-}
-.f-chip--wrapper .chip-set .chip .chip__icon {
-  border-radius: 50%;
-  outline: none;
-  vertical-align: middle;
-}
-.f-chip--wrapper .chip-set .chip .chip__icon .chip_icon--leading:not(.chip__icon--leading-hidden) {
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
-}
-.f-chip--wrapper .chip-set .chip .chip__icon .f-image__icon {
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-chip--wrapper .chip-set .chip .chip__checkmark-svg {
-  width: 0;
-  height: 20px;
-  transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.f-chip--wrapper .chip-set .chip .chip__checkmark-path {
-  transition: stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
-  stroke-width: 2px;
-  stroke-dashoffset: 29.7833385;
-  stroke-dasharray: 29.7833385;
-}
-.f-chip--wrapper .chip-set .chip svg path {
-  color: var(--kup_chip_text_color);
-  stroke: var(--kup_chip_text_color);
-}
-.f-chip--wrapper .chip-set .chip .kup-icon {
-  background: var(--kup_chip_text_color);
-  display: block;
-  width: 18px;
-  height: 18px;
-}
-.f-chip--wrapper .chip-set .chip .chip__primary-action {
-  outline: none;
-}
-.f-chip--wrapper .chip-set .chip .chip__primary-action .chip__text {
-  white-space: nowrap;
-}
-.f-chip--wrapper .chip-set.chip-set--choice .chip--selected {
-  background-color: var(--kup_chip_background_color);
-  background-image: linear-gradient(to right, rgba(var(--kup_chip_primary_color_rgb), 0.25) 0%, rgba(var(--kup_chip_primary_color_rgb), 0.25) 0.1%, rgba(var(--kup_chip_primary_color_rgb), 0.25));
-  color: var(--kup_chip_primary_color);
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip__icon--leading {
-  opacity: 1;
-  transition: opacity 75ms linear;
-  transition-delay: -50ms;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip__icon--leading + .chip__checkmark {
-  opacity: 0;
-  transition: opacity 75ms linear;
-  transition-delay: 80ms;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip__icon--leading + .chip__checkmark .chip__checkmark-svg {
-  transition: width 0ms;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip__icon--leading.chip__icon--leading-hidden {
-  display: none;
-  width: 0;
-  opacity: 0;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip__icon--leading.chip__icon--leading-hidden + .chip__checkmark {
-  height: 20px;
-  width: 20px;
-  opacity: 1;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip--selected .chip__icon--leading {
-  opacity: 0;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip--selected .chip__checkmark-path {
-  stroke-dashoffset: 0;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip--selected .chip__checkmark {
-  margin-left: -4px;
-  margin-right: 4px;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip--selected .chip__checkmark .chip__checkmark-svg {
-  height: 20px;
-  width: 20px;
-}
-.f-chip--wrapper .chip-set.chip-set--input .kup-clear-icon {
-  margin-left: 4px;
-  margin-right: -4px;
-}
-.f-chip--wrapper .chip-set.chip-set--input .kup-clear-icon:hover {
-  opacity: 0.75;
-}
-.f-chip--wrapper :not(svg) {
-  transform-origin: 0px 0px;
-}
-.f-chip--wrapper.kup-danger {
-  --kup-chip-primary-color: var(--kup-danger-color);
-  --kup-chip-primary-color-rgb: var(--kup-danger-color-rgb);
-}
-.f-chip--wrapper.kup-info {
-  --kup-chip-primary-color: var(--kup-info-color);
-  --kup-chip-primary-color-rgb: var(--kup-info-color-rgb);
-}
-.f-chip--wrapper.kup-secondary {
-  --kup-chip-primary-color: var(--kup-secondary-color);
-  --kup-chip-primary-color-rgb: var(--kup-secondary-color-rgb);
-}
-.f-chip--wrapper.kup-success {
-  --kup-chip-primary-color: var(--kup-success-color);
-  --kup-chip-primary-color-rgb: var(--kup-success-color-rgb);
-}
-.f-chip--wrapper.kup-warning {
-  --kup-chip-primary-color: var(--kup-warning-color);
-  --kup-chip-primary-color-rgb: var(--kup-warning-color-rgb);
-}
-.f-chip--wrapper .kup-icon.kup-clear-icon {
-  -webkit-mask: var(--kup-clear-icon);
-  mask: var(--kup-clear-icon);
-}
-
 /**
 * @prop --kup-box-background-color: Sets background of the component.
 * @prop --kup-box-color: Sets text color of the component.
@@ -548,17 +31,13 @@
   font-size: var(--kup_box_font_size);
 }
 
-.box-section {
-  text-align: center;
-}
-
 .box-component {
   background: var(--kup_box_background_color);
+  transition: border var(--kup_box_transition) ease;
 }
-.box-component.component-dropover {
+.box-component[kup-drag-over] {
   position: relative;
-  border: 3px solid var(--kup-border-color);
-  padding: 5px;
+  border: 3px dashed var(--kup-border-color);
 }
 
 #box-container {
@@ -588,14 +67,15 @@
   cursor: pointer;
   position: relative;
   display: flex;
-  transition: background-color var(--kup_box_transition) ease, box-shadow var(--kup_box_transition) ease;
+  transition: background-color var(--kup_box_transition) ease, box-shadow var(--kup_box_transition) ease, border var(--kup_box_transition) ease;
+}
+#box-container .box-wrapper .box.draggable {
+  touch-action: none;
+  user-select: none;
 }
 #box-container .box-wrapper .box.column {
   flex-direction: column;
 }
-#box-container .box-wrapper .box:hover .box-drag-handler, #box-container .box-wrapper .box.selected .box-drag-handler {
-  display: inline;
-}
 #box-container .box-wrapper .box:hover {
   box-shadow: var(--kup_box_hover_box_shadow);
 }
@@ -605,20 +85,13 @@
 #box-container .box-wrapper .box.selected .box-section.titled > h3 {
   background-color: transparent;
 }
-#box-container .box-wrapper .box.item-dragged {
+#box-container .box-wrapper .box[kup-draggable] {
   opacity: 0.5;
 }
-#box-container .box-wrapper .box.item-dropover {
+#box-container .box-wrapper .box[kup-drag-over] {
+  border: 3px dashed var(--kup-border-color);
   position: relative;
   z-index: 2;
-  -webkit-transition: all 200ms ease-in;
-  -webkit-transform: scale(1.05);
-  -ms-transition: all 200ms ease-in;
-  -ms-transform: scale(1.05);
-  -moz-transition: all 200ms ease-in;
-  -moz-transform: scale(1.05);
-  transition: all 200ms ease-in;
-  transform: scale(1.05);
 }
 #box-container .box-wrapper .box .box-section {
   display: flex;
@@ -640,9 +113,6 @@
 #box-container .box-wrapper .box .box-section .box-object {
   min-height: 16px;
 }
-#box-container .box-wrapper .box .box-section .box-object.has-padding {
-  padding: 1em;
-}
 #box-container .box-wrapper .box .box-section .box-object img {
   height: auto;
 }
@@ -658,6 +128,17 @@
   display: flex;
   align-items: center;
 }
+#box-container .box-wrapper .box .box-section.collapse-section .header .header-content .f-image {
+  transition: transform 0.15s;
+}
+#box-container .box-wrapper .box .box-section.collapse-section .header .header-content .f-image.toggled {
+  transform: rotate(-180deg);
+}
+#box-container .box-wrapper .box .box-section.collapse-section .header .header-content .kup-icon.kup-dropdown-icon {
+  margin: 0;
+  -webkit-mask: var(--kup-dropdown-icon);
+  mask: var(--kup-dropdown-icon);
+}
 #box-container .box-wrapper .box .box-section.collapse-section .content {
   display: none;
   width: 100%;
@@ -687,13 +168,6 @@
   right: 0.5em;
   z-index: 1;
 }
-#box-container .box-wrapper .box .box-drag-handler {
-  position: absolute;
-  bottom: 0.5em;
-  right: 0.5em;
-  cursor: grab;
-  display: none;
-}
 #box-container .box-wrapper .row-actions-wrapper .row-actions-toggler {
   position: relative;
   width: 24px;
@@ -744,43 +218,44 @@
   margin-bottom: 1em;
 }
 
-.kup-icon:not(.f-image--wrapper) {
-  background-color: var(--kup-title-color);
-  margin: 0 0.25em;
-  height: 1.25em;
-  width: 1.25em;
-}
-.kup-icon:not(.f-image--wrapper).obj-icon {
-  cursor: var(--kup-obj-cursor);
-  display: inline-block;
-  background-color: rgba(var(--kup-text-color-rgb), 0.375);
-  margin: auto 0.5em auto 0;
-  vertical-align: sub;
-}
-
 /*-------------------------------------------------*/
 /*        C o m p o n e n t   C l a s s e s        */
 /*-------------------------------------------------*/
-:host(.kup-left-aligned) .box-section {
-  text-align: left;
+:host(.kup-center-aligned) #kup-component .box-section {
+  text-align: center;
 }
-:host(.kup-left-aligned) .box-section .f-image--wrapper {
-  margin-left: 0;
-  margin-right: auto;
+:host(.kup-center-aligned) #kup-component .box-section .f-cell {
+  justify-content: center;
+  margin: auto;
+  text-align: center;
 }
-:host(.kup-left-aligned) .box-section kup-checkbox {
-  justify-content: flex-start;
+:host(.kup-center-aligned) #kup-component .box-section .f-cell .f-cell__content {
+  justify-content: center;
+  margin: auto;
+  text-align: center;
+}
+:host(.kup-center-aligned) #kup-component .box-section .f-cell img {
+  margin: auto;
 }
 
-:host(.kup-right-aligned) .box-section {
+:host(.kup-right-aligned) #kup-component .box-section {
   text-align: right;
 }
-:host(.kup-right-aligned) .box-section .f-image--wrapper {
+:host(.kup-right-aligned) #kup-component .box-section .f-cell {
+  justify-content: flex-end;
   margin-left: auto;
   margin-right: 0;
+  text-align: right;
 }
-:host(.kup-right-aligned) .box-section kup-checkbox {
+:host(.kup-right-aligned) #kup-component .box-section .f-cell .f-cell__content {
   justify-content: flex-end;
+  margin-left: auto;
+  margin-right: 0;
+  text-align: right;
+}
+:host(.kup-right-aligned) #kup-component .box-section .f-cell img {
+  margin-left: auto;
+  margin-right: 0;
 }
 
 :host(.kup-top-aligned) #box-container .box-wrapper .box .box-section .column {
@@ -839,212 +314,4 @@
 
 :host(.kup-warning) {
   --kup-box-primary-color-rgb: var(--kup-warning-color-rgb);
-}
-
-/*-------------------------------------------------*/
-/*             J S O N   C l a s s e s             */
-/*-------------------------------------------------*/
-:host .box-section.left-aligned {
-  text-align: left;
-}
-:host .box-section.left-aligned .f-image--wrapper {
-  margin-left: 0;
-  margin-right: auto;
-}
-:host .box-section.left-aligned kup-checkbox {
-  justify-content: flex-start;
-}
-
-:host .box-section.right-aligned {
-  text-align: right;
-}
-:host .box-section.right-aligned .f-image--wrapper {
-  margin-left: auto;
-  margin-right: 0;
-}
-:host .box-section.right-aligned kup-checkbox {
-  justify-content: flex-end;
-}
-
-:host .box-section.center-aligned {
-  text-align: center;
-}
-:host .box-section.center-aligned .f-image--wrapper {
-  margin: auto;
-}
-:host .box-section.center-aligned kup-checkbox {
-  justify-content: center;
-}
-
-/*-------------------------------------------------*/
-/*     J S O N   C l a s s e s   ( c e l l s )     */
-/*-------------------------------------------------*/
-.clickable {
-  cursor: pointer;
-}
-
-.display-on-hover {
-  opacity: 0;
-  transition: opacity 0.25s;
-}
-.display-on-hover:hover {
-  opacity: 1;
-}
-
-.shaped {
-  border-radius: 4px;
-}
-
-.strong-text {
-  font-weight: 600;
-}
-
-.success-text {
-  color: var(--kup-success-color) !important;
-}
-
-.warning-text {
-  color: var(--kup-warning-color) !important;
-}
-
-.danger-text {
-  color: var(--kup-danger-color) !important;
-}
-
-.purple-text {
-  color: #8e15bf !important;
-}
-
-.success-bg {
-  background: var(--kup-success-color) !important;
-  color: white !important;
-}
-
-.warning-bg {
-  background: var(--kup-warning-color) !important;
-}
-
-.danger-bg {
-  background: var(--kup-danger-color) !important;
-  color: white !important;
-}
-
-.teal-bg {
-  background: #00b4bc !important;
-  color: white !important;
-}
-
-.orange-bg {
-  background: #f59729 !important;
-  color: white !important;
-}
-
-.green-bg {
-  background: #00be67 !important;
-  color: white !important;
-}
-
-.grey-bg {
-  background: #8d8d8d !important;
-  color: white !important;
-}
-
-.purple-bg {
-  background: #b88acc !important;
-  color: white !important;
-}
-
-.top-right-indicator {
-  position: relative !important;
-}
-.top-right-indicator.fixed-column, .top-right-indicator.fixed-row {
-  position: sticky !important;
-}
-.top-right-indicator:after {
-  content: "";
-  border-width: 0 0 0.5em 0.5em;
-  border-color: transparent transparent var(--kup-secondary-color) transparent;
-  border-style: solid;
-  transform: rotate(270deg);
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.link {
-  color: #0000ee;
-  text-decoration: underline;
-}
-
-.c-vertical-text * {
-  text-align: center;
-  writing-mode: vertical-lr;
-}
-
-.c-right-aligned * {
-  flex-flow: row-reverse;
-}
-
-.c-centered * {
-  margin: auto;
-  max-width: max-content;
-}
-
-.c-fitted * {
-  max-width: max-content;
-}
-
-.c-shaped * {
-  border-radius: 4px;
-}
-
-.c-hor-padded * {
-  box-sizing: border-box;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-}
-
-.c-ver-padded * {
-  box-sizing: border-box;
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-}
-
-.c-success-bg * {
-  background: var(--kup-success-color) !important;
-  color: white !important;
-}
-
-.c-warning-bg * {
-  background: var(--kup-warning-color) !important;
-}
-
-.c-danger-bg * {
-  background: var(--kup-danger-color) !important;
-  color: white !important;
-}
-
-.c-teal-bg * {
-  background: #00b4bc !important;
-  color: white !important;
-}
-
-.c-orange-bg * {
-  background: #f59729 !important;
-  color: white !important;
-}
-
-.c-green-bg * {
-  background: #00be67 !important;
-  color: white !important;
-}
-
-.c-grey-bg * {
-  background: #8d8d8d !important;
-  color: white !important;
-}
-
-.c-purple-bg * {
-  background: #b88acc !important;
-  color: white !important;
 }