@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

package/src/styles/utilities/color.scss

@@ -1,39 +1,94 @@
 @use "../tokens/color";
-
-// TODO premyslieť, či je potrebné tieto farby nahradiť tokenmi, alebo hardcodovat aby neboli nepredvidatelne
+@use "sass:map";
 
 @layer utilities {
+  // Background utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "background-") == 1 {
+      .#{$name} {
+        background-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Surface utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "surface-") == 1 {
+      .#{$name} {
+        background-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Fill utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "fill-") == 1 {
+      .#{$name} {
+        background-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Border utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "border-") == 1 {
+      .#{$name} {
+        border-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Text color utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "text-") == 1 {
+      .#{$name} {
+        color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Icon color utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "icon-") == 1 {
+      .#{$name} {
+        color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Legacy classes - DEPRECATED (add deprecation warnings)
   .color-black {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-default instead of .color-black";
     color: color.$black !important;
   }
 
   .color-orange {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-accent instead of .color-orange";
     color: var(--color-text-accent) !important;
   }
 
   .color-gray {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-secondary instead of .color-gray";
     color: color.$gray-800 !important;
   }
 
   .color-white {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-inverse instead of .color-white";
     color: color.$white !important;
   }
 
   .color-blue {
+    @warn "Deprecated: Use .icon-information instead of .color-blue";
     color: var(--color-icon-information) !important;
   }
 
   .color-danger {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .icon-negative instead of .color-danger";
     color: var(--color-icon-negative) !important;
   }
 
   .bg-white {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .background-primary instead of .bg-white";
     background-color: color.$white !important;
     color: var(--color-text-default);
 
@@ -44,10 +99,9 @@
   }
 
   .bg-black {
-    // TODO: replace with new token when available
-    // background-color: color.$black !important;
+    @warn "Deprecated: Use .background-contrast instead of .bg-black";
     background-color: #141414 !important;
-    color: var(--color-text-default);
+    color: var(--color-text-inverse);
 
     .color-gray,
     &.color-gray {
@@ -61,74 +115,92 @@
   }
 
   .bg-orange {
+    @warn "Deprecated: Use .surface-secondary instead of .bg-orange";
     background-color: var(--color-surface-secondary) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-orange-dark {
+    @warn "Deprecated: Use .surface-tertiary instead of .bg-orange-dark";
     background-color: var(--color-surface-tertiary) !important;
     color: var(--color-text-inverse) !important;
   }
 
   .bg-gray {
+    @warn "Deprecated: Use .surface-subtle instead of .bg-gray";
     background-color: var(--color-surface-subtle) !important;
   }
 
+  .bg-gray-lighter {
+    @warn "Deprecated: Use .background-secondary instead of .bg-gray-lighter";
+    background-color: var(--color-background-secondary) !important;
+  }
+
   .bg-blue {
+    @warn "Deprecated: Use .fill-accent1 instead of .bg-blue";
     background-color: var(--color-fill-accent1) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-green {
+    @warn "Deprecated: Use .fill-accent2 instead of .bg-green";
     background-color: var(--color-fill-accent2) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-pink {
+    @warn "Deprecated: Use .fill-accent3 instead of .bg-pink";
     background-color: var(--color-fill-accent3) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-violet {
+    @warn "Deprecated: Use .fill-accent4 instead of .bg-violet";
     background-color: var(--color-fill-accent4) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-yellow {
+    @warn "Deprecated: Use .fill-accent5 instead of .bg-yellow";
     background-color: var(--color-fill-accent5) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-yellow-lighter {
-    // TODO: replace with new token when available
+    @warn "Deprecated: This class will be removed in future versions";
     background-color: color.$yellow-lighter !important;
     color: color.$black !important;
   }
 
   .bg-red {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .fill-negative instead of .bg-red";
     background-color: color.$red !important;
     color: color.$black !important;
   }
 
+  .bg-accent {
+    @warn "Deprecated: Use .background-accent instead of .bg-accent";
+    background-color: var(--color-background-accent) !important;
+    color: var(--color-text-default) !important;
+  }
+
   .bg-accent1-blog {
+    @warn "Deprecated: Use .background-accent1-blog instead of .bg-accent1-blog";
     background-color: var(--color-background-accent1-blog) !important;
     color: var(--color-text-default) !important;
   }
 
   .bg-accent2-blog {
+    @warn "Deprecated: Use .background-accent2-blog instead of .bg-accent2-blog";
     background-color: var(--color-background-accent2-blog) !important;
     color: var(--color-text-default) !important;
   }
 
+  // Legacy selection styles
   .bg-orange,
-  .bg-orange-dark {
+  .bg-orange-dark,
+  .surface-secondary,
+  .surface-tertiary {
     &::selection {
       background-color: var(--color-background-contrast);
       color: var(--color-text-inverse);
@@ -139,7 +211,14 @@
     color: var(--color-text-default);
   }
 
+  // Legacy classes - continued
   .bg-none {
+    @warn "Deprecated: Use .background-none instead of .bg-none";
+    background: none !important;
+  }
+
+  // Utility for removing background
+  .background-none {
     background: none !important;
   }
 }

package/src/styles/utilities/horizontal-scroll.scss

@@ -36,7 +36,7 @@
           flex-wrap: nowrap;
           overflow-x: auto;
           -webkit-overflow-scrolling: auto;
-          margin-bottom: space.get("medium");
+          margin-bottom: space.get("large");
         }
 
         &#{generate.variant-name($breakpoint)}-disable {

package/src/styles/utilities/index.scss

@@ -3,4 +3,5 @@
 @forward 'border';
 @forward 'layout';
 @forward 'visibility';
+@forward 'ordering';
 @forward 'horizontal-scroll';

package/src/styles/utilities/layout.scss

@@ -151,6 +151,12 @@
       border: 0;
       aspect-ratio: 1 / 1;
     }
+
+    .aspect-ratio-3-2 {
+      max-width: 100%;
+      border: 0;
+      aspect-ratio: 3 / 2;
+    }
   }
 
   @include aspect-ratio-classes;
@@ -171,6 +177,9 @@
     .d-inline-flex {
       display: inline-flex;
     }
+    .flex-column {
+      flex-direction: column;
+    }
   }
 
   @include display-classes;
@@ -180,6 +189,12 @@
       width: 100% !important;
     }
 
+    .fullwidth-xs-only {
+      @include breakpoint.get("xs", "only") {
+        width: 100% !important;
+      }
+    }
+
     .fullheight {
       height: 100% !important;
     }
@@ -191,4 +206,16 @@
   }
 
   @include block-classes();
+
+  @mixin position-classes {
+    .relative {
+      position: relative !important;
+    }
+
+    .absolute {
+      position: absolute !important;
+    }
+  }
+
+  @include position-classes();
 }

package/src/styles/utilities/ordering.scss

@@ -0,0 +1,44 @@
+@use "sass:map" as sassmap;
+@use "../tokens/breakpoint";
+@use "../tools/map";
+@use "../tools/generate";
+
+@mixin order-classes($max: 12) {
+  // xs (default) classes
+  @for $order from 1 through $max {
+    // .order-{n}
+    .order-#{$order} {
+      order: #{$order} !important;
+    }
+    // .order-{n}-xs-only
+    .order-#{$order}-xs-only {
+      @include breakpoint.get(xs, only) {
+        order: #{$order} !important;
+      }
+    }
+  }
+
+  // Responsive classes for each breakpoint (except xs)
+  @each $breakpoint, $size in breakpoint.$map {
+    @if $breakpoint != "xs" {
+      @for $order from 1 through $max {
+        // .order-{n}-{breakpoint}
+        .order-#{$order}#{generate.variant-name($breakpoint, "-")} {
+          @include breakpoint.get($breakpoint) {
+            order: #{$order} !important;
+          }
+        }
+        // .order-{n}-{breakpoint}-only
+        .order-#{$order}#{generate.variant-name($breakpoint, "-")}-only {
+          @include breakpoint.get($breakpoint, only) {
+            order: #{$order} !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+@layer utilities {
+  @include order-classes(2);
+}

package/src/styles/utilities/text.scss

@@ -6,6 +6,7 @@
 @use "../tokens/color";
 @use "../tokens/base";
 @use "../tokens/breakpoint";
+@use "sass:map";
 
 @layer utilities {
   strong,
@@ -28,15 +29,37 @@
 
   .underline {
     text-decoration: underline !important;
+    text-underline-offset: 0.1em !important;
+  }
+
+  .no-underline {
+    text-decoration: none !important;
+  }
+
+  .underline-hover {
+    text-decoration: none !important;
+
+    &:hover {
+      text-decoration: underline !important;
+    }
+  }
+
+  .no-accent {
+    color: inherit !important;
+    text-decoration: underline;
   }
 
   small,
   .small {
-    @include generate.css-map(typographyConfig.$body-text, "small");
+    @include generate.responsive-css-map(
+      map.get(typographyConfig.$body-text, "small")
+    );
   }
 
   .large {
-    @include generate.css-map(typographyConfig.$body-text, "large");
+    @include generate.responsive-css-map(
+      map.get(typographyConfig.$body-text, "large")
+    );
   }
 
   .text-nowrap {
@@ -94,6 +117,25 @@
     vertical-align: baseline !important;
   }
 
+  @each $name, $width in breakpoint.$map {
+    @if $name != "xs" {
+      @include breakpoint.get($name) {
+        .align-middle--#{$name} {
+          vertical-align: middle !important;
+        }
+        .align-top--#{$name} {
+          vertical-align: top !important;
+        }
+        .align-bottom--#{$name} {
+          vertical-align: bottom !important;
+        }
+        .align-baseline--#{$name} {
+          vertical-align: baseline !important;
+        }
+      }
+    }
+  }
+
   .reset-font-weight {
     font-weight: normal !important;
   }

package/src/styles/utilities/visibility.scss

@@ -10,10 +10,9 @@
   }
 
   @mixin show-for($breakpoint) {
-    display: none !important;
     @if sassmap.get(breakpoint.$map, $breakpoint) {
-      @include breakpoint.get($breakpoint) {
-        display: inherit !important;
+      @include breakpoint.get($breakpoint, downfrom) {
+        display: none !important;
       }
     } @else {
       @warn 'show-for() parameter breakpoint is not defined in the breakpoint.$map map';
@@ -21,7 +20,6 @@
   }
 
   @mixin hide-for($breakpoint) {
-    display: inherit !important;
     @if sassmap.get(breakpoint.$map, $breakpoint) {
       @include breakpoint.get($breakpoint) {
         display: none !important;

package/build/components/Accordion/index.js

@@ -1,16 +0,0 @@
-import e,{createContext as t,useRef as r,useEffect as n,useCallback as o,useState as i,useContext as c}from"react";function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,m(n.key),n)}}function u(e,t,r){return t&&l(e.prototype,t),r&&l(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e}function f(e,t,r){return(t=m(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(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 y(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?d(Object(r),!0).forEach(function(t){f(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):d(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function p(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}function v(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,c,a=[],s=!0,l=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;s=!1}else for(;!(s=(n=i.call(r)).done)&&(a.push(n.value),a.length!==t);s=!0);}catch(e){l=!0,o=e}finally{try{if(!s&&null!=r.return&&(c=r.return(),Object(c)!==c))return}finally{if(l)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return a(e,t);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)?a(e,t):void 0}}(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 m(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function b(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var h,g={exports:{}};
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/var O,k=b((h||(h=1,O=g,function(){var e={}.hasOwnProperty;function t(){for(var e="",t=0;t<arguments.length;t++){var o=arguments[t];o&&(e=n(e,r(o)))}return e}function r(r){if("string"==typeof r||"number"==typeof r)return r;if("object"!=typeof r)return"";if(Array.isArray(r))return t.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var o="";for(var i in r)e.call(r,i)&&r[i]&&(o=n(o,i));return o}function n(e,t){return t?e?e+" "+t:e+t:e}O.exports?(t.default=t,O.exports=t):window.classNames=t}()),g.exports)),j={TAB:["Tab"],ARROWLEFT:["Left","ArrowLeft"],ARROWUP:["Up","ArrowUp"],ARROWRIGHT:["Right","ArrowRight"],ARROWDOWN:["Down","ArrowDown"]},w=function(){return u(function e(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{direction:"horizontal"};s(this,e),this.elems=t,this.config=r,this.isActive=!1,this.onKeydown=this.onKeydown.bind(this)},[{key:"init",value:function(){document.addEventListener("keydown",this.onKeydown),this.isActive=!0}},{key:"destroy",value:function(){document.removeEventListener("keydown",this.onKeydown),this.isActive=!1}},{key:"update",value:function(e){this.elems=e}},{key:"onKeydown",value:function(e){var t=this.elems.indexOf(document.activeElement);(j.ARROWUP.includes(e.key)||j.ARROWDOWN.includes(e.key))&&"horizontal"===this.config.direction||(j.ARROWLEFT.includes(e.key)||j.ARROWRIGHT.includes(e.key))&&"vertical"===this.config.direction||((j.ARROWDOWN.includes(e.key)||j.ARROWRIGHT.includes(e.key))&&(e.preventDefault(),t>=0&&t<this.elems.length-1?this.elems[t+1].focus():this.elems[0].focus()),(j.ARROWUP.includes(e.key)||j.ARROWLEFT.includes(e.key))&&(e.preventDefault(),t>=1?this.elems[t-1].focus():this.elems[this.elems.length-1].focus()),j.TAB.includes(e.key)&&this.destroy())}}])}();function A(e){var t=e.element,r=e.attribute,n=e.action,o=e.value,i=e.dispatchEvent,c=void 0===i||i,a=e.eventDetail,s=null;if(!(t&&t instanceof Element))return s;if("focus"===n&&setTimeout(function(){return t.focus()},20),"click"===n&&t.click(),"class"===r&&"string"==typeof o&&(t.classList.toggle(o),s=o),"text"===r){var l=t.textContent;t.textContent=(null==o?void 0:o.toString())||"",s=l}return"class"!==r&&"text"!==r&&void 0===n&&(s=t.getAttribute(r),"hidden"===r?t.hasAttribute(r)?t.removeAttribute(r):t.setAttribute(r,""):o?t.setAttribute(r,String(o)):t.setAttribute(r,String(!("true"===s)))),c&&t.dispatchEvent(new CustomEvent("toggle",{detail:a,bubbles:!0})),s}var S={buttonSelector:"[data-accordion-toggle]"},x=function(){return u(function e(t,r){return s(this,e),this.element=t,this.config=y(y({},S),r),this.onFocus=this.onFocus.bind(this),this.onClick=this.onClick.bind(this),this.element.ODS_Accordion=this,this.init(),this},[{key:"onFocus",value:function(e){this.rovingTabindex.isActive||this.rovingTabindex.init();var t=e.currentTarget;window.location.hash.substring(1)===t.getAttribute("id")&&"false"===t.getAttribute("aria-expanded")&&t.click()}},{key:"init",value:function(){var e=this;this.buttons=Array.from(this.element.querySelectorAll(this.config.buttonSelector)),this.rovingTabindex?this.rovingTabindex.update(this.buttons):this.rovingTabindex=new w(this.buttons,{direction:"vertical"}),this.buttons.forEach(function(t){t.addEventListener("focus",e.onFocus),t.getAttribute("data-toggle")||t.addEventListener("click",e.onClick)})}},{key:"onClick",value:function(e){var t=e.currentTarget,r=this.element.querySelector("#".concat(t.getAttribute("aria-controls")));A({element:t,attribute:"aria-expanded"}),A({element:r,attribute:"hidden"})}},{key:"destroy",value:function(){var e=this;this.rovingTabindex.destroy(),this.buttons.forEach(function(t){t.removeEventListener("focus",e.onFocus),t.removeEventListener("click",e.onClick)})}},{key:"update",value:function(){this.destroy(),this.init()}}],[{key:"getInstance",value:function(e){return e&&e.ODS_Accordion?e.ODS_Accordion:null}}])}(),_=t(null),N={current:0};var R,T={exports:{}},E={};var P,D,C={};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */function W(){return P||(P=1,"production"!==process.env.NODE_ENV&&function(){function t(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===A?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case y:return"Fragment";case v:return"Profiler";case p:return"StrictMode";case g:return"Suspense";case O:return"SuspenseList";case w:return"Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case d:return"Portal";case b:return(e.displayName||"Context")+".Provider";case m:return(e._context.displayName||"Context")+".Consumer";case h:var r=e.render;return(e=e.displayName)||(e=""!==(e=r.displayName||r.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case k:return null!==(r=e.displayName||null)?r:t(e.type)||"Memo";case j:r=e._payload,e=e._init;try{return t(e(r))}catch(e){}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch(e){t=!0}if(t){var n=(t=console).error,o="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),r(e)}}function o(e){if(e===y)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===j)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function i(){return Error("react-stack-top-frame")}function c(){var e=t(this.type);return R[e]||(R[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function a(e,r,o,i,a,u,d,y){var p,v=r.children;if(void 0!==v)if(i)if(_(v)){for(i=0;i<v.length;i++)s(v[i]);Object.freeze&&Object.freeze(v)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else s(v);if(x.call(r,"key")){v=t(e);var m=Object.keys(r).filter(function(e){return"key"!==e});i=0<m.length?"{key: someKey, "+m.join(": ..., ")+": ...}":"{key: someKey}",P[v+i]||(m=0<m.length?"{"+m.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',i,v,m,v),P[v+i]=!0)}if(v=null,void 0!==o&&(n(o),v=""+o),function(e){if(x.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),v=""+r.key),"key"in r)for(var b in o={},r)"key"!==b&&(o[b]=r[b]);else o=r;return v&&function(e,t){function r(){l||(l=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}(o,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,t,r,n,o,i,a,s){return r=i.ref,e={$$typeof:f,type:e,key:t,props:i,_owner:o},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:c}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,v,u,0,null===(p=S.A)?null:p.getOwner(),o,d,y)}function s(e){"object"==typeof e&&null!==e&&e.$$typeof===f&&e._store&&(e._store.validated=1)}var l,u=e,f=Symbol.for("react.transitional.element"),d=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),m=Symbol.for("react.consumer"),b=Symbol.for("react.context"),h=Symbol.for("react.forward_ref"),g=Symbol.for("react.suspense"),O=Symbol.for("react.suspense_list"),k=Symbol.for("react.memo"),j=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),A=Symbol.for("react.client.reference"),S=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,x=Object.prototype.hasOwnProperty,_=Array.isArray,N=console.createTask?console.createTask:function(){return null},R={},T=(u={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(u,i)(),E=N(o(i)),P={};C.Fragment=y,C.jsx=function(e,t,r,n,i){var c=1e4>S.recentlyCreatedOwnerStacks++;return a(e,t,r,!1,0,i,c?Error("react-stack-top-frame"):T,c?N(o(e)):E)},C.jsxs=function(e,t,r,n,i){var c=1e4>S.recentlyCreatedOwnerStacks++;return a(e,t,r,!0,0,i,c?Error("react-stack-top-frame"):T,c?N(o(e)):E)}}()),C}var I=(D||(D=1,"production"===process.env.NODE_ENV?T.exports=function(){if(R)return E;R=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(t,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var i in n={},r)"key"!==i&&(n[i]=r[i]);else n=r;return r=n.ref,{$$typeof:e,type:t,key:o,ref:void 0!==r?r:null,props:n}}return E.Fragment=t,E.jsx=r,E.jsxs=r,E}():T.exports=W()),T.exports),L=["className","children","headingLevel","size","isEnclosed","lastItemNoBottomBorder"],F="accordion",z=function(e){var t=e.className,i=e.children,c=e.headingLevel,a=void 0===c?3:c,s=e.size,l=e.isEnclosed,u=e.lastItemNoBottomBorder,d=p(e,L),m=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=r(null),c=r(t),a=r(null);n(function(){c.current=null!=t?t:{}},[t]);var s=o(function(t){var r,n,o,s;a.current&&a.current!==t&&i.current&&(null===(r=(n=i.current).destroy)||void 0===r||r.call(n),i.current=null),a.current=t,t&&(null===i.current?i.current=new e(t,c.current):null===(o=(s=i.current).update)||void 0===o||o.call(s,c.current))},[e]);return n(function(){return function(){var e,t;i.current&&(null===(e=(t=i.current).destroy)||void 0===e||e.call(t),i.current=null),a.current=null}},[e]),[s,i]}(x),b=v(m,1)[0],h=k(F,f(f(f({},"".concat(F,"--").concat(s),s),"".concat(F,"--enclosed"),l),"".concat(F,"--last-item-no-bottom-border"),u),t);return I.jsx(_.Provider,{value:a,children:I.jsx("ul",y(y({className:h,ref:b,"data-accordion":"true"},d),{},{children:i}))})};z.displayName="Accordion";var $=e.createContext("/sprite.svg"),U=["className","alt","color","name","size","spritePath","type"],H="icon",K=function(e){var t=e.className,r=e.alt,n=e.color,o=e.name,i=e.size,a=e.spritePath,s=void 0===a?"/sprite.svg":a,l=e.type,u=void 0===l?"icon":l,d=p(e,U),v=c($),m="pictogram"===u,b=k(H,f(f(f({},"".concat(H,"--").concat(i),i),"".concat(H,"--").concat(n),n),"".concat(H,"--pictogram"),m),t);if(m){var h="/sprite.svg"!==s||void 0===v?s:v;return I.jsxs("svg",y(y({className:b,"aria-hidden":void 0!==r?void 0:"true",role:void 0!==r?"img":void 0},d),{},{children:[void 0!==r&&r.length>0&&I.jsx("title",{children:r}),I.jsx("use",{className:"".concat(H,"__use ").concat(H,"__use--light"),xlinkHref:"".concat(h,"#").concat(o)}),I.jsx("use",{className:"".concat(H,"__use ").concat(H,"__use--dark"),xlinkHref:"".concat(h,"#").concat(o,"--dark")})]}))}return I.jsxs("svg",y(y({className:b,"aria-hidden":void 0!==r?void 0:"true",role:void 0!==r?"img":void 0},d),{},{children:[void 0!==r&&r.length>0&&I.jsx("title",{children:r}),I.jsx("use",{xlinkHref:"/sprite.svg"!==s||void 0===v?"".concat(s,"#").concat(o):"".concat(v,"#").concat(o)})]}))};K.displayName="Icon";var B=["className","title","renderTitle","id","isActive","toggleAttribute"],G="accordion",J=function(t){var r=t.className,n=t.title,o=t.renderTitle,i=t.id,c=t.isActive,a=t.toggleAttribute,s=void 0===a?"data-accordion-toggle":a,l=p(t,B),u=e.useContext(_),d="h".concat(u||3),v="data-accordion-toggle"===s,m=y(y(f({type:"button","aria-expanded":c,className:"".concat(G,"__button"),"aria-controls":"".concat(i,"-section"),id:i},s,!0),v&&{"data-toggle":JSON.stringify([{target:"self",attribute:"aria-expanded"}])}),l);return I.jsx(d,{className:k("".concat(G,"__header"),r),children:I.jsxs("button",y(y({},m),{},{children:[o?o(n):I.jsx("span",{className:"accordion__title",children:n}),I.jsx(K,{className:"".concat(G,"__icon"),name:"chevron-down",size:"medium"})]}))})};J.displayName="AccordionHeader";var M=["id","isActive","title","renderTitle","renderHeader","children","className"],V=function(e){var t,o,c,a,s,l=e.id,u=e.isActive,f=e.title,d=e.renderTitle,m=e.renderHeader,b=e.children,h=e.className,g=p(e,M),O=k("accordion__item",h),j=(o=v(i(t=l),2),c=o[0],a=o[1],s=r(t),n(function(){if(!t){N.current+=1;var e="id-".concat(N.current);s.current=e,a(e)}},[t]),c||s.current||t||"id-0");return I.jsxs("li",{className:O,children:[m?m(f,j,u||!1):I.jsx(J,y({id:j,isActive:u,title:f,renderTitle:d},g)),I.jsx("div",y(y({id:"".concat(j,"-section"),"aria-labelledby":j,className:k("accordion__body",{"is-active":u})},u?{}:{hidden:!0}),{},{children:b}))]})};V.displayName="AccordionItem";export{z as Accordion,V as AccordionItem};
-//# sourceMappingURL=index.js.map