@indielayer/ui 1.18.0 → 2.0.0

package/src/components/button/Button.vue

@@ -1,8 +1,11 @@
 <script lang="ts">
+import { variantBooleanProps } from '../../common/props'
+
 const buttonProps = {
   ...useCommon.props(),
   ...useColors.props(),
   ...useInteractive.props(),
+  ...variantBooleanProps(),
   tag: {
     type: String,
     default: 'button',
@@ -15,19 +18,16 @@ const buttonProps = {
   iconLeft: String,
   iconRight: String,
   to: [String, Object],
-  outlined: Boolean,
-  rounded: Boolean,
-  glow: Boolean,
-  ghost: Boolean,
-  light: Boolean,
-  block: Boolean,
-  flat: Boolean,
 }
 
 export type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>
 
 type InternalClasses = 'wrapper' | 'iconLeft' | 'iconRight'
-type InternalExtraData = { isButtonGroup: boolean; }
+type InternalExtraData = {
+  isButtonGroup: boolean;
+  isInsideInputGroup: boolean;
+  inputGroupPosition: import('../../common/inputGroupRadius').InputGroupPosition | undefined;
+}
 export interface ButtonTheme extends ThemeComponent<ButtonProps, InternalClasses, InternalExtraData> {}
 
 export default {
@@ -39,34 +39,73 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, inject, useAttrs, unref, type ExtractPublicPropTypes } from 'vue'
+import { computed, ref, inject, onMounted, onUnmounted, useAttrs, unref, type ExtractPublicPropTypes } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 import { useColors } from '../../composables/useColors'
 import { useCommon } from '../../composables/useCommon'
 import { useInteractive } from '../../composables/useInteractive'
-import { injectButtonGroupKey } from '../../composables/keys'
+import { injectButtonGroupKey, injectInputGroupKey } from '../../composables/keys'
 
 import XLoader from '../loader/Loader.vue'
 import XIcon from '../icon/Icon.vue'
 
 const props = defineProps(buttonProps)
+const resolvedProps = useResolvedComponentProps('Button', props)
 
 const elRef = ref<HTMLElement | null>(null)
 
-// Button group props
 const buttonGroup = inject(injectButtonGroupKey, {
   isButtonGroup: false,
   groupProps: {},
 })
 
+const inputGroup = inject(injectInputGroupKey, {
+  registerChild: () => {},
+  unregisterChild: () => {},
+  registerInput: () => {},
+  unregisterInput: () => {},
+  getPosition: () => 'only',
+  childOrder: computed(() => []),
+  isInsideInputGroup: false,
+  groupProps: {},
+})
+
+const childId = `btn-${Math.random().toString(36).slice(2)}`
+
+onMounted(() => {
+  if (inputGroup.isInsideInputGroup) inputGroup.registerChild(childId)
+})
+
+onUnmounted(() => {
+  if (inputGroup.isInsideInputGroup) inputGroup.unregisterChild(childId)
+})
+
 const { isButtonGroup } = buttonGroup
-const computedSize = computed(() => buttonGroup.groupProps.size || props.size)
-const computedFlat = computed(() => buttonGroup.groupProps.flat || props.flat)
-const computedColor = computed(() => props.color || buttonGroup.groupProps.color)
-const computedGhost = computed(() => props.ghost || buttonGroup.groupProps.ghost)
-const computedLight = computed(() => props.light || buttonGroup.groupProps.light)
-const computedOutlined = computed(() => props.outlined || buttonGroup.groupProps.outlined)
-const computedDisabled = computed(() => props.disabled || buttonGroup.groupProps.disabled)
+const isInsideInputGroup = computed(() => inputGroup.isInsideInputGroup)
+const inputGroupPosition = computed(() => {
+  if (!inputGroup.isInsideInputGroup) return undefined
+
+  void inputGroup.childOrder.value
+
+  return inputGroup.getPosition(childId)
+})
+
+const group = () => buttonGroup.groupProps
+
+const computedSize = computed(() => {
+  if (inputGroup.isInsideInputGroup && inputGroup.groupProps?.size) {
+    return inputGroup.groupProps.size
+  }
+
+  return group().size ?? resolvedProps.value.size
+})
+const computedFlat = computed(() => group().flat ?? resolvedProps.value.flat)
+const computedColor = computed(() => resolvedProps.value.color ?? group().color)
+const computedGhost = computed(() => group().ghost ?? resolvedProps.value.ghost)
+const computedLight = computed(() => group().light ?? resolvedProps.value.light)
+const computedOutlined = computed(() => group().outlined ?? resolvedProps.value.outlined)
+const computedDisabled = computed(() => props.disabled || group().disabled || !!inputGroup.groupProps?.disabled)
 const computedIconLeft = computed(() => props.icon || props.iconLeft)
 
 const attrs = useAttrs()
@@ -81,15 +120,17 @@ const computedProps = computed(() => ({
   outlined: unref(computedOutlined),
   disabled: unref(computedDisabled),
   loading: props.loading,
-  block: props.block,
-  glow: props.glow,
+  block: resolvedProps.value.block,
+  glow: resolvedProps.value.glow,
   iconLeft: unref(computedIconLeft),
   iconRight: props.iconRight,
-  rounded: props.rounded,
+  rounded: resolvedProps.value.rounded,
 }))
 
 const { className, classes, styles } = useTheme('Button', {}, computedProps, {
   isButtonGroup,
+  isInsideInputGroup,
+  inputGroupPosition,
 })
 
 const { focus, blur } = useInteractive(elRef)
@@ -105,9 +146,9 @@ defineExpose({ focus, blur })
     :class="[
       className,
       $style['button'],
-      (glow && !computedDisabled && !loading) ? $style['button--glow'] : '',
+      (resolvedProps.glow && !computedDisabled && !loading) ? $style['button--glow'] : '',
       classes.wrapper,
-      { 'w-full': block }
+      { 'w-full': resolvedProps.block }
     ]"
     :style="styles"
     :aria-busy="loading ? 'true' : null"
@@ -147,45 +188,47 @@ defineExpose({ focus, blur })
   </component>
 </template>
 
-<style lang="postcss" scoped module>
+<style scoped module>
 .button {
   color: var(--x-button-text);
   background-color: var(--x-button-bg);
   border-color: var(--x-button-border);
+}
 
-  &--glow {
-    box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-button-glow), 0 4px 6px -4px var(--x-button-glow);
-  }
+.button--glow {
+  box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-button-glow), 0 4px 6px -4px var(--x-button-glow);
+}
 
-  &:hover {
-    color: var(--x-button-text-hover, var(--x-button-text));
-    background-color: var(--x-button-bg-hover, var(--x-button-bg));
-    border-color: var(--x-button-border-hover, var(--x-button-border));
-  }
+.button:hover {
+  color: var(--x-button-text-hover, var(--x-button-text));
+  background-color: var(--x-button-bg-hover, var(--x-button-bg));
+  border-color: var(--x-button-border-hover, var(--x-button-border));
+}
 
-  &:active {
-    color: var(--x-button-text-active, var(--x-button-text));
-    background-color: var(--x-button-bg-active, var(--x-button-bg));
-    border-color: var(--x-button-border-active, var(--x-button-border));
-  }
+.button:active {
+  color: var(--x-button-text-active, var(--x-button-text));
+  background-color: var(--x-button-bg-active, var(--x-button-bg));
+  border-color: var(--x-button-border-active, var(--x-button-border));
+}
 
-  :global(.dark) &,
-  &:global(.dark) {
-    color: var(--x-button-dark-text, var(--x-button-text));
-    background-color: var(--x-button-dark-bg, var(--x-button-bg));
-    border-color: var(--x-button-dark-border, var(--x-button-border));
-
-    &:hover {
-      color: var(--x-button-dark-text-hover, var(--x-button-dark-text, var(--x-button-text)));
-      background-color: var(--x-button-dark-bg-hover, var(--x-button-dark-bg, var(--x-button-bg)));
-      border-color: var(--x-button-dark-border-hover, var(--x-button-dark-border, var(--x-button-border)));
-    }
-
-    &:active {
-      color: var(--x-button-dark-text-active, var(--x-button-dark-text));
-      background-color: var(--x-button-dark-bg-active, var(--x-button-dark-bg, var(--x-button-bg)));
-      border-color: var(--x-button-dark-border-active, var(--x-button-dark-border, var(--x-button-border)));
-    }
-  }
+:global(.dark) .button,
+.button:global(.dark) {
+  color: var(--x-button-dark-text, var(--x-button-text));
+  background-color: var(--x-button-dark-bg, var(--x-button-bg));
+  border-color: var(--x-button-dark-border, var(--x-button-border));
+}
+
+:global(.dark) .button:hover,
+.button:global(.dark):hover {
+  color: var(--x-button-dark-text-hover, var(--x-button-dark-text, var(--x-button-text)));
+  background-color: var(--x-button-dark-bg-hover, var(--x-button-dark-bg, var(--x-button-bg)));
+  border-color: var(--x-button-dark-border-hover, var(--x-button-dark-border, var(--x-button-border)));
+}
+
+:global(.dark) .button:active,
+.button:global(.dark):active {
+  color: var(--x-button-dark-text-active, var(--x-button-dark-text));
+  background-color: var(--x-button-dark-bg-active, var(--x-button-dark-bg, var(--x-button-bg)));
+  border-color: var(--x-button-dark-border-active, var(--x-button-dark-border, var(--x-button-border)));
 }
 </style>

package/src/components/button/ButtonGroup.vue

@@ -1,17 +1,15 @@
 <script lang="ts">
+import { variantBooleanProps } from '../../common/props'
+
 const buttonGroupProps = {
   ...useCommon.props(),
   ...useColors.props(),
   ...useInteractive.props(),
+  ...variantBooleanProps(),
   tag: {
     type: String,
     default: 'div',
   },
-  outlined: Boolean,
-  rounded: Boolean,
-  ghost: Boolean,
-  light: Boolean,
-  flat: Boolean,
 }
 
 export type ButtonGroupProps = ExtractPublicPropTypes<typeof buttonGroupProps>
@@ -35,19 +33,21 @@ export default {
 <script setup lang="ts">
 import { provide, type ExtractPublicPropTypes } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 import { useCommon } from '../../composables/useCommon'
 import { useColors } from '../../composables/useColors'
 import { useInteractive } from '../../composables/useInteractive'
 import { injectButtonGroupKey } from '../../composables/keys'
 
 const props = defineProps(buttonGroupProps)
+const resolvedProps = useResolvedComponentProps('ButtonGroup', props)
 
 provide(injectButtonGroupKey, {
   groupProps: props,
   isButtonGroup: true,
 })
 
-const { className, classes, styles } = useTheme('ButtonGroup', {}, props)
+const { className, classes, styles } = useTheme('ButtonGroup', {}, resolvedProps)
 </script>
 
 <template>
@@ -57,7 +57,7 @@ const { className, classes, styles } = useTheme('ButtonGroup', {}, props)
     :class="[
       className,
       $style['button-group'],
-      rounded ? $style['button-group--rounded'] : '',
+      resolvedProps.rounded ? $style['button-group--rounded'] : '',
       classes.wrapper
     ]"
   >
@@ -65,26 +65,24 @@ const { className, classes, styles } = useTheme('ButtonGroup', {}, props)
   </component>
 </template>
 
-<style lang="postcss" module>
-.button-group {
-  &:not(&--rounded) {
-    > :first-child {
-      @apply rounded-l-md;
-    }
+<style module>
+.button-group:not(.button-group--rounded) > :first-child {
+  border-start-start-radius: var(--radius-md);
+  border-end-start-radius: var(--radius-md);
+}
 
-    > :last-child {
-      @apply rounded-r-md;
-    }
-  }
+.button-group:not(.button-group--rounded) > :last-child {
+  border-start-end-radius: var(--radius-md);
+  border-end-end-radius: var(--radius-md);
+}
 
-  &--rounded {
-    > :first-of-type {
-      @apply rounded-l-full;
-    }
+.button-group--rounded > :first-of-type {
+  border-start-start-radius: 9999px;
+  border-end-start-radius: 9999px;
+}
 
-    > :last-child {
-      @apply rounded-r-full;
-    }
-  }
+.button-group--rounded > :last-child {
+  border-start-end-radius: 9999px;
+  border-end-end-radius: 9999px;
 }
 </style>

package/src/components/button/theme/Button.base.theme.ts

@@ -1,4 +1,5 @@
 import type { ButtonTheme } from '../Button.vue'
+import { inputGroupRadiusClasses } from '../../../common/inputGroupRadius'
 
 const theme: ButtonTheme = {
   classes: {
@@ -6,10 +7,14 @@ const theme: ButtonTheme = {
       const classes = ['relative transition duration-150 focus-visible:outline-secondary-300 outline-transparent outline outline-1 outline-offset-2 inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none shrink-0']
 
       // radius
-      if (!data.isButtonGroup) classes.push(props.rounded ? 'rounded-full' : 'rounded-md')
+      if (data.isInsideInputGroup) {
+        classes.push(...inputGroupRadiusClasses(data.inputGroupPosition))
+      } else if (!data.isButtonGroup) {
+        classes.push(props.rounded ? 'rounded-full' : 'rounded-md')
+      }
 
       // shadow
-      if (!props.flat && !props.light && !props.ghost && !props.disabled && !props.loading) classes.push('shadow-sm')
+      if (!props.flat && !props.light && !props.ghost && !props.disabled && !props.loading) classes.push('shadow-xs')
 
       // size
       if (props.size === 'xs') classes.push(slots.default ? `py-1 text-xs ${props.icon ? 'px-2' : 'px-2'}` : 'leading-none p-1')

package/src/components/button/theme/Button.carbon.theme.ts

@@ -1,4 +1,5 @@
 import type { ButtonTheme } from '../Button.vue'
+import { inputGroupRadiusClasses } from '../../../common/inputGroupRadius'
 
 const theme: ButtonTheme = {
   classes: {
@@ -6,8 +7,13 @@ const theme: ButtonTheme = {
       const classes = ['relative transition duration-150 inline-flex whitespace-nowrap overflow-hidden align-top appearance-none text-sm active:shadow-none border !leading-[1.28572] tracking-wide font-light']
 
       // radius
-      if (!data.isButtonGroup) classes.push(props.rounded ? 'rounded-full' : '')
-      else classes.push('!rounded-none')
+      if (data.isInsideInputGroup) {
+        classes.push(...inputGroupRadiusClasses(data.inputGroupPosition))
+      } else if (!data.isButtonGroup) {
+        classes.push(props.rounded ? 'rounded-full' : '')
+      } else {
+        classes.push('!rounded-none')
+      }
 
       // size
       if (slots.default) {

package/src/components/card/Card.vue

@@ -1,10 +1,12 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const cardProps = {
   tag: {
     type: String,
     default: 'div',
   },
-  flat: Boolean,
+  flat: optionalBooleanProp(),
 }
 
 export type CardProps = ExtractPublicPropTypes<typeof cardProps>

package/src/components/card/theme/Card.base.theme.ts

@@ -2,7 +2,7 @@ import type { CardTheme } from '../Card.vue'
 
 const theme: CardTheme = {
   classes: {
-    wrapper: ({ props }) => `bg-white dark:bg-secondary-800 overflow-hidden rounded-md ${props.flat ? '' : 'shadow'}`,
+    wrapper: ({ props }) => `bg-white dark:bg-secondary-800 overflow-hidden rounded-md ${props.flat ? '' : 'shadow-sm'}`,
   },
 }
 

package/src/components/carousel/Carousel.vue

@@ -1,10 +1,12 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const carouselEffects = ['slide'] as const
 
 export type CarouselEffect = typeof carouselEffects[number]
 
 const carouselProps = {
-  autoplay: Boolean,
+  autoplay: optionalBooleanProp(),
   delay: {
     type: Number,
     default: 5000,

package/src/components/carousel/CarouselSlide.vue

@@ -39,7 +39,7 @@ const { styles, classes, className } = useTheme('CarouselSlide', {}, props)
   </component>
 </template>
 
-<style lang="postcss" scoped module>
+<style scoped module>
 .carousel-slide {
   :slotted(img) {
     width: 100%;

package/src/components/checkbox/Checkbox.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const checkboxProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
@@ -6,7 +8,7 @@ const checkboxProps = {
   ...useInputtable.props(),
   value: [String, Number],
   indeterminate: Boolean,
-  glow: Boolean,
+  glow: optionalBooleanProp(),
 }
 
 export type CheckboxProps = ExtractPublicPropTypes<typeof checkboxProps>
@@ -175,10 +177,8 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
   </label>
 </template>
 
-<style lang="postcss" module>
-  .checkbox {
-    &--glow {
-      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-checkbox-glow), 0 4px 6px -4px var(--x-checkbox-glow);
-    }
-  }
+<style module>
+.checkbox--glow {
+  box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-checkbox-glow), 0 4px 6px -4px var(--x-checkbox-glow);
+}
 </style>

package/src/components/checkbox/theme/Checkbox.carbon.theme.ts

@@ -11,7 +11,7 @@ const theme: CheckboxTheme = {
     },
 
     box: ({ props }) => {
-      const classes = ['rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)] mt-0.5']
+      const classes = ['rounded-xs flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)] mt-0.5']
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('h-3 w-3')
       else if (props.size === 'xl') classes.push('h-5 w-5')

package/src/components/datepicker/Datepicker.vue

@@ -129,7 +129,8 @@ const datepickerProps = {
 export type DatepickerProps = ExtractPublicPropTypes<typeof datepickerProps>
 
 type InternalClasses = 'wrapper'
-export interface DatepickerTheme extends ThemeComponent<DatepickerProps, InternalClasses> {}
+type InternalExtraData = { isInsideInputGroup: boolean; }
+export interface DatepickerTheme extends ThemeComponent<DatepickerProps, InternalClasses, InternalExtraData> {}
 
 export default {
   name: 'XDatepicker',
@@ -137,12 +138,14 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, type ExtractPublicPropTypes, type PropType } from 'vue'
+import { ref, inject, computed, type ExtractPublicPropTypes, type PropType } from 'vue'
 import { useMutationObserver } from '@vueuse/core'
 import { useCommon } from '../../composables/useCommon'
 import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import type { Size } from '../../composables/useCommon'
+import { injectInputGroupKey } from '../../composables/keys'
 import XInput from '../input/Input.vue'
 import type { Locale } from 'date-fns'
 import VueDatepicker, { type ModelValue, type TimeModel, type VueDatePickerProps } from '@vuepic/vue-datepicker'
@@ -150,8 +153,24 @@ import '@vuepic/vue-datepicker/dist/main.css'
 
 const props = defineProps(datepickerProps)
 
+const inputGroup = inject(injectInputGroupKey, {
+  registerChild: () => {},
+  unregisterChild: () => {},
+  registerInput: () => {},
+  unregisterInput: () => {},
+  getPosition: () => 'only',
+  childOrder: computed(() => []),
+  isInsideInputGroup: false,
+  groupProps: {},
+})
+
 const emit = defineEmits(useInputtable.emits())
 
+const isInsideInputGroup = computed(() => inputGroup.isInsideInputGroup)
+const computedSize = computed((): Size => inputGroup.groupProps?.size ?? props.size)
+const isDisabled = computed(() => props.disabled || props.loading || !!inputGroup.groupProps?.disabled)
+const computedLabel = computed(() => (inputGroup.isInsideInputGroup ? undefined : props.label))
+
 const inputRef = ref<InstanceType<typeof XInput> | null>(null)
 
 function onSelect(value: Date | Date[]) {
@@ -183,17 +202,20 @@ useMutationObserver(htmlNode, (mutations) => {
   attributes: true,
 })
 
+const { hideFooterInternal } = useInputtable(props, { focus, emit })
+
 defineExpose({ focus, blur, validate })
 
-const { styles, classes, className } = useTheme('Datepicker', {}, props)
+const { styles, classes, className } = useTheme('Datepicker', {}, props, { isInsideInputGroup })
 </script>
 
 <template>
   <div
-    :style="[styles, { '--dp-clear-btn-top': !!label ? '2.75rem' : '1.2rem' }]"
+    :style="[styles, { '--dp-clear-btn-top': computedLabel ? '2.75rem' : '1.2rem' }]"
     :class="[
       className,
       classes.wrapper,
+      isInsideInputGroup ? 'flex-1 min-w-0' : '',
     ]"
   >
     <vue-datepicker
@@ -301,10 +323,11 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
           ref="inputRef"
           :readonly="textInput === false || readonly"
           :model-value="value"
-          :label="label"
-          :size="size"
-          :disabled="disabled"
+          :label="computedLabel"
+          :size="computedSize"
+          :disabled="isDisabled"
           :helper="helper"
+          :is-inside-input-group="isInsideInputGroup"
           icon-right="calendar"
           :loading="loading"
           data-1p-ignore
@@ -313,7 +336,7 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
           :tooltip="tooltip"
           :placeholder="placeholder"
           :required="required"
-          :hide-footer="hideFooter"
+          :hide-footer="hideFooterInternal"
           @keydown.prevent.enter="onEnter"
           @keydown.tab="onTab"
         />
@@ -326,8 +349,7 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
   </div>
 </template>
 
-<style lang="postcss">
-/* stylelint-disable selector-class-pattern */
+<style>
 .dp__menu {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);

package/src/components/divider/Divider.vue

@@ -1,7 +1,9 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const dividerProps = {
   label: String,
-  vertical: Boolean,
+  vertical: optionalBooleanProp(),
 }
 
 export type DividerProps = ExtractPublicPropTypes<typeof dividerProps>
@@ -40,7 +42,6 @@ const { styles, classes, className } = useTheme('Divider', {}, props)
     ></div>
     <div
       v-if="label"
-      class="font-medium text-sm text-secondary-600 dark:text-secondary-300"
       :class="[
         classes.label,
         {

package/src/components/divider/theme/Divider.base.theme.ts

@@ -4,9 +4,9 @@ const theme: DividerTheme = {
   classes: {
     wrapper: ({ props }) => `flex justify-center items-center ${props.vertical ? 'h-full flex-col' : 'w-full'}`,
 
-    label: 'font-medium text-xs text-slate-400 dark:text-secondary-300',
+    label: 'text-xs text-secondary-400',
 
-    line: 'bg-secondary-200 dark:bg-secondary-700 flex-grow',
+    line: 'bg-secondary-200 dark:bg-secondary-700 grow',
   },
 }