@onereach/ui-components 8.20.3 → 8.21.0

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
 import { DatePicker, DatePickerPopover } from './styles.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-b905e98c.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-508aa10f.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-b5ea2ba9.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';

package/dist/bundled/v2/components/OrDateRangePickerV3/OrDateRangePicker.js

@@ -8,7 +8,7 @@ import __vue_component__$5 from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$6 from '../OrLabelV3/OrLabel.js';
 import __vue_component__$7 from '../OrPopoverV3/OrPopover.js';
 import { getNextMonthDate } from '../OrDateTimePickerV3/utils/getNextMonthDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-b905e98c.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-508aa10f.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-b5ea2ba9.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-b905e98c.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-508aa10f.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-b5ea2ba9.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-6ac77884.js';
 import { DateTimePickerTimeFormat } from './props.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/index.js

@@ -1,5 +1,5 @@
 export { default as OrDateTimePickerV3 } from './OrDateTimePicker.js';
-export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-b905e98c.js';
+export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-508aa10f.js';
 export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-b5ea2ba9.js';
 export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-6ac77884.js';
 export { DateTimePickerTimeFormat } from './props.js';

package/dist/bundled/v2/components/OrDropAreaV3/OrDropArea.js

@@ -0,0 +1,191 @@
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { DropAreaSize } from './props.js';
+import { DropArea, DropAreaSizes, DropAreaControl, DropAreaIcon, DropAreaIconSizes, DropAreaText, DropAreaTextEmphasis, DropAreaConstraints } from './styles.js';
+import __vue_component__$1 from '../OrIconV3/OrIcon.js';
+import { approximateFileSize } from './utils/approximateFileSize.js';
+import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
+import useResponsive from '../../hooks/useResponsive/useResponsive.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+
+var script = defineComponent({
+  components: {
+    OrIcon: __vue_component__$1
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    fileTypes: {
+      type: Array,
+      default: () => []
+    },
+    maxFiles: {
+      type: Number,
+      default: () => 1
+    },
+    maxFileSize: {
+      type: Number,
+      default: () => 10485760
+    },
+    size: {
+      type: String,
+      default: () => DropAreaSize.M
+    },
+    disabled: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  emits: ['update:modelValue'],
+  expose: ['root', 'invalid'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-drop-area-v3', ...DropArea, ...DropAreaSizes[props.size]]);
+    const controlStyles = computed(() => [...DropAreaControl]);
+    const iconStyles = computed(() => [...DropAreaIcon, ...DropAreaIconSizes[props.size]]);
+    const textStyles = computed(() => [...DropAreaText]);
+    const textEmphasisStyles = computed(() => [...DropAreaTextEmphasis]);
+    const constraintsStyles = computed(() => [...DropAreaConstraints]);
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const invalid = computed(() => {
+      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => !props.fileTypes.includes(file.type))) {
+        return true;
+      }
+      if (proxyModelValue.value.length > props.maxFiles) {
+        return true;
+      }
+      if (proxyModelValue.value.some(file => file.size > props.maxFileSize)) {
+        return true;
+      }
+      return false;
+    });
+    // Handlers
+    function onChange(event) {
+      proxyModelValue.value = [...event.target.files];
+    }
+    // Helpers
+    const {
+      isDesktop,
+      isMobile
+    } = useResponsive();
+    return {
+      root,
+      rootStyles,
+      controlStyles,
+      iconStyles,
+      textStyles,
+      textEmphasisStyles,
+      constraintsStyles,
+      proxyModelValue,
+      invalid,
+      onChange,
+      isDesktop,
+      isMobile,
+      approximateFileSize
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "invalid": _vm.invalid,
+      "disabled": _vm.disabled
+    }
+  }, [_c('input', {
+    class: _vm.controlStyles,
+    attrs: {
+      "type": 'file',
+      "accept": _vm.fileTypes.join(','),
+      "multiple": _vm.maxFiles > 1,
+      "disabled": _vm.disabled
+    },
+    on: {
+      "change": function ($event) {
+        return _vm.onChange($event);
+      }
+    }
+  }), _vm._v(" "), _c('div', {
+    class: _vm.iconStyles,
+    attrs: {
+      "invalid": _vm.invalid,
+      "disabled": _vm.disabled
+    }
+  }, [_c('OrIcon', {
+    attrs: {
+      "icon": 'cloud_upload',
+      "size": 'inherit'
+    }
+  })], 1), _vm._v(" "), _c('div', {
+    class: _vm.textStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._t("default", function () {
+    return [_vm.isDesktop ? [_c('div', [_vm._v("Drag file here")]), _vm._v(" "), _c('div', [_vm._v("\n          or\n\n          "), _c('span', {
+      class: _vm.textEmphasisStyles,
+      attrs: {
+        "invalid": _vm.invalid,
+        "disabled": _vm.disabled
+      }
+    }, [_vm._v("\n            Upload from your computer\n          ")])])] : _vm._e(), _vm._v(" "), _vm.isMobile ? [_c('span', {
+      class: _vm.textEmphasisStyles,
+      attrs: {
+        "invalid": _vm.invalid,
+        "disabled": _vm.disabled
+      }
+    }, [_vm._v("\n          Upload from your device\n        ")])] : _vm._e()];
+  }, {
+    "invalid": _vm.invalid,
+    "disabled": _vm.disabled
+  })], 2), _vm._v(" "), _c('div', {
+    class: _vm.constraintsStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._t("constraints", function () {
+    return [_vm._v("\n      Maximum files: " + _vm._s(_vm.maxFiles) + ", maximum file size: " + _vm._s(_vm.approximateFileSize(_vm.maxFileSize)) + "\n    ")];
+  }, {
+    "invalid": _vm.invalid,
+    "disabled": _vm.disabled
+  })], 2)]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { __vue_component__ as default };

package/dist/bundled/v2/components/OrDropAreaV3/OrDropArea.vue.d.ts

@@ -0,0 +1,108 @@
+import { PropType } from 'vue-demi';
+import { DropAreaSize } from './props';
+import { approximateFileSize } from './utils';
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    iconStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    textStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    textEmphasisStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    constraintsStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<File[]>;
+    invalid: import("@vue/composition-api").ComputedRef<boolean>;
+    onChange: (event: Event) => void;
+    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
+    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
+    approximateFileSize: typeof approximateFileSize;
+}> & import("@vue/composition-api").Data, {}, {}, {
+    modelValue: {
+        type: PropType<File[]>;
+        default: () => never[];
+    };
+    fileTypes: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    maxFiles: {
+        type: NumberConstructor;
+        default: () => 1;
+    };
+    maxFileSize: {
+        type: NumberConstructor;
+        default: () => 10485760;
+    };
+    size: {
+        type: PropType<"m" | "s">;
+        default: () => DropAreaSize.M;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<File[]>;
+        default: () => never[];
+    };
+    fileTypes: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    maxFiles: {
+        type: NumberConstructor;
+        default: () => 1;
+    };
+    maxFileSize: {
+        type: NumberConstructor;
+        default: () => 10485760;
+    };
+    size: {
+        type: PropType<"m" | "s">;
+        default: () => DropAreaSize.M;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    modelValue: File[];
+    fileTypes: string[];
+    maxFiles: number;
+    maxFileSize: number;
+    size: "m" | "s";
+    disabled: boolean;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    iconStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    textStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    textEmphasisStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    constraintsStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<File[]>;
+    invalid: import("@vue/composition-api").ComputedRef<boolean>;
+    onChange: (event: Event) => void;
+    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
+    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
+    approximateFileSize: typeof approximateFileSize;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    modelValue: File[];
+    fileTypes: string[];
+    maxFiles: number;
+    maxFileSize: number;
+    size: "m" | "s";
+    disabled: boolean;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: File[];
+    fileTypes: string[];
+    maxFiles: number;
+    maxFileSize: number;
+    size: "m" | "s";
+    disabled: boolean;
+}, true>);
+export default _default;

package/dist/bundled/v2/components/OrDropAreaV3/index.d.ts

@@ -0,0 +1,3 @@
+export { default as OrDropAreaV3 } from './OrDropArea.vue';
+export * from './props';
+export * from './utils';

package/dist/bundled/v2/components/OrDropAreaV3/index.js

@@ -0,0 +1,3 @@
+export { default as OrDropAreaV3 } from './OrDropArea.js';
+export { DropAreaSize } from './props.js';
+export { approximateFileSize } from './utils/approximateFileSize.js';

package/dist/bundled/v2/components/OrDropAreaV3/props.d.ts

@@ -0,0 +1,4 @@
+export declare enum DropAreaSize {
+    M = "m",
+    S = "s"
+}

package/dist/bundled/v2/components/OrDropAreaV3/props.js

@@ -0,0 +1,7 @@
+var DropAreaSize;
+(function (DropAreaSize) {
+  DropAreaSize["M"] = "m";
+  DropAreaSize["S"] = "s";
+})(DropAreaSize || (DropAreaSize = {}));
+
+export { DropAreaSize };

package/dist/bundled/v2/components/OrDropAreaV3/styles.d.ts

@@ -0,0 +1,9 @@
+import { DropAreaSize } from './props';
+export declare const DropArea: string[];
+export declare const DropAreaSizes: Record<DropAreaSize, string[]>;
+export declare const DropAreaControl: string[];
+export declare const DropAreaIcon: string[];
+export declare const DropAreaIconSizes: Record<DropAreaSize, string[]>;
+export declare const DropAreaText: string[];
+export declare const DropAreaTextEmphasis: string[];
+export declare const DropAreaConstraints: string[];

package/dist/bundled/v2/components/OrDropAreaV3/styles.js

@@ -0,0 +1,74 @@
+import { DropAreaSize } from './props.js';
+
+const DropArea = [
+// Position
+'relative',
+// Layout
+'layout-column',
+// Shape
+'rounded-md',
+// Spacing
+'gap-sm',
+// Theme
+'theme-background-primary-translucent-1', 'dark:theme-background-primary-translucent-1-dark', 'theme-border-1-primary', 'dark:theme-border-1-primary-dark', '!border-dashed',
+// Theme (hover)
+'hover:theme-background-primary-translucent-2', 'dark:hover:theme-background-primary-translucent-2-dark',
+// Theme (invalid)
+'invalid:theme-background-error-translucent-1', 'dark:invalid:theme-background-error-translucent-1-dark', 'invalid:theme-border-1-error', 'dark:invalid:theme-border-1-error-dark', 'invalid:!border-dashed',
+// Theme (invalid/hover)
+'hover:invalid:theme-background-error-translucent-2', 'dark:hover:invalid:theme-background-error-translucent-2-dark'];
+const DropAreaSizes = {
+  [DropAreaSize.M]: [
+  // Spacing
+  'pt-xl', 'px-xl', 'pb-3xl'],
+  [DropAreaSize.S]: [
+  // Spacing
+  'pt-md', 'px-xl', 'pb-xl']
+};
+const DropAreaControl = [
+// Position
+'absolute inset-0',
+// Visibility
+'opacity-0',
+// Interactivity
+'interactivity-click'];
+const DropAreaIcon = [
+// Layout
+'layout-column',
+// Typography
+'leading-none',
+// Theme
+'theme-foreground-primary-translucent-2', 'dark:theme-foreground-primary-translucent-2-dark',
+// Theme (invalid)
+'invalid:theme-foreground-error-translucent-2', 'dark:invalid:theme-foreground-error-translucent-2-dark'];
+const DropAreaIconSizes = {
+  [DropAreaSize.M]: [
+  // Typography
+  'text-[94px]'],
+  [DropAreaSize.S]: [
+  // Typography
+  'text-[48px]']
+};
+const DropAreaText = [
+// Layout
+'layout-column',
+// Typography
+'typography-body-2-regular text-center',
+// Theme
+'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+const DropAreaTextEmphasis = [
+// Typography
+'typography-body-2-bold',
+// Theme
+'theme-foreground-primary', 'dark:theme-foreground-primary-dark',
+// Theme (invalid)
+'invalid:theme-foreground-error', 'dark:invalid:theme-foreground-error-dark'];
+const DropAreaConstraints = [
+// Layout
+'layout-column',
+// Typography
+'typography-body-2-regular text-center',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+export { DropArea, DropAreaConstraints, DropAreaControl, DropAreaIcon, DropAreaIconSizes, DropAreaSizes, DropAreaText, DropAreaTextEmphasis };

package/dist/bundled/v2/components/OrDropAreaV3/utils/approximateFileSize.d.ts

@@ -0,0 +1 @@
+export declare function approximateFileSize(value: number): string;

package/dist/bundled/v2/components/OrDropAreaV3/utils/approximateFileSize.js

@@ -0,0 +1,7 @@
+function approximateFileSize(value) {
+  const units = ['B', 'kB', 'MB', 'GB'];
+  const exponent = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);
+  return exponent === 0 ? `${value} B` : `${value / 1024 ** exponent} ${units[exponent]}`;
+}
+
+export { approximateFileSize };

package/dist/bundled/v2/components/OrDropAreaV3/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './approximateFileSize';

package/dist/bundled/v2/components/OrDropAreaV3/utils/index.js

@@ -0,0 +1 @@
+export { approximateFileSize } from './approximateFileSize.js';

package/dist/bundled/v2/components/OrListV3/OrList.js

@@ -1,2 +1,2 @@
-export { _ as default } from '../../OrList-40eb340c.js';
+export { _ as default } from '../../OrList-968e3d1c.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrListV3/index.js

@@ -1 +1 @@
-export { O as OrListItem, _ as OrListV3 } from '../../OrList-40eb340c.js';
+export { O as OrListItem, _ as OrListV3 } from '../../OrList-968e3d1c.js';

package/dist/bundled/v2/components/index.d.ts

@@ -28,6 +28,7 @@ export * from './or-date-range-picker-v3';
 export * from './or-date-time-format-v3';
 export * from './or-date-time-picker';
 export * from './or-date-time-picker-v3';
+export * from './or-drop-area-v3';
 export * from './or-empty-state-v3';
 export * from './or-error';
 export * from './or-error-tag-v3';

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

@@ -52,7 +52,7 @@ export { default as OrDateTimeFormatV3 } from './OrDateTimeFormatV3/OrDateTimeFo
 export { default as OrDateTimePicker } from './OrDateTimePicker/OrDateTimePicker.js';
 export { DEFAULT_TEXT, OrDateTimePickerItemTypes, OrDateTimePickerTypes } from './OrDateTimePicker/constants.js';
 export { default as OrDateTimePickerV3 } from './OrDateTimePickerV3/OrDateTimePicker.js';
-export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../OrDateTimePickerMonthSelect-b905e98c.js';
+export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../OrDateTimePickerMonthSelect-508aa10f.js';
 export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../OrDateTimePickerPopoverHeader-b5ea2ba9.js';
 export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../OrDateTimePickerTimeSelect-6ac77884.js';
 export { DateTimePickerTimeFormat, DateTimePickerTimeFormat as TimePickerFormat, DateTimePickerTimeFormat as TimeRangePickerFormat } from './OrDateTimePickerV3/props.js';
@@ -62,6 +62,9 @@ export { getCurrentDate } from './OrDateTimePickerV3/utils/getCurrentDate.js';
 export { getDatePlaceholder } from './OrDateTimePickerV3/utils/getDatePlaceholder.js';
 export { getNextMonthDate } from './OrDateTimePickerV3/utils/getNextMonthDate.js';
 export { getTimePlaceholder } from './OrDateTimePickerV3/utils/getTimePlaceholder.js';
+export { default as OrDropAreaV3 } from './OrDropAreaV3/OrDropArea.js';
+export { DropAreaSize } from './OrDropAreaV3/props.js';
+export { approximateFileSize } from './OrDropAreaV3/utils/approximateFileSize.js';
 export { default as OrEmptyStateV3 } from './OrEmptyStateV3/OrEmptyState.js';
 export { EmptyStateSize } from './OrEmptyStateV3/props.js';
 export { default as OrError } from './OrError/OrError.js';
@@ -101,7 +104,7 @@ export { default as OrLinkV3 } from './OrLinkV3/OrLink.js';
 export { LinkColor } from './OrLinkV3/props.js';
 export { default as OrList } from './OrList/OrList.js';
 export { default as OrListOfInputs } from './OrListOfInputs/OrListOfInputs.js';
-export { O as OrListItem, _ as OrListV3 } from '../OrList-40eb340c.js';
+export { O as OrListItem, _ as OrListV3 } from '../OrList-968e3d1c.js';
 export { default as OrLoader } from './OrLoader/OrLoader.js';
 export { LoaderViews } from './OrLoader/constants.js';
 export { default as OrLoaderV3 } from './OrLoaderV3/OrLoader.js';

package/dist/bundled/v2/hooks/useResponsive/useResponsive.js

@@ -79,23 +79,23 @@ const variants = {
   'mobile': '@media (hover: none)',
   'desktop': '@media (hover: hover)',
 
-  'draggable': ['&[draggable]:not([draggable="false"])'],
+  'draggable': ['&:is([draggable]:not([draggable="false"]))', '&[force-state~="draggable"]'],
 
-  'checked': ['&[checked]:not([checked="false"])', '&:checked'],
-  'selected': ['&[selected]:not([selected="false"])', '&:checked'],
-  'activated': ['&[activated]:not([activated="false"])'],
+  'checked': ['&:is([checked]:not([checked="false"]), :checked)', '&[force-state~="checked"]'],
+  'selected': ['&:is([selected]:not([selected="false"]), :checked)', '&[force-state~="selected"]'],
+  'activated': ['&:is([activated]:not([activated="false"]))', '&[force-state~="activated"]'],
 
-  'enabled': ['&:not([disabled])', '&[disabled="false"]'],
-  'disabled': ['&[disabled]:not([disabled="false"])'],
+  'enabled': ['&:is(:not([disabled]), [disabled="false"])', '&[force-state~="enabled"]'],
+  'disabled': ['&:is([disabled]:not([disabled="false"]))', '&[force-state~="disabled"]'],
 
-  'optional': ['&:not([required])', '&[required="false"]'],
-  'required': ['&[required]:not([required="false"])'],
+  'optional': ['&:is(:not([required]), [required="false"])', '&[force-state~="optional"]'],
+  'required': ['&:is([required]:not([required="false"]))', '&[force-state~="required"]'],
 
-  'read-write': ['&:not([readonly])', '&[readonly="false"]'],
-  'read-only': ['&[readonly]:not([readonly="false"])'],
+  'read-write': ['&:is(:not([readonly]), [readonly="false"])', '&[force-state~="read-write"]'],
+  'read-only': ['&:is([readonly]:not([readonly="false"]))', '&[force-state~="read-only"]'],
 
-  'valid': ['&:not([invalid])', '&[invalid="false"]'],
-  'invalid': ['&[invalid]:not([invalid="false"])'],
+  'valid': ['&:is(:not([invalid]), [invalid="false"])', '&[force-state~="valid"]'],
+  'invalid': ['&:is([invalid]:not([invalid="false"]))', '&[force-state~="invalid"]'],
 
   // Sub-components
   'children': ['& > *'],
@@ -103,35 +103,35 @@ const variants = {
   get 'hover'() {
     return this['enabled'].flatMap((selector) => [
       `${selector}:not(.interactivity-none):not([force-state]):hover`,
-      `${selector}:not(.interactivity-none)[force-state="hover"]`,
+      `${selector}:not(.interactivity-none)[force-state~="hover"]`,
     ]);
   },
 
   get 'focus'() {
     return this['enabled'].flatMap((selector) => [
       `${selector}:not(.interactivity-none):not([force-state]):focus`,
-      `${selector}:not(.interactivity-none)[force-state="focus"]`,
+      `${selector}:not(.interactivity-none)[force-state~="focus"]`,
     ]);
   },
 
   get 'focus-within'() {
     return this['enabled'].flatMap((selector) => [
       `${selector}:not(.interactivity-none):not([force-state]):focus-within`,
-      `${selector}:not(.interactivity-none)[force-state="focus-within"]`,
+      `${selector}:not(.interactivity-none)[force-state~="focus-within"]`,
     ]);
   },
 
   get 'focus-visible'() {
     return this['enabled'].flatMap((selector) => [
       `${selector}:not(.interactivity-none):not([force-state]):focus-visible`,
-      `${selector}:not(.interactivity-none)[force-state="focus-visible"]`,
+      `${selector}:not(.interactivity-none)[force-state~="focus-visible"]`,
     ]);
   },
 
   get 'active'() {
     return this['enabled'].flatMap((selector) => [
       `${selector}:not(.interactivity-none):not([force-state]):active`,
-      `${selector}:not(.interactivity-none)[force-state="active"]`,
+      `${selector}:not(.interactivity-none)[force-state~="active"]`,
     ]);
   },
 };