webcake-ui-kit 1.0.17 → 1.0.19

package/src/components/field/field.css

@@ -0,0 +1,87 @@
+.ui-field {
+  display: flex;
+  gap: var(--spacing-2xs);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Vertical: label on top, body below */
+.ui-field--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+/* Horizontal: label on the left, body on the right */
+.ui-field--horizontal {
+  flex-direction: row;
+}
+.ui-field--horizontal.ui-field--align-center {
+  align-items: center;
+}
+.ui-field--horizontal.ui-field--align-start {
+  align-items: flex-start;
+}
+
+/* Label */
+.ui-field__label {
+  flex-shrink: 0;
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+  font-weight: var(--paragraph-medium-font-weight);
+  color: var(--primary-fg);
+}
+.ui-field--required .ui-field__label {
+  color: var(--destructive-text);
+}
+
+/* Body wraps the control + inline message so both align under the label
+   column in horizontal layout, and stack tightly in vertical layout. */
+.ui-field__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.ui-field__control {
+  width: 100%;
+}
+
+/* Inline message: 16px icon + text. Defaults to muted; turns destructive on error. */
+.ui-field__message {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+  font-weight: var(--paragraph-font-weight);
+  color: var(--muted-fg);
+}
+.ui-field--error .ui-field__message {
+  color: var(--destructive-text);
+}
+
+.ui-field__message-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: inherit;
+}
+.ui-field__message-icon ::v-deep svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.ui-field__message-text {
+  flex: 1 1 0;
+  min-width: 0;
+}

package/src/components/tooltip/Tooltip.vue

@@ -0,0 +1,149 @@
+<template>
+  <span class="ui-tooltip">
+    <span
+      ref="trigger"
+      class="ui-tooltip__trigger"
+      @mouseenter="onShow"
+      @mouseleave="onHide"
+      @focusin="onShow"
+      @focusout="onHide"
+    >
+      <slot></slot>
+    </span>
+    <span
+      ref="tooltip"
+      v-show="isVisible"
+      :class="[
+        'ui-tooltip__content',
+        `ui-tooltip__content--${color}`,
+        `ui-tooltip__content--${side}`,
+        hasMaxWidth && 'ui-tooltip__content--wrap'
+      ]"
+      :style="tooltipStyle"
+      role="tooltip"
+    >
+      <span class="ui-tooltip__text">
+        <slot name="content">{{ title }}</slot>
+      </span>
+      <span v-if="arrow" :class="['ui-tooltip__arrow', `ui-tooltip__arrow--${side}`]" aria-hidden="true"></span>
+    </span>
+  </span>
+</template>
+
+<script>
+const GAP = 4
+
+export default {
+  name: 'Tooltip',
+  props: {
+    side: {
+      type: String,
+      default: 'top',
+      validator: v => ['top', 'bottom', 'left', 'right'].includes(v)
+    },
+    title: { type: String, default: '' },
+    maxWidth: { type: [String, Number], default: '' },
+    open: { type: Boolean, default: false },
+    color: {
+      type: String,
+      default: 'default',
+      validator: v => ['default', 'brand', 'destructive'].includes(v)
+    },
+    arrow: { type: Boolean, default: true }
+  },
+  emits: [],
+  data() {
+    return {
+      hovered: false,
+      positionStyle: {}
+    }
+  },
+  computed: {
+    isVisible() {
+      return this.open || this.hovered
+    },
+    hasMaxWidth() {
+      return this.maxWidth !== '' && this.maxWidth !== null && this.maxWidth !== undefined
+    },
+    tooltipStyle() {
+      const style = Object.assign({}, this.positionStyle)
+      if (this.hasMaxWidth) {
+        style.maxWidth = typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth
+      }
+      return style
+    }
+  },
+  watch: {
+    isVisible(v) {
+      if (v) this.$nextTick(this.updatePosition)
+    },
+    side() {
+      if (this.isVisible) this.$nextTick(this.updatePosition)
+    }
+  },
+  mounted() {
+    if (typeof document !== 'undefined' && this.$refs.tooltip) {
+      document.body.appendChild(this.$refs.tooltip)
+    }
+    window.addEventListener('scroll', this.onScrollOrResize, true)
+    window.addEventListener('resize', this.onScrollOrResize)
+    if (this.open) this.$nextTick(this.updatePosition)
+    if (typeof this.$on === 'function') {
+      // eslint-disable-next-line vue/no-deprecated-events-api
+      this.$on('hook:beforeDestroy', this.cleanup)
+    }
+  },
+  beforeUnmount() {
+    this.cleanup()
+  },
+  methods: {
+    onShow() {
+      this.hovered = true
+    },
+    onHide() {
+      this.hovered = false
+    },
+    onScrollOrResize() {
+      if (this.isVisible) this.updatePosition()
+    },
+    updatePosition() {
+      const trigger = this.$refs.trigger
+      const tip = this.$refs.tooltip
+      if (!trigger || !tip) return
+      const t = trigger.getBoundingClientRect()
+      const tw = tip.offsetWidth
+      const th = tip.offsetHeight
+      let top = 0
+      let left = 0
+      if (this.side === 'top') {
+        top = t.top - th - GAP
+        left = t.left + (t.width - tw) / 2
+      } else if (this.side === 'bottom') {
+        top = t.bottom + GAP
+        left = t.left + (t.width - tw) / 2
+      } else if (this.side === 'left') {
+        top = t.top + (t.height - th) / 2
+        left = t.left - tw - GAP
+      } else {
+        top = t.top + (t.height - th) / 2
+        left = t.right + GAP
+      }
+      this.positionStyle = {
+        position: 'fixed',
+        top: top + 'px',
+        left: left + 'px',
+        zIndex: 1050
+      }
+    },
+    cleanup() {
+      window.removeEventListener('scroll', this.onScrollOrResize, true)
+      window.removeEventListener('resize', this.onScrollOrResize)
+      if (this.$refs.tooltip && this.$refs.tooltip.parentNode === document.body) {
+        document.body.removeChild(this.$refs.tooltip)
+      }
+    }
+  }
+}
+</script>
+
+<style src="./tooltip.css" scoped></style>

package/src/components/tooltip/tooltip.css

@@ -0,0 +1,102 @@
+/* Wrapper just anchors the trigger inline. The content bubble is moved
+   out to <body> at mount time so it can never be clipped by overflow
+   on an ancestor. Position is computed in JS. */
+.ui-tooltip {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.ui-tooltip__trigger {
+  display: inline-flex;
+}
+
+/* Color tokens cascade via a local CSS variable so the arrow inherits
+   the same background and stays in sync with the bubble. */
+.ui-tooltip__content--default {
+  --_tooltip-color-bg: var(--tooltip);
+  --_tooltip-color-fg: var(--tooltip-foreground);
+}
+.ui-tooltip__content--brand {
+  --_tooltip-color-bg: var(--primary-brand-bg);
+  --_tooltip-color-fg: var(--inverse-fg);
+}
+.ui-tooltip__content--destructive {
+  --_tooltip-color-bg: var(--destructive);
+  --_tooltip-color-fg: var(--destructive-inverse-fg);
+}
+
+.ui-tooltip__content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-6) var(--spacing-xs);
+  background: var(--_tooltip-color-bg);
+  color: var(--_tooltip-color-fg);
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  letter-spacing: var(--paragraph-mini-letter-spacing);
+  font-weight: var(--paragraph-font-weight);
+  border-radius: var(--rounded-lg);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.ui-tooltip__content--wrap {
+  white-space: normal;
+}
+
+.ui-tooltip__text {
+  display: inline-block;
+}
+
+/* Arrow as a CSS triangle. The pointing border uses the inherited
+   color variable so it always matches the bubble background. */
+.ui-tooltip__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.ui-tooltip__arrow--top {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 5px solid var(--_tooltip-color-bg);
+}
+.ui-tooltip__arrow--bottom {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 5px solid var(--_tooltip-color-bg);
+}
+.ui-tooltip__arrow--left {
+  right: -5px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 5px solid var(--_tooltip-color-bg);
+}
+.ui-tooltip__arrow--right {
+  left: -5px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 5px solid var(--_tooltip-color-bg);
+}
+
+/* The bubble itself needs to be position-context for the arrow.
+   We rely on the inline `position: fixed` set by the positioning logic
+   in JS, but we also want consumers to be able to apply a manual
+   transform if needed — the arrow's position uses absolute, which is
+   fine because the bubble's fixed position establishes a containing
+   block for its descendants. */
+.ui-tooltip__content {
+  position: relative;
+}

package/src/icons/Bottom.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M19.9998 19.2498C20.4139 19.2498 20.7496 19.5857 20.7498 19.9998C20.7498 20.414 20.414 20.7498 19.9998 20.7498H4C3.58579 20.7498 3.25 20.414 3.25 19.9998C3.25013 19.5857 3.58587 19.2498 4 19.2498H19.9998ZM4.01025 15.25C4.42435 15.2501 4.76025 15.5859 4.76025 16C4.76025 16.4141 4.42435 16.7499 4.01025 16.75H4C3.58579 16.75 3.25 16.4142 3.25 16C3.25 15.5858 3.58579 15.25 4 15.25H4.01025ZM20.01 15.25C20.4242 15.25 20.76 15.5858 20.76 16C20.76 16.4142 20.4242 16.75 20.01 16.75H19.9998C19.5857 16.7499 19.2498 16.4141 19.2498 16C19.2498 15.5859 19.5857 15.2501 19.9998 15.25H20.01ZM4.01025 11.2502C4.42435 11.2504 4.76025 11.5861 4.76025 12.0002C4.76012 12.4143 4.42427 12.7501 4.01025 12.7502H4C3.58587 12.7502 3.25013 12.4143 3.25 12.0002C3.25 11.586 3.58579 11.2502 4 11.2502H4.01025ZM20.01 11.2502C20.4242 11.2502 20.76 11.586 20.76 12.0002C20.7599 12.4143 20.4241 12.7502 20.01 12.7502H19.9998C19.5857 12.7501 19.2499 12.4143 19.2498 12.0002C19.2498 11.5861 19.5857 11.2504 19.9998 11.2502H20.01ZM4.01025 7.24976C4.42427 7.24989 4.76012 7.58574 4.76025 7.99976C4.76025 8.41388 4.42435 8.74962 4.01025 8.74976H4C3.58579 8.74976 3.25 8.41397 3.25 7.99976C3.25013 7.58565 3.58587 7.24976 4 7.24976H4.01025ZM20.01 7.24976C20.4241 7.24976 20.7599 7.58566 20.76 7.99976C20.76 8.41397 20.4242 8.74975 20.01 8.74976H19.9998C19.5857 8.74962 19.2498 8.41389 19.2498 7.99976C19.2499 7.58574 19.5857 7.24989 19.9998 7.24976H20.01ZM4.01025 3.25C4.42435 3.25014 4.76025 3.58587 4.76025 4C4.76025 4.41413 4.42435 4.74986 4.01025 4.75H4C3.58579 4.75 3.25 4.41421 3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H4.01025ZM8.01001 3.25C8.42422 3.25001 8.76001 3.58579 8.76001 4C8.76001 4.41421 8.42422 4.74999 8.01001 4.75H7.99976C7.58565 4.74987 7.24976 4.41413 7.24976 4C7.24976 3.58587 7.58565 3.25013 7.99976 3.25H8.01001ZM12.0098 3.25C12.424 3.25 12.7598 3.58579 12.7598 4C12.7598 4.41421 12.424 4.75 12.0098 4.75H12.0002C11.586 4.75 11.2502 4.41421 11.2502 4C11.2502 3.58579 11.586 3.25 12.0002 3.25H12.0098ZM16.0103 3.25C16.4243 3.25014 16.7603 3.58587 16.7603 4C16.7603 4.41413 16.4243 4.74986 16.0103 4.75H16C15.5858 4.75 15.25 4.41421 15.25 4C15.25 3.58579 15.5858 3.25 16 3.25H16.0103ZM20.01 3.25C20.4242 3.25001 20.76 3.58579 20.76 4C20.76 4.41421 20.4242 4.74999 20.01 4.75H19.9998C19.5857 4.74987 19.2498 4.41413 19.2498 4C19.2498 3.58587 19.5857 3.25013 19.9998 3.25H20.01Z"
+      :fill="color"
+    />
+  </svg>
+</template>
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 16
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/icons/BottomLeft.vue

@@ -0,0 +1,46 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M15.2551 19.979C15.2553 19.5649 15.591 19.229 16.0051 19.229C16.4193 19.229 16.755 19.5649 16.7551 19.979L16.7551 19.9893C16.7551 20.4035 16.4193 20.7393 16.0051 20.7393C15.5909 20.7393 15.2551 20.4035 15.2551 19.9893L15.2551 19.979ZM15.2551 3.97925C15.2551 3.56504 15.5909 3.22925 16.0051 3.22925C16.4193 3.22925 16.7551 3.56504 16.7551 3.97925L16.7551 3.9895C16.755 4.4036 16.4193 4.7395 16.0051 4.7395C15.591 4.7395 15.2553 4.4036 15.2551 3.9895L15.2551 3.97925ZM11.2554 3.97925C11.2554 3.56504 11.5912 3.22925 12.0054 3.22925C12.4195 3.22938 12.7554 3.56512 12.7554 3.97925L12.7554 3.9895C12.7552 4.40352 12.4194 4.73937 12.0054 4.7395C11.5912 4.7395 11.2555 4.4036 11.2554 3.9895L11.2554 3.97925ZM7.25489 3.97924C7.25489 3.56512 7.59079 3.22938 8.00489 3.22924C8.41909 3.22924 8.75488 3.56504 8.75489 3.97924L8.75489 3.9895C8.75475 4.4036 8.41902 4.7395 8.00488 4.7395C7.59086 4.73937 7.25502 4.40352 7.25489 3.9895L7.25489 3.97924ZM3.25513 7.979C3.25527 7.5649 3.591 7.229 4.00513 7.229C4.41926 7.229 4.75499 7.5649 4.75513 7.979L4.75513 7.98925C4.75513 8.40347 4.41934 8.73925 4.00513 8.73925C3.59091 8.73925 3.25513 8.40347 3.25513 7.98925L3.25513 7.979ZM3.25513 3.97924C3.25514 3.56504 3.59092 3.22924 4.00513 3.22924C4.41934 3.22924 4.75512 3.56504 4.75513 3.97924L4.75513 3.9895C4.755 4.4036 4.41926 4.7395 4.00513 4.7395C3.591 4.7395 3.25526 4.4036 3.25513 3.9895L3.25513 3.97924Z"
+      :fill="color"
+    />
+    <path
+      d="M3.9145 11.9893C3.54171 11.9893 3.2395 12.2915 3.2395 12.6643L3.2395 16.0299C3.2395 18.6394 5.35496 20.7549 7.9645 20.7549L11.3301 20.7549C11.7029 20.7549 12.0051 20.4527 12.0051 20.0799C12.0051 19.7071 11.7029 19.4049 11.3301 19.4049L7.9645 19.4049C6.10054 19.4049 4.5895 17.8938 4.5895 16.0299L4.5895 12.6643C4.5895 12.2915 4.28729 11.9893 3.9145 11.9893Z"
+      fill="#171717"
+    />
+    <path
+      d="M20.0049 19.229C19.5909 19.2291 19.255 19.565 19.2549 19.979L19.2549 19.9893C19.2549 20.4034 19.5908 20.7391 20.0049 20.7393C20.4191 20.7393 20.7549 20.4035 20.7549 19.9893L20.7549 19.979C20.7547 19.5649 20.419 19.229 20.0049 19.229Z"
+      :fill="color"
+    />
+    <path
+      d="M20.0049 15.2292C19.5908 15.2294 19.2549 15.5651 19.2549 15.9792L19.2549 15.9895C19.255 16.4035 19.5909 16.7394 20.0049 16.7395C20.419 16.7395 20.7548 16.4036 20.7549 15.9895L20.7549 15.9792C20.7549 15.565 20.4191 15.2292 20.0049 15.2292Z"
+      :fill="color"
+    />
+    <path
+      d="M20.0049 11.2295C19.5908 11.2296 19.2549 11.5654 19.2549 11.9795L19.2549 11.989C19.2549 12.4031 19.5908 12.7389 20.0049 12.739C20.4191 12.739 20.7549 12.4032 20.7549 11.989L20.7549 11.9795C20.7549 11.5653 20.4191 11.2295 20.0049 11.2295Z"
+      :fill="color"
+    />
+    <path
+      d="M20.0049 7.229C19.5909 7.22913 19.255 7.56499 19.2549 7.979L19.2549 7.98925C19.2549 8.40339 19.5908 8.73912 20.0049 8.73925C20.4191 8.73925 20.7549 8.40347 20.7549 7.98925L20.7549 7.979C20.7547 7.5649 20.419 7.229 20.0049 7.229Z"
+      :fill="color"
+    />
+    <path
+      d="M20.0049 3.22924C19.5908 3.22938 19.2549 3.56512 19.2549 3.97924L19.2549 3.9895C19.255 4.40352 19.5909 4.73937 20.0049 4.7395C20.419 4.7395 20.7548 4.4036 20.7549 3.9895L20.7549 3.97924C20.7549 3.56504 20.4191 3.22924 20.0049 3.22924Z"
+      :fill="color"
+    />
+  </svg>
+</template>
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 16
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/icons/BottomRight.vue

@@ -0,0 +1,46 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M19.9841 8.73413C19.57 8.73399 19.2341 8.39826 19.2341 7.98413C19.2341 7.57 19.57 7.23426 19.9841 7.23413L19.9944 7.23413C20.4086 7.23413 20.7444 7.56991 20.7444 7.98413C20.7444 8.39834 20.4086 8.73413 19.9944 8.73413L19.9841 8.73413ZM3.98438 8.73413C3.57017 8.73412 3.23438 8.39833 3.23438 7.98413C3.23438 7.56992 3.57017 7.23413 3.98438 7.23413L3.99463 7.23413C4.40873 7.23426 4.74463 7.56999 4.74463 7.98413C4.74463 8.39826 4.40873 8.73399 3.99463 8.73413L3.98438 8.73413ZM3.98438 12.7339C3.57017 12.7339 3.23438 12.3981 3.23438 11.9839C3.23451 11.5698 3.57025 11.2339 3.98438 11.2339L3.99463 11.2339C4.40865 11.234 4.7445 11.5699 4.74463 11.9839C4.74463 12.398 4.40873 12.7337 3.99463 12.7339L3.98438 12.7339ZM3.98438 16.7344C3.57025 16.7344 3.23451 16.3985 3.23438 15.9844C3.23438 15.5702 3.57017 15.2344 3.98438 15.2344L3.99463 15.2344C4.40873 15.2345 4.74463 15.5702 4.74463 15.9844C4.7445 16.3984 4.40865 16.7342 3.99463 16.7344L3.98438 16.7344ZM7.98413 20.7341C7.57003 20.734 7.23413 20.3983 7.23413 19.9841C7.23413 19.57 7.57004 19.2343 7.98413 19.2341L7.99438 19.2341C8.4086 19.2341 8.74438 19.5699 8.74438 19.9841C8.74438 20.3983 8.4086 20.7341 7.99438 20.7341L7.98413 20.7341ZM3.98438 20.7341C3.57017 20.7341 3.23438 20.3983 3.23438 19.9841C3.23438 19.5699 3.57017 19.2341 3.98438 19.2341L3.99463 19.2341C4.40873 19.2343 4.74463 19.57 4.74463 19.9841C4.74463 20.3983 4.40873 20.734 3.99463 20.7341L3.98438 20.7341Z"
+      :fill="color"
+    />
+    <path
+      d="M11.9944 20.0748C11.9944 20.4475 12.2966 20.7498 12.6694 20.7498L16.035 20.7498C18.6446 20.7498 20.76 18.6343 20.76 16.0248L20.76 12.6591C20.76 12.2863 20.4578 11.9841 20.085 11.9841C19.7122 11.9841 19.41 12.2863 19.41 12.6591L19.41 16.0248C19.41 17.8887 17.899 19.3998 16.035 19.3998L12.6694 19.3998C12.2966 19.3998 11.9944 19.702 11.9944 20.0748Z"
+      fill="#171717"
+    />
+    <path
+      d="M19.2341 3.98437C19.2343 4.39839 19.5701 4.73424 19.9841 4.73437L19.9944 4.73437C20.4085 4.73437 20.7443 4.39847 20.7444 3.98437C20.7444 3.57016 20.4086 3.23437 19.9944 3.23437L19.9841 3.23437C19.57 3.23451 19.2341 3.57024 19.2341 3.98437Z"
+      :fill="color"
+    />
+    <path
+      d="M15.2344 3.98437C15.2345 4.39847 15.5702 4.73437 15.9844 4.73437L15.9946 4.73437C16.4086 4.73424 16.7445 4.39839 16.7446 3.98437C16.7446 3.57024 16.4087 3.2345 15.9946 3.23437L15.9844 3.23437C15.5702 3.23438 15.2344 3.57016 15.2344 3.98437Z"
+      :fill="color"
+    />
+    <path
+      d="M11.2346 3.98437C11.2348 4.39847 11.5705 4.73437 11.9846 4.73437L11.9941 4.73437C12.4083 4.73437 12.744 4.39847 12.7441 3.98437C12.7441 3.57016 12.4084 3.23437 11.9941 3.23437L11.9846 3.23437C11.5704 3.23437 11.2346 3.57016 11.2346 3.98437Z"
+      :fill="color"
+    />
+    <path
+      d="M7.23413 3.98437C7.23426 4.39839 7.57012 4.73423 7.98413 4.73437L7.99438 4.73437C8.40852 4.73437 8.74425 4.39847 8.74438 3.98437C8.74438 3.57016 8.4086 3.23437 7.99438 3.23437L7.98413 3.23437C7.57004 3.23451 7.23413 3.57024 7.23413 3.98437Z"
+      :fill="color"
+    />
+    <path
+      d="M3.23438 3.98437C3.23451 4.39847 3.57025 4.73437 3.98438 4.73437L3.99463 4.73437C4.40865 4.73424 4.7445 4.39839 4.74463 3.98437C4.74463 3.57024 4.40873 3.2345 3.99463 3.23437L3.98438 3.23437C3.57017 3.23438 3.23438 3.57016 3.23438 3.98437Z"
+      :fill="color"
+    />
+  </svg>
+</template>
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 16
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/icons/CreateBom.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M6.27273 1.5C5.32878 1.5 4.40602 1.77993 3.62116 2.30436C2.83627 2.82879 2.22454 3.57419 1.8633 4.44629C1.50207 5.3184 1.40755 6.27804 1.59172 7.20386C1.77587 8.12967 2.23042 8.9801 2.8979 9.64758C3.56539 10.3151 4.4158 10.7696 5.34163 10.9538C6.26744 11.1379 7.22707 11.0434 8.09918 10.6822C8.97127 10.3209 9.71667 9.7092 10.2411 8.92433C10.7655 8.13947 11.0455 7.21671 11.0455 6.27274C11.0455 5.00693 10.5426 3.79297 9.64756 2.89792C8.7525 2.00286 7.53853 1.5 6.27273 1.5ZM6.27273 9.13638C5.70636 9.13638 5.1527 8.96843 4.68179 8.65378C4.21086 8.33912 3.84381 7.89188 3.62707 7.36861C3.41034 6.84535 3.35364 6.26957 3.46412 5.71408C3.57461 5.15859 3.84735 4.64833 4.24783 4.24784C4.64832 3.84735 5.15857 3.57461 5.71407 3.46413C6.26956 3.35364 6.84534 3.41034 7.36861 3.62707C7.89187 3.84383 8.33909 4.21086 8.65377 4.68179C8.96842 5.15271 9.13637 5.70637 9.13637 6.27274C9.13637 7.03223 8.83467 7.76061 8.29763 8.29764C7.7606 8.83468 7.03222 9.13638 6.27273 9.13638ZM17.7273 11.0455C18.6713 11.0455 19.594 10.7656 20.3788 10.2411C21.1636 9.71668 21.7755 8.9713 22.1367 8.09919C22.4979 7.22709 22.5924 6.26745 22.4084 5.34163C22.2241 4.4158 21.7696 3.56539 21.1022 2.89792C20.4346 2.23042 19.5842 1.77586 18.6583 1.59171C17.7326 1.40756 16.7729 1.50208 15.9008 1.8633C15.0287 2.22454 14.2833 2.83627 13.7589 3.62116C13.2345 4.40602 12.9545 5.32878 12.9545 6.27274C12.9545 7.53854 13.4574 8.75252 14.3524 9.64758C15.2475 10.5426 16.4615 11.0455 17.7273 11.0455ZM17.7273 3.40909C18.2937 3.40909 18.8473 3.57706 19.3183 3.89171C19.7891 4.20637 20.1562 4.65361 20.3729 5.17688C20.5898 5.70014 20.6465 6.27592 20.5359 6.83141C20.4254 7.3869 20.1526 7.89715 19.7522 8.29764C19.3517 8.69813 18.8414 8.97086 18.2859 9.08136C17.7305 9.19186 17.1547 9.13514 16.6315 8.9184C16.1082 8.70166 15.6609 8.33461 15.3463 7.8637C15.0316 7.39276 14.8636 6.83913 14.8636 6.27274C14.8636 5.51326 15.1653 4.78488 15.7024 4.24784C16.2393 3.71081 16.9678 3.40909 17.7273 3.40909ZM6.27273 12.9546C5.32878 12.9546 4.40602 13.2345 3.62116 13.7589C2.83627 14.2834 2.22454 15.0288 1.8633 15.9008C1.50207 16.7729 1.40755 17.7326 1.59172 18.6583C1.77587 19.5842 2.23042 20.4347 2.8979 21.1022C3.56539 21.7696 4.4158 22.2241 5.34163 22.4084C6.26744 22.5924 7.22707 22.4979 8.09918 22.1367C8.97127 21.7755 9.71667 21.1638 10.2411 20.3788C10.7655 19.594 11.0455 18.6713 11.0455 17.7273C11.0455 16.4615 10.5426 15.2475 9.64756 14.3525C8.7525 13.4574 7.53853 12.9546 6.27273 12.9546ZM6.27273 20.5909C5.70636 20.5909 5.1527 20.4231 4.68179 20.1083C4.21086 19.7937 3.84381 19.3464 3.62707 18.8231C3.41034 18.3 3.35364 17.7242 3.46412 17.1687C3.57461 16.6131 3.84735 16.1028 4.24783 15.7024C4.64832 15.3019 5.15857 15.0292 5.71407 14.9187C6.26956 14.8082 6.84534 14.8649 7.36861 15.0816C7.89187 15.2984 8.33909 15.6654 8.65377 16.1364C8.96842 16.6072 9.13637 17.161 9.13637 17.7273C9.13637 18.4867 8.83467 19.2152 8.29763 19.7522C7.7606 20.2893 7.03222 20.5909 6.27273 20.5909ZM22.5 17.7273C22.5 17.9804 22.3994 18.2232 22.2205 18.4023C22.0414 18.5812 21.7986 18.6818 21.5455 18.6818H18.6818V21.5455C18.6818 21.7986 18.5812 22.0414 18.4023 22.2205C18.2233 22.3994 17.9804 22.5 17.7273 22.5C17.4741 22.5 17.2313 22.3994 17.0522 22.2205C16.8733 22.0414 16.7727 21.7986 16.7727 21.5455V18.6818H13.9091C13.6559 18.6818 13.4131 18.5812 13.2341 18.4023C13.0551 18.2232 12.9545 17.9804 12.9545 17.7273C12.9545 17.4741 13.0551 17.2313 13.2341 17.0524C13.4131 16.8733 13.6559 16.7727 13.9091 16.7727H16.7727V13.9091C16.7727 13.6559 16.8733 13.4132 17.0522 13.2342C17.2313 13.0551 17.4741 12.9546 17.7273 12.9546C17.9804 12.9546 18.2233 13.0551 18.4023 13.2342C18.5812 13.4132 18.6818 13.6559 18.6818 13.9091V16.7727H21.5455C21.7986 16.7727 22.0414 16.8733 22.2205 17.0524C22.3994 17.2313 22.5 17.4741 22.5 17.7273Z"
+      :fill="color"
+    />
+  </svg>
+</template>
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 16
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/icons/Left.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M3.25 19.9998V4C3.25 3.58579 3.58579 3.25 4 3.25C4.41421 3.25 4.75 3.58579 4.75 4V19.9998C4.75 20.414 4.41421 20.7498 4 20.7498C3.58579 20.7498 3.25 20.414 3.25 19.9998ZM8.01001 19.2498C8.42414 19.2498 8.75988 19.5857 8.76001 19.9998C8.76001 20.414 8.42422 20.7498 8.01001 20.7498H7.99976C7.58565 20.7496 7.24976 20.4139 7.24976 19.9998C7.24989 19.5857 7.58574 19.2499 7.99976 19.2498H8.01001ZM12.0098 19.2498C12.4239 19.2498 12.7596 19.5857 12.7598 19.9998C12.7598 20.414 12.424 20.7498 12.0098 20.7498H12.0002C11.586 20.7498 11.2502 20.414 11.2502 19.9998C11.2504 19.5857 11.5861 19.2498 12.0002 19.2498H12.0098ZM16.0103 19.2498C16.4243 19.2499 16.7601 19.5857 16.7603 19.9998C16.7603 20.4139 16.4243 20.7496 16.0103 20.7498H16C15.5858 20.7498 15.25 20.414 15.25 19.9998C15.2501 19.5857 15.5859 19.2498 16 19.2498H16.0103ZM20.01 19.2498C20.4241 19.2498 20.7599 19.5857 20.76 19.9998C20.76 20.414 20.4242 20.7498 20.01 20.7498H19.9998C19.5857 20.7496 19.2498 20.4139 19.2498 19.9998C19.2499 19.5857 19.5857 19.2499 19.9998 19.2498H20.01ZM20.01 15.25C20.4242 15.25 20.76 15.5858 20.76 16C20.76 16.4142 20.4242 16.75 20.01 16.75H19.9998C19.5857 16.7499 19.2498 16.4141 19.2498 16C19.2498 15.5859 19.5857 15.2501 19.9998 15.25H20.01ZM20.01 11.2502C20.4242 11.2502 20.76 11.586 20.76 12.0002C20.7599 12.4143 20.4241 12.7502 20.01 12.7502H19.9998C19.5857 12.7501 19.2499 12.4143 19.2498 12.0002C19.2498 11.5861 19.5857 11.2504 19.9998 11.2502H20.01ZM20.01 7.24976C20.4241 7.24976 20.7599 7.58566 20.76 7.99976C20.76 8.41397 20.4242 8.74975 20.01 8.74976H19.9998C19.5857 8.74962 19.2498 8.41389 19.2498 7.99976C19.2499 7.58574 19.5857 7.24989 19.9998 7.24976H20.01ZM8.01001 3.25C8.42422 3.25001 8.76001 3.58579 8.76001 4C8.76001 4.41421 8.42422 4.74999 8.01001 4.75H7.99976C7.58565 4.74987 7.24976 4.41413 7.24976 4C7.24976 3.58587 7.58565 3.25013 7.99976 3.25H8.01001ZM12.0098 3.25C12.424 3.25 12.7598 3.58579 12.7598 4C12.7598 4.41421 12.424 4.75 12.0098 4.75H12.0002C11.586 4.75 11.2502 4.41421 11.2502 4C11.2502 3.58579 11.586 3.25 12.0002 3.25H12.0098ZM16.0103 3.25C16.4243 3.25014 16.7603 3.58587 16.7603 4C16.7603 4.41413 16.4243 4.74986 16.0103 4.75H16C15.5858 4.75 15.25 4.41421 15.25 4C15.25 3.58579 15.5858 3.25 16 3.25H16.0103ZM20.01 3.25C20.4242 3.25001 20.76 3.58579 20.76 4C20.76 4.41421 20.4242 4.74999 20.01 4.75H19.9998C19.5857 4.74987 19.2498 4.41413 19.2498 4C19.2498 3.58587 19.5857 3.25013 19.9998 3.25H20.01Z"
+      :fill="color"
+    />
+  </svg>
+</template>
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 16
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/icons/Line.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
+    <rect x="3" y="11.25" width="18" height="1.5" :fill="color" />
+  </svg>
+</template>
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 16
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/icons/RectangleDot.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
+    <rect x="3" y="11.25" width="4.45312" height="1.5" :fill="color" />
+    <rect x="9.79688" y="11.25" width="4.45312" height="1.5" :fill="color" />
+    <rect x="16.5938" y="11.25" width="4.45312" height="1.5" :fill="color" />
+  </svg>
+</template>
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 16
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/icons/Right.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M4.01221 19.2498C4.42622 19.2499 4.76207 19.5857 4.76221 19.9998C4.76221 20.4139 4.4263 20.7496 4.01221 20.7498H4.00195C3.58774 20.7498 3.25195 20.414 3.25195 19.9998C3.25209 19.5857 3.58782 19.2498 4.00195 19.2498H4.01221ZM8.01196 19.2498C8.42609 19.2498 8.76183 19.5857 8.76196 19.9998C8.76196 20.414 8.42617 20.7498 8.01196 20.7498H8.00171C7.58761 20.7496 7.25171 20.4139 7.25171 19.9998C7.25184 19.5857 7.58769 19.2499 8.00171 19.2498H8.01196ZM12.0117 19.2498C12.4258 19.2498 12.7616 19.5857 12.7617 19.9998C12.7617 20.414 12.4259 20.7498 12.0117 20.7498H12.0022C11.588 20.7498 11.2522 20.414 11.2522 19.9998C11.2523 19.5857 11.5881 19.2498 12.0022 19.2498H12.0117ZM16.0122 19.2498C16.4262 19.2499 16.7621 19.5857 16.7622 19.9998C16.7622 20.4139 16.4263 20.7496 16.0122 20.7498H16.002C15.5878 20.7497 15.252 20.414 15.252 19.9998C15.2521 19.5857 15.5878 19.2498 16.002 19.2498H16.0122ZM19.262 19.9998V4C19.262 3.5858 19.5978 3.25002 20.012 3.25C20.4262 3.25 20.762 3.58579 20.762 4V19.9998C20.762 20.414 20.4262 20.7498 20.012 20.7498C19.5978 20.7497 19.262 20.414 19.262 19.9998ZM4.01221 15.25C4.4263 15.2501 4.76221 15.5859 4.76221 16C4.76221 16.4141 4.4263 16.7499 4.01221 16.75H4.00195C3.58774 16.75 3.25195 16.4142 3.25195 16C3.25195 15.5858 3.58774 15.25 4.00195 15.25H4.01221ZM4.01221 11.2502C4.4263 11.2504 4.76221 11.5861 4.76221 12.0002C4.76208 12.4143 4.42622 12.7501 4.01221 12.7502H4.00195C3.58782 12.7502 3.25208 12.4143 3.25195 12.0002C3.25195 11.586 3.58774 11.2502 4.00195 11.2502H4.01221ZM4.01221 7.24976C4.42622 7.24989 4.76208 7.58574 4.76221 7.99976C4.76221 8.41388 4.4263 8.74962 4.01221 8.74976H4.00195C3.58774 8.74976 3.25195 8.41397 3.25195 7.99976C3.25209 7.58565 3.58782 7.24976 4.00195 7.24976H4.01221ZM4.01221 3.25C4.4263 3.25014 4.76221 3.58587 4.76221 4C4.76221 4.41413 4.4263 4.74986 4.01221 4.75H4.00195C3.58774 4.75 3.25195 4.41421 3.25195 4C3.25195 3.58579 3.58774 3.25 4.00195 3.25H4.01221ZM8.01196 3.25C8.42617 3.25001 8.76196 3.58579 8.76196 4C8.76196 4.41421 8.42617 4.74999 8.01196 4.75H8.00171C7.58761 4.74987 7.25171 4.41413 7.25171 4C7.25171 3.58587 7.58761 3.25013 8.00171 3.25H8.01196ZM12.0117 3.25C12.4259 3.25 12.7617 3.58579 12.7617 4C12.7617 4.41421 12.4259 4.75 12.0117 4.75H12.0022C11.588 4.75 11.2522 4.41421 11.2522 4C11.2522 3.58579 11.588 3.25 12.0022 3.25H12.0117ZM16.0122 3.25C16.4263 3.25011 16.7622 3.58585 16.7622 4C16.7622 4.41415 16.4263 4.74989 16.0122 4.75H16.002C15.5878 4.74997 15.252 4.4142 15.252 4C15.252 3.5858 15.5878 3.25003 16.002 3.25H16.0122Z"
+      :fill="color"
+    />
+  </svg>
+</template>
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 16
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/icons/SmallDot.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
+    <rect x="4.5" y="11.25" width="1.5" height="1.5" :fill="color" />
+    <rect x="11.25" y="11.25" width="1.5" height="1.5" :fill="color" />
+    <rect x="18" y="11.25" width="1.5" height="1.5" :fill="color" />
+  </svg>
+</template>
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 16
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/icons/Top.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M19.9998 19.2498C20.4139 19.2498 20.7496 19.5857 20.7498 19.9998C20.7498 20.414 20.414 20.7498 19.9998 20.7498H4C3.58579 20.7498 3.25 20.414 3.25 19.9998C3.25013 19.5857 3.58587 19.2498 4 19.2498H19.9998ZM4.01025 15.25C4.42435 15.2501 4.76025 15.5859 4.76025 16C4.76025 16.4141 4.42435 16.7499 4.01025 16.75H4C3.58579 16.75 3.25 16.4142 3.25 16C3.25 15.5858 3.58579 15.25 4 15.25H4.01025ZM20.01 15.25C20.4242 15.25 20.76 15.5858 20.76 16C20.76 16.4142 20.4242 16.75 20.01 16.75H19.9998C19.5857 16.7499 19.2498 16.4141 19.2498 16C19.2498 15.5859 19.5857 15.2501 19.9998 15.25H20.01ZM4.01025 11.2502C4.42435 11.2504 4.76025 11.5861 4.76025 12.0002C4.76012 12.4143 4.42427 12.7501 4.01025 12.7502H4C3.58587 12.7502 3.25013 12.4143 3.25 12.0002C3.25 11.586 3.58579 11.2502 4 11.2502H4.01025ZM20.01 11.2502C20.4242 11.2502 20.76 11.586 20.76 12.0002C20.7599 12.4143 20.4241 12.7502 20.01 12.7502H19.9998C19.5857 12.7501 19.2499 12.4143 19.2498 12.0002C19.2498 11.5861 19.5857 11.2504 19.9998 11.2502H20.01ZM4.01025 7.24976C4.42427 7.24989 4.76012 7.58574 4.76025 7.99976C4.76025 8.41388 4.42435 8.74962 4.01025 8.74976H4C3.58579 8.74976 3.25 8.41397 3.25 7.99976C3.25013 7.58565 3.58587 7.24976 4 7.24976H4.01025ZM20.01 7.24976C20.4241 7.24976 20.7599 7.58566 20.76 7.99976C20.76 8.41397 20.4242 8.74975 20.01 8.74976H19.9998C19.5857 8.74962 19.2498 8.41389 19.2498 7.99976C19.2499 7.58574 19.5857 7.24989 19.9998 7.24976H20.01ZM4.01025 3.25C4.42435 3.25014 4.76025 3.58587 4.76025 4C4.76025 4.41413 4.42435 4.74986 4.01025 4.75H4C3.58579 4.75 3.25 4.41421 3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H4.01025ZM8.01001 3.25C8.42422 3.25001 8.76001 3.58579 8.76001 4C8.76001 4.41421 8.42422 4.74999 8.01001 4.75H7.99976C7.58565 4.74987 7.24976 4.41413 7.24976 4C7.24976 3.58587 7.58565 3.25013 7.99976 3.25H8.01001ZM12.0098 3.25C12.424 3.25 12.7598 3.58579 12.7598 4C12.7598 4.41421 12.424 4.75 12.0098 4.75H12.0002C11.586 4.75 11.2502 4.41421 11.2502 4C11.2502 3.58579 11.586 3.25 12.0002 3.25H12.0098ZM16.0103 3.25C16.4243 3.25014 16.7603 3.58587 16.7603 4C16.7603 4.41413 16.4243 4.74986 16.0103 4.75H16C15.5858 4.75 15.25 4.41421 15.25 4C15.25 3.58579 15.5858 3.25 16 3.25H16.0103ZM20.01 3.25C20.4242 3.25001 20.76 3.58579 20.76 4C20.76 4.41421 20.4242 4.74999 20.01 4.75H19.9998C19.5857 4.74987 19.2498 4.41413 19.2498 4C19.2498 3.58587 19.5857 3.25013 19.9998 3.25H20.01Z"
+      :fill="color"
+    />
+  </svg>
+</template>
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 16
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>