@onereach/ui-components 4.1.1-beta.2540.0 → 4.1.1

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

@@ -1,10 +1,10 @@
-export { s as OrTabsV3, T as TabsVariant } from '../../OrTabs-ae2c86c4.js';
+export { s as OrTabsV3, T as TabsVariant } from '../../OrTabs-f667cf9f.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../OrIcon-62793572.js';
 import 'vue';
 import '../../OrMenuItem-dbee450f.js';
-import '../../OrMenu-c8876a6b.js';
+import '../../OrMenu-f8132f3e.js';
 import '../../OrPopover-d6d82a06.js';
 import '@floating-ui/dom';
 import '../../useElevation-df91fa50.js';

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

@@ -1,5 +1,5 @@
-export { s as OrTextareaV3 } from '../../OrTextarea-b8dba186.js';
-export { I as TextareaSize } from '../../OrInputBox-a6d68437.js';
+export { s as OrTextareaV3 } from '../../OrTextarea-08b22d36.js';
+export { a as TextareaSize } from '../../OrInputBox-11389afd.js';
 import 'vue-demi';
 import '../../useIdAttribute-859439f0.js';
 import '@vueuse/core';

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

@@ -1,2 +1,2 @@
-export { D as DropdownClose, a as DropdownOpen } from '../dropdown-open-e1f90e0a.js';
+export { D as DropdownClose, a as DropdownOpen } from '../dropdown-open-0d314aa4.js';
 import 'vue-demi';

package/dist/esm/v3/{dropdown-open-e1f90e0a.js → dropdown-open-0d314aa4.js}

@@ -3,7 +3,6 @@ import { isVue3 } from 'vue-demi';
 const created$1 = (element, binding) => {
   element.addEventListener('keydown', event => {
     event.preventDefault();
-    event.stopPropagation();
     if (['Escape'].includes(event.key)) {
       binding.value(event);
     }
@@ -16,16 +15,11 @@ const DropdownClose = {
 const created = (element, binding) => {
   element.addEventListener('keydown', event => {
     event.preventDefault();
-    event.stopPropagation();
     if (['Enter', ' '].includes(event.key)) {
       binding.value(event);
     }
   });
-  element.addEventListener('click', event => {
-    event.preventDefault();
-    event.stopPropagation();
-    binding.value(event);
-  });
+  element.addEventListener('click', binding.value);
 };
 const DropdownOpen = {
   [isVue3 ? 'created' : 'bind']: created

package/dist/esm/v3/index.js

@@ -4,10 +4,10 @@ export { s as OrBottomSheetV3 } from './OrBottomSheet-95bc694e.js';
 export { s as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-fca9019a.js';
 export { s as OrButtonV2 } from './OrButton-170b493f.js';
 export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE, s as OrIconButton, s as OrIconButtonV2 } from './OrIconButton-9d08aa44.js';
-export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-c2b6aa9e.js';
+export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-8558588c.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-dc158967.js';
-export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-894886bc.js';
+export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-631cb8e3.js';
 export { s as OrCardV3 } from './OrCard-cc82902c.js';
 export { s as OrCarousel } from './OrCarousel-8de5d65b.js';
 export { s as OrCarouselItem } from './OrCarouselItem-8c7ccd0f.js';
@@ -19,15 +19,12 @@ export { s as OrCode, O as OrCodeLanguages } from './OrCode-b0b514ab.js';
 export { s as OrCollapse } from './OrCollapse-37a52e8f.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-9a149e6b.js';
 export { s as OrConfirm } from './OrConfirm-1ffb7ed6.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-e96ebc60.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-1a86c6d0.js';
-export { I as DatePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TextareaSize, I as TimePickerSize } from './OrInputBox-a6d68437.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-b0c7f796.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-02c6de49.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-c3f650da.js';
-export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f9.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-ade9192b.js';
 export { s as OrErrorV3 } from './OrError-c01d0c29.js';
+export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f9.js';
 export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-99ca7ed7.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-83cd7ed7.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-291c7653.js';
@@ -40,8 +37,9 @@ export { I as InlineInputBoxSize, I as InlineInputSize, s as OrInlineInputBoxV3
 export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-ca82ccc3.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-8cfde85c.js';
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-864f1099.js';
+export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, s as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from './OrInputBox-11389afd.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-a43b53d2.js';
 export { s as OrInput } from './OrInput-0dbd5a01.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-a4c01eb3.js';
 export { s as OrLabel } from './OrLabel-876f8729.js';
 export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-4da56db0.js';
 export { L as LinkColor, s as OrLinkV3 } from './OrLink-7c4eedf0.js';
@@ -50,7 +48,7 @@ export { s as OrListOfInputs } from './OrListOfInputs-3c8eaf97.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-15174477.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-b79022da.js';
 export { s as OrMenuItemV3 } from './OrMenuItem-dbee450f.js';
-export { s as OrMenuV3 } from './OrMenu-c8876a6b.js';
+export { s as OrMenuV3 } from './OrMenu-f8132f3e.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-d6d82a06.js';
 export { s as OrModal, O as OrModalSizes } from './OrModal-f8ae7146.js';
 export { M as ModalSize, s as OrModalV3 } from './OrModal-cb236842.js';
@@ -60,18 +58,18 @@ export { s as OrNumberInput } from './OrNumberInput-dca5e850.js';
 export { s as OrOverflowMenu } from './OrOverflowMenu-a7568f8d.js';
 export { s as OrOverlay } from './OrOverlay-451dce49.js';
 export { s as OrOverlayV3 } from './OrOverlay-d63d39c3.js';
-export { s as OrPaginationV3 } from './OrPagination-c1183308.js';
 export { s as OrPassword } from './OrPassword-88a67993.js';
+export { s as OrPaginationV3 } from './OrPagination-1e334ccd.js';
 export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './OrProgress-d0d52c86.js';
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-33cf7445.js';
 export { s as OrRadio } from './OrRadio-c3ab11f2.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioV3 } from './OrRadio-a890ee7c.js';
 export { s as OrSearch } from './OrSearch-fb2dd591.js';
-export { s as OrSearchV3 } from './OrSearch-d7191a43.js';
+export { s as OrSearchV3 } from './OrSearch-d5d46937.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-4587c7a9.js';
 export { s as OrSelect } from './OrSelect-3d923250.js';
-export { s as OrSelectV3 } from './OrSelect-8126c7f9.js';
+export { s as OrSelectV3 } from './OrSelect-5502d82d.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { s as OrSidebarV3 } from './OrSidebar-0d715029.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-4d7497ec.js';
@@ -91,16 +89,15 @@ export { s as OrTab } from './OrTab-bc98be02.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-d668cc59.js';
 export { s as OrTabV3 } from './OrTab-c11d94f6.js';
 export { s as OrTabs } from './OrTabs-d3812c11.js';
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-ae2c86c4.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-f667cf9f.js';
 export { s as OrTag } from './OrTag-38d1ba92.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-dc1b8628.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-de6b2fe2.js';
 export { s as OrTextarea } from './OrTextarea-de1ecb0f.js';
-export { s as OrTextareaV3 } from './OrTextarea-b8dba186.js';
+export { s as OrTextareaV3 } from './OrTextarea-08b22d36.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-7de2b10c.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-f5161162.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-c3ecb1c8.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-4fbe0e5a.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-71d7c1df.js';
@@ -108,7 +105,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-06654
 export { s as OrTooltip } from './OrTooltip-be7209e5.js';
 export { s as OrTooltipContent } from './OrTooltipContent-68c34911.js';
 export { s as OrTooltipV3 } from './OrTooltip-56ed42c7.js';
-export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
+export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-df91fa50.js';
 export { u as useOverflow } from './useOverflow-af6161c8.js';
@@ -136,9 +133,6 @@ import '@lezer/highlight';
 import './px-to-rem-0b26b83e.js';
 import './dom-7a41831b.js';
 import '@vueuse/math';
-import './OrDateTimePickerMonthSelect-c1dc76b1.js';
-import './OrDateTimePickerPopoverHeader-70bf7220.js';
-import './OrDateTimePickerTimeSelect-d86e1c85.js';
 import '@floating-ui/dom';
 import 'uuid';
 import 'sortablejs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.1.1-beta.2540.0",
+  "version": "4.1.1",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -38,7 +38,7 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.37.4-beta.2540.0",
+    "@onereach/styles": "^2.37.3",
     "@splidejs/splide": "4.0.6",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
@@ -152,5 +152,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "811254a288dad26f49707d083e09f901148685ca"
 }

package/src/components/index.ts

@@ -17,13 +17,11 @@ export * from './or-collapse';
 export * from './or-color-picker';
 export * from './or-confirm';
 export * from './or-confirm-v3';
-export * from './or-date-picker-v3';
 export * from './or-date-time-picker';
-export * from './or-date-time-picker-v3';
-export * from './or-empty-state-v3';
 export * from './or-error';
 export * from './or-error-tag-v3';
 export * from './or-error-v3';
+export * from './or-empty-state-v3';
 export * from './or-expansion-panel-v3';
 export * from './or-fab-v3';
 export * from './or-floating';
@@ -37,9 +35,9 @@ export * from './or-inline-input-box-v3';
 export * from './or-inline-input-v3';
 export * from './or-inline-text-edit';
 export * from './or-inline-textarea-v3';
-export * from './or-input';
 export * from './or-input-box-v3';
 export * from './or-input-v3';
+export * from './or-input';
 export * from './or-label';
 export * from './or-label-v3';
 export * from './or-link-v3';
@@ -57,8 +55,8 @@ export * from './or-number-input';
 export * from './or-overflow-menu';
 export * from './or-overlay';
 export * from './or-overlay-v3';
-export * from './or-pagination-v3';
 export * from './or-password';
+export * from './or-pagination-v3';
 export * from './or-popover-v3';
 export * from './or-progress';
 export * from './or-progress-v3';
@@ -92,7 +90,6 @@ export * from './or-text-v3';
 export * from './or-textarea';
 export * from './or-textarea-v3';
 export * from './or-textbox';
-export * from './or-time-picker-v3';
 export * from './or-toast';
 export * from './or-toast-v3';
 export * from './or-tooltip';

package/src/components/or-button-v3/styles.ts

@@ -109,11 +109,7 @@ export const ButtonRootColors: Record<`${ButtonColor}-${ButtonVariant}`, string[
     'dark:theme-preset-4-error-dark',
   ],
 
-  'inherit-text': [
-    // Theme
-    'theme-foreground-inherit',
-    'dark:theme-foreground-inherit-dark',
-  ],
+  'inherit-text': [],
 
   'primary-link': [
     // Theme

package/src/components/or-checkbox-v3/OrCheckbox.stories3.ts

@@ -7,7 +7,7 @@ import OrCheckboxDocs from './OrCheckbox.docs.mdx';
 import OrCheckbox from './OrCheckbox.vue';
 
 export default {
-  title: 'Components/Checkbox',
+  title: 'Components/Forms/Checkbox',
   component: OrCheckbox,
 
   argTypes: {

package/src/components/or-combined-input-v3/OrCombinedInput.stories3.ts

@@ -8,7 +8,7 @@ import OrCombinedInput from './OrCombinedInput.vue';
 import { CombinedInputSize } from './props';
 
 export default {
-  title: 'Components/Combined Input',
+  title: 'Components/Forms/Combined Input',
   component: OrCombinedInput,
 
   argTypes: {

package/src/components/{or-date-picker-v3/OrDatePicker.docs.mdx → or-error-v3/OrError.docs.mdx}

@@ -1,7 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
 ```ts
-import { OrDatePickerV3 as OrDatePicker } from '@onereach/ui-components';
+import { OrErrorV3 as OrError } from '@onereach/ui-components';
 ```
 
 <DocsPage />

package/src/components/or-error-v3/OrError.stories3.ts

@@ -0,0 +1,77 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import OrErrorDocs from './OrError.docs.mdx';
+import OrError from './OrError.vue';
+
+export default {
+  title: 'Components/Forms/Parts/Error',
+  component: OrError,
+
+  argTypes: {
+    // Slots
+    default: {
+      type: {
+        name: 'string',
+        required: true,
+      },
+
+      control: { type: 'text' },
+    },
+
+    addon: {
+      type: {
+        name: 'string',
+        required: false,
+      },
+
+      control: { type: 'text' },
+    },
+
+    // Props
+    disabled: {
+      control: { type: 'boolean' },
+    },
+  },
+
+  parameters: {
+    layout: 'centered',
+
+    docs: {
+      page: OrErrorDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A10',
+    },
+  },
+} as Meta<typeof OrError>;
+
+const Template: StoryFn<typeof OrError> = (args) => ({
+  components: {
+    OrError,
+    OrIcon,
+  },
+
+  setup() {
+    return { args };
+  },
+
+  template: `
+    <OrError v-bind="args">
+      ${args.default}
+
+      <template #addon>
+        ${args.addon}
+      </template>
+    </OrError>
+  `,
+});
+
+export const Error = Template.bind({});
+
+Error.args = {
+  // Slots
+  default: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  addon: '<OrIcon icon="info" />',
+};

package/src/components/{or-time-picker-v3/OrTimePicker.docs.mdx → or-hint-v3/OrHint.docs.mdx}

@@ -1,7 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
 ```ts
-import { OrTimePickerV3 as OrTimePicker } from '@onereach/ui-components';
+import { OrHintV3 as OrHint } from '@onereach/ui-components';
 ```
 
 <DocsPage />

package/src/components/or-hint-v3/OrHint.stories3.ts

@@ -0,0 +1,77 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import OrHintDocs from './OrHint.docs.mdx';
+import OrHint from './OrHint.vue';
+
+export default {
+  title: 'Components/Forms/Parts/Hint',
+  component: OrHint,
+
+  argTypes: {
+    // Slots
+    default: {
+      type: {
+        name: 'string',
+        required: true,
+      },
+
+      control: { type: 'text' },
+    },
+
+    addon: {
+      type: {
+        name: 'string',
+        required: false,
+      },
+
+      control: { type: 'text' },
+    },
+
+    // Props
+    disabled: {
+      control: { type: 'boolean' },
+    },
+  },
+
+  parameters: {
+    layout: 'centered',
+
+    docs: {
+      page: OrHintDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A10',
+    },
+  },
+} as Meta<typeof OrHint>;
+
+const Template: StoryFn<typeof OrHint> = (args) => ({
+  components: {
+    OrHint,
+    OrIcon,
+  },
+
+  setup() {
+    return { args };
+  },
+
+  template: `
+    <OrHint v-bind="args">
+      ${args.default}
+
+      <template #addon>
+        ${args.addon}
+      </template>
+    </OrHint>
+  `,
+});
+
+export const Hint = Template.bind({});
+
+Hint.args = {
+  // Slots
+  default: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  addon: '<OrIcon icon="info" />',
+};

package/src/components/or-inline-input-box-v3/OrInlineInputBox.docs.mdx

@@ -0,0 +1,3 @@
+import { DocsPage } from '@storybook/addon-docs';
+
+<DocsPage />

package/src/components/or-inline-input-box-v3/OrInlineInputBox.stories3.ts

@@ -0,0 +1,67 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import OrInlineInputBoxDocs from './OrInlineInputBox.docs.mdx';
+import OrInlineInputBox from './OrInlineInputBox.vue';
+import { InlineInputBoxSize } from './props';
+
+export default {
+  title: 'Components/Forms/Parts/Inline Input Box',
+  component: OrInlineInputBox,
+
+  argTypes: {
+    // Slots
+    default: {
+      type: {
+        name: 'string',
+        required: true,
+      },
+
+      control: { type: 'text' },
+    },
+
+    // Props
+    size: {
+      control: { type: 'select' },
+      options: Object.values(InlineInputBoxSize),
+    },
+
+    invalid: {
+      control: { type: 'boolean' },
+    },
+  },
+
+  parameters: {
+    layout: 'centered',
+
+    docs: {
+      page: OrInlineInputBoxDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=761%3A3372',
+    },
+  },
+} as Meta<typeof OrInlineInputBox>;
+
+const Template: StoryFn<typeof OrInlineInputBox> = (args) => ({
+  components: {
+    OrInlineInputBox,
+  },
+
+  setup() {
+    return { args };
+  },
+
+  template: `
+    <OrInlineInputBox v-bind="args">
+      ${args.default}
+    </OrInlineInputBox>
+  `,
+});
+
+export const InlineInputBox = Template.bind({});
+
+InlineInputBox.args = {
+  // Slots
+  default: 'Input',
+};

package/src/components/or-inline-input-v3/OrInlineInput.stories3.ts

@@ -6,7 +6,7 @@ import OrInlineInput from './OrInlineInput.vue';
 import { InlineInputSize, InlineInputType } from './props';
 
 export default {
-  title: 'Components/Inline Input',
+  title: 'Components/Forms/Inline Input',
   component: OrInlineInput,
 
   argTypes: {

package/src/components/or-inline-textarea-v3/OrInlineTextarea.stories3.ts

@@ -5,7 +5,7 @@ import OrInlineTextareaDocs from './OrInlineTextarea.docs.mdx';
 import OrInlineTextarea from './OrInlineTextarea.vue';
 
 export default {
-  title: 'Components/Inline Textarea',
+  title: 'Components/Forms/Inline Textarea',
   component: OrInlineTextarea,
 
   argTypes: {

package/src/components/or-input-box-v3/OrInputBox.docs.mdx

@@ -0,0 +1,3 @@
+import { DocsPage } from '@storybook/addon-docs';
+
+<DocsPage />

package/src/components/or-input-box-v3/OrInputBox.stories3.ts

@@ -0,0 +1,80 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import OrInputBoxDocs from './OrInputBox.docs.mdx';
+import OrInputBox from './OrInputBox.vue';
+import { InputBoxSize, InputBoxVariant } from './props';
+
+export default {
+  title: 'Components/Forms/Parts/Input Box',
+  component: OrInputBox,
+
+  argTypes: {
+    // Slots
+    default: {
+      type: {
+        name: 'string',
+        required: true,
+      },
+
+      control: { type: 'text' },
+    },
+
+    // Props
+    variant: {
+      control: { type: 'select' },
+      options: Object.values(InputBoxVariant),
+    },
+
+    size: {
+      control: { type: 'select' },
+      options: Object.values(InputBoxSize),
+    },
+
+    invalid: {
+      control: { type: 'boolean' },
+    },
+
+    readonly: {
+      control: { type: 'boolean' },
+    },
+
+    disabled: {
+      control: { type: 'boolean' },
+    },
+  },
+
+  parameters: {
+    layout: 'centered',
+
+    docs: {
+      page: OrInputBoxDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A10',
+    },
+  },
+} as Meta<typeof OrInputBox>;
+
+const Template: StoryFn<typeof OrInputBox> = (args) => ({
+  components: {
+    OrInputBox,
+  },
+
+  setup() {
+    return { args };
+  },
+
+  template: `
+    <OrInputBox v-bind="args">
+      ${args.default}
+    </OrInputBox>
+  `,
+});
+
+export const InputBox = Template.bind({});
+
+InputBox.args = {
+  // Slots
+  default: 'Input',
+};

package/src/components/or-input-box-v3/styles.ts

@@ -93,8 +93,8 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
     'children:min-h-[46px] children:md:min-h-[34px]',
 
     // Spacing
-    'first-child:ml-md first-child:md:ml-sm+',
-    'last-child:mr-md last-child:md:mr-sm+',
+    'first-child:pl-md first-child:md:pl-sm+',
+    'last-child:pr-md last-child:md:pr-sm+',
 
     'gap-sm+ md:gap-sm',
 
@@ -107,8 +107,8 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
     'children:min-h-[30px]',
 
     // Spacing
-    'first-child:ml-md first-child:md:ml-sm+',
-    'last-child:mr-md last-child:md:mr-sm+',
+    'first-child:pl-md first-child:md:pl-sm+',
+    'last-child:pr-md last-child:md:pr-sm+',
 
     'gap-[6px]',
 

package/src/components/or-input-v3/OrInput.stories3.ts

@@ -1,14 +1,14 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/vue3';
-import * as Faker from 'faker';
 import { ref, watch } from 'vue-demi';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import OrInputDocs from './OrInput.docs.mdx';
 import OrInput from './OrInput.vue';
 import { InputSize, InputType } from './props';
+import * as Faker from 'faker';
 
 export default {
-  title: 'Components/Input',
+  title: 'Components/Forms/Input',
   component: OrInput,
 
   argTypes: {