primevue 4.2.5 → 4.3.0

package/image/style/index.mjs

@@ -1,12 +1,9 @@
+import { style } from '@primeuix/styles/image';
 import BaseStyle from '@primevue/core/base/style';
 
-var theme = function theme(_ref) {
-  var dt = _ref.dt;
-  return "\n.p-image-mask {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.p-image-preview {\n    position: relative;\n    display: inline-flex;\n    line-height: 0;\n}\n\n.p-image-preview-mask {\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.3s;\n    border: 0 none;\n    padding: 0;\n    cursor: pointer;\n    background: transparent;\n    color: ".concat(dt('image.preview.mask.color'), ";\n    transition: background ").concat(dt('image.transition.duration'), ";\n}\n\n.p-image-preview:hover > .p-image-preview-mask {\n    opacity: 1;\n    cursor: pointer;\n    background: ").concat(dt('image.preview.mask.background'), ";\n}\n\n.p-image-preview-icon {\n    font-size: ").concat(dt('image.preview.icon.size'), ";\n    width: ").concat(dt('image.preview.icon.size'), ";\n    height: ").concat(dt('image.preview.icon.size'), ";\n}\n\n.p-image-toolbar {\n    position: absolute;\n    inset-block-start: ").concat(dt('image.toolbar.position.top'), ";\n    inset-inline-end: ").concat(dt('image.toolbar.position.right'), ";\n    inset-inline-start: ").concat(dt('image.toolbar.position.left'), ";\n    inset-block-end: ").concat(dt('image.toolbar.position.bottom'), ";\n    display: flex;\n    z-index: 1;\n    padding: ").concat(dt('image.toolbar.padding'), ";\n    background: ").concat(dt('image.toolbar.background'), ";\n    backdrop-filter: blur(").concat(dt('image.toolbar.blur'), ");\n    border-color: ").concat(dt('image.toolbar.border.color'), ";\n    border-style: solid;\n    border-width: ").concat(dt('image.toolbar.border.width'), ";\n    border-radius: ").concat(dt('image.toolbar.border.radius'), ";\n    gap: ").concat(dt('image.toolbar.gap'), ";\n}\n\n.p-image-action {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    color: ").concat(dt('image.action.color'), ";\n    background: transparent;\n    width: ").concat(dt('image.action.size'), ";\n    height: ").concat(dt('image.action.size'), ";\n    margin: 0;\n    padding: 0;\n    border: 0 none;\n    cursor: pointer;\n    user-select: none;\n    border-radius: ").concat(dt('image.action.border.radius'), ";\n    outline-color: transparent;\n    transition: background ").concat(dt('image.transition.duration'), ", color ").concat(dt('image.transition.duration'), ", outline-color ").concat(dt('image.transition.duration'), ", box-shadow ").concat(dt('image.transition.duration'), ";\n}\n\n.p-image-action:hover {\n    color: ").concat(dt('image.action.hover.color'), ";\n    background: ").concat(dt('image.action.hover.background'), ";\n}\n\n.p-image-action:focus-visible {\n    box-shadow: ").concat(dt('image.action.focus.ring.shadow'), ";\n    outline: ").concat(dt('image.action.focus.ring.width'), " ").concat(dt('image.action.focus.ring.style'), " ").concat(dt('image.action.focus.ring.color'), ";\n    outline-offset: ").concat(dt('image.action.focus.ring.offset'), ";\n}\n\n.p-image-action .p-icon {\n    font-size: ").concat(dt('image.action.icon.size'), ";\n    width: ").concat(dt('image.action.icon.size'), ";\n    height: ").concat(dt('image.action.icon.size'), ";\n}\n\n.p-image-action.p-disabled {\n    pointer-events: auto;\n}\n\n.p-image-original {\n    transition: transform 0.15s;\n    max-width: 100vw;\n    max-height: 100vh;\n}\n\n.p-image-original-enter-active {\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.p-image-original-leave-active {\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.p-image-original-enter-from,\n.p-image-original-leave-to {\n    opacity: 0;\n    transform: scale(0.7);\n}\n");
-};
 var classes = {
-  root: function root(_ref2) {
-    var props = _ref2.props;
+  root: function root(_ref) {
+    var props = _ref.props;
     return ['p-image p-component', {
       'p-image-preview': props.preview
     }];
@@ -17,14 +14,14 @@ var classes = {
   toolbar: 'p-image-toolbar',
   rotateRightButton: 'p-image-action p-image-rotate-right-button',
   rotateLeftButton: 'p-image-action p-image-rotate-left-button',
-  zoomOutButton: function zoomOutButton(_ref3) {
-    var instance = _ref3.instance;
+  zoomOutButton: function zoomOutButton(_ref2) {
+    var instance = _ref2.instance;
     return ['p-image-action p-image-zoom-out-button', {
       'p-disabled': instance.isZoomOutDisabled
     }];
   },
-  zoomInButton: function zoomInButton(_ref4) {
-    var instance = _ref4.instance;
+  zoomInButton: function zoomInButton(_ref3) {
+    var instance = _ref3.instance;
     return ['p-image-action p-image-zoom-in-button', {
       'p-disabled': instance.isZoomInDisabled
     }];
@@ -34,7 +31,7 @@ var classes = {
 };
 var ImageStyle = BaseStyle.extend({
   name: 'image',
-  theme: theme,
+  style: style,
   classes: classes
 });
 

package/image/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/image/style/ImageStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-image-mask {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.p-image-preview {\n    position: relative;\n    display: inline-flex;\n    line-height: 0;\n}\n\n.p-image-preview-mask {\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.3s;\n    border: 0 none;\n    padding: 0;\n    cursor: pointer;\n    background: transparent;\n    color: ${dt('image.preview.mask.color')};\n    transition: background ${dt('image.transition.duration')};\n}\n\n.p-image-preview:hover > .p-image-preview-mask {\n    opacity: 1;\n    cursor: pointer;\n    background: ${dt('image.preview.mask.background')};\n}\n\n.p-image-preview-icon {\n    font-size: ${dt('image.preview.icon.size')};\n    width: ${dt('image.preview.icon.size')};\n    height: ${dt('image.preview.icon.size')};\n}\n\n.p-image-toolbar {\n    position: absolute;\n    inset-block-start: ${dt('image.toolbar.position.top')};\n    inset-inline-end: ${dt('image.toolbar.position.right')};\n    inset-inline-start: ${dt('image.toolbar.position.left')};\n    inset-block-end: ${dt('image.toolbar.position.bottom')};\n    display: flex;\n    z-index: 1;\n    padding: ${dt('image.toolbar.padding')};\n    background: ${dt('image.toolbar.background')};\n    backdrop-filter: blur(${dt('image.toolbar.blur')});\n    border-color: ${dt('image.toolbar.border.color')};\n    border-style: solid;\n    border-width: ${dt('image.toolbar.border.width')};\n    border-radius: ${dt('image.toolbar.border.radius')};\n    gap: ${dt('image.toolbar.gap')};\n}\n\n.p-image-action {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    color: ${dt('image.action.color')};\n    background: transparent;\n    width: ${dt('image.action.size')};\n    height: ${dt('image.action.size')};\n    margin: 0;\n    padding: 0;\n    border: 0 none;\n    cursor: pointer;\n    user-select: none;\n    border-radius: ${dt('image.action.border.radius')};\n    outline-color: transparent;\n    transition: background ${dt('image.transition.duration')}, color ${dt('image.transition.duration')}, outline-color ${dt('image.transition.duration')}, box-shadow ${dt('image.transition.duration')};\n}\n\n.p-image-action:hover {\n    color: ${dt('image.action.hover.color')};\n    background: ${dt('image.action.hover.background')};\n}\n\n.p-image-action:focus-visible {\n    box-shadow: ${dt('image.action.focus.ring.shadow')};\n    outline: ${dt('image.action.focus.ring.width')} ${dt('image.action.focus.ring.style')} ${dt('image.action.focus.ring.color')};\n    outline-offset: ${dt('image.action.focus.ring.offset')};\n}\n\n.p-image-action .p-icon {\n    font-size: ${dt('image.action.icon.size')};\n    width: ${dt('image.action.icon.size')};\n    height: ${dt('image.action.icon.size')};\n}\n\n.p-image-action.p-disabled {\n    pointer-events: auto;\n}\n\n.p-image-original {\n    transition: transform 0.15s;\n    max-width: 100vw;\n    max-height: 100vh;\n}\n\n.p-image-original-enter-active {\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.p-image-original-leave-active {\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.p-image-original-enter-from,\n.p-image-original-leave-to {\n    opacity: 0;\n    transform: scale(0.7);\n}\n`;\n\nconst classes = {\n    root: ({ props }) => [\n        'p-image p-component',\n        {\n            'p-image-preview': props.preview\n        }\n    ],\n    previewMask: 'p-image-preview-mask',\n    previewIcon: 'p-image-preview-icon',\n    mask: 'p-image-mask p-overlay-mask p-overlay-mask-enter',\n    toolbar: 'p-image-toolbar',\n    rotateRightButton: 'p-image-action p-image-rotate-right-button',\n    rotateLeftButton: 'p-image-action p-image-rotate-left-button',\n    zoomOutButton: ({ instance }) => [\n        'p-image-action p-image-zoom-out-button',\n        {\n            'p-disabled': instance.isZoomOutDisabled\n        }\n    ],\n    zoomInButton: ({ instance }) => [\n        'p-image-action p-image-zoom-in-button',\n        {\n            'p-disabled': instance.isZoomInDisabled\n        }\n    ],\n    closeButton: 'p-image-action p-image-close-button',\n    original: 'p-image-original'\n};\n\nexport default BaseStyle.extend({\n    name: 'image',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","props","preview","previewMask","previewIcon","mask","toolbar","rotateRightButton","rotateLeftButton","zoomOutButton","_ref3","instance","isZoomOutDisabled","zoomInButton","_ref4","isZoomInDisabled","closeButton","original","BaseStyle","extend","name"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/image/style/ImageStyle.js"],"sourcesContent":["import { style } from '@primeuix/styles/image';\nimport BaseStyle from '@primevue/core/base/style';\n\nconst classes = {\n    root: ({ props }) => [\n        'p-image p-component',\n        {\n            'p-image-preview': props.preview\n        }\n    ],\n    previewMask: 'p-image-preview-mask',\n    previewIcon: 'p-image-preview-icon',\n    mask: 'p-image-mask p-overlay-mask p-overlay-mask-enter',\n    toolbar: 'p-image-toolbar',\n    rotateRightButton: 'p-image-action p-image-rotate-right-button',\n    rotateLeftButton: 'p-image-action p-image-rotate-left-button',\n    zoomOutButton: ({ instance }) => [\n        'p-image-action p-image-zoom-out-button',\n        {\n            'p-disabled': instance.isZoomOutDisabled\n        }\n    ],\n    zoomInButton: ({ instance }) => [\n        'p-image-action p-image-zoom-in-button',\n        {\n            'p-disabled': instance.isZoomInDisabled\n        }\n    ],\n    closeButton: 'p-image-action p-image-close-button',\n    original: 'p-image-original'\n};\n\nexport default BaseStyle.extend({\n    name: 'image',\n    style,\n    classes\n});\n"],"names":["classes","root","_ref","props","preview","previewMask","previewIcon","mask","toolbar","rotateRightButton","rotateLeftButton","zoomOutButton","_ref2","instance","isZoomOutDisabled","zoomInButton","_ref3","isZoomInDisabled","closeButton","original","BaseStyle","extend","name","style"],"mappings":";;;AAGA,IAAMA,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAKC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAA,OAAO,CACjB,qBAAqB,EACrB;MACI,iBAAiB,EAAEA,KAAK,CAACC;AAC7B,KAAC,CACJ;AAAA,GAAA;AACDC,EAAAA,WAAW,EAAE,sBAAsB;AACnCC,EAAAA,WAAW,EAAE,sBAAsB;AACnCC,EAAAA,IAAI,EAAE,kDAAkD;AACxDC,EAAAA,OAAO,EAAE,iBAAiB;AAC1BC,EAAAA,iBAAiB,EAAE,4CAA4C;AAC/DC,EAAAA,gBAAgB,EAAE,2CAA2C;AAC7DC,EAAAA,aAAa,EAAE,SAAfA,aAAaA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OAAO,CAC7B,wCAAwC,EACxC;MACI,YAAY,EAAEA,QAAQ,CAACC;AAC3B,KAAC,CACJ;AAAA,GAAA;AACDC,EAAAA,YAAY,EAAE,SAAdA,YAAYA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKH,QAAQ,GAAAG,KAAA,CAARH,QAAQ;IAAA,OAAO,CAC5B,uCAAuC,EACvC;MACI,YAAY,EAAEA,QAAQ,CAACI;AAC3B,KAAC,CACJ;AAAA,GAAA;AACDC,EAAAA,WAAW,EAAE,qCAAqC;AAClDC,EAAAA,QAAQ,EAAE;AACd,CAAC;AAED,iBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,OAAO;AACbC,EAAAA,KAAK,EAALA,KAAK;AACLvB,EAAAA,OAAO,EAAPA;AACJ,CAAC,CAAC;;;;"}

package/imagecompare/index.mjs

@@ -2,7 +2,7 @@ import { $dt } from '@primeuix/styled';
 import { setCSSProperty } from '@primeuix/utils/dom';
 import BaseComponent from '@primevue/core/basecomponent';
 import ImageCompareStyle from 'primevue/imagecompare/style';
-import { openBlock, createElementBlock, mergeProps, renderSlot, createElementVNode } from 'vue';
+import { createElementBlock, openBlock, mergeProps, renderSlot, createElementVNode } from 'vue';
 
 var script$1 = {
   name: 'BaseImageCompare',

package/imagecompare/style/index.mjs

@@ -1,16 +1,13 @@
+import { style } from '@primeuix/styles/imagecompare';
 import BaseStyle from '@primevue/core/base/style';
 
-var theme = function theme(_ref) {
-  var dt = _ref.dt;
-  return "\n.p-imagecompare {\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    aspect-ratio: 16 / 9;\n}\n\n.p-imagecompare img {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n\n.p-imagecompare img + img {\n    clip-path: polygon(0 0, ".concat(dt('imagecompare.scope.x', '50%'), " 0, ").concat(dt('imagecompare.scope.x', '50%'), " 100%, 0 100%);\n}\n\n.p-imagecompare:dir(rtl) img + img {\n    clip-path: polygon(calc(100% - ").concat(dt('imagecompare.scope.x', '50%'), ") 0, 100% 0, 100% 100%, calc(100% - ").concat(dt('imagecompare.scope.x', '50%'), ") 100%);\n}\n\n.p-imagecompare-slider {\n    position: relative;\n    -webkit-appearance: none;\n    width: calc(100% + ").concat(dt('imagecompare.handle.size'), ");\n    height: 100%;\n    margin-inline-start: calc(-1 * calc(").concat(dt('imagecompare.handle.size'), " / 2));\n    background-color: transparent;\n    outline: none;\n    transition: all ").concat(dt('imagecompare.handle.transition.duration'), ";\n}\n\n.p-imagecompare-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: ").concat(dt('imagecompare.handle.size'), ";\n    width: ").concat(dt('imagecompare.handle.size'), ";\n    background: ").concat(dt('imagecompare.handle.background'), ";\n    border: ").concat(dt('imagecompare.handle.border.width'), " solid ").concat(dt('imagecompare.handle.border.color'), ";\n    border-radius: ").concat(dt('imagecompare.handle.border.radius'), ";\n    background-size: contain;\n    cursor: ew-resize;\n    transition: all ").concat(dt('imagecompare.handle.transition.duration'), ";\n}\n\n.p-imagecompare-slider::-moz-range-thumb {\n    height: ").concat(dt('imagecompare.handle.size'), ";\n    width: ").concat(dt('imagecompare.handle.size'), ";\n    background: ").concat(dt('imagecompare.handle.background'), ";\n    border: ").concat(dt('imagecompare.handle.border.width'), " ").concat(dt('imagecompare.handle.border.style'), " ").concat(dt('imagecompare.handle.border.color'), ";\n    border-radius: ").concat(dt('imagecompare.handle.border.radius'), ";\n    background-size: contain;\n    cursor: ew-resize;\n}\n\n.p-imagecompare-slider:focus-visible::-webkit-slider-thumb {\n    box-shadow: ").concat(dt('imagecompare.handle.focus.ring.shadow'), ";\n    outline: ").concat(dt('imagecompare.handle.focus.ring.width'), " ").concat(dt('imagecompare.handle.focus.ring.style'), " ").concat(dt('imagecompare.handle.focus.ring.color'), ";\n    outline-offset: ").concat(dt('imagecompare.handle.focus.ring.offset'), ";\n}\n\n.p-imagecompare-slider:focus-visible::-moz-range-thumb {\n    box-shadow: ").concat(dt('imagecompare.handle.focus.ring.shadow'), ";\n    outline: ").concat(dt('imagecompare.handle.focus.ring.width'), " ").concat(dt('imagecompare.handle.focus.ring.style'), " ").concat(dt('imagecompare.handle.focus.ring.color'), ";\n    outline-offset: ").concat(dt('imagecompare.handle.focus.ring.offset'), ";\n}\n\n.p-imagecompare-slider:hover {\n    width: calc(100% + ").concat(dt('imagecompare.handle.hover.size'), ");\n    margin-inline-start: calc(-1 * calc(").concat(dt('imagecompare.handle.hover.size'), " / 2));\n}\n\n.p-imagecompare-slider:hover::-webkit-slider-thumb {\n    background: ").concat(dt('imagecompare.handle.hover.background'), ";\n    border-color: ").concat(dt('imagecompare.handle.hover.border.color'), ";\n    height: ").concat(dt('imagecompare.handle.hover.size'), ";\n    width: ").concat(dt('imagecompare.handle.hover.size'), ";\n}\n\n.p-imagecompare-slider:hover::-moz-range-thumb {\n    background: ").concat(dt('imagecompare.handle.hover.background'), ";\n    border-color: ").concat(dt('imagecompare.handle.hover.border.color'), ";\n    height: ").concat(dt('imagecompare.handle.hover.size'), ";\n    width: ").concat(dt('imagecompare.handle.hover.size'), ";\n}\n");
-};
 var classes = {
   root: 'p-imagecompare',
   slider: 'p-imagecompare-slider'
 };
 var ImageCompareStyle = BaseStyle.extend({
   name: 'imagecompare',
-  theme: theme,
+  style: style,
   classes: classes
 });
 

package/imagecompare/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/imagecompare/style/ImageCompareStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-imagecompare {\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    aspect-ratio: 16 / 9;\n}\n\n.p-imagecompare img {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n\n.p-imagecompare img + img {\n    clip-path: polygon(0 0, ${dt('imagecompare.scope.x', '50%')} 0, ${dt('imagecompare.scope.x', '50%')} 100%, 0 100%);\n}\n\n.p-imagecompare:dir(rtl) img + img {\n    clip-path: polygon(calc(100% - ${dt('imagecompare.scope.x', '50%')}) 0, 100% 0, 100% 100%, calc(100% - ${dt('imagecompare.scope.x', '50%')}) 100%);\n}\n\n.p-imagecompare-slider {\n    position: relative;\n    -webkit-appearance: none;\n    width: calc(100% + ${dt('imagecompare.handle.size')});\n    height: 100%;\n    margin-inline-start: calc(-1 * calc(${dt('imagecompare.handle.size')} / 2));\n    background-color: transparent;\n    outline: none;\n    transition: all ${dt('imagecompare.handle.transition.duration')};\n}\n\n.p-imagecompare-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: ${dt('imagecompare.handle.size')};\n    width: ${dt('imagecompare.handle.size')};\n    background: ${dt('imagecompare.handle.background')};\n    border: ${dt('imagecompare.handle.border.width')} solid ${dt('imagecompare.handle.border.color')};\n    border-radius: ${dt('imagecompare.handle.border.radius')};\n    background-size: contain;\n    cursor: ew-resize;\n    transition: all ${dt('imagecompare.handle.transition.duration')};\n}\n\n.p-imagecompare-slider::-moz-range-thumb {\n    height: ${dt('imagecompare.handle.size')};\n    width: ${dt('imagecompare.handle.size')};\n    background: ${dt('imagecompare.handle.background')};\n    border: ${dt('imagecompare.handle.border.width')} ${dt('imagecompare.handle.border.style')} ${dt('imagecompare.handle.border.color')};\n    border-radius: ${dt('imagecompare.handle.border.radius')};\n    background-size: contain;\n    cursor: ew-resize;\n}\n\n.p-imagecompare-slider:focus-visible::-webkit-slider-thumb {\n    box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};\n    outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};\n    outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};\n}\n\n.p-imagecompare-slider:focus-visible::-moz-range-thumb {\n    box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};\n    outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};\n    outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};\n}\n\n.p-imagecompare-slider:hover {\n    width: calc(100% + ${dt('imagecompare.handle.hover.size')});\n    margin-inline-start: calc(-1 * calc(${dt('imagecompare.handle.hover.size')} / 2));\n}\n\n.p-imagecompare-slider:hover::-webkit-slider-thumb {\n    background: ${dt('imagecompare.handle.hover.background')};\n    border-color: ${dt('imagecompare.handle.hover.border.color')};\n    height: ${dt('imagecompare.handle.hover.size')};\n    width: ${dt('imagecompare.handle.hover.size')};\n}\n\n.p-imagecompare-slider:hover::-moz-range-thumb {\n    background: ${dt('imagecompare.handle.hover.background')};\n    border-color: ${dt('imagecompare.handle.hover.border.color')};\n    height: ${dt('imagecompare.handle.hover.size')};\n    width: ${dt('imagecompare.handle.hover.size')};\n}\n`;\n\nconst classes = {\n    root: 'p-imagecompare',\n    slider: 'p-imagecompare-slider'\n};\n\nexport default BaseStyle.extend({\n    name: 'imagecompare',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","slider","BaseStyle","extend","name"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/imagecompare/style/ImageCompareStyle.js"],"sourcesContent":["import { style } from '@primeuix/styles/imagecompare';\nimport BaseStyle from '@primevue/core/base/style';\n\nconst classes = {\n    root: 'p-imagecompare',\n    slider: 'p-imagecompare-slider'\n};\n\nexport default BaseStyle.extend({\n    name: 'imagecompare',\n    style,\n    classes\n});\n"],"names":["classes","root","slider","BaseStyle","extend","name","style"],"mappings":";;;AAGA,IAAMA,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE,gBAAgB;AACtBC,EAAAA,MAAM,EAAE;AACZ,CAAC;AAED,wBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,cAAc;AACpBC,EAAAA,KAAK,EAALA,KAAK;AACLN,EAAAA,OAAO,EAAPA;AACJ,CAAC,CAAC;;;;"}

package/index.d.ts

@@ -1,5 +1,8 @@
 /***************** PrimeVue (Auto-Generated) *****************/
 
+// Utils
+export * from 'primevue/utils';
+
 // UseConfirm
 export * from 'primevue/useconfirm';
 

package/index.mjs

@@ -1,3 +1,4 @@
+export * from 'primevue/utils';
 export * from 'primevue/useconfirm';
 export * from 'primevue/usedialog';
 export * from 'primevue/usetoast';

package/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/inlinemessage/index.mjs

@@ -4,7 +4,7 @@ import InfoCircleIcon from '@primevue/icons/infocircle';
 import TimesCircleIcon from '@primevue/icons/timescircle';
 import BaseComponent from '@primevue/core/basecomponent';
 import InlineMessageStyle from 'primevue/inlinemessage/style';
-import { openBlock, createElementBlock, mergeProps, renderSlot, createBlock, resolveDynamicComponent, createCommentVNode } from 'vue';
+import { createElementBlock, openBlock, mergeProps, renderSlot, createCommentVNode, createBlock, resolveDynamicComponent } from 'vue';
 
 var script$1 = {
   name: 'BaseInlineMessage',

package/inlinemessage/style/index.mjs

@@ -1,26 +1,23 @@
+import { style } from '@primeuix/styles/inlinemessage';
 import BaseStyle from '@primevue/core/base/style';
 
-var theme = function theme(_ref) {
-  var dt = _ref.dt;
-  return "\n.p-inlinemessage {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: ".concat(dt('inlinemessage.padding'), ";\n    border-radius: ").concat(dt('inlinemessage.border.radius'), ";\n    gap: ").concat(dt('inlinemessage.gap'), ";\n}\n\n.p-inlinemessage-text {\n    font-weight: ").concat(dt('inlinemessage.text.font.weight'), ";\n}\n\n.p-inlinemessage-icon {\n    flex-shrink: 0;\n    font-size: ").concat(dt('inlinemessage.icon.size'), ";\n    width: ").concat(dt('inlinemessage.icon.size'), ";\n    height: ").concat(dt('inlinemessage.icon.size'), ";\n}\n\n.p-inlinemessage-icon-only .p-inlinemessage-text {\n    visibility: hidden;\n    width: 0;\n}\n\n.p-inlinemessage-info {\n    background: ").concat(dt('inlinemessage.info.background'), ";\n    border: 1px solid ").concat(dt('inlinemessage.info.border.color'), ";\n    color: ").concat(dt('inlinemessage.info.color'), ";\n    box-shadow: ").concat(dt('inlinemessage.info.shadow'), ";\n}\n\n.p-inlinemessage-info .p-inlinemessage-icon {\n    color: ").concat(dt('inlinemessage.info.color'), ";\n}\n\n.p-inlinemessage-success {\n    background: ").concat(dt('inlinemessage.success.background'), ";\n    border: 1px solid ").concat(dt('inlinemessage.success.border.color'), ";\n    color: ").concat(dt('inlinemessage.success.color'), ";\n    box-shadow: ").concat(dt('inlinemessage.success.shadow'), ";\n}\n\n.p-inlinemessage-success .p-inlinemessage-icon {\n    color: ").concat(dt('inlinemessage.success.color'), ";\n}\n\n.p-inlinemessage-warn {\n    background: ").concat(dt('inlinemessage.warn.background'), ";\n    border: 1px solid ").concat(dt('inlinemessage.warn.border.color'), ";\n    color: ").concat(dt('inlinemessage.warn.color'), ";\n    box-shadow: ").concat(dt('inlinemessage.warn.shadow'), ";\n}\n\n.p-inlinemessage-warn .p-inlinemessage-icon {\n    color: ").concat(dt('inlinemessage.warn.color'), ";\n}\n\n.p-inlinemessage-error {\n    background: ").concat(dt('inlinemessage.error.background'), ";\n    border: 1px solid ").concat(dt('inlinemessage.error.border.color'), ";\n    color: ").concat(dt('inlinemessage.error.color'), ";\n    box-shadow: ").concat(dt('inlinemessage.error.shadow'), ";\n}\n\n.p-inlinemessage-error .p-inlinemessage-icon {\n    color: ").concat(dt('inlinemessage.error.color'), ";\n}\n\n.p-inlinemessage-secondary {\n    background: ").concat(dt('inlinemessage.secondary.background'), ";\n    border: 1px solid ").concat(dt('inlinemessage.secondary.border.color'), ";\n    color: ").concat(dt('inlinemessage.secondary.color'), ";\n    box-shadow: ").concat(dt('inlinemessage.secondary.shadow'), ";\n}\n\n.p-inlinemessage-secondary .p-inlinemessage-icon {\n    color: ").concat(dt('inlinemessage.secondary.color'), ";\n}\n\n.p-inlinemessage-contrast {\n    background: ").concat(dt('inlinemessage.contrast.background'), ";\n    border: 1px solid ").concat(dt('inlinemessage.contrast.border.color'), ";\n    color: ").concat(dt('inlinemessage.contrast.color'), ";\n    box-shadow: ").concat(dt('inlinemessage.contrast.shadow'), ";\n}\n\n.p-inlinemessage-contrast .p-inlinemessage-icon {\n    color: ").concat(dt('inlinemessage.contrast.color'), ";\n}\n");
-};
 var classes = {
-  root: function root(_ref2) {
-    var props = _ref2.props,
-      instance = _ref2.instance;
+  root: function root(_ref) {
+    var props = _ref.props,
+      instance = _ref.instance;
     return ['p-inlinemessage p-component p-inlinemessage-' + props.severity, {
       'p-inlinemessage-icon-only': !instance.$slots["default"]
     }];
   },
-  icon: function icon(_ref3) {
-    var props = _ref3.props;
+  icon: function icon(_ref2) {
+    var props = _ref2.props;
     return ['p-inlinemessage-icon', props.icon];
   },
   text: 'p-inlinemessage-text'
 };
 var InlineMessageStyle = BaseStyle.extend({
   name: 'inlinemessage',
-  theme: theme,
+  style: style,
   classes: classes
 });
 

package/inlinemessage/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/inlinemessage/style/InlineMessageStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-inlinemessage {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${dt('inlinemessage.padding')};\n    border-radius: ${dt('inlinemessage.border.radius')};\n    gap: ${dt('inlinemessage.gap')};\n}\n\n.p-inlinemessage-text {\n    font-weight: ${dt('inlinemessage.text.font.weight')};\n}\n\n.p-inlinemessage-icon {\n    flex-shrink: 0;\n    font-size: ${dt('inlinemessage.icon.size')};\n    width: ${dt('inlinemessage.icon.size')};\n    height: ${dt('inlinemessage.icon.size')};\n}\n\n.p-inlinemessage-icon-only .p-inlinemessage-text {\n    visibility: hidden;\n    width: 0;\n}\n\n.p-inlinemessage-info {\n    background: ${dt('inlinemessage.info.background')};\n    border: 1px solid ${dt('inlinemessage.info.border.color')};\n    color: ${dt('inlinemessage.info.color')};\n    box-shadow: ${dt('inlinemessage.info.shadow')};\n}\n\n.p-inlinemessage-info .p-inlinemessage-icon {\n    color: ${dt('inlinemessage.info.color')};\n}\n\n.p-inlinemessage-success {\n    background: ${dt('inlinemessage.success.background')};\n    border: 1px solid ${dt('inlinemessage.success.border.color')};\n    color: ${dt('inlinemessage.success.color')};\n    box-shadow: ${dt('inlinemessage.success.shadow')};\n}\n\n.p-inlinemessage-success .p-inlinemessage-icon {\n    color: ${dt('inlinemessage.success.color')};\n}\n\n.p-inlinemessage-warn {\n    background: ${dt('inlinemessage.warn.background')};\n    border: 1px solid ${dt('inlinemessage.warn.border.color')};\n    color: ${dt('inlinemessage.warn.color')};\n    box-shadow: ${dt('inlinemessage.warn.shadow')};\n}\n\n.p-inlinemessage-warn .p-inlinemessage-icon {\n    color: ${dt('inlinemessage.warn.color')};\n}\n\n.p-inlinemessage-error {\n    background: ${dt('inlinemessage.error.background')};\n    border: 1px solid ${dt('inlinemessage.error.border.color')};\n    color: ${dt('inlinemessage.error.color')};\n    box-shadow: ${dt('inlinemessage.error.shadow')};\n}\n\n.p-inlinemessage-error .p-inlinemessage-icon {\n    color: ${dt('inlinemessage.error.color')};\n}\n\n.p-inlinemessage-secondary {\n    background: ${dt('inlinemessage.secondary.background')};\n    border: 1px solid ${dt('inlinemessage.secondary.border.color')};\n    color: ${dt('inlinemessage.secondary.color')};\n    box-shadow: ${dt('inlinemessage.secondary.shadow')};\n}\n\n.p-inlinemessage-secondary .p-inlinemessage-icon {\n    color: ${dt('inlinemessage.secondary.color')};\n}\n\n.p-inlinemessage-contrast {\n    background: ${dt('inlinemessage.contrast.background')};\n    border: 1px solid ${dt('inlinemessage.contrast.border.color')};\n    color: ${dt('inlinemessage.contrast.color')};\n    box-shadow: ${dt('inlinemessage.contrast.shadow')};\n}\n\n.p-inlinemessage-contrast .p-inlinemessage-icon {\n    color: ${dt('inlinemessage.contrast.color')};\n}\n`;\n\nconst classes = {\n    root: ({ props, instance }) => ['p-inlinemessage p-component p-inlinemessage-' + props.severity, { 'p-inlinemessage-icon-only': !instance.$slots.default }],\n    icon: ({ props }) => ['p-inlinemessage-icon', props.icon],\n    text: 'p-inlinemessage-text'\n};\n\nexport default BaseStyle.extend({\n    name: 'inlinemessage',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","props","instance","severity","$slots","icon","_ref3","text","BaseStyle","extend","name"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/inlinemessage/style/InlineMessageStyle.js"],"sourcesContent":["import { style } from '@primeuix/styles/inlinemessage';\nimport BaseStyle from '@primevue/core/base/style';\n\nconst classes = {\n    root: ({ props, instance }) => ['p-inlinemessage p-component p-inlinemessage-' + props.severity, { 'p-inlinemessage-icon-only': !instance.$slots.default }],\n    icon: ({ props }) => ['p-inlinemessage-icon', props.icon],\n    text: 'p-inlinemessage-text'\n};\n\nexport default BaseStyle.extend({\n    name: 'inlinemessage',\n    style,\n    classes\n});\n"],"names":["classes","root","_ref","props","instance","severity","$slots","icon","_ref2","text","BaseStyle","extend","name","style"],"mappings":";;;AAGA,IAAMA,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAKC,KAAK,GAAAD,IAAA,CAALC,KAAK;MAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;AAAA,IAAA,OAAO,CAAC,8CAA8C,GAAGD,KAAK,CAACE,QAAQ,EAAE;AAAE,MAAA,2BAA2B,EAAE,CAACD,QAAQ,CAACE,MAAM,CAAA,SAAA;AAAS,KAAC,CAAC;AAAA,GAAA;AAC3JC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKL,KAAK,GAAAK,KAAA,CAALL,KAAK;AAAA,IAAA,OAAO,CAAC,sBAAsB,EAAEA,KAAK,CAACI,IAAI,CAAC;AAAA,GAAA;AACzDE,EAAAA,IAAI,EAAE;AACV,CAAC;AAED,yBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,eAAe;AACrBC,EAAAA,KAAK,EAALA,KAAK;AACLb,EAAAA,OAAO,EAAPA;AACJ,CAAC,CAAC;;;;"}

package/inplace/index.mjs

@@ -1,6 +1,6 @@
 import BaseComponent from '@primevue/core/basecomponent';
 import InplaceStyle from 'primevue/inplace/style';
-import { openBlock, createElementBlock, mergeProps, withKeys, renderSlot } from 'vue';
+import { createElementBlock, openBlock, mergeProps, withKeys, renderSlot } from 'vue';
 
 var script$1 = {
   name: 'BaseInplace',
@@ -66,10 +66,10 @@ var script = {
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var _hoisted_1 = ["tabindex"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", mergeProps({

package/inplace/style/index.mjs

@@ -1,13 +1,10 @@
+import { style } from '@primeuix/styles/inplace';
 import BaseStyle from '@primevue/core/base/style';
 
-var theme = function theme(_ref) {
-  var dt = _ref.dt;
-  return "\n.p-inplace-display {\n    display: inline-block;\n    cursor: pointer;\n    border: 1px solid transparent;\n    padding: ".concat(dt('inplace.padding'), ";\n    border-radius: ").concat(dt('inplace.border.radius'), ";\n    transition: background ").concat(dt('inplace.transition.duration'), ", color ").concat(dt('inplace.transition.duration'), ", outline-color ").concat(dt('inplace.transition.duration'), ", box-shadow ").concat(dt('inplace.transition.duration'), ";\n    outline-color: transparent;\n}\n\n.p-inplace-display:not(.p-disabled):hover {\n    background: ").concat(dt('inplace.display.hover.background'), ";\n    color: ").concat(dt('inplace.display.hover.color'), ";\n}\n\n.p-inplace-display:focus-visible {\n    box-shadow: ").concat(dt('inplace.focus.ring.shadow'), ";\n    outline: ").concat(dt('inplace.focus.ring.width'), " ").concat(dt('inplace.focus.ring.style'), " ").concat(dt('inplace.focus.ring.color'), ";\n    outline-offset: ").concat(dt('inplace.focus.ring.offset'), ";\n}\n\n.p-inplace-content {\n    display: block;\n}\n");
-};
 var classes = {
   root: 'p-inplace p-component',
-  display: function display(_ref2) {
-    var props = _ref2.props;
+  display: function display(_ref) {
+    var props = _ref.props;
     return ['p-inplace-display', {
       'p-disabled': props.disabled
     }];
@@ -16,7 +13,7 @@ var classes = {
 };
 var InplaceStyle = BaseStyle.extend({
   name: 'inplace',
-  theme: theme,
+  style: style,
   classes: classes
 });
 

package/inplace/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/inplace/style/InplaceStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-inplace-display {\n    display: inline-block;\n    cursor: pointer;\n    border: 1px solid transparent;\n    padding: ${dt('inplace.padding')};\n    border-radius: ${dt('inplace.border.radius')};\n    transition: background ${dt('inplace.transition.duration')}, color ${dt('inplace.transition.duration')}, outline-color ${dt('inplace.transition.duration')}, box-shadow ${dt('inplace.transition.duration')};\n    outline-color: transparent;\n}\n\n.p-inplace-display:not(.p-disabled):hover {\n    background: ${dt('inplace.display.hover.background')};\n    color: ${dt('inplace.display.hover.color')};\n}\n\n.p-inplace-display:focus-visible {\n    box-shadow: ${dt('inplace.focus.ring.shadow')};\n    outline: ${dt('inplace.focus.ring.width')} ${dt('inplace.focus.ring.style')} ${dt('inplace.focus.ring.color')};\n    outline-offset: ${dt('inplace.focus.ring.offset')};\n}\n\n.p-inplace-content {\n    display: block;\n}\n`;\n\nconst classes = {\n    root: 'p-inplace p-component',\n    display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }],\n    content: 'p-inplace-content'\n};\n\nexport default BaseStyle.extend({\n    name: 'inplace',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","display","_ref2","props","disabled","content","BaseStyle","extend","name"],"mappings":";;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,EAAE,GAAAD,IAAA,CAAFC,EAAE;AAAA,EAAA,OAAA,6HAAA,CAAAC,MAAA,CAKJD,EAAE,CAAC,iBAAiB,CAAC,4BAAAC,MAAA,CACfD,EAAE,CAAC,uBAAuB,CAAC,EAAAC,gCAAAA,CAAAA,CAAAA,MAAA,CACnBD,EAAE,CAAC,6BAA6B,CAAC,EAAA,UAAA,CAAA,CAAAC,MAAA,CAAWD,EAAE,CAAC,6BAA6B,CAAC,EAAAC,kBAAAA,CAAAA,CAAAA,MAAA,CAAmBD,EAAE,CAAC,6BAA6B,CAAC,EAAA,eAAA,CAAA,CAAAC,MAAA,CAAgBD,EAAE,CAAC,6BAA6B,CAAC,4GAAAC,MAAA,CAK7LD,EAAE,CAAC,kCAAkC,CAAC,EAAA,gBAAA,CAAA,CAAAC,MAAA,CAC3CD,EAAE,CAAC,6BAA6B,CAAC,kEAAAC,MAAA,CAI5BD,EAAE,CAAC,2BAA2B,CAAC,EAAAC,kBAAAA,CAAAA,CAAAA,MAAA,CAClCD,EAAE,CAAC,0BAA0B,CAAC,EAAA,GAAA,CAAA,CAAAC,MAAA,CAAID,EAAE,CAAC,0BAA0B,CAAC,OAAAC,MAAA,CAAID,EAAE,CAAC,0BAA0B,CAAC,EAAAC,yBAAAA,CAAAA,CAAAA,MAAA,CAC3FD,EAAE,CAAC,2BAA2B,CAAC,EAAA,wDAAA,CAAA;AAAA,CAMpD;AAED,IAAME,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE,uBAAuB;AAC7BC,EAAAA,OAAO,EAAE,SAATA,OAAOA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKC,KAAK,GAAAD,KAAA,CAALC,KAAK;IAAA,OAAO,CAAC,mBAAmB,EAAE;MAAE,YAAY,EAAEA,KAAK,CAACC;AAAS,KAAC,CAAC;AAAA,GAAA;AAC/EC,EAAAA,OAAO,EAAE;AACb,CAAC;AAED,mBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,SAAS;AACfb,EAAAA,KAAK,EAALA,KAAK;AACLI,EAAAA,OAAO,EAAPA;AACJ,CAAC,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/inplace/style/InplaceStyle.js"],"sourcesContent":["import { style } from '@primeuix/styles/inplace';\nimport BaseStyle from '@primevue/core/base/style';\n\nconst classes = {\n    root: 'p-inplace p-component',\n    display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }],\n    content: 'p-inplace-content'\n};\n\nexport default BaseStyle.extend({\n    name: 'inplace',\n    style,\n    classes\n});\n"],"names":["classes","root","display","_ref","props","disabled","content","BaseStyle","extend","name","style"],"mappings":";;;AAGA,IAAMA,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE,uBAAuB;AAC7BC,EAAAA,OAAO,EAAE,SAATA,OAAOA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAKC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAA,OAAO,CAAC,mBAAmB,EAAE;MAAE,YAAY,EAAEA,KAAK,CAACC;AAAS,KAAC,CAAC;AAAA,GAAA;AAC/EC,EAAAA,OAAO,EAAE;AACb,CAAC;AAED,mBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,SAAS;AACfC,EAAAA,KAAK,EAALA,KAAK;AACLV,EAAAA,OAAO,EAAPA;AACJ,CAAC,CAAC;;;;"}

package/inputchips/InputChips.vue

@@ -18,7 +18,7 @@
             <li
                 v-for="(val, i) of modelValue"
                 :key="`${i}_${val}`"
-                :id="id + '_inputchips_item_' + i"
+                :id="$id + '_inputchips_item_' + i"
                 role="option"
                 :class="cx('chipItem', { index: i })"
                 :aria-label="val"
@@ -60,7 +60,6 @@
 </template>
 
 <script>
-import { UniqueComponentId } from '@primevue/core/utils';
 import Chip from 'primevue/chip';
 import BaseInputChips from './BaseInputChips.vue';
 
@@ -71,20 +70,13 @@ export default {
     emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
     data() {
         return {
-            id: this.$attrs.id,
             inputValue: null,
             focused: false,
             focusedIndex: null
         };
     },
-    watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
-    },
     mounted() {
         console.warn('Deprecated since v4. Use AutoComplete component instead with its typeahead property.');
-        this.id = this.id || UniqueComponentId();
     },
     methods: {
         onWrapperClick() {
@@ -261,7 +253,7 @@ export default {
             return this.max && this.modelValue && this.max === this.modelValue.length;
         },
         focusedOptionId() {
-            return this.focusedIndex !== null ? `${this.id}_inputchips_item_${this.focusedIndex}` : null;
+            return this.focusedIndex !== null ? `${this.$id}_inputchips_item_${this.focusedIndex}` : null;
         }
     },
     components: {

package/inputchips/index.mjs

@@ -1,8 +1,7 @@
-import { UniqueComponentId } from '@primevue/core/utils';
 import Chip from 'primevue/chip';
 import BaseComponent from '@primevue/core/basecomponent';
 import InputChipsStyle from 'primevue/inputchips/style';
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, Fragment, renderList, renderSlot, normalizeClass, createVNode, withCtx } from 'vue';
+import { resolveComponent, createElementBlock, openBlock, mergeProps, createElementVNode, Fragment, renderList, renderSlot, normalizeClass, createVNode, withCtx } from 'vue';
 
 var script$1 = {
   name: 'BaseInputChips',
@@ -99,20 +98,13 @@ var script = {
   emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
   data: function data() {
     return {
-      id: this.$attrs.id,
       inputValue: null,
       focused: false,
       focusedIndex: null
     };
   },
-  watch: {
-    '$attrs.id': function $attrsId(newValue) {
-      this.id = newValue || UniqueComponentId();
-    }
-  },
   mounted: function mounted() {
     console.warn('Deprecated since v4. Use AutoComplete component instead with its typeahead property.');
-    this.id = this.id || UniqueComponentId();
   },
   methods: {
     onWrapperClick: function onWrapperClick() {
@@ -270,7 +262,7 @@ var script = {
       return this.max && this.modelValue && this.max === this.modelValue.length;
     },
     focusedOptionId: function focusedOptionId() {
-      return this.focusedIndex !== null ? "".concat(this.id, "_inputchips_item_").concat(this.focusedIndex) : null;
+      return this.focusedIndex !== null ? "".concat(this.$id, "_inputchips_item_").concat(this.focusedIndex) : null;
     }
   },
   components: {
@@ -280,10 +272,10 @@ var script = {
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var _hoisted_1 = ["aria-labelledby", "aria-label", "aria-activedescendant"];
 var _hoisted_2 = ["id", "aria-label", "aria-setsize", "aria-posinset", "data-p-focused"];
 var _hoisted_3 = ["id", "disabled", "placeholder", "aria-invalid"];
@@ -315,7 +307,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, _ctx.ptm('input')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue, function (val, i) {
     return openBlock(), createElementBlock("li", mergeProps({
       key: "".concat(i, "_").concat(val),
-      id: $data.id + '_inputchips_item_' + i,
+      id: _ctx.$id + '_inputchips_item_' + i,
       role: "option",
       "class": _ctx.cx('chipItem', {
         index: i