@inc2734/unitone-css 1.3.0 → 1.4.0

package/dist/layout-primitives/text/react.js

@@ -1 +1 @@
-"use strict";var e=require("react");function t(){return t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},t.apply(null,arguments)}function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function n(e){var t=function(e,t){if("object"!=r(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=r(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==r(t)?t:t+""}function o(e,t,r){return(t=n(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var i=["center","column","applyGap","gap","gutters","maxWidth","columnWidth","containerType","fluidReference","style"];function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach(function(t){o(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}exports.Text=function(r){var n=r.center,o=r.column,c=r.applyGap,l=r.gap,a=r.gutters,f=r.maxWidth,p=r.columnWidth,y=r.containerType,b=r.fluidReference,s=r.style,v=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==t.indexOf(n))continue;r[n]=e[n]}return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],-1===t.indexOf(r)&&{}.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(r,i);return s=u(u({},s),{},{"--unitone--max-width":""!==f?f:void 0,"--unitone--column-width":""!==p?p:void 0}),e.createElement("div",t({"data-unitone-layout":["text",n?"-center":void 0,o?"-column":void 0,c?"-gap":void 0,""!==(null!=l?l:"")?"-gap:".concat(l):void 0,""!==(null!=a?a:"")?"-gutters:".concat(a):void 0,""!==(null!=y?y:"")?"-container-type:".concat(y):void 0,""!==(null!=b?b:"")?"-fluid-reference:".concat(b):void 0].filter(Boolean).join(" "),style:s},v),v.children)};
+"use strict";var e=require("react");function t(){return t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},t.apply(null,arguments)}function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function n(e){var t=function(e,t){if("object"!=r(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=r(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==r(t)?t:t+""}function o(e,t,r){return(t=n(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var i=["center","column","applyGap","gap","gutters","maxWidth","columnWidth","containerType","responsiveContext","fluidReference","style"];function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach(function(t){o(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}exports.Text=function(r){var n=r.center,o=r.column,c=r.applyGap,l=r.gap,a=r.gutters,f=r.maxWidth,p=r.columnWidth,y=r.containerType,s=r.responsiveContext,b=r.fluidReference,v=r.style,m=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==t.indexOf(n))continue;r[n]=e[n]}return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],-1===t.indexOf(r)&&{}.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(r,i);return v=u(u({},v),{},{"--unitone--max-width":""!==f?f:void 0,"--unitone--column-width":""!==p?p:void 0}),e.createElement("div",t({"data-unitone-layout":["text",n?"-center":void 0,o?"-column":void 0,c?"-gap":void 0,""!==(null!=l?l:"")?"-gap:".concat(l):void 0,""!==(null!=a?a:"")?"-gutters:".concat(a):void 0,""!==(null!=y?y:"")?"-container-type:".concat(y):void 0,"container"===s?"-responsive-context:container":void 0,""!==(null!=b?b:"")?"-fluid-reference:".concat(b):void 0].filter(Boolean).join(" "),style:v},m),m.children)};

package/dist/layout-primitives/texture/react.js

@@ -1 +1 @@
-"use strict";var t=require("react");function e(){return e=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)({}).hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},e.apply(null,arguments)}function r(t){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}function o(t){var e=function(t,e){if("object"!=r(t)||!t)return t;var o=t[Symbol.toPrimitive];if(void 0!==o){var n=o.call(t,e);if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==r(e)?e:e+""}function n(t,e,r){return(e=o(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var i=["texture","textureColor","textureGap","textureSize","textureTop","textureRight","textureBottom","textureLeft","textureBorderRadius","textureBorderTopLeftRadius","textureBorderTopRightRadius","textureBorderBottomLeftRadius","textureBorderBottomRightRadius","textureBandTopSize","textureBandBottomSize","containerType","fluidReference","style"];function u(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,o)}return r}function a(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?u(Object(r),!0).forEach(function(e){n(t,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}exports.Texture=function(r){var o=r.texture,n=r.textureColor,u=r.textureGap,c=r.textureSize,d=r.textureTop,l=r.textureRight,f=r.textureBottom,p=r.textureLeft,s=r.textureBorderRadius,x=r.textureBorderTopLeftRadius,b=r.textureBorderTopRightRadius,y=r.textureBorderBottomLeftRadius,v=r.textureBorderBottomRightRadius,m=r.textureBandTopSize,O=r.textureBandBottomSize,g=r.containerType,B=r.fluidReference,h=r.style,j=function(t,e){if(null==t)return{};var r,o,n=function(t,e){if(null==t)return{};var r={};for(var o in t)if({}.hasOwnProperty.call(t,o)){if(-1!==e.indexOf(o))continue;r[o]=t[o]}return r}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(o=0;o<i.length;o++)r=i[o],-1===e.indexOf(r)&&{}.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(r,i);return h=a(a({},h),{},{"--unitone--texture-color":""!==n?n:void 0,"--unitone--texture-gap":""!==u?u:void 0,"--unitone--texture-size":""!==c?c:void 0,"--unitone--texture-top":""!==d?d:void 0,"--unitone--texture-right":""!==l?l:void 0,"--unitone--texture-bottom":""!==f?f:void 0,"--unitone--texture-left":""!==p?p:void 0,"--unitone--texture-border-radius":""!==s?s:void 0,"--unitone--texture-border-top-left-radius":""!==x?x:void 0,"--unitone--texture-border-top-right-radius":""!==b?b:void 0,"--unitone--texture-border-bottom-left-radius":""!==y?y:void 0,"--unitone--texture-border-bottom-right-radius":""!==v?v:void 0,"--unitone--texture-band-top-size":""!==m?m:void 0,"--unitone--texture-band-bottom-size":""!==O?O:void 0}),t.createElement("div",e({"data-unitone-layout":["texture",""!==(null!=o?o:"")?"-texture:".concat(o):void 0,""!==(null!=g?g:"")?"-container-type:".concat(g):void 0,""!==(null!=B?B:"")?"-fluid-reference:".concat(B):void 0].filter(Boolean).join(" "),style:h},j),j.children)};
+"use strict";var t=require("react");function e(){return e=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)({}).hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},e.apply(null,arguments)}function r(t){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}function o(t){var e=function(t,e){if("object"!=r(t)||!t)return t;var o=t[Symbol.toPrimitive];if(void 0!==o){var n=o.call(t,e);if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==r(e)?e:e+""}function n(t,e,r){return(e=o(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var u=["texture","textureColor","textureGap","textureSize","textureTop","textureRight","textureBottom","textureLeft","textureBorderRadius","textureBorderTopLeftRadius","textureBorderTopRightRadius","textureBorderBottomLeftRadius","textureBorderBottomRightRadius","textureBandTopSize","textureBandBottomSize","style"];function i(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,o)}return r}function a(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?i(Object(r),!0).forEach(function(e){n(t,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}exports.Texture=function(r){var o=r.texture,n=r.textureColor,i=r.textureGap,d=r.textureSize,l=r.textureTop,c=r.textureRight,f=r.textureBottom,s=r.textureLeft,x=r.textureBorderRadius,b=r.textureBorderTopLeftRadius,p=r.textureBorderTopRightRadius,y=r.textureBorderBottomLeftRadius,v=r.textureBorderBottomRightRadius,m=r.textureBandTopSize,O=r.textureBandBottomSize,g=r.style,B=function(t,e){if(null==t)return{};var r,o,n=function(t,e){if(null==t)return{};var r={};for(var o in t)if({}.hasOwnProperty.call(t,o)){if(-1!==e.indexOf(o))continue;r[o]=t[o]}return r}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(o=0;o<u.length;o++)r=u[o],-1===e.indexOf(r)&&{}.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(r,u);return g=a(a({},g),{},{"--unitone--texture-color":""!==n?n:void 0,"--unitone--texture-gap":""!==i?i:void 0,"--unitone--texture-size":""!==d?d:void 0,"--unitone--texture-top":""!==l?l:void 0,"--unitone--texture-right":""!==c?c:void 0,"--unitone--texture-bottom":""!==f?f:void 0,"--unitone--texture-left":""!==s?s:void 0,"--unitone--texture-border-radius":""!==x?x:void 0,"--unitone--texture-border-top-left-radius":""!==b?b:void 0,"--unitone--texture-border-top-right-radius":""!==p?p:void 0,"--unitone--texture-border-bottom-left-radius":""!==y?y:void 0,"--unitone--texture-border-bottom-right-radius":""!==v?v:void 0,"--unitone--texture-band-top-size":""!==m?m:void 0,"--unitone--texture-band-bottom-size":""!==O?O:void 0}),t.createElement("div",e({"data-unitone-layout":["texture",""!==(null!=o?o:"")?"-texture:".concat(o):void 0].filter(Boolean).join(" "),style:g},B),B.children)};

package/dist/layout-primitives/vertical-ends/react.js

@@ -1 +1 @@
-"use strict";var e=require("react");function r(){return r=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},r.apply(null,arguments)}function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t(e)}function n(e){var r=function(e,r){if("object"!=t(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,r);if("object"!=t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}(e,"string");return"symbol"==t(r)?r:r+""}function o(e,r,t){return(r=n(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}var i=["gap","alignItems","containerType","fluidReference","style"];function c(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,n)}return t}exports.VerticalEnds=function(t){var n=t.gap,l=t.alignItems,u=t.containerType,a=t.fluidReference,f=t.style,y=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==r.indexOf(n))continue;t[n]=e[n]}return t}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],-1===r.indexOf(t)&&{}.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(t,i);return f=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach(function(r){o(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}({},f),e.createElement("div",r({"data-unitone-layout":["vertical-ends",""!==(null!=n?n:"")?"-gap:".concat(n):void 0,""!==(null!=l?l:"")?"-align-items:".concat(l):void 0,""!==(null!=u?u:"")?"-container-type:".concat(u):void 0,""!==(null!=a?a:"")?"-fluid-reference:".concat(a):void 0].filter(Boolean).join(" "),style:f},y),y.children)};
+"use strict";var e=require("react");function r(){return r=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},r.apply(null,arguments)}function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t(e)}function n(e){var r=function(e,r){if("object"!=t(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,r);if("object"!=t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}(e,"string");return"symbol"==t(r)?r:r+""}function o(e,r,t){return(r=n(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}var i=["gap","alignItems","containerType","responsiveContext","fluidReference","style"];function c(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,n)}return t}exports.VerticalEnds=function(t){var n=t.gap,l=t.alignItems,u=t.containerType,a=t.responsiveContext,f=t.fluidReference,s=t.style,p=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==r.indexOf(n))continue;t[n]=e[n]}return t}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],-1===r.indexOf(t)&&{}.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(t,i);return s=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach(function(r){o(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}({},s),e.createElement("div",r({"data-unitone-layout":["vertical-ends",""!==(null!=n?n:"")?"-gap:".concat(n):void 0,""!==(null!=l?l:"")?"-align-items:".concat(l):void 0,""!==(null!=u?u:"")?"-container-type:".concat(u):void 0,"container"===a?"-responsive-context:container":void 0,""!==(null!=f?f:"")?"-fluid-reference:".concat(f):void 0].filter(Boolean).join(" "),style:s},p),p.children)};

package/dist/layout-primitives/vertical-writing/react.js

@@ -1 +1 @@
-"use strict";var e=require("react");function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function n(e,n){if(e){if("string"==typeof e)return t(e,n);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}}function r(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||n(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,a,l=[],u=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t);else for(;!(u=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);u=!0);}catch(e){c=!0,i=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw i}}return l}}(e,t)||n(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return a(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(e,t):void 0}}(e))||t){n&&(e=n);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,l=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return l=e.done,e},e:function(e){u=!0,o=e},f:function(){try{l||null==n.return||n.return()}finally{if(u)throw o}}}}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var l="data-unitone-layout",u="".concat(200,"px 0px"),c=function(e,t){return e.filter(function(e){return!t.includes(e)})},d=function(e,t){var n,r=t.filter(Boolean).join(" ");(null!==(n=e.getAttribute(l))&&void 0!==n?n:"")!==r&&e.setAttribute(l,r)},s=function(e,t){var n,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=r.getValue,a=r.delay,l=!0,u=new ResizeObserver(h(function(e){var r,a=o(e);try{for(a.s();!(r=a.n()).done;){var u=r.value,c=null==i?void 0:i(u);l?(n=c,l=!1):void 0!==c&&c===n||(t(u.target,u),n=c)}}catch(e){a.e(e)}finally{a.f()}},void 0===a?250:a));return u.observe(e),u},f=function(e,t,n){var r=new MutationObserver(function(t){requestAnimationFrame(function(){null!=e&&e.isConnected&&n(t)})});return r.observe(e,t),r},v=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getResizeValue,a=n.delay,l=void 0===a?250:a,c=n.observeResize,d=void 0===c||c,v=n.observeIntersection,y=void 0!==v&&v,p=n.observeDirectChildrenResize,g=void 0!==p&&p,m=n.targetMutation,w=n.directChildMutation,O=y&&"undefined"!=typeof IntersectionObserver,A=!O||b(e),S=O&&!A,E=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e;null!=n&&n.isConnected&&(!O||A?(S=!1,t(n)):S=!0)},C=function(e,t){var n,r=0;return function(){var i,o;null!==(o=n=null==e||null===(i=e.ownerDocument)||void 0===i?void 0:i.defaultView)&&void 0!==o&&o.requestAnimationFrame?r||(r=n.requestAnimationFrame(function(){r=0,n=null,null!=e&&e.isConnected&&t(e)})):t(e)}}(e,E),j=function(){null!=e&&e.isConnected&&(!O||A?(S=!0,C()):S=!0)},z=function(){},N=d?g?function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getValue,i=n.delay,a=void 0===i?250:i,l=n.onChildList,u=new WeakMap,c=new Set,d=new ResizeObserver(h(function(n){var i,a=!1,l=o(n);try{for(l.s();!(i=l.n()).done;){var c=i.value,d=null==r?void 0:r(c);u.has(c.target)?(void 0!==d&&d===u.get(c.target)||(a=!0),u.set(c.target,d)):u.set(c.target,d)}}catch(e){l.e(e)}finally{l.f()}a&&t(e)},a)),s=function(){var t;Array.from(c).forEach(function(t){t.parentElement!==e&&(d.unobserve(t),c.delete(t),u.delete(t))}),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){c.has(e)||(d.observe(e),c.add(e))})};d.observe(e),s();var v=f(e,{childList:!0},function(n){n.some(function(e){return"childList"===e.type})&&(s(),null==l||l(n),t(e))});return{resizeObserver:d,mutationObserver:v}}(e,j,{getValue:r,delay:l,onChildList:function(){z()}}):{resizeObserver:s(e,j,{getValue:r,delay:l})}:{mutationObserver:null};O&&function(e,t){var n=new IntersectionObserver(function(e){var n=i(e,1)[0];n&&t(n)},{rootMargin:u});n.observe(e)}(e,function(e){(A=e.isIntersecting)&&S&&j()}),null!=m&&m.options&&f(e,m.options,function(e){var t,n;(null!==(t=null===(n=m.shouldApply)||void 0===n?void 0:n.call(m,e))&&void 0!==t?t:0<e.length)&&j()});var M=null!=w&&w.attributeFilter&&w.shouldApply?function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.attributeFilter,i=n.shouldApply,o=n.attributeOldValue,a=void 0===o||o,l=new MutationObserver(function(n){requestAnimationFrame(function(){null!=e&&e.isConnected&&n.some(function(t){return"attributes"===t.type&&t.target.parentElement===e&&i(t)})&&t(e)})}),u=function(){var t;l.disconnect(),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){l.observe(e,{attributes:!0,attributeFilter:r,attributeOldValue:a})})};return u(),{observer:l,syncObservedChildren:u}}(e,j,{attributeFilter:w.attributeFilter,shouldApply:w.shouldApply,attributeOldValue:w.attributeOldValue}):null;M&&(z=M.syncObservedChildren),!N.mutationObserver&&M&&f(e,{childList:!0},function(e){e.some(function(e){return"childList"===e.type})&&(z(),j())}),O&&!A||E(e)},y=function(e){var t;return parseInt(null===(t=e.contentRect)||void 0===t?void 0:t.width)},b=function(e){var t;if(!function(e){return!(null==e||!e.isConnected)&&0<e.getClientRects().length}(e))return!1;var n=null==e||null===(t=e.ownerDocument)||void 0===t?void 0:t.defaultView;if(!n)return!0;var r=e.getBoundingClientRect(),i=n.innerWidth,o=n.innerHeight;return r.bottom>-200&&r.right>0&&r.top<o+200&&r.left<i};function h(e,t){var n;return function(){for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];var a=this;clearTimeout(n),n=setTimeout(function(){e.apply(a,i)},t)}}var p=function(e){return e.some(function(e){return"attributes"===e.type||"childList"===e.type&&[].concat(r(e.addedNodes),r(e.removedNodes)).some(function(e){return!function(e){return(null==e?void 0:e.nodeType)===Node.ELEMENT_NODE&&["vertical-writing__thresholder","vertical-writing:initialized","vertical-writing:safari"].includes(e.getAttribute("data-unitone-layout"))}(e)})})},g=function(e){if(e){var t,n,i=(null!==(t=e.getAttribute(l))&&void 0!==t?t:"").split(/\s+/).filter(Boolean),o=c(i,["vertical-writing:safari","-force-switch"]),a=c(i,["vertical-writing:initialized","vertical-writing:safari","-force-switch"]);if(d(e,o),Array.from(e.children).reverse().some(function(e){if(!["absolute","fixed"].includes(getComputedStyle(e).position)&&"none"!==getComputedStyle(e).display)return n=e,!0}),n){var u=getComputedStyle(e),s=String(u.getPropertyValue("--unitone--threshold")).trim(),f=!1;if(s){var v=e.ownerDocument.createElement("div");v.setAttribute(l,"vertical-writing__thresholder"),e.appendChild(v),f=v.offsetWidth>=e.offsetWidth,v.remove()}if(f)a.push("-force-switch");else e.getBoundingClientRect().left>n.getBoundingClientRect().left&&a.push("vertical-writing:safari");d(e,[].concat(r(a),["vertical-writing:initialized"])),requestAnimationFrame(function(){var t;if(null!=e&&e.isConnected&&null!==(t=e.parentNode)&&void 0!==t&&t.style){if(f)return void(e.parentNode.style.height="");var r=e.getBoundingClientRect(),i=n.getBoundingClientRect(),o=r.top+r.height,a=i.top+i.height;e.parentNode.style.height=o!==a?"".concat(Math.ceil(a-r.top),"px"):""}})}else d(e,[].concat(r(a),["vertical-writing:initialized"]))}},m=Symbol.for("@inc2734/unitone-css/layout-initializers"),w=function(){return"undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof MutationObserver||"undefined"==typeof Node?null:(globalThis[m]||(globalThis[m]={initializers:new Map,pendingNodes:new Set,observer:null,rafId:0,hasDOMContentLoadedListener:!1}),globalThis[m])},O=function(e,t){var n,r;if(e.enabled()&&(null==t?void 0:t.nodeType)===Node.ELEMENT_NODE){var i=new Set;null!==(n=t.matches)&&void 0!==n&&n.call(t,e.selector)&&i.add(t),null===(r=t.querySelectorAll)||void 0===r||r.call(t,e.selector).forEach(function(e){i.add(e)}),i.forEach(function(t){e.initialized.has(t)||(e.initialize(t),e.initialized.add(t))})}},A=function(e){var t=w();t&&t.initializers.forEach(function(t){O(t,e)})},S=function(){var e=w();e&&(e.pendingNodes.forEach(function(e){A(e)}),e.pendingNodes.clear(),e.rafId=0)},E=function(){var e=w();e&&!e.observer&&document.body&&(A(document.body),e.observer=new MutationObserver(function(t){t.forEach(function(t){t.addedNodes.forEach(function(t){(null==t?void 0:t.nodeType)===Node.ELEMENT_NODE&&e.pendingNodes.add(t)})}),!e.rafId&&0<e.pendingNodes.size&&(e.rafId=requestAnimationFrame(S))}),e.observer.observe(document.body,{childList:!0,subtree:!0}))};function C(){return C=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},C.apply(null,arguments)}function j(e){return j="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},j(e)}function z(e){var t=function(e,t){if("object"!=j(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t);if("object"!=j(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==j(t)?t:t+""}function N(e,t,n){return(t=z(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}!function(e){var t=e.key,n=e.selector,r=e.initialize,i=e.enabled,o=void 0===i?function(){return!0}:i,a=w();if(a&&!a.initializers.has(t)){var l={selector:n,initialize:r,enabled:o,initialized:new WeakSet};a.initializers.set(t,l),a.observer?O(l,document.body):"loading"!==document.readyState?E():a.hasDOMContentLoadedListener||(document.addEventListener("DOMContentLoaded",E,{once:!0}),a.hasDOMContentLoadedListener=!0)}}({key:"layout-primitives/vertical-writing",selector:'[data-unitone-layout~="vertical-writing"]',initialize:function(e){v(e,function(e){var t;null!==(t=e.parentNode)&&void 0!==t&&t.style&&(e.parentNode.style.height=""),g(e)},{getResizeValue:y,observeIntersection:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style"],childList:!0,subtree:!0},shouldApply:p}})}});var M=["textOrientation","gap","maxHeight","switchWritingMode","threshold","style","queryContext"];function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?L(Object(n),!0).forEach(function(t){N(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):L(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}exports.VerticalWriting=function(t){var n=t.textOrientation,r=t.gap,i=t.maxHeight,o=t.switchWritingMode,a=t.threshold,l=t.style,u=t.queryContext,c=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(t,M);return l=I(I({},l),{},{"--unitone--max-height":""!==i?i:void 0,"--unitone--threshold":""!==a?a:void 0}),e.createElement("div",{"data-unitone-layout":"vertical-writing-wrapper"},e.createElement("div",C({"data-unitone-layout":["vertical-writing",""!==(null!=n?n:"")?"-text-orientation:".concat(n):void 0,""!==(null!=r?r:"")?"-gap:".concat(r):void 0,o?"-switch":void 0,u?"@".concat(u):void 0].filter(Boolean).join(" "),style:l},c),c.children))};
+"use strict";var e=require("react");function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function n(e,n){if(e){if("string"==typeof e)return t(e,n);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}}function r(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||n(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,a,l=[],u=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t);else for(;!(u=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);u=!0);}catch(e){c=!0,i=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw i}}return l}}(e,t)||n(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return a(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(e,t):void 0}}(e))||t){n&&(e=n);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,l=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return l=e.done,e},e:function(e){u=!0,o=e},f:function(){try{l||null==n.return||n.return()}finally{if(u)throw o}}}}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var l="data-unitone-layout",u="".concat(200,"px 0px"),c=function(e,t){return e.filter(function(e){return!t.includes(e)})},d=function(e,t){var n,r=t.filter(Boolean).join(" ");(null!==(n=e.getAttribute(l))&&void 0!==n?n:"")!==r&&e.setAttribute(l,r)},s=function(e,t){var n,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=r.getValue,a=r.delay,l=!0,u=new ResizeObserver(h(function(e){var r,a=o(e);try{for(a.s();!(r=a.n()).done;){var u=r.value,c=null==i?void 0:i(u);l?(n=c,l=!1):void 0!==c&&c===n||(t(u.target,u),n=c)}}catch(e){a.e(e)}finally{a.f()}},void 0===a?250:a));return u.observe(e),u},f=function(e,t,n){var r=new MutationObserver(function(t){requestAnimationFrame(function(){null!=e&&e.isConnected&&n(t)})});return r.observe(e,t),r},v=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getResizeValue,a=n.delay,l=void 0===a?250:a,c=n.observeResize,d=void 0===c||c,v=n.observeIntersection,y=void 0!==v&&v,p=n.observeDirectChildrenResize,g=void 0!==p&&p,m=n.targetMutation,w=n.directChildMutation,O=y&&"undefined"!=typeof IntersectionObserver,A=!O||b(e),S=O&&!A,E=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e;null!=n&&n.isConnected&&(!O||A?(S=!1,t(n)):S=!0)},C=function(e,t){var n,r=0;return function(){var i,o;null!==(o=n=null==e||null===(i=e.ownerDocument)||void 0===i?void 0:i.defaultView)&&void 0!==o&&o.requestAnimationFrame?r||(r=n.requestAnimationFrame(function(){r=0,n=null,null!=e&&e.isConnected&&t(e)})):t(e)}}(e,E),j=function(){null!=e&&e.isConnected&&(!O||A?(S=!0,C()):S=!0)},z=function(){},N=d?g?function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getValue,i=n.delay,a=void 0===i?250:i,l=n.onChildList,u=new WeakMap,c=new Set,d=new ResizeObserver(h(function(n){var i,a=!1,l=o(n);try{for(l.s();!(i=l.n()).done;){var c=i.value,d=null==r?void 0:r(c);u.has(c.target)?(void 0!==d&&d===u.get(c.target)||(a=!0),u.set(c.target,d)):u.set(c.target,d)}}catch(e){l.e(e)}finally{l.f()}a&&t(e)},a)),s=function(){var t;Array.from(c).forEach(function(t){t.parentElement!==e&&(d.unobserve(t),c.delete(t),u.delete(t))}),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){c.has(e)||(d.observe(e),c.add(e))})};d.observe(e),s();var v=f(e,{childList:!0},function(n){n.some(function(e){return"childList"===e.type})&&(s(),null==l||l(n),t(e))});return{resizeObserver:d,mutationObserver:v}}(e,j,{getValue:r,delay:l,onChildList:function(){z()}}):{resizeObserver:s(e,j,{getValue:r,delay:l})}:{mutationObserver:null};O&&function(e,t){var n=new IntersectionObserver(function(e){var n=i(e,1)[0];n&&t(n)},{rootMargin:u});n.observe(e)}(e,function(e){(A=e.isIntersecting)&&S&&j()}),null!=m&&m.options&&f(e,m.options,function(e){var t,n;(null!==(t=null===(n=m.shouldApply)||void 0===n?void 0:n.call(m,e))&&void 0!==t?t:0<e.length)&&j()});var M=null!=w&&w.attributeFilter&&w.shouldApply?function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.attributeFilter,i=n.shouldApply,o=n.attributeOldValue,a=void 0===o||o,l=new MutationObserver(function(n){requestAnimationFrame(function(){null!=e&&e.isConnected&&n.some(function(t){return"attributes"===t.type&&t.target.parentElement===e&&i(t)})&&t(e)})}),u=function(){var t;l.disconnect(),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){l.observe(e,{attributes:!0,attributeFilter:r,attributeOldValue:a})})};return u(),{observer:l,syncObservedChildren:u}}(e,j,{attributeFilter:w.attributeFilter,shouldApply:w.shouldApply,attributeOldValue:w.attributeOldValue}):null;M&&(z=M.syncObservedChildren),!N.mutationObserver&&M&&f(e,{childList:!0},function(e){e.some(function(e){return"childList"===e.type})&&(z(),j())}),O&&!A||E(e)},y=function(e){var t;return parseInt(null===(t=e.contentRect)||void 0===t?void 0:t.width)},b=function(e){var t;if(!function(e){return!(null==e||!e.isConnected)&&0<e.getClientRects().length}(e))return!1;var n=null==e||null===(t=e.ownerDocument)||void 0===t?void 0:t.defaultView;if(!n)return!0;var r=e.getBoundingClientRect(),i=n.innerWidth,o=n.innerHeight;return r.bottom>-200&&r.right>0&&r.top<o+200&&r.left<i};function h(e,t){var n;return function(){for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];var a=this;clearTimeout(n),n=setTimeout(function(){e.apply(a,i)},t)}}var p=function(e){return e.some(function(e){return"attributes"===e.type||"childList"===e.type&&[].concat(r(e.addedNodes),r(e.removedNodes)).some(function(e){return!function(e){return(null==e?void 0:e.nodeType)===Node.ELEMENT_NODE&&["vertical-writing__thresholder","vertical-writing:initialized","vertical-writing:safari"].includes(e.getAttribute("data-unitone-layout"))}(e)})})},g=function(e){if(e){var t,n,i=(null!==(t=e.getAttribute(l))&&void 0!==t?t:"").split(/\s+/).filter(Boolean),o=c(i,["vertical-writing:safari","-force-switch"]),a=c(i,["vertical-writing:initialized","vertical-writing:safari","-force-switch"]);if(d(e,o),Array.from(e.children).reverse().some(function(e){if(!["absolute","fixed"].includes(getComputedStyle(e).position)&&"none"!==getComputedStyle(e).display)return n=e,!0}),n){var u=getComputedStyle(e),s=String(u.getPropertyValue("--unitone--threshold")).trim(),f=!1;if(s){var v=e.ownerDocument.createElement("div");v.setAttribute(l,"vertical-writing__thresholder"),e.appendChild(v),f=v.offsetWidth>=e.offsetWidth,v.remove()}if(f)a.push("-force-switch");else e.getBoundingClientRect().left>n.getBoundingClientRect().left&&a.push("vertical-writing:safari");d(e,[].concat(r(a),["vertical-writing:initialized"])),requestAnimationFrame(function(){var t;if(null!=e&&e.isConnected&&null!==(t=e.parentNode)&&void 0!==t&&t.style){if(f)return void(e.parentNode.style.height="");var r=e.getBoundingClientRect(),i=n.getBoundingClientRect(),o=r.top+r.height,a=i.top+i.height;e.parentNode.style.height=o!==a?"".concat(Math.ceil(a-r.top),"px"):""}})}else d(e,[].concat(r(a),["vertical-writing:initialized"]))}},m=Symbol.for("@inc2734/unitone-css/layout-initializers"),w=function(){return"undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof MutationObserver||"undefined"==typeof Node?null:(globalThis[m]||(globalThis[m]={initializers:new Map,pendingNodes:new Set,observer:null,rafId:0,hasDOMContentLoadedListener:!1}),globalThis[m])},O=function(e,t){var n,r;if(e.enabled()&&(null==t?void 0:t.nodeType)===Node.ELEMENT_NODE){var i=new Set;null!==(n=t.matches)&&void 0!==n&&n.call(t,e.selector)&&i.add(t),null===(r=t.querySelectorAll)||void 0===r||r.call(t,e.selector).forEach(function(e){i.add(e)}),i.forEach(function(t){e.initialized.has(t)||(e.initialize(t),e.initialized.add(t))})}},A=function(e){var t=w();t&&t.initializers.forEach(function(t){O(t,e)})},S=function(){var e=w();e&&(e.pendingNodes.forEach(function(e){A(e)}),e.pendingNodes.clear(),e.rafId=0)},E=function(){var e=w();e&&!e.observer&&document.body&&(A(document.body),e.observer=new MutationObserver(function(t){t.forEach(function(t){t.addedNodes.forEach(function(t){(null==t?void 0:t.nodeType)===Node.ELEMENT_NODE&&e.pendingNodes.add(t)})}),!e.rafId&&0<e.pendingNodes.size&&(e.rafId=requestAnimationFrame(S))}),e.observer.observe(document.body,{childList:!0,subtree:!0}))};function C(){return C=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},C.apply(null,arguments)}function j(e){return j="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},j(e)}function z(e){var t=function(e,t){if("object"!=j(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t);if("object"!=j(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==j(t)?t:t+""}function N(e,t,n){return(t=z(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}!function(e){var t=e.key,n=e.selector,r=e.initialize,i=e.enabled,o=void 0===i?function(){return!0}:i,a=w();if(a&&!a.initializers.has(t)){var l={selector:n,initialize:r,enabled:o,initialized:new WeakSet};a.initializers.set(t,l),a.observer?O(l,document.body):"loading"!==document.readyState?E():a.hasDOMContentLoadedListener||(document.addEventListener("DOMContentLoaded",E,{once:!0}),a.hasDOMContentLoadedListener=!0)}}({key:"layout-primitives/vertical-writing",selector:'[data-unitone-layout~="vertical-writing"]',initialize:function(e){v(e,function(e){var t;null!==(t=e.parentNode)&&void 0!==t&&t.style&&(e.parentNode.style.height=""),g(e)},{getResizeValue:y,observeIntersection:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style"],childList:!0,subtree:!0},shouldApply:p}})}});var M=["textOrientation","gap","maxHeight","switchWritingMode","threshold","queryContext","style"];function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?L(Object(n),!0).forEach(function(t){N(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):L(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}exports.VerticalWriting=function(t){var n=t.textOrientation,r=t.gap,i=t.maxHeight,o=t.switchWritingMode,a=t.threshold,l=t.queryContext,u=t.style,c=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(t,M);return u=I(I({},u),{},{"--unitone--max-height":""!==i?i:void 0,"--unitone--threshold":""!==a?a:void 0}),e.createElement("div",{"data-unitone-layout":"vertical-writing-wrapper"},e.createElement("div",C({"data-unitone-layout":["vertical-writing",""!==(null!=n?n:"")?"-text-orientation:".concat(n):void 0,""!==(null!=r?r:"")?"-gap:".concat(r):void 0,o?"-switch":void 0,"container"===l?"@container":void 0].filter(Boolean).join(" "),style:u},c),c.children))};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inc2734/unitone-css",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "",
   "engines": {
     "node": ">=20.19.0",

package/src/behaviors/_fluid-reference.scss

@@ -1,26 +1,13 @@
-@use '../variables' as variables;
+@use './responsive-context';
 
-/**
- * Spacing tokens require a unitless real-number value of 100cqw,
- * so they cannot be defined at :root.
- */
+// @deprecated Kept for backward compatibility.
+// Use responsive-context instead.
 @mixin fluid-reference() {
+  /**
+   * @deprecated Kept for backward compatibility.
+   * Use -responsive-context:container on an ancestor instead.
+   */
   [data-unitone-layout~="-fluid-reference\:cqw"] {
-
-    /**
-     * A value to get the unitless px value in trigonometric functions. (For Safari)
-     */
-    --unitone--property--100cqw: 100cqw;
-
-    /**
-     * 100cqw unitless px real value.
-     */
-    --unitone--result--100cqw-px: calc(tan(atan2(var(--unitone--property--100cqw), 1px)));
-
-    --unitone--global--gutters: #{ variables.generate-global-gutters('container') };
-
-    @include variables.font-size-tokens('container');
-    @include variables.spacing-tokens('container');
-    @include variables.padding-tokens('container');
+    @include responsive-context.fluid-tokens();
   }
 }

package/src/behaviors/_index.scss

@@ -20,6 +20,7 @@
 @use './overflow';
 @use './padding';
 @use './position';
+@use './responsive-context';
 @use './stairs';
 @use './text-orientation';
 
@@ -44,6 +45,7 @@
 @include negative-gap.negative-gap();
 @include overflow.overflow();
 @include padding.padding();
-@include stairs.stairs();
 @include position.position();
+@include responsive-context.responsive-context();
+@include stairs.stairs();
 @include text-orientation.text-orientation();

package/src/behaviors/_responsive-context.scss

@@ -0,0 +1,96 @@
+@use '../variables' as variables;
+
+// Declaration-only entrypoint, also used by the legacy fluid-reference behavior.
+// Keep measurements and their consumers on the same element: registered
+// measurements do not inherit, and var() is resolved before inheritance.
+@mixin fluid-tokens() {
+  /**
+   * A value to get the unitless px value in trigonometric functions. (For Safari)
+   */
+  --unitone--property--100cqw: 100cqw;
+
+  /**
+   * 100cqw unitless px real value.
+   */
+  --unitone--result--100cqw-px: calc(tan(atan2(var(--unitone--property--100cqw), 1px)));
+
+  --unitone--global--gutters: #{ variables.generate-global-gutters($width: var(--unitone--property--100cqw)) };
+
+  @include variables.font-size-tokens(
+    $width: var(--unitone--property--100cqw),
+    $include-static: false
+  );
+
+  @include variables.spacing-tokens(
+    $width: var(--unitone--result--100cqw-px),
+    $include-static: false
+  );
+
+  @include variables.padding-tokens(
+    $width: var(--unitone--result--100cqw-px),
+    $include-static: false
+  );
+}
+
+@mixin responsive-context() {
+  /**
+   * Pair the container context with -container-type:inline-size:
+   * <div class="-container-type:inline-size -responsive-context:container">
+   *   <div data-unitone-layout="frame -switch">...</div>
+   * </div>
+   * The context is active only when both markers are on the same element.
+   * An unpaired context marker is ignored; the existing context continues
+   * to apply, using the viewport when there is no active ancestor context.
+   * Nested pairs use the nearest eligible query container for descendants.
+   * The selectors check markers, not the computed container-type property.
+   * Without an eligible query container, 100cqw uses 100svw, and container
+   * size queries do not match. There is no automatic media-query fallback.
+   */
+  // Recalculate fluid values at each boundary; static tokens remain inherited.
+  :is(
+    [data-unitone-layout~="-responsive-context:container"],
+    .-responsive-context\:container
+  ):where(
+    [data-unitone-layout~="-container-type:inline-size"],
+    .-container-type\:inline-size
+  ) > * {
+    @include fluid-tokens();
+  }
+}
+
+// Query the primitive itself. If it is also a query container, use inherited
+// custom properties to keep its children's layout tied to the same result.
+@mixin responsive-query($condition) {
+  // Exclude descendants of paired contexts from media queries even when their
+  // container query does not match. A context does not affect itself.
+  &:where(:not(
+    [data-unitone-layout~="@container"],
+    :is(
+      [data-unitone-layout~="-responsive-context:container"],
+      .-responsive-context\:container
+    ):where(
+      [data-unitone-layout~="-container-type:inline-size"],
+      .-container-type\:inline-size
+    ) *
+  )) {
+    @media #{ $condition } {
+      @content;
+    }
+  }
+
+  // Select container queries explicitly or through an ancestor context.
+  &:where(
+    [data-unitone-layout~="@container"],
+    :is(
+      [data-unitone-layout~="-responsive-context:container"],
+      .-responsive-context\:container
+    ):where(
+      [data-unitone-layout~="-container-type:inline-size"],
+      .-container-type\:inline-size
+    ) *
+  ) {
+    @container #{ $condition } {
+      @content;
+    }
+  }
+}

package/src/layout-primitives/both-sides/index.jsx

@@ -1,15 +1,6 @@
 import React from 'react';
 
-export const BothSides = ({
-  gap,
-  columnGap,
-  rowGap,
-  alignItems,
-  containerType,
-  fluidReference,
-  style,
-  ...props
-}) => {
+export const BothSides = ({ gap, columnGap, rowGap, alignItems, style, ...props }) => {
   style = {
     ...style,
   };
@@ -22,8 +13,6 @@ export const BothSides = ({
         '' !== (columnGap ?? '') ? `-column-gap:${columnGap}` : undefined,
         '' !== (rowGap ?? '') ? `-row-gap:${rowGap}` : undefined,
         '' !== (alignItems ?? '') ? `-align-items:${alignItems}` : undefined,
-        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
-        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

package/src/layout-primitives/center/index.jsx

@@ -1,14 +1,6 @@
 import React from 'react';
 
-export const Center = ({
-  withText,
-  gutters,
-  maxWidth,
-  containerType,
-  fluidReference,
-  style,
-  ...props
-}) => {
+export const Center = ({ withText, gutters, maxWidth, style, ...props }) => {
   style = {
     ...style,
     '--unitone--max-width': '' !== maxWidth ? maxWidth : undefined,
@@ -20,8 +12,6 @@ export const Center = ({
         'center',
         true === withText ? `-with-text` : undefined,
         '' !== (gutters ?? '') ? `-gutters:${gutters}` : undefined,
-        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
-        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

package/src/layout-primitives/cluster/index.jsx

@@ -11,8 +11,6 @@ export const Cluster = ({
   rowGap,
   justifyContent,
   nowrap,
-  containerType,
-  fluidReference,
   tagName = 'div',
   style,
   ...props
@@ -36,8 +34,6 @@ export const Cluster = ({
         '' !== (rowGap ?? '') ? `-row-gap:${rowGap}` : undefined,
         '' !== (alignItems ?? '') ? `-align-items:${alignItems}` : undefined,
         '' !== (justifyContent ?? '') ? `-justify-content:${justifyContent}` : undefined,
-        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
-        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
         nowrap ? '-nowrap' : undefined,
       ]
         .filter(Boolean)

package/src/layout-primitives/container/_index.scss

@@ -1,7 +1,9 @@
 @mixin abstract-container() {
   --unitone--gutters: var(--unitone--global--gutters);
   --unitone--max-width: var(--unitone--container-max-width);
+  --unitone--container-type: initial;
 
+  container-type: var(--unitone--container-type);
   box-sizing: content-box;
   margin-right: auto;
   margin-left: auto;

package/src/layout-primitives/container/index.jsx

@@ -6,7 +6,8 @@ export const Container = ({
   maxWidth,
   text,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   style,
   ...props
 }) => {
@@ -22,6 +23,7 @@ export const Container = ({
         '' !== (align ?? '') ? `-align:${align}` : undefined,
         '' !== (gutters ?? '') ? `-gutters:${gutters}` : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)

package/src/layout-primitives/decorator/index.jsx

@@ -17,7 +17,8 @@ export const Decorator = ({
   gap,
   alignContent,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   justifyItems,
   shadow,
   position,
@@ -68,6 +69,7 @@ export const Decorator = ({
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         '' !== (alignContent ?? '') ? `-align-content:${alignContent}` : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
         '' !== (justifyItems ?? '') ? `-justify-items:${justifyItems}` : undefined,
         '' !== (padding ?? '') ? `-padding:${padding}` : undefined,

package/src/layout-primitives/frame/_index.scss

@@ -1,3 +1,5 @@
+@use '../../behaviors/responsive-context';
+
 @mixin abstract-frame() {
   --unitone--ratio: 16/9;
 
@@ -25,16 +27,8 @@
   }
 
   &[data-unitone-layout~="-switch"] {
-    &:where(:not([data-unitone-layout~="@container"])) {
-      @media (orientation: portrait) and (width < 600px) {
-        aspect-ratio: calc(1 / (var(--unitone--ratio))) !important;
-      }
-    }
-
-    &:where([data-unitone-layout~="@container"]) {
-      @container (width < 600px) {
-        aspect-ratio: calc(1 / (var(--unitone--ratio))) !important;
-      }
+    @include responsive-context.responsive-query('(width < 600px)') {
+      aspect-ratio: calc(1 / (var(--unitone--ratio))) !important;
     }
   }
 }

package/src/layout-primitives/frame/index.jsx

@@ -11,7 +11,7 @@ export const Frame = ({ ratio, switchRatio, queryContext, style, ...props }) =>
       data-unitone-layout={[
         'frame',
         switchRatio ? `-switch` : undefined,
-        queryContext ? `@${queryContext}` : undefined,
+        'container' === queryContext ? '@container' : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

package/src/layout-primitives/gutters/index.jsx

@@ -1,14 +1,9 @@
 import React from 'react';
 
-export const Gutters = ({ padding, containerType, fluidReference, style, ...props }) => {
+export const Gutters = ({ padding, style, ...props }) => {
   return (
     <div
-      data-unitone-layout={[
-        'gutters',
-        '' !== (padding ?? '') ? `-padding:${padding}` : undefined,
-        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
-        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
-      ]
+      data-unitone-layout={['gutters', '' !== (padding ?? '') ? `-padding:${padding}` : undefined]
         .filter(Boolean)
         .join(' ')}
       style={style}

package/src/layout-primitives/layers/_index.scss

@@ -1,3 +1,5 @@
+@use '../../behaviors/responsive-context';
+
 @mixin abstract-layers() {
   --unitone--columns: var(--unitone--grid-columns);
   --unitone--rows: var(--unitone--grid-rows);
@@ -7,7 +9,9 @@
   --unitone--row-gap: var(--unitone--gap, 1lh);
   --unitone--min-height: 0;
   --unitone--blur: 75px;
+  --unitone--container-type: initial;
 
+  container-type: var(--unitone--container-type);
   display: grid;
   grid-template-columns: repeat(var(--unitone--columns), 1fr);
   grid-template-rows: repeat(
@@ -19,18 +23,9 @@
   min-height: var(--unitone--min-height);
 
   &[data-unitone-layout~="-portrait"] {
-    &:where(:not([data-unitone-layout~="@container"])) {
-      @media (orientation: portrait) and (width < 600px) {
-        --unitone--columns: var(--unitone--grid-rows);
-        --unitone--rows: var(--unitone--grid-columns);
-      }
-    }
-
-    &:where([data-unitone-layout~="@container"]) {
-      @container (width < 600px) {
-        --unitone--columns: var(--unitone--grid-rows);
-        --unitone--rows: var(--unitone--grid-columns);
-      }
+    @include responsive-context.responsive-query('(width < 600px)') {
+      --unitone--columns: var(--unitone--grid-rows);
+      --unitone--rows: var(--unitone--grid-columns);
     }
   }
 

package/src/layout-primitives/layers/index.jsx

@@ -16,7 +16,8 @@ export const Layers = ({
   rowTrackSize,
   queryContext,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   style,
   ...props
 }) => {
@@ -41,8 +42,9 @@ export const Layers = ({
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         '' !== (columnGap ?? '') ? `-column-gap:${columnGap}` : undefined,
         '' !== (rowGap ?? '') ? `-row-gap:${rowGap}` : undefined,
-        queryContext ? `@${queryContext}` : undefined,
+        'container' === queryContext ? '@container' : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)

package/src/layout-primitives/marquee/index.jsx

@@ -1,16 +1,6 @@
 import React from 'react';
 
-export const Marquee = ({
-  duration,
-  gap,
-  itemWidth,
-  reverse,
-  pauseOnHover,
-  containerType,
-  fluidReference,
-  style,
-  ...props
-}) => {
+export const Marquee = ({ duration, gap, itemWidth, reverse, pauseOnHover, style, ...props }) => {
   style = {
     ...style,
     '--unitone--animation-duration': '' !== duration ? duration : undefined,
@@ -23,8 +13,6 @@ export const Marquee = ({
         'marquee-wrapper',
         reverse ? '-reverse' : undefined,
         pauseOnHover ? '-pause-on-hover' : undefined,
-        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
-        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

package/src/layout-primitives/reel/index.jsx

@@ -1,15 +1,6 @@
 import React from 'react';
 
-export const Reel = ({
-  gap,
-  height,
-  itemWidth,
-  noBar,
-  containerType,
-  fluidReference,
-  style,
-  ...props
-}) => {
+export const Reel = ({ gap, height, itemWidth, noBar, style, ...props }) => {
   style = {
     ...style,
     '--unitone--height': '' !== height ? height : undefined,
@@ -22,8 +13,6 @@ export const Reel = ({
         'reel',
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         noBar ? '-no-bar' : undefined,
-        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
-        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

package/src/layout-primitives/responsive-grid/_index.scss

@@ -4,7 +4,9 @@
   --unitone--gap: var(--unitone--global--gap);
   --unitone--column-gap: var(--unitone--gap);
   --unitone--row-gap: var(--unitone--gap);
+  --unitone--container-type: initial;
 
+  container-type: var(--unitone--container-type);
   display: grid;
   column-gap: var(--unitone--column-gap);
   row-gap: var(--unitone--row-gap);

package/src/layout-primitives/responsive-grid/index.jsx

@@ -11,7 +11,8 @@ export const ResponsiveGrid = ({
   stairs,
   stairsUp,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   style,
   ...props
 }) => {
@@ -33,6 +34,7 @@ export const ResponsiveGrid = ({
         '' !== (stairs ?? '') ? `-stairs:${stairs}` : undefined,
         '' !== (stairsUp ?? '') ? `-stairs-up:${stairsUp}` : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)

package/src/layout-primitives/stack/_index.scss

@@ -1,6 +1,8 @@
 @mixin abstract-stack() {
   --unitone--gap: var(--unitone--global--text-gap);
+  --unitone--container-type: initial;
 
+  container-type: var(--unitone--container-type);
   display: flex;
   flex-direction: column;
   gap: var(--unitone--gap);

package/src/layout-primitives/stack/index.jsx

@@ -9,7 +9,8 @@ export const Stack = ({
   dividerStyle,
   dividerColor,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   tagName = 'div',
   style,
   ...props
@@ -32,6 +33,7 @@ export const Stack = ({
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         negative ? '-negative' : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)

package/src/layout-primitives/switcher/_index.scss

@@ -4,7 +4,9 @@
   --unitone--row-gap: var(--unitone--gap);
   --unitone--threshold: var(--unitone--measure);
   --unitone--align-items: stretch;
+  --unitone--container-type: initial;
 
+  container-type: var(--unitone--container-type);
   display: flex;
   flex-wrap: wrap;
   column-gap: var(--unitone--column-gap);