{"version":3,"file":"DDivider-09966c1f.js","sources":["../../client/packages/design-system/src/atoms/DDivider.vue"],"sourcesContent":["<template>\n    <hr class=\"d-divder\" :class=\"`${spacing} ${shade}`\">\n</template>\n\n<script setup lang=\"ts\">\n    import {computed} from \"vue\";\n\n    import {getComponentShade} from \"../utils/theme\";\n\n    import type {ComponentThemes} from \"@songfinch/types\";\n\n    type DDividerPropsType = {\n        spacing?: \"large\" | \"medium\" | \"small\" | \"tight\";\n        theme?: ComponentThemes;\n    };\n\n    const props = withDefaults(defineProps<DDividerPropsType>(), {\n        spacing: \"medium\",\n        theme: \"light\",\n    });\n\n    const shade = computed(() => getComponentShade(props.theme));\n</script>\n\n<style lang=\"scss\" scoped>\n.d-divder {\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-bottom: 1px solid;\n  background-color: transparent;\n}\n\n.dark {\n  border-color: var(--white-tint-20);\n}\n\n.light {\n  border-color: var(--soft-black-tint-20);\n}\n\n.large {\n  padding-top: var(--size-64);\n  margin-bottom: var(--size-64);\n}\n\n.medium {\n  padding-top: var(--size-48);\n  margin-bottom: var(--size-48);\n}\n\n.small {\n  padding-top: var(--size-24);\n  margin-bottom: var(--size-24);\n}\n\n.tight {\n  padding-top: var(--size-8);\n  margin-bottom: var(--size-8);\n}\n</style>\n"],"names":["props","__props","shade","computed","getComponentShade"],"mappings":"wzBAgBI,MAAMA,EAAQC,EAKRC,EAAQC,EAAS,IAAMC,EAAkBJ,EAAM,KAAK,CAAC"}