Shadow

import { Panel, View } from "density-base-ui";

export default function ShadowExample() {
  return (
    <Panel depth="7">
      <View
        align="start"
        gap="xl"
        orientation="horizontal"
        padding={false}
        wrap
      >
        <div
          data-dn-depth="1"
          data-dn-radius="sm"
          data-dn-shadow="none"
          style={{ padding: "12px" }}
        >
          none
        </div>
        <div
          data-dn-depth="1"
          data-dn-radius="sm"
          data-dn-shadow="2xs"
          style={{ padding: "12px" }}
        >
          2xs
        </div>
        <div
          data-dn-depth="1"
          data-dn-radius="sm"
          data-dn-shadow="xs"
          style={{ padding: "12px" }}
        >
          xs
        </div>
        <div
          data-dn-depth="1"
          data-dn-radius="sm"
          data-dn-shadow="sm"
          style={{ padding: "12px" }}
        >
          sm
        </div>
        <div
          data-dn-depth="1"
          data-dn-radius="sm"
          data-dn-shadow="md"
          style={{ padding: "12px" }}
        >
          md
        </div>
        <div
          data-dn-depth="1"
          data-dn-radius="sm"
          data-dn-shadow="lg"
          style={{ padding: "12px" }}
        >
          lg
        </div>
        <div
          data-dn-depth="1"
          data-dn-radius="sm"
          data-dn-shadow="xl"
          style={{ padding: "12px" }}
        >
          xl
        </div>
        <div
          data-dn-depth="1"
          data-dn-radius="sm"
          data-dn-shadow="2xl"
          style={{ padding: "12px" }}
        >
          2xl
        </div>
        <div
          data-dn-depth="1"
          data-dn-radius="sm"
          data-dn-shadow="3xl"
          style={{ padding: "12px" }}
        >
          3xl
        </div>
      </View>
    </Panel>
  );
}