@onereach/ui-components 8.9.1 → 8.10.0

package/dist/esm/v2/{OrExpansionPanel-ed96bdde.js → OrExpansionPanel-3468cce1.js}

@@ -28,10 +28,10 @@ const ExpansionPanel = [
 // Layout
 'layout-column'];
 const ExpansionPanelVariants = {
-  'default': [
+  [ExpansionPanelVariant.Default]: [
   // Spacing
   'gap-sm'],
-  'card': [
+  [ExpansionPanelVariant.Card]: [
   // Shape
   'rounded-md',
   // Spacing
@@ -54,12 +54,12 @@ const ExpansionPanelBackgroundColors = {
 const ExpansionPanelHeader = [
 // Layout
 'layout-row',
+// Interactivity
+'interactivity-click',
 // Box
 'min-w-[16px]',
 // Spacing
 'gap-sm',
-// Interactivity
-'interactivity-click',
 // Typography
 'typography-body-2-bold',
 // Theme
@@ -91,6 +91,9 @@ const ExpansionPanelAddon = [
 'typography-body-2-regular',
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+const ExpansionPanelContent = [
+// Spacing
+'ml-[28px] md:ml-[24px]'];
 
 var script = defineComponent({
   name: 'OrExpansionPanel',
@@ -132,6 +135,7 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-expansion-panel-v3', ...ExpansionPanel, ...ExpansionPanelVariants[props.variant], ...ExpansionPanelBackgroundColors[`${props.backgroundColor}-${props.variant}`]]);
     const headerStyles = computed(() => [...ExpansionPanelHeader, ...ExpansionPanelHeaderColors[props.color]]);
     const addonStyles = computed(() => [...ExpansionPanelAddon]);
+    const contentStyles = computed(() => [...ExpansionPanelContent]);
     // State
     const {
       state,
@@ -144,6 +148,7 @@ var script = defineComponent({
       rootStyles,
       headerStyles,
       addonStyles,
+      contentStyles,
       state,
       open,
       close,
@@ -196,7 +201,8 @@ var __vue_render__ = function () {
       rawName: "v-show",
       value: _vm.state === 'open',
       expression: "state === 'open'"
-    }]
+    }],
+    class: _vm.contentStyles
   }, [_vm._t("default")], 2)]);
 };
 var __vue_staticRenderFns__ = [];

package/dist/esm/v2/{OrSelect-8b0979f7.js → OrSelect-e7df9dd9.js}

@@ -8,7 +8,7 @@ import { u as useResponsive } from './useResponsive-5c8291da.js';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$3 } from './OrCheckbox-83f20ca2.js';
 import { _ as __vue_component__$4 } from './OrError-916e928e.js';
-import { _ as __vue_component__$5 } from './OrExpansionPanel-ed96bdde.js';
+import { _ as __vue_component__$5 } from './OrExpansionPanel-3468cce1.js';
 import { _ as __vue_component__$6 } from './OrHint-1220face.js';
 import { _ as __vue_component__$8 } from './OrIconButton-b4370da7.js';
 import { _ as __vue_component__$7 } from './OrIcon-0343b3d8.js';

package/dist/esm/v2/components/index.js

@@ -51,7 +51,7 @@ export { E as EmptyStateSize, _ as OrEmptyStateV3 } from '../OrEmptyState-2d3fd6
 export { _ as OrError } from '../OrError-efc74907.js';
 export { _ as OrErrorTagV3 } from '../OrErrorTag-b3c66db6.js';
 export { _ as OrErrorV3 } from '../OrError-916e928e.js';
-export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../OrExpansionPanel-ed96bdde.js';
+export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../OrExpansionPanel-3468cce1.js';
 export { F as FabColor, _ as OrFabV3 } from '../OrFab-fc628f6a.js';
 export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-b41017c7.js';
 export { F as FormGroupDirection, _ as OrFormGroupV3 } from '../OrFormGroup-d4abd2c9.js';
@@ -101,7 +101,7 @@ export { _ as OrSearch } from '../OrSearch-ac542dd6.js';
 export { _ as OrSearchV3 } from '../OrSearch-b3aa11d9.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-bba94cda.js';
 export { _ as OrSelect } from '../OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from '../OrSelect-8b0979f7.js';
+export { _ as OrSelectV3 } from '../OrSelect-e7df9dd9.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-c56a9221.js';
 export { S as OrSidebarPlacement, _ as OrSidebarV3, S as SidebarPlacement } from '../OrSidebar-2c41b483.js';
 export { _ as OrSkeletonCircle } from '../OrSkeletonCircle-c4bf0e34.js';

package/dist/esm/v2/components/or-expansion-panel-v3/OrExpansionPanel.vue.d.ts

@@ -5,6 +5,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     open: () => void;
     close: () => void;
@@ -73,6 +74,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     open: () => void;
     close: () => void;

package/dist/esm/v2/components/or-expansion-panel-v3/index.js

@@ -1,4 +1,4 @@
-export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../../OrExpansionPanel-ed96bdde.js';
+export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../../OrExpansionPanel-3468cce1.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../dom-aecadd9a.js';

package/dist/esm/v2/components/or-expansion-panel-v3/styles.d.ts

@@ -5,3 +5,4 @@ export declare const ExpansionPanelBackgroundColors: Record<`${ExpansionPanelBac
 export declare const ExpansionPanelHeader: string[];
 export declare const ExpansionPanelHeaderColors: Record<ExpansionPanelColor, string[]>;
 export declare const ExpansionPanelAddon: string[];
+export declare const ExpansionPanelContent: string[];

package/dist/esm/v2/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-8b0979f7.js';
+export { _ as OrSelectV3 } from '../../OrSelect-e7df9dd9.js';
 export { I as SelectSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
@@ -17,7 +17,7 @@ import '../../OrLabel-b465bc0b.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../../style-inject.es-4c6f2515.js';
 import '../../OrError-916e928e.js';
-import '../../OrExpansionPanel-ed96bdde.js';
+import '../../OrExpansionPanel-3468cce1.js';
 import '../../usePopoverState-b92c698b.js';
 import '../../OrIcon-0343b3d8.js';
 import '../../OrHint-1220face.js';

package/dist/esm/v2/index.js

@@ -51,7 +51,7 @@ export { E as EmptyStateSize, _ as OrEmptyStateV3 } from './OrEmptyState-2d3fd68
 export { _ as OrError } from './OrError-efc74907.js';
 export { _ as OrErrorTagV3 } from './OrErrorTag-b3c66db6.js';
 export { _ as OrErrorV3 } from './OrError-916e928e.js';
-export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from './OrExpansionPanel-ed96bdde.js';
+export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from './OrExpansionPanel-3468cce1.js';
 export { F as FabColor, _ as OrFabV3 } from './OrFab-fc628f6a.js';
 export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-b41017c7.js';
 export { F as FormGroupDirection, _ as OrFormGroupV3 } from './OrFormGroup-d4abd2c9.js';
@@ -101,7 +101,7 @@ export { _ as OrSearch } from './OrSearch-ac542dd6.js';
 export { _ as OrSearchV3 } from './OrSearch-b3aa11d9.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-bba94cda.js';
 export { _ as OrSelect } from './OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from './OrSelect-8b0979f7.js';
+export { _ as OrSelectV3 } from './OrSelect-e7df9dd9.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-c56a9221.js';
 export { S as OrSidebarPlacement, _ as OrSidebarV3, S as SidebarPlacement } from './OrSidebar-2c41b483.js';
 export { _ as OrSkeletonCircle } from './OrSkeletonCircle-c4bf0e34.js';

package/dist/esm/v3/{OrExpansionPanel-abe63bbb.js → OrExpansionPanel-691107c8.js}

@@ -28,10 +28,10 @@ const ExpansionPanel = [
 // Layout
 'layout-column'];
 const ExpansionPanelVariants = {
-  'default': [
+  [ExpansionPanelVariant.Default]: [
   // Spacing
   'gap-sm'],
-  'card': [
+  [ExpansionPanelVariant.Card]: [
   // Shape
   'rounded-md',
   // Spacing
@@ -54,12 +54,12 @@ const ExpansionPanelBackgroundColors = {
 const ExpansionPanelHeader = [
 // Layout
 'layout-row',
+// Interactivity
+'interactivity-click',
 // Box
 'min-w-[16px]',
 // Spacing
 'gap-sm',
-// Interactivity
-'interactivity-click',
 // Typography
 'typography-body-2-bold',
 // Theme
@@ -91,6 +91,9 @@ const ExpansionPanelAddon = [
 'typography-body-2-regular',
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+const ExpansionPanelContent = [
+// Spacing
+'ml-[28px] md:ml-[24px]'];
 
 var script = defineComponent({
   name: 'OrExpansionPanel',
@@ -132,6 +135,7 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-expansion-panel-v3', ...ExpansionPanel, ...ExpansionPanelVariants[props.variant], ...ExpansionPanelBackgroundColors[`${props.backgroundColor}-${props.variant}`]]);
     const headerStyles = computed(() => [...ExpansionPanelHeader, ...ExpansionPanelHeaderColors[props.color]]);
     const addonStyles = computed(() => [...ExpansionPanelAddon]);
+    const contentStyles = computed(() => [...ExpansionPanelContent]);
     // State
     const {
       state,
@@ -144,6 +148,7 @@ var script = defineComponent({
       rootStyles,
       headerStyles,
       addonStyles,
+      contentStyles,
       state,
       open,
       close,
@@ -177,7 +182,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     variant: 'filled-bold'
   }, null, 8 /* PROPS */, ["class"]), createElementVNode("span", _hoisted_4, toDisplayString(_ctx.label), 1 /* TEXT */)], 10 /* CLASS, PROPS */, _hoisted_3), createElementVNode("div", {
     class: normalizeClass(_ctx.addonStyles)
-  }, [renderSlot(_ctx.$slots, "addon")], 2 /* CLASS */)]), withDirectives(createElementVNode("div", null, [renderSlot(_ctx.$slots, "default")], 512 /* NEED_PATCH */), [[vShow, _ctx.state === 'open']])], 10 /* CLASS, PROPS */, _hoisted_1);
+  }, [renderSlot(_ctx.$slots, "addon")], 2 /* CLASS */)]), withDirectives(createElementVNode("div", {
+    class: normalizeClass(_ctx.contentStyles)
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */), [[vShow, _ctx.state === 'open']])], 10 /* CLASS, PROPS */, _hoisted_1);
 }
 
 script.render = render;

package/dist/esm/v3/{OrSelect-a821cc23.js → OrSelect-f915f049.js}

@@ -8,7 +8,7 @@ import { u as useResponsive } from './useResponsive-5c8291da.js';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$3 } from './OrCheckbox-11c3dc2f.js';
 import { s as script$4 } from './OrError-69bd7f6a.js';
-import { s as script$5 } from './OrExpansionPanel-abe63bbb.js';
+import { s as script$5 } from './OrExpansionPanel-691107c8.js';
 import { s as script$6 } from './OrHint-55d3de35.js';
 import { s as script$8 } from './OrIconButton-db76a319.js';
 import { s as script$7 } from './OrIcon-8f6c9c29.js';

package/dist/esm/v3/components/index.js

@@ -48,7 +48,7 @@ export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState-5349a1
 export { s as OrError } from '../OrError-f90296db.js';
 export { s as OrErrorTagV3 } from '../OrErrorTag-53a6c1ae.js';
 export { s as OrErrorV3 } from '../OrError-69bd7f6a.js';
-export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel-abe63bbb.js';
+export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel-691107c8.js';
 export { F as FabColor, s as OrFabV3 } from '../OrFab-be9e0179.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-052ede5f.js';
 export { F as FormGroupDirection, s as OrFormGroupV3 } from '../OrFormGroup-e42d6e7b.js';
@@ -97,7 +97,7 @@ export { s as OrSearch } from '../OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from '../OrSearch-4525accf.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-6be79b4e.js';
 export { s as OrSelect } from '../OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from '../OrSelect-a821cc23.js';
+export { s as OrSelectV3 } from '../OrSelect-f915f049.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-aaf73310.js';
 export { S as OrSidebarPlacement, s as OrSidebarV3, S as SidebarPlacement } from '../OrSidebar-a3e3f603.js';
 export { s as OrSkeletonCircle } from '../OrSkeletonCircle-66e175a0.js';

package/dist/esm/v3/components/or-expansion-panel-v3/OrExpansionPanel.vue.d.ts

@@ -30,6 +30,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     headerStyles: import("vue-demi").ComputedRef<string[]>;
     addonStyles: import("vue-demi").ComputedRef<string[]>;
+    contentStyles: import("vue-demi").ComputedRef<string[]>;
     state: import("vue-demi").Ref<"open" | "closed">;
     open: () => void;
     close: () => void;

package/dist/esm/v3/components/or-expansion-panel-v3/index.js

@@ -1,4 +1,4 @@
-export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../../OrExpansionPanel-abe63bbb.js';
+export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../../OrExpansionPanel-691107c8.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../dom-aecadd9a.js';

package/dist/esm/v3/components/or-expansion-panel-v3/styles.d.ts

@@ -5,3 +5,4 @@ export declare const ExpansionPanelBackgroundColors: Record<`${ExpansionPanelBac
 export declare const ExpansionPanelHeader: string[];
 export declare const ExpansionPanelHeaderColors: Record<ExpansionPanelColor, string[]>;
 export declare const ExpansionPanelAddon: string[];
+export declare const ExpansionPanelContent: string[];

package/dist/esm/v3/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-a821cc23.js';
+export { s as OrSelectV3 } from '../../OrSelect-f915f049.js';
 export { I as SelectSize } from '../../OrInputBox-f0bac539.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
@@ -17,7 +17,7 @@ import '../../OrLabel-b826da04.js';
 import 'vue';
 import '../../style-inject.es-4c6f2515.js';
 import '../../OrError-69bd7f6a.js';
-import '../../OrExpansionPanel-abe63bbb.js';
+import '../../OrExpansionPanel-691107c8.js';
 import '../../usePopoverState-b92c698b.js';
 import '../../OrIcon-8f6c9c29.js';
 import '../../OrHint-55d3de35.js';

package/dist/esm/v3/index.js

@@ -48,7 +48,7 @@ export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-53a6c1ae.js';
 export { s as OrErrorV3 } from './OrError-69bd7f6a.js';
-export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-abe63bbb.js';
+export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-691107c8.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-be9e0179.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-052ede5f.js';
 export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-e42d6e7b.js';
@@ -97,7 +97,7 @@ export { s as OrSearch } from './OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from './OrSearch-4525accf.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-6be79b4e.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-a821cc23.js';
+export { s as OrSelectV3 } from './OrSelect-f915f049.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { S as OrSidebarPlacement, s as OrSidebarV3, S as SidebarPlacement } from './OrSidebar-a3e3f603.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.9.1",
+  "version": "8.10.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -177,5 +177,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "b64a5fedff6d8f8b46efa0dc62b3a4248d4813a6"
+  "gitHead": "081ae4c60c8916b5e73d304cd56c789d6f6e80f2"
 }

package/src/components/or-expansion-panel-v3/OrExpansionPanel.vue

@@ -27,7 +27,10 @@
       </div>
     </div>
 
-    <div v-show="state === 'open'">
+    <div
+      v-show="state === 'open'"
+      :class="contentStyles"
+    >
       <slot />
     </div>
   </div>
@@ -38,7 +41,7 @@ import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
 import { usePopoverState } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant } from './props';
-import { ExpansionPanel, ExpansionPanelAddon, ExpansionPanelBackgroundColors, ExpansionPanelHeader, ExpansionPanelHeaderColors, ExpansionPanelVariants } from './styles';
+import { ExpansionPanel, ExpansionPanelAddon, ExpansionPanelBackgroundColors, ExpansionPanelContent, ExpansionPanelHeader, ExpansionPanelHeaderColors, ExpansionPanelVariants } from './styles';
 
 export default defineComponent({
   name: 'OrExpansionPanel',
@@ -117,6 +120,10 @@ export default defineComponent({
       ...ExpansionPanelAddon,
     ]);
 
+    const contentStyles = computed(() => [
+      ...ExpansionPanelContent,
+    ]);
+
     // State
     const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);
 
@@ -125,6 +132,8 @@ export default defineComponent({
       rootStyles,
       headerStyles,
       addonStyles,
+      contentStyles,
+
       state,
       open,
       close,

package/src/components/or-expansion-panel-v3/styles.ts

@@ -6,12 +6,12 @@ export const ExpansionPanel: string[] = [
 ];
 
 export const ExpansionPanelVariants: Record<ExpansionPanelVariant, string[]> = {
-  'default': [
+  [ExpansionPanelVariant.Default]: [
     // Spacing
     'gap-sm',
   ],
 
-  'card': [
+  [ExpansionPanelVariant.Card]: [
     // Shape
     'rounded-md',
 
@@ -53,15 +53,15 @@ export const ExpansionPanelHeader: string[] = [
   // Layout
   'layout-row',
 
+  // Interactivity
+  'interactivity-click',
+
   // Box
   'min-w-[16px]',
 
   // Spacing
   'gap-sm',
 
-  // Interactivity
-  'interactivity-click',
-
   // Typography
   'typography-body-2-bold',
 
@@ -118,3 +118,8 @@ export const ExpansionPanelAddon: string[] = [
   'theme-foreground-outline',
   'dark:theme-foreground-outline-dark',
 ];
+
+export const ExpansionPanelContent: string[] = [
+  // Spacing
+  'ml-[28px] md:ml-[24px]',
+];