{"version":3,"file":"Stack-57d0ed80.js","sources":["../../src/components/ds/Loader.svg?component","../../src/theme/index.ts","../../src/components/ds/Loader.vue","../../src/components/ds/Button.vue","../../src/components/ds/layout/Stack.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n  version: \"1.1\",\n  xmlns: \"http://www.w3.org/2000/svg\",\n  \"xmlns:xlink\": \"http://www.w3.org/1999/xlink\",\n  x: \"0px\",\n  y: \"0px\",\n  width: \"40px\",\n  height: \"40px\",\n  viewBox: \"0 0 50 50\",\n  style: {\"enable-background\":\"new 0 0 50 50\"},\n  \"xml:space\": \"preserve\"\n}\nconst _hoisted_2 = /*#__PURE__*/_createElementVNode(\"path\", {\n  fill: \"#000\",\n  d: \"M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z\"\n}, [\n  /*#__PURE__*/_createElementVNode(\"animateTransform\", {\n    attributeType: \"xml\",\n    attributeName: \"transform\",\n    type: \"rotate\",\n    from: \"0 25 25\",\n    to: \"360 25 25\",\n    dur: \"0.6s\",\n    repeatCount: \"indefinite\"\n  })\n], -1)\nconst _hoisted_3 = [\n  _hoisted_2\n]\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, _hoisted_3))\n}\nexport default { render: render }","/** Spacing is based on an assumed root font size of 16px */\nexport const theme = {\n  spacing: {\n    none: '0',\n    gap2: '0.125rem',\n    gap4: '0.25rem',\n    gap8: '0.5rem',\n    gap12: '0.75rem',\n    gap16: '1rem',\n    gap24: '1.5rem',\n    gap32: '2rem'\n  },\n  icons: {\n    icon16: '1rem',\n    icon24: '1.5rem',\n    icon32: '2rem'\n  }\n}\n","<script setup lang=\"ts\">\nimport { computed, type CSSProperties } from 'vue'\nimport Loader from './Loader.svg?component'\nimport { theme } from '@/theme'\n\ninterface Props {\n  color?: CSSProperties['color']\n  fill?: CSSProperties['fill']\n  size?: keyof typeof theme['icons']\n}\n\nconst props = defineProps({\n  color: null,\n  fill: null,\n  size: { default: 'icon32' }\n})\nconst loaderColor = computed(() => props.color ?? props.fill ?? '#000')\n</script>\n\n<template>\n  <Loader :fill=\"loaderColor\" />\n</template>\n\n<style scoped>\nsvg {\n  width: v-bind('theme.icons[size]');\n  aspect-ratio: 1 / 1;\n}\nsvg :deep(path) {\n  fill: v-bind(color);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { RouterLink, type RouteLocationRaw } from 'vue-router'\nimport { computed, type CSSProperties } from 'vue'\n\nexport interface Props {\n  /**\n   * primary = solid\n   * secondary = outlined\n   * tertiary = floating (no outline or bg)\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'icon' | 'link'\n  gray?: boolean\n  size?: 'md' | 'sm' | 'xs'\n  to?: RouteLocationRaw\n  disabled?: boolean\n  /** An optional image source to set as the background */\n  imgSrc?: string\n  imgFit?: boolean\n  loading?: boolean\n  type?: 'button' | 'submit'\n  alignSelf?: CSSProperties['align-self']\n}\n\nconst props = defineProps({\n  variant: { default: 'primary' },\n  gray: { type: Boolean },\n  size: { default: 'md' },\n  to: { default: undefined },\n  disabled: { type: Boolean },\n  imgSrc: null,\n  imgFit: { type: Boolean },\n  loading: { type: Boolean },\n  type: { default: 'button' },\n  alignSelf: null\n})\n\nconst src = computed(() => `url('${props.imgSrc}')`)\n\nconst component = props.to ? RouterLink : 'button'\ndefineEmits(['click'])\n</script>\n\n<template>\n  <Component\n    :is=\"component\"\n    :to=\"to\"\n    :disabled=\"disabled\"\n    :type=\"type\"\n    :class=\"[\n      'button',\n      variant,\n      size,\n      gray && 'gray',\n      imgSrc && 'has-image',\n      imgFit && 'fit-image'\n    ]\"\n    v-bind=\"$attrs\"\n    @click=\"$emit('click', $event)\"\n  >\n    <Loader\n      v-if=\"loading\"\n      class=\"center\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"currentColor\"\n    />\n    <span :class=\"loading && 'loading'\"><slot></slot></span>\n  </Component>\n</template>\n\n<style scoped lang=\"scss\">\n@import \"../../assets/sass/variables.scss\";\n:is(.button) {\n  user-select: none;\n  cursor: pointer;\n  display: inline-flex;\n  font-weight: 400;\n  text-align: center;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  background: transparent;\n  color: #000;\n  position: relative;\n  border: 1px solid transparent;\n  line-height: 1.5;\n  align-self: v-bind(alignSelf);\n\n  /** @todo - should assign actual colors */\n  &.gray {\n    filter: saturate(0%);\n  }\n\n  &.link {\n    text-decoration: underline;\n    &:hover {\n      color: #cc1e4e;\n    }\n    &:active {\n      transform: none;\n      color: hsl(343deg 60% 35%);\n      &::after {\n        background-color: transparent;\n      }\n    }\n  }\n\n  /** Reduce the specifity requirements of overrides */\n  &:where(:not(.link)) {\n    &:where(.md) {\n      font-size: 1rem;\n      padding: 0.5rem 1rem;\n      min-width: 80px;\n    }\n    &:where(.sm) {\n      font-size: 0.875rem;\n      padding: 0.375rem 0.875rem;\n      min-width: 70px;\n    }\n    &:where(.xs) {\n      font-size: 0.75rem;\n      padding: 0.25rem 0.75rem;\n      min-width: 60px;\n    }\n  }\n  /* Modified from Bootstrap */\n  &, &::after {\n    transition:\n      color 0.05s ease-in-out,\n      background-color 0.15s ease-in-out,\n      border-color 0.15s ease-in-out,\n      box-shadow 0.15s ease-in-out,\n      transform 0.15s ease-in-out;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n    border-radius: 6px;\n  }\n  &:hover {\n    transform: perspective(100px) translateZ(1px);\n    &::after {\n      background-color: rgba(255,255,255,0.1);\n    }\n  }\n  &:active {\n    transform: translateY(1px);\n    &::after {\n      background-color: rgba(0,0,0,0.02);\n    }\n  }\n  &:disabled {\n    border: 1px solid $disabled;\n    cursor: default;\n    &:hover {\n      border-color: $disabled;\n    }\n    &::after {\n      display: none;\n    }\n  }\n}\n.button:where(.primary) {\n  background: rgb(249, 98, 89) linear-gradient(133deg, rgba(249,98,89,1) 0%, rgba(255,83,122,1) 100%);\n  color: #fff;\n  &:disabled {\n    background-color: $disabled;\n    background-image: none;\n  }\n}\n.button:where(.secondary) {\n  border: 1px solid #000;\n  &:hover {\n    border-color: rgba(0, 0, 0, 0.7);\n    &::after {\n      background: rgba(255,255,255,0.4);\n    }\n  }\n  &:active::after {\n    background: rgba(0,0,0,0.02);\n  }\n  &:disabled {\n    color: $disabled;\n    &::after {\n      display: none;\n    }\n  }\n}\n.button:where(.tertiary) {\n  border-color: transparent;\n  &:hover::after {\n    background: rgba(0,0,0,0.02);\n  }\n  &:active::after {\n    background: rgba(0,0,0,0.04);\n  }\n  &:disabled {\n    color: $disabled;\n    border-color: transparent;\n    background: rgba(0,0,0,0.02);\n    &:hover {\n      border-color: transparent;\n    }\n    &::after {\n      display: none;\n    }\n  }\n}\n.has-image {\n  background-image: v-bind(src);\n  background-size: cover;\n  border-width: 0;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n.fit-image {\n  background-size: contain;\n}\n\n.icon {\n  padding: 5px;\n}\n.loading {\n  color: transparent;\n}\n\n.center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n</style>\n","<script setup lang=\"ts\">\n/** https://every-layout.dev/layouts/stack/ */\nimport { theme } from '@/theme'\nimport { type FunctionalComponent, computed } from 'vue'\n\ninterface Props {\n  space?: keyof typeof theme.spacing\n  is?: FunctionalComponent | string\n  /** Takes the place of https://every-layout.dev/layouts/center/ */\n  center?: boolean\n}\n\nconst props = defineProps({\n  space: { default: 'gap16' },\n  is: { default: 'div' },\n  center: { type: Boolean }\n})\nconst align = computed(() => props.center ? 'center' : 'stretch')\n</script>\n\n<template>\n  <Component\n    :is=\"is\"\n    class=\"stack\"\n  >\n    <slot></slot>\n  </Component>\n</template>\n\n<style scoped>\n.stack {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: v-bind(align);\n  gap: v-bind('theme.spacing[props.space]');\n  flex: 1;\n}\n.stack :deep(> *) {\n  margin: 0;\n}\n</style>\n"],"names":["_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_3","render","_ctx","_cache","_openBlock","_createElementBlock","Loader","theme","loaderColor","computed","props","src","component","RouterLink","align"],"mappings":"oJAEA,MAAMA,EAAa,CACjB,QAAS,MACT,MAAO,6BACP,cAAe,+BACf,EAAG,MACH,EAAG,MACH,MAAO,OACP,OAAQ,OACR,QAAS,YACT,MAAO,CAAC,oBAAoB,eAAe,EAC3C,YAAa,UACf,EACMC,EAA0BC,EAAoB,OAAQ,CAC1D,KAAM,OACN,EAAG,6KACL,EAAG,CACYA,EAAoB,mBAAoB,CACnD,cAAe,MACf,cAAe,YACf,KAAM,SACN,KAAM,UACN,GAAI,YACJ,IAAK,OACL,YAAa,YACjB,CAAG,CACH,EAAG,EAAE,EACCC,EAAa,CACjBF,CACF,EAEO,SAASG,EAAOC,EAAMC,EAAQ,CACnC,OAAQC,EAAY,EAAEC,EAAoB,MAAOR,EAAYG,CAAU,CACzE,CACA,MAAeM,EAAA,CAAE,OAAQL,CAAM,EClClBM,EAAQ,CACnB,QAAS,CACP,KAAM,IACN,KAAM,WACN,KAAM,UACN,KAAM,SACN,MAAO,UACP,MAAO,OACP,MAAO,SACP,MAAO,MACT,EACA,MAAO,CACL,OAAQ,OACR,OAAQ,SACR,OAAQ,MACV,CACF,0JCDA,MAAAC,EAAAC,EAAA,IAAAC,EAAA,OAAAA,EAAA,MAAA,MAAA,8aCoBA,MAAAC,EAAAF,EAAA,IAAA,QAAAC,EAAA,MAAA,IAAA,EAEAE,EAAAF,EAAA,GAAAG,EAAA,osBCrBA,MAAAC,EAAAL,EAAA,IAAAC,EAAA,OAAA,SAAA,SAAA"}